vectis-ui 0.8.1 → 0.9.0

package/dist/components/VSlider/VSlider.vue_vue_type_script_setup_true_lang.js

@@ -1,24 +1,27 @@
-import { useMessages as e } from "../../i18n/state.js";
-import { iconProps as t } from "../VIcon/iconProps.js";
-import n from "../VIcon/VIcon.js";
-import { useControlShape as r } from "../../composables/useControlShape.js";
-import { clamp as i } from "../../utils/number.js";
-import { useRootAttrs as a } from "../../composables/useRootAttrs.js";
-import { inputGroupKey as o } from "../VInput/context.js";
-import s from "../VInput/VInput.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as ee, defineComponent as m, inject as te, mergeModels as h, mergeProps as g, normalizeClass as ne, normalizeStyle as _, openBlock as v, ref as y, renderList as b, toDisplayString as x, unref as S, useModel as re, watch as C } from "vue";
+import { isDev as e } from "../../utils/env.js";
+import { useMessages as t } from "../../i18n/state.js";
+import { iconProps as n } from "../VIcon/iconProps.js";
+import r from "../VIcon/VIcon.js";
+import { useControlShape as i } from "../../composables/useControlShape.js";
+import { useAriaLabel as a } from "../../composables/useAriaLabel.js";
+import { clamp as o } from "../../utils/number.js";
+import { useRootAttrs as s } from "../../composables/useRootAttrs.js";
+import { useFieldIds as c } from "../../composables/useFieldIds.js";
+import { inputGroupKey as ee } from "../VInput/context.js";
+import l from "../VInput/VInput.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as te, defineComponent as g, inject as ne, mergeModels as _, mergeProps as re, normalizeClass as ie, normalizeStyle as v, openBlock as y, ref as b, renderList as x, toDisplayString as S, unref as C, useModel as ae, watch as w, watchEffect as oe } from "vue";
 //#region src/components/VSlider/VSlider.vue?vue&type=script&setup=true&lang.ts
