@nuxt/ui 3.0.2 → 3.1.0

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

@@ -18,11 +18,14 @@ export interface Form<T extends object> {
     submit(): Promise<void>;
     disabled: ComputedRef<boolean>;
     dirty: ComputedRef<boolean>;
+    loading: Ref<boolean>;
     dirtyFields: DeepReadonly<Set<keyof T>>;
     touchedFields: DeepReadonly<Set<keyof T>>;
     blurredFields: DeepReadonly<Set<keyof T>>;
 }
-export type FormSchema<T extends object> = YupObjectSchema<T> | JoiSchema<T> | SuperstructSchema<any, any> | StandardSchemaV1;
+export type FormSchema<I extends object = object, O extends object = I> = YupObjectSchema<I> | JoiSchema<I> | SuperstructSchema<any, any> | StandardSchemaV1<I, O>;
+export type InferInput<Schema> = Schema extends StandardSchemaV1 ? StandardSchemaV1.InferInput<Schema> : Schema extends YupObjectSchema<infer I> ? I : Schema extends JoiSchema<infer I> ? I : Schema extends SuperstructSchema<infer I, any> ? I : Schema extends StandardSchemaV1 ? StandardSchemaV1.InferInput<Schema> : never;
+export type InferOutput<Schema> = Schema extends StandardSchemaV1 ? StandardSchemaV1.InferOutput<Schema> : Schema extends YupObjectSchema<infer O> ? O : Schema extends JoiSchema<infer O> ? O : Schema extends SuperstructSchema<infer O, any> ? O : never;
 export type FormInputEvents = 'input' | 'blur' | 'change' | 'focus';
 export interface FormError<P extends string = string> {
     name?: P;

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

@@ -11,6 +11,7 @@ export * from '../components/Calendar.vue';
 export * from '../components/Card.vue';
 export * from '../components/Carousel.vue';
 export * from '../components/Checkbox.vue';
+export * from '../components/CheckboxGroup.vue';
 export * from '../components/Chip.vue';
 export * from '../components/Collapsible.vue';
 export * from '../components/ColorPicker.vue';

package/dist/runtime/types/index.js

@@ -11,6 +11,7 @@ export * from "../components/Calendar.vue";
 export * from "../components/Card.vue";
 export * from "../components/Carousel.vue";
 export * from "../components/Checkbox.vue";
+export * from "../components/CheckboxGroup.vue";
 export * from "../components/Chip.vue";
 export * from "../components/Collapsible.vue";
 export * from "../components/ColorPicker.vue";

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

@@ -1,4 +1,5 @@
 import type { AcceptableValue as _AcceptableValue } from 'reka-ui';
+import type { ClassValue } from 'tailwind-variants';
 import type { VNode } from 'vue';
 export interface TightMap<O = any> {
     [key: string]: TightMap | O;
@@ -8,19 +9,17 @@ export type DeepPartial<T, O = any> = {
 } & {
     [key: string]: O | TightMap<O>;
 };
+export type DynamicSlotsKeys<Name extends string | undefined, Suffix extends string | undefined = undefined> = (Name extends string ? Suffix extends string ? Name | `${Name}-${Suffix}` : Name : never);
 export type DynamicSlots<T extends {
     slot?: string;
-}, S extends string | undefined = undefined, D extends object = {}> = {
-    [K in T['slot'] as K extends string ? S extends string ? (K | `${K}-${S}`) : K : never]?: (props: {
+}, Suffix extends string | undefined = undefined, ExtraProps extends object = {}> = {
+    [K in DynamicSlotsKeys<T['slot'], Suffix>]: (props: {
         item: Extract<T, {
-            slot: K extends `${infer Base}-${S}` ? Base : K;
+            slot: K extends `${infer Base}-${Suffix}` ? Base : K;
         }>;
-    } & D) => any;
+    } & ExtraProps) => any;
 };
 export type GetObjectField<MaybeObject, Key extends string> = MaybeObject extends Record<string, any> ? MaybeObject[Key] : never;
-export type PartialString<T> = {
-    [K in keyof T]?: string;
-};
 export type AcceptableValue = Exclude<_AcceptableValue, Record<string, any>>;
 export type ArrayOrNested<T> = T[] | T[][];
 export type NestedItem<T> = T extends Array<infer I> ? NestedItem<I> : T;
@@ -45,4 +44,45 @@ export type StringOrVNode = string | VNode | (() => VNode);
 export type EmitsToProps<T> = {
     [K in keyof T as `on${Capitalize<string & K>}`]: T[K] extends [...args: infer Args] ? (...args: Args) => void : never;
 };
+/**
+ * Utility type to flatten intersection types for better IDE hover information.
+ * @template T The type to flatten.
+ */
+type Id<T> = {} & {
+    [P in keyof T]: T[P];
+};
+type ComponentVariants<T extends {
+    variants?: Record<string, Record<string, any>>;
+}> = {
+    [K in keyof T['variants']]: keyof T['variants'][K];
+};
+type ComponentSlots<T extends {
+    slots?: Record<string, any>;
+}> = Id<{
+    [K in keyof T['slots']]?: ClassValue;
+}>;
+type GetComponentAppConfig<A, U extends string, K extends string> = A extends Record<U, Record<K, any>> ? A[U][K] : {};
+type ComponentAppConfig<T, A extends Record<string, any>, K extends string, U extends string = 'ui' | 'uiPro' | 'uiPro.prose'> = A & (U extends 'uiPro.prose' ? {
+    uiPro?: {
+        prose?: {
+            [k in K]?: Partial<T>;
+        };
+    };
+} : {
+    [key in Exclude<U, 'uiPro.prose'>]?: {
+        [k in K]?: Partial<T>;
+    };
+});
+/**
+ * Defines the configuration shape expected for a component.
+ * @template T The component's theme imported from `#build/ui/*`.
+ * @template A The base AppConfig type from `@nuxt/schema`.
+ * @template K The key identifying the component (e.g., 'badge').
+ * @template U The top-level key in AppConfig ('ui' or 'uiPro').
+ */
+export type ComponentConfig<T extends Record<string, any>, A extends Record<string, any>, K extends string, U extends 'ui' | 'uiPro' | 'uiPro.prose' = 'ui'> = {
+    AppConfig: ComponentAppConfig<T, A, K, U>;
+    variants: ComponentVariants<T & GetComponentAppConfig<A, U, K>>;
+    slots: ComponentSlots<T>;
+};
 export {};

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

@@ -1,6 +1,6 @@
 import type { LinkProps } from '../types';
 export declare function pickLinkProps(link: LinkProps & {
     [key: string]: any;
-}): {
-    [x: string]: any;
-};
+}): import("@vueuse/shared").ReactivePickReturn<LinkProps & {
+    [key: string]: any;
+}, string>;

