@vizejs/ui 0.387.0 → 0.389.0

package/dist/toggle-group-DybU9N7k.mjs

@@ -0,0 +1,523 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { createContext } from "./context.mjs";
+import { useControllableState } from "./controllable-state.mjs";
+import { computed, createBlock, defineComponent, guardReactiveProps, nextTick, normalizeProps, onUnmounted, openBlock, renderSlot, resolveDynamicComponent, shallowRef, unref, useTemplateRef, watch, withCtx } from "vue";
+//#region src/families/selection/toggle-group/toggle-group-context.ts
+const toggleGroupContext = createContext("ToggleGroup");
+//#endregion
+//#region src/families/selection/toggle-group/toggle-group-value.ts
+function uniqueValues(values) {
+	return [...new Set(values)];
+}
+/** Return the empty model value for the requested selection mode. */
+function emptyToggleGroupValue(type) {
+	return type === "multiple" ? [] : null;
+}
+/** Normalize public input into the model shape owned by the active selection mode. */
+function normalizeToggleGroupValue(value, type) {
+	if (value === void 0 || value === null) return emptyToggleGroupValue(type);
+	if (type === "single") return Array.isArray(value) ? value[0] ?? null : value;
+	return uniqueValues(Array.isArray(value) ? value : [value]);
+}
+/** Return selected values as an immutable array for item membership checks. */
+function getToggleGroupPressedValues(value, type) {
+	const normalized = normalizeToggleGroupValue(value, type);
+	if (normalized === null) return [];
+	return typeof normalized === "string" ? [normalized] : normalized;
+}
+/** Test whether a normalized group value currently includes one item value. */
+function hasToggleGroupValue(value, type, itemValue) {
+	return getToggleGroupPressedValues(value, type).includes(itemValue);
+}
+/** Compare group values after applying mode-specific normalization. */
+function toggleGroupValueEquals(left, right, type) {
+	const leftValues = getToggleGroupPressedValues(left, type);
+	const rightValues = getToggleGroupPressedValues(right, type);
+	return leftValues.length === rightValues.length && leftValues.every((value, index) => value === rightValues[index]);
+}
+/** Resolve the next value after one item is requested pressed or unpressed. */
+function getNextToggleGroupValue(current, type, itemValue, pressed = !hasToggleGroupValue(current, type, itemValue)) {
+	if (type === "single") {
+		if (pressed) return itemValue;
+		return hasToggleGroupValue(current, type, itemValue) ? null : current;
+	}
+	const values = getToggleGroupPressedValues(current, type);
+	if (pressed) return values.includes(itemValue) ? values : [...values, itemValue];
+	return values.filter((value) => value !== itemValue);
+}
+//#endregion
+//#region src/families/selection/toggle-group/toggle-group.vue
+var toggle_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "toggle-group",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		type: {
+			type: String,
+			required: false,
+			default: "single"
+		},
+		modelValue: {
+			type: [
+				String,
+				Array,
+				null
+			],
+			required: false,
+			default: () => void 0
+		},
+		defaultValue: {
+			type: [
+				String,
+				Array,
+				null
+			],
+			required: false,
+			default: () => void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		loop: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		rovingFocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const element = useTemplateRef("element");
+		const items = /* @__PURE__ */ new Set();
+		const typeState = computed(() => __props.type);
+		const disabledState = computed(() => __props.disabled);
+		const orientationState = computed(() => __props.orientation);
+		const rovingFocusState = computed(() => __props.rovingFocus);
+		const valueState = useControllableState({
+			value: () => __props.modelValue === void 0 ? void 0 : normalizeToggleGroupValue(__props.modelValue, typeState.value),
+			defaultValue: () => normalizeToggleGroupValue(__props.defaultValue, typeState.value),
+			equals: (left, right) => toggleGroupValueEquals(left, right, typeState.value),
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const value = computed(() => normalizeToggleGroupValue(valueState.value.value, typeState.value));
+		const pressedValues = computed(() => getToggleGroupPressedValues(value.value, typeState.value));
+		const activeValue = shallowRef(pressedValues.value[0] ?? null);
+		const state = computed(() => {
+			if (disabledState.value) return "disabled";
+			return pressedValues.value.length === 0 ? "empty" : "selected";
+		});
+		const dataValue = computed(() => pressedValues.value.length === 0 ? void 0 : pressedValues.value.join(" "));
+		const slotState = computed(() => ({
+			disabled: disabledState.value,
+			orientation: orientationState.value,
+			pressedValues: pressedValues.value,
+			state: state.value,
+			type: typeState.value,
+			value: value.value
+		}));
+		watch(element, (root, _previous, onCleanup) => {
+			const form = getElementNode(root)?.closest("form");
+			if (form == null) return;
+			const onReset = () => {
+				if (!valueState.controlled.value) valueState.reset();
+			};
+			form.addEventListener("reset", onReset);
+			onCleanup(() => form.removeEventListener("reset", onReset));
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		watch([
+			disabledState,
+			orientationState,
+			pressedValues,
+			rovingFocusState
+		], () => syncActiveValue(), {
+			flush: "post",
+			immediate: true
+		});
+		function getElementNode(target) {
+			if (target instanceof Element) return target;
+			if (target != null && target.$el instanceof Element) return target.$el;
+			return null;
+		}
+		function focusTarget(target, options) {
+			const node = getElementNode(target);
+			if (node instanceof HTMLElement) {
+				node.focus(options);
+				return true;
+			}
+			if (target != null && "focus" in target && typeof target.focus === "function") {
+				target.focus(options);
+				return true;
+			}
+			return false;
+		}
+		function getOrderedItems() {
+			const enabled = [...items].filter((item) => !item.disabled.value);
+			const root = getElementNode(element.value);
+			if (root == null) return enabled;
+			const positions = /* @__PURE__ */ new Map();
+			root.querySelectorAll("[data-vize-ui=\"toggle-group-item\"]").forEach((node, index) => positions.set(node, index));
+			return enabled.sort((left, right) => {
+				return (positions.get(getElementNode(left.element.value) ?? root) ?? enabled.length) - (positions.get(getElementNode(right.element.value) ?? root) ?? enabled.length);
+			});
+		}
+		function syncActiveValue() {
+			if (disabledState.value || !rovingFocusState.value) {
+				activeValue.value = null;
+				return;
+			}
+			const enabled = getOrderedItems();
+			const activeItem = enabled.find((item) => item.value() === activeValue.value);
+			const activeIsPendingPressed = activeValue.value !== null && pressedValues.value.includes(activeValue.value);
+			if (activeItem !== void 0 || activeIsPendingPressed) return;
+			activeValue.value = pressedValues.value.find((selected) => enabled.some((item) => item.value() === selected)) ?? enabled[0]?.value() ?? null;
+		}
+		function focusItem(item, options) {
+			activeValue.value = item.value();
+			focusTarget(item.element.value, options);
+		}
+		function focus(options) {
+			syncActiveValue();
+			const enabled = getOrderedItems();
+			const target = pressedValues.value.map((selected) => enabled.find((item) => item.value() === selected)).find((item) => item !== void 0) ?? enabled.find((item) => item.value() === activeValue.value) ?? enabled[0];
+			if (target !== void 0) focusItem(target, options);
+		}
+		function moveFocus(fromValue, intent, options) {
+			if (disabledState.value || !rovingFocusState.value) return false;
+			const enabled = getOrderedItems();
+			if (enabled.length === 0) return false;
+			const fromIndex = enabled.findIndex((item) => item.value() === fromValue);
+			const activeIndex = enabled.findIndex((item) => item.value() === activeValue.value);
+			const currentIndex = fromIndex >= 0 ? fromIndex : activeIndex;
+			const rawIndex = intent === "first" ? 0 : intent === "last" ? enabled.length - 1 : currentIndex < 0 ? intent === "next" ? 0 : enabled.length - 1 : currentIndex + (intent === "next" ? 1 : -1);
+			const target = enabled[__props.loop ? (rawIndex + enabled.length) % enabled.length : rawIndex];
+			if (target === void 0) return false;
+			focusItem(target, options);
+			return true;
+		}
+		function getItemState(itemValue, itemDisabled) {
+			if (itemDisabled) return "disabled";
+			return hasToggleGroupValue(value.value, typeState.value, itemValue) ? "pressed" : "unpressed";
+		}
+		function getCurrentValue() {
+			return value.value;
+		}
+		function requestItemToggle(itemValue, nativeEvent) {
+			const previous = getCurrentValue();
+			const next = getNextToggleGroupValue(previous, typeState.value, itemValue);
+			setActiveValue(itemValue);
+			const changed = valueState.set(next);
+			if (changed) emit("change", next, previous, nativeEvent);
+			return changed;
+		}
+		function setValue(next) {
+			const normalized = normalizeToggleGroupValue(next, typeState.value);
+			const changed = valueState.set(normalized);
+			activeValue.value = getToggleGroupPressedValues(normalized, typeState.value)[0] ?? activeValue.value;
+			return changed;
+		}
+		function toggleValue(itemValue, pressed) {
+			const next = getNextToggleGroupValue(value.value, typeState.value, itemValue, pressed);
+			const changed = valueState.set(next);
+			activeValue.value = getToggleGroupPressedValues(next, typeState.value)[0] ?? itemValue;
+			return changed;
+		}
+		function registerItem(item) {
+			items.add(item);
+			syncActiveValue();
+			nextTick(syncActiveValue);
+			return () => {
+				const removedValue = item.value();
+				items.delete(item);
+				if (activeValue.value === removedValue) activeValue.value = null;
+				syncActiveValue();
+			};
+		}
+		function setActiveValue(itemValue) {
+			if (!disabledState.value) activeValue.value = itemValue;
+		}
+		toggleGroupContext.provide({
+			activeValue,
+			disabled: disabledState,
+			getItemState,
+			isPressed: (itemValue) => hasToggleGroupValue(value.value, typeState.value, itemValue),
+			moveFocus,
+			orientation: orientationState,
+			pressedValues,
+			registerItem,
+			requestItemToggle,
+			rovingFocus: rovingFocusState,
+			setActiveValue,
+			state,
+			syncActiveValue,
+			type: typeState,
+			value
+		});
+		__expose({
+			disabled: disabledState,
+			element,
+			focus,
+			orientation: orientationState,
+			pressedValues,
+			reset: valueState.reset,
+			setValue,
+			state,
+			toggleValue,
+			type: typeState,
+			value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				ref_key: "element",
+				ref: element,
+				role: "group",
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-disabled": disabledState.value ? "true" : void 0,
+				"data-vize-ui": "toggle-group",
+				part: "root",
+				"data-state": state.value,
+				"data-disabled": disabledState.value ? "true" : void 0,
+				"data-orientation": orientationState.value,
+				"data-type": typeState.value,
+				"data-value": dataValue.value
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 8, [
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-disabled",
+				"data-state",
+				"data-disabled",
+				"data-orientation",
+				"data-type",
+				"data-value"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-fb4e724b"]]);
+//#endregion
+//#region src/families/selection/toggle-group/toggle-group-item.vue
+var toggle_group_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "toggle-group-item",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "button"
+		},
+		native: {
+			type: Boolean,
+			required: false,
+			default: () => void 0
+		},
+		type: {
+			type: String,
+			required: false,
+			default: "button"
+		},
+		value: {
+			type: String,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: ["press"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		function getToggleGroupKeyboardAction(key, phase) {
+			if (key === "Enter") return phase === "keydown" ? "activate" : "ignore";
+			if (key === " ") return phase === "keydown" ? "prevent" : "activate";
+			return "ignore";
+		}
+		const emit = __emit;
+		const context = toggleGroupContext.use();
+		const element = useTemplateRef("element");
+		const isNativeButton = computed(() => __props.native ?? __props.as === "button");
+		const pressed = computed(() => context.isPressed(__props.value));
+		const itemDisabled = computed(() => context.disabled.value || __props.disabled);
+		const itemState = computed(() => context.getItemState(__props.value, itemDisabled.value));
+		const tabIndex = computed(() => {
+			if (itemDisabled.value) return isNativeButton.value ? void 0 : -1;
+			if (!context.rovingFocus.value) return isNativeButton.value ? void 0 : 0;
+			return context.activeValue.value === __props.value ? 0 : -1;
+		});
+		const slotState = computed(() => ({
+			disabled: itemDisabled.value,
+			orientation: context.orientation.value,
+			pressed: pressed.value,
+			state: itemState.value,
+			value: __props.value
+		}));
+		const unregister = context.registerItem({
+			disabled: itemDisabled,
+			element,
+			value: () => __props.value
+		});
+		watch([itemDisabled, () => __props.value], () => context.syncActiveValue(), { flush: "post" });
+		onUnmounted(unregister);
+		function onClick(event) {
+			if (itemDisabled.value) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				return;
+			}
+			const nextPressed = !pressed.value;
+			if (context.requestItemToggle(__props.value, event)) emit("press", __props.value, nextPressed, event);
+		}
+		function onFocus() {
+			if (!itemDisabled.value) context.setActiveValue(__props.value);
+		}
+		function getNavigationIntent(key) {
+			if (key === "Home") return "first";
+			if (key === "End") return "last";
+			if (context.orientation.value === "horizontal") {
+				if (key === "ArrowRight") return "next";
+				if (key === "ArrowLeft") return "previous";
+			} else {
+				if (key === "ArrowDown") return "next";
+				if (key === "ArrowUp") return "previous";
+			}
+			return null;
+		}
+		function onKeyboard(event, phase) {
+			if (phase === "keydown") {
+				const intent = getNavigationIntent(event.key);
+				if (intent !== null) {
+					event.preventDefault();
+					context.moveFocus(__props.value, intent);
+					return;
+				}
+			}
+			if (isNativeButton.value) return;
+			const action = getToggleGroupKeyboardAction(event.key, phase);
+			if (action === "ignore") return;
+			event.preventDefault();
+			if (itemDisabled.value) {
+				event.stopImmediatePropagation();
+				return;
+			}
+			if (action === "activate" && event.currentTarget instanceof HTMLElement) event.currentTarget.click();
+		}
+		function onKeydown(event) {
+			onKeyboard(event, "keydown");
+		}
+		function onKeyup(event) {
+			onKeyboard(event, "keyup");
+		}
+		function focusTarget(target, options) {
+			if (typeof target === "object" && target !== null && "focus" in target && typeof target.focus === "function") target.focus(options);
+		}
+		function focus(options) {
+			focusTarget(element.value, options);
+		}
+		__expose({
+			disabled: itemDisabled,
+			element,
+			focus,
+			orientation: computed(() => context.orientation.value),
+			pressed,
+			state: itemState,
+			value: __props.value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				ref_key: "element",
+				ref: element,
+				type: isNativeButton.value ? __props.type : void 0,
+				disabled: isNativeButton.value ? itemDisabled.value : void 0,
+				role: isNativeButton.value ? void 0 : "button",
+				tabindex: tabIndex.value,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-disabled": itemDisabled.value && !isNativeButton.value ? "true" : void 0,
+				"aria-pressed": pressed.value ? "true" : "false",
+				"data-vize-ui": "toggle-group-item",
+				part: "item",
+				"data-state": itemState.value,
+				"data-pressed": pressed.value ? "true" : "false",
+				"data-disabled": itemDisabled.value ? "true" : void 0,
+				"data-orientation": unref(context).orientation.value,
+				"data-value": __props.value,
+				onClick,
+				onFocus,
+				onKeydown,
+				onKeyup
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 40, [
+				"type",
+				"disabled",
+				"role",
+				"tabindex",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-disabled",
+				"aria-pressed",
+				"data-state",
+				"data-pressed",
+				"data-disabled",
+				"data-orientation",
+				"data-value"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-12f72915"]]);
+//#endregion
+export { toggle_group_default as n, toggle_group_item_default as t };

package/dist/toggle-group.d.mts

@@ -0,0 +1,2 @@
+import { a as ToggleGroupItemSlotState, c as ToggleGroupSlotState, d as ToggleGroupValue, i as ToggleGroupItemExpose, l as ToggleGroupState, n as _default, o as ToggleGroupItemState, r as ToggleGroupExpose, s as ToggleGroupOrientation, t as _default$1, u as ToggleGroupType } from "./toggle-group-DO7eGEs3.mjs";
+export { _default as ToggleGroup, type ToggleGroupExpose, _default$1 as ToggleGroupItem, type ToggleGroupItemExpose, type ToggleGroupItemSlotState, type ToggleGroupItemState, type ToggleGroupOrientation, type ToggleGroupSlotState, type ToggleGroupState, type ToggleGroupType, type ToggleGroupValue };

package/dist/toggle-group.mjs

@@ -0,0 +1,2 @@
+import { n as toggle_group_default, t as toggle_group_item_default } from "./toggle-group-DybU9N7k.mjs";
+export { toggle_group_default as ToggleGroup, toggle_group_item_default as ToggleGroupItem };

package/dist/toggle.d.mts

@@ -0,0 +1,2 @@
+import { Gi as ToggleExpose, Ki as ToggleSlotState, Wi as _default } from "./announcer-CuBryPW9.mjs";
+export { _default as Toggle, type ToggleExpose, type ToggleSlotState };

package/dist/toggle.mjs

@@ -0,0 +1,2 @@
+import { t as toggle_button_default } from "./toggle-CBTXzwze.mjs";
+export { toggle_button_default as Toggle };