@vizejs/ui 0.386.0 → 0.388.0

package/dist/button-group-DyQbTCnY.mjs

@@ -0,0 +1,418 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { createContext } from "./context.mjs";
+import { computed, createBlock, defineComponent, guardReactiveProps, nextTick, normalizeProps, onUnmounted, openBlock, renderSlot, resolveDynamicComponent, shallowRef, unref, useTemplateRef, watch, withCtx } from "vue";
+//#region src/families/actions/button-group/button-group-context.ts
+const buttonGroupContext = createContext("ButtonGroup");
+//#endregion
+//#region src/families/actions/button-group/button-group.vue
+var button_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "button-group",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		role: {
+			type: String,
+			required: false,
+			default: "group"
+		},
+		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: () => void 0
+		},
+		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 }) {
+		const emit = __emit;
+		const element = useTemplateRef("element");
+		const items = /* @__PURE__ */ new Set();
+		const activeValue = shallowRef(null);
+		const roleState = computed(() => __props.role);
+		const disabledState = computed(() => __props.disabled);
+		const orientationState = computed(() => __props.orientation);
+		const rovingFocusState = computed(() => __props.rovingFocus ?? roleState.value === "toolbar");
+		const state = computed(() => disabledState.value ? "disabled" : "idle");
+		const slotState = computed(() => ({
+			disabled: disabledState.value,
+			orientation: orientationState.value,
+			role: roleState.value,
+			rovingFocus: rovingFocusState.value,
+			state: state.value
+		}));
+		watch([
+			disabledState,
+			orientationState,
+			roleState,
+			rovingFocusState
+		], () => syncActiveValue(), {
+			flush: "post",
+			immediate: true
+		});
+		function getElementNode(target) {
+			if (typeof Element !== "undefined" && target instanceof Element) return target;
+			if (typeof Element !== "undefined" && target != null && "$el" in target && target.$el instanceof Element) return target.$el;
+			return null;
+		}
+		function focusTarget(target, options) {
+			const node = getElementNode(target);
+			if (typeof HTMLElement !== "undefined" && 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=\"button-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 validateItemValue(item) {
+			const itemValue = item.value();
+			for (const registered of items) if (registered !== item && registered.value() === itemValue) throw new Error("VIZE_UI_BUTTON_GROUP_VALUE_DUPLICATE");
+		}
+		function syncActiveValue(item) {
+			if (item !== void 0) validateItemValue(item);
+			if (disabledState.value || !rovingFocusState.value) {
+				activeValue.value = null;
+				return;
+			}
+			const enabled = getOrderedItems();
+			if (enabled.some((item) => item.value() === activeValue.value)) return;
+			activeValue.value = 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 = enabled.find((item) => item.value() === activeValue.value) ?? enabled[0];
+			if (target !== void 0) focusItem(target, options);
+		}
+		function focusValue(value, options) {
+			const target = getOrderedItems().find((item) => item.value() === value);
+			if (target === void 0) return false;
+			focusItem(target, options);
+			return true;
+		}
+		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(itemDisabled) {
+			return itemDisabled ? "disabled" : "idle";
+		}
+		function registerItem(item) {
+			validateItemValue(item);
+			items.add(item);
+			syncActiveValue();
+			nextTick(syncActiveValue);
+			return () => {
+				const removedValue = item.value();
+				items.delete(item);
+				if (activeValue.value === removedValue) activeValue.value = null;
+				syncActiveValue();
+			};
+		}
+		function requestItemPress(value, nativeEvent) {
+			if (!disabledState.value) emit("press", value, nativeEvent);
+		}
+		function setActiveValue(value) {
+			if (!disabledState.value) activeValue.value = value;
+		}
+		const context = buttonGroupContext.provide({
+			activeValue,
+			disabled: disabledState,
+			getItemState,
+			moveFocus,
+			orientation: orientationState,
+			registerItem,
+			requestItemPress,
+			role: roleState,
+			rovingFocus: rovingFocusState,
+			setActiveValue,
+			state,
+			syncActiveValue
+		});
+		__expose({
+			activeValue,
+			disabled: disabledState,
+			element,
+			focus,
+			focusValue,
+			orientation: orientationState,
+			role: roleState,
+			rovingFocus: rovingFocusState,
+			state
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				ref_key: "element",
+				ref: element,
+				role: unref(context).role.value,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-orientation": unref(context).role.value === "toolbar" ? orientationState.value : void 0,
+				"aria-disabled": disabledState.value ? "true" : void 0,
+				"data-vize-ui": "button-group",
+				part: "root",
+				"data-state": state.value,
+				"data-disabled": disabledState.value ? "true" : void 0,
+				"data-orientation": orientationState.value,
+				"data-roving-focus": rovingFocusState.value ? "true" : void 0,
+				"data-role": unref(context).role.value
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 8, [
+				"role",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-orientation",
+				"aria-disabled",
+				"data-state",
+				"data-disabled",
+				"data-orientation",
+				"data-roving-focus",
+				"data-role"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-9fb66a1d"]]);
+//#endregion
+//#region src/families/actions/button-group/button-group-item.vue
+var button_group_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "button-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 getButtonGroupKeyboardAction(key, phase) {
+			if (key === "Enter") return phase === "keydown" ? "activate" : "ignore";
+			if (key === " ") return phase === "keydown" ? "prevent" : "activate";
+			return "ignore";
+		}
+		const emit = __emit;
+		const context = buttonGroupContext.use();
+		const element = useTemplateRef("element");
+		const isNativeButton = computed(() => __props.native ?? __props.as === "button");
+		const itemDisabled = computed(() => context.disabled.value || __props.disabled);
+		const itemState = computed(() => context.getItemState(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,
+			state: itemState.value,
+			value: __props.value
+		}));
+		const registration = {
+			disabled: itemDisabled,
+			element,
+			value: () => __props.value
+		};
+		const unregister = context.registerItem(registration);
+		watch([itemDisabled, () => __props.value], () => context.syncActiveValue(registration), { flush: "sync" });
+		onUnmounted(unregister);
+		function onClick(event) {
+			if (itemDisabled.value) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				return;
+			}
+			context.requestItemPress(__props.value, event);
+			emit("press", __props.value, 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 && context.moveFocus(__props.value, intent)) {
+					event.preventDefault();
+					return;
+				}
+			}
+			if (isNativeButton.value) return;
+			const action = getButtonGroupKeyboardAction(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),
+			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,
+				"data-vize-ui": "button-group-item",
+				part: "item",
+				"data-state": itemState.value,
+				"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",
+				"data-state",
+				"data-disabled",
+				"data-orientation",
+				"data-value"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-78e3c395"]]);
+//#endregion
+export { button_group_default as n, button_group_item_default as t };

package/dist/button-group.d.mts

@@ -0,0 +1,2 @@
+import { a as ButtonGroupItemSlotState, c as ButtonGroupRole, i as ButtonGroupItemExpose, l as ButtonGroupSlotState, n as _default, o as ButtonGroupItemState, r as ButtonGroupExpose, s as ButtonGroupOrientation, t as _default$1, u as ButtonGroupState } from "./button-group-C_mR0Jfw.mjs";
+export { _default as ButtonGroup, type ButtonGroupExpose, _default$1 as ButtonGroupItem, type ButtonGroupItemExpose, type ButtonGroupItemSlotState, type ButtonGroupItemState, type ButtonGroupOrientation, type ButtonGroupRole, type ButtonGroupSlotState, type ButtonGroupState };

package/dist/button-group.mjs

@@ -0,0 +1,2 @@
+import { n as button_group_default, t as button_group_item_default } from "./button-group-DyQbTCnY.mjs";
+export { button_group_default as ButtonGroup, button_group_item_default as ButtonGroupItem };

package/dist/button.d.mts

@@ -1,2 +1,2 @@
-import { i as getButtonKeyboardAction, n as ButtonKeyboardAction, r as ButtonKeyboardPhase, t as _default } from "./button-DYg1mIIq.mjs";
+import { i as getButtonKeyboardAction, n as ButtonKeyboardAction, r as ButtonKeyboardPhase, t as _default } from "./button-Dye0M41O.mjs";
 export { _default as Button, ButtonKeyboardAction, ButtonKeyboardPhase, getButtonKeyboardAction };

package/dist/button.mjs

@@ -1,2 +1,2 @@
-import { n as getButtonKeyboardAction, t as ActionButton_default } from "./button-DT8AKlds.mjs";
-export { ActionButton_default as Button, getButtonKeyboardAction };
+import { n as getButtonKeyboardAction, t as button_default } from "./button-VVxUavbS.mjs";
+export { button_default as Button, getButtonKeyboardAction };