@nuxt/ui 2.13.0 → 2.14.1

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;

package/dist/runtime/ui.config/data/table.mjs

@@ -2,7 +2,7 @@ export default {
   wrapper: "relative overflow-x-auto",
   base: "min-w-full table-fixed",
   divide: "divide-y divide-gray-300 dark:divide-gray-700",
-  thead: "",
+  thead: "relative",
   tbody: "divide-y divide-gray-200 dark:divide-gray-800",
   tr: {
     base: "",
@@ -11,14 +11,14 @@ export default {
   },
   th: {
     base: "text-left rtl:text-right",
-    padding: "px-3 py-3.5",
+    padding: "px-4 py-3.5",
     color: "text-gray-900 dark:text-white",
     font: "font-semibold",
     size: "text-sm"
   },
   td: {
     base: "whitespace-nowrap",
-    padding: "px-3 py-4",
+    padding: "px-4 py-4",
     color: "text-gray-500 dark:text-gray-400",
     font: "",
     size: "text-sm"
@@ -36,6 +36,9 @@ export default {
     label: "text-sm text-center text-gray-900 dark:text-white",
     icon: "w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4"
   },
+  progress: {
+    wrapper: "absolute inset-x-0 -bottom-[0.5px] p-0"
+  },
   default: {
     sortAscIcon: "i-heroicons-bars-arrow-up-20-solid",
     sortDescIcon: "i-heroicons-bars-arrow-down-20-solid",
@@ -47,6 +50,10 @@ export default {
       variant: "ghost",
       class: "-m-1.5"
     },
+    progress: {
+      color: "primary",
+      animation: "carousel"
+    },
     loadingState: {
       icon: "i-heroicons-arrow-path-20-solid",
       label: "Loading..."

package/dist/runtime/ui.config/elements/accordion.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     wrapper: string;
+    container: string;
     item: {
         base: string;
         size: string;

package/dist/runtime/ui.config/elements/accordion.mjs

@@ -1,5 +1,6 @@
 export default {
   wrapper: "w-full flex flex-col",
+  container: "w-full flex flex-col",
   item: {
     base: "",
     size: "text-sm",

package/dist/runtime/ui.config/forms/formGroup.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     wrapper: string;
+    inner: string;
     label: {
         wrapper: string;
         base: string;

package/dist/runtime/ui.config/forms/formGroup.mjs

@@ -1,5 +1,6 @@
 export default {
   wrapper: "",
+  inner: "",
   label: {
     wrapper: "flex content-center items-center justify-between",
     base: "block font-medium text-gray-700 dark:text-gray-200",

package/dist/runtime/ui.config/forms/input.d.ts

@@ -4,6 +4,17 @@ declare const _default: {
     form: string;
     rounded: string;
     placeholder: string;
+    file: {
+        base: string;
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
     size: {
         '2xs': string;
         xs: string;

package/dist/runtime/ui.config/forms/input.mjs

@@ -4,6 +4,17 @@ export default {
   form: "form-input",
   rounded: "rounded-md",
   placeholder: "placeholder-gray-400 dark:placeholder-gray-500",
+  file: {
+    base: "file:cursor-pointer file:rounded-l-md file:absolute file:left-0 file:inset-y-0 file:font-medium file:m-0 file:border-0 file:ring-1 file:ring-gray-300 dark:file:ring-gray-700 file:text-gray-900 dark:file:text-white file:bg-gray-50 hover:file:bg-gray-100 dark:file:bg-gray-800 dark:hover:file:bg-gray-700/50",
+    padding: {
+      "2xs": "ps-[85px]",
+      xs: "ps-[87px]",
+      sm: "ps-[96px]",
+      md: "ps-[98px]",
+      lg: "ps-[100px]",
+      xl: "ps-[109px]"
+    }
+  },
   size: {
     "2xs": "text-xs",
     xs: "text-xs",

package/dist/runtime/ui.config/forms/select.d.ts

@@ -11,6 +11,17 @@ declare const _default: {
     wrapper: string;
     base: string;
     rounded: string;
+    file: {
+        base: string;
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
     size: {
         '2xs': string;
         xs: string;

package/dist/runtime/ui.config/forms/textarea.d.ts

@@ -9,6 +9,17 @@ declare const _default: {
     base: string;
     rounded: string;
     placeholder: string;
+    file: {
+        base: string;
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
     size: {
         '2xs': string;
         xs: string;

package/dist/runtime/ui.config/layout/divider.d.ts

@@ -14,8 +14,22 @@ declare const _default: {
         horizontal: string;
         vertical: string;
         size: {
-            horizontal: string;
-            vertical: string;
+            horizontal: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+            vertical: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
         };
         type: {
             solid: string;
@@ -31,5 +45,8 @@ declare const _default: {
         size: "2xs";
     };
     label: string;
+    default: {
+        size: "2xs";
+    };
 };
 export default _default;

package/dist/runtime/ui.config/layout/divider.mjs

@@ -14,8 +14,22 @@ export default {
     horizontal: "w-full",
     vertical: "h-full",
     size: {
-      horizontal: "border-t",
-      vertical: "border-s"
+      horizontal: {
+        "2xs": "border-t",
+        xs: "border-t-[2px]",
+        sm: "border-t-[3px]",
+        md: "border-t-[4px]",
+        lg: "border-t-[5px]",
+        xl: "border-t-[6px]"
+      },
+      vertical: {
+        "2xs": "border-s",
+        xs: "border-s-[2px]",
+        sm: "border-s-[3px]",
+        md: "border-s-[4px]",
+        lg: "border-s-[5px]",
+        xl: "border-s-[6px]"
+      }
     },
     type: {
       solid: "border-solid",
@@ -30,5 +44,8 @@ export default {
     base: "flex-shrink-0",
     size: "2xs"
   },
-  label: "text-sm"
+  label: "text-sm",
+  default: {
+    size: "2xs"
+  }
 };

package/dist/runtime/utils/index.mjs

@@ -11,9 +11,18 @@ const defuTwMerge = createDefu((obj, key, value, namespace) => {
   if (namespace === "default" || namespace.startsWith("default.")) {
     return false;
   }
+  if (namespace === "popper" || namespace.startsWith("popper.")) {
+    return false;
+  }
   if (namespace.endsWith("avatar") && key === "size") {
     return false;
   }
+  if (namespace.endsWith("chip") && key === "size") {
+    return false;
+  }
+  if (namespace.endsWith("badge") && key === "size" || key === "color" || key === "variant") {
+    return false;
+  }
   if (typeof obj[key] === "string" && typeof value === "string" && obj[key] && value) {
     obj[key] = customTwMerge(obj[key], value);
     return true;