orio-ui 1.23.3 → 1.27.0

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

@@ -0,0 +1,154 @@
+<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 },
+  tabindex: { type: [Number, String], required: false },
+  focusKey: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  ariaLabel: { type: String, 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>

package/dist/runtime/components/view/Dates.vue.d.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/composables/useFilter.d.ts

@@ -0,0 +1,91 @@
+import { type ComputedRef, type Ref } from "vue";
+/**
+ * Definition of a single filter inside a group.
+ *
+ * `value` is both the initial value and the "empty" baseline used to compute
+ * `isActive` and to reset to via `clear()`.
+ */
+export interface FilterDefinition<Value = unknown> {
+    value: Value;
+}
+export type FilterConfig = Record<string, FilterDefinition>;
+export interface FilterOptions {
+    /**
+     * When true, the group's state is mirrored to URL query params via
+     * `useUrlSync`. The dependency is loaded lazily — `useUrlSync` (and its
+     * `#imports` use of `useRoute`) is never touched unless this flag is set,
+     * keeping `useFilter` runnable outside of a Nuxt context.
+     *
+     * Filter names become top-level URL keys; avoid colliding names across
+     * multiple URL-synced groups on the same page.
+     */
+    url?: boolean;
+}
+/**
+ * Bindable prop bag — spread onto any `v-model`-compatible component:
+ *   `<orio-selector v-bind="filters.category" :options="..." />`
+ */
+export interface FilterBind<Value = unknown> {
+    modelValue: Value;
+    "onUpdate:modelValue": (value: Value) => void;
+}
+/** Per-filter helpers accessed via `filters.$.<name>`. */
+export interface FilterHelpers<Value = unknown> {
+    value: Value;
+    initial: Value;
+    isActive: boolean;
+    clear: () => void;
+}
+export interface ActiveFilter {
+    name: string;
+    value: unknown;
+    clear: () => void;
+}
+export type FilterGroup<Config extends FilterConfig> = {
+    [Key in keyof Config]: FilterBind<Config[Key]["value"]>;
+} & {
+    $: {
+        [Key in keyof Config]: FilterHelpers<Config[Key]["value"]>;
+    };
+    $active: ComputedRef<ActiveFilter[]>;
+    $clearAll: () => void;
+    $state: Ref<Record<string, unknown>>;
+};
+/**
+ * Define or retrieve a named filter group.
+ *
+ * Define once anywhere in the page (setup, layout, store). Retrieve the same
+ * instance elsewhere by id — any component that knows the id can read and
+ * mutate the same reactive state, regardless of where it lives in the tree.
+ *
+ * @example Define
+ * ```ts
+ * const filters = useFilter('appointments', {
+ *   category:  { value: null },
+ *   status:    { value: [] as string[] },
+ *   dateRange: { value: { from: null, to: null } },
+ * })
+ * ```
+ *
+ * @example Bind to any v-model component
+ * ```vue
+ * <orio-selector v-bind="filters.category" :options="categories" />
+ * ```
+ *
+ * @example Retrieve elsewhere
+ * ```ts
+ * const filters = useFilter('appointments')
+ * ```
+ *
+ * @example Mirror to URL (Nuxt only)
+ * ```ts
+ * const filters = useFilter('appointments', config, { url: true })
+ * ```
+ */
+export declare function useFilter<Config extends FilterConfig>(id: string, config: Config, options?: FilterOptions): FilterGroup<Config>;
+export declare function useFilter(id: string): FilterGroup<FilterConfig>;
+/**
+ * Remove a filter group from the registry. Use in SPAs where filter groups
+ * are page-scoped and should not leak between routes.
+ */
+export declare function disposeFilter(id: string): void;

package/dist/runtime/composables/useFilter.js

@@ -0,0 +1,111 @@
+import {
+  computed,
+  effectScope,
+  ref
+} from "vue";
+const registry = /* @__PURE__ */ new Map();
+const urlSyncScopes = /* @__PURE__ */ new Map();
+export function useFilter(id, config, options = {}) {
+  const existing = registry.get(id);
+  if (existing) {
+    if (config) {
+      console.warn(
+        `[useFilter] group "${id}" is already defined \u2014 ignoring new config.`
+      );
+    }
+    return existing;
+  }
+  if (!config) {
+    throw new Error(
+      `[useFilter] group "${id}" is not defined. Pass a config on the first call.`
+    );
+  }
+  const initial = {};
+  for (const [name, definition] of Object.entries(config)) {
+    initial[name] = clone(definition.value);
+  }
+  const state = ref({ ...initial });
+  if (options.url) {
+    const scope = effectScope(true);
+    urlSyncScopes.set(id, scope);
+    void import("./useUrlSync.js").then(({ useUrlSync }) => {
+      scope.run(() => useUrlSync(state, Object.keys(config)));
+    });
+  }
+  const handle = {};
+  const helpers = {};
+  for (const name of Object.keys(config)) {
+    helpers[name] = {
+      get value() {
+        return state.value[name];
+      },
+      get initial() {
+        return initial[name];
+      },
+      get isActive() {
+        return !isEqual(state.value[name], initial[name]);
+      },
+      clear() {
+        state.value[name] = clone(initial[name]);
+      }
+    };
+    Object.defineProperty(handle, name, {
+      enumerable: true,
+      value: {
+        get modelValue() {
+          return state.value[name];
+        },
+        "onUpdate:modelValue": (value) => {
+          state.value[name] = value;
+        }
+      }
+    });
+  }
+  Object.defineProperty(handle, "$", { value: helpers });
+  Object.defineProperty(handle, "$active", {
+    value: computed(
+      () => Object.keys(config).flatMap((name) => {
+        const helper = helpers[name];
+        return helper.isActive ? [{ name, value: helper.value, clear: helper.clear }] : [];
+      })
+    )
+  });
+  Object.defineProperty(handle, "$clearAll", {
+    value: () => {
+      for (const name of Object.keys(config)) {
+        state.value[name] = clone(initial[name]);
+      }
+    }
+  });
+  Object.defineProperty(handle, "$state", { value: state });
+  registry.set(id, handle);
+  return handle;
+}
+export function disposeFilter(id) {
+  urlSyncScopes.get(id)?.stop();
+  urlSyncScopes.delete(id);
+  registry.delete(id);
+}
+function clone(value) {
+  if (value === null || typeof value !== "object") return value;
+  return structuredClone(value);
+}
+function isEqual(a, b) {
+  if (a === b) return true;
+  if (a === null || b === null) return false;
+  if (typeof a !== typeof b) return false;
+  if (typeof a !== "object") return false;
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length) return false;
+    return a.every((item, index) => isEqual(item, b[index]));
+  }
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  return keysA.every(
+    (key) => isEqual(
+      a[key],
+      b[key]
+    )
+  );
+}

