@nuxt/ui 2.18.4 → 3.0.0-alpha.1

package/dist/runtime/composables/useFormField.js

@@ -0,0 +1,54 @@
+import { inject, ref, computed } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+export const formOptionsInjectionKey = Symbol("nuxt-ui.form-options");
+export const formBusInjectionKey = Symbol("nuxt-ui.form-events");
+export const formFieldInjectionKey = Symbol("nuxt-ui.form-field");
+export const inputIdInjectionKey = Symbol("nuxt-ui.input-id");
+export const formInputsInjectionKey = Symbol("nuxt-ui.form-inputs");
+export function useFormField(props, opts) {
+  const formOptions = inject(formOptionsInjectionKey, void 0);
+  const formBus = inject(formBusInjectionKey, void 0);
+  const formField = inject(formFieldInjectionKey, void 0);
+  const formInputs = inject(formInputsInjectionKey, void 0);
+  const inputId = inject(inputIdInjectionKey, void 0);
+  if (formField && inputId) {
+    if (opts?.bind === false || props?.legend) {
+      inputId.value = void 0;
+    } else if (props?.id) {
+      inputId.value = props?.id;
+    }
+    if (formInputs && formField.value.name && inputId.value) {
+      formInputs.value[formField.value.name] = inputId.value;
+    }
+  }
+  const blurred = ref(false);
+  function emitFormEvent(type, name) {
+    if (formBus && formField && name) {
+      formBus.emit({ type, name });
+    }
+  }
+  function emitFormBlur() {
+    emitFormEvent("blur", formField?.value.name);
+    blurred.value = true;
+  }
+  function emitFormChange() {
+    emitFormEvent("change", formField?.value.name);
+  }
+  const emitFormInput = useDebounceFn(
+    () => {
+      emitFormEvent("input", formField?.value.name);
+    },
+    formField?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
+  );
+  return {
+    id: computed(() => props?.id ?? inputId?.value),
+    name: computed(() => props?.name ?? formField?.value.name),
+    size: computed(() => props?.size ?? formField?.value.size),
+    color: computed(() => formField?.value.error ? "error" : props?.color),
+    highlight: computed(() => formField?.value.error ? true : props?.highlight),
+    disabled: computed(() => formOptions?.value.disabled || props?.disabled),
+    emitFormBlur,
+    emitFormInput,
+    emitFormChange
+  };
+}

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

@@ -0,0 +1,28 @@
+export declare const kbdKeysMap: {
+    meta: string;
+    command: string;
+    shift: string;
+    ctrl: string;
+    option: string;
+    alt: string;
+    enter: string;
+    delete: string;
+    backspace: string;
+    escape: string;
+    tab: string;
+    capslock: string;
+    arrowup: string;
+    arrowright: string;
+    arrowdown: string;
+    arrowleft: string;
+    pageup: string;
+    pagedown: string;
+    home: string;
+    end: string;
+};
+export type KbdKey = keyof typeof kbdKeysMap;
+export declare const useKbd: () => {
+    macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
+    metaSymbol: import("vue").Ref<string, string>;
+    getKbdKey: (value?: KbdKey | string) => string | undefined;
+};

package/dist/runtime/composables/useKbd.js

