@ark-ui/vue
Version:
A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.
107 lines (106 loc) • 3.44 kB
JavaScript
const require_list_collection = require("./list-collection.cjs");
let vue = require("vue");
//#region src/components/collection/use-list-collection.ts
function useListCollection(props) {
const resolvedProps = (0, vue.computed)(() => {
const { initialItems = [], filter, limit, ...collectionOptions } = (0, vue.toValue)(props);
return [{
initialItems,
filter,
limit
}, collectionOptions];
});
const init = () => {
const { initialItems } = resolvedProps.value[0];
return initialItems;
};
const items = (0, vue.ref)(init());
const filterText = (0, vue.ref)("");
const setItems = (newItems) => {
items.value = newItems;
filterText.value = "";
};
const create = (itemsToCreate) => {
const [, collectionOptions] = resolvedProps.value;
return require_list_collection.createListCollection({
...collectionOptions,
items: itemsToCreate
});
};
return {
collection: (0, 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 require_list_collection.createListCollection({
...collectionOptions,
items: limitedItems
});
}),
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);
}
};
}
//#endregion
exports.useListCollection = useListCollection;