npm - @milaboratories/uikit - Versions diffs - 2.16.0 → 2.16.2 - Mend

@milaboratories/uikit 2.16.0 → 2.16.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1369) hide show

package/dist/components/Slider.vue2.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { clamp as r } from "../helpers/math.js";
 import { useSliderBreakpoints as i } from "../composition/useSliderBreakpoints.js";
 import { getErrorMessage as a } from "../helpers/error.js";
 import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, defineComponent as f, normalizeClass as p, normalizeStyle as m, openBlock as h, reactive as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useSlots as S, watch as C, withCtx as w } from "vue";
-//#region src/components/Slider.vue?vue&type=script&setup=true&lang.ts
+// src/components/Slider.vue?vue&type=script&setup=true&lang.ts
 var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section" }, D = {
 	key: 0,
 	"data-testid": "pl-slider-label",
@@ -19,7 +19,7 @@ var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section"
 	key: 0,
 	"data-testid": "pl-slider-error",
 	class: "ui-slider__error"
-}, F = /* @__PURE__ */ f({
+}, F = /*@__PURE__*/ f({
 	__name: "Slider",
 	props: {
 		modelValue: {},
@@ -45,27 +45,27 @@ var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section"
 		let I = S(), L = F, R = f, z = g({ deltaValue: 0 }), B = s(() => R.max - R.min), V = s(() => r((R.modelValue ?? 0) + z.deltaValue, R.min, R.max)), H = _(R.modelValue), U = s(() => {
 			let e = R.modelValue;
 			return Number.isFinite(e) ? e < R.min ? `Min value: ${R.min}` : e > R.max ? `Max value: ${R.max}` : a(R.error) : "Not a number";
-		}), W = i(s(() => R)), G = s(() => (V.value - R.min) / B.value), K = s(() => ({ right: Math.ceil((1 - G.value) * 100) + "%" })), q = s(() => ({ right: `calc(${Math.ceil((1 - G.value) * 100)}%) ` })), J = _(), Y = _();
+		}), W = s(() => R), G = i(W), K = s(() => (V.value - R.min) / B.value), q = s(() => ({ right: Math.ceil((1 - K.value) * 100) + "%" })), J = s(() => ({ right: `calc(${Math.ceil((1 - K.value) * 100)}%) ` })), Y = _(), X = _();
 		C(() => R.modelValue, (e) => {
 			H.value = e;
 		});
-		function X(e) {
+		function Z(e) {
 			let t = r(e, R.min, R.max);
 			return Math.round((t + 2 ** -52) * (1 / R.step)) / (1 / R.step);
 		}
-		e(Y, (e) => {
-			t(x(J)?.getBoundingClientRect(), (t) => {
+		e(X, (e) => {
+			t(x(Y)?.getBoundingClientRect(), (t) => {
 				let { dx: n } = e;
-				z.deltaValue = n / t.width * B.value, H.value = X(r((R.modelValue ?? 0) + z.deltaValue, R.min, R.max)), e.stop && (L("update:modelValue", X(V.value)), z.deltaValue = 0);
+				z.deltaValue = n / t.width * B.value, H.value = Z(r((R.modelValue ?? 0) + z.deltaValue, R.min, R.max)), e.stop && (L("update:modelValue", Z(V.value)), z.deltaValue = 0);
 			});
 		});
-		function Z(e) {
-			L("update:modelValue", X(e));
-		}
 		function Q(e) {
-			Z(+e.target.value);
+			L("update:modelValue", Z(e));
 		}
 		function $(e) {
+			Q(+e.target.value);
+		}
+		function ee(e) {
 			[
 				"ArrowDown",
 				"ArrowUp",
@@ -74,7 +74,7 @@ var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section"
 				"Enter"
 			].includes(e.code) && e.preventDefault();
 			let t = e.code === "ArrowUp" || e.code === "ArrowRight" ? R.step * 1 : e.code === "ArrowDown" || e.code === "ArrowLeft" ? R.step * -1 : 0;
-			Z(R.modelValue + t);
+			Q(R.modelValue + t);
 		}
 		return (e, t) => (h(), u("div", {
 			"data-testid": "pl-slider",
@@ -89,36 +89,35 @@ var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section"
 			_: 3
 		})) : l("", !0)])) : l("", !0), R.mode === "text" ? (h(), u("div", O, b(H.value) + b(f.measure), 1)) : l("", !0)]), d("div", k, [d("div", A, [d("div", {
 			ref_key: "barRef",
-			ref: J,
+			ref: Y,
 			"data-testid": "pl-slider-bar",
 			class: "ui-slider__bar"
 		}, [d("div", {
 			"data-testid": "pl-slider-progress",
 			class: "ui-slider__progress",
-			style: m(K.value)
-		}, null, 4)], 512)]), d("div", j, [R.breakpoints ? (h(!0), u(o, { key: 0 }, v(x(W), (e, t) => (h(), u("div", {
+			style: m(q.value)
+		}, null, 4)], 512)]), d("div", j, [R.breakpoints ? (h(!0), u(o, { key: 0 }, v(x(G), (e, t) => (h(), u("div", {
 			key: t,
 			"data-testid": "pl-slider-step",
 			style: m({ right: `${e}%` }),
 			class: "ui-slider__thumb-step"
 		}, null, 4))), 128)) : l("", !0), d("div", {
 			ref_key: "thumbRef",
-			ref: Y,
+			ref: X,
 			"data-testid": "pl-slider-thumb",
 			tabindex: "0",
 			class: "ui-slider__thumb ui-slider__thumb-active",
-			style: m(q.value),
-			onKeydown: $
+			style: m(J.value),
+			onKeydown: ee
 		}, [...t[1] ||= [d("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)]], 36)])])]), d("div", M, [R.mode === "input" ? (h(), u("input", {
 			key: 0,
 			"data-testid": "pl-slider-input",
 			value: H.value,
 			class: "ui-slider__value text-s",
-			onChange: t[0] ||= (e) => Q(e)
+			onChange: t[0] ||= (e) => $(e)
 		}, null, 40, N)) : l("", !0)])], 2), U.value ? (h(), u("div", P, b(U.value), 1)) : l("", !0)], 2));
 	}
 });
-//#endregion
 export { F as default };
 //# sourceMappingURL=Slider.vue2.js.map