@@ -0,0 +1,46 @@
+import { createSharedComposable } from "@vueuse/core";
+import { ref, computed, onMounted } from "vue";
+export const kbdKeysMap = {
+  meta: "",
+  command: "\u2318",
+  shift: "\u21E7",
+  ctrl: "\u2303",
+  option: "\u2325",
+  alt: "\u2387",
+  enter: "\u21B5",
+  delete: "\u2326",
+  backspace: "\u232B",
+  escape: "\u238B",
+  tab: "\u21E5",
+  capslock: "\u21EA",
+  arrowup: "\u2191",
+  arrowright: "\u2192",
+  arrowdown: "\u2193",
+  arrowleft: "\u2190",
+  pageup: "\u21DE",
+  pagedown: "\u21DF",
+  home: "\u2196",
+  end: "\u2198"
+};
+const _useKbd = () => {
+  const macOS = computed(() => import.meta.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/));
+  const metaSymbol = ref(" ");
+  onMounted(() => {
+    metaSymbol.value = macOS.value ? kbdKeysMap.command : kbdKeysMap.ctrl;
+  });
+  function getKbdKey(value) {
+    if (!value) {
+      return;
+    }
+    if (value === "meta") {
+      return metaSymbol.value;
+    }
+    return kbdKeysMap[value] || value.toUpperCase();
+  }
+  return {
+    macOS,
+    metaSymbol,
+    getKbdKey
+  };
+};
+export const useKbd = createSharedComposable(_useKbd);

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

@@ -1,13 +1,17 @@
 import type { ShallowRef, Component, InjectionKey } from 'vue';
+import type { ModalProps } from '../types/index.js';
 import type { ComponentProps } from '../types/component.js';
-import type { Modal, ModalState } from '../types/modal.js';
+export interface ModalState {
+    component: Component | string;
+    props: ModalProps;
+}
 export declare const modalInjectionKey: InjectionKey<ShallowRef<ModalState>>;
 declare function _useModal(): {
-    open: <T extends Component>(component: T, props?: Modal & ComponentProps<T>) => void;
+    open: <T extends Component>(component: T, props?: ModalProps & ComponentProps<T>) => void;
     close: () => Promise<void>;
     reset: () => void;
-    patch: <T extends Component = {}>(props: Partial<Modal & ComponentProps<T>>) => void;
-    isOpen: import("vue").Ref<boolean>;
+    patch: <T extends Component = Record<string, never>>(props: Partial<ModalProps & ComponentProps<T>>) => void;
+    isOpen: import("vue").Ref<boolean, boolean>;
 };
 export declare const useModal: typeof _useModal;
 export {};

package/dist/runtime/composables/useModal.js