package/dist/runtime/composables/useRovingGrid.d.ts

@@ -0,0 +1,35 @@
+import { type Ref } from "vue";
+export type ArrowDirection = "up" | "down" | "left" | "right";
+export type PageDirection = "up" | "down";
+export interface RovingGridOptions<Cell> {
+    rows: Ref<Cell[][]>;
+    gridRef: Ref<HTMLElement | null>;
+    getKey: (cell: Cell) => string;
+    initial: () => string;
+    /**
+     * Cells where this returns `false` are skipped by arrow navigation —
+     * pressing Arrow steps past them in the same direction until a navigable
+     * cell is found (or the grid edge is reached, then `onArrowOverflow` fires).
+     * Default: every cell is navigable.
+     */
+    isNavigable?: (cell: Cell) => boolean;
+    onActivate?: (cell: Cell) => void;
+    /**
+     * Called when an arrow key would move past the rendered grid edge.
+     * Return a new key to focus (caller should update any backing state, e.g.
+     * paging to a new month, before returning). Return null to do nothing.
+     */
+    onArrowOverflow?: (direction: ArrowDirection, activeKey: string) => string | null;
+    /**
+     * Called for PageUp / PageDown (with Shift = larger jump).
+     * Return a new key to focus, or null to do nothing.
+     */
+    onPage?: (direction: PageDirection, bigJump: boolean, activeKey: string) => string | null;
+}
+export declare function useRovingGrid<Cell>(options: RovingGridOptions<Cell>): {
+    activeKey: import("vue").ComputedRef<string>;
+    setActive: (key: string, shouldFocus?: boolean) => void;
+    focusActive: () => void;
+    onKeydown: (event: KeyboardEvent) => void;
+    tabindexFor: (key: string) => 0 | -1;
+};

