@vizejs/ui 0.386.0 → 0.388.0

package/dist/skip-link-DHDrtnP2.d.mts

@@ -0,0 +1,98 @@
+import { ComputedRef, Ref } from "vue";
+
+//#region src/families/navigation/skip-link/skip-link-types.d.ts
+/** Hash-fragment destination accepted by the SkipLink primitive. */
+type SkipLinkHref = `#${string}`;
+/** Mounted availability and focus state for a skip link. */
+type SkipLinkState = "focused" | "idle" | "invalid";
+/** Public props accepted by the SkipLink primitive. */
+interface SkipLinkProps {
+  /**
+   * Consumer-owned anchor id. `null` and `undefined` select a deterministic fallback.
+   *
+   * @default undefined
+   */
+  readonly id?: string | null;
+  /**
+   * Same-document fragment destination. Invalid runtime values remove native navigation.
+   *
+   * @default "#main"
+   */
+  readonly href?: SkipLinkHref;
+  /**
+   * Move DOM focus to the fragment target after activation.
+   *
+   * @default true
+   */
+  readonly focusTarget?: boolean;
+}
+/** Result of an imperative or activation-driven target focus attempt. */
+interface SkipLinkFocusResult {
+  /** Same-document target element resolved from the current fragment. */
+  readonly target: HTMLElement | null;
+  /** Whether focus moved to the target element. */
+  readonly focused: boolean;
+}
+/** Activation payload emitted after a valid skip link click. */
+interface SkipLinkActivation extends SkipLinkFocusResult {
+  /** Validated hash-fragment href used for native navigation. */
+  readonly href: SkipLinkHref;
+  /** Target id resolved from {@link SkipLinkActivation.href}. */
+  readonly targetId: string;
+}
+/** State exposed to the default slot. */
+interface SkipLinkSlotState {
+  /** Whether the link itself currently owns focus. */
+  readonly focused: boolean;
+  /** Validated href rendered on the native anchor. */
+  readonly href: SkipLinkHref | undefined;
+  /** Mounted availability and focus state. */
+  readonly state: SkipLinkState;
+  /** Target id resolved from the validated hash-fragment href. */
+  readonly targetId: string | undefined;
+  /** Whether runtime validation removed native navigation. */
+  readonly unavailable: boolean;
+}
+/** Methods and state exposed by the skip link component instance. */
+interface SkipLinkExpose extends SkipLinkSlotState {
+  /** Native anchor element rendered by the primitive. */
+  readonly element: HTMLAnchorElement | null;
+  /** Move focus to the native anchor. */
+  readonly focus: (options?: FocusOptions) => void;
+  /** Resolve the current same-document target, or `null` when absent. */
+  readonly getTarget: () => HTMLElement | null;
+  /** Move focus to the current same-document target. */
+  readonly focusTarget: (options?: FocusOptions) => SkipLinkFocusResult;
+}
+//#endregion
+//#region src/families/navigation/skip-link/skip-link.vue.d.ts
+type __VLS_Slots = {
+  /** Renders skip-link contents with the resolved hash target and focus state. */default(props: SkipLinkSlotState): unknown;
+};
+declare function getTarget(): HTMLElement | null;
+declare function focus(options?: FocusOptions): void;
+declare function focusTarget(options?: FocusOptions): SkipLinkFocusResult;
+declare const __VLS_base: import("vue").DefineComponent<SkipLinkProps, {
+  element: Readonly<import("vue").ShallowRef<HTMLAnchorElement | null>>;
+  focus: typeof focus;
+  focused: Ref<boolean, boolean>;
+  focusTarget: typeof focusTarget;
+  getTarget: typeof getTarget;
+  href: ComputedRef<`#${string}` | undefined>;
+  state: ComputedRef<SkipLinkState>;
+  targetId: ComputedRef<string | undefined>;
+  unavailable: ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  activate: (event: MouseEvent, detail: SkipLinkActivation) => any;
+}, string, import("vue").PublicProps, Readonly<SkipLinkProps> & Readonly<{
+  onActivate?: (event: MouseEvent, detail: SkipLinkActivation) => any;
+}>, {}, {}, {}, {}, 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 { SkipLinkHref as a, SkipLinkState as c, SkipLinkFocusResult as i, SkipLinkActivation as n, SkipLinkProps as o, SkipLinkExpose as r, SkipLinkSlotState as s, _default as t };

