@nuxt/ui 2.9.0 → 2.11.0

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

@@ -1,10 +1,16 @@
-export interface FormError {
-  path: string
+import type { Ref } from 'vue'
+
+export interface FormError<T extends string = string> {
+  path: T
   message: string
 }
 
+export interface FormErrorWithId extends FormError {
+  id: string
+}
+
 export interface Form<T> {
-  validate(path?: string, opts: { silent?: boolean }): Promise<T>
+  validate(path?: string, opts?: { silent?: boolean }): Promise<T>
   clear(path?: string): void
   errors: Ref<FormError[]>
   setErrors(errs: FormError[], path?: string): void
@@ -12,17 +18,19 @@ export interface Form<T> {
 }
 
 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
+  path?: string
 }
 
 export interface InjectedFormGroupValue {
-  inputId: Ref<string>
+  inputId: Ref<string | undefined>
   name: Ref<string>
-  size: Ref<string>
+  size: Ref<string | number | symbol>
   error: Ref<string | boolean>
+  eagerValidation: Ref<boolean>
 }

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

@@ -1,14 +1,26 @@
 export * from './accordion'
+export * from './alert'
 export * from './avatar'
 export * from './badge'
+export * from './breadcrumb'
 export * from './button'
+export * from './chip'
 export * from './clipboard'
 export * from './command-palette'
 export * from './dropdown'
+export * from './form-group'
 export * from './form'
+export * from './input'
+export * from './kbd'
 export * from './link'
+export * from './meter'
 export * from './notification'
 export * from './popper'
+export * from './progress'
+export * from './range'
+export * from './select'
 export * from './tabs'
+export * from './textarea'
+export * from './toggle'
 export * from './vertical-navigation'
 export * from './utils'

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

@@ -0,0 +1,8 @@
+import { input } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
+
+export type InputSize = keyof typeof input.size | ExtractDeepKey<AppConfig, ['ui', 'input', 'size']>
+export type InputColor = keyof typeof input.color | ExtractDeepKey<AppConfig, ['ui', 'input', 'color']> | typeof colors[number]
+export type InputVariant = keyof typeof input.variant | ExtractDeepKey<AppConfig, ['ui', 'input', 'variant']> | NestedKeyOf<typeof input.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'input', 'color']>>

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

@@ -0,0 +1,5 @@
+import { kbd } from '../ui.config'
+import type { ExtractDeepKey } from '.'
+import type { AppConfig } from 'nuxt/schema'
+
+export type KbdSize = keyof typeof kbd.size | ExtractDeepKey<AppConfig, ['ui', 'kbd', 'size']>

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

@@ -0,0 +1,5 @@
+import { meter } from '../ui.config'
+import colors from '#ui-colors'
+
+export type MeterSize = keyof typeof meter.meter.size
+export type MeterColor = keyof typeof meter.color | typeof colors[number]

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

@@ -11,4 +11,5 @@ export interface PopperOptions {
   adaptive?: boolean
   scroll?: boolean
   resize?: boolean
+  arrow?: boolean
 }

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

@@ -0,0 +1,4 @@
+import { progress } from '../ui.config'
+
+export type ProgressSize = keyof typeof progress.progress.size
+export type ProgressAnimation = keyof typeof progress.animation

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

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

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

@@ -0,0 +1,8 @@
+import { select } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
+
+export type SelectSize = keyof typeof select.size | ExtractDeepKey<AppConfig, ['ui', 'select', 'size']>
+export type SelectColor = keyof typeof select.color | ExtractDeepKey<AppConfig, ['ui', 'select', 'color']> | typeof colors[number]
+export type SelectVariant = keyof typeof select.variant | ExtractDeepKey<AppConfig, ['ui', 'select', 'variant']> | NestedKeyOf<typeof select.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'select', 'color']>>

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