package/dist/runtime/utils/link.js

@@ -15,6 +15,7 @@ export function pickLinkProps(link) {
     "exactQuery",
     "external",
     "href",
+    "download",
     "inactiveClass",
     "noPrefetch",
     "noRel",

package/dist/runtime/utils/tv.js

@@ -1,4 +1,4 @@
 import { createTV } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-const appConfigTv = _appConfig;
+import appConfig from "#build/app.config";
+const appConfigTv = appConfig;
 export const tv = /* @__PURE__ */ createTV(appConfigTv.ui?.tv);

package/dist/runtime/vue/components/Icon.vue

@@ -1,13 +1,12 @@
-<script lang="ts">
-export interface IconProps {
-  name: string
-}
-</script>
+<script>
 
-<script setup lang="ts">
-import { Icon as IconifyIcon } from '@iconify/vue'
+</script>
 
-defineProps<IconProps>()
+<script setup>
+import { Icon as IconifyIcon } from "@iconify/vue";
+defineProps({
+  name: { type: String, required: true }
+});
 </script>
 
 <template>

package/dist/runtime/vue/components/Icon.vue.d.ts

@@ -0,0 +1,14 @@
+export interface IconProps {
+    name: string;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<IconProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<IconProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/runtime/vue/components/Link.vue

@@ -1,200 +1,116 @@
-<script lang="ts">
-import type { ButtonHTMLAttributes } from 'vue'
-import { tv } from 'tailwind-variants'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import type { RouterLinkProps, RouteLocationRaw } from 'vue-router'
-import theme from '#build/ui/link'
-
-interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
-  /**
-   * Route Location the link should navigate to when clicked on.
-   */
-  to?: RouteLocationRaw // need to manually type to avoid breaking typedPages
-  /**
-   * An alias for `to`. If used with `to`, `href` will be ignored
-   */
-  href?: NuxtLinkProps['to']
-  /**
-   * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
-   */
-  external?: boolean
-  /**
-   * Where to display the linked URL, as the name for a browsing context.
-   */
-  target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null
-  /**
-   * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
-   */
-  rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null
-  /**
-   * If set to true, no rel attribute will be added to the link
-   */
-  noRel?: boolean
-  /**
-   * A class to apply to links that have been prefetched.
-   */
-  prefetchedClass?: string
-  /**
-   * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
-   */
-  prefetch?: boolean
-  /**
-   * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
-   */
-  prefetchOn?: 'visibility' | 'interaction' | Partial<{
-    visibility: boolean
-    interaction: boolean
-  }>
-  /**
-   * Escape hatch to disable `prefetch` attribute.
-   */
-  noPrefetch?: boolean
-}
-
-const appConfigLink = _appConfig as AppConfig & { ui: { link: Partial<typeof theme> } }
-
-const link = tv({ extend: tv(theme), ...(appConfigLink.ui?.link || {}) })
-
-export interface LinkProps extends NuxtLinkProps {
-  /**
-   * The element or component this component should render as when not a link.
-   * @defaultValue 'button'
-   */
-  as?: any
-  /**
-   * The type of the button when not a link.
-   * @defaultValue 'button'
-   */
-  type?: ButtonHTMLAttributes['type']
-  disabled?: boolean
-  /** Force the link to be active independent of the current route. */
-  active?: boolean
-  /** Will only be active if the current route is an exact match. */
-  exact?: boolean
-  /** Will only be active if the current route query is an exact match. */
-  exactQuery?: boolean | 'partial'
-  /** Will only be active if the current route hash is an exact match. */
-  exactHash?: boolean
-  /** The class to apply when the link is inactive. */
-  inactiveClass?: string
-  custom?: boolean
-  /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
-  raw?: boolean
-  class?: any
-}
-
-export interface LinkSlots {
-  default(props: { active: boolean }): any
-}
+<script>
+import theme from "#build/ui/link";
 </script>
 
-<script setup lang="ts">
-import { computed, getCurrentInstance } from 'vue'
-import { isEqual, diff } from 'ohash/utils'
-import { useForwardProps } from 'reka-ui'
-import { reactiveOmit } from '@vueuse/core'
-import { hasProtocol } from 'ufo'
-import { useRoute } from '#imports'
-import { RouterLink } from 'vue-router'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<LinkProps>(), {
-  as: 'button',
-  type: 'button',
-  ariaCurrentValue: 'page',
-  active: undefined,
-  activeClass: '',
-  inactiveClass: ''
-})
-defineSlots<LinkSlots>()
-
-// Check if vue-router is available by checking for the injection key
+<script setup>
+import { computed, getCurrentInstance } from "vue";
+import { defu } from "defu";
+import { isEqual, diff } from "ohash/utils";
+import { useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+import { hasProtocol } from "ufo";
+import { useRoute, RouterLink } from "vue-router";
+import { useAppConfig } from "#imports";
+import { tv } from "../../utils/tv";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "button" },
+  type: { type: null, required: false, default: "button" },
+  disabled: { type: Boolean, required: false },
+  active: { type: Boolean, required: false, default: void 0 },
+  exact: { type: Boolean, required: false },
+  exactQuery: { type: [Boolean, String], required: false },
+  exactHash: { type: Boolean, required: false },
+  inactiveClass: { type: String, required: false, default: "" },
+  custom: { type: Boolean, required: false },
+  raw: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  to: { type: null, required: false },
+  href: { type: null, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
+  noRel: { type: Boolean, required: false },
+  prefetchedClass: { type: String, required: false },
+  prefetch: { type: Boolean, required: false },
+  prefetchOn: { type: [String, Object], required: false },
+  noPrefetch: { type: Boolean, required: false },
+  activeClass: { type: String, required: false, default: "" },
+  exactActiveClass: { type: String, required: false },
+  ariaCurrentValue: { type: String, required: false, default: "page" },
+  viewTransition: { type: Boolean, required: false },
+  replace: { type: Boolean, required: false }
+});
+defineSlots();
 const hasRouter = computed(() => {
-  const app = getCurrentInstance()?.appContext.app
-  return !!(app?.config?.globalProperties?.$router)
-})
-
-// Only try to get route if router exists
+  const app = getCurrentInstance()?.appContext.app;
+  return !!app?.config?.globalProperties?.$router;
+});
 const route = computed(() => {
-  if (!hasRouter.value) return null
+  if (!hasRouter.value) return null;
   try {
-    return useRoute()
+    return useRoute();
   } catch {
-    return null
+    return null;
   }
-})
-
-const routerLinkProps = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'exactQuery', 'exactHash', 'activeClass', 'inactiveClass', 'to', 'raw', 'class'))
-
+});
+const appConfig = useAppConfig();
+const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "raw", "class"));
 const ui = computed(() => tv({
-  extend: link,
-  variants: {
-    active: {
-      true: props.activeClass,
-      false: props.inactiveClass
+  extend: tv(theme),
+  ...defu({
+    variants: {
+      active: {
+        true: props.activeClass,
+        false: props.inactiveClass
+      }
     }
-  }
-}))
-
-function isPartiallyEqual(item1: any, item2: any) {
+  }, appConfig.ui?.link || {})
+}));
+function isPartiallyEqual(item1, item2) {
   const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
-    if (q.type === 'added') {
-      filtered.add(q.key)
+    if (q.type === "added") {
+      filtered.add(q.key);
     }
-    return filtered
-  }, new Set<string>())
-
-  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)))
-  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)))
-
-  return isEqual(item1Filtered, item2Filtered)
+    return filtered;
+  }, /* @__PURE__ */ new Set());
+  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)));
+  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)));
+  return isEqual(item1Filtered, item2Filtered);
 }
