homebox/frontend/components/global/DateTime.vue

<template>
  {{ value }}
</template>

<script setup lang="ts">
  enum DateTimeFormat {
    RELATIVE = "relative",
    LONG = "long",
    SHORT = "short",
  }

  const value = computed(() => {
    if (!props.date) {
      return "";
    }

    const dt = typeof props.date === "string" ? new Date(props.date) : props.date;
    if (!dt) {
      return "";
    }

    if (!validDate(dt)) {
      return "";
    }

    switch (props.format) {
      case DateTimeFormat.RELATIVE:
        return useTimeAgo(dt).value + useDateFormat(dt, " (MM-DD-YYYY)").value;
      case DateTimeFormat.LONG:
        return useDateFormat(dt, "MM-DD-YYYY (dddd)").value;
      case DateTimeFormat.SHORT:
        return useDateFormat(dt, "MM-DD-YYYY").value;
      default:
        return "";
    }
  });

  const props = defineProps({
    date: {
      type: [Date, String],
      required: true,
    },
    format: {
      type: String as () => DateTimeFormat,
      default: "relative",
    },
  });
</script>