package/dist/skip-link.d.mts

@@ -0,0 +1,2 @@
+import { a as SkipLinkHref, c as SkipLinkState, i as SkipLinkFocusResult, n as SkipLinkActivation, o as SkipLinkProps, r as SkipLinkExpose, s as SkipLinkSlotState, t as _default } from "./skip-link-DHDrtnP2.mjs";
+export { _default as SkipLink, type SkipLinkActivation, type SkipLinkExpose, type SkipLinkFocusResult, type SkipLinkHref, type SkipLinkProps, type SkipLinkSlotState, type SkipLinkState };

package/dist/skip-link.mjs

@@ -0,0 +1,2 @@
+import { t as skip_link_default } from "./skip-link-BUp9HXXt.mjs";
+export { skip_link_default as SkipLink };

package/dist/slider-BiZSZLDp.mjs

@@ -0,0 +1,475 @@
+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 { computed, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeProps, openBlock, renderSlot, unref, useTemplateRef, watch, watchEffect } from "vue";
+//#region src/families/form/slider/slider-state.ts
+/** Native-friendly default minimum for Slider. */
+const SLIDER_DEFAULT_MIN = 0;
+/** Native-friendly default maximum for Slider. */
+const SLIDER_DEFAULT_MAX = 100;
+/** Native range default step. */
+const SLIDER_DEFAULT_STEP = 1;
+function finiteOr(value, fallback) {
+	return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+function normalizeStep(step) {
+	if (step === "any") return "any";
+	return typeof step === "number" && Number.isFinite(step) && step > 0 ? step : 1;
+}
+function decimalPlaces(value) {
+	const text = String(value);
+	const exponentIndex = text.indexOf("e-");
+	if (exponentIndex !== -1) return Number(text.slice(exponentIndex + 2));
+	const decimalIndex = text.indexOf(".");
+	return decimalIndex === -1 ? 0 : text.length - decimalIndex - 1;
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function snapValue(value, min, max, step) {
+	const clamped = clamp(value, min, max);
+	if (step === "any") return clamped;
+	const precision = Math.max(decimalPlaces(min), decimalPlaces(max), decimalPlaces(step));
+	const snapped = min + Math.round((clamped - min) / step) * step;
+	return clamp(Number(snapped.toFixed(Math.min(precision, 20))), min, max);
+}
+function normalizeOrientation(orientation) {
+	return orientation === "vertical" ? "vertical" : "horizontal";
+}
+function normalizeDirection(direction) {
+	return direction === "rtl" ? "rtl" : "ltr";
+}
+function sliderState(options) {
+	if (options.disabled) return "disabled";
+	if (options.readOnly) return "readonly";
+	if (options.invalid) return "invalid";
+	if (options.value <= options.min) return "min";
+	if (options.value >= options.max) return "max";
+	return "in-range";
+}
+/** Normalize raw Slider props into the public state contract. */
+function getSliderState(options = {}) {
+	const min = finiteOr(options.min, 0);
+	const rawMax = finiteOr(options.max, 100);
+	const max = rawMax > min ? rawMax : min + 1;
+	const step = normalizeStep(options.step);
+	const value = snapValue(finiteOr(options.value, min), min, max, step);
+	const percent = (value - min) / (max - min) * 100;
+	const disabled = options.disabled === true;
+	const readOnly = options.readOnly === true;
+	const invalid = options.invalid === true;
+	const required = options.required === true;
+	const orientation = normalizeOrientation(options.orientation);
+	const direction = normalizeDirection(options.direction);
+	return Object.freeze({
+		value,
+		min,
+		max,
+		step,
+		percent,
+		orientation,
+		direction,
+		disabled,
+		readOnly,
+		required,
+		invalid,
+		state: sliderState({
+			disabled,
+			invalid,
+			max,
+			min,
+			readOnly,
+			value
+		})
+	});
+}
+//#endregion
+//#region src/families/form/slider/slider.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"data-state",
+	"data-orientation",
+	"data-dir",
+	"data-value",
+	"data-min",
+	"data-max",
+	"data-step",
+	"data-percent",
+	"data-disabled",
+	"data-readonly",
+	"data-required",
+	"data-invalid"
+];
+const _hoisted_2 = [
+	"id",
+	"name",
+	"value",
+	"min",
+	"max",
+	"step",
+	"disabled",
+	"required",
+	"dir",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-errormessage",
+	"aria-invalid",
+	"aria-orientation",
+	"aria-readonly",
+	"aria-valuetext",
+	"orient",
+	"data-state",
+	"data-orientation",
+	"data-dir",
+	"data-value",
+	"data-min",
+	"data-max",
+	"data-step",
+	"data-percent"
+];
+//#endregion
+//#region src/families/form/slider/slider.vue
+var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "slider",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		name: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		modelValue: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		defaultValue: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		min: {
+			type: Number,
+			required: false,
+			default: () => 0
+		},
+		max: {
+			type: Number,
+			required: false,
+			default: () => 100
+		},
+		step: {
+			type: [Number, String],
+			required: false,
+			default: () => 1
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		dir: {
+			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
+		},
+		ariaValueText: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaInvalid: {
+			type: [Boolean, String],
+			required: false,
+			default: false
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"input",
+		"change"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const root = useTemplateRef("root");
+		const element = useTemplateRef("element");
+		const controlId = useDeterministicId({
+			id: () => __props.id,
+			hint: "slider"
+		});
+		const ariaInvalidValue = computed(() => {
+			if (__props.ariaInvalid === false) return void 0;
+			return __props.ariaInvalid === true ? "true" : __props.ariaInvalid;
+		});
+		const state = useControllableState({
+			value: () => __props.modelValue,
+			defaultValue: () => __props.defaultValue ?? __props.min,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const rawValue = state.value;
+		const slider = computed(() => getSliderState({
+			value: rawValue.value,
+			min: __props.min,
+			max: __props.max,
+			step: __props.step,
+			disabled: __props.disabled,
+			readOnly: __props.readOnly,
+			required: __props.required,
+			invalid: ariaInvalidValue.value !== void 0,
+			orientation: __props.orientation,
+			direction: __props.dir
+		}));
+		const currentValue = computed(() => slider.value.value);
+		const currentMin = computed(() => slider.value.min);
+		const currentMax = computed(() => slider.value.max);
+		const currentStep = computed(() => slider.value.step);
+		const percent = computed(() => slider.value.percent);
+		const orientationState = computed(() => slider.value.orientation);
+		const directionState = computed(() => slider.value.direction);
+		const disabledState = computed(() => slider.value.disabled);
+		const readOnlyState = computed(() => slider.value.readOnly);
+		const requiredState = computed(() => slider.value.required);
+		const invalidState = computed(() => slider.value.invalid);
+		const dataState = computed(() => slider.value.state);
+		const sliderStyle = computed(() => ({
+			"--vize-slider-value": String(currentValue.value),
+			"--vize-slider-min": String(currentMin.value),
+			"--vize-slider-max": String(currentMax.value),
+			"--vize-slider-step": String(currentStep.value),
+			"--vize-slider-percent": `${percent.value}%`
+		}));
+		const slotState = computed(() => ({
+			value: currentValue.value,
+			min: currentMin.value,
+			max: currentMax.value,
+			step: currentStep.value,
+			percent: percent.value,
+			orientation: orientationState.value,
+			direction: directionState.value,
+			disabled: disabledState.value,
+			readOnly: readOnlyState.value,
+			required: requiredState.value,
+			invalid: invalidState.value,
+			state: dataState.value
+		}));
+		const intrinsicProps = computed(() => ({ style: sliderStyle.value }));
+		const readonlyKeys = new Set([
+			"ArrowDown",
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"End",
+			"Home",
+			"PageDown",
+			"PageUp"
+		]);
+		function normalizedValue(value) {
+			return getSliderState({
+				value,
+				min: __props.min,
+				max: __props.max,
+				step: __props.step
+			}).value;
+		}
+		function syncNativeValue() {
+			if (element.value === null) return;
+			const next = String(currentValue.value);
+			if (element.value.value !== next) element.value.value = next;
+		}
+		watchEffect(syncNativeValue);
+		watch(element, (input, _previous, onCleanup) => {
+			const form = input?.form;
+			if (form === void 0 || form === null) return;
+			const onReset = () => {
+				if (!state.controlled.value) state.reset();
+				nextTick(syncNativeValue);
+			};
+			form.addEventListener("reset", onReset);
+			onCleanup(() => form.removeEventListener("reset", onReset));
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		function readSliderValue(event) {
+			if (!(event.currentTarget instanceof HTMLInputElement)) return void 0;
+			return normalizedValue(Number(event.currentTarget.value));
+		}
+		function onInput(event) {
+			const next = readSliderValue(event);
+			if (next === void 0) return;
+			if (readOnlyState.value) {
+				event.preventDefault();
+				nextTick(syncNativeValue);
+				return;
+			}
+			state.set(next);
+			emit("input", next, event);
+			nextTick(syncNativeValue);
+		}
+		function onChange(event) {
+			const next = readSliderValue(event);
+			if (next === void 0) return;
+			if (readOnlyState.value) {
+				event.preventDefault();
+				nextTick(syncNativeValue);
+				return;
+			}
+			state.set(next);
+			emit("change", next, event);
+			nextTick(syncNativeValue);
+		}
+		function onKeydown(event) {
+			if (!readOnlyState.value || !readonlyKeys.has(event.key)) return;
+			event.preventDefault();
+			nextTick(syncNativeValue);
+		}
+		function onPointerdown(event) {
+			if (!readOnlyState.value) return;
+			event.preventDefault();
+			nextTick(syncNativeValue);
+		}
+		function onClick(event) {
+			if (!readOnlyState.value) return;
+			event.preventDefault();
+			nextTick(syncNativeValue);
+		}
+		/** Move focus to the native range input. */
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		function setValue(next) {
+			const changed = state.set(normalizedValue(next));
+			nextTick(syncNativeValue);
+			return changed;
+		}
+		function stepDelta(steps) {
+			const count = typeof steps === "number" && Number.isFinite(steps) ? steps : 1;
+			return (currentStep.value === "any" ? 1 : currentStep.value) * count;
+		}
+		function stepUp(steps) {
+			return setValue(currentValue.value + stepDelta(steps));
+		}
+		function stepDown(steps) {
+			return setValue(currentValue.value - stepDelta(steps));
+		}
+		__expose({
+			direction: directionState,
+			disabled: disabledState,
+			element,
+			focus,
+			invalid: invalidState,
+			max: currentMax,
+			min: currentMin,
+			orientation: orientationState,
+			percent,
+			readOnly: readOnlyState,
+			required: requiredState,
+			reset: state.reset,
+			root,
+			setValue,
+			state: dataState,
+			step: currentStep,
+			stepDown,
+			stepUp,
+			value: currentValue
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", mergeProps({
+				ref_key: "root",
+				ref: root,
+				"data-vize-ui": "slider",
+				part: "root",
+				"data-state": dataState.value,
+				"data-orientation": orientationState.value,
+				"data-dir": directionState.value,
+				"data-value": currentValue.value,
+				"data-min": currentMin.value,
+				"data-max": currentMax.value,
+				"data-step": currentStep.value,
+				"data-percent": percent.value,
+				"data-disabled": disabledState.value ? "true" : void 0,
+				"data-readonly": readOnlyState.value ? "true" : void 0,
+				"data-required": requiredState.value ? "true" : void 0,
+				"data-invalid": invalidState.value ? "true" : void 0
+			}, intrinsicProps.value), [createElementVNode("input", {
+				id: unref(controlId),
+				ref_key: "element",
+				ref: element,
+				type: "range",
+				name: __props.name,
+				value: currentValue.value,
+				min: currentMin.value,
+				max: currentMax.value,
+				step: currentStep.value,
+				disabled: disabledState.value,
+				required: requiredState.value,
+				dir: directionState.value,
+				"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,
+				"aria-orientation": orientationState.value,
+				"aria-readonly": readOnlyState.value ? "true" : void 0,
+				"aria-valuetext": __props.ariaValueText,
+				orient: orientationState.value === "vertical" ? "vertical" : void 0,
+				"data-vize-ui": "slider-input",
+				part: "control",
+				"data-state": dataState.value,
+				"data-orientation": orientationState.value,
+				"data-dir": directionState.value,
+				"data-value": currentValue.value,
+				"data-min": currentMin.value,
+				"data-max": currentMax.value,
+				"data-step": currentStep.value,
+				"data-percent": percent.value,
+				onInput,
+				onChange,
+				onKeydown,
+				onPointerdown,
+				onClick
+			}, null, 40, _hoisted_2), renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-c9bbba4f"]]);
+//#endregion
+export { SLIDER_DEFAULT_STEP as i, SLIDER_DEFAULT_MAX as n, SLIDER_DEFAULT_MIN as r, slider_default as t };