@nuxt/ui 4.9.0 → 4.10.0

package/dist/runtime/composables/defineShortcuts.js

@@ -1,9 +1,9 @@
 import { ref, computed, toValue } from "vue";
-import { useEventListener, useActiveElement, useDebounceFn } from "@vueuse/core";
+import { useEventListener, useActiveElement, useDebounceFn, useTimeoutFn } from "@vueuse/core";
 import { useKbd } from "./useKbd.js";
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
-const shiftableKeys = ["arrowleft", "arrowright", "arrowup", "arrowright", "tab", "escape", "enter", "backspace"];
+const shiftableKeys = ["arrowleft", "arrowright", "arrowup", "arrowdown", "tab", "escape", "enter", "backspace"];
 function convertKeyToCode(key) {
   if (/^[a-z]$/i.test(key)) {
     return `Key${key.toUpperCase()}`;
@@ -48,11 +48,32 @@ export function extractShortcuts(items, separator = "_") {
   return shortcuts;
 }
 export function defineShortcuts(config, options = {}) {
+  const chainDelay = options.chainDelay ?? 800;
   const chainedInputs = ref([]);
   const clearChainedInput = () => {
     chainedInputs.value.splice(0, chainedInputs.value.length);
   };
-  const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
+  const debouncedClearChainedInput = useDebounceFn(clearChainedInput, chainDelay);
+  let pendingShortcut;
+  const cancelPendingShortcut = () => {
+    pendingShortcut = void 0;
+    pendingTimer.stop();
+  };
+  const runPendingShortcut = () => {
+    const pending = pendingShortcut;
+    cancelPendingShortcut();
+    if (!pending) {
+      return;
+    }
+    const shortcut = standardShortcuts.value.find((s) => s.key === pending.shortcut.key && !s.metaKey && !s.ctrlKey && !s.altKey && !s.shiftKey);
+    if (shortcut?.enabled) {
+      shortcut.handler(pending.event);
+    }
+  };
+  const pendingTimer = useTimeoutFn(() => {
+    runPendingShortcut();
+    clearChainedInput();
+  }, chainDelay, { immediate: false });
   const { macOS } = useKbd();
   const activeElement = useActiveElement();
   const layoutIndependent = options.layoutIndependent ?? false;
@@ -68,19 +89,23 @@ export function defineShortcuts(config, options = {}) {
     chainedInputs.value.push(layoutIndependent ? e.code : e.key);
     if (chainedInputs.value.length >= 2) {
       chainedKey = chainedInputs.value.slice(-2).join("-");
-      for (const shortcut of shortcuts.value.filter((s) => s.chained)) {
+      for (const shortcut of chainedShortcuts.value) {
         if (shortcut.key !== chainedKey) {
           continue;
         }
         if (shortcut.enabled) {
+          cancelPendingShortcut();
           e.preventDefault();
           shortcut.handler(e);
+        } else {
+          runPendingShortcut();
         }
         clearChainedInput();
         return;
       }
     }
-    for (const shortcut of shortcuts.value.filter((s) => !s.chained)) {
+    runPendingShortcut();
+    for (const shortcut of standardShortcuts.value) {
       if (layoutIndependent) {
         if (e.code !== shortcut.key) {
           continue;
@@ -106,6 +131,15 @@ export function defineShortcuts(config, options = {}) {
       if ((alphabetKey || shiftableKey || shortcut.shiftKey || e.shiftKey && (e.metaKey || e.ctrlKey)) && e.shiftKey !== shortcut.shiftKey) {
         continue;
       }
+      const isUnmodified = !shortcut.metaKey && !shortcut.ctrlKey && !shortcut.altKey && !shortcut.shiftKey;
+      if (isUnmodified && chainPrefixes.value.has(shortcut.key)) {
+        if (shortcut.enabled) {
+          e.preventDefault();
+        }
+        pendingShortcut = { shortcut, event: e };
+        pendingTimer.start();
+        return;
+      }
       if (shortcut.enabled) {
         e.preventDefault();
         shortcut.handler(e);
@@ -194,5 +228,8 @@ export function defineShortcuts(config, options = {}) {
       return shortcut;
     }).filter(Boolean);
   });
+  const chainedShortcuts = computed(() => shortcuts.value.filter((s) => s.chained));
+  const standardShortcuts = computed(() => shortcuts.value.filter((s) => !s.chained));
+  const chainPrefixes = computed(() => new Set(chainedShortcuts.value.map((s) => s.key.split("-")[0])));
   return useEventListener("keydown", onKeyDown);
 }

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

@@ -1,5 +1,5 @@
 import type { ComputedRef, InjectionKey } from 'vue';
-import type { AvatarGroupProps } from '../types';
+import type { AvatarGroupProps } from '../components/AvatarGroup.vue';
 export declare const avatarGroupInjectionKey: InjectionKey<ComputedRef<{
     size: AvatarGroupProps['size'];
     color: AvatarGroupProps['color'];
@@ -16,6 +16,6 @@ export declare function useAvatarGroup(props: {
     size: AvatarGroupProps['size'];
     color: AvatarGroupProps['color'];
 }): {
-    size: ComputedRef<"md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | undefined>;
-    color: ComputedRef<"error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | undefined>;
+    size: ComputedRef<"xs" | "sm" | "md" | "lg" | "xl" | "3xs" | "2xs" | "2xl" | "3xl" | undefined>;
+    color: ComputedRef<"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" | undefined>;
 };

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

@@ -1,5 +1,6 @@
 import type { MaybeRefOrGetter } from 'vue';
-import type { AvatarProps, IconProps } from '../types';
+import type { AvatarProps } from '../components/Avatar.vue';
+import type { IconProps } from '../components/Icon.vue';
 export interface UseComponentIconsProps {
     /**
      * Display an icon based on the `leading` and `trailing` props.

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

@@ -1,160 +1,6 @@
 import type { ComputedRef } from 'vue';
-import type * as ComponentTypes from '../types';
-import type { SlotClass } from '../types/tv';
-import type * as ui from '#build/ui';
-type ThemeSlotOverrides<T> = T extends {
-    slots: infer S extends Record<string, any>;
-} ? {
-    [K in keyof S]?: SlotClass;
-} : {
-    [K in keyof T]?: T[K] extends any[] ? SlotClass : T[K] extends Record<string, any> ? ThemeSlotOverrides<T[K]> : SlotClass;
-};
-/**
- * Flat slot-class override shape: `{ button: { base: '...' }, modal: {...} }`.
- * Powers the `:ui` prop on `<UTheme>`, which remains the recommended way to
- * scope class overrides without touching component prop defaults.
- */
-export type ThemeUI = {
-    [K in keyof typeof ui]?: ThemeSlotOverrides<(typeof ui)[K]>;
-};
-/**
- * Strict per-component defaults shape used by `<UTheme :props>`. Authored as
- * a flat interface with literal keys (rather than a mapped type) so editors —
- * Volar in particular — surface key completions inside template inline
- * objects (`:props="{ button: { … } }"`). Volar reliably iterates interface
- * members but not mapped-type members in this position.
- *
- * Keys mirror the theme registry exposed by `#build/ui` (see
- * `src/templates.ts`): every themable component gets one camelCase entry
- * whose value is a `Partial` of that component's `<PascalCase>Props`.
- */
-export interface ThemeDefaults {
-    accordion?: Partial<ComponentTypes.AccordionProps>;
-    alert?: Partial<ComponentTypes.AlertProps>;
-    authForm?: Partial<ComponentTypes.AuthFormProps>;
-    avatar?: Partial<ComponentTypes.AvatarProps>;
-    avatarGroup?: Partial<ComponentTypes.AvatarGroupProps>;
-    badge?: Partial<ComponentTypes.BadgeProps>;
-    banner?: Partial<ComponentTypes.BannerProps>;
-    blogPost?: Partial<ComponentTypes.BlogPostProps>;
-    blogPosts?: Partial<ComponentTypes.BlogPostsProps>;
-    breadcrumb?: Partial<ComponentTypes.BreadcrumbProps>;
-    button?: Partial<ComponentTypes.ButtonProps>;
-    calendar?: Partial<ComponentTypes.CalendarProps>;
-    card?: Partial<ComponentTypes.CardProps>;
-    carousel?: Partial<ComponentTypes.CarouselProps>;
-    changelogVersion?: Partial<ComponentTypes.ChangelogVersionProps>;
-    changelogVersions?: Partial<ComponentTypes.ChangelogVersionsProps>;
-    chatMessage?: Partial<ComponentTypes.ChatMessageProps>;
-    chatMessages?: Partial<ComponentTypes.ChatMessagesProps>;
-    chatPalette?: Partial<ComponentTypes.ChatPaletteProps>;
-    chatPrompt?: Partial<ComponentTypes.ChatPromptProps>;
-    chatPromptSubmit?: Partial<ComponentTypes.ChatPromptSubmitProps>;
-    chatReasoning?: Partial<ComponentTypes.ChatReasoningProps>;
-    chatShimmer?: Partial<ComponentTypes.ChatShimmerProps>;
-    chatTool?: Partial<ComponentTypes.ChatToolProps>;
-    checkbox?: Partial<ComponentTypes.CheckboxProps>;
-    checkboxGroup?: Partial<ComponentTypes.CheckboxGroupProps>;
-    chip?: Partial<ComponentTypes.ChipProps>;
-    collapsible?: Partial<ComponentTypes.CollapsibleProps>;
-    colorPicker?: Partial<ComponentTypes.ColorPickerProps>;
-    commandPalette?: Partial<ComponentTypes.CommandPaletteProps>;
-    container?: Partial<ComponentTypes.ContainerProps>;
-    contentNavigation?: Partial<ComponentTypes.ContentNavigationProps>;
-    contentSearch?: Partial<ComponentTypes.ContentSearchProps>;
-    contentSearchButton?: Partial<ComponentTypes.ContentSearchButtonProps>;
-    contentSurround?: Partial<ComponentTypes.ContentSurroundProps>;
-    contentToc?: Partial<ComponentTypes.ContentTocProps>;
-    contextMenu?: Partial<ComponentTypes.ContextMenuProps>;
-    dashboardGroup?: Partial<ComponentTypes.DashboardGroupProps>;
-    dashboardNavbar?: Partial<ComponentTypes.DashboardNavbarProps>;
-    dashboardPanel?: Partial<ComponentTypes.DashboardPanelProps>;
-    dashboardResizeHandle?: Partial<ComponentTypes.DashboardResizeHandleProps>;
-    dashboardSearch?: Partial<ComponentTypes.DashboardSearchProps>;
-    dashboardSearchButton?: Partial<ComponentTypes.DashboardSearchButtonProps>;
-    dashboardSidebar?: Partial<ComponentTypes.DashboardSidebarProps>;
-    dashboardSidebarCollapse?: Partial<ComponentTypes.DashboardSidebarCollapseProps>;
-    dashboardSidebarToggle?: Partial<ComponentTypes.DashboardSidebarToggleProps>;
-    dashboardToolbar?: Partial<ComponentTypes.DashboardToolbarProps>;
-    drawer?: Partial<ComponentTypes.DrawerProps>;
-    dropdownMenu?: Partial<ComponentTypes.DropdownMenuProps>;
-    editor?: Partial<ComponentTypes.EditorProps>;
-    editorDragHandle?: Partial<ComponentTypes.EditorDragHandleProps>;
-    editorToolbar?: Partial<ComponentTypes.EditorToolbarProps>;
-    empty?: Partial<ComponentTypes.EmptyProps>;
-    error?: Partial<ComponentTypes.ErrorProps>;
-    fieldGroup?: Partial<ComponentTypes.FieldGroupProps>;
-    fileUpload?: Partial<ComponentTypes.FileUploadProps>;
-    footer?: Partial<ComponentTypes.FooterProps>;
-    footerColumns?: Partial<ComponentTypes.FooterColumnsProps>;
-    form?: Partial<ComponentTypes.FormProps<any, any, any>>;
-    formField?: Partial<ComponentTypes.FormFieldProps>;
-    header?: Partial<ComponentTypes.HeaderProps>;
-    input?: Partial<ComponentTypes.InputProps>;
-    inputDate?: Partial<ComponentTypes.InputDateProps>;
-    inputMenu?: Partial<ComponentTypes.InputMenuProps>;
-    inputNumber?: Partial<ComponentTypes.InputNumberProps>;
-    inputTags?: Partial<ComponentTypes.InputTagsProps>;
-    inputTime?: Partial<ComponentTypes.InputTimeProps>;
-    kbd?: Partial<ComponentTypes.KbdProps>;
-    listbox?: Partial<ComponentTypes.ListboxProps>;
-    main?: Partial<ComponentTypes.MainProps>;
-    marquee?: Partial<ComponentTypes.MarqueeProps>;
-    modal?: Partial<ComponentTypes.ModalProps>;
-    navigationMenu?: Partial<ComponentTypes.NavigationMenuProps>;
-    page?: Partial<ComponentTypes.PageProps>;
-    pageAnchors?: Partial<ComponentTypes.PageAnchorsProps>;
-    pageAside?: Partial<ComponentTypes.PageAsideProps>;
-    pageBody?: Partial<ComponentTypes.PageBodyProps>;
-    pageCTA?: Partial<ComponentTypes.PageCTAProps>;
-    pageCard?: Partial<ComponentTypes.PageCardProps>;
-    pageColumns?: Partial<ComponentTypes.PageColumnsProps>;
-    pageFeature?: Partial<ComponentTypes.PageFeatureProps>;
-    pageGrid?: Partial<ComponentTypes.PageGridProps>;
-    pageHeader?: Partial<ComponentTypes.PageHeaderProps>;
-    pageHero?: Partial<ComponentTypes.PageHeroProps>;
-    pageLinks?: Partial<ComponentTypes.PageLinksProps>;
-    pageList?: Partial<ComponentTypes.PageListProps>;
-    pageLogos?: Partial<ComponentTypes.PageLogosProps>;
-    pageSection?: Partial<ComponentTypes.PageSectionProps>;
-    pagination?: Partial<ComponentTypes.PaginationProps>;
-    pinInput?: Partial<ComponentTypes.PinInputProps>;
-    popover?: Partial<ComponentTypes.PopoverProps>;
-    pricingPlan?: Partial<ComponentTypes.PricingPlanProps>;
-    pricingPlans?: Partial<ComponentTypes.PricingPlansProps>;
-    pricingTable?: Partial<ComponentTypes.PricingTableProps>;
-    progress?: Partial<ComponentTypes.ProgressProps>;
-    radioGroup?: Partial<ComponentTypes.RadioGroupProps>;
-    scrollArea?: Partial<ComponentTypes.ScrollAreaProps>;
-    select?: Partial<ComponentTypes.SelectProps>;
-    selectMenu?: Partial<ComponentTypes.SelectMenuProps>;
-    separator?: Partial<ComponentTypes.SeparatorProps>;
-    sidebar?: Partial<ComponentTypes.SidebarProps>;
-    skeleton?: Partial<ComponentTypes.SkeletonProps>;
-    slideover?: Partial<ComponentTypes.SlideoverProps>;
-    slider?: Partial<ComponentTypes.SliderProps>;
-    stepper?: Partial<ComponentTypes.StepperProps>;
-    switch?: Partial<ComponentTypes.SwitchProps>;
-    table?: Partial<ComponentTypes.TableProps>;
-    tabs?: Partial<ComponentTypes.TabsProps>;
-    textarea?: Partial<ComponentTypes.TextareaProps>;
-    timeline?: Partial<ComponentTypes.TimelineProps>;
-    toast?: Partial<ComponentTypes.ToastProps>;
-    toaster?: Partial<ComponentTypes.ToasterProps>;
-    tooltip?: Partial<ComponentTypes.TooltipProps>;
-    tree?: Partial<ComponentTypes.TreeProps>;
-    user?: Partial<ComponentTypes.UserProps>;
-}
-/**
- * Loose internal shape stored on the injected `ThemeContext`. Allows the
- * `prose` namespace (lifted by `normalizeUi`) and any unknown keys to flow
- * through without polluting the user-facing `ThemeDefaults` type.
- */
-export type ThemeContextDefaults = ThemeDefaults & {
-    [name: string]: Record<string, any> | undefined;
-};
 export type ThemeContext = {
-    defaults: ComputedRef<ThemeContextDefaults>;
+    defaults: ComputedRef<Record<string, Record<string, any> | undefined>>;
 };
 declare const provideThemeContext: (contextValue: ThemeContext) => ThemeContext;
 /**
@@ -166,8 +12,8 @@ export declare function injectThemeContext(fallback?: ThemeContext): ThemeContex
 export { provideThemeContext };
 /**
  * Resolve a component's props with the priority chain:
- *   explicit prop > nearest UTheme > withDefaults
- *     > app.config.ui.<name>.defaultVariants
+ *   explicit prop > nearest UTheme > app.config.ui.<name>.defaultVariants
+ *     > withDefaults
  *
  * The returned proxy transparently reads from `props`, falling through to the
  * injected `ThemeContext` and `app.config.ui.<name>.defaultVariants` for

package/dist/runtime/composables/useComponentProps.js

@@ -40,12 +40,14 @@ export function useComponentProps(name, props) {
       if (vm && propIsDefined(vm.vnode, prop)) return raw;
       const themeValue = themeEntry?.[prop];
       if (themeValue !== void 0) return themeValue;
+      const appConfigEntry = name.includes(".") ? get(appConfig.ui ?? {}, name) : appConfig.ui?.[name];
+      const appConfigValue = appConfigEntry?.defaultVariants?.[prop];
+      if (appConfigValue !== void 0) return appConfigValue;
       const propDef = vm?.type?.props?.[prop];
       if (propDef && Object.prototype.hasOwnProperty.call(propDef, "default")) {
         return raw;
       }
-      const appConfigEntry = name.includes(".") ? get(appConfig.ui ?? {}, name) : appConfig.ui?.[name];
-      return appConfigEntry?.defaultVariants?.[prop];
+      return void 0;
     },
     // `has`, `ownKeys`, and `getOwnPropertyDescriptor` reflect the underlying
     // `defineProps` schema only — theme defaults are NOT enumerable. As a

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

@@ -1,6 +1,7 @@
 import type { Ref, ComputedRef, MaybeRef } from 'vue';
 import type { Editor } from '@tiptap/vue-3';
 import type { SuggestionOptions } from '@tiptap/suggestion';
+import type { Plugin } from '@tiptap/pm/state';
 import type { FloatingUIOptions } from '../types/editor';
 export interface EditorMenuOptions<T = any> {
     editor: Editor;
@@ -73,7 +74,7 @@ export interface EditorMenuOptions<T = any> {
     ui: ComputedRef<any>;
 }
 export declare function useEditorMenu<T = any>(options: EditorMenuOptions<T>): {
-    plugin: import("@tiptap/pm/state").Plugin<any>;
+    plugin: Plugin<any>;
     destroy: () => void;
     filteredItems: Ref<T[], T[]>;
     searchTerm: Ref<string, string>;

package/dist/runtime/composables/useEditorMenu.js

@@ -370,18 +370,24 @@ export function useEditorMenu(options) {
       };
       const handlers = {
         onStart: (suggestionProps) => {
-          filteredItems.value = options.ignoreFilter ? items.value.slice(0, limit) : suggestionProps.items;
           selectedIndex.value = 0;
           commandFn = (item) => suggestionProps.command(item);
           triggerClientRect = suggestionProps.clientRect;
+          if (suggestionProps.loading) {
+            return;
+          }
+          filteredItems.value = options.ignoreFilter ? items.value.slice(0, limit) : suggestionProps.items;
           if (!filteredItems.value.length) {
             return;
           }
           showMenu();
         },
         onUpdate: (suggestionProps) => {
-          filteredItems.value = options.ignoreFilter ? items.value.slice(0, limit) : suggestionProps.items;
           commandFn = (item) => suggestionProps.command(item);
+          if (suggestionProps.loading) {
+            return;
+          }
+          filteredItems.value = options.ignoreFilter ? items.value.slice(0, limit) : suggestionProps.items;
           if (selectedIndex.value >= selectableItems.value.length) {
             selectedIndex.value = Math.max(0, selectableItems.value.length - 1);
           }

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

@@ -18,7 +18,7 @@ type Props<T> = {
  */
 export declare function useFieldGroup<T>(props: Props<T>): {
     orientation: ComputedRef<"horizontal" | "vertical" | undefined>;
-    size: ComputedRef<"md" | "xs" | "sm" | "lg" | "xl" | NonNullable<GetObjectField<T, "size">> | undefined>;
+    size: ComputedRef<"xs" | "sm" | "md" | "lg" | "xl" | NonNullable<GetObjectField<T, "size">> | undefined>;
 };
 export declare const FieldGroupReset: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;

package/dist/runtime/composables/useFileUpload.js

@@ -2,9 +2,9 @@ import { ref, computed, unref, onMounted, watch, reactive } from "vue";
 import { useFileDialog, useDropZone } from "@vueuse/core";
 function parseAcceptToDataTypes(accept) {
   if (!accept || accept === "*") {
-    return void 0;
+    return [];
   }
-  const types = accept.split(",").map((type) => {
+  return accept.split(",").map((type) => {
     const trimmedType = type.trim();
     if (trimmedType.includes("/") && trimmedType.endsWith("/*")) {
       return trimmedType.split("/")[0] || trimmedType;
@@ -13,7 +13,6 @@ function parseAcceptToDataTypes(accept) {
   }).filter((type) => {
     return !type.startsWith(".");
   });
-  return types.length > 0 ? types : void 0;
 }
 export function useFileUpload(options) {
   const {
@@ -56,7 +55,7 @@ export function useFileUpload(options) {
     fileDialog.open();
   }
   onMounted(() => {
-    const { isOverDropZone } = dropzone ? useDropZone(dropzoneRef, { dataTypes: dataTypes.value, onDrop: (files) => onDrop(files, true) }) : { isOverDropZone: ref(false) };
+    const { isOverDropZone } = dropzone ? useDropZone(dropzoneRef, { dataTypes, onDrop: (files) => onDrop(files, true) }) : { isOverDropZone: ref(false) };
     watch(isOverDropZone, (value) => {
       isDragging.value = value;
     });

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

@@ -1,6 +1,6 @@
 import type { InjectionKey, Ref, ComputedRef } from 'vue';
 import type { UseEventBusReturn } from '@vueuse/core';
-import type { FormFieldProps } from '../types';
+import type { FormFieldProps } from '../components/FormField.vue';
 import type { FormErrorWithId, FormEvent, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form';
 import type { GetObjectField } from '../types/utils';
 type Props<T> = {
@@ -48,7 +48,7 @@ export declare function useFormField<T>(props?: Props<T>, opts?: {
 }): {
     id: ComputedRef<string | undefined>;
     name: ComputedRef<string | undefined>;
-    size: ComputedRef<"md" | "xs" | "sm" | "lg" | "xl" | NonNullable<GetObjectField<T, "size">> | undefined>;
+    size: ComputedRef<"xs" | "sm" | "md" | "lg" | "xl" | NonNullable<GetObjectField<T, "size">> | undefined>;
     color: ComputedRef<"error" | GetObjectField<T, "color"> | undefined>;
     highlight: ComputedRef<boolean | undefined>;
     disabled: ComputedRef<boolean | undefined>;

package/dist/runtime/composables/useResizable.js

@@ -23,8 +23,15 @@ export function useResizable(key, options = {}, { collapsed = ref(false) } = {})
     collapsed: unref(collapsed) ?? false
   };
   const storageData = opts.value.persistent && (opts.value.resizable || opts.value.collapsible) ? opts.value.storage === "cookie" ? useCookie(key, { ...opts.value.storageOptions, default: () => defaultStorageValue }) : useStorage(key, defaultStorageValue, void 0, opts.value.storageOptions) : ref(defaultStorageValue);
+  const writeStorage = (patch) => {
+    if (storageData.value) {
+      Object.assign(storageData.value, patch);
+    } else {
+      storageData.value = { ...defaultStorageValue, ...patch };
+    }
+  };
   const isCollapsed = computed({
-    get: () => storageData.value.collapsed,
+    get: () => storageData.value?.collapsed ?? defaultStorageValue.collapsed,
     set: (value) => {
       if (!opts.value.collapsible) {
         return;
@@ -32,19 +39,20 @@ export function useResizable(key, options = {}, { collapsed = ref(false) } = {})
       if (isRef(collapsed)) {
         collapsed.value = value;
       }
-      storageData.value.collapsed = value;
+      writeStorage({ collapsed: value });
     }
   });
   const previousSize = ref(opts.value.defaultSize);
   const size = computed({
-    get: () => storageData.value.size,
+    get: () => storageData.value?.size ?? opts.value.defaultSize,
     set: (value) => {
-      storageData.value.size = value;
+      writeStorage({ size: value });
     }
   });
   const currentSize = computed(() => isCollapsed.value ? opts.value.collapsedSize : size.value);
   const isDragging = ref(false);
-  const onMouseMove = (e, initialPos, initialSize) => {
+  const getRootFontSize = () => opts.value.unit === "rem" ? Number.parseFloat(getComputedStyle(document.documentElement).fontSize) : 1;
+  const resize = (clientX, initialPos, initialSize, rootFontSize) => {
     if (!el.value || !opts.value.resizable) {
       return;
     }
@@ -52,14 +60,13 @@ export function useResizable(key, options = {}, { collapsed = ref(false) } = {})
     const isRtl = dir.value === "rtl";
     let delta;
     if (isRtl) {
-      delta = opts.value.side === "left" ? initialPos - e.clientX : e.clientX - initialPos;
+      delta = opts.value.side === "left" ? initialPos - clientX : clientX - initialPos;
     } else {
-      delta = opts.value.side === "left" ? e.clientX - initialPos : initialPos - e.clientX;
+      delta = opts.value.side === "left" ? clientX - initialPos : initialPos - clientX;
     }
     const newSize = initialSize + delta;
     let newValue;
     if (opts.value.unit === "rem") {
-      const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
       newValue = newSize / rootFontSize;
     } else if (opts.value.unit === "px") {
       newValue = newSize;
@@ -86,9 +93,10 @@ export function useResizable(key, options = {}, { collapsed = ref(false) } = {})
     }
     const initialX = e.clientX;
     const initialWidth = elWidth;
+    const rootFontSize = getRootFontSize();
     isDragging.value = true;
     const handleMouseMove = (e2) => {
-      onMouseMove(e2, initialX, initialWidth);
+      resize(e2.clientX, initialX, initialWidth, rootFontSize);
     };
     const handleMouseUp = () => {
       isDragging.value = false;
@@ -98,36 +106,6 @@ export function useResizable(key, options = {}, { collapsed = ref(false) } = {})
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   };
-  const onTouchMove = (e, initialPos, initialSize) => {
-    if (!el.value || !opts.value.resizable || !e.touches[0]) {
-      return;
-    }
-    const parentSize = el.value.parentElement?.offsetWidth || 1;
-    const isRtl = dir.value === "rtl";
-    let delta;
-    if (isRtl) {
-      delta = opts.value.side === "left" ? initialPos - e.touches[0].clientX : e.touches[0].clientX - initialPos;
-    } else {
-      delta = opts.value.side === "left" ? e.touches[0].clientX - initialPos : initialPos - e.touches[0].clientX;
-    }
-    const newSize = initialSize + delta;
-    let newValue;
-    if (opts.value.unit === "rem") {
-      const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
-      newValue = newSize / rootFontSize;
-    } else if (opts.value.unit === "px") {
-      newValue = newSize;
-    } else {
-      newValue = newSize / parentSize * 100;
-    }
-    if (opts.value.collapsible && newValue < opts.value.collapsedSize + 4) {
-      collapse(true);
-      return;
-    } else if (isCollapsed.value) {
-      collapse(false);
-    }
-    size.value = Math.min(opts.value.maxSize, Math.max(opts.value.minSize, newValue));
-  };
   const onTouchStart = (e) => {
     if (!el.value || !opts.value.resizable || !e.touches[0]) {
       return;
@@ -140,9 +118,12 @@ export function useResizable(key, options = {}, { collapsed = ref(false) } = {})
     }
     const initialX = e.touches[0].clientX;
     const initialWidth = elWidth;
+    const rootFontSize = getRootFontSize();
     isDragging.value = true;
     const handleTouchMove = (e2) => {
-      onTouchMove(e2, initialX, initialWidth);
+      if (e2.touches[0]) {
+        resize(e2.touches[0].clientX, initialX, initialWidth, rootFontSize);
+      }
     };
     const handleTouchEnd = () => {
       isDragging.value = false;
@@ -177,7 +158,7 @@ export function useResizable(key, options = {}, { collapsed = ref(false) } = {})
     }
     isCollapsed.value = newCollapsed;
   };
-  if (isRef(collapsed) && storageData.value.collapsed) {
+  if (isRef(collapsed) && storageData.value?.collapsed) {
     collapsed.value = storageData.value.collapsed;
   }
   if (isRef(collapsed)) {
@@ -185,8 +166,8 @@ export function useResizable(key, options = {}, { collapsed = ref(false) } = {})
       if (!opts.value.collapsible) {
         return;
       }
-      if (storageData.value.collapsed !== value) {
-        storageData.value.collapsed = value;
+      if (storageData.value?.collapsed !== value) {
+        isCollapsed.value = value;
       }
     });
   }

package/dist/runtime/composables/useScrollspy.js

@@ -4,25 +4,33 @@ export function useScrollspy() {
   const visibleHeadings = ref([]);
   const activeHeadings = ref([]);
   function observerCallback(entries) {
-    entries.forEach((entry) => {
+    const headings = new Set(visibleHeadings.value);
+    let changed = false;
+    for (const entry of entries) {
       const id = entry.target.id;
       if (!id) {
-        return;
+        continue;
       }
       if (entry.isIntersecting) {
-        visibleHeadings.value = [...visibleHeadings.value, id];
-      } else {
-        visibleHeadings.value = visibleHeadings.value.filter((h) => h !== id);
+        if (!headings.has(id)) {
+          headings.add(id);
+          changed = true;
+        }
+      } else if (headings.delete(id)) {
+        changed = true;
       }
-    });
+    }
+    if (changed) {
+      visibleHeadings.value = [...headings];
+    }
   }
   function updateHeadings(headings) {
-    headings.forEach((heading) => {
-      if (!observer.value) {
-        return;
-      }
-      observer.value.observe(heading);
-    });
+    if (!observer.value) {
+      return;
+    }
+    observer.value.disconnect();
+    visibleHeadings.value = [];
+    headings.forEach((heading) => observer.value.observe(heading));
   }
   watch(visibleHeadings, (val, oldVal) => {
     if (val.length === 0) {

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

@@ -1,5 +1,5 @@
 import type { Ref, InjectionKey } from 'vue';
-import type { ToastProps, ToastEmits } from '../types';
+import type { ToastProps, ToastEmits } from '../components/Toast.vue';
 import type { EmitsToProps } from '../types/utils';
 export declare const toastMaxInjectionKey: InjectionKey<Ref<number | undefined>>;
 export interface Toast extends Omit<ToastProps, 'defaultOpen'>, EmitsToProps<ToastEmits> {

package/dist/runtime/composables/useToast.js

@@ -7,15 +7,34 @@ export function useToast() {
   const running = ref(false);
   const queue = [];
   const generateId = () => `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+  function mergeDuplicate(index, toast) {
+    toasts.value[index] = {
+      ...toasts.value[index],
+      ...toast,
+      _duplicate: (toasts.value[index]._duplicate || 0) + 1
+    };
+  }
   async function processQueue() {
     if (running.value || queue.length === 0) {
       return;
     }
     running.value = true;
     while (queue.length > 0) {
-      const toast = queue.shift();
       await nextTick();
-      toasts.value = [...toasts.value, toast].slice(-(max?.value ?? 5));
+      const toast = queue.shift();
+      const maxValue = max?.value ?? 5;
+      if (maxValue <= 0) {
+        if (toasts.value.length) {
+          toasts.value = [];
+        }
+        continue;
+      }
+      const existingIndex = toasts.value.findIndex((t) => t.id === toast.id);
+      if (existingIndex !== -1) {
+        mergeDuplicate(existingIndex, toast);
+        continue;
+      }
+      toasts.value = [...toasts.value, toast].slice(-maxValue);
     }
     running.value = false;
   }
@@ -27,11 +46,7 @@ export function useToast() {
     };
     const existingIndex = toasts.value.findIndex((t) => t.id === body.id);
     if (existingIndex !== -1) {
-      toasts.value[existingIndex] = {
-        ...toasts.value[existingIndex],
-        ...body,
-        _duplicate: (toasts.value[existingIndex]._duplicate || 0) + 1
-      };
+      mergeDuplicate(existingIndex, body);
       return body;
     }
     queue.push(body);