@vuetify/v0 0.1.3 → 0.1.4

package/dist/createSelection-uqEbFgha.mjs

@@ -0,0 +1,261 @@
+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 { i as createRegistry } from "./createTokens-BlhLdHXE.mjs";
+import { computed, shallowReactive, toRef, toValue } from "vue";
+
+//#region src/composables/createSelection/index.ts
+/**
+* @module useSelection
+*
+* @remarks
+* Base composable for managing selected items in a collection with Set-based tracking.
+*
+* Key features:
+* - Set-based selectedIds for O(1) selection checks
+* - Mandatory selection mode (prevents deselecting last item)
+* - Auto-enrollment option (selects non-disabled items on register)
+* - Disabled item filtering
+* - Computed selectedItems and selectedValues Sets
+*
+* Extends useRegistry and serves as the base for useSingle, useGroup, useStep, and useFeatures.
+*/
+/**
+* Creates a new selection instance for managing multiple selected items.
+*
+* Extends `useRegistry` with selection tracking via a reactive `Set` of selected IDs.
+* Supports disabled items, mandatory selection enforcement, and auto-enrollment.
+*
+* @param options The options for the selection instance.
+* @template Z The input ticket type - what users provide to register(). Extend SelectionTicketInput to add custom properties.
+* @template E The output ticket type - what users receive from get(). Automatically includes selection methods.
+* @template R The context type. Defaults to SelectionContext<Z, E>.
+* @returns A new selection instance with selection management methods.
+*
+* @remarks
+* **Key Features:**
+* - Multi-selection support (unlike `useSingle` which enforces single selection)
+* - Set-based `selectedIds` tracking for efficient lookups
+* - Computed `selectedItems` and `selectedValues` for reactive access
+* - Each ticket gets `isSelected`, `select()`, `unselect()`, and `toggle()` methods
+* - Disabled items cannot be selected
+* - Mandatory mode prevents deselecting the last item
+* - Force mode auto-selects first non-disabled item on registration
+* - Enroll option auto-selects all non-disabled items on registration
+*
+* **Inheritance Chain:**
+* `useRegistry` → `createSelection` → `createSingle`/`createGroup` → `createStep`
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-selection
+*
+* @example
+* ```ts
+* import { createSelection } from '@vuetify/v0'
+*
+* // Basic usage
+* const selection = createSelection({ mandatory: true })
+*
+* selection.onboard([
+*   { id: 'item-1', value: 'Item 1' },
+*   { id: 'item-2', value: 'Item 2', disabled: true },
+*   { id: 'item-3', value: 'Item 3' },
+* ])
+*
+* selection.select('item-1')
+* selection.select('item-3')
+*
+* console.log(selection.selectedIds) // Set { 'item-1', 'item-3' }
+* console.log(Array.from(selection.selectedValues.value)) // ['Item 1', 'Item 3']
+* ```
+*
+* @example
+* ```ts
+* // With custom ticket type
+* interface MyTicket extends SelectionTicketInput {
+*   label: string
+*   icon?: string
+* }
+*
+* const tabs = createSelection<MyTicket>()
+*
+* tabs.register({ label: 'Home', icon: 'mdi-home' })
+* tabs.register({ label: 'Settings' })
+*
+* const ticket = tabs.get('...')
+* // ticket has: label, icon, isSelected, select(), unselect(), toggle()
+* ```
+*/
+function createSelection(_options = {}) {
+	const { disabled = false, enroll = false, mandatory = false, multiple = false, ...options } = _options;
+	const registry = createRegistry(options);
+	const selectedIds = shallowReactive(/* @__PURE__ */ new Set());
+	const selectedItems = computed(() => {
+		return new Set(Array.from(selectedIds).map((id) => registry.get(id)).filter((item) => !/* @__PURE__ */ isUndefined(item)));
+	});
+	const selectedValues = computed(() => {
+		return new Set(Array.from(selectedItems.value).map((item) => item.value));
+	});
+	function seek(direction = "first", from) {
+		return registry.seek(direction, from, (ticket) => !toValue(ticket.disabled));
+	}
+	function mandate() {
+		if (!toValue(mandatory) || registry.size === 0 || selectedIds.size > 0) return;
+		const ticket = seek("first");
+		if (ticket) select(ticket.id);
+	}
+	function select(id) {
+		if (toValue(disabled)) return;
+		const item = registry.get(id);
+		if (!item || toValue(item.disabled)) return;
+		if (!toValue(multiple)) selectedIds.clear();
+		selectedIds.add(id);
+	}
+	function unselect(id) {
+		if (toValue(disabled)) return;
+		if (toValue(mandatory) && selectedIds.size === 1) return;
+		selectedIds.delete(id);
+	}
+	function toggle(id) {
+		if (toValue(disabled)) return;
+		if (selected(id)) unselect(id);
+		else select(id);
+	}
+	function selected(id) {
+		return selectedIds.has(id);
+	}
+	function register(registration = {}) {
+		const id = registration.id ?? /* @__PURE__ */ useId$1();
+		const item = {
+			disabled: false,
+			select: () => select(id),
+			unselect: () => unselect(id),
+			toggle: () => toggle(id),
+			isSelected: toRef(() => selected(id)),
+			...registration,
+			id
+		};
+		const ticket = registry.register(item);
+		if (toValue(enroll) && !toValue(disabled) && !toValue(item.disabled)) select(ticket.id);
+		if (toValue(mandatory) === "force") mandate();
+		return ticket;
+	}
+	function unregister(id) {
+		selectedIds.delete(id);
+		registry.unregister(id);
+	}
+	function offboard(ids) {
+		for (const id of ids) selectedIds.delete(id);
+		registry.offboard(ids);
+	}
+	function onboard(registrations) {
+		const tickets = registry.batch(() => registrations.map((registration) => register(registration)));
+		if (toValue(mandatory) === "force") mandate();
+		return tickets;
+	}
+	function reset() {
+		registry.clear();
+		selectedIds.clear();
+		mandate();
+	}
+	return {
+		...registry,
+		disabled,
+		selectedIds,
+		selectedItems,
+		selectedValues,
+		register,
+		unregister,
+		onboard,
+		offboard,
+		reset,
+		mandate,
+		seek,
+		select,
+		unselect,
+		toggle,
+		selected,
+		get size() {
+			return registry.size;
+		}
+	};
+}
+/**
+* Creates a new selection context.
+*
+* @param options The options for the selection context.
+* @template Z The input ticket type - what users provide to register().
+* @template E The output ticket type - what users receive from get().
+* @template R The context type. Defaults to SelectionContext<Z, E>.
+* @returns A new selection context.
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-selection
+*
+* @example
+* ```ts
+* import { createSelectionContext } from '@vuetify/v0'
+*
+* // With default namespace 'v0:selection'
+* export const [useCheckboxes, provideCheckboxes, checkboxes] = createSelectionContext()
+*
+* // Or with custom namespace
+* export const [useCheckboxes, provideCheckboxes, checkboxes] = createSelectionContext({ namespace: 'checkboxes' })
+*
+* // In a parent component:
+* provideCheckboxes()
+*
+* // In a child component:
+* const checkboxes = useCheckboxes()
+* checkboxes.select('checkbox-1')
+* ```
+*
+* @example
+* ```ts
+* // With custom ticket type
+* interface TabTicket extends SelectionTicketInput {
+*   label: string
+*   icon?: string
+* }
+*
+* export const [useTabs, provideTabs, tabs] = createSelectionContext<TabTicket>()
+* ```
+*/
+function createSelectionContext(_options = {}) {
+	const { namespace = "v0:selection", ...options } = _options;
+	const [useSelectionContext, _provideSelectionContext] = createContext(namespace);
+	const context = createSelection(options);
+	function provideSelectionContext(_context = context, app) {
+		return _provideSelectionContext(_context, app);
+	}
+	return createTrinity(useSelectionContext, provideSelectionContext, context);
+}
+/**
+* Returns the current selection instance.
+*
+* @param namespace The namespace for the selection context. Defaults to `'v0:selection'`.
+* @template Z The input ticket type.
+* @template E The output ticket type.
+* @template R The context type.
+* @returns The current selection instance.
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-selection
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useSelection } from '@vuetify/v0'
+*
+*   const selection = useSelection()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Selected: {{ selection.selectedIds.size }}</p>
+*   </div>
+* </template>
+* ```
+*/
+function useSelection(namespace = "v0:selection") {
+	return useContext(namespace);
+}
+
+//#endregion
+export { createSelectionContext as n, useSelection as r, createSelection as t };

