@wirecore/wirelayer-vue 0.6.0 → 0.7.0

package/dist/Slider-Cpv7Vj3B.js

@@ -0,0 +1,143 @@
+import { a as e, n as t } from "./recipes-BlM9aKyt.js";
+import { t as n } from "./label-for-eQvYjsM5.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v, useAttrs as y, useId as b, withCtx as x } from "vue";
+import { slider as S, snapToMarks as C } from "@wirecore/wirelayer-recipes";
+import { Slider as w } from "@ark-ui/vue/slider";
+//#region src/components/Slider/Slider.vue?vue&type=script&setup=true&lang.ts
+var T = ["id"], E = ["data-orientation"], D = /* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "Slider",
+	props: {
+		modelValue: { default: void 0 },
+		defaultValue: { default: () => [0] },
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		label: {},
+		thumbLabels: {},
+		showValue: {
+			type: Boolean,
+			default: !0
+		},
+		hideLabel: { type: Boolean },
+		formatValue: {
+			type: Function,
+			default: String
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		name: {},
+		orientation: { default: void 0 },
+		marks: { default: void 0 },
+		restrictToMarks: { type: Boolean },
+		minRange: { default: void 0 },
+		classes: {}
+	},
+	emits: ["update:modelValue", "valueChangeEnd"],
+	setup(d, { emit: D }) {
+		let O = e(), k = d, A = t("slider", S, () => k.classes), j = D, M = y();
+		n("Slider", () => M.id);
+		let N = i(() => A({
+			withMarks: !!k.marks?.length,
+			hideLabel: k.hideLabel,
+			hideHeader: k.hideLabel && !k.showValue
+		})), P = i(() => (k.marks ?? []).map((e) => typeof e == "number" ? { value: e } : e)), F = h(k.defaultValue), I = i(() => k.restrictToMarks && P.value.length > 0), L = i(() => I.value ? k.modelValue ?? F.value : k.modelValue);
+		function R(e) {
+			if (!I.value) return j("update:modelValue", e);
+			let t = C(e, L.value ?? k.defaultValue, P.value.map((e) => e.value));
+			F.value = t, j("update:modelValue", t);
+		}
+		let z = b(), B = `${z}label`, V = i(() => (k.modelValue ?? k.defaultValue).length);
+		return (e, t) => (m(), a(v(w).Root, f({
+			...v(M),
+			class: N.value.base({ class: p(v(M).class) })
+		}, {
+			ids: { label: B },
+			"model-value": L.value,
+			"default-value": d.defaultValue,
+			min: d.min,
+			max: d.max,
+			step: d.step,
+			disabled: d.disabled,
+			name: d.name,
+			orientation: d.orientation,
+			"min-steps-between-thumbs": d.minRange ? Math.ceil(d.minRange / d.step) : void 0,
+			"get-aria-value-text": (e) => d.formatValue(e.value),
+			onValueChange: t[0] ||= (e) => R(e.value),
+			onValueChangeEnd: t[1] ||= (e) => j("valueChangeEnd", e.value)
+		}), {
+			default: x(() => [c("div", { class: p(N.value.header()) }, [u(v(w).Label, {
+				id: B,
+				class: p(N.value.label())
+			}, {
+				default: x(() => [l(_(d.label), 1)]),
+				_: 1
+			}, 8, ["class"]), d.showValue ? (m(), a(v(w).Context, { key: 0 }, {
+				default: x((e) => [c("span", {
+					class: p(N.value.value()),
+					"aria-hidden": "true"
+				}, _(e.value.map(d.formatValue).join(" – ")), 3)]),
+				_: 1
+			})) : o("", !0)], 2), u(v(w).Control, { class: p(N.value.control()) }, {
+				default: x(() => [
+					u(v(w).Track, { class: p(N.value.track()) }, {
+						default: x(() => [u(v(w).Range, { class: p(N.value.range()) }, null, 8, ["class"])]),
+						_: 1
+					}, 8, ["class"]),
+					(m(!0), s(r, null, g(V.value, (e) => (m(), a(v(w).Thumb, {
+						key: e,
+						index: e - 1,
+						class: p(N.value.thumb()),
+						"aria-labelledby": V.value > 1 ? `${B} ${v(z)}thumb${e - 1}` : B
+					}, {
+						default: x(() => [V.value > 1 ? (m(), s("span", {
+							key: 0,
+							id: `${v(z)}thumb${e - 1}`,
+							class: p(N.value.thumbLabel())
+						}, _((d.thumbLabels ?? v(O).slider.thumbs)[e - 1]), 11, T)) : o("", !0), u(v(w).HiddenInput)]),
+						_: 2
+					}, 1032, [
+						"index",
+						"class",
+						"aria-labelledby"
+					]))), 128)),
+					P.value.length ? (m(), a(v(w).MarkerGroup, {
+						key: 0,
+						class: p(N.value.markerGroup())
+					}, {
+						default: x(() => [(m(!0), s(r, null, g(P.value, (e) => (m(), a(v(w).Marker, {
+							key: e.value,
+							value: e.value,
+							class: p(N.value.marker())
+						}, {
+							default: x(() => [c("span", {
+								class: p(N.value.markerTick()),
+								"data-orientation": d.orientation ?? "horizontal"
+							}, null, 10, E), l(_(e.label), 1)]),
+							_: 2
+						}, 1032, ["value", "class"]))), 128))]),
+						_: 1
+					}, 8, ["class"])) : o("", !0)
+				]),
+				_: 1
+			}, 8, ["class"])]),
+			_: 1
+		}, 16, [
+			"ids",
+			"model-value",
+			"default-value",
+			"min",
+			"max",
+			"step",
+			"disabled",
+			"name",
+			"orientation",
+			"min-steps-between-thumbs",
+			"get-aria-value-text"
+		]));
+	}
+});
+//#endregion
+export { D as t };