package/dist/runtime/composables/useRovingGrid.js

@@ -0,0 +1,115 @@
+import { computed, nextTick, ref } from "vue";
+const ARROW_OFFSETS = {
+  up: { rowDelta: -1, columnDelta: 0 },
+  down: { rowDelta: 1, columnDelta: 0 },
+  left: { rowDelta: 0, columnDelta: -1 },
+  right: { rowDelta: 0, columnDelta: 1 }
+};
+const ARROW_KEYS = {
+  ArrowUp: "up",
+  ArrowDown: "down",
+  ArrowLeft: "left",
+  ArrowRight: "right"
+};
+export function useRovingGrid(options) {
+  const focusedKey = ref(null);
+  function findCell(key) {
+    for (const [rowIndex, cellsInRow] of options.rows.value.entries()) {
+      const columnIndex = cellsInRow.findIndex(
+        (cell) => options.getKey(cell) === key
+      );
+      if (columnIndex !== -1) {
+        return { rowIndex, columnIndex, cell: cellsInRow[columnIndex] };
+      }
+    }
+    return null;
+  }
+  const activeKey = computed(() => {
+    if (focusedKey.value && findCell(focusedKey.value)) return focusedKey.value;
+    return options.initial();
+  });
+  function focusActive() {
+    nextTick(() => {
+      const selector = `[focus-key="${CSS.escape(activeKey.value)}"]`;
+      const element = options.gridRef.value?.querySelector(selector);
+      if (!element) return;
+      element.scrollIntoView({
+        block: "nearest",
+        inline: "nearest",
+        behavior: "smooth"
+      });
+      element.focus({ preventScroll: true });
+    });
+  }
+  function setActive(key, shouldFocus = true) {
+    focusedKey.value = key;
+    if (shouldFocus) focusActive();
+  }
+  function tryArrow(direction) {
+    const position = findCell(activeKey.value);
+    if (!position) return;
+    const offset = ARROW_OFFSETS[direction];
+    const rows = options.rows.value;
+    let targetRowIndex = position.rowIndex + offset.rowDelta;
+    let targetColumnIndex = position.columnIndex + offset.columnDelta;
+    while (rows[targetRowIndex]?.[targetColumnIndex] !== void 0) {
+      const candidate = rows[targetRowIndex][targetColumnIndex];
+      if (!options.isNavigable || options.isNavigable(candidate)) {
+        setActive(options.getKey(candidate));
+        return;
+      }
+      targetRowIndex += offset.rowDelta;
+      targetColumnIndex += offset.columnDelta;
+    }
+    const overflowKey = options.onArrowOverflow?.(direction, activeKey.value);
+    if (overflowKey) setActive(overflowKey);
+  }
+  function moveToRowEdge(toEnd) {
+    const position = findCell(activeKey.value);
+    if (!position) return;
+    const row = options.rows.value[position.rowIndex];
+    const ordered = toEnd ? [...row].reverse() : row;
+    const edgeCell = ordered.find(
+      (cell) => !options.isNavigable || options.isNavigable(cell)
+    );
+    if (!edgeCell) return;
+    setActive(options.getKey(edgeCell));
+  }
+  function tryPage(direction, bigJump) {
+    const newKey = options.onPage?.(direction, bigJump, activeKey.value);
+    if (newKey) setActive(newKey);
+  }
+  function activate() {
+    const position = findCell(activeKey.value);
+    if (position) options.onActivate?.(position.cell);
+  }
+  function onKeydown(event) {
+    const arrow = ARROW_KEYS[event.key];
+    if (arrow) {
+      tryArrow(arrow);
+    } else if (event.key === "Home") {
+      moveToRowEdge(false);
+    } else if (event.key === "End") {
+      moveToRowEdge(true);
+    } else if (event.key === "PageUp") {
+      tryPage("up", event.shiftKey);
+    } else if (event.key === "PageDown") {
+      tryPage("down", event.shiftKey);
+    } else if (event.key === "Enter" || event.key === " ") {
+      activate();
+    } else {
+      return;
+    }
+    event.preventDefault();
+  }
+  function tabindexFor(key) {
+    return key === activeKey.value ? 0 : -1;
+  }
+  return {
+    activeKey,
+    setActive,
+    focusActive,
+    onKeydown,
+    tabindexFor
+  };
+}