package/dist/components/Slider.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/Slider.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, reactive, ref, unref, useSlots, watch } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: number;\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue: 0,\n});\n\nconst range = computed(() => props.max - props.min);\n\nconst localValue = computed(() => {\n return clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max);\n});\n\nconst realtimeVal = ref(props.modelValue);\n\nconst error = computed(() => {\n const v = props.modelValue;\n\n if (!Number.isFinite(v)) {\n return \"Not a number\";\n }\n\n if (v < props.min) {\n return `Min value: ${props.min}`;\n }\n\n if (v > props.max) {\n return `Max value: ${props.max}`;\n }\n\n return getErrorMessage(props.error);\n});\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst position = computed(() => {\n return (localValue.value - props.min) / range.value;\n});\n\nconst progressStyle = computed(() => ({\n right: Math.ceil((1 - position.value) * 100) + \"%\",\n}));\n\nconst thumbStyle = computed(() => {\n const value = Math.ceil((1 - position.value) * 100);\n return {\n right: `calc(${value}%) `,\n };\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef = ref<HTMLElement>();\n\nwatch(\n () => props.modelValue,\n (val) => {\n realtimeVal.value = val;\n },\n);\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nuseMouseCapture(thumbRef, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue = (dx / rect.width) * range.value;\n\n realtimeVal.value = round(\n clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max),\n );\n\n if (ev.stop) {\n emit(\"update:modelValue\", round(localValue.value));\n data.deltaValue = 0;\n }\n });\n});\n\nfunction setModelValue(value: number) {\n emit(\"update:modelValue\", round(value));\n}\n\nfunction updateModelValue(event: Event) {\n setModelValue(+(event.target as HTMLInputElement).value);\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n setModelValue(props.modelValue + nextStep);\n}\n</script>\n\n<template>\n <div\n data-testid=\"pl-slider\"\n :class=\"props.disabled ? 'ui-slider__disabled' : undefined\"\n class=\"ui-slider__envelope\"\n >\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" data-testid=\"pl-slider-label\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"slots.tooltip\"\n data-testid=\"pl-slider-tooltip\"\n class=\"info\"\n position=\"top\"\n >\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <div\n v-if=\"props.mode === 'text'\"\n data-testid=\"pl-slider-value\"\n class=\"ui-slider__value-static text-s\"\n >\n {{ realtimeVal }}{{ measure }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" data-testid=\"pl-slider-bar\" class=\"ui-slider__bar\">\n <div\n data-testid=\"pl-slider-progress\"\n class=\"ui-slider__progress\"\n :style=\"progressStyle\"\n />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n data-testid=\"pl-slider-step\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef\"\n data-testid=\"pl-slider-thumb\"\n tabindex=\"0\"\n class=\"ui-slider__thumb ui-slider__thumb-active\"\n :style=\"thumbStyle\"\n @keydown=\"handleKeyPress\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <input\n v-if=\"props.mode === 'input'\"\n data-testid=\"pl-slider-input\"\n :value=\"realtimeVal\"\n class=\"ui-slider__value text-s\"\n @change=\"updateModelValue($event)\"\n />\n </div>\n </div>\n <!-- <div v-if=\"props.helper\" class=\"ui-slider__helper\">\n {{ props.helper }}\n </div> -->\n <div v-if=\"error\" data-testid=\"pl-slider-error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"Slider.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_unref","_createBlock","PlTooltip","_withCtx","_renderSlot","_createCommentVNode","_normalizeStyle","_Fragment","_renderList","PlTooltip_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","Slider_vue_vue_type_script_setup_true_lang_default","__emit","slots","useSlots","emit","props","__props","data","reactive","range","computed","localValue","clamp","realtimeVal","ref","error","v","getErrorMessage","propsRef","breakpointsRef","useSliderBreakpoints","position","progressStyle","thumbStyle","barRef","thumbRef","val","round","value","unref","ev","dx","rect","setModelValue","updateModelValue","event","handleKeyPress","nextStep","openBlock","createElementBlock","normalizeClass","createElementVNode","toDisplayString","createBlock","withCtx","renderSlot","_ctx","createCommentVNode","normalizeStyle","Fragment","renderList","index","item","_cache","$event"],"sources":["../../src/components/Slider.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, reactive, ref, unref, useSlots, watch } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: number;\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue: 0,\n});\n\nconst range = computed(() => props.max - props.min);\n\nconst localValue = computed(() => {\n return clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max);\n});\n\nconst realtimeVal = ref(props.modelValue);\n\nconst error = computed(() => {\n const v = props.modelValue;\n\n if (!Number.isFinite(v)) {\n return \"Not a number\";\n }\n\n if (v < props.min) {\n return `Min value: ${props.min}`;\n }\n\n if (v > props.max) {\n return `Max value: ${props.max}`;\n }\n\n return getErrorMessage(props.error);\n});\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst position = computed(() => {\n return (localValue.value - props.min) / range.value;\n});\n\nconst progressStyle = computed(() => ({\n right: Math.ceil((1 - position.value) * 100) + \"%\",\n}));\n\nconst thumbStyle = computed(() => {\n const value = Math.ceil((1 - position.value) * 100);\n return {\n right: `calc(${value}%) `,\n };\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef = ref<HTMLElement>();\n\nwatch(\n () => props.modelValue,\n (val) => {\n realtimeVal.value = val;\n },\n);\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nuseMouseCapture(thumbRef, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue = (dx / rect.width) * range.value;\n\n realtimeVal.value = round(\n clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max),\n );\n\n if (ev.stop) {\n emit(\"update:modelValue\", round(localValue.value));\n data.deltaValue = 0;\n }\n });\n});\n\nfunction setModelValue(value: number) {\n emit(\"update:modelValue\", round(value));\n}\n\nfunction updateModelValue(event: Event) {\n setModelValue(+(event.target as HTMLInputElement).value);\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n setModelValue(props.modelValue + nextStep);\n}\n</script>\n\n<template>\n <div\n data-testid=\"pl-slider\"\n :class=\"props.disabled ? 'ui-slider__disabled' : undefined\"\n class=\"ui-slider__envelope\"\n >\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" data-testid=\"pl-slider-label\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"slots.tooltip\"\n data-testid=\"pl-slider-tooltip\"\n class=\"info\"\n position=\"top\"\n >\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <div\n v-if=\"props.mode === 'text'\"\n data-testid=\"pl-slider-value\"\n class=\"ui-slider__value-static text-s\"\n >\n {{ realtimeVal }}{{ measure }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" data-testid=\"pl-slider-bar\" class=\"ui-slider__bar\">\n <div\n data-testid=\"pl-slider-progress\"\n class=\"ui-slider__progress\"\n :style=\"progressStyle\"\n />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n data-testid=\"pl-slider-step\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef\"\n data-testid=\"pl-slider-thumb\"\n tabindex=\"0\"\n class=\"ui-slider__thumb ui-slider__thumb-active\"\n :style=\"thumbStyle\"\n @keydown=\"handleKeyPress\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <input\n v-if=\"props.mode === 'input'\"\n data-testid=\"pl-slider-input\"\n :value=\"realtimeVal\"\n class=\"ui-slider__value text-s\"\n @change=\"updateModelValue($event)\"\n />\n </div>\n </div>\n <!-- <div v-if=\"props.helper\" class=\"ui-slider__helper\">\n {{ props.helper }}\n </div> -->\n <div v-if=\"error\" data-testid=\"pl-slider-error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/SliderRange.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import e from "./SliderRange.vue2.js";
-//#region src/components/SliderRange.vue
+// src/components/SliderRange.vue
 var t = e;
-//#endregion
 export { t as default };
 //# sourceMappingURL=SliderRange.js.map

package/dist/components/SliderRange.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderRange.js","names":[],"sources":["../../src/components/SliderRange.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, reactive, ref, unref, useSlots, watch } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport InputRange from \"./InputRange.vue\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: [number, number];\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue1: 0,\n deltaValue2: 0,\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef1 = ref<HTMLElement>();\nconst thumbRef2 = ref<HTMLElement>();\nconst inputRange = ref<[number, number]>(props.modelValue);\nconst leftDelta = ref(props.modelValue[0]);\nconst rightDelta = ref(props.modelValue[1]);\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst textModelValue = computed(() =>\n [leftDelta.value, rightDelta.value].sort((a, b) => a - b).join(\"-\"),\n);\n\nconst range = computed(() => props.max - props.min);\n\nconst localValue1 = computed(() => {\n return clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max);\n});\n\nconst localValue2 = computed(() =>\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n);\n\nconst error = computed(() => {\n const v = props.modelValue as unknown;\n\n const isValidModel = Array.isArray(v) && v.length === 2 && v.every((it) => Number.isFinite(it));\n\n if (!isValidModel) {\n return \"Expected model [number, number]\";\n }\n\n return getErrorMessage(props.error);\n});\n\nconst position1 = computed(() => {\n return (localValue1.value - props.min) / range.value;\n});\n\nconst position2 = computed(() => {\n return (localValue2.value - props.min) / range.value;\n});\n\nconst leftRight = computed(() => getLeftAndRight());\n\nconst progressStyle = computed(() => ({\n right: leftRight.value[0] + \"%\",\n left: 100 - leftRight.value[1] + \"%\",\n}));\n\nconst thumbStyle1 = computed(() => ({\n right: Math.ceil((1 - position1.value) * 100) + \"%\",\n}));\n\nconst thumbStyle2 = computed(() => ({\n right: Math.ceil((1 - position2.value) * 100) + \"%\",\n}));\n\nwatch(\n () => props.modelValue,\n (value: [number, number]) => {\n inputRange.value = value;\n leftDelta.value = +value[0];\n rightDelta.value = +value[1];\n },\n { immediate: true },\n);\n\nuseMouseCapture(thumbRef1, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue1 = (dx / rect.width) * range.value;\n\n leftDelta.value = round(\n clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max),\n );\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort(\n (a, b) => a - b,\n );\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value)]);\n data.deltaValue1 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef2, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue2 = (dx / rect.width) * range.value;\n\n rightDelta.value = round(\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n );\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort(\n (a, b) => a - b,\n );\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value)]);\n data.deltaValue2 = 0;\n }\n });\n});\n\nfunction getLeftAndRight() {\n const point1 = Math.ceil((1 - position1.value) * 100);\n const point2 = Math.ceil((1 - position2.value) * 100);\n return [point1, point2].sort((a, b) => a - b);\n}\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nfunction setModelValue(value: [number, number]) {\n emit(\"update:modelValue\", value);\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }, index: number) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n const arr: [number, number] = [...props.modelValue];\n arr[index] = clamp(arr[index] + nextStep, props.min, props.max);\n setModelValue(arr);\n}\n</script>\n\n<template>\n <!-- {{ leftDelta }} {{ rightDelta }} -->\n <div\n data-testid=\"pl-slider-range\"\n :class=\"props.disabled ? 'ui-slider__disabled' : undefined\"\n class=\"ui-slider__envelope\"\n >\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" data-testid=\"pl-slider-range-label\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"slots.tooltip\"\n data-testid=\"pl-slider-range-tooltip\"\n class=\"info\"\n position=\"top\"\n >\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <div\n v-if=\"props.mode === 'text'\"\n data-testid=\"pl-slider-range-value\"\n class=\"ui-slider__value-static text-s\"\n >\n {{ textModelValue }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" data-testid=\"pl-slider-range-bar\" class=\"ui-slider__bar\">\n <div\n data-testid=\"pl-slider-range-progress\"\n class=\"ui-slider__progress\"\n :style=\"progressStyle\"\n />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n data-testid=\"pl-slider-range-step\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef1\"\n data-testid=\"pl-slider-range-thumb\"\n :style=\"thumbStyle1\"\n class=\"ui-slider__thumb\"\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 0)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef2\"\n data-testid=\"pl-slider-range-thumb\"\n :style=\"thumbStyle2\"\n class=\"ui-slider__thumb\"\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 1)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <InputRange\n v-if=\"props.mode === 'input'\"\n v-model=\"inputRange\"\n data-testid=\"pl-slider-range-input\"\n class=\"ui-focused-border\"\n @change=\"setModelValue\"\n />\n </div>\n </div>\n <!-- <div v-if=\"helper\" class=\"ui-slider__helper\">\n {{ helper }}\n </div> -->\n <div v-if=\"error\" data-testid=\"pl-slider-range-error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"SliderRange.js","names":["_sfc_main","SliderRange_vue_vue_type_script_setup_true_lang_default","SliderRange_default"],"sources":["../../src/components/SliderRange.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, reactive, ref, unref, useSlots, watch } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport InputRange from \"./InputRange.vue\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: [number, number];\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue1: 0,\n deltaValue2: 0,\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef1 = ref<HTMLElement>();\nconst thumbRef2 = ref<HTMLElement>();\nconst inputRange = ref<[number, number]>(props.modelValue);\nconst leftDelta = ref(props.modelValue[0]);\nconst rightDelta = ref(props.modelValue[1]);\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst textModelValue = computed(() =>\n [leftDelta.value, rightDelta.value].sort((a, b) => a - b).join(\"-\"),\n);\n\nconst range = computed(() => props.max - props.min);\n\nconst localValue1 = computed(() => {\n return clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max);\n});\n\nconst localValue2 = computed(() =>\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n);\n\nconst error = computed(() => {\n const v = props.modelValue as unknown;\n\n const isValidModel = Array.isArray(v) && v.length === 2 && v.every((it) => Number.isFinite(it));\n\n if (!isValidModel) {\n return \"Expected model [number, number]\";\n }\n\n return getErrorMessage(props.error);\n});\n\nconst position1 = computed(() => {\n return (localValue1.value - props.min) / range.value;\n});\n\nconst position2 = computed(() => {\n return (localValue2.value - props.min) / range.value;\n});\n\nconst leftRight = computed(() => getLeftAndRight());\n\nconst progressStyle = computed(() => ({\n right: leftRight.value[0] + \"%\",\n left: 100 - leftRight.value[1] + \"%\",\n}));\n\nconst thumbStyle1 = computed(() => ({\n right: Math.ceil((1 - position1.value) * 100) + \"%\",\n}));\n\nconst thumbStyle2 = computed(() => ({\n right: Math.ceil((1 - position2.value) * 100) + \"%\",\n}));\n\nwatch(\n () => props.modelValue,\n (value: [number, number]) => {\n inputRange.value = value;\n leftDelta.value = +value[0];\n rightDelta.value = +value[1];\n },\n { immediate: true },\n);\n\nuseMouseCapture(thumbRef1, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue1 = (dx / rect.width) * range.value;\n\n leftDelta.value = round(\n clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max),\n );\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort(\n (a, b) => a - b,\n );\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value)]);\n data.deltaValue1 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef2, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue2 = (dx / rect.width) * range.value;\n\n rightDelta.value = round(\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n );\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort(\n (a, b) => a - b,\n );\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value)]);\n data.deltaValue2 = 0;\n }\n });\n});\n\nfunction getLeftAndRight() {\n const point1 = Math.ceil((1 - position1.value) * 100);\n const point2 = Math.ceil((1 - position2.value) * 100);\n return [point1, point2].sort((a, b) => a - b);\n}\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nfunction setModelValue(value: [number, number]) {\n emit(\"update:modelValue\", value);\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }, index: number) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n const arr: [number, number] = [...props.modelValue];\n arr[index] = clamp(arr[index] + nextStep, props.min, props.max);\n setModelValue(arr);\n}\n</script>\n\n<template>\n <!-- {{ leftDelta }} {{ rightDelta }} -->\n <div\n data-testid=\"pl-slider-range\"\n :class=\"props.disabled ? 'ui-slider__disabled' : undefined\"\n class=\"ui-slider__envelope\"\n >\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" data-testid=\"pl-slider-range-label\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"slots.tooltip\"\n data-testid=\"pl-slider-range-tooltip\"\n class=\"info\"\n position=\"top\"\n >\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <div\n v-if=\"props.mode === 'text'\"\n data-testid=\"pl-slider-range-value\"\n class=\"ui-slider__value-static text-s\"\n >\n {{ textModelValue }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" data-testid=\"pl-slider-range-bar\" class=\"ui-slider__bar\">\n <div\n data-testid=\"pl-slider-range-progress\"\n class=\"ui-slider__progress\"\n :style=\"progressStyle\"\n />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n data-testid=\"pl-slider-range-step\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef1\"\n data-testid=\"pl-slider-range-thumb\"\n :style=\"thumbStyle1\"\n class=\"ui-slider__thumb\"\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 0)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef2\"\n data-testid=\"pl-slider-range-thumb\"\n :style=\"thumbStyle2\"\n class=\"ui-slider__thumb\"\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 1)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <InputRange\n v-if=\"props.mode === 'input'\"\n v-model=\"inputRange\"\n data-testid=\"pl-slider-range-input\"\n class=\"ui-focused-border\"\n @change=\"setModelValue\"\n />\n </div>\n </div>\n <!-- <div v-if=\"helper\" class=\"ui-slider__helper\">\n {{ helper }}\n </div> -->\n <div v-if=\"error\" data-testid=\"pl-slider-range-error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/SliderRange.vue2.js CHANGED Viewed

@@ -6,21 +6,21 @@ import { clamp as r } from "../helpers/math.js";
 import { useSliderBreakpoints as i } from "../composition/useSliderBreakpoints.js";
 import { getErrorMessage as a } from "../helpers/error.js";
 import o from "./InputRange.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, openBlock as g, reactive as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useSlots as C, watch as w, withCtx as ee } from "vue";
-//#region src/components/SliderRange.vue?vue&type=script&setup=true&lang.ts
-var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section" }, D = {
+import { Fragment as ee, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, defineComponent as f, normalizeClass as p, normalizeStyle as m, openBlock as h, reactive as g, ref as _, renderList as te, renderSlot as v, toDisplayString as y, unref as b, useSlots as x, watch as S, withCtx as C } from "vue";
+// src/components/SliderRange.vue?vue&type=script&setup=true&lang.ts
+var w = { class: "ui-slider__wrapper" }, T = { class: "ui-slider__label-section" }, E = {
 	key: 0,
 	"data-testid": "pl-slider-range-label",
 	class: "text-s"
-}, O = {
+}, D = {
 	key: 1,
 	"data-testid": "pl-slider-range-value",
 	class: "ui-slider__value-static text-s"
-}, k = { class: "ui-slider__base" }, A = { class: "ui-slider__container" }, j = { class: "ui-slider__container ui-slider__container-thumb" }, M = { class: "ui-slider__input-wrapper d-flex" }, te = {
+}, O = { class: "ui-slider__base" }, k = { class: "ui-slider__container" }, A = { class: "ui-slider__container ui-slider__container-thumb" }, ne = { class: "ui-slider__input-wrapper d-flex" }, re = {
 	key: 0,
 	"data-testid": "pl-slider-range-error",
 	class: "ui-slider__error"
-}, N = /* @__PURE__ */ p({
+}, j = /*@__PURE__*/ f({
 	__name: "SliderRange",
 	props: {
 		modelValue: {},
@@ -42,39 +42,39 @@ var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section"
 		}
 	},
 	emits: ["update:modelValue"],
-	setup(p, { emit: N }) {
-		let ne = C(), re = N, P = p, F = _({
+	setup(f, { emit: j }) {
+		let ie = x(), M = j, N = f, P = g({
 			deltaValue1: 0,
 			deltaValue2: 0
-		}), I = v(), L = v(), R = v(), z = v(P.modelValue), B = v(P.modelValue[0]), V = v(P.modelValue[1]), H = i(c(() => P)), U = c(() => [B.value, V.value].sort((e, t) => e - t).join("-")), W = c(() => P.max - P.min), G = c(() => r((P.modelValue[0] ?? 0) + F.deltaValue1, P.min, P.max)), K = c(() => r((P.modelValue[1] ?? 0) + F.deltaValue2, P.min, P.max)), q = c(() => {
-			let e = P.modelValue;
-			return Array.isArray(e) && e.length === 2 && e.every((e) => Number.isFinite(e)) ? a(P.error) : "Expected model [number, number]";
-		}), J = c(() => (G.value - P.min) / W.value), Y = c(() => (K.value - P.min) / W.value), X = c(() => se()), ie = c(() => ({
+		}), F = _(), I = _(), L = _(), R = _(N.modelValue), z = _(N.modelValue[0]), B = _(N.modelValue[1]), V = s(() => N), H = i(V), U = s(() => [z.value, B.value].sort((e, t) => e - t).join("-")), W = s(() => N.max - N.min), G = s(() => r((N.modelValue[0] ?? 0) + P.deltaValue1, N.min, N.max)), K = s(() => r((N.modelValue[1] ?? 0) + P.deltaValue2, N.min, N.max)), q = s(() => {
+			let e = N.modelValue;
+			return Array.isArray(e) && e.length === 2 && e.every((e) => Number.isFinite(e)) ? a(N.error) : "Expected model [number, number]";
+		}), J = s(() => (G.value - N.min) / W.value), Y = s(() => (K.value - N.min) / W.value), X = s(() => ce()), ae = s(() => ({
 			right: X.value[0] + "%",
 			left: 100 - X.value[1] + "%"
-		})), ae = c(() => ({ right: Math.ceil((1 - J.value) * 100) + "%" })), oe = c(() => ({ right: Math.ceil((1 - Y.value) * 100) + "%" }));
-		w(() => P.modelValue, (e) => {
-			z.value = e, B.value = +e[0], V.value = +e[1];
-		}, { immediate: !0 }), e(L, (e) => {
-			t(S(I)?.getBoundingClientRect(), (t) => {
+		})), oe = s(() => ({ right: Math.ceil((1 - J.value) * 100) + "%" })), se = s(() => ({ right: Math.ceil((1 - Y.value) * 100) + "%" }));
+		S(() => N.modelValue, (e) => {
+			R.value = e, z.value = +e[0], B.value = +e[1];
+		}, { immediate: !0 }), e(I, (e) => {
+			t(b(F)?.getBoundingClientRect(), (t) => {
 				let { dx: n } = e;
-				F.deltaValue1 = n / t.width * W.value, B.value = Z(r((P.modelValue[0] ?? 0) + F.deltaValue1, P.min, P.max)), z.value = [B.value, V.value].sort((e, t) => e - t), e.stop && (Q([Z(G.value), Z(K.value)]), F.deltaValue1 = 0);
+				P.deltaValue1 = n / t.width * W.value, z.value = Z(r((N.modelValue[0] ?? 0) + P.deltaValue1, N.min, N.max)), R.value = [z.value, B.value].sort((e, t) => e - t), e.stop && (Q([Z(G.value), Z(K.value)]), P.deltaValue1 = 0);
 			});
-		}), e(R, (e) => {
-			t(S(I)?.getBoundingClientRect(), (t) => {
+		}), e(L, (e) => {
+			t(b(F)?.getBoundingClientRect(), (t) => {
 				let { dx: n } = e;
-				F.deltaValue2 = n / t.width * W.value, V.value = Z(r((P.modelValue[1] ?? 0) + F.deltaValue2, P.min, P.max)), z.value = [B.value, V.value].sort((e, t) => e - t), e.stop && (Q([Z(G.value), Z(K.value)]), F.deltaValue2 = 0);
+				P.deltaValue2 = n / t.width * W.value, B.value = Z(r((N.modelValue[1] ?? 0) + P.deltaValue2, N.min, N.max)), R.value = [z.value, B.value].sort((e, t) => e - t), e.stop && (Q([Z(G.value), Z(K.value)]), P.deltaValue2 = 0);
 			});
 		});
-		function se() {
+		function ce() {
 			return [Math.ceil((1 - J.value) * 100), Math.ceil((1 - Y.value) * 100)].sort((e, t) => e - t);
 		}
 		function Z(e) {
-			let t = r(e, P.min, P.max);
-			return Math.round((t + 2 ** -52) * (1 / P.step)) / (1 / P.step);
+			let t = r(e, N.min, N.max);
+			return Math.round((t + 2 ** -52) * (1 / N.step)) / (1 / N.step);
 		}
 		function Q(e) {
-			re("update:modelValue", e);
+			M("update:modelValue", e);
 		}
 		function $(e, t) {
 			[
@@ -84,65 +84,64 @@ var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section"
 				"ArrowLeft",
 				"Enter"
 			].includes(e.code) && e.preventDefault();
-			let n = e.code === "ArrowUp" || e.code === "ArrowRight" ? P.step * 1 : e.code === "ArrowDown" || e.code === "ArrowLeft" ? P.step * -1 : 0, i = [...P.modelValue];
-			i[t] = r(i[t] + n, P.min, P.max), Q(i);
+			let n = e.code === "ArrowUp" || e.code === "ArrowRight" ? N.step * 1 : e.code === "ArrowDown" || e.code === "ArrowLeft" ? N.step * -1 : 0, i = [...N.modelValue];
+			i[t] = r(i[t] + n, N.min, N.max), Q(i);
 		}
-		return (e, t) => (g(), d("div", {
+		return (e, t) => (h(), u("div", {
 			"data-testid": "pl-slider-range",
-			class: m([P.disabled ? "ui-slider__disabled" : void 0, "ui-slider__envelope"])
-		}, [f("div", { class: m([`ui-slider__mode-${P.mode}`, "ui-slider"]) }, [f("div", T, [f("div", E, [p.label ? (g(), d("label", D, [f("span", null, x(p.label), 1), S(ne).tooltip ? (g(), l(S(n), {
+			class: p([N.disabled ? "ui-slider__disabled" : void 0, "ui-slider__envelope"])
+		}, [d("div", { class: p([`ui-slider__mode-${N.mode}`, "ui-slider"]) }, [d("div", w, [d("div", T, [f.label ? (h(), u("label", E, [d("span", null, y(f.label), 1), b(ie).tooltip ? (h(), c(b(n), {
 			key: 0,
 			"data-testid": "pl-slider-range-tooltip",
 			class: "info",
 			position: "top"
 		}, {
-			tooltip: ee(() => [b(e.$slots, "tooltip")]),
+			tooltip: C(() => [v(e.$slots, "tooltip")]),
 			_: 3
-		})) : u("", !0)])) : u("", !0), P.mode === "text" ? (g(), d("div", O, x(U.value), 1)) : u("", !0)]), f("div", k, [f("div", A, [f("div", {
+		})) : l("", !0)])) : l("", !0), N.mode === "text" ? (h(), u("div", D, y(U.value), 1)) : l("", !0)]), d("div", O, [d("div", k, [d("div", {
 			ref_key: "barRef",
-			ref: I,
+			ref: F,
 			"data-testid": "pl-slider-range-bar",
 			class: "ui-slider__bar"
-		}, [f("div", {
+		}, [d("div", {
 			"data-testid": "pl-slider-range-progress",
 			class: "ui-slider__progress",
-			style: h(ie.value)
-		}, null, 4)], 512)]), f("div", j, [
-			P.breakpoints ? (g(!0), d(s, { key: 0 }, y(S(H), (e, t) => (g(), d("div", {
+			style: m(ae.value)
+		}, null, 4)], 512)]), d("div", A, [
+			N.breakpoints ? (h(!0), u(ee, { key: 0 }, te(b(H), (e, t) => (h(), u("div", {
 				key: t,
 				"data-testid": "pl-slider-range-step",
-				style: h({ right: `${e}%` }),
+				style: m({ right: `${e}%` }),
 				class: "ui-slider__thumb-step"
-			}, null, 4))), 128)) : u("", !0),
-			f("div", {
+			}, null, 4))), 128)) : l("", !0),
+			d("div", {
 				ref_key: "thumbRef1",
-				ref: L,
+				ref: I,
 				"data-testid": "pl-slider-range-thumb",
-				style: h(ae.value),
+				style: m(oe.value),
 				class: "ui-slider__thumb",
 				tabindex: "0",
 				onKeydown: t[0] ||= (e) => $(e, 0)
-			}, [...t[3] ||= [f("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)]], 36),
-			f("div", {
+			}, [...t[3] ||= [d("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)]], 36),
+			d("div", {
 				ref_key: "thumbRef2",
-				ref: R,
+				ref: L,
 				"data-testid": "pl-slider-range-thumb",
-				style: h(oe.value),
+				style: m(se.value),
 				class: "ui-slider__thumb",
 				tabindex: "0",
 				onKeydown: t[1] ||= (e) => $(e, 1)
-			}, [...t[4] ||= [f("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)]], 36)
-		])])]), f("div", M, [P.mode === "input" ? (g(), l(o, {
+			}, [...t[4] ||= [d("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)]], 36)
+		])])]), d("div", ne, [N.mode === "input" ? (h(), c(o, {
 			key: 0,
-			modelValue: z.value,
-			"onUpdate:modelValue": t[2] ||= (e) => z.value = e,
+			modelValue: R.value,
+			"onUpdate:modelValue": t[2] ||= (e) => R.value = e,
 			"data-testid": "pl-slider-range-input",
 			class: "ui-focused-border",
 			onChange: Q
-		}, null, 8, ["modelValue"])) : u("", !0)])], 2), q.value ? (g(), d("div", te, x(q.value), 1)) : u("", !0)], 2));
+		}, null, 8, ["modelValue"])) : l("", !0)])], 2), q.value ? (h(), u("div", re, y(q.value), 1)) : l("", !0)], 2));
 	}
 });
-//#endregion
-export { N as default };
+export { j as default };
 //# sourceMappingURL=SliderRange.vue2.js.map

package/dist/components/SliderRange.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderRange.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/SliderRange.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, reactive, ref, unref, useSlots, watch } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport InputRange from \"./InputRange.vue\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: [number, number];\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue1: 0,\n deltaValue2: 0,\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef1 = ref<HTMLElement>();\nconst thumbRef2 = ref<HTMLElement>();\nconst inputRange = ref<[number, number]>(props.modelValue);\nconst leftDelta = ref(props.modelValue[0]);\nconst rightDelta = ref(props.modelValue[1]);\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst textModelValue = computed(() =>\n [leftDelta.value, rightDelta.value].sort((a, b) => a - b).join(\"-\"),\n);\n\nconst range = computed(() => props.max - props.min);\n\nconst localValue1 = computed(() => {\n return clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max);\n});\n\nconst localValue2 = computed(() =>\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n);\n\nconst error = computed(() => {\n const v = props.modelValue as unknown;\n\n const isValidModel = Array.isArray(v) && v.length === 2 && v.every((it) => Number.isFinite(it));\n\n if (!isValidModel) {\n return \"Expected model [number, number]\";\n }\n\n return getErrorMessage(props.error);\n});\n\nconst position1 = computed(() => {\n return (localValue1.value - props.min) / range.value;\n});\n\nconst position2 = computed(() => {\n return (localValue2.value - props.min) / range.value;\n});\n\nconst leftRight = computed(() => getLeftAndRight());\n\nconst progressStyle = computed(() => ({\n right: leftRight.value[0] + \"%\",\n left: 100 - leftRight.value[1] + \"%\",\n}));\n\nconst thumbStyle1 = computed(() => ({\n right: Math.ceil((1 - position1.value) * 100) + \"%\",\n}));\n\nconst thumbStyle2 = computed(() => ({\n right: Math.ceil((1 - position2.value) * 100) + \"%\",\n}));\n\nwatch(\n () => props.modelValue,\n (value: [number, number]) => {\n inputRange.value = value;\n leftDelta.value = +value[0];\n rightDelta.value = +value[1];\n },\n { immediate: true },\n);\n\nuseMouseCapture(thumbRef1, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue1 = (dx / rect.width) * range.value;\n\n leftDelta.value = round(\n clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max),\n );\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort(\n (a, b) => a - b,\n );\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value)]);\n data.deltaValue1 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef2, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue2 = (dx / rect.width) * range.value;\n\n rightDelta.value = round(\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n );\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort(\n (a, b) => a - b,\n );\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value)]);\n data.deltaValue2 = 0;\n }\n });\n});\n\nfunction getLeftAndRight() {\n const point1 = Math.ceil((1 - position1.value) * 100);\n const point2 = Math.ceil((1 - position2.value) * 100);\n return [point1, point2].sort((a, b) => a - b);\n}\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nfunction setModelValue(value: [number, number]) {\n emit(\"update:modelValue\", value);\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }, index: number) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n const arr: [number, number] = [...props.modelValue];\n arr[index] = clamp(arr[index] + nextStep, props.min, props.max);\n setModelValue(arr);\n}\n</script>\n\n<template>\n <!-- {{ leftDelta }} {{ rightDelta }} -->\n <div\n data-testid=\"pl-slider-range\"\n :class=\"props.disabled ? 'ui-slider__disabled' : undefined\"\n class=\"ui-slider__envelope\"\n >\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" data-testid=\"pl-slider-range-label\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"slots.tooltip\"\n data-testid=\"pl-slider-range-tooltip\"\n class=\"info\"\n position=\"top\"\n >\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <div\n v-if=\"props.mode === 'text'\"\n data-testid=\"pl-slider-range-value\"\n class=\"ui-slider__value-static text-s\"\n >\n {{ textModelValue }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" data-testid=\"pl-slider-range-bar\" class=\"ui-slider__bar\">\n <div\n data-testid=\"pl-slider-range-progress\"\n class=\"ui-slider__progress\"\n :style=\"progressStyle\"\n />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n data-testid=\"pl-slider-range-step\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef1\"\n data-testid=\"pl-slider-range-thumb\"\n :style=\"thumbStyle1\"\n class=\"ui-slider__thumb\"\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 0)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef2\"\n data-testid=\"pl-slider-range-thumb\"\n :style=\"thumbStyle2\"\n class=\"ui-slider__thumb\"\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 1)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <InputRange\n v-if=\"props.mode === 'input'\"\n v-model=\"inputRange\"\n data-testid=\"pl-slider-range-input\"\n class=\"ui-focused-border\"\n @change=\"setModelValue\"\n />\n </div>\n </div>\n <!-- <div v-if=\"helper\" class=\"ui-slider__helper\">\n {{ helper }}\n </div> -->\n <div v-if=\"error\" data-testid=\"pl-slider-range-error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"SliderRange.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_unref","_createBlock","PlTooltip","_withCtx","_renderSlot","_createCommentVNode","_normalizeStyle","_Fragment","_renderList","InputRange","PlTooltip_default","InputRange_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","SliderRange_vue_vue_type_script_setup_true_lang_default","__emit","slots","useSlots","emit","props","__props","data","reactive","barRef","ref","thumbRef1","thumbRef2","inputRange","leftDelta","rightDelta","propsRef","computed","breakpointsRef","useSliderBreakpoints","textModelValue","a","b","range","localValue1","clamp","localValue2","error","v","it","getErrorMessage","position1","position2","leftRight","getLeftAndRight","progressStyle","thumbStyle1","thumbStyle2","watch","value","useMouseCapture","unref","ev","dx","rect","round","setModelValue","handleKeyPress","nextStep","arr","index","openBlock","createElementBlock","normalizeClass","createElementVNode","toDisplayString","createBlock","withCtx","renderSlot","_ctx","createCommentVNode","normalizeStyle","Fragment","renderList","item","_cache","$event"],"sources":["../../src/components/SliderRange.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, reactive, ref, unref, useSlots, watch } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport InputRange from \"./InputRange.vue\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: [number, number];\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue1: 0,\n deltaValue2: 0,\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef1 = ref<HTMLElement>();\nconst thumbRef2 = ref<HTMLElement>();\nconst inputRange = ref<[number, number]>(props.modelValue);\nconst leftDelta = ref(props.modelValue[0]);\nconst rightDelta = ref(props.modelValue[1]);\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst textModelValue = computed(() =>\n [leftDelta.value, rightDelta.value].sort((a, b) => a - b).join(\"-\"),\n);\n\nconst range = computed(() => props.max - props.min);\n\nconst localValue1 = computed(() => {\n return clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max);\n});\n\nconst localValue2 = computed(() =>\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n);\n\nconst error = computed(() => {\n const v = props.modelValue as unknown;\n\n const isValidModel = Array.isArray(v) && v.length === 2 && v.every((it) => Number.isFinite(it));\n\n if (!isValidModel) {\n return \"Expected model [number, number]\";\n }\n\n return getErrorMessage(props.error);\n});\n\nconst position1 = computed(() => {\n return (localValue1.value - props.min) / range.value;\n});\n\nconst position2 = computed(() => {\n return (localValue2.value - props.min) / range.value;\n});\n\nconst leftRight = computed(() => getLeftAndRight());\n\nconst progressStyle = computed(() => ({\n right: leftRight.value[0] + \"%\",\n left: 100 - leftRight.value[1] + \"%\",\n}));\n\nconst thumbStyle1 = computed(() => ({\n right: Math.ceil((1 - position1.value) * 100) + \"%\",\n}));\n\nconst thumbStyle2 = computed(() => ({\n right: Math.ceil((1 - position2.value) * 100) + \"%\",\n}));\n\nwatch(\n () => props.modelValue,\n (value: [number, number]) => {\n inputRange.value = value;\n leftDelta.value = +value[0];\n rightDelta.value = +value[1];\n },\n { immediate: true },\n);\n\nuseMouseCapture(thumbRef1, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue1 = (dx / rect.width) * range.value;\n\n leftDelta.value = round(\n clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max),\n );\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort(\n (a, b) => a - b,\n );\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value)]);\n data.deltaValue1 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef2, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n\n data.deltaValue2 = (dx / rect.width) * range.value;\n\n rightDelta.value = round(\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n );\n\n inputRange.value = ([leftDelta.value, rightDelta.value] as [number, number]).sort(\n (a, b) => a - b,\n );\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value)]);\n data.deltaValue2 = 0;\n }\n });\n});\n\nfunction getLeftAndRight() {\n const point1 = Math.ceil((1 - position1.value) * 100);\n const point2 = Math.ceil((1 - position2.value) * 100);\n return [point1, point2].sort((a, b) => a - b);\n}\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nfunction setModelValue(value: [number, number]) {\n emit(\"update:modelValue\", value);\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }, index: number) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n const arr: [number, number] = [...props.modelValue];\n arr[index] = clamp(arr[index] + nextStep, props.min, props.max);\n setModelValue(arr);\n}\n</script>\n\n<template>\n <!-- {{ leftDelta }} {{ rightDelta }} -->\n <div\n data-testid=\"pl-slider-range\"\n :class=\"props.disabled ? 'ui-slider__disabled' : undefined\"\n class=\"ui-slider__envelope\"\n >\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" data-testid=\"pl-slider-range-label\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"slots.tooltip\"\n data-testid=\"pl-slider-range-tooltip\"\n class=\"info\"\n position=\"top\"\n >\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <div\n v-if=\"props.mode === 'text'\"\n data-testid=\"pl-slider-range-value\"\n class=\"ui-slider__value-static text-s\"\n >\n {{ textModelValue }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" data-testid=\"pl-slider-range-bar\" class=\"ui-slider__bar\">\n <div\n data-testid=\"pl-slider-range-progress\"\n class=\"ui-slider__progress\"\n :style=\"progressStyle\"\n />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n data-testid=\"pl-slider-range-step\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef1\"\n data-testid=\"pl-slider-range-thumb\"\n :style=\"thumbStyle1\"\n class=\"ui-slider__thumb\"\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 0)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef2\"\n data-testid=\"pl-slider-range-thumb\"\n :style=\"thumbStyle2\"\n class=\"ui-slider__thumb\"\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 1)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <InputRange\n v-if=\"props.mode === 'input'\"\n v-model=\"inputRange\"\n data-testid=\"pl-slider-range-input\"\n class=\"ui-focused-border\"\n @change=\"setModelValue\"\n />\n </div>\n </div>\n <!-- <div v-if=\"helper\" class=\"ui-slider__helper\">\n {{ helper }}\n </div> -->\n <div v-if=\"error\" data-testid=\"pl-slider-range-error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/SliderRangeTriple.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import e from "./SliderRangeTriple.vue2.js";
-//#region src/components/SliderRangeTriple.vue
+// src/components/SliderRangeTriple.vue
 var t = e;
-//#endregion
 export { t as default };
 //# sourceMappingURL=SliderRangeTriple.js.map

package/dist/components/SliderRangeTriple.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderRangeTriple.js","names":[],"sources":["../../src/components/SliderRangeTriple.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onMounted, reactive, ref, unref, useSlots } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\ntype ModelType = [number, number, number];\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: ModelType;\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"%\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue1: 0,\n deltaValue2: 0,\n deltaValue3: 0,\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef1 = ref<HTMLElement>();\nconst thumbRef2 = ref<HTMLElement>();\nconst thumbRef3 = ref<HTMLElement>();\n\nconst range = computed(() => props.max - props.min);\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst localValue1 = computed(() =>\n clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max),\n);\nconst localValue2 = computed(() =>\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n);\nconst localValue3 = computed(() =>\n clamp((props.modelValue[2] ?? 0) + data.deltaValue3, props.min, props.max),\n);\n\nconst error = computed(() => {\n const v = props.modelValue as unknown;\n\n const isValidModel = Array.isArray(v) && v.length === 3 && v.every((it) => Number.isFinite(it));\n\n if (!isValidModel) {\n return \"Expected model [number, number, number]\";\n }\n\n const errors: string[] = [];\n\n [...props.modelValue].forEach((v) => {\n if (v > props.max) {\n errors.push(`Max model value must be lower than max props ${props.max}.`);\n }\n if (v < props.min) {\n errors.push(\"Min model value must be greater than max props.\");\n }\n });\n\n if (errors.length > 0) {\n return errors.join(\" \");\n }\n\n return getErrorMessage(props.error);\n});\n\nconst position1 = computed(() => {\n return (localValue1.value - props.min) / range.value;\n});\n\nconst position2 = computed(() => {\n return (localValue2.value - props.min) / range.value;\n});\n\nconst position3 = computed(() => {\n return (localValue3.value - props.min) / range.value;\n});\n\nconst leftRight = computed(() => getLeftAndRight());\n\nconst progressStyle = computed(() => ({\n right: leftRight.value[0] + \"%\",\n left: 100 - leftRight.value[2] + \"%\",\n}));\n\nconst thumbStyle1 = computed(() => ({\n right: Math.ceil((1 - position1.value) * 100) + \"%\",\n}));\n\nconst thumbStyle2 = computed(() => ({\n right: Math.ceil((1 - position2.value) * 100) + \"%\",\n}));\n\nconst thumbStyle3 = computed(() => ({\n right: Math.ceil((1 - position3.value) * 100) + \"%\",\n}));\n\nuseMouseCapture(thumbRef1, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue1 = (dx / rect.width) * range.value;\n\n if (thumbRef1.value) {\n updateDatasetForThumb(thumbRef1.value, props.modelValue[0], data.deltaValue1);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue1 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef2, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue2 = (dx / rect.width) * range.value;\n\n if (thumbRef2.value) {\n updateDatasetForThumb(thumbRef2.value, props.modelValue[1], data.deltaValue2);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue2 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef3, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue3 = (dx / rect.width) * range.value;\n\n if (thumbRef3.value) {\n updateDatasetForThumb(thumbRef3.value, props.modelValue[2], data.deltaValue3);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue3 = 0;\n }\n });\n});\n\nfunction updateDatasetForThumb(thumb: HTMLElement, modelVal: number, delta: number) {\n const value = round(clamp((modelVal ?? 0) + delta, props.min, props.max));\n thumb.dataset.percent = `${value}${props.measure}`;\n getHint();\n}\n\nfunction getLeftAndRight() {\n const point1 = Math.ceil((1 - position1.value) * 100);\n const point2 = Math.ceil((1 - position2.value) * 100);\n const point3 = Math.ceil((1 - position3.value) * 100);\n return [point1, point2, point3].sort((a, b) => a - b);\n}\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nfunction setModelValue(value: ModelType) {\n emit(\"update:modelValue\", value);\n}\n\nfunction getHint() {\n const right1 = Number(thumbStyle1.value.right.substring(0, thumbStyle1.value.right.length - 1));\n const right2 = Number(thumbStyle2.value.right.substring(0, thumbStyle2.value.right.length - 1));\n const right3 = Number(thumbStyle3.value.right.substring(0, thumbStyle3.value.right.length - 1));\n\n const arr = [\n { r: right1, th: thumbRef1 },\n { r: right2, th: thumbRef2 },\n { r: right3, th: thumbRef3 },\n ].sort((a, b) => a.r - b.r);\n\n if (arr[0].th.value) {\n arr[0].th.value.dataset.hint = \"high\";\n }\n if (arr[1].th.value) {\n arr[1].th.value.dataset.hint = \"mid\";\n }\n\n if (arr[2].th.value) {\n arr[2].th.value.dataset.hint = \"low\";\n }\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }, index: number) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n const arr: ModelType = [...props.modelValue];\n arr[index] = clamp(arr[index] + nextStep, props.min, props.max);\n setModelValue(arr);\n getHint();\n}\n\nonMounted(() => {\n getHint();\n});\n</script>\n\n<template>\n <div\n data-testid=\"pl-slider-range-triple\"\n :class=\"props.disabled ? 'ui-slider__disabled' : undefined\"\n class=\"ui-slider__envelope ui-slider__triple\"\n >\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" data-testid=\"pl-slider-range-triple-label\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"slots.tooltip\"\n data-testid=\"pl-slider-range-triple-tooltip\"\n class=\"info\"\n position=\"top\"\n >\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" data-testid=\"pl-slider-range-triple-bar\" class=\"ui-slider__bar\">\n <div\n data-testid=\"pl-slider-range-triple-progress\"\n class=\"ui-slider__progress\"\n :style=\"progressStyle\"\n />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n data-testid=\"pl-slider-range-triple-step\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef1\"\n data-testid=\"pl-slider-range-triple-thumb\"\n :style=\"thumbStyle1\"\n :data-percent=\"props.modelValue[0] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r1\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 0)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef2\"\n data-testid=\"pl-slider-range-triple-thumb\"\n :style=\"thumbStyle2\"\n :data-percent=\"props.modelValue[1] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r2\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 1)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef3\"\n data-testid=\"pl-slider-range-triple-thumb\"\n :style=\"thumbStyle3\"\n :data-percent=\"props.modelValue[2] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r3\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 2)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <!-- {{ props.modelValue }} -->\n <!-- <InputRange v-if=\"props.mode === 'input'\" v-model=\"inputRange\" class=\"ui-focused-border\" /> -->\n </div>\n </div>\n <!-- <div v-if=\"helper\" class=\"ui-slider__helper\">\n {{ helper }}\n </div> -->\n <div v-if=\"error\" data-testid=\"pl-slider-range-triple-error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n\n<style></style>\n"],"mappings":""}
1	+ {"version":3,"file":"SliderRangeTriple.js","names":["_sfc_main","SliderRangeTriple_vue_vue_type_script_setup_true_lang_default","SliderRangeTriple_default"],"sources":["../../src/components/SliderRangeTriple.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onMounted, reactive, ref, unref, useSlots } from \"vue\";\nimport { useMouseCapture } from \"../composition/useMouseCapture\";\nimport { tapIf } from \"../helpers/functions\";\nimport { clamp } from \"../helpers/math\";\nimport { PlTooltip } from \"./PlTooltip\";\nimport type { SliderMode } from \"../types\";\nimport { useSliderBreakpoints } from \"../composition/useSliderBreakpoints\";\nimport { getErrorMessage } from \"../helpers/error.ts\";\n\ntype ModelType = [number, number, number];\nconst slots = useSlots();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n defineProps<{\n modelValue: ModelType;\n min?: number;\n max: number;\n step?: number;\n label?: string;\n helper?: string;\n error?: unknown;\n mode?: SliderMode;\n measure?: string;\n breakpoints?: boolean;\n disabled?: boolean;\n }>(),\n {\n label: undefined,\n helper: undefined,\n error: undefined,\n min: 0,\n step: 1,\n mode: \"text\",\n measure: \"%\",\n breakpoints: false,\n disabled: false,\n },\n);\n\nconst data = reactive({\n deltaValue1: 0,\n deltaValue2: 0,\n deltaValue3: 0,\n});\n\nconst barRef = ref<HTMLElement>();\nconst thumbRef1 = ref<HTMLElement>();\nconst thumbRef2 = ref<HTMLElement>();\nconst thumbRef3 = ref<HTMLElement>();\n\nconst range = computed(() => props.max - props.min);\n\nconst propsRef = computed(() => props);\n\nconst breakpointsRef = useSliderBreakpoints(propsRef);\n\nconst localValue1 = computed(() =>\n clamp((props.modelValue[0] ?? 0) + data.deltaValue1, props.min, props.max),\n);\nconst localValue2 = computed(() =>\n clamp((props.modelValue[1] ?? 0) + data.deltaValue2, props.min, props.max),\n);\nconst localValue3 = computed(() =>\n clamp((props.modelValue[2] ?? 0) + data.deltaValue3, props.min, props.max),\n);\n\nconst error = computed(() => {\n const v = props.modelValue as unknown;\n\n const isValidModel = Array.isArray(v) && v.length === 3 && v.every((it) => Number.isFinite(it));\n\n if (!isValidModel) {\n return \"Expected model [number, number, number]\";\n }\n\n const errors: string[] = [];\n\n [...props.modelValue].forEach((v) => {\n if (v > props.max) {\n errors.push(`Max model value must be lower than max props ${props.max}.`);\n }\n if (v < props.min) {\n errors.push(\"Min model value must be greater than max props.\");\n }\n });\n\n if (errors.length > 0) {\n return errors.join(\" \");\n }\n\n return getErrorMessage(props.error);\n});\n\nconst position1 = computed(() => {\n return (localValue1.value - props.min) / range.value;\n});\n\nconst position2 = computed(() => {\n return (localValue2.value - props.min) / range.value;\n});\n\nconst position3 = computed(() => {\n return (localValue3.value - props.min) / range.value;\n});\n\nconst leftRight = computed(() => getLeftAndRight());\n\nconst progressStyle = computed(() => ({\n right: leftRight.value[0] + \"%\",\n left: 100 - leftRight.value[2] + \"%\",\n}));\n\nconst thumbStyle1 = computed(() => ({\n right: Math.ceil((1 - position1.value) * 100) + \"%\",\n}));\n\nconst thumbStyle2 = computed(() => ({\n right: Math.ceil((1 - position2.value) * 100) + \"%\",\n}));\n\nconst thumbStyle3 = computed(() => ({\n right: Math.ceil((1 - position3.value) * 100) + \"%\",\n}));\n\nuseMouseCapture(thumbRef1, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue1 = (dx / rect.width) * range.value;\n\n if (thumbRef1.value) {\n updateDatasetForThumb(thumbRef1.value, props.modelValue[0], data.deltaValue1);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue1 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef2, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue2 = (dx / rect.width) * range.value;\n\n if (thumbRef2.value) {\n updateDatasetForThumb(thumbRef2.value, props.modelValue[1], data.deltaValue2);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue2 = 0;\n }\n });\n});\n\nuseMouseCapture(thumbRef3, (ev) => {\n tapIf(unref(barRef)?.getBoundingClientRect(), (rect) => {\n const { dx } = ev;\n data.deltaValue3 = (dx / rect.width) * range.value;\n\n if (thumbRef3.value) {\n updateDatasetForThumb(thumbRef3.value, props.modelValue[2], data.deltaValue3);\n }\n\n if (ev.stop) {\n setModelValue([round(localValue1.value), round(localValue2.value), round(localValue3.value)]);\n data.deltaValue3 = 0;\n }\n });\n});\n\nfunction updateDatasetForThumb(thumb: HTMLElement, modelVal: number, delta: number) {\n const value = round(clamp((modelVal ?? 0) + delta, props.min, props.max));\n thumb.dataset.percent = `${value}${props.measure}`;\n getHint();\n}\n\nfunction getLeftAndRight() {\n const point1 = Math.ceil((1 - position1.value) * 100);\n const point2 = Math.ceil((1 - position2.value) * 100);\n const point3 = Math.ceil((1 - position3.value) * 100);\n return [point1, point2, point3].sort((a, b) => a - b);\n}\n\nfunction round(value: number) {\n const v = clamp(value, props.min, props.max);\n // This is the same as Math.round(v / props.step) * props.step but here we need this magic to avoid numbers like 3.00000000000000000004\n return Math.round((v + Number.EPSILON) * (1 / props.step)) / (1 / props.step);\n}\n\nfunction setModelValue(value: ModelType) {\n emit(\"update:modelValue\", value);\n}\n\nfunction getHint() {\n const right1 = Number(thumbStyle1.value.right.substring(0, thumbStyle1.value.right.length - 1));\n const right2 = Number(thumbStyle2.value.right.substring(0, thumbStyle2.value.right.length - 1));\n const right3 = Number(thumbStyle3.value.right.substring(0, thumbStyle3.value.right.length - 1));\n\n const arr = [\n { r: right1, th: thumbRef1 },\n { r: right2, th: thumbRef2 },\n { r: right3, th: thumbRef3 },\n ].sort((a, b) => a.r - b.r);\n\n if (arr[0].th.value) {\n arr[0].th.value.dataset.hint = \"high\";\n }\n if (arr[1].th.value) {\n arr[1].th.value.dataset.hint = \"mid\";\n }\n\n if (arr[2].th.value) {\n arr[2].th.value.dataset.hint = \"low\";\n }\n}\n\nfunction handleKeyPress(e: { code: string; preventDefault(): void }, index: number) {\n if ([\"ArrowDown\", \"ArrowUp\", \"ArrowRight\", \"ArrowLeft\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n const nextStep =\n e.code === \"ArrowUp\" \|\| e.code === \"ArrowRight\"\n ? props.step * 1\n : e.code === \"ArrowDown\" \|\| e.code === \"ArrowLeft\"\n ? props.step * -1\n : 0;\n\n const arr: ModelType = [...props.modelValue];\n arr[index] = clamp(arr[index] + nextStep, props.min, props.max);\n setModelValue(arr);\n getHint();\n}\n\nonMounted(() => {\n getHint();\n});\n</script>\n\n<template>\n <div\n data-testid=\"pl-slider-range-triple\"\n :class=\"props.disabled ? 'ui-slider__disabled' : undefined\"\n class=\"ui-slider__envelope ui-slider__triple\"\n >\n <div :class=\"`ui-slider__mode-${props.mode}`\" class=\"ui-slider\">\n <div class=\"ui-slider__wrapper\">\n <div class=\"ui-slider__label-section\">\n <label v-if=\"label\" data-testid=\"pl-slider-range-triple-label\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip\n v-if=\"slots.tooltip\"\n data-testid=\"pl-slider-range-triple-tooltip\"\n class=\"info\"\n position=\"top\"\n >\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" data-testid=\"pl-slider-range-triple-bar\" class=\"ui-slider__bar\">\n <div\n data-testid=\"pl-slider-range-triple-progress\"\n class=\"ui-slider__progress\"\n :style=\"progressStyle\"\n />\n </div>\n </div>\n <div class=\"ui-slider__container ui-slider__container-thumb\">\n <template v-if=\"props.breakpoints\">\n <div\n v-for=\"(item, index) in breakpointsRef\"\n :key=\"index\"\n data-testid=\"pl-slider-range-triple-step\"\n :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef1\"\n data-testid=\"pl-slider-range-triple-thumb\"\n :style=\"thumbStyle1\"\n :data-percent=\"props.modelValue[0] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r1\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 0)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef2\"\n data-testid=\"pl-slider-range-triple-thumb\"\n :style=\"thumbStyle2\"\n :data-percent=\"props.modelValue[1] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r2\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 1)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n <div\n ref=\"thumbRef3\"\n data-testid=\"pl-slider-range-triple-thumb\"\n :style=\"thumbStyle3\"\n :data-percent=\"props.modelValue[2] + '%'\"\n class=\"ui-slider__thumb ui-slider__triple-thumb\"\n r3\n tabindex=\"0\"\n @keydown=\"handleKeyPress($event, 2)\"\n >\n <div class=\"ui-slider__thumb-focused-contour\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"ui-slider__input-wrapper d-flex\">\n <!-- {{ props.modelValue }} -->\n <!-- <InputRange v-if=\"props.mode === 'input'\" v-model=\"inputRange\" class=\"ui-focused-border\" /> -->\n </div>\n </div>\n <!-- <div v-if=\"helper\" class=\"ui-slider__helper\">\n {{ helper }}\n </div> -->\n <div v-if=\"error\" data-testid=\"pl-slider-range-triple-error\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n\n<style></style>\n"],"mappings":""}