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

<template>
  <SVGRect
    style="cursor: pointer"
    :variant="visible || hovered ? 'primary' : undefined"
    :rectangle="door.position"
    @mouseover="hovered = true"
    @mouseout="hovered = false"
  >
    <div class="has-text-danger">{{ door.day }}</div>
  </SVGRect>
</template>

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

import SVGRect from "./SVGRect.vue";

@Options({
  components: {
    SVGRect,
  },
  props: {
    door: Door,
    visible: {
      type: Boolean,
      default: false,
    },
  },
})
export default class extends Vue {
  public door!: Door;
  public visible!: boolean;

  public hovered = false;
}
</script>