@vuetify/v0 0.1.2 → 0.1.4

package/dist/createGroup-CPhp6FUh.mjs

@@ -0,0 +1,363 @@
+import { h as isUndefined, v as useId$1 } from "./utilities-BqS1sC1W.mjs";
+import { i as useContext, n as createContext, t as createTrinity } from "./createTrinity-EeHQSsb6.mjs";
+import { t as createSelection } from "./createSelection-uqEbFgha.mjs";
+import { t as toArray } from "./toArray-DIeXVX1C.mjs";
+import { computed, onScopeDispose, reactive, shallowReactive, toRef, toValue } from "vue";
+
+//#region src/composables/useProxyRegistry/index.ts
+/**
+* @module useProxyRegistry
+*
+* @remarks
+* Proxy composable for reactive registry keys, values, entries, and size.
+*
+* Key features:
+* - Reactive proxy for registry data
+* - Deep or shallow reactivity options
+* - Event-based updates
+* - Automatic cleanup on scope disposal
+* - Transforms Map-based registry into reactive refs
+*
+* Perfect for exposing registry data as reactive computed properties.
+*/
+/**
+* Creates a proxy registry that provides reactive objects for registry data.
+*
+* @param registry The registry instance to proxy.
+* @param options The options for the proxy registry.
+* @template Z The type of the registry ticket.
+* @returns A proxy registry with reactive objects.
+*
+* @see https://0.vuetifyjs.com/composables/registration/use-proxy-registry
+*
+* @example
+* ```ts
+* import { createRegistry, useProxyRegistry } from '@vuetify/v0'
+*
+* const registry = createRegistry({ events: true })
+* const proxy = useProxyRegistry(registry)
+*
+* registry.register({ value: 'Item 1' })
+* console.log(proxy.size) // 1
+* ```
+*/
+function useProxyRegistry(registry, options) {
+	const state = (options?.deep ? reactive : shallowReactive)({
+		keys: registry.keys(),
+		values: registry.values(),
+		entries: registry.entries(),
+		size: registry.size
+	});
+	function update() {
+		state.keys = registry.keys();
+		state.values = registry.values();
+		state.entries = registry.entries();
+		state.size = registry.size;
+	}
+	registry.on("register:ticket", update);
+	registry.on("unregister:ticket", update);
+	registry.on("update:ticket", update);
+	registry.on("clear:registry", update);
+	onScopeDispose(() => {
+		registry.off("register:ticket", update);
+		registry.off("unregister:ticket", update);
+		registry.off("update:ticket", update);
+		registry.off("clear:registry", update);
+	}, true);
+	return state;
+}
+
+//#endregion
+//#region src/composables/createGroup/index.ts
+/**
+* @module useGroup
+*
+* @remarks
+* Multi-selection composable that extends useSelection with batch operations and tri-state support.
+*
+* Key features:
+* - Batch operations (select/unselect/toggle accept ID | ID[])
+* - Tri-state support via mixed/indeterminate state (mix/unmix)
+* - selectedIndexes computed Set for position-based tracking
+* - Perfect for checkbox trees, multi-select dropdowns, filter panels
+*
+* Tri-state behavior:
+* - Items can be selected, mixed (indeterminate), or unselected
+* - select() clears mixed state, mix() clears selected state (mutually exclusive)
+* - toggle() on a mixed item selects it (resolves positively)
+*
+* Inheritance chain: useRegistry → useSelection → useGroup
+* Extended by: useFeatures
+*/
+/**
+* Creates a new group instance with batch selection and tri-state support.
+*
+* Extends `createSelection` to support selecting, unselecting, and toggling multiple items
+* at once by passing an array of IDs. Adds tri-state (mixed/indeterminate) support for
+* checkbox trees and similar use cases.
+*
+* @param options The options for the group instance.
+* @template Z The type of the group ticket.
+* @template E The type of the group context.
+* @returns A new group instance with batch selection and tri-state support.
+*
+* @remarks
+* **Key Differences from `createSelection`:**
+* - `select()` accepts `ID | ID[]` for batch operations
+* - `unselect()` accepts `ID | ID[]` for batch operations
+* - `toggle()` accepts `ID | ID[]` for batch operations
+* - Adds `selectedIndexes` computed Set for getting selected item indexes
+* - Adds tri-state support via `mix()`, `unmix()`, `mixed()`, `mixedIds`, `mixedItems`
+* - Perfect for checkbox trees, multi-select dropdowns, and bulk operations
+*
+* **Tri-State Support:**
+* - Items can be in one of three states: selected, mixed (indeterminate), or unselected
+* - `mix(id)` sets item to mixed state (clears selected if set)
+* - `unmix(id)` clears mixed state
+* - `select(id)` clears mixed state before selecting
+* - `toggle(id)` on a mixed item selects it (resolves the indeterminate state positively)
+* - Mixed state works on disabled items (it's a computed state, not user action)
+*
+* **Batch Operations:**
+* - Single ID: `group.select('item-1')`
+* - Array of IDs: `group.select(['item-1', 'item-2', 'item-3'])`
+* - Uses `toArray()` utility internally to normalize input
+* - Disabled items are automatically skipped in select operations
+* - Non-existent IDs are silently ignored
+*
+* **Inheritance Chain:**
+* `useRegistry` → `createSelection` → `createGroup`
+*
+* **Used By:**
+* - `createFeatures` for feature flag management with multiple selections
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-group
+*
+* @example
+* ```ts
+* import { createGroup } from '@vuetify/v0'
+*
+* const checkboxes = createGroup()
+*
+* checkboxes.onboard([
+*   { id: 'option-a', value: 'Option A' },
+*   { id: 'option-b', value: 'Option B' },
+*   { id: 'option-c', value: 'Option C' },
+* ])
+*
+* // Select multiple items at once
+* checkboxes.select(['option-a', 'option-c'])
+*
+* console.log(checkboxes.selectedIds) // Set { 'option-a', 'option-c' }
+* console.log(Array.from(checkboxes.selectedIndexes.value)) // [0, 2]
+*
+* // Set item to mixed/indeterminate state
+* checkboxes.mix('option-a')
+* console.log(checkboxes.mixedIds) // Set { 'option-a' }
+* console.log(checkboxes.selectedIds) // Set { 'option-c' } (option-a removed)
+*
+* // Toggle a mixed item selects it
+* checkboxes.toggle('option-a')
+* console.log(checkboxes.selectedIds) // Set { 'option-a', 'option-c' }
+* console.log(checkboxes.mixedIds) // Set {} (cleared)
+* ```
+*/
+function createGroup(_options = {}) {
+	const { mandatory = false, multiple = true, ...options } = _options;
+	const selection = createSelection({
+		...options,
+		mandatory,
+		multiple,
+		events: true
+	});
+	const proxy = useProxyRegistry(selection);
+	const mixedIds = shallowReactive(/* @__PURE__ */ new Set());
+	const selectedIndexes = computed(() => {
+		return new Set(Array.from(selection.selectedItems.value).map((item) => item?.index).filter((index) => !/* @__PURE__ */ isUndefined(index)));
+	});
+	const mixedItems = computed(() => {
+		return new Set(Array.from(mixedIds).map((id) => selection.get(id)).filter((item) => !/* @__PURE__ */ isUndefined(item)));
+	});
+	function mixed(id) {
+		return mixedIds.has(id);
+	}
+	function mix(ids) {
+		for (const id of toArray(ids)) {
+			if (!selection.has(id)) continue;
+			selection.selectedIds.delete(id);
+			mixedIds.add(id);
+		}
+	}
+	function unmix(ids) {
+		for (const id of toArray(ids)) mixedIds.delete(id);
+	}
+	function select(ids) {
+		for (const id of toArray(ids)) {
+			mixedIds.delete(id);
+			selection.select(id);
+		}
+	}
+	function unselect(ids) {
+		for (const id of toArray(ids)) selection.unselect(id);
+	}
+	function toggle(ids) {
+		for (const id of toArray(ids)) if (mixed(id)) select(id);
+		else selection.toggle(id);
+	}
+	function register(registration = {}) {
+		const id = registration.id ?? /* @__PURE__ */ useId$1();
+		const item = {
+			...registration,
+			id,
+			isMixed: toRef(() => mixed(id)),
+			select: () => select(id),
+			unselect: () => unselect(id),
+			toggle: () => toggle(id),
+			mix: () => mix(id),
+			unmix: () => unmix(id)
+		};
+		const ticket = selection.register(item);
+		if (toValue(registration.indeterminate)) mix(id);
+		return ticket;
+	}
+	function unregister(id) {
+		mixedIds.delete(id);
+		selection.unregister(id);
+	}
+	function offboard(ids) {
+		for (const id of ids) mixedIds.delete(id);
+		selection.offboard(ids);
+	}
+	function onboard(registrations) {
+		const tickets = selection.batch(() => registrations.map((registration) => register(registration)));
+		if (toValue(mandatory) === "force") selection.mandate();
+		return tickets;
+	}
+	function reset() {
+		mixedIds.clear();
+		selection.reset();
+	}
+	const selectableItems = computed(() => {
+		return proxy.values.filter((item) => !toValue(item.disabled));
+	});
+	const isAllSelected = computed(() => {
+		const items = selectableItems.value;
+		if (items.length === 0) return false;
+		return items.every((item) => selection.selectedIds.has(item.id));
+	});
+	const isNoneSelected = computed(() => selection.selectedIds.size === 0);
+	const isMixed = computed(() => {
+		return mixedIds.size > 0 || !isNoneSelected.value && !isAllSelected.value;
+	});
+	function selectAll() {
+		for (const item of selectableItems.value) {
+			mixedIds.delete(item.id);
+			selection.select(item.id);
+		}
+	}
+	function unselectAll() {
+		const first = selection.selectedIds.values().next().value;
+		selection.selectedIds.clear();
+		if (!toValue(mandatory) || !first) return;
+		selection.select(first);
+	}
+	function toggleAll() {
+		if (isAllSelected.value) unselectAll();
+		else selectAll();
+	}
+	return {
+		...selection,
+		mixed,
+		mix,
+		unmix,
+		select,
+		unselect,
+		toggle,
+		register,
+		unregister,
+		offboard,
+		onboard,
+		reset,
+		selectAll,
+		unselectAll,
+		toggleAll,
+		mixedIds,
+		mixedItems,
+		selectedIndexes,
+		isNoneSelected,
+		isAllSelected,
+		isMixed,
+		get size() {
+			return selection.size;
+		}
+	};
+}
+/**
+* Creates a new group context.
+*
+* @param options The options for the group context.
+* @template Z The input ticket type.
+* @template E The output ticket type.
+* @template R The context type.
+* @returns A new group context.
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-group
+*
+* @example
+* ```ts
+* import { createGroupContext } from '@vuetify/v0'
+*
+* // With default namespace 'v0:group'
+* export const [useMyGroup, provideMyGroup, myGroup] = createGroupContext()
+*
+* // Or with custom namespace
+* export const [useMyGroup, provideMyGroup, myGroup] = createGroupContext({ namespace: 'my-group' })
+*
+* // In a parent component:
+* provideMyGroup()
+*
+* // In a child component:
+* const group = useMyGroup()
+* ```
+*/
+function createGroupContext(_options = {}) {
+	const { namespace = "v0:group", ...options } = _options;
+	const [useGroupContext, _provideGroupContext] = createContext(namespace);
+	const context = createGroup(options);
+	function provideGroupContext(_context = context, app) {
+		return _provideGroupContext(_context, app);
+	}
+	return createTrinity(useGroupContext, provideGroupContext, context);
+}
+/**
+* Returns the current group instance.
+*
+* @param namespace The namespace for the group context. Defaults to `'v0:group'`.
+* @template Z The input ticket type.
+* @template E The output ticket type.
+* @template R The context type.
+* @returns The current group instance.
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-group
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useGroup } from '@vuetify/v0'
+*
+*   const group = useGroup()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Selected: {{ group.selectedIds.size }}</p>
+*   </div>
+* </template>
+* ```
+*/
+function useGroup(namespace = "v0:group") {
+	return useContext(namespace);
+}
+
+//#endregion
+export { useProxyRegistry as i, createGroupContext as n, useGroup as r, createGroup as t };

