@vizejs/ui 0.386.0 → 0.388.0

package/dist/rating-BjKLGPP6.mjs

@@ -0,0 +1,569 @@
+import { a as useDeterministicId, n as deriveDeterministicId } 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, createElementVNode, createTextVNode, defineComponent, mergeProps, nextTick, openBlock, renderList, renderSlot, toDisplayString, unref, useTemplateRef, watch, watchEffect } from "vue";
+function integerOr(value, fallback) {
+	return typeof value === "number" && Number.isFinite(value) ? Math.trunc(value) : fallback;
+}
+function positiveIntegerOr(value, fallback) {
+	const integer = integerOr(value, fallback);
+	return integer > 0 ? integer : fallback;
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function normalizeDirection(direction) {
+	return direction === "rtl" ? "rtl" : "ltr";
+}
+function ratingState(options) {
+	if (options.disabled) return "disabled";
+	if (options.readOnly) return "readonly";
+	if (options.invalid) return "invalid";
+	return options.value === null ? "empty" : "selected";
+}
+/** Normalize raw Rating min/max/count props into a finite generated range. */
+function getRatingBounds(options = {}) {
+	const min = integerOr(options.min, 1);
+	const count = positiveIntegerOr(options.count, 5);
+	const rawMax = typeof options.max === "number" && Number.isFinite(options.max) ? Math.trunc(options.max) : min + count - 1;
+	const max = rawMax >= min ? rawMax : min;
+	const normalizedCount = max - min + 1;
+	const items = Array.from({ length: normalizedCount }, (_item, index) => min + index);
+	return Object.freeze({
+		min,
+		max,
+		count: normalizedCount,
+		items
+	});
+}
+/** Normalize a raw Rating value into the generated range, or `null` for empty. */
+function normalizeRatingValue(value, options = {}) {
+	if (value === null || value === void 0) return null;
+	if (!Number.isFinite(value)) return null;
+	const { min, max } = getRatingBounds(options);
+	return clamp(Math.round(value), min, max);
+}
+/** Normalize raw Rating props into the public state contract. */
+function getRatingState(options = {}) {
+	const bounds = getRatingBounds(options);
+	const value = normalizeRatingValue(options.value, bounds);
+	const percent = value === null ? 0 : (value - bounds.min + 1) / bounds.count * 100;
+	const disabled = options.disabled === true;
+	const readOnly = options.readOnly === true;
+	const required = options.required === true;
+	const invalid = options.invalid === true;
+	const clearable = options.clearable === true;
+	const direction = normalizeDirection(options.direction);
+	return Object.freeze({
+		value,
+		min: bounds.min,
+		max: bounds.max,
+		count: bounds.count,
+		items: bounds.items,
+		percent,
+		direction,
+		disabled,
+		readOnly,
+		required,
+		invalid,
+		clearable,
+		state: ratingState({
+			disabled,
+			invalid,
+			readOnly,
+			value
+		})
+	});
+}
+//#endregion
+//#region src/families/form/rating/rating-runtime.ts
+function useRating(props, emit, root) {
+	const controlId = useDeterministicId({
+		id: () => props.id,
+		hint: "rating"
+	});
+	const ariaInvalidValue = computed(() => {
+		if (props.ariaInvalid !== true && props.ariaInvalid !== "grammar") return props.ariaInvalid === "spelling" ? "spelling" : void 0;
+		return props.ariaInvalid === true ? "true" : props.ariaInvalid;
+	});
+	const bounds = () => ({
+		count: props.count ?? 5,
+		max: props.max,
+		min: props.min ?? 1
+	});
+	const valueState = useControllableState({
+		value: () => props.modelValue === void 0 ? void 0 : normalizeRatingValue(props.modelValue, bounds()),
+		defaultValue: () => normalizeRatingValue(props.defaultValue, bounds()),
+		onChange: (value) => emit("update:modelValue", value)
+	});
+	const rating = computed(() => getRatingState({
+		...bounds(),
+		value: valueState.value.value,
+		clearable: props.clearable === true,
+		disabled: props.disabled === true,
+		readOnly: props.readOnly === true,
+		required: props.required === true,
+		direction: props.dir,
+		invalid: ariaInvalidValue.value !== void 0
+	}));
+	const currentValue = computed(() => rating.value.value);
+	const minValue = computed(() => rating.value.min);
+	const maxValue = computed(() => rating.value.max);
+	const itemCount = computed(() => rating.value.count);
+	const items = computed(() => rating.value.items);
+	const percent = computed(() => rating.value.percent);
+	const directionState = computed(() => rating.value.direction);
+	const disabledState = computed(() => rating.value.disabled);
+	const readOnlyState = computed(() => rating.value.readOnly);
+	const requiredState = computed(() => rating.value.required);
+	const invalidState = computed(() => rating.value.invalid);
+	const clearableState = computed(() => rating.value.clearable);
+	const dataState = computed(() => rating.value.state);
+	const elements = computed(() => {
+		items.value;
+		return root.value === null ? [] : [...root.value.querySelectorAll("[data-vize-ui=\"rating-control\"]")];
+	});
+	const ratingStyle = computed(() => ({
+		"--vize-rating-value": currentValue.value === null ? "" : String(currentValue.value),
+		"--vize-rating-min": String(minValue.value),
+		"--vize-rating-max": String(maxValue.value),
+		"--vize-rating-count": String(itemCount.value),
+		"--vize-rating-percent": `${percent.value}%`
+	}));
+	const itemStates = computed(() => items.value.map((itemValue, index) => {
+		const checked = currentValue.value === itemValue;
+		const active = currentValue.value !== null && itemValue <= currentValue.value;
+		const state = disabledState.value ? "disabled" : readOnlyState.value ? "readonly" : checked ? "checked" : "unchecked";
+		return {
+			value: itemValue,
+			index,
+			currentValue: currentValue.value,
+			checked,
+			active,
+			percent: (index + 1) / itemCount.value * 100,
+			min: minValue.value,
+			max: maxValue.value,
+			count: itemCount.value,
+			direction: directionState.value,
+			disabled: disabledState.value,
+			readOnly: readOnlyState.value,
+			required: requiredState.value,
+			invalid: invalidState.value,
+			clearable: clearableState.value,
+			state
+		};
+	}));
+	let suppressedChangeValue = null;
+	function syncNativeState() {
+		for (const input of elements.value) input.checked = currentValue.value === Number(input.value);
+	}
+	watchEffect(syncNativeState);
+	watch(root, (element, _previous, onCleanup) => {
+		const form = element?.closest("form");
+		if (form === void 0 || form === null) return;
+		const onReset = () => {
+			if (!valueState.controlled.value) valueState.reset();
+			nextTick(syncNativeState);
+		};
+		form.addEventListener("reset", onReset);
+		onCleanup(() => form.removeEventListener("reset", onReset));
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	function itemId(value) {
+		return deriveDeterministicId(controlId.value, `item-${value}`);
+	}
+	function itemAriaLabel(value) {
+		const prefix = (props.itemLabel ?? "Rating").trim();
+		const suffix = `${value} of ${maxValue.value}`;
+		return prefix.length === 0 ? suffix : `${prefix} ${suffix}`;
+	}
+	function commitUserValue(next, nativeEvent) {
+		const previous = currentValue.value;
+		if (!valueState.set(next)) return false;
+		if (next === null && previous !== null) emit("clear", previous, nativeEvent);
+		emit("change", next, previous, nativeEvent);
+		return true;
+	}
+	function setValue(next) {
+		const changed = valueState.set(normalizeRatingValue(next, bounds()));
+		nextTick(syncNativeState);
+		return changed;
+	}
+	function clear() {
+		return setValue(null);
+	}
+	function focusValue(value, options) {
+		(value === null ? elements.value.find((input) => !input.disabled) ?? null : elements.value.find((input) => Number(input.value) === value && !input.disabled) ?? null)?.focus(options);
+	}
+	function valueAtOffset(from, offset) {
+		const index = items.value.indexOf(from);
+		const nextIndex = ((index === -1 ? 0 : index) + offset + itemCount.value) % itemCount.value;
+		return items.value[nextIndex] ?? minValue.value;
+	}
+	function keyboardValue(key, itemValue) {
+		if (key === "Home") return minValue.value;
+		if (key === "End") return maxValue.value;
+		if (clearableState.value && (key === "Backspace" || key === "Delete" || key === "Escape")) return null;
+		if (key === " " || key === "Enter") return clearableState.value && currentValue.value === itemValue ? null : itemValue;
+		const base = currentValue.value ?? itemValue;
+		if (key === "ArrowDown") return valueAtOffset(base, 1);
+		if (key === "ArrowUp") return valueAtOffset(base, -1);
+		if (key === "ArrowRight") return valueAtOffset(base, directionState.value === "rtl" ? -1 : 1);
+		if (key === "ArrowLeft") return valueAtOffset(base, directionState.value === "rtl" ? 1 : -1);
+	}
+	function onItemClick(event, itemValue) {
+		if (readOnlyState.value) {
+			event.preventDefault();
+			nextTick(syncNativeState);
+			return;
+		}
+		if (!clearableState.value || currentValue.value !== itemValue) return;
+		event.preventDefault();
+		suppressedChangeValue = itemValue;
+		commitUserValue(null, event);
+		nextTick(() => {
+			suppressedChangeValue = null;
+			syncNativeState();
+		});
+	}
+	function onItemChange(event, itemValue) {
+		if (suppressedChangeValue === itemValue) {
+			event.preventDefault();
+			return;
+		}
+		if (readOnlyState.value) {
+			event.preventDefault();
+			nextTick(syncNativeState);
+			return;
+		}
+		if (!(event.currentTarget instanceof HTMLInputElement) || !event.currentTarget.checked) return;
+		commitUserValue(itemValue, event);
+		nextTick(syncNativeState);
+	}
+	function onItemKeydown(event, itemValue) {
+		const next = keyboardValue(event.key, itemValue);
+		if (next === void 0) return;
+		event.preventDefault();
+		if (readOnlyState.value) {
+			nextTick(syncNativeState);
+			return;
+		}
+		if (commitUserValue(next, event) && next !== null) nextTick(() => focusValue(next));
+		else nextTick(syncNativeState);
+	}
+	return {
+		ariaInvalidValue,
+		clearableState,
+		controlId,
+		currentValue,
+		dataState,
+		directionState,
+		disabledState,
+		exposed: {
+			clear,
+			clearable: clearableState,
+			count: itemCount,
+			direction: directionState,
+			disabled: disabledState,
+			elements,
+			focus: (options) => focusValue(currentValue.value, options),
+			invalid: invalidState,
+			items,
+			max: maxValue,
+			min: minValue,
+			percent,
+			readOnly: readOnlyState,
+			required: requiredState,
+			reset: valueState.reset,
+			root,
+			setValue,
+			state: dataState,
+			value: currentValue
+		},
+		invalidState,
+		itemAriaLabel,
+		itemCount,
+		itemId,
+		itemStates,
+		items,
+		maxValue,
+		minValue,
+		onItemChange,
+		onItemClick,
+		onItemKeydown,
+		percent,
+		readOnlyState,
+		requiredState,
+		intrinsicProps: computed(() => ({ style: ratingStyle.value }))
+	};
+}
+//#endregion
+//#region src/families/form/rating/rating.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"dir",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-errormessage",
+	"aria-invalid",
+	"aria-disabled",
+	"aria-readonly",
+	"aria-required",
+	"data-state",
+	"data-value",
+	"data-min",
+	"data-max",
+	"data-count",
+	"data-percent",
+	"data-dir",
+	"data-disabled",
+	"data-readonly",
+	"data-required",
+	"data-invalid",
+	"data-clearable"
+];
+const _hoisted_2 = [
+	"data-state",
+	"data-value",
+	"data-index",
+	"data-active",
+	"data-checked",
+	"data-disabled",
+	"data-readonly",
+	"data-required",
+	"data-invalid",
+	"data-dir"
+];
+const _hoisted_3 = [
+	"id",
+	"name",
+	"value",
+	"checked",
+	"disabled",
+	"required",
+	"tabindex",
+	"aria-label",
+	"aria-invalid",
+	"aria-readonly",
+	"data-state",
+	"data-value",
+	"data-index",
+	"data-active",
+	"data-checked",
+	"data-disabled",
+	"data-readonly",
+	"data-required",
+	"data-invalid",
+	"data-dir",
+	"onClick",
+	"onChange",
+	"onKeydown"
+];
+const _hoisted_4 = [
+	"data-state",
+	"data-value",
+	"data-index",
+	"data-active",
+	"data-checked",
+	"data-disabled",
+	"data-readonly",
+	"data-invalid",
+	"data-dir"
+];
+//#endregion
+//#region src/families/form/rating/rating.vue
+var rating_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "rating",
+	props: {
+		id: {
+			type: [String, null],
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		modelValue: {
+			type: [Number, null],
+			required: false
+		},
+		defaultValue: {
+			type: [Number, null],
+			required: false
+		},
+		min: {
+			type: Number,
+			required: false
+		},
+		max: {
+			type: Number,
+			required: false
+		},
+		count: {
+			type: Number,
+			required: false
+		},
+		clearable: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		dir: {
+			type: String,
+			required: false
+		},
+		itemLabel: {
+			type: String,
+			required: false
+		},
+		ariaLabel: {
+			type: String,
+			required: false
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false
+		},
+		ariaErrormessage: {
+			type: String,
+			required: false
+		},
+		ariaInvalid: {
+			type: [Boolean, String],
+			required: false
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"clear"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const root = useTemplateRef("root");
+		const { ariaInvalidValue, clearableState, controlId, currentValue, dataState, directionState, disabledState, exposed, invalidState, itemAriaLabel, itemCount, itemId, itemStates, items, maxValue, minValue, onItemChange, onItemClick, onItemKeydown, percent, readOnlyState, requiredState, intrinsicProps } = useRating(props, emit, root);
+		__expose(exposed);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", mergeProps({
+				id: unref(controlId),
+				ref_key: "root",
+				ref: root,
+				role: "radiogroup",
+				dir: unref(directionState),
+				"aria-label": props.ariaLabel,
+				"aria-labelledby": props.ariaLabelledby,
+				"aria-describedby": props.ariaDescribedby,
+				"aria-errormessage": unref(ariaInvalidValue) === void 0 ? void 0 : props.ariaErrormessage,
+				"aria-invalid": unref(ariaInvalidValue),
+				"aria-disabled": unref(disabledState) ? "true" : void 0,
+				"aria-readonly": unref(readOnlyState) ? "true" : void 0,
+				"aria-required": unref(requiredState) ? "true" : void 0,
+				"data-vize-ui": "rating",
+				part: "root",
+				"data-state": unref(dataState),
+				"data-value": unref(currentValue) ?? void 0,
+				"data-min": unref(minValue),
+				"data-max": unref(maxValue),
+				"data-count": unref(itemCount),
+				"data-percent": unref(percent),
+				"data-dir": unref(directionState),
+				"data-disabled": unref(disabledState) ? "true" : void 0,
+				"data-readonly": unref(readOnlyState) ? "true" : void 0,
+				"data-required": unref(requiredState) ? "true" : void 0,
+				"data-invalid": unref(invalidState) ? "true" : void 0,
+				"data-clearable": unref(clearableState) ? "true" : void 0
+			}, unref(intrinsicProps)), [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(itemStates), (item) => {
+				return openBlock(), createElementBlock("label", {
+					key: item.value,
+					"data-vize-ui": "rating-item",
+					part: "item",
+					"data-state": item.state,
+					"data-value": item.value,
+					"data-index": item.index,
+					"data-active": item.active ? "true" : "false",
+					"data-checked": item.checked ? "true" : "false",
+					"data-disabled": item.disabled ? "true" : void 0,
+					"data-readonly": item.readOnly ? "true" : void 0,
+					"data-required": item.required ? "true" : void 0,
+					"data-invalid": item.invalid ? "true" : void 0,
+					"data-dir": item.direction
+				}, [createElementVNode("input", {
+					id: unref(itemId)(item.value),
+					type: "radio",
+					name: props.name,
+					value: String(item.value),
+					checked: item.checked,
+					disabled: item.disabled,
+					required: item.required,
+					tabindex: item.checked || unref(currentValue) === null && item.index === 0 ? 0 : -1,
+					"aria-label": unref(itemAriaLabel)(item.value),
+					"aria-invalid": unref(ariaInvalidValue),
+					"aria-readonly": item.readOnly ? "true" : void 0,
+					"data-vize-ui": "rating-control",
+					part: "control",
+					"data-state": item.state,
+					"data-value": item.value,
+					"data-index": item.index,
+					"data-active": item.active ? "true" : "false",
+					"data-checked": item.checked ? "true" : "false",
+					"data-disabled": item.disabled ? "true" : void 0,
+					"data-readonly": item.readOnly ? "true" : void 0,
+					"data-required": item.required ? "true" : void 0,
+					"data-invalid": item.invalid ? "true" : void 0,
+					"data-dir": item.direction,
+					onClick: (event) => unref(onItemClick)(event, item.value),
+					onChange: (event) => unref(onItemChange)(event, item.value),
+					onKeydown: (event) => unref(onItemKeydown)(event, item.value)
+				}, null, 40, _hoisted_3), createElementVNode("span", {
+					"aria-hidden": "true",
+					"data-vize-ui": "rating-indicator",
+					part: "indicator",
+					"data-state": item.state,
+					"data-value": item.value,
+					"data-index": item.index,
+					"data-active": item.active ? "true" : "false",
+					"data-checked": item.checked ? "true" : "false",
+					"data-disabled": item.disabled ? "true" : void 0,
+					"data-readonly": item.readOnly ? "true" : void 0,
+					"data-invalid": item.invalid ? "true" : void 0,
+					"data-dir": item.direction
+				}, [renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, item), () => [createTextVNode(toDisplayString(item.value), 1)], true)], 8, _hoisted_4)], 8, _hoisted_2);
+			}), 128)), renderSlot(_ctx.$slots, "default", {
+				value: unref(currentValue),
+				min: unref(minValue),
+				max: unref(maxValue),
+				count: unref(itemCount),
+				items: unref(items),
+				percent: unref(percent),
+				direction: unref(directionState),
+				disabled: unref(disabledState),
+				readOnly: unref(readOnlyState),
+				required: unref(requiredState),
+				invalid: unref(invalidState),
+				clearable: unref(clearableState),
+				state: unref(dataState)
+			}, void 0, true)], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-ee83d516"]]);
+//#endregion
+export { rating_default as t };