orio-ui 1.24.0 → 1.27.0

package/dist/runtime/components/NumberInput/index.vue.d.ts

@@ -6,7 +6,6 @@ export interface NumberInputProps extends Omit<ControlProps, "layout"> {
     max?: number;
     step?: number;
     decimalPlaces?: number;
-    disabled?: boolean;
 }
 type __VLS_Props = NumberInputProps;
 declare function increase(): void;
@@ -30,7 +29,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     layout: InputLayout;
-    disabled: boolean;
     step: number;
     min: number;
     max: number;

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

@@ -2,8 +2,6 @@ import type { ControlProps } from "./ControlElement.vue.js";
 export interface RadioButtonProps extends ControlProps {
     /** The value this radio represents; compared to v-model to determine checked state */
     value?: unknown;
-    /** HTML name attribute — groups radios together so only one is selected at a time */
-    name?: string;
     /** Inline label text (alternative to default slot) */
     text?: string;
     /** Visually hides the label while keeping it accessible to SR (screen readers) */

package/dist/runtime/components/RadioButton.vue

@@ -2,7 +2,6 @@
 const modelValue = defineModel({ type: null });
 const props = defineProps({
   value: { type: null, required: false },
-  name: { type: String, required: false },
   text: { type: String, required: false },
   hideLabel: { type: Boolean, required: false },
   appearance: { type: String, required: false },
@@ -12,17 +11,23 @@ const props = defineProps({
   label: { type: String, required: false },
   layout: { type: String, required: false },
   size: { type: String, required: false },
-  fill: { type: Boolean, 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 }
 });
 </script>
 
 <template>
-  <orio-control-element v-bind="props" class="radio">
+  <orio-control-element v-slot="{ control }" v-bind="props" class="radio">
     <label class="radio-label">
       <input
         v-model="modelValue"
+        v-bind="control"
         type="radio"
-        :name="name"
         :value="value"
         class="radio-input"
         tabindex="-1"

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

@@ -2,8 +2,6 @@ import type { ControlProps } from "./ControlElement.vue.js";
 export interface RadioButtonProps extends ControlProps {
     /** The value this radio represents; compared to v-model to determine checked state */
     value?: unknown;
-    /** HTML name attribute — groups radios together so only one is selected at a time */
-    name?: string;
     /** Inline label text (alternative to default slot) */
     text?: string;
     /** Visually hides the label while keeping it accessible to SR (screen readers) */

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

@@ -20,6 +20,7 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
     slots: {
         trigger?: (props: {
             toggle: any;
+            control: any;
         }) => any;
     } & {
         'trigger-content'?: (props: {

package/dist/runtime/components/Selector.vue

@@ -17,7 +17,13 @@ const props = defineProps({
   label: { type: String, required: false },
   layout: { type: String, required: false },
   size: { type: String, required: false },
-  fill: { type: Boolean, 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 { field, optionName } = toRefs(props);
 const resolvedPlaceholder = computed(
@@ -107,12 +113,12 @@ const {
 </script>
 
 <template>
-  <orio-control-element v-bind="controlProps">
+  <orio-control-element v-slot="{ control }" v-bind="controlProps">
     <orio-popover position="bottom-right" :offset="5">
       <template #default="{ toggle, isOpen }">
-        <slot name="trigger" :toggle>
+        <slot name="trigger" :toggle :control>
           <button
-            :id="props.id"
+            v-bind="control"
             type="button"
             class="selector-trigger"
             aria-haspopup="listbox"

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

@@ -20,6 +20,7 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
     slots: {
         trigger?: (props: {
             toggle: any;
+            control: any;
         }) => any;
     } & {
         'trigger-content'?: (props: {

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

@@ -1,8 +1,5 @@
 import type { ControlProps } from "./ControlElement.vue.js";
-interface Props extends ControlProps {
-    disabled?: boolean;
-}
-type __VLS_Props = Props;
+type __VLS_Props = ControlProps;
 type __VLS_ModelProps = {
     modelValue?: boolean;
 };

package/dist/runtime/components/SwitchButton.vue

@@ -1,6 +1,5 @@
 <script setup>
 const props = defineProps({
-  disabled: { type: Boolean, required: false, default: false },
   appearance: { type: String, required: false },
   error: { type: [String, null], required: false },
   group: { type: Boolean, required: false },
@@ -8,7 +7,13 @@ const props = defineProps({
   label: { type: String, required: false },
   layout: { type: String, required: false },
   size: { type: String, required: false },
-  fill: { type: Boolean, required: false }
+  fill: { type: Boolean, required: false },
+  tabindex: { type: [Number, String], required: false },
+  focusKey: { type: String, required: false },
+  disabled: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  ariaLabel: { type: String, required: false }
 });
 const modelValue = defineModel({ type: Boolean, ...{ required: false } });
 function toggle() {
@@ -18,13 +23,11 @@ function toggle() {
 </script>
 
 <template>
-  <orio-control-element v-slot="{ id }" v-bind="props">
+  <orio-control-element v-slot="{ control }" v-bind="props">
     <button
-      :id
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, ...control }"
       class="switch-button"
-      :class="{ active: modelValue, disabled }"
-      :disabled="disabled"
+      :class="{ active: modelValue, disabled: props.disabled }"
       @click="toggle"
       @keydown.enter.prevent="toggle"
       @keydown.space.prevent="toggle"

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

@@ -1,8 +1,5 @@
 import type { ControlProps } from "./ControlElement.vue.js";
-interface Props extends ControlProps {
-    disabled?: boolean;
-}
-type __VLS_Props = Props;
+type __VLS_Props = ControlProps;
 type __VLS_ModelProps = {
     modelValue?: boolean;
 };

package/dist/runtime/components/TaggableSelector.vue

@@ -12,7 +12,13 @@ const props = defineProps({
   label: { type: String, required: false },
   layout: { type: String, required: false },
   size: { type: String, required: false },
-  fill: { type: Boolean, 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 modelValue = defineModel({ type: Array });
 </script>

package/dist/runtime/components/Textarea.vue

@@ -8,18 +8,28 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   size: { type: String, required: false },
-  fill: { type: Boolean, 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 }
 });
 </script>
 
 <template>
   <orio-control-element
-    v-slot="{ id }"
+    v-slot="{ control }"
     v-bind="props"
     :layout="layout === 'inner' ? 'vertical' : layout"
     :class="{ inner: layout === 'inner' }"
   >
-    <textarea :id v-model="modelValue" rows="4" v-bind="$attrs" />
+    <textarea
+      v-model="modelValue"
+      rows="4"
+      v-bind="{ ...$attrs, ...control }"
+    />
   </orio-control-element>
 </template>
 

package/dist/runtime/components/date/Picker.USAGE.md

@@ -0,0 +1,44 @@
+# date/Picker — agent-only invariants
+
+`<orio-date-picker>` is the single-date picker: a `<orio-date-picker-trigger>`
+button that opens a popover containing `<orio-calendar>`. For ranges use
+`<orio-date-range-picker>`.
+
+## Invariants
+
+- **Extends `ControlProps`.** Pass `label`, `error`, `size`, `disabled`,
+  `required` straight through — they reach the trigger via ControlElement.
+  See `ControlElement.USAGE.md`.
+- **v-model is `string | null`** in ISO `YYYY-MM-DD` form. `null` means
+  unpicked.
+- **`min` / `max`** are ISO strings. They merge with the consumer's
+  `isDisabled(iso)` callback — Picker's `calendarIsDisabled` returns true
+  when either the min/max bound is violated OR the consumer says so.
+- **Selecting a day closes the popover** automatically (`toggle(false)` is
+  called inside the `@select` handler). Do not wire your own close.
+- **Markers + getMarker** are forwarded to the inner Calendar unchanged.
+  See `Calendar.USAGE.md` for the matching rules.
+- **Placeholder text** falls back to the i18n key `datePicker.placeholder`
+  if no `placeholder` prop is given.
+
+## Gotchas
+
+- The trigger displays the date via `formatDate(value, locale)` from
+  `../../utils/date`. If you need a custom display format, wrap the
+  picker — the prop is not exposed.
+- `<orio-date-picker-trigger>` is the popover host. Wiring up your own
+  trigger means re-creating popover focus management — prefer composing
+  with the existing trigger via its `#default` scoped slot if you need
+  custom calendar content (this is exactly how Picker itself works).
+
+## Quick reference
+
+```vue
+<orio-date-picker
+  v-model="checkInDate"
+  label="Check-in"
+  :min="todayIso"
+  :max="maxBookingIso"
+  :is-disabled="(iso) => blockedDates.has(iso)"
+/>
+```

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

@@ -16,7 +16,13 @@ const props = defineProps({
   label: { type: String, required: false },
   layout: { type: String, required: false },
   size: { type: String, required: false },
-  fill: { type: Boolean, 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 value = defineModel({ type: [String, null], ...{ default: null } });
 const { locale, t } = useI18n();

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

@@ -10,7 +10,13 @@ const props = defineProps({
   label: { type: String, required: false },
   layout: { type: String, required: false },
   size: { type: String, required: false },
-  fill: { type: Boolean, 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 controlProps = computed(() => {
   const { text, placeholder, ...rest } = props;
@@ -19,11 +25,11 @@ const controlProps = computed(() => {
 </script>
 
 <template>
-  <orio-control-element v-slot="{ id }" v-bind="controlProps">
+  <orio-control-element v-slot="{ control }" v-bind="controlProps">
     <orio-popover position="bottom-right" :offset="5">
       <template #default="{ toggle, isOpen }">
         <button
-          :id
+          v-bind="control"
           type="button"
           class="date-trigger"
           :aria-expanded="isOpen"

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

@@ -22,7 +22,13 @@ const props = defineProps({
   label: { type: String, required: false },
   layout: { type: String, required: false },
   size: { type: String, required: false },
-  fill: { type: Boolean, 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 })

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;
+};