@nuxt/ui 4.0.1 → 4.2.0

package/dist/runtime/components/Tree.vue

@@ -3,11 +3,13 @@ import theme from "#build/ui/tree";
 </script>
 
 <script setup>
-import { computed } from "vue";
-import { TreeRoot, TreeItem, useForwardPropsEmits } from "reka-ui";
+import { computed, toRef, useTemplateRef } from "vue";
+import { TreeRoot, TreeItem, TreeVirtualizer, useForwardPropsEmits } from "reka-ui";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { defu } from "defu";
 import { useAppConfig } from "#imports";
 import { get } from "../utils";
+import { getEstimateSize } from "../utils/virtualizer";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -24,6 +26,10 @@ const props = defineProps({
   modelValue: { type: null, required: false },
   defaultValue: { type: null, required: false },
   multiple: { type: Boolean, required: false },
+  nested: { type: Boolean, required: false, default: true },
+  virtualize: { type: [Boolean, Object], required: false, default: false },
+  onSelect: { type: Function, required: false },
+  onToggle: { type: Function, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   expanded: { type: Array, required: false },
@@ -36,12 +42,59 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue", "update:expanded"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "items", "multiple", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "items", "multiple", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emits);
+const as = computed(() => {
+  if (typeof props.as === "string" || typeof props.as?.render === "function") {
+    return { root: props.as, link: "button" };
+  }
+  return defu(props.as, { root: "ul", link: "button" });
+});
+const nested = computed(() => props.virtualize ? false : props.nested);
+const flattenedPaddingFormula = computed(() => {
+  const sizeConfig = {
+    xs: { base: 2, perLevel: 5.5 },
+    // px-2, ms-4 + ps-1.5
+    sm: { base: 2.5, perLevel: 6 },
+    // px-2.5, ms-4.5 + ps-1.5
+    md: { base: 2.5, perLevel: 6.5 },
+    // px-2.5, ms-5 + ps-1.5
+    lg: { base: 3, perLevel: 7 },
+    // px-3, ms-5.5 + ps-1.5
+    xl: { base: 3, perLevel: 7.5 }
+    // px-3, ms-6 + ps-1.5
+  };
+  const config = sizeConfig[props.size || "md"];
+  return (level) => `calc(var(--spacing) * ${(level - 1) * config.perLevel + config.base})`;
+});
+const virtualizerProps = toRef(() => {
+  if (!props.virtualize) return false;
+  return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+    estimateSize: getEstimateSize(props.items || [], props.size || "md")
+  });
+});
 const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate();
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    level: {
+      type: Number,
+      required: true
+    }
+  }
+});
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tree || {} })({
   color: props.color,
-  size: props.size
+  size: props.size,
+  virtualize: !!props.virtualize
 }));
+const rootRef = useTemplateRef("rootRef");
 function getItemLabel(item) {
   return get(item, props.labelKey);
 }
@@ -53,113 +106,155 @@ function getDefaultOpenedItems(item) {
   const childItems = item.children?.flatMap((child) => getDefaultOpenedItems(child)) ?? [];
   return [currentItem, ...childItems].filter(Boolean);
 }
-const defaultExpanded = computed(
-  () => props.defaultExpanded ?? props.items?.flatMap((item) => getDefaultOpenedItems(item))
-);
+const defaultExpanded = computed(() => props.defaultExpanded ?? props.items?.flatMap((item) => getDefaultOpenedItems(item)));
+defineExpose({
+  get $el() {
+    return rootRef.value?.$el;
+  }
+});
 </script>
 
 <template>
-  <DefineTreeTemplate v-slot="{ items, level }">
-    <TreeItem
-      v-for="(item, index) in items"
-      :key="`${level}-${index}`"
-      v-slot="{ isExpanded, isSelected }"
-      :level="level"
-      :value="item"
-      :class="level > 1 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
-      @toggle="item.onToggle"
-      @select="item.onSelect"
+  <DefineItemTemplate v-slot="{ item, index, level }">
+    <li
+      role="presentation"
+      :class="!!nested && level > 1 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
     >
-      <slot
-        :name="item.slot ? `${item.slot}-wrapper` : 'item-wrapper'"
-        v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
-        :item="item"
+      <TreeItem
+        v-slot="{ isExpanded, isSelected, isIndeterminate, handleSelect, handleToggle }"
+        :level="level"
+        :value="item"
+        as-child
+        @toggle="(item.onToggle ?? props.onToggle)?.($event, item)"
+        @select="(item.onSelect ?? props.onSelect)?.($event, item)"
       >