@@ -0,0 +1,8 @@
+import { textarea } from '../ui.config'
+import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import colors from '#ui-colors'
+import type { AppConfig } from 'nuxt/schema'
+
+export type TextareaSize = keyof typeof textarea.size | ExtractDeepKey<AppConfig, ['ui', 'textarea', 'size']>
+export type TextareaColor = keyof typeof textarea.color | ExtractDeepKey<AppConfig, ['ui', 'textarea', 'color']> | typeof colors[number]
+export type TextareaVariant = keyof typeof textarea.variant | ExtractDeepKey<AppConfig, ['ui', 'textarea', 'variant']> | NestedKeyOf<typeof textarea.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'textarea', 'color']>>

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

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

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

@@ -1,11 +1,28 @@
-export type Strategy = 'merge' | 'override';
+export type Strategy = 'merge' | 'override'
 
 export type NestedKeyOf<ObjectType extends object> = {
   [Key in keyof ObjectType]: ObjectType[Key] extends object
   ? NestedKeyOf<ObjectType[Key]>
-  : Key;
-}[keyof ObjectType];
+  : Key
+}[keyof ObjectType]
 
 export type DeepPartial<T> = Partial<{
-  [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string };
-}>;
+  [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string | object }
+}>
+
+type DeepKey<T, Keys extends string[]> =
+  Keys extends [infer First, ...infer Rest]
+    ? First extends keyof T
+      ? Rest extends string[]
+        ? DeepKey<T[First], Rest>
+        : never
+      : never
+    : T
+
+export type ExtractDeepKey<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
+  ? Result extends object ? keyof Result : never
+  : never
+
+export type ExtractDeepObject<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
+  ? Result extends object ? Result : never
+  : never

package/dist/runtime/ui.config/_popperArrow.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    base: string;
+    ring: string;
+    rounded: string;
+    background: string;
+    shadow: string;
+    placement: string;
+};
+export default _default;

package/dist/runtime/ui.config/_popperArrow.mjs

@@ -0,0 +1,8 @@
+export default {
+  base: "before:w-2 before:h-2",
+  ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-800",
+  rounded: "before:rounded-sm",
+  background: "before:bg-gray-200 dark:before:bg-gray-800",
+  shadow: "before:shadow",
+  placement: 'group-data-[popper-placement*="right"]:-left-1 group-data-[popper-placement*="left"]:-right-1 group-data-[popper-placement*="top"]:-bottom-1 group-data-[popper-placement*="bottom"]:-top-1'
+};

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