package/dist/runtime/i18n/en.json

@@ -4,12 +4,18 @@
     "selected": "{count} selected",
     "noOptions": "No options found"
   },
-  "dateRangePicker": {
-    "startBeforeEnd": "Start date must be before end date.",
-    "present": "Present"
+  "calendar": {
+    "previousMonth": "Previous month",
+    "nextMonth": "Next month",
+    "previousYear": "Previous year",
+    "nextYear": "Next year",
+    "navigation": "Calendar navigation"
+  },
+  "datePicker": {
+    "placeholder": "Select a date"
   },
-  "dates": {
-    "present": "Present"
+  "dateRangePicker": {
+    "placeholder": "Select a date range"
   },
   "validation": {
     "fieldError": "Error on this field"

package/dist/runtime/i18n/uk.json

@@ -4,12 +4,18 @@
     "selected": "{count} обрано",
     "noOptions": "Опцій не знайдено"
   },
-  "dateRangePicker": {
-    "startBeforeEnd": "Дата початку має бути раніше дати завершення.",
-    "present": "Теперішній час"
+  "calendar": {
+    "previousMonth": "Попередній місяць",
+    "nextMonth": "Наступний місяць",
+    "previousYear": "Попередній рік",
+    "nextYear": "Наступний рік",
+    "navigation": "Навігація календаря"
+  },
+  "datePicker": {
+    "placeholder": "Оберіть дату"
   },
-  "dates": {
-    "present": "Теперішній час"
+  "dateRangePicker": {
+    "placeholder": "Оберіть діапазон дат"
   },
   "validation": {
     "fieldError": "Помилка в цьому полі"

package/dist/runtime/index.d.ts

@@ -11,8 +11,10 @@ export { default as CheckBox } from "./components/CheckBox.vue.js";
 export { default as CheckboxGroup, type CheckboxOption, type CheckboxGroupProps, } from "./components/CheckboxGroup.vue.js";
 export { default as RadioButton, type RadioButtonProps, } from "./components/RadioButton.vue.js";
 export { default as SwitchButton } from "./components/SwitchButton.vue.js";
-export { default as DatePicker } from "./components/DatePicker.vue.js";
-export { default as DateRangePicker } from "./components/DateRangePicker.vue.js";
+export { default as Calendar, type CalendarProps, } from "./components/Calendar.vue.js";
+export { default as DatePicker } from "./components/date/Picker.vue.js";
+export { default as DateRangePicker } from "./components/date/RangePicker.vue.js";
+export { type DateRange, parseISO, formatISO, formatDate } from "./utils/date.js";
 export { default as Selector } from "./components/Selector.vue.js";
 export { default as TaggableSelector } from "./components/TaggableSelector.vue.js";
 export { default as Tag } from "./components/Tag.vue.js";