@vizejs/ui 0.386.0 → 0.388.0

package/dist/icon-DhTTndMu.mjs

@@ -0,0 +1,233 @@
+import { a as useDeterministicId } from "./deterministic-id-yMq4HfmS.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, useTemplateRef, withCtx } from "vue";
+//#region src/families/layout/icon/icon.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id"];
+//#endregion
+//#region src/families/layout/icon/icon.vue
+var icon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "icon",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "svg"
+		},
+		id: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		viewBox: {
+			type: String,
+			required: false,
+			default: "0 0 24 24"
+		},
+		width: {
+			type: [String, Number],
+			required: false,
+			default: "1em"
+		},
+		height: {
+			type: [String, Number],
+			required: false,
+			default: "1em"
+		},
+		size: {
+			type: String,
+			required: false,
+			default: "md"
+		},
+		focusable: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		fill: {
+			type: String,
+			required: false,
+			default: "none"
+		},
+		stroke: {
+			type: String,
+			required: false,
+			default: "currentColor"
+		},
+		strokeWidth: {
+			type: [Number, String],
+			required: false,
+			default: "2"
+		},
+		strokeLinecap: {
+			type: String,
+			required: false,
+			default: "round"
+		},
+		strokeLinejoin: {
+			type: String,
+			required: false,
+			default: "round"
+		},
+		decorative: {
+			type: Boolean,
+			required: false,
+			default: () => void 0
+		},
+		ariaHidden: {
+			type: Boolean,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabel: {
+			type: null,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: null,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: null,
+			required: false,
+			default: () => void 0
+		},
+		title: {
+			type: null,
+			required: false,
+			default: () => void 0
+		},
+		description: {
+			type: null,
+			required: false,
+			default: () => void 0
+		},
+		titleId: {
+			type: null,
+			required: false,
+			default: () => void 0
+		},
+		descriptionId: {
+			type: null,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const element = useTemplateRef("element");
+		const generatedTitleId = useDeterministicId({
+			id: () => __props.titleId,
+			hint: "icon-title"
+		});
+		const generatedDescriptionId = useDeterministicId({
+			id: () => __props.descriptionId,
+			hint: "icon-description"
+		});
+		const viewBoxValue = computed(() => __props.viewBox);
+		const sizeValue = computed(() => __props.size);
+		const hasTitle = computed(() => hasText(__props.title));
+		const hasDescription = computed(() => hasText(__props.description));
+		const hasAccessibleName = computed(() => hasText(__props.ariaLabel) || hasText(__props.ariaLabelledby) || hasTitle.value);
+		const decorative = computed(() => __props.ariaHidden === true || __props.decorative === true || !hasAccessibleName.value);
+		const ariaState = computed(() => decorative.value ? "decorative" : "img");
+		const titleIdValue = computed(() => ariaState.value === "img" && hasTitle.value ? generatedTitleId.value : void 0);
+		const descriptionIdValue = computed(() => ariaState.value === "img" && hasDescription.value ? generatedDescriptionId.value : void 0);
+		const ariaLabelValue = computed(() => ariaState.value === "img" && !hasText(__props.ariaLabelledby) && hasText(__props.ariaLabel) ? __props.ariaLabel : void 0);
+		const ariaLabelledbyValue = computed(() => {
+			if (ariaState.value !== "img") return void 0;
+			if (hasText(__props.ariaLabelledby)) return __props.ariaLabelledby;
+			return hasText(__props.ariaLabel) ? void 0 : titleIdValue.value;
+		});
+		const ariaDescribedbyValue = computed(() => {
+			if (ariaState.value !== "img") return void 0;
+			if (hasText(__props.ariaDescribedby)) return __props.ariaDescribedby;
+			return descriptionIdValue.value;
+		});
+		const slotState = computed(() => ({
+			ariaState: ariaState.value,
+			decorative: decorative.value,
+			descriptionId: descriptionIdValue.value,
+			size: sizeValue.value,
+			titleId: titleIdValue.value,
+			viewBox: viewBoxValue.value
+		}));
+		__expose({
+			ariaState,
+			decorative,
+			descriptionId: descriptionIdValue,
+			element,
+			size: sizeValue,
+			titleId: titleIdValue,
+			viewBox: viewBoxValue
+		});
+		function hasText(value) {
+			return value != null && value.trim().length > 0;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				id: __props.id,
+				ref_key: "element",
+				ref: element,
+				role: ariaState.value === "img" ? "img" : void 0,
+				"aria-hidden": ariaState.value === "decorative" ? "true" : void 0,
+				"aria-label": ariaLabelValue.value,
+				"aria-labelledby": ariaLabelledbyValue.value,
+				"aria-describedby": ariaDescribedbyValue.value,
+				viewBox: __props.viewBox,
+				width: __props.width,
+				height: __props.height,
+				focusable: __props.focusable ? "true" : "false",
+				fill: __props.fill,
+				stroke: __props.stroke,
+				"stroke-width": __props.strokeWidth,
+				"stroke-linecap": __props.strokeLinecap,
+				"stroke-linejoin": __props.strokeLinejoin,
+				"data-vize-ui": "icon",
+				part: "root",
+				"data-aria-state": ariaState.value,
+				"data-decorative": decorative.value ? "true" : "false",
+				"data-size": sizeValue.value,
+				"data-title": titleIdValue.value === void 0 ? "missing" : "present",
+				"data-description": descriptionIdValue.value === void 0 ? "missing" : "present"
+			}, {
+				default: withCtx(() => [
+					titleIdValue.value !== void 0 ? (openBlock(), createElementBlock("title", {
+						key: 0,
+						id: titleIdValue.value
+					}, toDisplayString(__props.title), 9, _hoisted_1)) : createCommentVNode("v-if", true),
+					descriptionIdValue.value !== void 0 ? (openBlock(), createElementBlock("desc", {
+						key: 1,
+						id: descriptionIdValue.value
+					}, toDisplayString(__props.description), 9, _hoisted_2)) : createCommentVNode("v-if", true),
+					renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)
+				]),
+				_: 3
+			}, 8, [
+				"id",
+				"role",
+				"aria-hidden",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"viewBox",
+				"width",
+				"height",
+				"focusable",
+				"fill",
+				"stroke",
+				"stroke-width",
+				"stroke-linecap",
+				"stroke-linejoin",
+				"data-aria-state",
+				"data-decorative",
+				"data-size",
+				"data-title",
+				"data-description"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-2348d7c6"]]);
+//#endregion
+export { icon_default as t };

package/dist/icon-button-BuXquME1.mjs

@@ -0,0 +1,188 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { computed, createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, useTemplateRef, withCtx } from "vue";
+//#endregion
+//#region src/families/layout/icon/icon-button.vue
+var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "icon-button",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "button"
+		},
+		native: {
+			type: Boolean,
+			required: false,
+			default: () => void 0
+		},
+		type: {
+			type: String,
+			required: false,
+			default: "button"
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		size: {
+			type: String,
+			required: false,
+			default: "md"
+		},
+		tone: {
+			type: String,
+			required: false,
+			default: "neutral"
+		},
+		variant: {
+			type: String,
+			required: false,
+			default: "plain"
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: ["press"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const element = useTemplateRef("element");
+		const isNativeButton = computed(() => __props.native ?? __props.as === "button");
+		const disabledValue = computed(() => __props.disabled);
+		const loadingValue = computed(() => __props.loading);
+		const unavailable = computed(() => disabledValue.value || loadingValue.value);
+		const sizeValue = computed(() => __props.size);
+		const toneValue = computed(() => __props.tone);
+		const variantValue = computed(() => __props.variant);
+		const state = computed(() => disabledValue.value ? "disabled" : loadingValue.value ? "loading" : "idle");
+		const tabIndex = computed(() => {
+			if (isNativeButton.value) return void 0;
+			return disabledValue.value ? -1 : 0;
+		});
+		const ariaLabelValue = computed(() => hasText(__props.ariaLabel) ? __props.ariaLabel : void 0);
+		const ariaLabelledbyValue = computed(() => hasText(__props.ariaLabelledby) ? __props.ariaLabelledby : void 0);
+		const slotState = computed(() => ({
+			disabled: disabledValue.value,
+			loading: loadingValue.value,
+			size: sizeValue.value,
+			state: state.value,
+			tone: toneValue.value,
+			unavailable: unavailable.value,
+			variant: variantValue.value
+		}));
+		function onClick(event) {
+			if (unavailable.value) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				return;
+			}
+			emit("press", event);
+		}
+		function onKeyboard(event, phase) {
+			if (isNativeButton.value) return;
+			const action = getIconButtonKeyboardAction(event.key, phase);
+			if (action === "ignore") return;
+			event.preventDefault();
+			if (unavailable.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 getIconButtonKeyboardAction(key, phase) {
+			if (key === "Enter") return phase === "keydown" ? "activate" : "ignore";
+			if (key === " ") return phase === "keydown" ? "prevent" : "activate";
+			return "ignore";
+		}
+		/** Move focus to the rendered control when it exposes a focus method. */
+		function focus(options) {
+			focusTarget(element.value, options);
+		}
+		function focusTarget(target, options) {
+			if (typeof target === "object" && target !== null && "focus" in target && typeof target.focus === "function") target.focus(options);
+		}
+		__expose({
+			disabled: disabledValue,
+			element,
+			focus,
+			loading: loadingValue,
+			size: sizeValue,
+			state,
+			tone: toneValue,
+			unavailable,
+			variant: variantValue
+		});
+		function hasText(value) {
+			return value != null && value.trim().length > 0;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				ref_key: "element",
+				ref: element,
+				type: isNativeButton.value ? __props.type : void 0,
+				disabled: isNativeButton.value ? disabledValue.value : void 0,
+				role: isNativeButton.value ? void 0 : "button",
+				tabindex: tabIndex.value,
+				"aria-disabled": unavailable.value && (!isNativeButton.value || loadingValue.value) ? "true" : void 0,
+				"aria-busy": loadingValue.value ? "true" : void 0,
+				"aria-label": ariaLabelledbyValue.value === void 0 ? ariaLabelValue.value : void 0,
+				"aria-labelledby": ariaLabelledbyValue.value,
+				"aria-describedby": __props.ariaDescribedby,
+				"data-vize-ui": "icon-button",
+				part: "root",
+				"data-state": state.value,
+				"data-size": sizeValue.value,
+				"data-tone": toneValue.value,
+				"data-variant": variantValue.value,
+				"data-name": ariaLabelValue.value !== void 0 || ariaLabelledbyValue.value !== void 0 ? "present" : "missing",
+				onClick,
+				onKeydown,
+				onKeyup
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 40, [
+				"type",
+				"disabled",
+				"role",
+				"tabindex",
+				"aria-disabled",
+				"aria-busy",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"data-state",
+				"data-size",
+				"data-tone",
+				"data-variant",
+				"data-name"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-f95fd847"]]);
+//#endregion
+export { icon_button_default as t };

package/dist/icon-button.d.mts

@@ -0,0 +1,2 @@
+import { $i as IconButtonExpose, Qi as IconButtonElement, Zi as IconButtonBaseProps, aa as IconButtonTone, ea as IconButtonNameProps, ia as IconButtonState, na as IconButtonSize, oa as IconButtonType, qi as _default, ra as IconButtonSlotState, sa as IconButtonVariant, ta as IconButtonProps } from "./announcer-DGr2Iz0i.mjs";
+export { _default as IconButton, type IconButtonBaseProps, type IconButtonElement, type IconButtonExpose, type IconButtonNameProps, type IconButtonProps, type IconButtonSize, type IconButtonSlotState, type IconButtonState, type IconButtonTone, type IconButtonType, type IconButtonVariant };

package/dist/icon-button.mjs

@@ -0,0 +1,2 @@
+import { t as icon_button_default } from "./icon-button-BuXquME1.mjs";
+export { icon_button_default as IconButton };

package/dist/icon.d.mts

@@ -0,0 +1,2 @@
+import { Ji as IconAccessibleNameProps, Xi as IconBaseProps, Yi as IconAriaState, _a as IconStrokeLinejoin, ca as IconDecorativeProps, da as IconImageProps, fa as IconPaint, ga as IconStrokeLinecap, ha as IconSlotState, la as IconElement, ma as IconSize, pa as IconProps, ua as IconExpose, va as IconStrokeWidth, xt as _default } from "./announcer-DGr2Iz0i.mjs";
+export { _default as Icon, type IconAccessibleNameProps, type IconAriaState, type IconBaseProps, type IconDecorativeProps, type IconElement, type IconExpose, type IconImageProps, type IconPaint, type IconProps, type IconSize, type IconSlotState, type IconStrokeLinecap, type IconStrokeLinejoin, type IconStrokeWidth };

package/dist/icon.mjs

@@ -0,0 +1,2 @@
+import { t as icon_default } from "./icon-DhTTndMu.mjs";
+export { icon_default as Icon };

package/dist/id-BYG8aXPF.mjs

@@ -0,0 +1,47 @@
+import { o as useOptionalDeterministicIdScope, r as provideDeterministicIdScope, t as createDeterministicIdScope } from "./deterministic-id-yMq4HfmS.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { defineComponent, renderSlot, unref, useId } from "vue";
+//#endregion
+//#region src/families/foundations/id/deterministic-id-provider.vue
+var deterministic_id_provider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "deterministic-id-provider",
+	props: {
+		prefix: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		seed: {
+			type: [String, Number],
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const vueSeed = useId();
+		const parent = useOptionalDeterministicIdScope();
+		const resolvedSeed = __props.seed ?? vueSeed;
+		const scope = parent === void 0 ? createDeterministicIdScope({
+			prefix: __props.prefix ?? "vize",
+			seed: resolvedSeed
+		}) : __props.prefix === void 0 ? parent.createChild({ seed: resolvedSeed }) : parent.createChild({
+			prefix: __props.prefix,
+			seed: resolvedSeed
+		});
+		provideDeterministicIdScope(scope);
+		const namespace = scope.namespace;
+		const resolvedPrefix = scope.prefix;
+		__expose({
+			namespace,
+			prefix: resolvedPrefix
+		});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", {
+				namespace: unref(namespace),
+				prefix: unref(resolvedPrefix)
+			}, void 0, true);
+		};
+	}
+}), [["__scopeId", "data-v-e0c6f468"]]);
+//#endregion
+export { deterministic_id_provider_default as t };

package/dist/id-Ba8FHjAo.d.mts

@@ -0,0 +1,34 @@
+//#region src/families/foundations/id/deterministic-id-provider.vue.d.ts
+type __VLS_Props = {
+  /**
+   * Namespace prefix for this subtree.
+   *
+   * @default The parent prefix when nested; otherwise "vize"
+   */
+  readonly prefix?: string;
+  /**
+   * Stable request, island, or subtree seed.
+   *
+   * @default Vue's SSR- and hydration-stable useId() value
+   */
+  readonly seed?: string | number;
+};
+type __VLS_Slots = {
+  /** Renders descendants with the resolved deterministic identifier namespace. */default(props: {
+    readonly namespace: string;
+    readonly prefix: string;
+  }): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+  namespace: string;
+  prefix: string;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default as t };

package/dist/id.d.mts

@@ -1,2 +1,3 @@
-import { a as DeterministicIdScope, c as createDeterministicIdScope, d as useDeterministicId, i as DeterministicIdOptions, l as deriveDeterministicId, n as DeterministicId, o as DeterministicIdScopeOptions, r as DeterministicIdChildScopeOptions, s as DeterministicIdSeed, t as _default, u as toDeterministicId } from "./id-BV9AJ3cm.mjs";
+import { a as DeterministicIdScopeOptions, c as deriveDeterministicId, i as DeterministicIdScope, l as toDeterministicId, n as DeterministicIdChildScopeOptions, o as DeterministicIdSeed, r as DeterministicIdOptions, s as createDeterministicIdScope, t as DeterministicId, u as useDeterministicId } from "./deterministic-id-DYQJ7KzM.mjs";
+import { t as _default } from "./id-Ba8FHjAo.mjs";
 export { type DeterministicId, type DeterministicIdChildScopeOptions, type DeterministicIdOptions, type DeterministicIdScope, type DeterministicIdScopeOptions, type DeterministicIdSeed, _default as IdProvider, createDeterministicIdScope, deriveDeterministicId, toDeterministicId, useDeterministicId };

package/dist/id.mjs

@@ -1,2 +1,3 @@
-import { a as useDeterministicId, i as toDeterministicId, n as createDeterministicIdScope, r as deriveDeterministicId, t as DeterministicIdProvider_default } from "./id-mziSyAse.mjs";
-export { DeterministicIdProvider_default as IdProvider, createDeterministicIdScope, deriveDeterministicId, toDeterministicId, useDeterministicId };
+import { a as useDeterministicId, i as toDeterministicId, n as deriveDeterministicId, t as createDeterministicIdScope } from "./deterministic-id-yMq4HfmS.mjs";
+import { t as deterministic_id_provider_default } from "./id-BYG8aXPF.mjs";
+export { deterministic_id_provider_default as IdProvider, createDeterministicIdScope, deriveDeterministicId, toDeterministicId, useDeterministicId };