@auronui/vue 1.1.1 → 1.2.0

package/dist/composables/useSlider.js

@@ -0,0 +1,46 @@
+import { ref } from "vue";
+//#region src/composables/useSlider.ts
+/**
+* Manages value state for the Slider component.
+*
+* @example
+* ```ts
+* // Single thumb
+* const slider = useSlider({ defaultValue: 40, min: 0, max: 100 })
+*
+* // Range (two thumbs)
+* const range = useSlider({ defaultValue: [20, 80], min: 0, max: 100 })
+* ```
+* ```html
+* <Slider :model-value="slider.value" :min="slider.min" :max="slider.max" @update:model-value="slider.onValueChange" />
+* ```
+*/
+function useSlider(options = {}) {
+	const min = options.min ?? 0;
+	const max = options.max ?? 100;
+	const step = options.step ?? 1;
+	const value = ref(options.defaultValue ?? min);
+	function clamp(v) {
+		if (Array.isArray(v)) return v.map((n) => Math.min(Math.max(n, min), max));
+		return Math.min(Math.max(v, min), max);
+	}
+	function setValue(v) {
+		value.value = v;
+	}
+	function onValueChange(v) {
+		value.value = v;
+	}
+	return {
+		value,
+		min,
+		max,
+		step,
+		setValue,
+		clamp,
+		onValueChange
+	};
+}
+//#endregion
+export { useSlider };
+
+//# sourceMappingURL=useSlider.js.map