@@ -19,6 +19,7 @@ function _useModal() {
     isOpen.value = false;
   }
   function reset() {
+    if (!modalState) return;
     modalState.value = {
       component: "div",
       props: {}

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

@@ -1,13 +1,17 @@
 import type { ShallowRef, Component, InjectionKey } from 'vue';
+import type { SlideoverProps } from '../types/index.js';
 import type { ComponentProps } from '../types/component.js';
-import type { Slideover, SlideoverState } from '../types/slideover.js';
-export declare const slidOverInjectionKey: InjectionKey<ShallowRef<SlideoverState>>;
+export interface SlideoverState {
+    component: Component | string;
+    props: SlideoverProps;
+}
+export declare const slideoverInjectionKey: InjectionKey<ShallowRef<SlideoverState>>;
 declare function _useSlideover(): {
-    open: <T extends Component>(component: T, props?: Slideover & ComponentProps<T>) => void;
+    open: <T extends Component>(component: T, props?: SlideoverProps & ComponentProps<T>) => void;
     close: () => Promise<void>;
     reset: () => void;
-    patch: <T extends Component = {}>(props: Partial<Slideover & ComponentProps<T>>) => void;
-    isOpen: import("vue").Ref<boolean>;
+    patch: <T extends Component = Record<string, never>>(props: Partial<SlideoverState & ComponentProps<T>>) => void;
+    isOpen: import("vue").Ref<boolean, boolean>;
 };
 export declare const useSlideover: typeof _useSlideover;
 export {};

package/dist/runtime/composables/useSlideover.js

@@ -1,8 +1,8 @@
 import { ref, inject } from "vue";
 import { createSharedComposable } from "@vueuse/core";
-export const slidOverInjectionKey = Symbol("nuxt-ui.slideover");
+export const slideoverInjectionKey = Symbol("nuxt-ui.slideover");
 function _useSlideover() {
-  const slideoverState = inject(slidOverInjectionKey);
+  const slideoverState = inject(slideoverInjectionKey);
   const isOpen = ref(false);
   function open(component, props) {
     if (!slideoverState) {
@@ -19,6 +19,7 @@ function _useSlideover() {
     isOpen.value = false;
   }
   function reset() {
+    if (!slideoverState) return;
     slideoverState.value = {
       component: "div",
       props: {}

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

@@ -1,20 +1,12 @@
-import type { Notification } from '../types/notification.js';
+import type { ToastProps } from '../types/index.js';
+export interface Toast extends Omit<ToastProps, 'defaultOpen'> {
+    id: string | number;
+    click?: (toast: Toast) => void;
+}
 export declare function useToast(): {
-    add: (notification: Partial<Notification>) => {
-        id: string;
-        title?: string;
-        description?: string;
-        icon?: string;
-        avatar?: import("../types").Avatar;
-        closeButton?: import("../types").Button;
-        timeout?: number;
-        actions?: import("../types").NotificationAction[];
-        click?: (...args: any[]) => void;
-        callback?: (...args: any[]) => void;
-        color?: import("../types").NotificationColor;
-        ui?: any;
-    };
-    remove: (id: string) => void;
-    update: (id: string, notification: Partial<Notification>) => void;
+    toasts: import("vue").Ref<Toast[], Toast[]>;
+    add: (toast: Partial<Toast>) => Toast;
+    update: (id: string | number, toast: Partial<Toast>) => void;
+    remove: (id: string | number) => void;
     clear: () => void;
 };

package/dist/runtime/composables/useToast.js

@@ -1,34 +1,48 @@
 import { useState } from "#imports";
 export function useToast() {
-  const notifications = useState("notifications", () => []);
-  function add(notification) {
+  const toasts = useState("toasts", () => []);
+  function add(toast) {
     const body = {
       id: (/* @__PURE__ */ new Date()).getTime().toString(),
-      ...notification
+      open: true,
+      ...toast
     };
-    const index = notifications.value.findIndex((n) => n.id === body.id);
+    const index = toasts.value.findIndex((t) => t.id === body.id);
     if (index === -1) {
-      notifications.value.push(body);
+      toasts.value.push(body);
     }
+    toasts.value = toasts.value.slice(-5);
     return body;
   }
-  function remove(id) {
-    notifications.value = notifications.value.filter((n) => n.id !== id);
+  function update(id, toast) {
+    const index = toasts.value.findIndex((t) => t.id === id);
+    if (index !== -1) {
+      toasts.value[index] = {
+        ...toasts.value[index],
+        ...toast
+      };
+    }
   }
-  function update(id, notification) {
-    const index = notifications.value.findIndex((n) => n.id === id);
+  function remove(id) {
+    const index = toasts.value.findIndex((t) => t.id === id);
     if (index !== -1) {
-      const previous = notifications.value[index];
-      notifications.value.splice(index, 1, { ...previous, ...notification });
+      toasts.value[index] = {
+        ...toasts.value[index],
+        open: false
+      };
     }
+    setTimeout(() => {
+      toasts.value = toasts.value.filter((t) => t.id !== id);
+    }, 200);
   }
   function clear() {
-    notifications.value = [];
+    toasts.value = [];
   }
   return {
+    toasts,
     add,
-    remove,
     update,
+    remove,
     clear
   };
 }

package/dist/runtime/index.css

@@ -0,0 +1 @@
+@theme{--color-gray-*:initial;--color-cool-50:#f9fafb;--color-cool-100:#f3f4f6;--color-cool-200:#e5e7eb;--color-cool-300:#d1d5db;--color-cool-400:#9ca3af;--color-cool-500:#6b7280;--color-cool-600:#4b5563;--color-cool-700:#374151;--color-cool-800:#1f2937;--color-cool-900:#111827;--color-cool-950:#030712;--spacing-4_5:1.125rem;--color-primary-50:var(--color-primary-50);--color-primary-100:var(--color-primary-100);--color-primary-200:var(--color-primary-200);--color-primary-300:var(--color-primary-300);--color-primary-400:var(--color-primary-400);--color-primary-500:var(--color-primary-500);--color-primary-600:var(--color-primary-600);--color-primary-700:var(--color-primary-700);--color-primary-800:var(--color-primary-800);--color-primary-900:var(--color-primary-900);--color-primary-950:var(--color-primary-950);--color-error-50:var(--color-error-50);--color-error-100:var(--color-error-100);--color-error-200:var(--color-error-200);--color-error-300:var(--color-error-300);--color-error-400:var(--color-error-400);--color-error-500:var(--color-error-500);--color-error-600:var(--color-error-600);--color-error-700:var(--color-error-700);--color-error-800:var(--color-error-800);--color-error-900:var(--color-error-900);--color-error-950:var(--color-error-950);--color-gray-50:var(--color-gray-50);--color-gray-100:var(--color-gray-100);--color-gray-200:var(--color-gray-200);--color-gray-300:var(--color-gray-300);--color-gray-400:var(--color-gray-400);--color-gray-500:var(--color-gray-500);--color-gray-600:var(--color-gray-600);--color-gray-700:var(--color-gray-700);--color-gray-800:var(--color-gray-800);--color-gray-900:var(--color-gray-900);--color-gray-950:var(--color-gray-950)}@layer base{:root{color-scheme:light dark}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes collapsible-up{0%{height:var(--radix-collapsible-content-height)}to{height:0}}@keyframes collapsible-down{0%{height:0}to{height:var(--radix-collapsible-content-height)}}@keyframes toast-collapsed-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--before) - var(--height))*var(--gap))) scale(var(--scale))}}@keyframes toast-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--offset) - var(--height))*var(--translate-factor)))}}@keyframes toast-slide-left{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(-100%) translateY(var(--translate))}}@keyframes toast-slide-right{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(100%) translateY(var(--translate))}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slide-in-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-out-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-in-from-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slide-out-to-right{0%{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes slide-in-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slide-in-from-left{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slide-out-to-left{0%{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slide-in-from-top-and-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-top-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes slide-in-from-right-and-fade{0%{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-right-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes slide-in-from-bottom-and-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes slide-in-from-left-and-fade{0%{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-left-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes enter-from-right{0%{opacity:0;transform:translateX(200px)}to{opacity:1;transform:translateX(0)}}@keyframes enter-from-left{0%{opacity:0;transform:translateX(-200px)}to{opacity:1;transform:translateX(0)}}@keyframes exit-to-right{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(200px)}}@keyframes exit-to-left{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-200px)}}@keyframes carousel{0%,to{width:50%}0%{transform:translateX(-100%)}to{transform:translateX(200%)}}@keyframes carousel-vertical{0%,to{height:50%}0%{transform:translateY(-100%)}to{transform:translateY(200%)}}@keyframes carousel-inverse{0%,to{width:50%}0%{transform:translateX(200%)}to{transform:translateX(-100%)}}@keyframes carousel-inverse-vertical{0%,to{height:50%}0%{transform:translateY(200%)}to{transform:translateY(-100%)}}@keyframes swing{0%,to{width:50%}0%,to{transform:translateX(-25%)}50%{transform:translateX(125%)}}@keyframes swing-vertical{0%,to{height:50%}0%,to{transform:translateY(-25%)}50%{transform:translateY(125%)}}@keyframes elastic{0%,to{margin-left:25%;width:50%}50%{margin-left:5%;width:90%}}@keyframes elastic-vertical{0%,to{height:50%;margin-top:25%}50%{height:90%;margin-top:5%}}}

package/dist/runtime/plugins/colors.js

@@ -1,27 +1,18 @@
 import { computed } from "vue";
-import { get, hexToRgb } from "../utils/index.js";
 import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from "#imports";
-import colors from "#tailwind-config/theme/colors";
 export default defineNuxtPlugin(() => {
   const appConfig = useAppConfig();
   const nuxtApp = useNuxtApp();
+  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+  function generateColor(key, value) {
+    return `${shades.map((shade) => `--color-${key}-${shade}: var(--color-${value}-${shade});`).join("\n  ")}`;
+  }
   const root = computed(() => {
-    const primary = get(colors, appConfig.ui.primary);
-    const gray = get(colors, appConfig.ui.gray);
-    if (!primary) {
-      console.warn(`[@nuxt/ui] Primary color '${appConfig.ui.primary}' not found in Tailwind config`);
-    }
-    if (!gray) {
-      console.warn(`[@nuxt/ui] Gray color '${appConfig.ui.gray}' not found in Tailwind config`);
-    }
     return `:root {
-${Object.entries(primary || colors.green).map(([key, value]) => `--color-primary-${key}: ${hexToRgb(value)};`).join("\n")}
---color-primary-DEFAULT: var(--color-primary-500);
-
-${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}: ${hexToRgb(value)};`).join("\n")}
+  ${Object.entries(appConfig.ui.colors).map(([key, value]) => generateColor(key, value)).join("\n  ")}
+  --color-primary-DEFAULT: var(--color-primary-500);
 }
-
-.dark {
+@media (prefers-color-scheme: dark) {
   --color-primary-DEFAULT: var(--color-primary-400);
 }
 `;
@@ -30,7 +21,8 @@ ${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}
     style: [{
       innerHTML: () => root.value,
       tagPriority: -2,
-      id: "nuxt-ui-colors"
+      id: "nuxt-ui-colors",
+      type: "text/css"
     }]
   };
   if (import.meta.client && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {

package/dist/runtime/plugins/{slideovers.js → slideover.js}

@@ -1,10 +1,10 @@
-import { defineNuxtPlugin } from "#imports";
 import { shallowRef } from "vue";
-import { slidOverInjectionKey } from "../composables/useSlideover.js";
+import { defineNuxtPlugin } from "#imports";
+import { slideoverInjectionKey } from "../composables/useSlideover.js";
 export default defineNuxtPlugin((nuxtApp) => {
   const slideoverState = shallowRef({
     component: "div",
     props: {}
   });
-  nuxtApp.vueApp.provide(slidOverInjectionKey, slideoverState);
+  nuxtApp.vueApp.provide(slideoverInjectionKey, slideoverState);
 });

package/dist/runtime/types/app.config.d.ts

@@ -0,0 +1,6 @@
+declare module '#build/app.config' {
+  import type { AppConfig } from '@nuxt/schema'
+
+  const _default: AppConfig
+  export default _default
+}

package/dist/runtime/types/component.d.ts

@@ -1,14 +1,17 @@
-export type ComponentProps<T> =
-T extends new () => { $props: infer P } ? NonNullable<P> :
-  T extends (props: infer P, ...args: any) => any ? P :
-      {}
-
-export type ComponentSlots<T> =
-T extends new () => { $slots: infer S } ? NonNullable<S> :
-  T extends (props: any, ctx: { slots: infer S; attrs: any; emit: any }, ...args: any) => any ? NonNullable<S> :
-      {}
-
-export type ComponentEmit<T> =
-T extends new () => { $emit: infer E } ? NonNullable<E> :
-  T extends (props: any, ctx: { slots: any; attrs: any; emit: infer E }, ...args: any) => any ? NonNullable<E> :
-      {}
+export type ComponentProps<T> = T extends new () => {
+    $props: infer P;
+} ? NonNullable<P> : T extends (props: infer P, ...args: any) => any ? P : Record<string, never>;
+export type ComponentSlots<T> = T extends new () => {
+    $slots: infer S;
+} ? NonNullable<S> : T extends (props: any, ctx: {
+    slots: infer S;
+    attrs: any;
+    emit: any;
+}, ...args: any) => any ? NonNullable<S> : Record<string, never>;
+export type ComponentEmit<T> = T extends new () => {
+    $emit: infer E;
+} ? NonNullable<E> : T extends (props: any, ctx: {
+    slots: any;
+    attrs: any;
+    emit: infer E;
+}, ...args: any) => any ? NonNullable<E> : Record<string, never>;

package/dist/runtime/types/form.d.ts

@@ -1,38 +1,68 @@
-import type { Ref } from 'vue'
-
-export interface FormError<T extends string = string> {
-  path: T
-  message: string
+import type { ComputedRef, Ref } from 'vue';
+import type { ZodSchema } from 'zod';
+import type { Schema as JoiSchema } from 'joi';
+import type { ObjectSchema as YupObjectSchema } from 'yup';
+import type { GenericSchema as ValibotSchema, GenericSchemaAsync as ValibotSchemaAsync, SafeParser as ValibotSafeParser, SafeParserAsync as ValibotSafeParserAsync } from 'valibot';
+import type { GetObjectField } from './utils.js';
+export interface Form<T> {
+    validate(opts?: {
+        name: string | string[];
+        silent?: false;
+        nested?: boolean;
+    }): Promise<T | false>;
+    clear(path?: string): void;
+    errors: Ref<FormError[]>;
+    setErrors(errs: FormError[], path?: string): void;
+    getErrors(path?: string): FormError[];
+    submit(): Promise<void>;
+    disabled: ComputedRef<boolean>;
+}
+export type FormSchema<T extends Record<string, any>> = ZodSchema | YupObjectSchema<T> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> | JoiSchema<T>;
+export type FormInputEvents = 'input' | 'blur' | 'change';
+export interface FormError<P extends string = string> {
+    name: P;
+    message: string;
 }
-
 export interface FormErrorWithId extends FormError {
-  id: string
+    id?: string;
 }
-
-export interface Form<T> {
-  validate(path?: string | string[], opts?: { silent?: true }): Promise<T | false>;
-  validate(path?: string | string[], opts?: { silent?: false }): Promise<T>;
-  clear(path?: string): void
-  errors: Ref<FormError[]>
-  setErrors(errs: FormError[], path?: string): void
-  getErrors(path?: string): FormError[]
-  submit(): Promise<void>
+export type FormSubmitEvent<T> = SubmitEvent & {
+    data: T;
+};
+export type FormValidationError = {
+    errors: FormErrorWithId[];
+    childrens: FormValidationError[];
+};
+export type FormErrorEvent = SubmitEvent & FormValidationError;
+export type FormEventType = FormInputEvents;
+export type FormChildAttachEvent = {
+    type: 'attach';
+    formId: string | number;
+    validate: Form<any>['validate'];
+};
+export type FormChildDetachEvent = {
+    type: 'detach';
+    formId: string | number;
+};
+export type FormInputEvent = {
+    type: FormEventType;
+    name?: string;
+};
+export type FormEvent = FormInputEvent | FormChildAttachEvent | FormChildDetachEvent;
+export interface FormInjectedOptions {
+    disabled?: boolean;
+    validateOnInputDelay?: number;
 }
-
-export type FormSubmitEvent<T> = SubmitEvent & { data: T }
-export type FormErrorEvent = SubmitEvent & { errors: FormErrorWithId[] }
-
-export type FormEventType = 'blur' | 'input' | 'change' | 'submit'
-
-export interface FormEvent {
-  type: FormEventType
-  path?: string
+export interface FormFieldInjectedOptions<T> {
+    name?: string;
+    size?: GetObjectField<T, 'size'>;
+    error?: string | boolean;
+    eagerValidation?: boolean;
+    validateOnInputDelay?: number;
 }
-
-export interface InjectedFormGroupValue {
-  inputId: Ref<string | undefined>
-  name: Ref<string>
-  size: Ref<string | number | symbol>
-  error: Ref<string | boolean | undefined>
-  eagerValidation: Ref<boolean>
+export declare class FormValidationException extends Error {
+    formId: string | number;
+    errors: FormErrorWithId[];
+    childrens: FormValidationException[];
+    constructor(formId: string | number, errors: FormErrorWithId[], childErrors: FormValidationException[]);
 }

package/dist/runtime/types/form.js

@@ -0,0 +1,12 @@
+export class FormValidationException extends Error {
+  formId;
+  errors;
+  childrens;
+  constructor(formId, errors, childErrors) {
+    super("Form validation exception");
+    this.formId = formId;
+    this.errors = errors;
+    this.childrens = childErrors;
+    Object.setPrototypeOf(this, FormValidationException.prototype);
+  }
+}

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

@@ -1,31 +1,42 @@
-export * from './accordion.js';
-export * from './alert.js';
-export * from './avatar.js';
-export * from './badge.js';
-export * from './breadcrumb.js';
-export * from './button.js';
-export * from './chip.js';
-export * from './clipboard.js';
-export * from './command-palette.js';
-export * from './divider.js';
-export * from './dropdown.js';
-export * from './form-group.js';
+export * from '../components/Accordion.vue.js';
+export * from '../components/Alert.vue.js';
+export * from '../components/App.vue.js';
+export * from '../components/Avatar.vue.js';
+export * from '../components/AvatarGroup.vue.js';
+export * from '../components/Badge.vue.js';
+export * from '../components/Breadcrumb.vue.js';
+export * from '../components/Button.vue.js';
+export * from '../components/Card.vue.js';
+export * from '../components/Checkbox.vue.js';
+export * from '../components/Chip.vue.js';
+export * from '../components/Collapsible.vue.js';
+export * from '../components/CommandPalette.vue.js';
+export * from '../components/Container.vue.js';
+export * from '../components/ContextMenu.vue.js';
+export * from '../components/Drawer.vue.js';
+export * from '../components/DropdownMenu.vue.js';
+export * from '../components/Form.vue.js';
+export * from '../components/FormField.vue.js';
+export * from '../components/Input.vue.js';
+export * from '../components/InputMenu.vue.js';
+export * from '../components/Kbd.vue.js';
+export * from '../components/Link.vue.js';
+export * from '../components/Modal.vue.js';
+export * from '../components/NavigationMenu.vue.js';
+export * from '../components/Pagination.vue.js';
+export * from '../components/Popover.vue.js';
+export * from '../components/Progress.vue.js';
+export * from '../components/RadioGroup.vue.js';
+export * from '../components/Select.vue.js';
+export * from '../components/SelectMenu.vue.js';
+export * from '../components/Separator.vue.js';
+export * from '../components/Skeleton.vue.js';
+export * from '../components/Slideover.vue.js';
+export * from '../components/Slider.vue.js';
+export * from '../components/Switch.vue.js';
+export * from '../components/Tabs.vue.js';
+export * from '../components/Textarea.vue.js';
+export * from '../components/Toast.vue.js';
+export * from '../components/Toaster.vue.js';
+export * from '../components/Tooltip.vue.js';
 export * from './form.js';
-export * from './horizontal-navigation.js';
-export * from './input.js';
-export * from './kbd.js';
-export * from './link.js';
-export * from './meter.js';
-export * from './modal.js';
-export * from './slideover.js';
-export * from './notification.js';
-export * from './popper.js';
-export * from './progress.js';
-export * from './range.js';
-export * from './select.js';
-export * from './tabs.js';
-export * from './textarea.js';
-export * from './toggle.js';
-export * from './tooltip.js';
-export * from './vertical-navigation.js';
-export * from './utils.js';