orio-ui 1.10.4 → 1.11.0

package/README.md

@@ -111,12 +111,13 @@ function handleClick() {
 
 - **Upload** - File upload component
 
-### Composables (7)
+### Composables (8)
 
 - **useTheme** - Theme and color mode management
 - **useModal** - Modal state with animation origin tracking
 - **useFuzzySearch** - Fuzzy search powered by Fuse.js
 - **useApi** - Type-safe API request wrapper
+- **useValidation** - Form validation with error handling
 - **useDecimalFormatter** - Number formatting utilities
 - **usePressAndHold** - Press and hold interaction handler
 - **useSound** - Audio playback with CDN-hosted sounds
@@ -184,7 +185,7 @@ orio-ui/
 ├── src/
 │   ├── runtime/
 │   │   ├── components/   # 26 Vue components
-│   │   ├── composables/  # 7 composables
+│   │   ├── composables/  # 8 composables
 │   │   ├── assets/css/   # Theme CSS files
 │   │   └── utils/        # Icon registry
 │   └── module.ts         # Nuxt Module definition

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.10.4",
+  "version": "1.11.0",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/ControlElement.vue

@@ -4,19 +4,25 @@ export interface ControlProps {
    * Minimal will reset margin and remove border and box shadow from every element inside the slot
    */
   appearance?: "normal" | "minimal";
+  /**
+   * Error message to display below the control
+   */
+  error?: string | null;
 }
 
 withDefaults(defineProps<ControlProps>(), {
   appearance: "normal",
+  error: null,
 });
 </script>
 
 <template>
-  <div class="control" :class="[appearance]">
+  <div class="control" :class="[appearance, { 'has-error': error }]">
     <label v-if="$attrs.label" class="control-label">{{ $attrs.label }}</label>
     <div class="slot-wrapper" v-bind="$attrs">
       <slot />
     </div>
+    <span v-if="error" class="control-error">{{ error }}</span>
   </div>
 </template>
 
@@ -30,6 +36,13 @@ withDefaults(defineProps<ControlProps>(), {
 .control .control-label {
   user-select: none;
 }
+.control .control-error {
+  color: var(--color-danger);
+  font-size: 0.875rem;
+}
+.control.has-error .slot-wrapper :deep(*) {
+  border-color: var(--color-danger);
+}
 .control.minimal {
   margin: 0;
 }

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

@@ -5,3 +5,4 @@ export { useTheme } from "./useTheme.js";
 export { useDecimalFormatter } from "./useDecimalFormatter.js";
 export { usePressAndHold } from "./usePressAndHold.js";
 export { useSound, type SoundOptions } from "./useSound.js";
+export { useValidation, isFilled, isEmail, type ValidationRule, } from "./useValidation.js";

package/dist/runtime/composables/index.js

@@ -7,3 +7,8 @@ export { useTheme } from "./useTheme.js";
 export { useDecimalFormatter } from "./useDecimalFormatter.js";
 export { usePressAndHold } from "./usePressAndHold.js";
 export { useSound } from "./useSound.js";
+export {
+  useValidation,
+  isFilled,
+  isEmail
+} from "./useValidation.js";

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

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

package/dist/runtime/composables/useValidation.js

@@ -0,0 +1,42 @@
+import { reactive, isRef } from "vue";
+export function isFilled(model) {
+  return isRef(model) ? !!model.value.length : !!model.length;
+}
+export function isEmail(model) {
+  const value = isRef(model) ? model.value : model;
+  if (!value) return true;
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(value);
+}
+export function useValidation(rules) {
+  const errors = reactive({});
+  function validate({
+    model,
+    id,
+    validator,
+    message
+  }) {
+    if (!validator(model)) {
+      if (!errors[id]) {
+        errors[id] = message || "Error on this field";
+      }
+      document.getElementById(id)?.scrollIntoView({
+        behavior: "smooth",
+        block: "center"
+      });
+      return false;
+    }
+    return true;
+  }
+  function checkValidity() {
+    clearAllErrors();
+    return rules.reduceRight((valid, rule) => validate(rule) && valid, true);
+  }
+  function clearError(id) {
+    errors[id] = null;
+  }
+  function clearAllErrors() {
+    Object.keys(errors).forEach((key) => errors[key] = null);
+  }
+  return { checkValidity, errors, clearError, clearAllErrors };
+}

package/package.json

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