@vizejs/ui 0.387.0 → 0.389.0

package/dist/native-select-H9qvaqQH.mjs

@@ -0,0 +1,309 @@
+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 { useControllableState } from "./controllable-state.mjs";
+import { Fragment, computed, createElementBlock, defineComponent, guardReactiveProps, nextTick, normalizeProps, openBlock, renderList, renderSlot, toDisplayString, unref, useTemplateRef, watch, watchEffect } from "vue";
+//#region src/families/selection/native-select/native-select-value.ts
+/** Return whether two NativeSelect values are equal in selection order. */
+function areNativeSelectValuesEqual(left, right) {
+	if (typeof left === "string" || typeof right === "string") return left === right;
+	return left.length === right.length && left.every((value, index) => value === right[index]);
+}
+/** Normalize a public value for the active native select mode. */
+function normalizeNativeSelectValue(value, multiple) {
+	if (multiple) {
+		if (value === void 0) return [];
+		return typeof value === "string" ? value === "" ? [] : [value] : [...value];
+	}
+	if (value === void 0) return "";
+	return typeof value === "string" ? value : value[0] ?? "";
+}
+/** Convert a normalized NativeSelect value to a readonly selected-value list. */
+function nativeSelectSelectedValues(value) {
+	return typeof value === "string" ? value === "" ? [] : [value] : value;
+}
+//#endregion
+//#region src/families/selection/native-select/native-select.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"name",
+	"value",
+	"multiple",
+	"size",
+	"disabled",
+	"required",
+	"dir",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-errormessage",
+	"aria-invalid",
+	"data-state",
+	"data-disabled",
+	"data-required",
+	"data-invalid",
+	"data-selection-mode",
+	"data-selection-count",
+	"data-direction",
+	"data-value"
+];
+const _hoisted_2 = [
+	"value",
+	"disabled",
+	"selected",
+	"data-state",
+	"data-value",
+	"data-selected",
+	"data-disabled"
+];
+//#endregion
+//#region src/families/selection/native-select/native-select.vue
+var native_select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "native-select",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		name: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		modelValue: {
+			type: [String, Array],
+			required: false,
+			default: () => void 0
+		},
+		defaultValue: {
+			type: [String, Array],
+			required: false,
+			default: () => void 0
+		},
+		options: {
+			type: Array,
+			required: false,
+			default: () => []
+		},
+		multiple: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		size: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		direction: {
+			type: String,
+			required: false,
+			default: "ltr"
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaErrormessage: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaInvalid: {
+			type: [Boolean, String],
+			required: false,
+			default: false
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const element = useTemplateRef("element");
+		const controlId = useDeterministicId({
+			id: () => __props.id,
+			hint: "native-select"
+		});
+		const selectionMode = computed(() => __props.multiple ? "multiple" : "single");
+		const valueState = useControllableState({
+			value: () => __props.modelValue === void 0 ? void 0 : normalizeNativeSelectValue(__props.modelValue, __props.multiple),
+			defaultValue: () => normalizeNativeSelectValue(__props.defaultValue, __props.multiple),
+			equals: areNativeSelectValuesEqual,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const value = computed(() => normalizeNativeSelectValue(valueState.value.value, __props.multiple));
+		const selectedValues = computed(() => nativeSelectSelectedValues(value.value));
+		const selectedCount = computed(() => selectedValues.value.length);
+		const selectedSet = computed(() => new Set(selectedValues.value));
+		const singleValue = computed(() => typeof value.value === "string" ? value.value : "");
+		const nativeValue = computed(() => __props.multiple ? void 0 : singleValue.value);
+		const ariaInvalidValue = computed(() => {
+			if (__props.ariaInvalid === false) return void 0;
+			return __props.ariaInvalid === true ? "true" : __props.ariaInvalid;
+		});
+		const invalid = computed(() => ariaInvalidValue.value !== void 0);
+		const state = computed(() => {
+			if (__props.disabled) return "disabled";
+			return selectedValues.value.length === 0 ? "empty" : "selected";
+		});
+		const dataValue = computed(() => selectedValues.value.length === 1 ? selectedValues.value[0] : void 0);
+		const slotState = computed(() => ({
+			direction: __props.direction,
+			disabled: __props.disabled,
+			invalid: invalid.value,
+			multiple: __props.multiple,
+			required: __props.required,
+			selectedValues: selectedValues.value,
+			selectionMode: selectionMode.value,
+			state: state.value,
+			value: value.value
+		}));
+		function isOptionSelected(optionValue) {
+			return selectedSet.value.has(optionValue);
+		}
+		function optionState(option) {
+			if (option.disabled === true) return "disabled";
+			return isOptionSelected(option.value) ? "selected" : "unselected";
+		}
+		function syncNativeValue() {
+			if (element.value === null) return;
+			if (__props.multiple) {
+				syncNativeOptions(element.value);
+				return;
+			}
+			syncNativeSingleValue(element.value);
+		}
+		function syncNativeOptions(select) {
+			for (const option of select.options) option.selected = selectedSet.value.has(option.value);
+		}
+		function syncNativeSingleValue(select) {
+			if (select.value !== singleValue.value) select.value = singleValue.value;
+		}
+		watchEffect(syncNativeValue);
+		watch(element, (select, _previous, onCleanup) => {
+			const form = select?.form;
+			if (form === void 0 || form === null) return;
+			const onReset = () => {
+				if (!valueState.controlled.value) valueState.reset();
+				nextTick(syncNativeValue);
+			};
+			form.addEventListener("reset", onReset);
+			onCleanup(() => form.removeEventListener("reset", onReset));
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		function readSelectValue(select) {
+			if (!__props.multiple) return select.value;
+			const values = [];
+			for (const option of select.selectedOptions) values.push(option.value);
+			return values;
+		}
+		function commitValue(next, nativeEvent) {
+			const normalizedNext = normalizeNativeSelectValue(next, __props.multiple);
+			let previous = __props.multiple ? [] : "";
+			const changed = valueState.set((current) => {
+				previous = normalizeNativeSelectValue(current, __props.multiple);
+				return normalizedNext;
+			});
+			if (changed && nativeEvent !== null) emit("change", normalizedNext, previous, nativeEvent);
+			nextTick(syncNativeValue);
+			return changed;
+		}
+		function onChange(event) {
+			if (!(event.currentTarget instanceof HTMLSelectElement)) return;
+			commitValue(readSelectValue(event.currentTarget), event);
+		}
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		function setValue(next) {
+			return commitValue(next, null);
+		}
+		function clear() {
+			return commitValue(__props.multiple ? [] : "", null);
+		}
+		__expose({
+			clear,
+			direction: computed(() => __props.direction),
+			disabled: computed(() => __props.disabled),
+			element,
+			focus,
+			id: controlId,
+			invalid,
+			multiple: computed(() => __props.multiple),
+			required: computed(() => __props.required),
+			reset: valueState.reset,
+			selectedValues,
+			selectionMode,
+			setValue,
+			state,
+			value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("select", {
+				id: unref(controlId),
+				ref_key: "element",
+				ref: element,
+				name: __props.name,
+				value: nativeValue.value,
+				multiple: __props.multiple,
+				size: __props.size,
+				disabled: __props.disabled,
+				required: __props.required,
+				dir: __props.direction,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-errormessage": ariaInvalidValue.value === void 0 ? void 0 : __props.ariaErrormessage,
+				"aria-invalid": ariaInvalidValue.value,
+				"data-vize-ui": "native-select",
+				part: "root",
+				"data-state": state.value,
+				"data-disabled": __props.disabled ? "true" : void 0,
+				"data-required": __props.required ? "true" : void 0,
+				"data-invalid": invalid.value ? "true" : void 0,
+				"data-selection-mode": selectionMode.value,
+				"data-selection-count": selectedCount.value,
+				"data-direction": __props.direction,
+				"data-value": dataValue.value,
+				onChange
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+				return openBlock(), createElementBlock("option", {
+					key: option.value,
+					value: option.value,
+					disabled: option.disabled === true,
+					selected: isOptionSelected(option.value),
+					"data-vize-ui": "native-select-option",
+					part: "option",
+					"data-state": optionState(option),
+					"data-value": option.value,
+					"data-selected": isOptionSelected(option.value) ? "true" : void 0,
+					"data-disabled": option.disabled === true ? "true" : void 0
+				}, toDisplayString(option.label), 9, _hoisted_2);
+			}), 128)), renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 40, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-8226b889"]]);
+//#endregion
+export { normalizeNativeSelectValue as i, areNativeSelectValuesEqual as n, nativeSelectSelectedValues as r, native_select_default as t };

package/dist/native-select.d.mts

@@ -0,0 +1,2 @@
+import { _r as NativeSelectSlotState, ar as normalizeNativeSelectValue, br as NativeSelectValue, cr as NativeSelectDirection, dr as NativeSelectMultipleValue, fr as NativeSelectOption, gr as NativeSelectSingleValue, hr as NativeSelectSelectionMode, ir as nativeSelectSelectedValues, lr as NativeSelectEmits, mr as NativeSelectProps, or as _default, pr as NativeSelectOptionState, rr as areNativeSelectValuesEqual, sr as NativeSelectAriaInvalid, ur as NativeSelectExpose, vr as NativeSelectSlots, yr as NativeSelectState } from "./announcer-CuBryPW9.mjs";
+export { _default as NativeSelect, type NativeSelectAriaInvalid, type NativeSelectDirection, type NativeSelectEmits, type NativeSelectExpose, type NativeSelectMultipleValue, type NativeSelectOption, type NativeSelectOptionState, type NativeSelectProps, type NativeSelectSelectionMode, type NativeSelectSingleValue, type NativeSelectSlotState, type NativeSelectSlots, type NativeSelectState, type NativeSelectValue, areNativeSelectValuesEqual, nativeSelectSelectedValues, normalizeNativeSelectValue };

package/dist/native-select.mjs

@@ -0,0 +1,2 @@
+import { i as normalizeNativeSelectValue, n as areNativeSelectValuesEqual, r as nativeSelectSelectedValues, t as native_select_default } from "./native-select-H9qvaqQH.mjs";
+export { native_select_default as NativeSelect, areNativeSelectValuesEqual, nativeSelectSelectedValues, normalizeNativeSelectValue };