orio-ui 1.16.2 → 1.18.0

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

@@ -1,5 +1,6 @@
+import type { ControlProps } from "./ControlElement.vue.js";
 import type { InputLayout } from "./Input.vue.js";
-interface Props {
+interface Props extends Omit<ControlProps, "layout"> {
     layout?: InputLayout;
 }
 type __VLS_Props = Props;

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

@@ -21,8 +21,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
     type: TextTypes;
-    icon: string | null;
     size: "small" | "medium" | "large" | "extra-large";
+    icon: string | null;
     uppercase: boolean;
     lineClamp: number | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -21,8 +21,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
     type: TextTypes;
-    icon: string | null;
     size: "small" | "medium" | "large" | "extra-large";
+    icon: string | null;
     uppercase: boolean;
     lineClamp: number | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,19 @@
+import { type Ref } from "vue";
+export interface ListKeyboardOptions {
+    /** Total number of items in the list */
+    count: () => number;
+    /** Called when an item is confirmed (Enter/Space) */
+    onSelect: (index: number) => void;
+    /** Called to open the list (ArrowDown/ArrowUp/Enter/Space when closed) */
+    onOpen?: () => void;
+    /** Called to close the list (Escape) */
+    onClose?: () => void;
+    /** Find the index of the initially highlighted item (e.g. currently selected) */
+    initialIndex?: () => number;
+}
+export declare function useListKeyboard(options: ListKeyboardOptions): {
+    highlightedIndex: Ref<number, number>;
+    listRef: Ref<HTMLElement | null, HTMLElement | null>;
+    onKeydown: (e: KeyboardEvent, isOpen: boolean) => void;
+    reset: () => void;
+};

package/dist/runtime/composables/useListKeyboard.js

@@ -0,0 +1,59 @@
+import { ref, nextTick } from "vue";
+export function useListKeyboard(options) {
+  const highlightedIndex = ref(-1);
+  const listRef = ref(null);
+  function scrollIntoView() {
+    const ul = listRef.value;
+    if (!ul || highlightedIndex.value < 0) return;
+    const li = ul.children[highlightedIndex.value];
+    li?.scrollIntoView({ block: "nearest" });
+  }
+  function highlight(index) {
+    const count = options.count();
+    if (count === 0) return;
+    highlightedIndex.value = Math.max(0, Math.min(index, count - 1));
+    scrollIntoView();
+  }
+  function reset() {
+    const initial = options.initialIndex?.() ?? 0;
+    highlightedIndex.value = Math.max(initial, 0);
+    nextTick(scrollIntoView);
+  }
+  const keyActions = {
+    ArrowDown(isOpen) {
+      if (!isOpen) return options.onOpen?.();
+      highlight(highlightedIndex.value + 1);
+    },
+    ArrowUp(isOpen) {
+      if (!isOpen) return options.onOpen?.();
+      highlight(highlightedIndex.value - 1);
+    },
+    Home(isOpen) {
+      if (!isOpen) return;
+      highlight(0);
+    },
+    End(isOpen) {
+      if (!isOpen) return;
+      highlight(options.count() - 1);
+    },
+    Enter(isOpen) {
+      if (!isOpen) return options.onOpen?.();
+      if (highlightedIndex.value >= 0) options.onSelect(highlightedIndex.value);
+    },
+    " "(isOpen) {
+      if (!isOpen) return options.onOpen?.();
+      if (highlightedIndex.value >= 0) options.onSelect(highlightedIndex.value);
+    },
+    Escape() {
+      highlightedIndex.value = -1;
+      options.onClose?.();
+    }
+  };
+  function onKeydown(e, isOpen) {
+    const action = keyActions[e.key];
+    if (!action) return;
+    e.preventDefault();
+    action(isOpen);
+  }
+  return { highlightedIndex, listRef, onKeydown, reset };
+}

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

@@ -2,11 +2,11 @@ import { type MaybeRef } from "vue";
 export interface ValidationRule {
     model: MaybeRef<any>;
     id: string;
-    validator: (model: MaybeRef<any>) => boolean;
+    validator: (model: any) => boolean;
     message?: string;
 }
-export declare function isFilled(model: MaybeRef<string | []>): boolean;
-export declare function isEmail(model: MaybeRef<string>): boolean;
+export declare function isFilled(value: string | []): boolean;
+export declare function isEmail(value: string): boolean;
 export declare function useValidation(rules?: ValidationRule[]): {
     checkValidity: () => boolean;
     errors: Record<string, string | null>;

package/dist/runtime/composables/useValidation.js

@@ -1,9 +1,8 @@
-import { reactive, isRef, ref } from "vue";
-export function isFilled(model) {
-  return isRef(model) ? !!model.value.length : !!model.length;
+import { reactive, ref, unref } from "vue";
+export function isFilled(value) {
+  return !!value.length;
 }
-export function isEmail(model) {
-  const value = isRef(model) ? model.value : model;
+export function isEmail(value) {
   if (!value) return true;
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   return emailRegex.test(value);
@@ -17,7 +16,7 @@ export function useValidation(rules) {
     validator,
     message
   }) {
-    if (!validator(model)) {
+    if (!validator(unref(model))) {
       if (!errors[id]) {
         errors[id] = message || "Error on this field";
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orio-ui",
-  "version": "1.16.2",
+  "version": "1.18.0",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",