-        <button
-          type="button"
-          :disabled="item.disabled || disabled"
-          :data-expanded="isExpanded"
-          :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })"
+        <slot
+          :name="item.slot ? `${item.slot}-wrapper` : 'item-wrapper'"
+          v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+          :item="item"
         >
-          <slot
-            :name="item.slot || 'item'"
-            v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
-            :item="item"
+          <component
+            :is="as.link"
+            :type="as.link === 'button' ? 'button' : void 0"
+            :disabled="item.disabled || disabled"
+            data-slot="link"
+            :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })"
+            :style="!nested && level > 1 ? { paddingLeft: flattenedPaddingFormula(level) } : void 0"
           >
             <slot
-              :name="item.slot ? `${item.slot}-leading` : 'item-leading'"
-              v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
+              :name="item.slot || 'item'"
+              v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
               :item="item"
-            >
-              <UIcon
-                v-if="item.icon"
-                :name="item.icon"
-                :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
-              />
-              <UIcon
-                v-else-if="item.children?.length"
-                :name="isExpanded ? expandedIcon ?? appConfig.ui.icons.folderOpen : collapsedIcon ?? appConfig.ui.icons.folder"
-                :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
-              />
-            </slot>
-
-            <span
-              v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']"
-              :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
             >
               <slot
-                :name="item.slot ? `${item.slot}-label` : 'item-label'"
-                v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
-                :item="item"
-              >
-                {{ getItemLabel(item) }}
-              </slot>
-            </span>
-
-            <span
-              v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']"
-              :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
-            >
-              <slot
-                :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'"
-                v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
+                :name="item.slot ? `${item.slot}-leading` : 'item-leading'"
+                v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
                 :item="item"
               >
                 <UIcon
-                  v-if="item.trailingIcon"
-                  :name="item.trailingIcon"
-                  :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                  v-if="item.icon"
+                  :name="item.icon"
+                  data-slot="linkLeadingIcon"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
                 <UIcon
                   v-else-if="item.children?.length"
-                  :name="trailingIcon ?? appConfig.ui.icons.chevronDown"
-                  :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                  :name="isExpanded ? expandedIcon ?? appConfig.ui.icons.folderOpen : collapsedIcon ?? appConfig.ui.icons.folder"
+                  data-slot="linkLeadingIcon"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
               </slot>
-            </span>
-          </slot>
-        </button>
-      </slot>
 
-      <ul
-        v-if="item.children?.length && isExpanded"
-        role="group"
-        :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })"
-      >
-        <ReuseTreeTemplate :items="item.children" :level="level + 1" />
-      </ul>
-    </TreeItem>
+              <span
+                v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']"
+                data-slot="linkLabel"
+                :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
+              >
+                <slot
+                  :name="item.slot ? `${item.slot}-label` : 'item-label'"
+                  v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+                  :item="item"
+                >
+                  {{ getItemLabel(item) }}
+                </slot>
+              </span>
+
+              <span
+                v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']"
+                data-slot="linkTrailing"
+                :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
+              >
+                <slot
+                  :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'"
+                  v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+                  :item="item"
+                >
+                  <UIcon
+                    v-if="item.trailingIcon"
+                    :name="item.trailingIcon"
+                    data-slot="linkTrailingIcon"
+                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                  />
+                  <UIcon
+                    v-else-if="item.children?.length"
+                    :name="trailingIcon ?? appConfig.ui.icons.chevronDown"
+                    data-slot="linkTrailingIcon"
+                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                  />
+                </slot>
+              </span>
+            </slot>
+          </component>
+        </slot>
+
+        <ul
+          v-if="nested && item.children?.length && isExpanded"
+          role="group"
+          data-slot="listWithChildren"
+          :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })"
+        >
+          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
+        </ul>
+      </TreeItem>
+    </li>
+  </DefineItemTemplate>
+
+  <DefineTreeTemplate v-slot="{ items, level }">
+    <ReuseItemTemplate v-for="(item, index) in items" :key="`${level}-${index}`" :item="item" :index="index" :level="level" />
   </DefineTreeTemplate>
 
   <TreeRoot
+    ref="rootRef"
+    v-slot="{ flattenItems }"
     v-bind="{ ...rootProps, ...$attrs }"