-
 const isExternal = computed(() => {
-  if (!props.to) return false
-  return typeof props.to === 'string' && hasProtocol(props.to, { acceptRelative: true })
-})
-
-function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
-  if (props.active !== undefined) {
-    return props.active
+  if (!props.to) return false;
+  return typeof props.to === "string" && hasProtocol(props.to, { acceptRelative: true });
+});
+function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
+  if (props.active !== void 0) {
+    return props.active;
   }
-
   if (!props.to || !route.value) {
-    return false
+    return false;
   }
-
-  if (props.exactQuery === 'partial') {
-    if (!isPartiallyEqual(linkRoute.query, route.value.query)) return false
+  if (props.exactQuery === "partial") {
+    if (!isPartiallyEqual(linkRoute.query, route.value.query)) return false;
   } else if (props.exactQuery === true) {
-    if (!isEqual(linkRoute.query, route.value.query)) return false
+    if (!isEqual(linkRoute.query, route.value.query)) return false;
   }
-
   if (props.exactHash && linkRoute.hash !== route.value.hash) {
-    return false
+    return false;
   }
-
   if (props.exact && isExactActive) {
-    return true
+    return true;
   }
-
   if (!props.exact && isActive) {
-    return true
+    return true;
   }
-
-  return false
+  return false;
 }