package/dist/createSingle-B59ya3aa.mjs

@@ -0,0 +1,179 @@
+import { i as useContext, n as createContext, t as createTrinity } from "./createTrinity-EeHQSsb6.mjs";
+import { t as createSelection } from "./createSelection-uqEbFgha.mjs";
+import { computed } from "vue";
+
+//#region src/composables/createSingle/index.ts
+/**
+* @module useSingle
+*
+* @remarks
+* Single-selection composable that extends useSelection to enforce only one selected item.
+*
+* Key features:
+* - Auto-clears previous selection when selecting new item
+* - Singular computed properties (selectedId, selectedItem, selectedIndex, selectedValue)
+* - Perfect for tabs, radio buttons, theme selectors
+*
+* Inheritance chain: useRegistry → useSelection → useSingle
+*/
+/**
+* Creates a new single selection instance that enforces only one selected item at a time.
+*
+* Extends `createSelection` by automatically clearing previous selections when a new item is selected.
+* Adds computed singular properties: `selectedId`, `selectedItem`, `selectedIndex`, `selectedValue`.
+*
+* @param options The options for the single selection instance.
+* @template Z The input ticket type - what users provide to register().
+* @template E The output ticket type - what users receive from get().
+* @template R The context type.
+* @returns A new single selection instance with single-selection enforcement.
+*
+* @remarks
+* **Key Differences from `createSelection`:**
+* - Automatically clears `selectedIds` before selecting a new item (enforces single selection)
+* - Provides singular computed properties instead of plural sets
+* - Perfect for tabs, radio buttons, theme selectors, and other single-choice UI components
+*
+* **Computed Properties:**
+* - `selectedId`: The ID of the selected item (undefined if none selected)
+* - `selectedItem`: The selected ticket object (undefined if none selected)
+* - `selectedIndex`: The index of the selected item (-1 if none selected)
+* - `selectedValue`: The value of the selected item (undefined if none selected)
+*
+* **Inheritance Chain:**
+* `useRegistry` → `createSelection` → `createSingle` → `createStep`
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-single
+*
+* @example
+* ```ts
+* import { createSingle } from '@vuetify/v0'
+*
+* const tabs = createSingle({ mandatory: true })
+*
+* tabs.onboard([
+*   { id: 'home', value: 'Home' },
+*   { id: 'about', value: 'About' },
+*   { id: 'contact', value: 'Contact' },
+* ])
+*
+* tabs.first() // Select first tab
+*
+* console.log(tabs.selectedId.value) // 'home'
+* console.log(tabs.selectedIndex.value) // 0
+*
+* tabs.select('about') // Switch to about tab
+* console.log(tabs.selectedId.value) // 'about'
+* console.log(tabs.selectedIds.size) // 1 (always enforces single selection)
+* ```
+*
+* @example
+* ```ts
+* // With custom ticket type
+* interface TabTicket extends SingleTicketInput {
+*   label: string
+*   icon?: string
+* }
+*
+* const tabs = createSingle<TabTicket>()
+* tabs.register({ label: 'Home', icon: 'mdi-home' })
+* ```
+*/
+function createSingle(_options = {}) {
+	const { mandatory = false, multiple = false, ...options } = _options;
+	const registry = createSelection({
+		...options,
+		mandatory,
+		multiple
+	});
+	const selectedId = computed(() => registry.selectedIds.values().next().value);
+	const selectedItem = computed(() => registry.selectedItems.value.values().next().value);
+	const selectedIndex = computed(() => selectedItem.value?.index ?? -1);
+	const selectedValue = computed(() => selectedItem.value?.value);
+	function unselect(id) {
+		registry.unselect(id);
+	}
+	function toggle(id) {
+		if (registry.selectedIds.has(id)) unselect(id);
+		else registry.select(id);
+	}
+	return {
+		...registry,
+		selectedId,
+		selectedItem,
+		selectedIndex,
+		selectedValue,
+		unselect,
+		toggle,
+		get size() {
+			return registry.size;
+		}
+	};
+}
+/**
+* Creates a new single selection context.
+*
+* @param options The options for the single selection context.
+* @template Z The input ticket type.
+* @template E The output ticket type.
+* @template R The context type.
+* @returns A new single selection context.
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-single
+*
+* @example
+* ```ts
+* import { createSingleContext } from '@vuetify/v0'
+*
+* // With default namespace 'v0:single'
+* export const [useSingle, provideSingle, context] = createSingleContext()
+*
+* // In a parent component:
+* provideSingle()
+*
+* // In a child component:
+* const single = useSingle()
+* single.select('tab-1')
+* ```
+*/
+function createSingleContext(_options = {}) {
+	const { namespace = "v0:single", ...options } = _options;
+	const [useSingleContext, _provideSingleContext] = createContext(namespace);
+	const context = createSingle(options);
+	function provideSingleContext(_context = context, app) {
+		return _provideSingleContext(_context, app);
+	}
+	return createTrinity(useSingleContext, provideSingleContext, context);
+}
+/**
+* Returns the current single selection instance.
+*
+* @param namespace The namespace for the single selection context. Defaults to `'v0:single'`.
+* @template Z The input ticket type.
+* @template E The output ticket type.
+* @template R The context type.
+* @returns The current single selection instance.
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-single
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useSingle } from '@vuetify/v0'
+*
+*   const tabs = useSingle()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Selected: {{ tabs.selectedId }}</p>
+*   </div>
+* </template>
+* ```
+*/
+function useSingle(namespace = "v0:single") {
+	return useContext(namespace);
+}
+
+//#endregion
+export { createSingleContext as n, useSingle as r, createSingle as t };