@@ -0,0 +1,60 @@
+declare const _default: {
+    wrapper: string;
+    base: string;
+    divide: string;
+    thead: string;
+    tbody: string;
+    tr: {
+        base: string;
+        selected: string;
+        active: string;
+    };
+    th: {
+        base: string;
+        padding: string;
+        color: string;
+        font: string;
+        size: string;
+    };
+    td: {
+        base: string;
+        padding: string;
+        color: string;
+        font: string;
+        size: string;
+    };
+    checkbox: {
+        padding: string;
+    };
+    loadingState: {
+        wrapper: string;
+        label: string;
+        icon: string;
+    };
+    emptyState: {
+        wrapper: string;
+        label: string;
+        icon: string;
+    };
+    default: {
+        sortAscIcon: string;
+        sortDescIcon: string;
+        sortButton: {
+            icon: string;
+            trailing: boolean;
+            square: boolean;
+            color: string;
+            variant: string;
+            class: string;
+        };
+        loadingState: {
+            icon: string;
+            label: string;
+        };
+        emptyState: {
+            icon: string;
+            label: string;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,59 @@
+export default {
+  wrapper: "relative overflow-x-auto",
+  base: "min-w-full table-fixed",
+  divide: "divide-y divide-gray-300 dark:divide-gray-700",
+  thead: "",
+  tbody: "divide-y divide-gray-200 dark:divide-gray-800",
+  tr: {
+    base: "",
+    selected: "bg-gray-50 dark:bg-gray-800/50",
+    active: "hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer"
+  },
+  th: {
+    base: "text-left rtl:text-right",
+    padding: "px-3 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",
+    color: "text-gray-500 dark:text-gray-400",
+    font: "",
+    size: "text-sm"
+  },
+  checkbox: {
+    padding: "ps-4"
+  },
+  loadingState: {
+    wrapper: "flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14",
+    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 animate-spin"
+  },
+  emptyState: {
+    wrapper: "flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14",
+    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"
+  },
+  default: {
+    sortAscIcon: "i-heroicons-bars-arrow-up-20-solid",
+    sortDescIcon: "i-heroicons-bars-arrow-down-20-solid",
+    sortButton: {
+      icon: "i-heroicons-arrows-up-down-20-solid",
+      trailing: true,
+      square: true,
+      color: "gray",
+      variant: "ghost",
+      class: "-m-1.5"
+    },
+    loadingState: {
+      icon: "i-heroicons-arrow-path-20-solid",
+      label: "Loading..."
+    },
+    emptyState: {
+      icon: "i-heroicons-circle-stack-20-solid",
+      label: "No items."
+    }
+  }
+};

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

@@ -0,0 +1,21 @@
+declare const _default: {
+    wrapper: string;
+    item: {
+        base: string;
+        size: string;
+        color: string;
+        padding: string;
+        icon: string;
+    };
+    transition: {
+        enterActiveClass: string;
+        leaveActiveClass: string;
+    };
+    default: {
+        openIcon: string;
+        closeIcon: string;
+        class: string;
+        variant: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,20 @@
+export default {
+  wrapper: "w-full flex flex-col",
+  item: {
+    base: "",
+    size: "text-sm",
+    color: "text-gray-500 dark:text-gray-400",
+    padding: "pt-1.5 pb-3",
+    icon: "ms-auto transform transition-transform duration-200"
+  },
+  transition: {
+    enterActiveClass: "overflow-hidden transition-[height] duration-200 ease-out",
+    leaveActiveClass: "overflow-hidden transition-[height] duration-200 ease-out"
+  },
+  default: {
+    openIcon: "i-heroicons-chevron-down-20-solid",
+    closeIcon: "",
+    class: "mb-1.5 w-full",
+    variant: "soft"
+  }
+};

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

@@ -0,0 +1,40 @@
+declare const _default: {
+    wrapper: string;
+    title: string;
+    description: string;
+    actions: string;
+    shadow: string;
+    rounded: string;
+    padding: string;
+    gap: string;
+    icon: {
+        base: string;
+    };
+    avatar: {
+        base: string;
+        size: string;
+    };
+    color: {
+        white: {
+            solid: string;
+        };
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    default: {
+        color: string;
+        variant: string;
+        icon: null;
+        closeButton: null;
+        actionButton: {
+            size: string;
+            color: string;
+            variant: string;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,39 @@
+export default {
+  wrapper: "w-full relative overflow-hidden",
+  title: "text-sm font-medium",
+  description: "mt-1 text-sm leading-4 opacity-90",
+  actions: "flex items-center gap-2 mt-3 flex-shrink-0",
+  shadow: "",
+  rounded: "rounded-lg",
+  padding: "p-4",
+  gap: "gap-3",
+  icon: {
+    base: "flex-shrink-0 w-5 h-5"
+  },
+  avatar: {
+    base: "flex-shrink-0 self-center",
+    size: "md"
+  },
+  color: {
+    white: {
+      solid: "text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800"
+    }
+  },
+  variant: {
+    solid: "bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900",
+    outline: "text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400",
+    soft: "bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400",
+    subtle: "bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25"
+  },
+  default: {
+    color: "white",
+    variant: "solid",
+    icon: null,
+    closeButton: null,
+    actionButton: {
+      size: "xs",
+      color: "primary",
+      variant: "link"
+    }
+  }
+};

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

@@ -0,0 +1,60 @@
+declare const _default: {
+    wrapper: string;
+    background: string;
+    rounded: string;
+    text: string;
+    placeholder: string;
+    size: {
+        '3xs': string;
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    chip: {
+        base: string;
+        background: string;
+        position: {
+            'top-right': string;
+            'bottom-right': string;
+            'top-left': string;
+            'bottom-left': string;
+        };
+        size: {
+            '3xs': string;
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+        };
+    };
+    icon: {
+        base: string;
+        size: {
+            '3xs': string;
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+        };
+    };
+    default: {
+        size: string;
+        icon: null;
+        chipColor: null;
+        chipPosition: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,59 @@
+export default {
+  wrapper: "relative inline-flex items-center justify-center flex-shrink-0",
+  background: "bg-gray-100 dark:bg-gray-800",
+  rounded: "rounded-full",
+  text: "font-medium leading-none text-gray-900 dark:text-white truncate",
+  placeholder: "font-medium leading-none text-gray-500 dark:text-gray-400 truncate",
+  size: {
+    "3xs": "h-4 w-4 text-[8px]",
+    "2xs": "h-5 w-5 text-[10px]",
+    xs: "h-6 w-6 text-xs",
+    sm: "h-8 w-8 text-sm",
+    md: "h-10 w-10 text-base",
+    lg: "h-12 w-12 text-lg",
+    xl: "h-14 w-14 text-xl",
+    "2xl": "h-16 w-16 text-2xl",
+    "3xl": "h-20 w-20 text-3xl"
+  },
+  chip: {
+    base: "absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium",
+    background: "bg-{color}-500 dark:bg-{color}-400",
+    position: {
+      "top-right": "top-0 right-0",
+      "bottom-right": "bottom-0 right-0",
+      "top-left": "top-0 left-0",
+      "bottom-left": "bottom-0 left-0"
+    },
+    size: {
+      "3xs": "h-[4px] min-w-[4px] text-[4px] p-px",
+      "2xs": "h-[5px] min-w-[5px] text-[5px] p-px",
+      xs: "h-1.5 min-w-[0.375rem] text-[6px] p-px",
+      sm: "h-2 min-w-[0.5rem] text-[7px] p-0.5",
+      md: "h-2.5 min-w-[0.625rem] text-[8px] p-0.5",
+      lg: "h-3 min-w-[0.75rem] text-[10px] p-0.5",
+      xl: "h-3.5 min-w-[0.875rem] text-[11px] p-1",
+      "2xl": "h-4 min-w-[1rem] text-[12px] p-1",
+      "3xl": "h-5 min-w-[1.25rem] text-[14px] p-1"
+    }
+  },
+  icon: {
+    base: "text-gray-500 dark:text-gray-400 flex-shrink-0",
+    size: {
+      "3xs": "h-2 w-2",
+      "2xs": "h-2.5 w-2.5",
+      xs: "h-3 w-3",
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6",
+      xl: "h-7 w-7",
+      "2xl": "h-8 w-8",
+      "3xl": "h-10 w-10"
+    }
+  },
+  default: {
+    size: "sm",
+    icon: null,
+    chipColor: null,
+    chipPosition: "top-right"
+  }
+};

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

@@ -0,0 +1,6 @@
+declare const _default: {
+    wrapper: string;
+    ring: string;
+    margin: string;
+};
+export default _default;

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

@@ -0,0 +1,5 @@
+export default {
+  wrapper: "inline-flex flex-row-reverse justify-end",
+  ring: "ring-2 ring-white dark:ring-gray-900",
+  margin: "-me-1.5 first:me-0"
+};

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

@@ -0,0 +1,34 @@
+declare const _default: {
+    base: string;
+    rounded: string;
+    font: string;
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    color: {
+        white: {
+            solid: string;
+        };
+        gray: {
+            solid: string;
+        };
+        black: {
+            solid: string;
+        };
+    };
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    default: {
+        size: string;
+        variant: string;
+        color: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,33 @@
+export default {
+  base: "inline-flex items-center",
+  rounded: "rounded-md",
+  font: "font-medium",
+  size: {
+    xs: "text-xs px-1.5 py-0.5",
+    sm: "text-xs px-2 py-1",
+    md: "text-sm px-2 py-1",
+    lg: "text-sm px-2.5 py-1.5"
+  },
+  color: {
+    white: {
+      solid: "ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900"
+    },
+    gray: {
+      solid: "ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800"
+    },
+    black: {
+      solid: "text-white dark:text-gray-900 bg-gray-900 dark:bg-white"
+    }
+  },
+  variant: {
+    solid: "bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900",
+    outline: "text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400",
+    soft: "bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400",
+    subtle: "bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25"
+  },
+  default: {
+    size: "sm",
+    variant: "solid",
+    color: "primary"
+  }
+};