-
-function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
-  const active = isLinkActive({ route, isActive, isExactActive })
-
+function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
+  const active = isLinkActive({ route: route2, isActive, isExactActive });
   if (props.raw) {
-    return [props.class, active ? props.activeClass : props.inactiveClass]
+    return [props.class, active ? props.activeClass : props.inactiveClass];
   }
-
-  return ui.value({ class: props.class, active, disabled: props.disabled })
+  return ui.value({ class: props.class, active, disabled: props.disabled });
 }
 </script>
 
@@ -204,28 +120,28 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
       <template v-if="custom">
         <slot
           v-bind="{
-            ...$attrs,
-            ...(exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {}),
-            as,
-            type,
-            disabled,
-            href: to ? href : undefined,
-            navigate,
-            active: isLinkActive({ route: linkRoute, isActive, isExactActive })
-          }"
+  ...$attrs,
+  ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
+  as,
+  type,
+  disabled,
+  href: to ? href : void 0,
+  navigate,
+  active: isLinkActive({ route: linkRoute, isActive, isExactActive })
+}"
         />
       </template>
       <ULinkBase
         v-else
         v-bind="{
-          ...$attrs,
-          ...(exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {}),
-          as,
-          type,
-          disabled,
-          href: to ? href : undefined,
-          navigate
-        }"
+  ...$attrs,
+  ...exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
+  as,
+  type,
+  disabled,
+  href: to ? href : void 0,
+  navigate
+}"
         :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
       >
         <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
@@ -237,26 +153,26 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
     <template v-if="custom">
       <slot
         v-bind="{
-          ...$attrs,
-          as,
-          type,
-          disabled,
-          href: to,
-          target: isExternal ? '_blank' : undefined,
-          active: false
-        }"
+  ...$attrs,
+  as,
+  type,
+  disabled,
+  href: to,
+  target: isExternal ? '_blank' : void 0,
+  active: false
+}"
       />
     </template>
     <ULinkBase
       v-else
       v-bind="{
-        ...$attrs,
-        as,
-        type,
-        disabled,
-        href: (to as string),
-        target: isExternal ? '_blank' : undefined
-      }"
+  ...$attrs,
+  as,
+  type,
+  disabled,
+  href: to,
+  target: isExternal ? '_blank' : void 0
+}"
       :is-external="isExternal"
       :class="resolveLinkClass()"
     >