package/dist/composables/useSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSlider.js","names":[],"sources":["../../src/composables/useSlider.ts"],"sourcesContent":["import { ref, type Ref } from 'vue'\n\nexport type SliderValue = number | number[]\n\nexport interface UseSliderOptions {\n  /** Initial value. Use a number for a single thumb, number[] for range mode. Defaults to `min`. */\n  defaultValue?: SliderValue\n  /** Minimum allowed value. Defaults to 0. */\n  min?: number\n  /** Maximum allowed value. Defaults to 100. */\n  max?: number\n  /** Step increment. Defaults to 1. */\n  step?: number\n}\n\nexport interface UseSliderReturn {\n  /** Reactive slider value. Number in single mode, number[] in range mode. */\n  value: Ref<SliderValue>\n  /** Minimum value. */\n  min: number\n  /** Maximum value. */\n  max: number\n  /** Step increment. */\n  step: number\n  /** Set the slider value directly. */\n  setValue: (value: SliderValue) => void\n  /** Clamp a value (or array of values) to [min, max]. */\n  clamp: (value: SliderValue) => SliderValue\n  /**\n   * Pass as `@update:model-value` handler on the Slider component.\n   * Keeps `value` in sync when the component changes internally.\n   */\n  onValueChange: (value: SliderValue) => void\n}\n\n/**\n * Manages value state for the Slider component.\n *\n * @example\n * ```ts\n * // Single thumb\n * const slider = useSlider({ defaultValue: 40, min: 0, max: 100 })\n *\n * // Range (two thumbs)\n * const range = useSlider({ defaultValue: [20, 80], min: 0, max: 100 })\n * ```\n * ```html\n * <Slider :model-value=\"slider.value\" :min=\"slider.min\" :max=\"slider.max\" @update:model-value=\"slider.onValueChange\" />\n * ```\n */\nexport function useSlider(options: UseSliderOptions = {}): UseSliderReturn {\n  const min = options.min ?? 0\n  const max = options.max ?? 100\n  const step = options.step ?? 1\n\n  const value = ref<SliderValue>(options.defaultValue ?? min)\n\n  function clamp(v: SliderValue): SliderValue {\n    if (Array.isArray(v)) return v.map(n => Math.min(Math.max(n, min), max))\n    return Math.min(Math.max(v, min), max)\n  }\n\n  function setValue(v: SliderValue): void {\n    value.value = v\n  }\n\n  function onValueChange(v: SliderValue): void {\n    value.value = v\n  }\n\n  return {\n    value,\n    min,\n    max,\n    step,\n    setValue,\n    clamp,\n    onValueChange,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkDA,SAAgB,UAAU,UAA4B,EAAE,EAAmB;CACzE,MAAM,MAAM,QAAQ,OAAO;CAC3B,MAAM,MAAM,QAAQ,OAAO;CAC3B,MAAM,OAAO,QAAQ,QAAQ;CAE7B,MAAM,QAAQ,IAAiB,QAAQ,gBAAgB,IAAI;CAE3D,SAAS,MAAM,GAA6B;AAC1C,MAAI,MAAM,QAAQ,EAAE,CAAE,QAAO,EAAE,KAAI,MAAK,KAAK,IAAI,KAAK,IAAI,GAAG,IAAI,EAAE,IAAI,CAAC;AACxE,SAAO,KAAK,IAAI,KAAK,IAAI,GAAG,IAAI,EAAE,IAAI;;CAGxC,SAAS,SAAS,GAAsB;AACtC,QAAM,QAAQ;;CAGhB,SAAS,cAAc,GAAsB;AAC3C,QAAM,QAAQ;;AAGhB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/composables/useSplitter.js

@@ -0,0 +1,39 @@
+import { ref } from "vue";
+//#region src/composables/useSplitter.ts
+/**
+* Tracks panel layout state for the SplitterGroup component.
+*
+* @example
+* ```ts
+* const splitter = useSplitter({ defaultSizes: [30, 70] })
+* ```
+* ```html
+* <SplitterGroup @layout="splitter.onLayout">
+*   <SplitterPanel :default-size="splitter.sizes[0] ?? 30" />
+*   <SplitterResizeHandle />
+*   <SplitterPanel :default-size="splitter.sizes[1] ?? 70" />
+* </SplitterGroup>
+* ```
+*/
+function useSplitter(options = {}) {
+	const sizes = ref(options.defaultSizes ? [...options.defaultSizes] : []);
+	function setSizes(next) {
+		sizes.value = [...next];
+	}
+	function resetSizes() {
+		sizes.value = options.defaultSizes ? [...options.defaultSizes] : [];
+	}
+	function onLayout(next) {
+		sizes.value = next;
+	}
+	return {
+		sizes,
+		setSizes,
+		resetSizes,
+		onLayout
+	};
+}
+//#endregion
+export { useSplitter };
+
+//# sourceMappingURL=useSplitter.js.map

package/dist/composables/useSplitter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSplitter.js","names":[],"sources":["../../src/composables/useSplitter.ts"],"sourcesContent":["import { ref, type Ref } from 'vue'\n\nexport interface UseSplitterOptions {\n  /** Initial panel sizes as percentages (0–100). Should sum to 100. */\n  defaultSizes?: number[]\n}\n\nexport interface UseSplitterReturn {\n  /** Reactive array of panel sizes as percentages. */\n  sizes: Ref<number[]>\n  /** Set panel sizes directly. */\n  setSizes: (sizes: number[]) => void\n  /** Reset panel sizes to the values provided in `defaultSizes`. */\n  resetSizes: () => void\n  /**\n   * Pass as `@layout` handler on the SplitterGroup component.\n   * Keeps `sizes` in sync when the user drags the resize handle.\n   */\n  onLayout: (sizes: number[]) => void\n}\n\n/**\n * Tracks panel layout state for the SplitterGroup component.\n *\n * @example\n * ```ts\n * const splitter = useSplitter({ defaultSizes: [30, 70] })\n * ```\n * ```html\n * <SplitterGroup @layout=\"splitter.onLayout\">\n *   <SplitterPanel :default-size=\"splitter.sizes[0] ?? 30\" />\n *   <SplitterResizeHandle />\n *   <SplitterPanel :default-size=\"splitter.sizes[1] ?? 70\" />\n * </SplitterGroup>\n * ```\n */\nexport function useSplitter(options: UseSplitterOptions = {}): UseSplitterReturn {\n  const sizes = ref<number[]>(options.defaultSizes ? [...options.defaultSizes] : [])\n\n  function setSizes(next: number[]): void {\n    sizes.value = [...next]\n  }\n\n  function resetSizes(): void {\n    sizes.value = options.defaultSizes ? [...options.defaultSizes] : []\n  }\n\n  function onLayout(next: number[]): void {\n    sizes.value = next\n  }\n\n  return {\n    sizes,\n    setSizes,\n    resetSizes,\n    onLayout,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAoCA,SAAgB,YAAY,UAA8B,EAAE,EAAqB;CAC/E,MAAM,QAAQ,IAAc,QAAQ,eAAe,CAAC,GAAG,QAAQ,aAAa,GAAG,EAAE,CAAC;CAElF,SAAS,SAAS,MAAsB;AACtC,QAAM,QAAQ,CAAC,GAAG,KAAK;;CAGzB,SAAS,aAAmB;AAC1B,QAAM,QAAQ,QAAQ,eAAe,CAAC,GAAG,QAAQ,aAAa,GAAG,EAAE;;CAGrE,SAAS,SAAS,MAAsB;AACtC,QAAM,QAAQ;;AAGhB,QAAO;EACL;EACA;EACA;EACA;EACD"}

package/dist/composables/useStepper.js

@@ -0,0 +1,58 @@
+import { computed, ref } from "vue";
+//#region src/composables/useStepper.ts
+/**
+* Manages step navigation state for the Stepper component.
+*
+* @example
+* ```ts
+* const stepper = useStepper({ totalSteps: 4 })
+* ```
+* ```html
+* <Stepper :model-value="stepper.step" :total-steps="stepper.totalSteps" @update:model-value="stepper.onStepChange">
+*   ...
+* </Stepper>
+* ```
+*/
+function useStepper(options = {}) {
+	const step = ref(options.defaultStep ?? 1);
+	const totalSteps = computed(() => options.steps ? options.steps.length : options.totalSteps ?? 0);
+	const isFirst = computed(() => step.value <= 1);
+	const isLast = computed(() => totalSteps.value > 0 && step.value >= totalSteps.value);
+	function goToStep(n) {
+		const max = totalSteps.value || Infinity;
+		step.value = Math.max(1, Math.min(n, max));
+	}
+	function nextStep() {
+		if (!isLast.value) goToStep(step.value + 1);
+	}
+	function prevStep() {
+		if (!isFirst.value) goToStep(step.value - 1);
+	}
+	function reset() {
+		goToStep(1);
+	}
+	function getStepStatus(n) {
+		if (n < step.value) return "completed";
+		if (n === step.value) return "current";
+		return "pending";
+	}
+	function onStepChange(n) {
+		goToStep(n);
+	}
+	return {
+		step,
+		totalSteps,
+		isFirst,
+		isLast,
+		goToStep,
+		nextStep,
+		prevStep,
+		reset,
+		getStepStatus,
+		onStepChange
+	};
+}
+//#endregion
+export { useStepper };
+
+//# sourceMappingURL=useStepper.js.map

package/dist/composables/useStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStepper.js","names":[],"sources":["../../src/composables/useStepper.ts"],"sourcesContent":["import { ref, computed, type Ref, type ComputedRef } from 'vue'\n\nexport type StepStatus = 'completed' | 'current' | 'pending'\n\nexport interface UseStepperOptions {\n  /** Total number of steps. Ignored when `steps` array is provided. */\n  totalSteps?: number\n  /** Step items — `totalSteps` is derived from `steps.length` when provided. */\n  steps?: unknown[]\n  /** Initial step for uncontrolled usage. Defaults to 1. */\n  defaultStep?: number\n}\n\nexport interface UseStepperReturn {\n  /** Reactive current step (1-based). */\n  step: Ref<number>\n  /** Total number of steps. */\n  totalSteps: ComputedRef<number>\n  /** Whether the stepper is on the first step. */\n  isFirst: ComputedRef<boolean>\n  /** Whether the stepper is on the last step. */\n  isLast: ComputedRef<boolean>\n  /** Navigate to a specific step number. Clamps to valid range. */\n  goToStep: (step: number) => void\n  /** Advance to the next step. No-op on the last step. */\n  nextStep: () => void\n  /** Go back to the previous step. No-op on the first step. */\n  prevStep: () => void\n  /** Return to the first step. */\n  reset: () => void\n  /** Returns the display status for a given step number. */\n  getStepStatus: (step: number) => StepStatus\n  /**\n   * Pass as `@update:model-value` handler on the Stepper component.\n   * Keeps `step` in sync when the component changes step internally.\n   */\n  onStepChange: (step: number) => void\n}\n\n/**\n * Manages step navigation state for the Stepper component.\n *\n * @example\n * ```ts\n * const stepper = useStepper({ totalSteps: 4 })\n * ```\n * ```html\n * <Stepper :model-value=\"stepper.step\" :total-steps=\"stepper.totalSteps\" @update:model-value=\"stepper.onStepChange\">\n *   ...\n * </Stepper>\n * ```\n */\nexport function useStepper(options: UseStepperOptions = {}): UseStepperReturn {\n  const step = ref(options.defaultStep ?? 1)\n\n  const totalSteps = computed(() =>\n    options.steps ? options.steps.length : (options.totalSteps ?? 0)\n  )\n\n  const isFirst = computed(() => step.value <= 1)\n  const isLast = computed(() => totalSteps.value > 0 && step.value >= totalSteps.value)\n\n  function goToStep(n: number): void {\n    const max = totalSteps.value || Infinity\n    step.value = Math.max(1, Math.min(n, max))\n  }\n\n  function nextStep(): void {\n    if (!isLast.value) goToStep(step.value + 1)\n  }\n\n  function prevStep(): void {\n    if (!isFirst.value) goToStep(step.value - 1)\n  }\n\n  function reset(): void {\n    goToStep(1)\n  }\n\n  function getStepStatus(n: number): StepStatus {\n    if (n < step.value) return 'completed'\n    if (n === step.value) return 'current'\n    return 'pending'\n  }\n\n  function onStepChange(n: number): void {\n    goToStep(n)\n  }\n\n  return {\n    step,\n    totalSteps,\n    isFirst,\n    isLast,\n    goToStep,\n    nextStep,\n    prevStep,\n    reset,\n    getStepStatus,\n    onStepChange,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,SAAgB,WAAW,UAA6B,EAAE,EAAoB;CAC5E,MAAM,OAAO,IAAI,QAAQ,eAAe,EAAE;CAE1C,MAAM,aAAa,eACjB,QAAQ,QAAQ,QAAQ,MAAM,SAAU,QAAQ,cAAc,EAC/D;CAED,MAAM,UAAU,eAAe,KAAK,SAAS,EAAE;CAC/C,MAAM,SAAS,eAAe,WAAW,QAAQ,KAAK,KAAK,SAAS,WAAW,MAAM;CAErF,SAAS,SAAS,GAAiB;EACjC,MAAM,MAAM,WAAW,SAAS;AAChC,OAAK,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,IAAI,CAAC;;CAG5C,SAAS,WAAiB;AACxB,MAAI,CAAC,OAAO,MAAO,UAAS,KAAK,QAAQ,EAAE;;CAG7C,SAAS,WAAiB;AACxB,MAAI,CAAC,QAAQ,MAAO,UAAS,KAAK,QAAQ,EAAE;;CAG9C,SAAS,QAAc;AACrB,WAAS,EAAE;;CAGb,SAAS,cAAc,GAAuB;AAC5C,MAAI,IAAI,KAAK,MAAO,QAAO;AAC3B,MAAI,MAAM,KAAK,MAAO,QAAO;AAC7B,SAAO;;CAGT,SAAS,aAAa,GAAiB;AACrC,WAAS,EAAE;;AAGb,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/composables/useSwatchPicker.js

@@ -0,0 +1,31 @@
+import { computed, readonly, ref } from "vue";
+//#region src/composables/useSwatchPicker.ts
+function useSwatchPicker(options = {}) {
+	const _selectedColor = ref(options.defaultValue ?? "");
+	const hasSelection = computed(() => _selectedColor.value !== "");
+	function setColor(hex) {
+		_selectedColor.value = hex;
+		options.onChange?.(hex);
+	}
+	function clearSelection() {
+		_selectedColor.value = "";
+	}
+	function isSelected(hex) {
+		return _selectedColor.value === hex;
+	}
+	function onColorChange(hex) {
+		setColor(hex);
+	}
+	return {
+		selectedColor: readonly(_selectedColor),
+		hasSelection,
+		setColor,
+		clearSelection,
+		isSelected,
+		onColorChange
+	};
+}
+//#endregion
+export { useSwatchPicker };
+
+//# sourceMappingURL=useSwatchPicker.js.map

package/dist/composables/useSwatchPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSwatchPicker.js","names":[],"sources":["../../src/composables/useSwatchPicker.ts"],"sourcesContent":["import { ref, computed, readonly, type Ref, type ComputedRef } from 'vue'\n\nexport interface UseSwatchPickerOptions {\n  /** Initial selected color as a hex string (e.g. '#ff0000'). */\n  defaultValue?: string\n  /** Fires when a swatch is selected with the new hex color. */\n  onChange?: (hex: string) => void\n}\n\nexport interface UseSwatchPickerReturn {\n  /** The currently selected color as a hex string. */\n  selectedColor: Readonly<Ref<string>>\n  /** True when a color is selected (non-empty). */\n  hasSelection: ComputedRef<boolean>\n  /** Select a color by hex string. */\n  setColor: (hex: string) => void\n  /** Clear the selection. */\n  clearSelection: () => void\n  /** Returns true if the given hex string is the currently selected color. */\n  isSelected: (hex: string) => boolean\n  /** Pass as `@update:model-value` on the ColorSwatchPicker component. */\n  onColorChange: (hex: string) => void\n}\n\nexport function useSwatchPicker(options: UseSwatchPickerOptions = {}): UseSwatchPickerReturn {\n  const _selectedColor = ref(options.defaultValue ?? '')\n\n  const hasSelection = computed(() => _selectedColor.value !== '')\n\n  function setColor(hex: string): void {\n    _selectedColor.value = hex\n    options.onChange?.(hex)\n  }\n\n  function clearSelection(): void {\n    _selectedColor.value = ''\n  }\n\n  function isSelected(hex: string): boolean {\n    return _selectedColor.value === hex\n  }\n\n  function onColorChange(hex: string): void {\n    setColor(hex)\n  }\n\n  return {\n    selectedColor: readonly(_selectedColor),\n    hasSelection,\n    setColor,\n    clearSelection,\n    isSelected,\n    onColorChange,\n  }\n}\n"],"mappings":";;AAwBA,SAAgB,gBAAgB,UAAkC,EAAE,EAAyB;CAC3F,MAAM,iBAAiB,IAAI,QAAQ,gBAAgB,GAAG;CAEtD,MAAM,eAAe,eAAe,eAAe,UAAU,GAAG;CAEhE,SAAS,SAAS,KAAmB;AACnC,iBAAe,QAAQ;AACvB,UAAQ,WAAW,IAAI;;CAGzB,SAAS,iBAAuB;AAC9B,iBAAe,QAAQ;;CAGzB,SAAS,WAAW,KAAsB;AACxC,SAAO,eAAe,UAAU;;CAGlC,SAAS,cAAc,KAAmB;AACxC,WAAS,IAAI;;AAGf,QAAO;EACL,eAAe,SAAS,eAAe;EACvC;EACA;EACA;EACA;EACA;EACD"}

package/dist/composables/useTabs.js

@@ -0,0 +1,34 @@
+import { ref } from "vue";
+//#region src/composables/useTabs.ts
+/**
+* Manages active tab state for the Tabs component.
+*
+* @example
+* ```ts
+* const tabs = useTabs({ defaultTab: 'overview' })
+* ```
+* ```html
+* <Tabs :model-value="tabs.activeTab" @update:model-value="tabs.onTabChange">
+*   <Tab value="overview">Overview</Tab>
+*   <Tab value="settings">Settings</Tab>
+* </Tabs>
+* ```
+*/
+function useTabs(options = {}) {
+	const activeTab = ref(options.defaultTab);
+	function setTab(value) {
+		activeTab.value = value;
+	}
+	function onTabChange(value) {
+		activeTab.value = value;
+	}
+	return {
+		activeTab,
+		setTab,
+		onTabChange
+	};
+}
+//#endregion
+export { useTabs };
+
+//# sourceMappingURL=useTabs.js.map

package/dist/composables/useTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabs.js","names":[],"sources":["../../src/composables/useTabs.ts"],"sourcesContent":["import { ref, type Ref } from 'vue'\n\nexport interface UseTabsOptions {\n  /** Initial active tab value. */\n  defaultTab?: string\n}\n\nexport interface UseTabsReturn {\n  /** Reactive active tab value. */\n  activeTab: Ref<string | undefined>\n  /** Set the active tab. */\n  setTab: (value: string) => void\n  /**\n   * Pass as `@update:model-value` handler on the Tabs component.\n   * Keeps `activeTab` in sync when the component changes tabs internally.\n   */\n  onTabChange: (value: string) => void\n}\n\n/**\n * Manages active tab state for the Tabs component.\n *\n * @example\n * ```ts\n * const tabs = useTabs({ defaultTab: 'overview' })\n * ```\n * ```html\n * <Tabs :model-value=\"tabs.activeTab\" @update:model-value=\"tabs.onTabChange\">\n *   <Tab value=\"overview\">Overview</Tab>\n *   <Tab value=\"settings\">Settings</Tab>\n * </Tabs>\n * ```\n */\nexport function useTabs(options: UseTabsOptions = {}): UseTabsReturn {\n  const activeTab = ref<string | undefined>(options.defaultTab)\n\n  function setTab(value: string): void {\n    activeTab.value = value\n  }\n\n  function onTabChange(value: string): void {\n    activeTab.value = value\n  }\n\n  return {\n    activeTab,\n    setTab,\n    onTabChange,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiCA,SAAgB,QAAQ,UAA0B,EAAE,EAAiB;CACnE,MAAM,YAAY,IAAwB,QAAQ,WAAW;CAE7D,SAAS,OAAO,OAAqB;AACnC,YAAU,QAAQ;;CAGpB,SAAS,YAAY,OAAqB;AACxC,YAAU,QAAQ;;AAGpB,QAAO;EACL;EACA;EACA;EACD"}

package/dist/composables/useTree.js

@@ -0,0 +1,88 @@
+import { ref } from "vue";
+//#region src/composables/useTree.ts
+/**
+* Manages selection and expansion state for the Tree component.
+*
+* @example
+* ```ts
+* const tree = useTree({ multiple: false, defaultExpanded: ['root'] })
+* ```
+* ```html
+* <Tree
+*   :model-value="tree.selected"
+*   :expanded="tree.expanded"
+*   @update:model-value="tree.onSelectionChange"
+*   @update:expanded="tree.onExpandedChange"
+* >
+*   ...
+* </Tree>
+* ```
+*/
+function useTree(options = {}) {
+	const multiple = options.multiple ?? false;
+	const selected = ref(options.defaultSelected ?? (multiple ? [] : void 0));
+	const expanded = ref(options.defaultExpanded ? [...options.defaultExpanded] : []);
+	function isSelected(key) {
+		if (Array.isArray(selected.value)) return selected.value.includes(key);
+		return selected.value === key;
+	}
+	function select(key) {
+		if (multiple) {
+			const current = selected.value ?? [];
+			if (!current.includes(key)) selected.value = [...current, key];
+		} else selected.value = key;
+	}
+	function deselect(key) {
+		if (multiple) selected.value = (selected.value ?? []).filter((k) => k !== key);
+		else if (selected.value === key) selected.value = void 0;
+	}
+	function toggle(key) {
+		if (isSelected(key)) deselect(key);
+		else select(key);
+	}
+	function isExpanded(key) {
+		return expanded.value.includes(key);
+	}
+	function expand(key) {
+		if (!isExpanded(key)) expanded.value = [...expanded.value, key];
+	}
+	function collapse(key) {
+		expanded.value = expanded.value.filter((k) => k !== key);
+	}
+	function toggleExpand(key) {
+		if (isExpanded(key)) collapse(key);
+		else expand(key);
+	}
+	function expandAll(keys) {
+		expanded.value = [...new Set([...expanded.value, ...keys])];
+	}
+	function collapseAll() {
+		expanded.value = [];
+	}
+	function onSelectionChange(value) {
+		selected.value = value;
+	}
+	function onExpandedChange(keys) {
+		expanded.value = keys;
+	}
+	return {
+		selected,
+		expanded,
+		isSelected,
+		select,
+		deselect,
+		toggle,
+		isExpanded,
+		expand,
+		collapse,
+		toggleExpand,
+		expandAll,
+		collapseAll,
+		onSelectionChange,
+		onExpandedChange
+	};
+}
+//#endregion
+export { useTree };
+
+//# sourceMappingURL=useTree.js.map

package/dist/composables/useTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTree.js","names":[],"sources":["../../src/composables/useTree.ts"],"sourcesContent":["import { ref, type Ref } from 'vue'\n\nexport type TreeValue = string | string[] | undefined\n\nexport interface UseTreeOptions {\n  /** Enable multi-selection. Defaults to false. */\n  multiple?: boolean\n  /** Initial selected node key(s). */\n  defaultSelected?: TreeValue\n  /** Initial expanded node keys. */\n  defaultExpanded?: string[]\n}\n\nexport interface UseTreeReturn {\n  /** Reactive selected node key(s). String in single mode, string[] in multiple mode. */\n  selected: Ref<TreeValue>\n  /** Reactive array of expanded node keys. */\n  expanded: Ref<string[]>\n  /** Whether a given node is currently selected. */\n  isSelected: (key: string) => boolean\n  /** Select a node. In single mode, replaces the current selection. */\n  select: (key: string) => void\n  /** Deselect a node. */\n  deselect: (key: string) => void\n  /** Toggle a node's selection state. */\n  toggle: (key: string) => void\n  /** Whether a given node is currently expanded. */\n  isExpanded: (key: string) => boolean\n  /** Expand a node. */\n  expand: (key: string) => void\n  /** Collapse a node. */\n  collapse: (key: string) => void\n  /** Toggle a node's expanded state. */\n  toggleExpand: (key: string) => void\n  /** Expand all provided node keys. */\n  expandAll: (keys: string[]) => void\n  /** Collapse all expanded nodes. */\n  collapseAll: () => void\n  /**\n   * Pass as `@update:model-value` on the Tree component.\n   * Keeps `selected` in sync when the component changes selection internally.\n   */\n  onSelectionChange: (value: TreeValue) => void\n  /**\n   * Pass as `@update:expanded` on the Tree component.\n   * Keeps `expanded` in sync when the component changes expanded state internally.\n   */\n  onExpandedChange: (keys: string[]) => void\n}\n\n/**\n * Manages selection and expansion state for the Tree component.\n *\n * @example\n * ```ts\n * const tree = useTree({ multiple: false, defaultExpanded: ['root'] })\n * ```\n * ```html\n * <Tree\n *   :model-value=\"tree.selected\"\n *   :expanded=\"tree.expanded\"\n *   @update:model-value=\"tree.onSelectionChange\"\n *   @update:expanded=\"tree.onExpandedChange\"\n * >\n *   ...\n * </Tree>\n * ```\n */\nexport function useTree(options: UseTreeOptions = {}): UseTreeReturn {\n  const multiple = options.multiple ?? false\n\n  const selected = ref<TreeValue>(\n    options.defaultSelected ?? (multiple ? [] : undefined)\n  )\n  const expanded = ref<string[]>(options.defaultExpanded ? [...options.defaultExpanded] : [])\n\n  function isSelected(key: string): boolean {\n    if (Array.isArray(selected.value)) return selected.value.includes(key)\n    return selected.value === key\n  }\n\n  function select(key: string): void {\n    if (multiple) {\n      const current = (selected.value as string[]) ?? []\n      if (!current.includes(key)) selected.value = [...current, key]\n    } else {\n      selected.value = key\n    }\n  }\n\n  function deselect(key: string): void {\n    if (multiple) {\n      selected.value = ((selected.value as string[]) ?? []).filter(k => k !== key)\n    } else if (selected.value === key) {\n      selected.value = undefined\n    }\n  }\n\n  function toggle(key: string): void {\n    if (isSelected(key)) deselect(key)\n    else select(key)\n  }\n\n  function isExpanded(key: string): boolean {\n    return expanded.value.includes(key)\n  }\n\n  function expand(key: string): void {\n    if (!isExpanded(key)) expanded.value = [...expanded.value, key]\n  }\n\n  function collapse(key: string): void {\n    expanded.value = expanded.value.filter(k => k !== key)\n  }\n\n  function toggleExpand(key: string): void {\n    if (isExpanded(key)) collapse(key)\n    else expand(key)\n  }\n\n  function expandAll(keys: string[]): void {\n    expanded.value = [...new Set([...expanded.value, ...keys])]\n  }\n\n  function collapseAll(): void {\n    expanded.value = []\n  }\n\n  function onSelectionChange(value: TreeValue): void {\n    selected.value = value\n  }\n\n  function onExpandedChange(keys: string[]): void {\n    expanded.value = keys\n  }\n\n  return {\n    selected,\n    expanded,\n    isSelected,\n    select,\n    deselect,\n    toggle,\n    isExpanded,\n    expand,\n    collapse,\n    toggleExpand,\n    expandAll,\n    collapseAll,\n    onSelectionChange,\n    onExpandedChange,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoEA,SAAgB,QAAQ,UAA0B,EAAE,EAAiB;CACnE,MAAM,WAAW,QAAQ,YAAY;CAErC,MAAM,WAAW,IACf,QAAQ,oBAAoB,WAAW,EAAE,GAAG,KAAA,GAC7C;CACD,MAAM,WAAW,IAAc,QAAQ,kBAAkB,CAAC,GAAG,QAAQ,gBAAgB,GAAG,EAAE,CAAC;CAE3F,SAAS,WAAW,KAAsB;AACxC,MAAI,MAAM,QAAQ,SAAS,MAAM,CAAE,QAAO,SAAS,MAAM,SAAS,IAAI;AACtE,SAAO,SAAS,UAAU;;CAG5B,SAAS,OAAO,KAAmB;AACjC,MAAI,UAAU;GACZ,MAAM,UAAW,SAAS,SAAsB,EAAE;AAClD,OAAI,CAAC,QAAQ,SAAS,IAAI,CAAE,UAAS,QAAQ,CAAC,GAAG,SAAS,IAAI;QAE9D,UAAS,QAAQ;;CAIrB,SAAS,SAAS,KAAmB;AACnC,MAAI,SACF,UAAS,SAAU,SAAS,SAAsB,EAAE,EAAE,QAAO,MAAK,MAAM,IAAI;WACnE,SAAS,UAAU,IAC5B,UAAS,QAAQ,KAAA;;CAIrB,SAAS,OAAO,KAAmB;AACjC,MAAI,WAAW,IAAI,CAAE,UAAS,IAAI;MAC7B,QAAO,IAAI;;CAGlB,SAAS,WAAW,KAAsB;AACxC,SAAO,SAAS,MAAM,SAAS,IAAI;;CAGrC,SAAS,OAAO,KAAmB;AACjC,MAAI,CAAC,WAAW,IAAI,CAAE,UAAS,QAAQ,CAAC,GAAG,SAAS,OAAO,IAAI;;CAGjE,SAAS,SAAS,KAAmB;AACnC,WAAS,QAAQ,SAAS,MAAM,QAAO,MAAK,MAAM,IAAI;;CAGxD,SAAS,aAAa,KAAmB;AACvC,MAAI,WAAW,IAAI,CAAE,UAAS,IAAI;MAC7B,QAAO,IAAI;;CAGlB,SAAS,UAAU,MAAsB;AACvC,WAAS,QAAQ,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,SAAS,OAAO,GAAG,KAAK,CAAC,CAAC;;CAG7D,SAAS,cAAoB;AAC3B,WAAS,QAAQ,EAAE;;CAGrB,SAAS,kBAAkB,OAAwB;AACjD,WAAS,QAAQ;;CAGnB,SAAS,iBAAiB,MAAsB;AAC9C,WAAS,QAAQ;;AAGnB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}