74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<template>
|
|
<foreignObject
|
|
:x="Math.round(store.calendar_aspect_ratio * rectangle.left)"
|
|
:y="rectangle.top"
|
|
:width="Math.round(store.calendar_aspect_ratio * rectangle.width)"
|
|
:height="rectangle.height"
|
|
:style="`transform: scaleX(${1 / store.calendar_aspect_ratio})`"
|
|
>
|
|
<div
|
|
v-if="variant !== undefined"
|
|
xmlns="http://www.w3.org/1999/xhtml"
|
|
class="px-4 is-flex is-align-items-center is-justify-content-center is-size-1 has-text-weight-bold"
|
|
style="height: inherit"
|
|
>
|
|
<slot name="default" />
|
|
</div>
|
|
</foreignObject>
|
|
<rect
|
|
v-bind="$attrs"
|
|
:class="variant !== undefined ? variant : ''"
|
|
:x="rectangle.left"
|
|
:y="rectangle.top"
|
|
:width="rectangle.width"
|
|
:height="rectangle.height"
|
|
/>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Rectangle } from "@/lib/rectangle";
|
|
import { advent22Store } from "@/plugins/store";
|
|
import { Options, Vue } from "vue-class-component";
|
|
|
|
type BulmaVariant =
|
|
| "primary"
|
|
| "link"
|
|
| "info"
|
|
| "success"
|
|
| "warning"
|
|
| "danger";
|
|
|
|
@Options({
|
|
props: {
|
|
variant: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
rectangle: Rectangle,
|
|
},
|
|
})
|
|
export default class extends Vue {
|
|
public variant?: BulmaVariant;
|
|
public rectangle!: Rectangle;
|
|
|
|
public readonly store = advent22Store();
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/bulma-scheme";
|
|
|
|
rect {
|
|
fill: transparent;
|
|
fill-opacity: 0.3;
|
|
stroke-opacity: 0.9;
|
|
stroke-width: 1;
|
|
|
|
@each $name, $color in $advent22-colors {
|
|
&.#{$name} {
|
|
fill: $color;
|
|
stroke: $color;
|
|
}
|
|
}
|
|
}
|
|
</style>
|