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

<template>
  <SVGRect
    variant="primary"
    :visible="store.is_touch_device || force_visible"
    :rectangle="door.position"
  >
    <div
      class="has-text-danger"
      style="
        text-shadow:
          0 0 10px white,
          0 0 20px white;
      "
    >
      {{ door.day }}
    </div>
  </SVGRect>
</template>

<script setup lang="ts">
import { Door } from "@/lib/rects/door";
import { advent22Store } from "@/lib/store";

import type { VueLike } from "@/lib/helpers";
import SVGRect from "./SVGRect.vue";

const store = advent22Store();

withDefaults(
  defineProps<{
    door: VueLike<Door>;
    force_visible?: boolean;
  }>(),
  {
    force_visible: false,
  },
);
</script>