+    :as="as.root"
     :model-value="modelValue"
     :default-value="defaultValue"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :get-key="getItemKey"
     :default-expanded="defaultExpanded"
     :selection-behavior="selectionBehavior"
   >
-    <ReuseTreeTemplate :items="items" :level="1" />
+    <TreeVirtualizer
+      v-if="!!virtualize"
+      v-slot="{ item, virtualItem }"
+      :text-content="(item2) => getItemLabel(item2.value)"
+      v-bind="virtualizerProps"
+    >
+      <ReuseItemTemplate :item="item.value" :index="virtualItem.index" :level="item.level" />
+    </TreeVirtualizer>
+
+    <template v-else-if="!nested">
+      <ReuseItemTemplate
+        v-for="(item, index) in flattenItems"
+        :key="item._id"
+        :item="item.value"
+        :index="index"
+        :level="item.level"
+      />
+    </template>
+
+    <ReuseTreeTemplate v-else :items="items" :level="1" />
   </TreeRoot>
 </template>

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

@@ -1,4 +1,4 @@
-import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
+import type { TreeRootProps, TreeRootEmits, TreeItemSelectEvent, TreeItemToggleEvent } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tree';
 import type { IconProps } from '../types';
@@ -19,8 +19,8 @@ export type TreeItem = {
     disabled?: boolean;
     slot?: string;
     children?: TreeItem[];
-    onToggle?(e: Event): void;
-    onSelect?(e?: Event): void;
+    onToggle?: (e: TreeItemToggleEvent<TreeItem>) => void;
+    onSelect?: (e: TreeItemSelectEvent<TreeItem>) => void;
     class?: any;
     ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
     [key: string]: any;
@@ -30,7 +30,10 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean
      * The element or component this component should render as.
      * @defaultValue 'ul'
      */
-    as?: any;
+    as?: any | {
+        root?: any;
+        link?: any;
+    };
     /**
      * @defaultValue 'primary'
      */
@@ -71,6 +74,31 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean
     defaultValue?: M extends true ? T[number][] : T[number];
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
+    /**
+     * Use nested DOM structure (children inside parents) vs flattened structure (all items at same level).
+     * When `virtualize` is enabled, this is automatically set to `false`.
+     * @defaultValue true
+     */
+    nested?: boolean;
+    /**
+     * Enable virtualization for large lists.
+     * Note: when enabled, the tree structure is flattened like if `nested` was set to `false`.
+     * @defaultValue false
+     */
+    virtualize?: boolean | {
+        /**
+         * Number of items rendered outside the visible area
+         * @defaultValue 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item
+         * @defaultValue 32
+         */
+        estimateSize?: number;
+    };
+    onSelect?: (e: TreeItemSelectEvent<T[number]>, item: T[number]) => void;
+    onToggle?: (e: TreeItemToggleEvent<T[number]>, item: T[number]) => void;
     class?: any;
     ui?: Tree['slots'];
 }
@@ -81,6 +109,10 @@ type SlotProps<T extends TreeItem> = (props: {
     level: number;
     expanded: boolean;
     selected: boolean;
+    indeterminate: boolean | undefined;
+    handleSelect: () => void;
+    handleToggle: () => void;
+    ui: Tree['ui'];
 }) => any;
 export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
     'item-wrapper': SlotProps<T[number]>;
@@ -92,14 +124,20 @@ export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
     index: number;
     level: number;
     expanded: boolean;
+    ui: Tree['ui'];
     selected: boolean;
+    indeterminate: boolean | undefined;
+    handleSelect: () => void;
+    handleToggle: () => void;
 }>;
 declare const __VLS_export: <T extends TreeItem[], M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<TreeProps<T, M> & {
         "onUpdate:modelValue"?: ((val: M extends true ? T[number][] : T[number]) => any) | undefined;
         "onUpdate:expanded"?: ((val: string[]) => any) | undefined;
     }> & import("vue").PublicProps;
-    expose: (exposed: {}) => void;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        readonly $el: HTMLElement;
+    }>) => void;
     attrs: any;
     slots: TreeSlots<T>;
     emit: ((evt: "update:modelValue", val: M extends true ? T[number][] : T[number]) => void) & ((evt: "update:expanded", val: string[]) => void);

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

