@nuxt/ui 2.13.0 → 2.14.0

package/dist/runtime/components/navigation/HorizontalNavigation.vue.d.ts

@@ -23,7 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     getULinkProps: (props: any) => {};
     twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
     twJoin: typeof twJoin;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     links: {
         type: PropType<HorizontalNavigationLink[] | HorizontalNavigationLink[][]>;
         default: () => never[];

package/dist/runtime/components/navigation/Pagination.vue.d.ts

@@ -86,7 +86,7 @@ declare const _default: import("vue").DefineComponent<{
     onClickPage: (page: number | string) => void;
     onClickFirst: () => void;
     onClickLast: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: NumberConstructor;
         required: true;

package/dist/runtime/components/navigation/Tabs.vue

@@ -33,13 +33,7 @@
     </HTabList>
 
     <HTabPanels :class="ui.container">
-      <HTabPanel
-        v-for="(item, index) of items"
-        :key="index"
-        v-slot="{ selected }"
-        :class="ui.base"
-        tabindex="-1"
-      >
+      <HTabPanel v-for="(item, index) of items" :key="index" v-slot="{ selected }" :class="ui.base" :unmount="unmount">
         <slot :name="item.slot || 'item'" :item="item" :index="index" :selected="selected">
           {{ item.content }}
         </slot>
@@ -50,12 +44,13 @@
 
 <script>
 import { toRef, ref, watch, onMounted, defineComponent } from "vue";
-import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel } from "@headlessui/vue";
+import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel, provideUseId } from "@headlessui/vue";
 import { useResizeObserver } from "@vueuse/core";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { tabs } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.tabs, tabs);
 export default defineComponent({
   components: {
@@ -84,6 +79,10 @@ export default defineComponent({
       type: Array,
       default: () => []
     },
+    unmount: {
+      type: Boolean,
+      default: false
+    },
     class: {
       type: [String, Object, Array],
       default: () => ""
@@ -129,6 +128,7 @@ export default defineComponent({
       calcMarkerSize(selectedIndex.value);
     });
     onMounted(() => calcMarkerSize(selectedIndex.value));
+    provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

package/dist/runtime/components/navigation/Tabs.vue.d.ts

@@ -18,6 +18,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<TabItem[]>;
         default: () => never[];
     };
+    unmount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     class: {
         type: PropType<any>;
         default: () => string;
@@ -36,7 +40,7 @@ declare const _default: import("vue").DefineComponent<{
     markerRef: import("vue").Ref<HTMLElement | undefined>;
     selectedIndex: import("vue").Ref<number | undefined>;
     onChange: (index: number) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: NumberConstructor;
         default: undefined;
@@ -54,6 +58,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<TabItem[]>;
         default: () => never[];
     };
+    unmount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     class: {
         type: PropType<any>;
         default: () => string;
@@ -70,6 +78,7 @@ declare const _default: import("vue").DefineComponent<{
     ui: any;
     class: any;
     modelValue: number;
+    unmount: boolean;
     items: TabItem[];
     defaultIndex: number;
 }, {}>;

package/dist/runtime/components/navigation/VerticalNavigation.vue.d.ts

@@ -23,7 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     getULinkProps: (props: any) => {};
     twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
     twJoin: typeof twJoin;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     links: {
         type: PropType<VerticalNavigationLink[] | VerticalNavigationLink[][]>;
         default: () => never[];

package/dist/runtime/components/overlays/ContextMenu.vue.d.ts

@@ -30,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
     wrapperClass: import("vue").ComputedRef<string>;
     popper: import("vue").ComputedRef<PopperOptions>;
     container: Ref<import("@vueuse/core").MaybeElement>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
@@ -52,12 +52,12 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
-    popper: PopperOptions;
     class: any;
+    popper: PopperOptions;
     modelValue: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/overlays/Modal.vue

@@ -28,11 +28,12 @@
 
 <script>
 import { computed, toRef, defineComponent } from "vue";
-import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from "@headlessui/vue";
+import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild, provideUseId } from "@headlessui/vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { modal } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.modal, modal);
 export default defineComponent({
   components: {
@@ -103,6 +104,7 @@ export default defineComponent({
       isOpen.value = value;
       emit("close");
     }
+    provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

package/dist/runtime/components/overlays/Modal.vue.d.ts

@@ -40,7 +40,7 @@ declare const _default: import("vue").DefineComponent<{
     isOpen: import("vue").WritableComputedRef<boolean>;
     transitionClass: import("vue").ComputedRef<any>;
     close: (value: boolean) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented")[], "close" | "update:modelValue" | "close-prevented", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented")[], "close" | "update:modelValue" | "close-prevented", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
@@ -74,17 +74,17 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onClose-prevented"?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
-    transition: boolean;
-    class: any;
-    modelValue: boolean;
     appear: boolean;
     overlay: boolean;
+    transition: boolean;
     preventClose: boolean;
     fullscreen: boolean;
+    class: any;
+    modelValue: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/overlays/Modals.client.vue

@@ -0,0 +1,12 @@
+<template>
+  <component :is="modalState.component" v-if="modalState" v-bind="modalState.props" v-model="isOpen" />
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue'
+import { useModal, modalInjectionKey } from '../../composables/useModal'
+
+const modalState = inject(modalInjectionKey)
+
+const { isOpen } = useModal()
+</script>

package/dist/runtime/components/overlays/Notification.vue

@@ -13,7 +13,7 @@
           <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
 
           <div :class="ui.inner">
-            <p :class="ui.title">
+            <p v-if="(title || $slots.title)" :class="ui.title">
               <slot name="title" :title="title">
                 {{ title }}
               </slot>
@@ -68,7 +68,7 @@ export default defineComponent({
     },
     title: {
       type: String,
-      required: true
+      default: null
     },
     description: {
       type: String,

package/dist/runtime/components/overlays/Notification.vue.d.ts

@@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     title: {
         type: StringConstructor;
-        required: true;
+        default: null;
     };
     description: {
         type: StringConstructor;
@@ -66,14 +66,14 @@ declare const _default: import("vue").DefineComponent<{
     onClose: () => void;
     onAction: (action: NotificationAction) => void;
     twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     title: {
         type: StringConstructor;
-        required: true;
+        default: null;
     };
     description: {
         type: StringConstructor;
@@ -120,6 +120,7 @@ declare const _default: import("vue").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
+    title: string;
     description: string;
     icon: string;
     avatar: Avatar;

package/dist/runtime/components/overlays/Notifications.vue.d.ts

@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     notifications: any;
     wrapperClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     class: {
         type: PropType<any>;
         default: () => string;

package/dist/runtime/components/overlays/Popover.vue

@@ -37,12 +37,13 @@
 <script>
 import { computed, ref, toRef, onMounted, defineComponent, watch } from "vue";
 import { defu } from "defu";
-import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel } from "@headlessui/vue";
+import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel, provideUseId } from "@headlessui/vue";
 import { useUI } from "../../composables/useUI";
 import { usePopper } from "../../composables/usePopper";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { popover } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.popover, popover);
 export default defineComponent({
   components: {
@@ -184,6 +185,7 @@ export default defineComponent({
         return;
       emit("update:open", newValue === 0);
     });
+    provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

package/dist/runtime/components/overlays/Popover.vue.d.ts

@@ -70,7 +70,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     onMouseOver: () => void;
     onMouseLeave: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:open"[], "update:open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:open"[], "update:open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     mode: {
         type: PropType<"click" | "hover">;
         default: string;
@@ -112,13 +112,13 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:open"?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
-    popper: PopperOptions;
+    overlay: boolean;
     class: any;
+    popper: PopperOptions;
     disabled: boolean;
     open: boolean;
     mode: "click" | "hover";
     openDelay: number;
     closeDelay: number;
-    overlay: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/overlays/Slideover.vue

@@ -16,11 +16,12 @@
 
 <script>
 import { computed, toRef, defineComponent } from "vue";
-import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from "@headlessui/vue";
+import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild, provideUseId } from "@headlessui/vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { slideover } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.slideover, slideover);
 export default defineComponent({
   components: {
@@ -96,6 +97,7 @@ export default defineComponent({
       isOpen.value = value;
       emit("close");
     }
+    provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

package/dist/runtime/components/overlays/Slideover.vue.d.ts

@@ -41,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
     isOpen: WritableComputedRef<boolean>;
     transitionClass: import("vue").ComputedRef<any>;
     close: (value: boolean) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented")[], "close" | "update:modelValue" | "close-prevented", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented")[], "close" | "update:modelValue" | "close-prevented", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<boolean>;
         default: boolean;
@@ -76,17 +76,17 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onClose-prevented"?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
-    transition: boolean;
-    class: any;
-    modelValue: boolean;
     appear: boolean;
     overlay: boolean;
+    transition: boolean;
     preventClose: boolean;
+    class: any;
+    modelValue: boolean;
     side: "right" | "left";
 }, {}>;
 export default _default;

package/dist/runtime/components/overlays/Tooltip.vue.d.ts

@@ -44,7 +44,7 @@ declare const _default: import("vue").DefineComponent<{
     open: import("vue").Ref<boolean>;
     onMouseOver: () => void;
     onMouseLeave: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     text: {
         type: StringConstructor;
         default: null;
@@ -79,8 +79,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     ui: any;
-    popper: PopperOptions;
     class: any;
+    popper: PopperOptions;
     text: string;
     openDelay: number;
     closeDelay: number;

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

@@ -7,7 +7,7 @@ type InputProps = {
     legend?: string | null;
 };
 export declare const useFormGroup: (inputProps?: InputProps, config?: any) => {
-    inputId: import("vue").Ref<string | undefined>;
+    inputId: import("vue").ComputedRef<string | undefined>;
     name: import("vue").ComputedRef<string | undefined>;
     size: import("vue").ComputedRef<any>;
     color: import("vue").ComputedRef<string | undefined>;

package/dist/runtime/composables/useFormGroup.mjs

@@ -1,20 +1,17 @@
-import { inject, ref, computed, onMounted } from "vue";
+import { inject, ref, computed } from "vue";
 import { useDebounceFn } from "@vueuse/core";
-import { uid } from "../utils/uid.mjs";
 export const useFormGroup = (inputProps, config) => {
   const formBus = inject("form-events", void 0);
   const formGroup = inject("form-group", void 0);
   const formInputs = inject("form-inputs", void 0);
-  const inputId = ref(inputProps?.id);
-  onMounted(() => {
-    inputId.value = inputProps?.legend === null || inputProps.legend ? void 0 : inputProps?.id ?? uid();
-    if (formGroup) {
-      formGroup.inputId.value = inputId.value;
-      if (formInputs) {
-        formInputs.value[formGroup.name.value] = inputId;
-      }
+  if (formGroup) {
+    if (inputProps?.id) {
+      formGroup.inputId.value = inputProps?.id;
     }
-  });
+    if (formInputs) {
+      formInputs.value[formGroup.name.value] = formGroup.inputId.value;
+    }
+  }
   const blurred = ref(false);
   function emitFormEvent(type, path) {
     if (formBus) {
@@ -34,7 +31,7 @@ export const useFormGroup = (inputProps, config) => {
     }
   }, 300);
   return {
-    inputId,
+    inputId: computed(() => inputProps?.id ?? formGroup?.inputId.value),
     name: computed(() => inputProps?.name ?? formGroup?.name.value),
     size: computed(() => {
       const formGroupSize = config.size[formGroup?.size.value] ? formGroup?.size.value : null;

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

@@ -0,0 +1,12 @@
+import type { ShallowRef, Component, InjectionKey } from 'vue';
+import type { ComponentProps } from '../types/component';
+import type { Modal, ModalState } from '../types/modal';
+export declare const modalInjectionKey: InjectionKey<ShallowRef<ModalState>>;
+declare function _useModal(): {
+    isOpen: import("vue").Ref<boolean>;
+    open: <T extends Component>(component: T, props?: (Modal & ComponentProps<T>) | undefined) => void;
+    close: () => void;
+    patch: <T_1 extends Component = {}>(props: Partial<Modal & ComponentProps<T_1>>) => void;
+};
+export declare const useModal: typeof _useModal;
+export {};

package/dist/runtime/composables/useModal.mjs

@@ -0,0 +1,37 @@
+import { ref, inject } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+export const modalInjectionKey = Symbol("nuxt-ui.modal");
+function _useModal() {
+  const modalState = inject(modalInjectionKey);
+  const isOpen = ref(false);
+  function open(component, props) {
+    modalState.value = {
+      component,
+      props: props ?? {}
+    };
+    isOpen.value = true;
+  }
+  function close() {
+    isOpen.value = false;
+    modalState.value = {
+      component: "div",
+      props: {}
+    };
+  }
+  function patch(props) {
+    modalState.value = {
+      ...modalState.value,
+      props: {
+        ...modalState.value.props,
+        ...props
+      }
+    };
+  }
+  return {
+    isOpen,
+    open,
+    close,
+    patch
+  };
+}
+export const useModal = createSharedComposable(_useModal);

package/dist/runtime/plugins/modals.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/modals.mjs

@@ -0,0 +1,10 @@
+import { defineNuxtPlugin } from "#imports";
+import { shallowRef } from "vue";
+import { modalInjectionKey } from "../composables/useModal.mjs";
+export default defineNuxtPlugin((nuxtApp) => {
+  const modalState = shallowRef({
+    component: "div",
+    props: {}
+  });
+  nuxtApp.vueApp.provide(modalInjectionKey, modalState);
+});

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

@@ -0,0 +1,14 @@
+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> :
+      {}

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

@@ -0,0 +1,3 @@
+import { divider } from '#ui/ui.config'
+
+export type DividerSize = keyof typeof divider.border.size.horizontal | keyof typeof divider.border.size.vertical

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

@@ -10,7 +10,8 @@ export interface FormErrorWithId extends FormError {
 }
 
 export interface Form<T> {
-  validate(path?: string, opts?: { silent?: boolean }): Promise<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

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

@@ -7,6 +7,7 @@ export * from './button'
 export * from './chip'
 export * from './clipboard'
 export * from './command-palette'
+export * from './divider'
 export * from './dropdown'
 export * from './form-group'
 export * from './form'
@@ -15,6 +16,7 @@ export * from './input'
 export * from './kbd'
 export * from './link'
 export * from './meter'
+export * from './modal'
 export * from './notification'
 export * from './popper'
 export * from './progress'

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

@@ -0,0 +1,18 @@
+import type { Component } from 'vue'
+
+export interface Modal {
+  appear?: boolean
+  overlay?: boolean
+  transition?: boolean
+  preventClose?: boolean
+  fullscreen?: boolean
+  class?: string | Object | string[]
+  ui?: any
+  onClose?: () => void
+  onClosePrevented?: () => void
+}
+
+export interface ModalState {
+  component: Component | string
+  props: Modal
+}

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

@@ -1,4 +1,6 @@
 import { progress } from '../ui.config'
+import colors from '#ui-colors'
 
 export type ProgressSize = keyof typeof progress.progress.size
 export type ProgressAnimation = keyof typeof progress.animation
+export type ProgressColor = typeof colors[number]

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

@@ -1,5 +1,7 @@
 import { range } from '../ui.config'
 import type { ExtractDeepKey } from '.'
 import type { AppConfig } from 'nuxt/schema'
+import colors from '#ui-colors'
 
 export type RangeSize = keyof typeof range.size | ExtractDeepKey<AppConfig, ['ui', 'range', 'size']>
+export type RangeColor = typeof colors[number]

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

@@ -1,5 +1,7 @@
 import { toggle } from '../ui.config'
 import type { ExtractDeepKey } from '.'
 import type { AppConfig } from 'nuxt/schema'
+import colors from '#ui-colors'
 
 export type ToggleSize = keyof typeof toggle.size | ExtractDeepKey<AppConfig, ['ui', 'toggle', 'size']>
+export type ToggleColor = typeof colors[number]

package/dist/runtime/ui.config/data/table.d.ts

@@ -36,6 +36,9 @@ declare const _default: {
         label: string;
         icon: string;
     };
+    progress: {
+        wrapper: string;
+    };
     default: {
         sortAscIcon: string;
         sortDescIcon: string;
@@ -47,6 +50,10 @@ declare const _default: {
             variant: "ghost";
             class: string;
         };
+        progress: {
+            color: "primary";
+            animation: "carousel";
+        };
         loadingState: {
             icon: string;
             label: string;