orio-ui 1.23.2 → 1.24.0

package/dist/runtime/components/Canvas/tools/exportTool.js

@@ -6,11 +6,15 @@ const MIME_TYPES = {
   jpeg: "image/jpeg",
   webp: "image/webp"
 };
+export const DEFAULT_EXPORT_OPTIONS = {
+  format: "png",
+  quality: 0.92,
+  filename: "canvas",
+  scale: 1
+};
 function renderNodesTo(target, nodes, tools) {
   const toolMap = new Map(tools.map((t) => [t.id, t]));
-  const ordered = [...nodes].sort(
-    (a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0)
-  );
+  const ordered = [...nodes].sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
   for (const node of ordered) {
     const renderFn = toolMap.get(node.type)?.render;
     if (!renderFn) continue;
@@ -39,6 +43,67 @@ function downloadBlob(blob, filename) {
   a.remove();
   setTimeout(() => URL.revokeObjectURL(url), 1e3);
 }
+function resolveFormat(format) {
+  return MIME_TYPES[format] ? format : "png";
+}
+function sanitizeFilename(name) {
+  return (name ?? "canvas").replace(/[^A-Za-z0-9._-]/g, "_") || "canvas";
+}
+export async function renderCanvasSnapshot(snapshot, options = {}) {
+  const format = resolveFormat(options.format);
+  const quality = options.quality ?? DEFAULT_EXPORT_OPTIONS.quality;
+  const scale = options.scale ?? DEFAULT_EXPORT_OPTIONS.scale;
+  if (!Number.isFinite(scale) || scale <= 0) {
+    throw new Error(
+      `[orio-canvas] invalid export option: scale must be a finite number > 0 (got ${scale})`
+    );
+  }
+  if (format !== "png" && options.quality !== void 0 && (!Number.isFinite(quality) || quality < 0 || quality > 1)) {
+    throw new Error(
+      `[orio-canvas] invalid export option: quality must be a finite number in [0, 1] (got ${quality})`
+    );
+  }
+  const mime = MIME_TYPES[format];
+  const ext = format === "jpeg" ? "jpg" : format;
+  const filename = `${sanitizeFilename(options.filename)}.${ext}`;
+  const out = document.createElement("canvas");
+  const w = Math.max(1, Math.round(snapshot.width * scale));
+  const h = Math.max(1, Math.round(snapshot.height * scale));
+  out.width = w;
+  out.height = h;
+  const c = out.getContext("2d");
+  if (!c) {
+    throw new Error("[orio-canvas] failed to acquire 2D context for export");
+  }
+  c.scale(scale, scale);
+  if (format === "jpeg") {
+    c.fillStyle = "#ffffff";
+    c.fillRect(0, 0, snapshot.width, snapshot.height);
+  }
+  renderNodesTo(c, snapshot.nodes, snapshot.tools);
+  const encoderQuality = format === "png" ? void 0 : quality;
+  const blob = await new Promise((resolve, reject) => {
+    out.toBlob(
+      (b) => b ? resolve(b) : reject(new Error("[orio-canvas] toBlob returned null")),
+      mime,
+      encoderQuality
+    );
+  });
+  const dataURL = out.toDataURL(mime, encoderQuality);
+  const file = new File([blob], filename, { type: mime });
+  return { blob, dataURL, file, format, width: w, height: h, filename };
+}
+export async function performExport(snapshot, options = {}) {
+  const result = await renderCanvasSnapshot(snapshot, options);
+  if (options.onExport) {
+    await options.onExport(result);
+  }
+  const shouldDownload = options.download ?? !options.onExport;
+  if (shouldDownload) {
+    downloadBlob(result.blob, result.filename);
+  }
+  return result;
+}
 export function exportTool(options = {}) {
   return defineCanvasTool({
     id: "export",
@@ -47,43 +112,25 @@ export function exportTool(options = {}) {
     kind: "action",
     tooltip: ExportTooltip,
     defaultOptions: {
-      format: "png",
-      quality: 0.92,
-      filename: "canvas",
-      scale: 1,
+      ...DEFAULT_EXPORT_OPTIONS,
       ...options
     },
     disabled(api) {
       return api.nodes.value.length === 0;
     },
     action(api) {
-      const { quality, scale } = api.options;
       const { width, height } = api.size();
-      const knownFormat = MIME_TYPES[api.options.format] ? api.options.format : "png";
-      const mime = MIME_TYPES[knownFormat];
-      const ext = knownFormat === "jpeg" ? "jpg" : knownFormat;
-      const sanitized = api.options.filename.replace(/[^A-Za-z0-9._-]/g, "_") || "canvas";
-      const out = document.createElement("canvas");
-      const w = Math.max(1, Math.round(width * scale));
-      const h = Math.max(1, Math.round(height * scale));
-      out.width = w;
-      out.height = h;
-      const c = out.getContext("2d");
-      if (!c) return;
-      c.scale(scale, scale);
-      if (knownFormat === "jpeg") {
-        c.fillStyle = "#ffffff";
-        c.fillRect(0, 0, width, height);
-      }
-      renderNodesTo(c, api.nodes.value, api.getTools());
-      out.toBlob(
-        (blob) => {
-          if (!blob) return;
-          downloadBlob(blob, `${sanitized}.${ext}`);
+      performExport(
+        {
+          nodes: api.nodes.value,
+          tools: api.getTools(),
+          width,
+          height
         },
-        mime,
-        knownFormat === "png" ? void 0 : quality
-      );
+        api.options
+      ).catch((err) => {
+        console.error("[orio-canvas] export failed", err);
+      });
     }
   });
 }

package/dist/runtime/components/Form.d.vue.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(FormProps & {
         modelValue?: T;
     }) & {
-        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
         onSubmit?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});

package/dist/runtime/components/Form.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(FormProps & {
         modelValue?: T;
     }) & {
-        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
         onSubmit?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});

package/dist/runtime/components/date/Picker.d.vue.ts

@@ -0,0 +1,26 @@
+import type { ControlProps } from "../ControlElement.vue.js";
+import type { CalendarMarker } from "../Calendar.vue.js";
+interface Props extends ControlProps {
+    placeholder?: string;
+    min?: string | null;
+    max?: string | null;
+    markers?: CalendarMarker[];
+    getMarker?: (iso: string) => CalendarMarker | null;
+    isDisabled?: (iso: string) => boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    markers: CalendarMarker[];
+    min: string | null;
+    max: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/date/Picker.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { formatDate } from "../../utils/date";
+const props = defineProps({
+  placeholder: { type: String, required: false },
+  min: { type: [String, null], required: false, default: null },
+  max: { type: [String, null], required: false, default: null },
+  markers: { type: Array, required: false, default: () => [] },
+  getMarker: { type: Function, required: false },
+  isDisabled: { type: Function, required: false },
+  appearance: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  group: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  layout: { type: String, required: false },
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
+});
+const value = defineModel({ type: [String, null], ...{ default: null } });
+const { locale, t } = useI18n();
+const display = computed(() => formatDate(value.value, locale.value));
+const placeholderText = computed(
+  () => props.placeholder ?? t("datePicker.placeholder")
+);
+const calendarIsDisabled = computed(() => (iso) => {
+  if (props.min && iso < props.min) return true;
+  if (props.max && iso > props.max) return true;
+  return props.isDisabled?.(iso) ?? false;
+});
+function pick(iso, toggle) {
+  value.value = iso;
+  toggle(false);
+}
+</script>
+
+<template>
+  <orio-date-picker-trigger
+    v-bind="props"
+    :text="display"
+    :placeholder="placeholderText"
+  >
+    <template #default="{ toggle }">
+      <orio-calendar
+        :selected="value"
+        :markers
+        :get-marker="getMarker"
+        :is-disabled="calendarIsDisabled"
+        @select="pick($event, toggle)"
+      />
+    </template>
+  </orio-date-picker-trigger>
+</template>

package/dist/runtime/components/date/Picker.vue.d.ts

@@ -0,0 +1,26 @@
+import type { ControlProps } from "../ControlElement.vue.js";
+import type { CalendarMarker } from "../Calendar.vue.js";
+interface Props extends ControlProps {
+    placeholder?: string;
+    min?: string | null;
+    max?: string | null;
+    markers?: CalendarMarker[];
+    getMarker?: (iso: string) => CalendarMarker | null;
+    isDisabled?: (iso: string) => boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    markers: CalendarMarker[];
+    min: string | null;
+    max: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/date/PickerTrigger.d.vue.ts

@@ -0,0 +1,23 @@
+import type { ControlProps } from "../ControlElement.vue.js";
+interface Props extends ControlProps {
+    text?: string;
+    placeholder?: string;
+}
+declare var __VLS_21: {
+    toggle: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    text: string;
+    placeholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/date/PickerTrigger.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  text: { type: String, required: false, default: "" },
+  placeholder: { type: String, required: false, default: "" },
+  appearance: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  group: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  layout: { type: String, required: false },
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
+});
+const controlProps = computed(() => {
+  const { text, placeholder, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <orio-control-element v-slot="{ id }" v-bind="controlProps">
+    <orio-popover position="bottom-right" :offset="5">
+      <template #default="{ toggle, isOpen }">
+        <button
+          :id
+          type="button"
+          class="date-trigger"
+          :aria-expanded="isOpen"
+          @click="toggle()"
+        >
+          <span :class="{ placeholder: !text }">
+            {{ text || placeholder }}
+          </span>
+          <orio-icon name="calendar" />
+        </button>
+      </template>
+      <template #content="{ toggle }">
+        <slot :toggle />
+      </template>
+    </orio-popover>
+  </orio-control-element>
+</template>
+
+<style scoped>
+.date-trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--control-gap);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--control-radius);
+  padding: var(--control-py) var(--control-px);
+  color: var(--color-text);
+  cursor: pointer;
+  user-select: none;
+  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
+}
+.date-trigger:hover {
+  border-color: var(--color-accent);
+  background-color: var(--color-surface);
+}
+.date-trigger[aria-expanded=true], .date-trigger:focus-visible {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-surface);
+  outline: none;
+}
+.date-trigger .placeholder {
+  color: var(--color-muted);
+}
+.date-trigger .icon {
+  color: var(--color-muted);
+  transition: color 0.2s ease;
+}
+.date-trigger:hover .icon {
+  color: var(--color-accent);
+}
+</style>

package/dist/runtime/components/date/PickerTrigger.vue.d.ts

@@ -0,0 +1,23 @@
+import type { ControlProps } from "../ControlElement.vue.js";
+interface Props extends ControlProps {
+    text?: string;
+    placeholder?: string;
+}
+declare var __VLS_21: {
+    toggle: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    text: string;
+    placeholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/date/RangePicker.d.vue.ts

@@ -0,0 +1,28 @@
+import type { ControlProps } from "../ControlElement.vue.js";
+import type { CalendarMarker } from "../Calendar.vue.js";
+import { type DateRange } from "../../utils/date.js";
+export type { DateRange };
+interface Props extends ControlProps {
+    placeholder?: string;
+    min?: string | null;
+    max?: string | null;
+    markers?: CalendarMarker[];
+    getMarker?: (iso: string) => CalendarMarker | null;
+    isDisabled?: (iso: string) => boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: DateRange;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: DateRange) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateRange) => any) | undefined;
+}>, {
+    markers: CalendarMarker[];
+    min: string | null;
+    max: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/date/RangePicker.vue

@@ -0,0 +1,148 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import {
+  addMonths,
+  formatDate,
+  formatISO,
+  parseISO,
+  startOfMonth
+} from "../../utils/date";
+const props = defineProps({
+  placeholder: { type: String, required: false },
+  min: { type: [String, null], required: false, default: null },
+  max: { type: [String, null], required: false, default: null },
+  markers: { type: Array, required: false, default: () => [] },
+  getMarker: { type: Function, required: false },
+  isDisabled: { type: Function, required: false },
+  appearance: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  group: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  layout: { type: String, required: false },
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
+});
+const range = defineModel({ type: Object, ...{
+  default: () => ({ start: null, end: null })
+} });
+const { locale, t } = useI18n();
+const display = computed(() => {
+  const start = formatDate(range.value?.start, locale.value);
+  const end = formatDate(range.value?.end, locale.value);
+  if (start && end) return `${start} \u2013 ${end}`;
+  return start || end || "";
+});
+const placeholderText = computed(
+  () => props.placeholder ?? t("dateRangePicker.placeholder")
+);
+const seedMonth = startOfMonth(parseISO(range.value?.start) ?? /* @__PURE__ */ new Date());
+const leftAnchor = ref(formatISO(seedMonth));
+const rightAnchor = ref(formatISO(addMonths(seedMonth, 1)));
+watch(
+  () => range.value?.start,
+  (start) => {
+    const date = parseISO(start);
+    if (!date) return;
+    const monthIso = formatISO(startOfMonth(date));
+    if (leftAnchor.value === monthIso || rightAnchor.value === monthIso) return;
+    leftAnchor.value = monthIso;
+    rightAnchor.value = formatISO(addMonths(startOfMonth(date), 1));
+  }
+);
+const hovering = ref(null);
+const previewEnd = computed(() => {
+  if (range.value?.end) return range.value.end;
+  if (!hovering.value || !range.value?.start) return null;
+  const start = parseISO(range.value.start);
+  const hover = parseISO(hovering.value);
+  if (!start || !hover) return null;
+  return hover > start ? hovering.value : null;
+});
+const previewStart = computed(() => {
+  if (range.value?.start && range.value?.end) return range.value.start;
+  if (!hovering.value || !range.value?.start) return range.value?.start ?? null;
+  const start = parseISO(range.value.start);
+  const hover = parseISO(hovering.value);
+  if (!start || !hover) return range.value.start;
+  return hover < start ? hovering.value : range.value.start;
+});
+const previewMarker = computed(() => {
+  if (!previewStart.value || !previewEnd.value) return null;
+  return {
+    variant: "accent",
+    start: previewStart.value,
+    end: previewEnd.value
+  };
+});
+const calendarGetMarker = computed(() => (iso) => {
+  const preview = previewMarker.value;
+  if (preview && iso >= preview.start && iso <= preview.end) return preview;
+  return props.getMarker?.(iso) ?? null;
+});
+const calendarIsDisabled = computed(() => (iso) => {
+  if (props.min && iso < props.min) return true;
+  if (props.max && iso > props.max) return true;
+  return props.isDisabled?.(iso) ?? false;
+});
+function pick(iso, toggle) {
+  const current = range.value ?? { start: null, end: null };
+  if (!current.start || current.start && current.end) {
+    range.value = { start: iso, end: null };
+    return;
+  }
+  const startDate = parseISO(current.start);
+  const picked = parseISO(iso);
+  if (!startDate || !picked) return;
+  if (picked < startDate) {
+    range.value = { start: iso, end: current.start };
+  } else {
+    range.value = { start: current.start, end: iso };
+  }
+  hovering.value = null;
+  toggle(false);
+}
+function onHover(iso) {
+  hovering.value = iso;
+}
+function clearHover() {
+  hovering.value = null;
+}
+</script>
+
+<template>
+  <orio-date-picker-trigger
+    v-bind="props"
+    :text="display"
+    :placeholder="placeholderText"
+  >
+    <template #default="{ toggle }">
+      <div class="range-content" @mouseleave="clearHover">
+        <orio-calendar
+          v-model:anchor="leftAnchor"
+          :markers
+          :get-marker="calendarGetMarker"
+          :is-disabled="calendarIsDisabled"
+          @select="pick($event, toggle)"
+          @day-enter="onHover"
+        />
+        <orio-calendar
+          v-model:anchor="rightAnchor"
+          :markers
+          :get-marker="calendarGetMarker"
+          :is-disabled="calendarIsDisabled"
+          @select="pick($event, toggle)"
+          @day-enter="onHover"
+        />
+      </div>
+    </template>
+  </orio-date-picker-trigger>
+</template>
+
+<style scoped>
+.range-content {
+  display: flex;
+  gap: 0.75rem;
+}
+</style>

package/dist/runtime/components/date/RangePicker.vue.d.ts

@@ -0,0 +1,28 @@
+import type { ControlProps } from "../ControlElement.vue.js";
+import type { CalendarMarker } from "../Calendar.vue.js";
+import { type DateRange } from "../../utils/date.js";
+export type { DateRange };
+interface Props extends ControlProps {
+    placeholder?: string;
+    min?: string | null;
+    max?: string | null;
+    markers?: CalendarMarker[];
+    getMarker?: (iso: string) => CalendarMarker | null;
+    isDisabled?: (iso: string) => boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: DateRange;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: DateRange) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateRange) => any) | undefined;
+}>, {
+    markers: CalendarMarker[];
+    min: string | null;
+    max: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/view/Dates.d.vue.ts

@@ -1,9 +1,6 @@
-export interface ResumeDate {
-    startDate: string;
-    endDate?: string | null;
-}
+import { type DateRange } from "../../utils/date.js";
 interface Props {
-    dates: ResumeDate;
+    dates: DateRange;
     month?: boolean;
     size?: "small" | "medium" | "large";
     type?: "text" | "title" | "subtitle" | "italics";

package/dist/runtime/components/view/Dates.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, toRefs } from "vue";
 import { useI18n } from "vue-i18n";
+import { formatDate } from "../../utils/date";
 const props = defineProps({
   dates: { type: Object, required: true },
   month: { type: Boolean, required: false },
@@ -8,33 +9,26 @@ const props = defineProps({
   type: { type: String, required: false, default: "italics" }
 });
 const { dates } = toRefs(props);
-const { t, locale } = useI18n();
-function formatMonthYear(value) {
-  if (!value) return "";
-  if (!props.month)
-    return new Intl.DateTimeFormat(locale.value, {
-      day: "numeric",
-      month: "short",
-      year: "numeric"
-    }).format(new Date(value));
-  return new Intl.DateTimeFormat(locale.value, {
-    month: "short",
-    year: "numeric"
-  }).format(new Date(value));
-}
-const startDate = computed(() => formatMonthYear(dates.value.startDate));
-const endDate = computed(() => {
-  if (dates.value.endDate === void 0) return null;
-  return dates.value.endDate !== null ? formatMonthYear(dates.value.endDate) : t("dates.present");
-});
+const { locale } = useI18n();
+const formatOptions = computed(() => ({
+  day: props.month ? void 0 : "numeric",
+  month: "short",
+  year: "numeric"
+}));
+const startText = computed(
+  () => formatDate(dates.value?.start, locale.value, formatOptions.value)
+);
+const endText = computed(
+  () => formatDate(dates.value?.end, locale.value, formatOptions.value)
+);
 </script>
 
 <template>
   <div class="view-date">
-    <orio-view-text :model-value="startDate" :type :size />
-    <template v-if="endDate">
-      <span v-if="startDate"> - </span>
-      <orio-view-text :model-value="endDate" :type :size />
+    <orio-view-text :model-value="startText" :type :size />
+    <template v-if="endText">
+      <span v-if="startText"> - </span>
+      <orio-view-text :model-value="endText" :type :size />
     </template>
   </div>
 </template>