@@ -31,7 +31,9 @@ export interface UserProps {
     ui?: User['slots'];
 }
 export interface UserSlots {
-    avatar(props?: {}): any;
+    avatar(props: {
+        ui: User['ui'];
+    }): any;
     name(props?: {}): any;
     description(props?: {}): any;
     default(props?: {}): any;

package/dist/runtime/components/User.vue

@@ -35,15 +35,22 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
-    <slot name="avatar">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
+    <slot name="avatar" :ui="ui">
       <UChip v-if="chip && avatar" inset v-bind="typeof chip === 'object' ? chip : {}" :size="size">
-        <UAvatar :alt="name" v-bind="avatar" :size="size" :class="ui.avatar({ class: props.ui?.avatar })" />
+        <UAvatar :alt="name" v-bind="avatar" :size="size" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       </UChip>
-      <UAvatar v-else-if="avatar" :alt="name" v-bind="avatar" :size="size" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UAvatar
+        v-else-if="avatar"
+        :alt="name"
+        v-bind="avatar"
+        :size="size"
+        data-slot="avatar"
+        :class="ui.avatar({ class: props.ui?.avatar })"
+      />
     </slot>
 
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
       <ULink
         v-if="to"
         :aria-label="name"
@@ -56,12 +63,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })
       </ULink>
 
       <slot>
-        <p v-if="name || !!slots.name" :class="ui.name({ class: props.ui?.name })">
+        <p v-if="name || !!slots.name" data-slot="name" :class="ui.name({ class: props.ui?.name })">
           <slot name="name">
             {{ name }}
           </slot>
         </p>
-        <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
           <slot name="description">
             {{ description }}
           </slot>

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

@@ -31,7 +31,9 @@ export interface UserProps {
     ui?: User['slots'];
 }
 export interface UserSlots {
-    avatar(props?: {}): any;
+    avatar(props: {
+        ui: User['ui'];
+    }): any;
     name(props?: {}): any;
     description(props?: {}): any;
     default(props?: {}): any;

package/dist/runtime/components/color-mode/ColorModeAvatar.d.vue.ts

@@ -1,8 +1,8 @@
-import type { AvatarProps } from '@nuxt/ui';
-export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProps, 'src'> {
+import type { AvatarProps } from '../../types';
+export interface ColorModeAvatarProps extends Omit<AvatarProps, 'src'> {
     light: string;
     dark: string;
 }
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeAvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeAvatar.vue

@@ -3,15 +3,27 @@
 </script>
 
 <script setup>
+import { useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
 import UAvatar from "../Avatar.vue";
 defineOptions({ inheritAttrs: false });
-defineProps({
+const props = defineProps({
   light: { type: String, required: true },
-  dark: { type: String, required: true }
+  dark: { type: String, required: true },
+  as: { type: null, required: false },
+  alt: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
+  text: { type: String, required: false },
+  size: { type: null, required: false },
+  chip: { type: [Boolean, Object], required: false },
+  class: { type: null, required: false },
+  style: { type: null, required: false },
+  ui: { type: null, required: false }
 });
+const avatarProps = useForwardProps(reactiveOmit(props, "light", "dark"));
 </script>
 
 <template>
-  <UAvatar :src="light" class="dark:hidden" v-bind="$attrs" />
-  <UAvatar :src="dark" class="hidden dark:block" v-bind="$attrs" />
+  <UAvatar v-bind="{ ...avatarProps, ...$attrs }" :src="light" class="dark:hidden" />
+  <UAvatar v-bind="{ ...avatarProps, ...$attrs }" :src="dark" class="hidden dark:block" />
 </template>

package/dist/runtime/components/color-mode/ColorModeAvatar.vue.d.ts

@@ -1,8 +1,8 @@
-import type { AvatarProps } from '@nuxt/ui';
-export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProps, 'src'> {
+import type { AvatarProps } from '../../types';
+export interface ColorModeAvatarProps extends Omit<AvatarProps, 'src'> {
     light: string;
     dark: string;
 }
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeAvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeButton.d.vue.ts

@@ -1,5 +1,5 @@
-import type { ButtonProps } from '@nuxt/ui';
-export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+import type { ButtonProps } from '../../types';
+export interface ColorModeButtonProps extends Omit<ButtonProps, 'color' | 'variant'> {
     /**
      * @defaultValue 'neutral'
      */
@@ -9,16 +9,9 @@ export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProp
      */
     variant?: ButtonProps['variant'];
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
-    color: ButtonProps["color"];
-    variant: ButtonProps["variant"];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    fallback(props?: {}): any;
-}>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};