@ark-ui/vue 5.16.0 → 5.16.1

package/dist/components/collection/use-list-collection.cjs

@@ -10,72 +10,94 @@ function useListCollection(props) {
     const { initialItems = [], filter, limit, ...collectionOptions } = vue.toValue(props);
     return [{ initialItems, filter, limit }, collectionOptions];
   });
-  const create = (items) => {
-    const [, collectionOptions] = resolvedProps.value;
-    return listCollection.createListCollection({ ...collectionOptions, items });
-  };
   const init = () => {
-    const [localProps] = resolvedProps.value;
-    return create(
-      localProps.limit != null ? localProps.initialItems.slice(0, localProps.limit) : localProps.initialItems
-    );
+    const { initialItems } = resolvedProps.value[0];
+    return initialItems;
   };
-  const collection = vue.ref(init());
-  const setCollection = (newCollection) => {
-    const [localProps] = resolvedProps.value;
-    collection.value = localProps.limit == null ? newCollection : newCollection.copy(newCollection.items.slice(0, localProps.limit));
+  const items = vue.ref(init());
+  const filterText = vue.ref("");
+  const setItems = (newItems) => {
+    items.value = newItems;
+    filterText.value = "";
+  };
+  const create = (itemsToCreate) => {
+    const [, collectionOptions] = resolvedProps.value;
+    return listCollection.createListCollection({ ...collectionOptions, items: itemsToCreate });
   };
+  const collection = vue.computed(() => {
+    const [localProps, collectionOptions] = resolvedProps.value;
+    let activeItems = items.value;
+    const filter = localProps.filter;
+    if (filterText.value && filter) {
+      activeItems = create(items.value).filter(
+        (itemString, _index, item) => filter(itemString, filterText.value, item)
+      ).items;
+    }
+    const limitedItems = localProps.limit == null ? activeItems : activeItems.slice(0, localProps.limit);
+    return listCollection.createListCollection({ ...collectionOptions, items: limitedItems });
+  });
   return {
     collection,
-    filter: (inputValue) => {
-      const [localProps] = resolvedProps.value;
-      const filter = localProps.filter;
-      if (!filter) return;
-      const filtered = create(localProps.initialItems).filter((itemString) => filter(itemString, inputValue));
-      setCollection(filtered);
+    filter: (inputValue = "") => {
+      filterText.value = inputValue;
     },
-    set: (items) => {
-      setCollection(create(items));
+    set: (newItems) => {
+      setItems(newItems);
     },
     reset: () => {
       const [localProps] = resolvedProps.value;
-      setCollection(create(localProps.initialItems));
+      setItems(localProps.initialItems);
     },
     clear: () => {
-      setCollection(create([]));
+      setItems([]);
     },
-    insert: (index, ...items) => {
-      setCollection(collection.value.insert(index, ...items));
+    insert: (index, ...itemsToInsert) => {
+      const newItems = create(items.value).insert(index, ...itemsToInsert).items;
+      setItems(newItems);
     },
-    insertBefore: (value, ...items) => {
-      setCollection(collection.value.insertBefore(value, ...items));
+    insertBefore: (value, ...itemsToInsert) => {
+      const newItems = create(items.value).insertBefore(value, ...itemsToInsert).items;
+      setItems(newItems);
     },
-    insertAfter: (value, ...items) => {
-      setCollection(collection.value.insertAfter(value, ...items));
+    insertAfter: (value, ...itemsToInsert) => {
+      const newItems = create(items.value).insertAfter(value, ...itemsToInsert).items;
+      setItems(newItems);
     },
     remove: (...itemOrValues) => {
-      setCollection(collection.value.remove(...itemOrValues));
+      const newItems = create(items.value).remove(...itemOrValues).items;
+      setItems(newItems);
     },
     move: (value, to) => {
-      setCollection(collection.value.move(value, to));
+      const newItems = create(items.value).move(value, to).items;
+      setItems(newItems);
     },
     moveBefore: (value, ...values) => {
-      setCollection(collection.value.moveBefore(value, ...values));
+      const newItems = create(items.value).moveBefore(value, ...values).items;
+      setItems(newItems);
     },
     moveAfter: (value, ...values) => {
-      setCollection(collection.value.moveAfter(value, ...values));
+      const newItems = create(items.value).moveAfter(value, ...values).items;
+      setItems(newItems);
     },
     reorder: (from, to) => {
-      setCollection(collection.value.reorder(from, to));
+      const newItems = create(items.value).reorder(from, to).items;
+      setItems(newItems);
+    },
+    append: (...itemsToAppend) => {
+      const newItems = create(items.value).append(...itemsToAppend).items;
+      setItems(newItems);
     },
-    append: (...items) => {
-      setCollection(collection.value.append(...items));
+    upsert: (value, item, mode = "append") => {
+      const newItems = create(items.value).upsert(value, item, mode).items;
+      setItems(newItems);
     },
-    prepend: (...items) => {
-      setCollection(collection.value.prepend(...items));
+    prepend: (...itemsToPrepend) => {
+      const newItems = create(items.value).prepend(...itemsToPrepend).items;
+      setItems(newItems);
     },
     update: (value, item) => {
-      setCollection(collection.value.update(value, item));
+      const newItems = create(items.value).update(value, item).items;
+      setItems(newItems);
     }
   };
 }

package/dist/components/collection/use-list-collection.d.cts

@@ -8,28 +8,81 @@ export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'i
     /**
      * The filter function to use to filter the items.
      */
-    filter?: (itemText: string, filterText: string) => boolean;
+    filter?: (itemText: string, filterText: string, item: T) => boolean;
     /**
      * The maximum number of items to display in the collection.
      * Useful for performance when you have a large number of items.
      */
     limit?: number;
 }
-export declare function useListCollection<T>(props: MaybeRef<UseListCollectionProps<T>>): {
-    collection: Ref<ListCollection<T>, ListCollection<T>>;
+export declare function useListCollection<T>(props: MaybeRef<UseListCollectionProps<T>>): UseListCollectionReturn<T>;
+export interface UseListCollectionReturn<T> {
+    /**
+     * The collection of items.
+     */
+    collection: Ref<ListCollection<T>>;
+    /**
+     * The function to filter the items.
+     */
     filter: (inputValue: string) => void;
+    /**
+     * The function to set the items.
+     */
     set: (items: T[]) => void;
+    /**
+     * The function to reset the items.
+     */
     reset: () => void;
+    /**
+     * The function to clear the items.
+     */
     clear: () => void;
+    /**
+     * The function to insert items at a specific index.
+     */
     insert: (index: number, ...items: T[]) => void;
+    /**
+     * The function to insert items before a specific value.
+     */
     insertBefore: (value: string, ...items: T[]) => void;
+    /**
+     * The function to insert items after a specific value.
+     */
     insertAfter: (value: string, ...items: T[]) => void;
-    remove: (...itemOrValues: T[]) => void;
+    /**
+     * The function to remove items.
+     */
+    remove: (...itemOrValues: Array<T | string>) => void;
+    /**
+     * The function to move an item to a specific index.
+     */
     move: (value: string, to: number) => void;
+    /**
+     * The function to move an item before a specific value.
+     */
     moveBefore: (value: string, ...values: string[]) => void;
+    /**
+     * The function to move an item after a specific value.
+     */
     moveAfter: (value: string, ...values: string[]) => void;
+    /**
+     * The function to reorder items.
+     */
     reorder: (from: number, to: number) => void;
+    /**
+     * The function to append items.
+     */
     append: (...items: T[]) => void;
+    /**
+     * The function to upsert an item.
+     */
+    upsert: (value: string, item: T, mode?: 'append' | 'prepend') => void;
+    /**
+     * The function to prepend items.
+     */
     prepend: (...items: T[]) => void;
+    /**
+     * The function to update an item.
+     */
     update: (value: string, item: T) => void;
-};
+}

package/dist/components/collection/use-list-collection.d.ts

@@ -8,28 +8,81 @@ export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'i
     /**
      * The filter function to use to filter the items.
      */
-    filter?: (itemText: string, filterText: string) => boolean;
+    filter?: (itemText: string, filterText: string, item: T) => boolean;
     /**
      * The maximum number of items to display in the collection.
      * Useful for performance when you have a large number of items.
      */
     limit?: number;
 }
-export declare function useListCollection<T>(props: MaybeRef<UseListCollectionProps<T>>): {
-    collection: Ref<ListCollection<T>, ListCollection<T>>;
+export declare function useListCollection<T>(props: MaybeRef<UseListCollectionProps<T>>): UseListCollectionReturn<T>;
+export interface UseListCollectionReturn<T> {
+    /**
+     * The collection of items.
+     */
+    collection: Ref<ListCollection<T>>;
+    /**
+     * The function to filter the items.
+     */
     filter: (inputValue: string) => void;
+    /**
+     * The function to set the items.
+     */
     set: (items: T[]) => void;
+    /**
+     * The function to reset the items.
+     */
     reset: () => void;
+    /**
+     * The function to clear the items.
+     */
     clear: () => void;
+    /**
+     * The function to insert items at a specific index.
+     */
     insert: (index: number, ...items: T[]) => void;
+    /**
+     * The function to insert items before a specific value.
+     */
     insertBefore: (value: string, ...items: T[]) => void;
+    /**
+     * The function to insert items after a specific value.
+     */
     insertAfter: (value: string, ...items: T[]) => void;
-    remove: (...itemOrValues: T[]) => void;
+    /**
+     * The function to remove items.
+     */
+    remove: (...itemOrValues: Array<T | string>) => void;
+    /**
+     * The function to move an item to a specific index.
+     */
     move: (value: string, to: number) => void;
+    /**
+     * The function to move an item before a specific value.
+     */
     moveBefore: (value: string, ...values: string[]) => void;
+    /**
+     * The function to move an item after a specific value.
+     */
     moveAfter: (value: string, ...values: string[]) => void;
+    /**
+     * The function to reorder items.
+     */
     reorder: (from: number, to: number) => void;
+    /**
+     * The function to append items.
+     */
     append: (...items: T[]) => void;
+    /**
+     * The function to upsert an item.
+     */
+    upsert: (value: string, item: T, mode?: 'append' | 'prepend') => void;
+    /**
+     * The function to prepend items.
+     */
     prepend: (...items: T[]) => void;
+    /**
+     * The function to update an item.
+     */
     update: (value: string, item: T) => void;
-};
+}

package/dist/components/collection/use-list-collection.js

@@ -6,72 +6,94 @@ function useListCollection(props) {
     const { initialItems = [], filter, limit, ...collectionOptions } = toValue(props);
     return [{ initialItems, filter, limit }, collectionOptions];
   });
-  const create = (items) => {
-    const [, collectionOptions] = resolvedProps.value;
-    return createListCollection({ ...collectionOptions, items });
-  };
   const init = () => {
-    const [localProps] = resolvedProps.value;
-    return create(
-      localProps.limit != null ? localProps.initialItems.slice(0, localProps.limit) : localProps.initialItems
-    );
+    const { initialItems } = resolvedProps.value[0];
+    return initialItems;
   };
-  const collection = ref(init());
-  const setCollection = (newCollection) => {
-    const [localProps] = resolvedProps.value;
-    collection.value = localProps.limit == null ? newCollection : newCollection.copy(newCollection.items.slice(0, localProps.limit));
+  const items = ref(init());
+  const filterText = ref("");
+  const setItems = (newItems) => {
+    items.value = newItems;
+    filterText.value = "";
+  };
+  const create = (itemsToCreate) => {
+    const [, collectionOptions] = resolvedProps.value;
+    return createListCollection({ ...collectionOptions, items: itemsToCreate });
   };
+  const collection = computed(() => {
+    const [localProps, collectionOptions] = resolvedProps.value;
+    let activeItems = items.value;
+    const filter = localProps.filter;
+    if (filterText.value && filter) {
+      activeItems = create(items.value).filter(
+        (itemString, _index, item) => filter(itemString, filterText.value, item)
+      ).items;
+    }
+    const limitedItems = localProps.limit == null ? activeItems : activeItems.slice(0, localProps.limit);
+    return createListCollection({ ...collectionOptions, items: limitedItems });
+  });
   return {
     collection,
-    filter: (inputValue) => {
-      const [localProps] = resolvedProps.value;
-      const filter = localProps.filter;
-      if (!filter) return;
-      const filtered = create(localProps.initialItems).filter((itemString) => filter(itemString, inputValue));
-      setCollection(filtered);
+    filter: (inputValue = "") => {
+      filterText.value = inputValue;
     },
-    set: (items) => {
-      setCollection(create(items));
+    set: (newItems) => {
+      setItems(newItems);
     },
     reset: () => {
       const [localProps] = resolvedProps.value;
-      setCollection(create(localProps.initialItems));
+      setItems(localProps.initialItems);
     },
     clear: () => {
-      setCollection(create([]));
+      setItems([]);
     },
-    insert: (index, ...items) => {
-      setCollection(collection.value.insert(index, ...items));
+    insert: (index, ...itemsToInsert) => {
+      const newItems = create(items.value).insert(index, ...itemsToInsert).items;
+      setItems(newItems);
     },
-    insertBefore: (value, ...items) => {
-      setCollection(collection.value.insertBefore(value, ...items));
+    insertBefore: (value, ...itemsToInsert) => {
+      const newItems = create(items.value).insertBefore(value, ...itemsToInsert).items;
+      setItems(newItems);
     },
-    insertAfter: (value, ...items) => {
-      setCollection(collection.value.insertAfter(value, ...items));
+    insertAfter: (value, ...itemsToInsert) => {
+      const newItems = create(items.value).insertAfter(value, ...itemsToInsert).items;
+      setItems(newItems);
     },
     remove: (...itemOrValues) => {
-      setCollection(collection.value.remove(...itemOrValues));
+      const newItems = create(items.value).remove(...itemOrValues).items;
+      setItems(newItems);
     },
     move: (value, to) => {
-      setCollection(collection.value.move(value, to));
+      const newItems = create(items.value).move(value, to).items;
+      setItems(newItems);
     },
     moveBefore: (value, ...values) => {
-      setCollection(collection.value.moveBefore(value, ...values));
+      const newItems = create(items.value).moveBefore(value, ...values).items;
+      setItems(newItems);
     },
     moveAfter: (value, ...values) => {
-      setCollection(collection.value.moveAfter(value, ...values));
+      const newItems = create(items.value).moveAfter(value, ...values).items;
+      setItems(newItems);
     },
     reorder: (from, to) => {
-      setCollection(collection.value.reorder(from, to));
+      const newItems = create(items.value).reorder(from, to).items;
+      setItems(newItems);
+    },
+    append: (...itemsToAppend) => {
+      const newItems = create(items.value).append(...itemsToAppend).items;
+      setItems(newItems);
     },
-    append: (...items) => {
-      setCollection(collection.value.append(...items));
+    upsert: (value, item, mode = "append") => {
+      const newItems = create(items.value).upsert(value, item, mode).items;
+      setItems(newItems);
     },
-    prepend: (...items) => {
-      setCollection(collection.value.prepend(...items));
+    prepend: (...itemsToPrepend) => {
+      const newItems = create(items.value).prepend(...itemsToPrepend).items;
+      setItems(newItems);
     },
     update: (value, item) => {
-      setCollection(collection.value.update(value, item));
+      const newItems = create(items.value).update(value, item).items;
+      setItems(newItems);
     }
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/vue",
   "type": "module",
-  "version": "5.16.0",
+  "version": "5.16.1",
   "description": "A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -140,63 +140,63 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.8.2",
-    "@zag-js/accordion": "1.18.0",
-    "@zag-js/angle-slider": "1.18.0",
-    "@zag-js/anatomy": "1.18.0",
-    "@zag-js/auto-resize": "1.18.0",
-    "@zag-js/avatar": "1.18.0",
-    "@zag-js/carousel": "1.18.0",
-    "@zag-js/checkbox": "1.18.0",
-    "@zag-js/clipboard": "1.18.0",
-    "@zag-js/collapsible": "1.18.0",
-    "@zag-js/collection": "1.18.0",
-    "@zag-js/color-picker": "1.18.0",
-    "@zag-js/color-utils": "1.18.0",
-    "@zag-js/combobox": "1.18.0",
-    "@zag-js/core": "1.18.0",
-    "@zag-js/date-picker": "1.18.0",
-    "@zag-js/date-utils": "1.18.0",
-    "@zag-js/dialog": "1.18.0",
-    "@zag-js/dom-query": "1.18.0",
-    "@zag-js/editable": "1.18.0",
-    "@zag-js/file-upload": "1.18.0",
-    "@zag-js/file-utils": "1.18.0",
-    "@zag-js/focus-trap": "1.18.0",
-    "@zag-js/floating-panel": "1.18.0",
-    "@zag-js/highlight-word": "1.18.0",
-    "@zag-js/hover-card": "1.18.0",
-    "@zag-js/i18n-utils": "1.18.0",
-    "@zag-js/listbox": "1.18.0",
-    "@zag-js/menu": "1.18.0",
-    "@zag-js/number-input": "1.18.0",
-    "@zag-js/pagination": "1.18.0",
-    "@zag-js/password-input": "1.18.0",
-    "@zag-js/pin-input": "1.18.0",
-    "@zag-js/popover": "1.18.0",
-    "@zag-js/presence": "1.18.0",
-    "@zag-js/progress": "1.18.0",
-    "@zag-js/qr-code": "1.18.0",
-    "@zag-js/radio-group": "1.18.0",
-    "@zag-js/rating-group": "1.18.0",
-    "@zag-js/select": "1.18.0",
-    "@zag-js/signature-pad": "1.18.0",
-    "@zag-js/slider": "1.18.0",
-    "@zag-js/splitter": "1.18.0",
-    "@zag-js/switch": "1.18.0",
-    "@zag-js/tabs": "1.18.0",
-    "@zag-js/tags-input": "1.18.0",
-    "@zag-js/time-picker": "1.18.0",
-    "@zag-js/timer": "1.18.0",
-    "@zag-js/toast": "1.18.0",
-    "@zag-js/toggle": "1.18.0",
-    "@zag-js/toggle-group": "1.18.0",
-    "@zag-js/tooltip": "1.18.0",
-    "@zag-js/tour": "1.18.0",
-    "@zag-js/tree-view": "1.18.0",
-    "@zag-js/types": "1.18.0",
-    "@zag-js/utils": "1.18.0",
-    "@zag-js/steps": "1.18.0",
-    "@zag-js/vue": "1.18.0"
+    "@zag-js/accordion": "1.18.2",
+    "@zag-js/angle-slider": "1.18.2",
+    "@zag-js/anatomy": "1.18.2",
+    "@zag-js/auto-resize": "1.18.2",
+    "@zag-js/avatar": "1.18.2",
+    "@zag-js/carousel": "1.18.2",
+    "@zag-js/checkbox": "1.18.2",
+    "@zag-js/clipboard": "1.18.2",
+    "@zag-js/collapsible": "1.18.2",
+    "@zag-js/collection": "1.18.2",
+    "@zag-js/color-picker": "1.18.2",
+    "@zag-js/color-utils": "1.18.2",
+    "@zag-js/combobox": "1.18.2",
+    "@zag-js/core": "1.18.2",
+    "@zag-js/date-picker": "1.18.2",
+    "@zag-js/date-utils": "1.18.2",
+    "@zag-js/dialog": "1.18.2",
+    "@zag-js/dom-query": "1.18.2",
+    "@zag-js/editable": "1.18.2",
+    "@zag-js/file-upload": "1.18.2",
+    "@zag-js/file-utils": "1.18.2",
+    "@zag-js/focus-trap": "1.18.2",
+    "@zag-js/floating-panel": "1.18.2",
+    "@zag-js/highlight-word": "1.18.2",
+    "@zag-js/hover-card": "1.18.2",
+    "@zag-js/i18n-utils": "1.18.2",
+    "@zag-js/listbox": "1.18.2",
+    "@zag-js/menu": "1.18.2",
+    "@zag-js/number-input": "1.18.2",
+    "@zag-js/pagination": "1.18.2",
+    "@zag-js/password-input": "1.18.2",
+    "@zag-js/pin-input": "1.18.2",
+    "@zag-js/popover": "1.18.2",
+    "@zag-js/presence": "1.18.2",
+    "@zag-js/progress": "1.18.2",
+    "@zag-js/qr-code": "1.18.2",
+    "@zag-js/radio-group": "1.18.2",
+    "@zag-js/rating-group": "1.18.2",
+    "@zag-js/select": "1.18.2",
+    "@zag-js/signature-pad": "1.18.2",
+    "@zag-js/slider": "1.18.2",
+    "@zag-js/splitter": "1.18.2",
+    "@zag-js/switch": "1.18.2",
+    "@zag-js/tabs": "1.18.2",
+    "@zag-js/tags-input": "1.18.2",
+    "@zag-js/time-picker": "1.18.2",
+    "@zag-js/timer": "1.18.2",
+    "@zag-js/toast": "1.18.2",
+    "@zag-js/toggle": "1.18.2",
+    "@zag-js/toggle-group": "1.18.2",
+    "@zag-js/tooltip": "1.18.2",
+    "@zag-js/tour": "1.18.2",
+    "@zag-js/tree-view": "1.18.2",
+    "@zag-js/types": "1.18.2",
+    "@zag-js/utils": "1.18.2",
+    "@zag-js/steps": "1.18.2",
+    "@zag-js/vue": "1.18.2"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
@@ -208,20 +208,20 @@
     "@types/jsdom": "21.1.7",
     "@vitejs/plugin-vue": "6.0.0",
     "@vitejs/plugin-vue-jsx": "5.0.1",
-    "@vue/compiler-sfc": "3.5.16",
+    "@vue/compiler-sfc": "3.5.17",
     "clean-package": "2.2.0",
     "globby": "14.1.0",
     "histoire": "0.17.17",
     "jsdom": "26.1.0",
-    "lucide-vue-next": "0.515.0",
+    "lucide-vue-next": "0.525.0",
     "resize-observer-polyfill": "1.5.1",
     "typescript": "5.8.3",
-    "vite": "6.3.5",
+    "vite": "7.0.2",
     "vite-plugin-dts": "4.5.4",
-    "vitest": "3.2.3",
-    "@vitest/coverage-v8": "3.2.3",
-    "vue": "3.5.16",
-    "vue-tsc": "2.2.10"
+    "vitest": "3.2.4",
+    "@vitest/coverage-v8": "3.2.4",
+    "vue": "3.5.17",
+    "vue-tsc": "3.0.1"
   },
   "peerDependencies": {
     "vue": ">=3.5.0"