package/dist/createPagination-cyOWlpfH.mjs

@@ -0,0 +1,234 @@
+import { _ as range, s as isNaN } from "./utilities-BqS1sC1W.mjs";
+import { i as useContext, n as createContext, t as createTrinity } from "./createTrinity-EeHQSsb6.mjs";
+import { computed, isRef, shallowRef, toValue } from "vue";
+
+//#region src/composables/createPagination/index.ts
+/**
+* @module usePagination
+*
+* @remarks
+* Lightweight pagination composable for navigating through pages.
+*
+* Key features:
+* - No registry overhead - just a bounded integer
+* - Direct ref support for v-model compatibility
+* - Navigation methods: next, prev, first, last
+* - Computed visible items with ellipsis
+* - Trinity pattern for dependency injection
+*
+* Unlike registry-based composables, pagination tracks a single number
+* within a range, making it efficient for large page counts.
+*/
+/**
+* Creates a pagination instance.
+*
+* @param options The options for the pagination instance.
+* @returns A pagination context with navigation methods.
+*
+* @example
+* ```ts
+* import { createPagination } from '@vuetify/v0'
+*
+* // Basic usage
+* const pagination = createPagination({ size: 100 })
+* pagination.next()
+* pagination.items.value // [{ type: 'page', value: 1 }, { type: 'page', value: 2 }, ...]
+*
+* // With v-model (pass a ref)
+* const page = ref(1)
+* const pagination = createPagination({ page, size: 100 })
+* // Mutating pagination.page or the passed ref syncs both
+* ```
+*/
+function createPagination(_options = {}) {
+	const { page: _page = 1, itemsPerPage: _itemsPerPage = 10, size: _size = 0, visible: _visible = 7, ellipsis = "..." } = _options;
+	const page = isRef(_page) ? _page : shallowRef(_page);
+	const pages = computed(() => {
+		const size = toValue(_size);
+		const perPage = toValue(_itemsPerPage);
+		if (size <= 0 || /* @__PURE__ */ isNaN(size)) return 0;
+		return Math.ceil(size / perPage);
+	});
+	function first() {
+		page.value = 1;
+	}
+	function last() {
+		page.value = Math.max(1, pages.value);
+	}
+	function next() {
+		if (page.value < pages.value) page.value++;
+	}
+	function prev() {
+		if (page.value > 1) page.value--;
+	}
+	function select(value) {
+		if (value < 1) page.value = 1;
+		else if (value > pages.value) page.value = Math.max(1, pages.value);
+		else page.value = value;
+	}
+	const isFirst = computed(() => page.value <= 1);
+	const isLast = computed(() => page.value >= pages.value);
+	const pageStart = computed(() => (page.value - 1) * toValue(_itemsPerPage));
+	const pageStop = computed(() => Math.min(pageStart.value + toValue(_itemsPerPage), toValue(_size)));
+	function toPage(value) {
+		return {
+			type: "page",
+			value
+		};
+	}
+	function toEllipsis() {
+		return ellipsis === false ? false : {
+			type: "ellipsis",
+			value: ellipsis
+		};
+	}
+	function filter(array) {
+		return array.filter((item) => item !== false);
+	}
+	return {
+		page,
+		ellipsis,
+		items: computed(() => {
+			const pageCount = pages.value;
+			const visible = toValue(_visible);
+			const current = page.value;
+			if (pageCount <= 0 || /* @__PURE__ */ isNaN(pageCount) || pageCount > Number.MAX_SAFE_INTEGER) return [];
+			if (visible <= 0) return [];
+			if (visible <= 2) return [toPage(current)];
+			if (pageCount <= visible) return (/* @__PURE__ */ range(pageCount, 1)).map(toPage);
+			if (visible === 3) {
+				const mid = current <= 1 ? 2 : current >= pageCount ? pageCount - 1 : current;
+				return [
+					toPage(1),
+					toPage(mid),
+					toPage(pageCount)
+				];
+			}
+			const boundary = visible - 2;
+			const middle = visible - 4;
+			if (middle <= 0) {
+				if (current <= boundary) return filter([
+					...(/* @__PURE__ */ range(boundary, 1)).map(toPage),
+					toEllipsis(),
+					toPage(pageCount)
+				]);
+				if (current > pageCount - boundary) return filter([
+					toPage(1),
+					toEllipsis(),
+					...(/* @__PURE__ */ range(boundary, pageCount - boundary + 1)).map(toPage)
+				]);
+				return current <= Math.ceil(pageCount / 2) ? filter([
+					toPage(1),
+					toPage(current),
+					toEllipsis(),
+					toPage(pageCount)
+				]) : filter([
+					toPage(1),
+					toEllipsis(),
+					toPage(current),
+					toPage(pageCount)
+				]);
+			}
+			const leftThreshold = boundary - 1;
+			const rightThreshold = pageCount - boundary + 2;
+			if (current <= leftThreshold) return filter([
+				...(/* @__PURE__ */ range(boundary, 1)).map(toPage),
+				toEllipsis(),
+				toPage(pageCount)
+			]);
+			else if (current >= rightThreshold) return filter([
+				toPage(1),
+				toEllipsis(),
+				...(/* @__PURE__ */ range(boundary, pageCount - boundary + 1)).map(toPage)
+			]);
+			else {
+				const start = current - Math.floor(middle / 2);
+				return filter([
+					toPage(1),
+					toEllipsis(),
+					...(/* @__PURE__ */ range(middle, start)).map(toPage),
+					toEllipsis(),
+					toPage(pageCount)
+				]);
+			}
+		}),
+		pageStart,
+		pageStop,
+		isFirst,
+		isLast,
+		first,
+		last,
+		next,
+		prev,
+		select,
+		get itemsPerPage() {
+			return toValue(_itemsPerPage);
+		},
+		get size() {
+			return toValue(_size);
+		},
+		get pages() {
+			return pages.value;
+		}
+	};
+}
+/**
+* Creates a pagination context for dependency injection.
+*
+* @param options The options including namespace.
+* @returns A trinity: [usePagination, providePagination, defaultContext]
+*
+* @example
+* ```ts
+* // With default namespace 'v0:pagination'
+* const [usePagination, providePaginationContext] = createPaginationContext({ size: 50 })
+*
+* // Or with custom namespace
+* const [usePagination, providePaginationContext] = createPaginationContext({
+*   namespace: 'my-pagination',
+*   size: 50,
+* })
+*
+* // Parent component
+* providePaginationContext()
+*
+* // Child component
+* const pagination = usePagination()
+* pagination.next()
+* ```
+*/
+function createPaginationContext(_options = {}) {
+	const { namespace = "v0:pagination", ...options } = _options;
+	const [usePaginationContext, _providePaginationContext] = createContext(namespace);
+	const context = createPagination(options);
+	function providePaginationContext(_context = context, app) {
+		return _providePaginationContext(_context, app);
+	}
+	return createTrinity(usePaginationContext, providePaginationContext, context);
+}
+/**
+* Returns the current pagination instance from context.
+*
+* @param namespace The namespace. @default 'v0:pagination'
+* @returns The pagination context.
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*  import { usePagination } from '@vuetify/v0'
+*
+*  const pagination = usePagination()
+* <\/script>
+*
+* <template>
+*   <button @click="pagination.prev()" :disabled="pagination.isFirst.value">Prev</button>
+*   <button @click="pagination.next()" :disabled="pagination.isLast.value">Next</button>
+* </template>
+* ```
+*/
+function usePagination(namespace = "v0:pagination") {
+	return useContext(namespace);
+}
+
+//#endregion
+export { createPaginationContext as n, usePagination as r, createPagination as t };