@ark-ui/vue/dist/components/collection/use-list-collection.cjs

A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.

'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const vue = require('vue');
const listCollection = require('./list-collection.cjs');

function useListCollection(props) {
  const resolvedProps = vue.computed(() => {
    const { initialItems = [], filter, limit, ...collectionOptions } = vue.toValue(props);
    return [{ initialItems, filter, limit }, collectionOptions];
  });
  const init = () => {
    const { initialItems } = resolvedProps.value[0];
    return initialItems;
  };
  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 = "") => {
      filterText.value = inputValue;
    },
    set: (newItems) => {
      setItems(newItems);
    },
    reset: () => {
      const [localProps] = resolvedProps.value;
      setItems(localProps.initialItems);
    },
    clear: () => {
      setItems([]);
    },
    insert: (index, ...itemsToInsert) => {
      const newItems = create(items.value).insert(index, ...itemsToInsert).items;
      setItems(newItems);
    },
    insertBefore: (value, ...itemsToInsert) => {
      const newItems = create(items.value).insertBefore(value, ...itemsToInsert).items;
      setItems(newItems);
    },
    insertAfter: (value, ...itemsToInsert) => {
      const newItems = create(items.value).insertAfter(value, ...itemsToInsert).items;
      setItems(newItems);
    },
    remove: (...itemOrValues) => {
      const newItems = create(items.value).remove(...itemOrValues).items;
      setItems(newItems);
    },
    move: (value, to) => {
      const newItems = create(items.value).move(value, to).items;
      setItems(newItems);
    },
    moveBefore: (value, ...values) => {
      const newItems = create(items.value).moveBefore(value, ...values).items;
      setItems(newItems);
    },
    moveAfter: (value, ...values) => {
      const newItems = create(items.value).moveAfter(value, ...values).items;
      setItems(newItems);
    },
    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);
    },
    upsert: (value, item, mode = "append") => {
      const newItems = create(items.value).upsert(value, item, mode).items;
      setItems(newItems);
    },
    prepend: (...itemsToPrepend) => {
      const newItems = create(items.value).prepend(...itemsToPrepend).items;
      setItems(newItems);
    },
    update: (value, item) => {
      const newItems = create(items.value).update(value, item).items;
      setItems(newItems);
    }
  };
}

exports.useListCollection = useListCollection;