advent22/ui/src/components/calendar/SVGRect.vue

<template>
  <rect
    :class="color !== undefined ? `visible ${color}` : ''"
    :x="rectangle.left"
    :y="rectangle.top"
    :width="rectangle.width"
    :height="rectangle.height"
  />
</template>

<script lang="ts">
import { Rectangle } from "@/lib/rectangle";
import { Options, Vue } from "vue-class-component";

// type RectClass = "red" | "yellow" | "green" | "blue" | "purple";
type RectColor = "yellow" | "green";

@Options({
  props: {
    color: {
      type: String,
      required: false,
    },
    rectangle: Rectangle,
  },
})
export default class extends Vue {
  public color?: RectColor;
  public rectangle!: Rectangle;
}
</script>

<style lang="scss" scoped>
rect {
  fill: transparent;

  &.visible {
    fill-opacity: 0.2;
    stroke-opacity: 0.9;
    stroke-width: 1;

    &.yellow {
      fill: gold;
      stroke: yellow;
    }

    &.green {
      fill: lightgreen;
      stroke: green;
    }
  }
}
</style>