-var ie = [
+var se = [
 	"data-range",
 	"data-disabled",
 	"data-readonly",
 	"data-invalid",
 	"data-size",
 	"data-orientation"
-], ae = { class: "v-slider-rail" }, oe = { class: "v-slider-control" }, se = {
+], ce = { class: "v-slider-rail" }, le = { class: "v-slider-control" }, ue = {
 	class: "v-slider-track",
 	"aria-hidden": "true"
-}, ce = ["data-filled"], le = [
+}, de = ["data-filled"], fe = [
 	"min",
 	"max",
 	"step",
@@ -28,31 +31,32 @@ var ie = [
 	"aria-valuetext",
 	"aria-invalid",
 	"aria-readonly"
-], ue = [
+], pe = [
+	"aria-invalid",
+	"aria-readonly",
+	"aria-valuetext",
 	"min",
 	"max",
 	"step",
 	"disabled",
 	"value",
 	"aria-label",
-	"aria-valuetext",
-	"aria-invalid",
-	"aria-readonly"
-], de = {
+	"aria-describedby"
+], me = {
 	key: 0,
 	class: "v-slider-tooltip v-slider-tooltip-start",
 	"aria-hidden": "true"
-}, fe = { class: "v-slider-tooltip-bubble" }, pe = {
+}, he = { class: "v-slider-tooltip-bubble" }, ge = {
 	key: 1,
 	class: "v-slider-tooltip v-slider-tooltip-end",
 	"aria-hidden": "true"
-}, me = { class: "v-slider-tooltip-bubble" }, he = {
+}, _e = { class: "v-slider-tooltip-bubble" }, ve = {
 	key: 1,
 	class: "v-slider-labels"
-}, w = /*@__PURE__*/ m({
+}, ye = ["id"], T = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "VSlider",
-	props: /*@__PURE__*/ h({
+	props: /*@__PURE__*/ _({
 		min: { default: 0 },
 		max: { default: 100 },
 		step: { default: 1 },
@@ -74,6 +78,7 @@ var ie = [
 		},
 		size: { default: "md" },
 		label: { default: void 0 },
+		hint: { default: void 0 },
 		orientation: { default: "horizontal" },
 		inputs: {
 			type: Boolean,
@@ -92,31 +97,32 @@ var ie = [
 		modelValue: { default: 0 },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ h(["change"], ["update:modelValue"]),
-	setup(m, { expose: h, emit: w }) {
-		let T = m, E = re(m, "modelValue"), D = w, { size: O, compact: k, disabled: A } = r({
+	emits: /*@__PURE__*/ _(["input", "change"], ["update:modelValue"]),
+	setup(g, { expose: _, emit: T }) {
+		let E = g, D = ae(g, "modelValue"), O = T, { size: k, compact: A, disabled: j } = i({
 			get size() {
-				return T.size;
+				return E.size;
 			},
 			compact: !1,
 			get disabled() {
-				return T.disabled;
+				return E.disabled;
 			}
-		}, te(o, null)), j = l(() => Array.isArray(E.value) ? E.value[0] : T.min), M = l(() => Array.isArray(E.value) ? E.value[1] : E.value), N = (e) => e === "start" ? j.value : M.value, P = (e) => i((e - T.min) / (T.max - T.min || 1), 0, 1);
-		function F(e, t) {
-			let n = T.range ? e === "start" ? [Math.min(t, M.value), M.value] : [j.value, Math.max(t, j.value)] : t;
-			return E.value = n, n;
+		}, ne(ee, null)), M = d(() => Array.isArray(D.value) ? D.value[0] : E.min), N = d(() => Array.isArray(D.value) ? D.value[1] : D.value), P = (e) => e === "start" ? M.value : N.value, F = (e) => o((e - E.min) / (E.max - E.min || 1), 0, 1);
+		function I(e, t) {
+			let n = E.range ? e === "start" ? [t, Math.max(t, N.value)] : [Math.min(t, M.value), t] : t;
+			return D.value = n, n;
 		}
-		let I = (e, t) => Array.isArray(e) ? e[t === "start" ? 0 : 1] : e;
-		function L(e, t) {
+		let L = (e, t) => Array.isArray(e) ? e[t === "start" ? 0 : 1] : e;
+		function be(e, t) {
 			let n = t.target;
-			if (T.readonly) {
-				n.value = String(N(e));
+			if (E.readonly) {
+				n.value = String(P(e));
 				return;
 			}
-			n.value = String(I(F(e, Number(n.value)), e));
+			let r = I(e, Number(n.value));
+			n.value = String(L(r, e)), O("input", r);
 		}
-		let ge = /* @__PURE__ */ new Set([
+		let xe = /* @__PURE__ */ new Set([
 			"ArrowUp",
 			"ArrowDown",
 			"ArrowLeft",
@@ -127,78 +133,85 @@ var ie = [
 			"PageDown"
 		]);
 		function R(e) {
-			T.readonly && ge.has(e.key) && e.preventDefault();
+			E.readonly && xe.has(e.key) && e.preventDefault();
 		}
 		function z(e, t) {
-			if (T.readonly) return;
+			if (E.readonly) return;
 			let n = Number(t.target.value);
-			T.range ? D("change", e === "start" ? [n, M.value] : [j.value, n]) : D("change", n);
+			E.range ? e === "start" ? O("change", [n, Math.max(n, N.value)]) : O("change", [Math.min(n, M.value), n]) : O("change", n);
 		}
-		let B = l(() => Math.floor((T.max - T.min) / T.step + 1e-9)), V = l(() => (T.ticks || T.labels !== void 0) && B.value >= 1 && B.value <= 50), H = l(() => {
-			let e = Math.max(V.value ? B.value + 1 : 0, T.labels?.length ?? 0);
+		let B = d(() => E.step > 0 ? Math.floor((E.max - E.min) / E.step + 1e-9) : 0), Se = d(() => E.step > 0 ? E.min + B.value * E.step : E.max), V = d(() => (E.ticks || E.labels !== void 0) && B.value >= 1 && B.value <= 50), H = d(() => {
+			let e = Math.max(V.value ? B.value + 1 : 0, E.labels?.length ?? 0);
 			return Array.from({ length: e }, (e, t) => {
-				let n = T.min + t * T.step;
+				let n = E.min + t * E.step;
 				return {
 					value: n,
-					style: { "--fill-fraction": String(P(n)) }
+					style: { "--fill-fraction": String(F(n)) }
 				};
 			});
-		}), _e = l(() => V.value ? H.value.slice(0, B.value + 1) : []), ve = (e) => T.range ? e >= j.value && e <= M.value : e <= M.value;
+		}), Ce = d(() => V.value ? H.value.slice(0, B.value + 1) : []), we = (e) => E.range ? e >= M.value && e <= N.value : e <= N.value;
 		function U(e) {
-			let t = T.labels?.[Math.round((e - T.min) / T.step)];
+			let t = E.labels?.[Math.round((e - E.min) / E.step)];
 			return t === void 0 ? String(e) : typeof t == "string" ? t : t.label;
 		}
-		let W = e(), G = l(() => T.label ? W.value.slider.rangeStart(T.label) : W.value.slider.start), K = l(() => T.label ? W.value.slider.rangeEnd(T.label) : W.value.slider.end), ye = l(() => T.range ? K.value : T.label), be = l(() => T.range ? K.value : T.label ?? W.value.slider.value), q = l(() => T.range && T.labels ? U(j.value) : void 0), J = l(() => T.labels ? U(M.value) : void 0), { attrs: xe, rootClass: Se, rootStyle: Ce, forwardedAttrs: we } = a(), Y = y(String(j.value)), X = y(String(M.value));
-		C(j, (e) => {
-			T.range && (Y.value = String(e));
-		}), C(M, (e) => X.value = String(e));
-		function Z(e) {
-			let t = e === "start" ? Y.value : X.value, n = Number.parseFloat(String(t));
+		let W = t(), G = a(() => E.label), K = d(() => G.value ? W.value.slider.rangeStart(G.value) : W.value.slider.start), q = d(() => G.value ? W.value.slider.rangeEnd(G.value) : W.value.slider.end), Te = d(() => E.range ? q.value : G.value), Ee = d(() => E.range ? q.value : G.value ?? W.value.slider.value), J = d(() => E.range && E.labels ? U(M.value) : void 0), De = d(() => E.labels ? U(N.value) : void 0), { attrs: Y, rootClass: Oe, rootStyle: ke, forwardedAttrs: Ae } = s(), { hintId: je, describedBy: Me } = c(Y, () => !!E.hint);
+		if (e) {
+			let e = /* @__PURE__ */ new Set(), t = (t, n) => {
+				e.has(t) || (e.add(t), console.warn(`[VSlider] ${n}`));
+			};
+			oe(() => {
+				E.step <= 0 && t("step", `step="${E.step}" cannot move a thumb: the arrow keys do nothing and a value typed into a field is committed as it stands. Give a positive step.`), (E.ticks || E.labels) && B.value > 50 && t("ticks", `${B.value} steps: no tick is drawn past 50, the comb being unreadable.`), E.labels && E.labels.length !== B.value + 1 && t("labels", `${E.labels.length} labels for ${B.value + 1} steps: one label per step expected.`), E.range && Y.name !== void 0 && t("name", `name="${String(Y.name)}" on a range: only the end thumb carries it, so the form receives one value of the two. Bind the model to two inputs of your own instead.`);
+			});
+		}
+		let X = b(String(M.value)), Z = b(String(N.value));
+		w(M, (e) => {
+			E.range && (X.value = String(e));
+		}), w(N, (e) => Z.value = String(e));
+		function Ne(e) {
+			let t = e === "start" ? X.value : Z.value, n = Number.parseFloat(String(t));
 			if (Number.isNaN(n)) {
 				Q();
 				return;
 			}
-			let r = i(n, T.min, T.max), a = T.min + Math.round((r - T.min) / T.step) * T.step;
-			a = Math.min(T.max, Math.round(a * 1e10) / 1e10);
-			let o = N(e), s = F(e, a);
-			I(s, e) !== o && D("change", s), Q();
+			let r = o(n, E.min, E.max), i = E.step > 0 ? E.min + Math.round((r - E.min) / E.step) * E.step : r, a = Math.min(Se.value, Math.round(i * 1e10) / 1e10), s = P(e), c = I(e, a);
+			L(c, e) !== s && O("change", c), Q();
 		}
 		function Q() {
-			T.range && (Y.value = String(j.value)), X.value = String(M.value);
+			E.range && (X.value = String(M.value)), Z.value = String(N.value);
 		}
-		let $ = y(null);
-		return h({
+		let $ = b(null);
+		return _({
 			focus: (e) => $.value?.focus(e),
 			el: $
-		}), (e, r) => (v(), f("div", {
-			class: ne(["v-slider", S(Se)]),
-			"data-range": m.range ? "" : void 0,
-			"data-disabled": S(A) ? "" : void 0,
-			"data-readonly": m.readonly ? "" : void 0,
-			"data-invalid": m.invalid ? "" : void 0,
-			"data-size": S(O),
-			"data-orientation": m.orientation,
-			style: _([S(Ce), {
-				"--start-fraction": m.range ? String(P(j.value)) : void 0,
-				"--end-fraction": String(P(M.value))
+		}), (e, t) => (y(), m("div", {
+			class: ie(["v-slider", C(Oe)]),
+			"data-range": g.range ? "" : void 0,
+			"data-disabled": C(j) ? "" : void 0,
+			"data-readonly": g.readonly ? "" : void 0,
+			"data-invalid": g.invalid ? "" : void 0,
+			"data-size": C(k),
+			"data-orientation": g.orientation,
+			style: v([C(ke), {
+				"--slider-start-fraction": g.range ? String(F(M.value)) : void 0,
+				"--slider-end-fraction": String(F(N.value))
 			}])
 		}, [
-			m.inputs && m.range ? (v(), u(s, {
+			g.inputs && g.range ? (y(), f(l, {
 				key: 0,
-				modelValue: Y.value,
-				"onUpdate:modelValue": r[0] ||= (e) => Y.value = e,
+				modelValue: X.value,
+				"onUpdate:modelValue": t[0] ||= (e) => X.value = e,
 				class: "v-slider-field v-slider-field-start",
 				type: "number",
-				size: S(O),
-				compact: S(k),
-				min: m.min,
-				max: m.max,
-				step: m.step,
-				disabled: S(A),
-				readonly: m.readonly,
-				invalid: m.invalid,
-				"aria-label": G.value,
-				onChange: r[1] ||= (e) => Z("start")
+				size: C(k),
+				compact: C(A),
+				min: g.min,
+				max: g.max,
+				step: g.step,
+				disabled: C(j),
+				readonly: g.readonly,
+				invalid: g.invalid,
+				"aria-label": K.value,
+				onChange: t[1] ||= (e) => Ne("start")
 			}, null, 8, [
 				"modelValue",
 				"size",
@@ -210,79 +223,80 @@ var ie = [
 				"readonly",
 				"invalid",
 				"aria-label"
-			])) : d("", !0),
-			p("div", ae, [
-				p("span", oe, [
-					p("span", se, [r[8] ||= p("span", { class: "v-slider-fill" }, null, -1), (v(!0), f(c, null, b(_e.value, (e, t) => (v(), f("span", {
+			])) : p("", !0),
+			h("div", ce, [
+				h("span", le, [
+					h("span", ue, [t[8] ||= h("span", { class: "v-slider-fill" }, null, -1), (y(!0), m(u, null, x(Ce.value, (e, t) => (y(), m("span", {
 						key: t,
 						class: "v-slider-tick",
-						"data-filled": ve(e.value) ? "" : void 0,
-						style: _(e.style)
-					}, null, 12, ce))), 128))]),
-					m.range ? (v(), f("input", {
+						"data-filled": we(e.value) ? "" : void 0,
+						style: v(e.style)
+					}, null, 12, de))), 128))]),
+					g.range ? (y(), m("input", {
 						key: 0,
 						type: "range",
 						class: "v-slider-input v-slider-input-start",
-						min: m.min,
-						max: m.max,
-						step: m.step,
-						disabled: S(A),
-						value: j.value,
-						"aria-label": G.value,
-						"aria-valuetext": q.value,
-						"aria-invalid": m.invalid || void 0,
-						"aria-readonly": m.readonly || void 0,
+						min: g.min,
+						max: g.max,
+						step: g.step,
+						disabled: C(j),
+						value: M.value,
+						"aria-label": K.value,
+						"aria-valuetext": J.value,
+						"aria-invalid": g.invalid || void 0,
+						"aria-readonly": g.readonly || void 0,
 						onKeydown: R,
-						onInput: r[2] ||= (e) => L("start", e),
-						onChange: r[3] ||= (e) => z("start", e)
-					}, null, 40, le)) : d("", !0),
-					p("input", g({
+						onInput: t[2] ||= (e) => be("start", e),
+						onChange: t[3] ||= (e) => z("start", e)
+					}, null, 40, fe)) : p("", !0),
+					h("input", re({
 						ref_key: "endThumbEl",
-						ref: $
-					}, S(we), {
+						ref: $,
+						"aria-invalid": g.invalid || void 0,
+						"aria-readonly": g.readonly || void 0,
+						"aria-valuetext": De.value
+					}, C(Ae), {
 						type: "range",
 						class: "v-slider-input v-slider-input-end",
-						min: m.min,
-						max: m.max,
-						step: m.step,
-						disabled: S(A),
-						value: M.value,
-						"aria-label": ye.value,
-						"aria-valuetext": J.value,
-						"aria-invalid": m.invalid || void 0,
-						"aria-readonly": m.readonly || void 0,
+						min: g.min,
+						max: g.max,
+						step: g.step,
+						disabled: C(j),
+						value: N.value,
+						"aria-label": Te.value,
+						"aria-describedby": C(Me),
 						onKeydown: R,
-						onInput: r[4] ||= (e) => L("end", e),
-						onChange: r[5] ||= (e) => z("end", e)
-					}), null, 16, ue)
+						onInput: t[4] ||= (e) => be("end", e),
+						onChange: t[5] ||= (e) => z("end", e)
+					}), null, 16, pe)
 				]),
-				m.tooltip && m.range ? (v(), f("span", de, [p("span", fe, x(q.value ?? j.value), 1)])) : d("", !0),
-				m.tooltip ? (v(), f("span", pe, [p("span", me, x(J.value ?? M.value), 1)])) : d("", !0)
+				g.tooltip && g.range ? (y(), m("span", me, [h("span", he, S(J.value ?? M.value), 1)])) : p("", !0),
+				g.tooltip ? (y(), m("span", ge, [h("span", _e, S(De.value ?? N.value), 1)])) : p("", !0)
 			]),
-			m.labels ? (v(), f("div", he, [(v(!0), f(c, null, b(m.labels, (e, r) => (v(), f("span", {
-				key: r,
+			g.labels ? (y(), m("div", ve, [(y(!0), m(u, null, x(g.labels, (e, t) => (y(), m("span", {
+				key: t,
 				class: "v-slider-label",
-				style: _(H.value[r]?.style)
-			}, [typeof e == "string" ? (v(), f(c, { key: 0 }, [ee(x(e), 1)], 64)) : (v(), u(n, g({
+				style: v(H.value[t]?.style)
+			}, [typeof e == "string" ? (y(), m(u, { key: 0 }, [te(S(e), 1)], 64)) : (y(), f(r, re({
 				key: 1,
 				ref_for: !0
-			}, S(t)(e.icon), { label: e.label }), null, 16, ["label"]))], 4))), 128))])) : d("", !0),
-			m.inputs ? (v(), u(s, {
+			}, C(n)(e.icon), { label: e.label }), null, 16, ["label"]))], 4))), 128))])) : p("", !0),
+			g.inputs ? (y(), f(l, {
 				key: 2,
-				modelValue: X.value,
-				"onUpdate:modelValue": r[6] ||= (e) => X.value = e,
+				modelValue: Z.value,
+				"onUpdate:modelValue": t[6] ||= (e) => Z.value = e,
 				class: "v-slider-field v-slider-field-end",
 				type: "number",
-				size: S(O),
-				compact: S(k),
-				min: m.min,
-				max: m.max,
-				step: m.step,
-				disabled: S(A),
-				readonly: m.readonly,
-				invalid: m.invalid,
-				"aria-label": be.value,
-				onChange: r[7] ||= (e) => Z("end")
+				size: C(k),
+				compact: C(A),
+				min: g.min,
+				max: g.max,
+				step: g.step,
+				disabled: C(j),
+				readonly: g.readonly,
+				invalid: g.invalid,
+				"aria-label": Ee.value,
+				onChange: t[7] ||= (e) => Ne("end")
 			}, null, 8, [
 				"modelValue",
 				"size",
@@ -294,11 +308,16 @@ var ie = [
 				"readonly",
 				"invalid",
 				"aria-label"
-			])) : d("", !0)
-		], 14, ie));
+			])) : p("", !0),
+			g.hint ? (y(), m("span", {
+				key: 3,
+				id: C(je),
+				class: "v-slider-hint"
+			}, S(g.hint), 9, ye)) : p("", !0)
+		], 14, se));
 	}
 });
 //#endregion
-export { w as default };
+export { T as default };
 
 //# sourceMappingURL=VSlider.vue_vue_type_script_setup_true_lang.js.map