npm - @milaboratories/uikit - Versions diffs - 2.15.37 → 2.15.38 - Mend

@milaboratories/uikit 2.15.37 → 2.15.38

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 (457) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlTooltip.vue_vue_type_script_setup_true_lang.js","names":["$style","$attrs","$slots"],"sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover /\nexport default {\n name: \"PlTooltip\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { onUnmounted, reactive, ref, watch } from \"vue\";\nimport { tMap } from \"./global\";\nimport as utils from \"../../helpers/utils\";\nimport { useClickOutside } from \"../../composition/useClickOutside\";\n\nconst emit = defineEmits([\"tooltip:close\"]);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n defineProps<{\n /*\n delay in milliseconds before the tooltip opens\n /\n openDelay?: number;\n /\n delay in milliseconds before the tooltip disappears\n /\n closeDelay?: number;\n /\n Tooltip position\n /\n position?: \"top\" \| \"left\" \| \"bottom\" \| \"right\" \| \"top-left\";\n /\n external prop to hide tooltips\n /\n hide?: boolean;\n /\n The gap in pixels between the tooltip and the target element\n /\n gap?: number;\n\n /\n The minimum offset in pixels from the edge of the screen to the tooltip\n /\n offsetToTheEdge?: number;\n /\n base html element for tooltip\n /\n element?: \"div\" \| \"span\" \| \"a\" \| \"p\" \| \"h1\" \| \"h2\" \| \"h3\";\n /\n Max width (css value) of the tooltip container (default is 300px)\n /\n maxWidth?: string;\n /\n The container to insert the tooltip to (body by default)\n /\n container?: \"body\" \| HTMLElement;\n /\n Whether the tooltip is shown on hover (default is true); otherwise, it is shown when hide is set to false\n /\n hoverable?: boolean;\n }>(),\n {\n openDelay: 100,\n closeDelay: 1000,\n gap: 8,\n offsetToTheEdge: 8,\n position: \"top\",\n element: \"div\",\n maxWidth: \"300px\",\n container: \"body\",\n hoverable: true,\n },\n);\n\nconst data = reactive({\n open: false,\n over: false,\n tooltipOpen: false,\n key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n () => data.open,\n (v) => {\n requestAnimationFrame(() => {\n data.tooltipOpen = v;\n });\n },\n);\n\nlet clearTimeout = () => {};\n\nconst showTooltip = () => {\n data.open = true;\n\n for (const [k, f] of tMap.entries()) {\n if (k !== tKey) {\n f();\n }\n }\n};\n\nconst closeTooltip = () => {\n data.open = false;\n emit(\"tooltip:close\");\n};\n\nconst onOver = async () => {\n if (props.hide \|\| !props.hoverable) {\n return;\n }\n\n data.over = true;\n\n clearTimeout();\n\n await utils.delay(props.openDelay ?? 100);\n\n if (data.over) {\n showTooltip();\n }\n};\n\nconst onLeave = () => {\n if (!props.hoverable) {\n return;\n }\n\n data.over = false;\n clearTimeout = utils.timeout(() => {\n if (!data.over) {\n closeTooltip();\n }\n }, props.closeDelay);\n};\n\nwatch(\n () => props.hide,\n (hide) => {\n if (hide) {\n closeTooltip();\n } else if (!props.hoverable) {\n showTooltip();\n }\n },\n);\n\nconst rootRef = ref<HTMLElement \| undefined>();\nconst tooltip = ref<HTMLElement \| undefined>();\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nonUnmounted(() => {\n tMap.delete(tKey);\n});\nconst anchorName = `--anchor-${uniqueId()}`;\n</script>\n\n<template>\n <component\n :class=\"$style.plTooltipAnchorWrapper\"\n :is=\"element\"\n v-bind=\"$attrs\"\n ref=\"rootRef\"\n @click=\"onOver\"\n @mouseover=\"onOver\"\n @mouseleave=\"onLeave\"\n >\n <!-- anchor element here -->\n <slot />\n <Transition name=\"pl-tooltip-fade\">\n <Teleport v-if=\"$slots['tooltip'] && data.tooltipOpen\" :to=\"container\">\n <div\n :class=\"[\n $style.plTooltipContainer,\n {\n [$style.top]: props.position === 'top',\n [$style.bottom]: props.position === 'bottom',\n [$style.left]: props.position === 'left',\n [$style.right]: props.position === 'right',\n [$style.topLeft]: props.position === 'top-left',\n },\n ]\"\n :style=\"{\n '--anchorName': anchorName,\n '--gap': gap + 'px',\n '--offsetToTheEdge': offsetToTheEdge + 'px',\n '--plTooltipMaxWidth': maxWidth,\n }\"\n >\n <div :class=\"$style.plTooltipBox\" @click.stop>\n <div\n ref=\"tooltip\"\n :class=\"[$style.plTooltipContent, position]\"\n @mouseover=\"onOver\"\n @mouseleave=\"onLeave\"\n >\n <!-- should be one line -->\n <div><slot name=\"tooltip\" /></div>\n </div>\n </div>\n <div :class=\"$style.plTooltipBeak\" />\n </div>\n </Teleport>\n </Transition>\n </component>\n</template>\n\n<style module>\n.plTooltipAnchorWrapper {\n display: inline-block;\n}\n/ just to set anchor-name for the anchor /\n.plTooltipAnchorWrapper > :first-child {\n --anchorName: v-bind(\"anchorName\");\n anchor-name: var(--anchorName);\n}\n\n.plTooltipAnchorWrapper:global(.info) {\n --anchorName: v-bind(\"anchorName\");\n anchor-name: var(--anchorName);\n}\n\n.plTooltipContainer {\n --plTooltipMaxWidth: 300px;\n --gap: 8px;\n --tailWidth: 8px;\n --tailHeight: calc(var(--gap) + 2px);\n\n --tailClipTop: polygon(\n 0 0,\n 100% 0,\n 100% calc(100% - var(--gap)),\n 50% calc(100% - 3px),\n 0 calc(100% - var(--gap))\n );\n --tailClipBottom: polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));\n --tailClipLeft: polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);\n --tailClipRight: polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);\n\n z-index: var(--z-tooltip);\n}\n\n.plTooltipContent {\n display: inline-block;\n padding: 8px 12px 9px 12px;\n background: var(--tooltip-bg);\n border-radius: 6px;\n width: max-content;\n word-break: normal;\n max-width: var(--plTooltipMaxWidth);\n color: #fff;\n}\n\n.plTooltipBox {\n position: absolute;\n position-anchor: var(--anchorName);\n z-index: 1;\n}\n\n.plTooltipBeak {\n position: absolute;\n position-anchor: var(--anchorName);\n z-index: 0;\n background: var(--tooltip-bg);\n width: var(--tailWidth);\n height: var(--tailHeight);\n}\n\n/ top /\n.plTooltipContainer.top .plTooltipBox {\n position-area: top;\n bottom: var(--gap);\n left: var(--offsetToTheEdge);\n right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.top .plTooltipBeak {\n position-area: top;\n bottom: 0;\n left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n clip-path: var(--tailClipTop);\n}\n\n/ bottom /\n.plTooltipContainer.bottom .plTooltipBox {\n position-area: bottom;\n top: var(--gap);\n left: var(--offsetToTheEdge);\n right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.bottom .plTooltipBeak {\n position-area: bottom;\n top: 0;\n left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n clip-path: var(--tailClipBottom);\n}\n\n/ left /\n.plTooltipContainer.left .plTooltipBox {\n position-area: left;\n right: var(--gap);\n top: var(--offsetToTheEdge);\n bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.left .plTooltipBeak {\n position-area: left;\n right: 0;\n top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n width: var(--tailHeight);\n height: var(--tailWidth);\n clip-path: var(--tailClipLeft);\n}\n\n/ right /\n.plTooltipContainer.right .plTooltipBox {\n position-area: right;\n left: var(--gap);\n top: var(--offsetToTheEdge);\n bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.right .plTooltipBeak {\n position-area: right;\n left: 0;\n top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n width: var(--tailHeight);\n height: var(--tailWidth);\n clip-path: var(--tailClipRight);\n}\n\n/ top left */\n.plTooltipContainer.topLeft .plTooltipBox {\n position-area: top;\n bottom: var(--gap);\n left: anchor(var(--anchorName) left);\n}\n.plTooltipContainer.topLeft .plTooltipBeak {\n position-area: top;\n bottom: 0;\n left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n clip-path: var(--tailClipTop);\n}\n\n:global(.pl-tooltip-fade-leave-active),\n:global(.pl-tooltip-fade-enter-active) {\n z-index: var(--z-tooltip);\n transition: opacity 0.2s ease-in-out;\n}\n:global(.pl-tooltip-fade-enter-from),\n:global(.pl-tooltip-fade-leave-to) {\n opacity: 0;\n}\n\n.plTooltipContent a {\n color: var(--tooltip-link-color);\n}\n\n.plTooltipContent p {\n margin-bottom: 8px;\n}\n\n.plTooltipContent ul,\n.plTooltipContent li {\n margin-left: 6px;\n padding-left: 6px;\n}\n\n.plTooltipContent li {\n margin-bottom: 4px;\n}\n</style>\n"],"mappings":";;;;;;CAGE,MAAM;;;;;;;;;;;;;;;;;;;EAWR,IAAM,IAAO,GAEP,IAAO,QAAQ,EAEf,IAAQ,GAyDR,IAAO,EAAS;GACpB,MAAM;GACN,MAAM;GACN,aAAa;GACb,KAAK,QAAQ;GACd,CAAC;AAKF,EAHA,EAAK,IAAI,SAAY,GAAc,CAAC,EAGpC,QACQ,EAAK,OACV,MAAM;AACL,+BAA4B;AAC1B,MAAK,cAAc;KACnB;IAEL;EAED,IAAI,UAAqB,IAEnB,UAAoB;AACxB,KAAK,OAAO;AAEZ,QAAK,IAAM,CAAC,GAAG,MAAM,EAAK,SAAS,CACjC,CAAI,MAAM,KACR,GAAG;KAKH,UAAqB;AAEzB,GADA,EAAK,OAAO,IACZ,EAAK,gBAAgB;KAGjB,IAAS,YAAY;AACrB,KAAM,QAAQ,CAAC,EAAM,cAIzB,EAAK,OAAO,IAEZ,GAAc,EAEd,MAAM,EAAY,EAAM,aAAa,IAAI,EAErC,EAAK,QACP,GAAa;KAIX,UAAgB;AACf,KAAM,cAIX,EAAK,OAAO,IACZ,IAAe,QAAoB;AACjC,IAAK,EAAK,QACR,GAAc;MAEf,EAAM,WAAW;;AAGtB,UACQ,EAAM,OACX,MAAS;AACR,GAAI,IACF,GAAc,GACJ,EAAM,aAChB,GAAa;IAGlB;EAED,IAAM,IAAU,GAA8B,EACxC,IAAU,GAA8B;AAI9C,EAFA,EAAgB,CAAC,GAAS,EAAQ,QAAQ,GAAc,CAAC,EAEzD,QAAkB;AAChB,KAAK,OAAO,EAAK;IACjB;EACF,IAAM,IAAa,YAAY,GAAU;yBAIvC,EA8CY,EA5CL,EAAA,QAAO,EAFd,EA8CY,EA7CT,OAAOA,EAAAA,OAAO,wBAAA,EAEPC,EAAAA,QAAM;YACV;GAAJ,KAAI;GACH,SAAO;GACP,aAAW;GACX,cAAY;;oBAGL,CAAR,EAAQ,EAAA,QAAA,UAAA,EACR,EAkCa,GAAA,EAlCD,MAAK,mBAAiB,EAAA;qBAiCrB,CAhCKC,EAAAA,OAAM,WAAe,EAAK,eAAA,GAAA,EAA1C,EAgCW,GAAA;;KAhC6C,IAAI,EAAA;QAC1D,EA8BM,OAAA;KA7BH,OAAK,EAAA,CAAgBF,EAAAA,OAAO,oBAAA;OAAiDA,EAAAA,OAAO,MAAM,EAAM,aAAQ;OAA2BA,EAAAA,OAAO,SAAS,EAAM,aAAQ;OAA8BA,EAAAA,OAAO,OAAO,EAAM,aAAQ;OAA4BA,EAAAA,OAAO,QAAQ,EAAM,aAAQ;OAA6BA,EAAAA,OAAO,UAAU,EAAM,aAAQ;;KAUhV,OAAK,EAAA;sBAAgC;eAAiC,EAAA,MAAG;2BAA0C,EAAA,kBAAe;6BAA4C,EAAA;;QAO/K,EAUM,OAAA;KAVA,OAAK,EAAEA,EAAAA,OAAO,aAAY;KAAG,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;QAC3C,EAQM,OAAA;cAPA;KAAJ,KAAI;KACH,OAAK,EAAA,CAAGA,EAAAA,OAAO,kBAAkB,EAAA,SAAQ,CAAA;KACzC,aAAW;KACX,cAAY;QAGb,EAAkC,OAAA,MAAA,CAA7B,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,EAAA,EAGhC,EAAqC,OAAA,EAA/B,OAAK,EAAEA,EAAAA,OAAO,cAAa,EAAA,EAAA,MAAA,EAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,CAAA,KAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"PlTooltip.vue_vue_type_script_setup_true_lang.js","names":["$style","$attrs","$slots"],"sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover /\nexport default {\n name: \"PlTooltip\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { onUnmounted, reactive, ref, watch } from \"vue\";\nimport { tMap } from \"./global\";\nimport as utils from \"../../helpers/utils\";\nimport { useClickOutside } from \"../../composition/useClickOutside\";\n\nconst emit = defineEmits([\"tooltip:close\"]);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n defineProps<{\n /*\n delay in milliseconds before the tooltip opens\n /\n openDelay?: number;\n /\n delay in milliseconds before the tooltip disappears\n /\n closeDelay?: number;\n /\n Tooltip position\n /\n position?: \"top\" \| \"left\" \| \"bottom\" \| \"right\" \| \"top-left\";\n /\n external prop to hide tooltips\n /\n hide?: boolean;\n /\n The gap in pixels between the tooltip and the target element\n /\n gap?: number;\n\n /\n The minimum offset in pixels from the edge of the screen to the tooltip\n /\n offsetToTheEdge?: number;\n /\n base html element for tooltip\n /\n element?: \"div\" \| \"span\" \| \"a\" \| \"p\" \| \"h1\" \| \"h2\" \| \"h3\";\n /\n Max width (css value) of the tooltip container (default is 300px)\n /\n maxWidth?: string;\n /\n The container to insert the tooltip to (body by default)\n /\n container?: \"body\" \| HTMLElement;\n /\n Whether the tooltip is shown on hover (default is true); otherwise, it is shown when hide is set to false\n /\n hoverable?: boolean;\n }>(),\n {\n openDelay: 100,\n closeDelay: 1000,\n gap: 8,\n offsetToTheEdge: 8,\n position: \"top\",\n element: \"div\",\n maxWidth: \"300px\",\n container: \"body\",\n hoverable: true,\n },\n);\n\nconst data = reactive({\n open: false,\n over: false,\n tooltipOpen: false,\n key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n () => data.open,\n (v) => {\n requestAnimationFrame(() => {\n data.tooltipOpen = v;\n });\n },\n);\n\nlet clearTimeout = () => {};\n\nconst showTooltip = () => {\n data.open = true;\n\n for (const [k, f] of tMap.entries()) {\n if (k !== tKey) {\n f();\n }\n }\n};\n\nconst closeTooltip = () => {\n data.open = false;\n emit(\"tooltip:close\");\n};\n\nconst onOver = async () => {\n if (props.hide \|\| !props.hoverable) {\n return;\n }\n\n data.over = true;\n\n clearTimeout();\n\n await utils.delay(props.openDelay ?? 100);\n\n if (data.over) {\n showTooltip();\n }\n};\n\nconst onLeave = () => {\n if (!props.hoverable) {\n return;\n }\n\n data.over = false;\n clearTimeout = utils.timeout(() => {\n if (!data.over) {\n closeTooltip();\n }\n }, props.closeDelay);\n};\n\nwatch(\n () => props.hide,\n (hide) => {\n if (hide) {\n closeTooltip();\n } else if (!props.hoverable) {\n showTooltip();\n }\n },\n);\n\nconst rootRef = ref<HTMLElement \| undefined>();\nconst tooltip = ref<HTMLElement \| undefined>();\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nonUnmounted(() => {\n tMap.delete(tKey);\n});\nconst anchorName = `--anchor-${uniqueId()}`;\n</script>\n\n<template>\n <component\n :class=\"$style.plTooltipAnchorWrapper\"\n :is=\"element\"\n data-testid=\"pl-tooltip\"\n v-bind=\"$attrs\"\n ref=\"rootRef\"\n @click=\"onOver\"\n @mouseover=\"onOver\"\n @mouseleave=\"onLeave\"\n >\n <!-- anchor element here -->\n <slot />\n <Transition name=\"pl-tooltip-fade\">\n <Teleport v-if=\"$slots['tooltip'] && data.tooltipOpen\" :to=\"container\">\n <div\n data-testid=\"pl-tooltip-popup\"\n :class=\"[\n $style.plTooltipContainer,\n {\n [$style.top]: props.position === 'top',\n [$style.bottom]: props.position === 'bottom',\n [$style.left]: props.position === 'left',\n [$style.right]: props.position === 'right',\n [$style.topLeft]: props.position === 'top-left',\n },\n ]\"\n :style=\"{\n '--anchorName': anchorName,\n '--gap': gap + 'px',\n '--offsetToTheEdge': offsetToTheEdge + 'px',\n '--plTooltipMaxWidth': maxWidth,\n }\"\n >\n <div :class=\"$style.plTooltipBox\" @click.stop>\n <div\n ref=\"tooltip\"\n data-testid=\"pl-tooltip-content\"\n :class=\"[$style.plTooltipContent, position]\"\n @mouseover=\"onOver\"\n @mouseleave=\"onLeave\"\n >\n <!-- should be one line -->\n <div><slot name=\"tooltip\" /></div>\n </div>\n </div>\n <div :class=\"$style.plTooltipBeak\" />\n </div>\n </Teleport>\n </Transition>\n </component>\n</template>\n\n<style module>\n.plTooltipAnchorWrapper {\n display: inline-block;\n}\n/ just to set anchor-name for the anchor /\n.plTooltipAnchorWrapper > :first-child {\n --anchorName: v-bind(\"anchorName\");\n anchor-name: var(--anchorName);\n}\n\n.plTooltipAnchorWrapper:global(.info) {\n --anchorName: v-bind(\"anchorName\");\n anchor-name: var(--anchorName);\n}\n\n.plTooltipContainer {\n --plTooltipMaxWidth: 300px;\n --gap: 8px;\n --tailWidth: 8px;\n --tailHeight: calc(var(--gap) + 2px);\n\n --tailClipTop: polygon(\n 0 0,\n 100% 0,\n 100% calc(100% - var(--gap)),\n 50% calc(100% - 3px),\n 0 calc(100% - var(--gap))\n );\n --tailClipBottom: polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));\n --tailClipLeft: polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);\n --tailClipRight: polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);\n\n z-index: var(--z-tooltip);\n}\n\n.plTooltipContent {\n display: inline-block;\n padding: 8px 12px 9px 12px;\n background: var(--tooltip-bg);\n border-radius: 6px;\n width: max-content;\n word-break: normal;\n max-width: var(--plTooltipMaxWidth);\n color: #fff;\n}\n\n.plTooltipBox {\n position: absolute;\n position-anchor: var(--anchorName);\n z-index: 1;\n}\n\n.plTooltipBeak {\n position: absolute;\n position-anchor: var(--anchorName);\n z-index: 0;\n background: var(--tooltip-bg);\n width: var(--tailWidth);\n height: var(--tailHeight);\n}\n\n/ top /\n.plTooltipContainer.top .plTooltipBox {\n position-area: top;\n bottom: var(--gap);\n left: var(--offsetToTheEdge);\n right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.top .plTooltipBeak {\n position-area: top;\n bottom: 0;\n left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n clip-path: var(--tailClipTop);\n}\n\n/ bottom /\n.plTooltipContainer.bottom .plTooltipBox {\n position-area: bottom;\n top: var(--gap);\n left: var(--offsetToTheEdge);\n right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.bottom .plTooltipBeak {\n position-area: bottom;\n top: 0;\n left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n clip-path: var(--tailClipBottom);\n}\n\n/ left /\n.plTooltipContainer.left .plTooltipBox {\n position-area: left;\n right: var(--gap);\n top: var(--offsetToTheEdge);\n bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.left .plTooltipBeak {\n position-area: left;\n right: 0;\n top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n width: var(--tailHeight);\n height: var(--tailWidth);\n clip-path: var(--tailClipLeft);\n}\n\n/ right /\n.plTooltipContainer.right .plTooltipBox {\n position-area: right;\n left: var(--gap);\n top: var(--offsetToTheEdge);\n bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.right .plTooltipBeak {\n position-area: right;\n left: 0;\n top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n width: var(--tailHeight);\n height: var(--tailWidth);\n clip-path: var(--tailClipRight);\n}\n\n/ top left */\n.plTooltipContainer.topLeft .plTooltipBox {\n position-area: top;\n bottom: var(--gap);\n left: anchor(var(--anchorName) left);\n}\n.plTooltipContainer.topLeft .plTooltipBeak {\n position-area: top;\n bottom: 0;\n left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n clip-path: var(--tailClipTop);\n}\n\n:global(.pl-tooltip-fade-leave-active),\n:global(.pl-tooltip-fade-enter-active) {\n z-index: var(--z-tooltip);\n transition: opacity 0.2s ease-in-out;\n}\n:global(.pl-tooltip-fade-enter-from),\n:global(.pl-tooltip-fade-leave-to) {\n opacity: 0;\n}\n\n.plTooltipContent a {\n color: var(--tooltip-link-color);\n}\n\n.plTooltipContent p {\n margin-bottom: 8px;\n}\n\n.plTooltipContent ul,\n.plTooltipContent li {\n margin-left: 6px;\n padding-left: 6px;\n}\n\n.plTooltipContent li {\n margin-bottom: 4px;\n}\n</style>\n"],"mappings":";;;;;;CAGE,MAAM;;;;;;;;;;;;;;;;;;;EAWR,IAAM,IAAO,GAEP,IAAO,QAAQ,EAEf,IAAQ,GAyDR,IAAO,EAAS;GACpB,MAAM;GACN,MAAM;GACN,aAAa;GACb,KAAK,QAAQ;GACd,CAAC;AAKF,EAHA,EAAK,IAAI,SAAY,GAAc,CAAC,EAGpC,QACQ,EAAK,OACV,MAAM;AACL,+BAA4B;AAC1B,MAAK,cAAc;KACnB;IAEL;EAED,IAAI,UAAqB,IAEnB,UAAoB;AACxB,KAAK,OAAO;AAEZ,QAAK,IAAM,CAAC,GAAG,MAAM,EAAK,SAAS,CACjC,CAAI,MAAM,KACR,GAAG;KAKH,UAAqB;AAEzB,GADA,EAAK,OAAO,IACZ,EAAK,gBAAgB;KAGjB,IAAS,YAAY;AACrB,KAAM,QAAQ,CAAC,EAAM,cAIzB,EAAK,OAAO,IAEZ,GAAc,EAEd,MAAM,EAAY,EAAM,aAAa,IAAI,EAErC,EAAK,QACP,GAAa;KAIX,UAAgB;AACf,KAAM,cAIX,EAAK,OAAO,IACZ,IAAe,QAAoB;AACjC,IAAK,EAAK,QACR,GAAc;MAEf,EAAM,WAAW;;AAGtB,UACQ,EAAM,OACX,MAAS;AACR,GAAI,IACF,GAAc,GACJ,EAAM,aAChB,GAAa;IAGlB;EAED,IAAM,IAAU,GAA8B,EACxC,IAAU,GAA8B;AAI9C,EAFA,EAAgB,CAAC,GAAS,EAAQ,QAAQ,GAAc,CAAC,EAEzD,QAAkB;AAChB,KAAK,OAAO,EAAK;IACjB;EACF,IAAM,IAAa,YAAY,GAAU;yBAIvC,EAiDY,EA/CL,EAAA,QAAO,EAFd,EAiDY;GAhDT,OAAOA,EAAAA,OAAO;GAEf,eAAY;KACJC,EAAAA,QAAM;YACV;GAAJ,KAAI;GACH,SAAO;GACP,aAAW;GACX,cAAY;;oBAGL,CAAR,EAAQ,EAAA,QAAA,UAAA,EACR,EAoCa,GAAA,EApCD,MAAK,mBAAiB,EAAA;qBAmCrB,CAlCKC,EAAAA,OAAM,WAAe,EAAK,eAAA,GAAA,EAA1C,EAkCW,GAAA;;KAlC6C,IAAI,EAAA;QAC1D,EAgCM,OAAA;KA/BJ,eAAY;KACX,OAAK,EAAA,CAAgBF,EAAAA,OAAO,oBAAA;OAAiDA,EAAAA,OAAO,MAAM,EAAM,aAAQ;OAA2BA,EAAAA,OAAO,SAAS,EAAM,aAAQ;OAA8BA,EAAAA,OAAO,OAAO,EAAM,aAAQ;OAA4BA,EAAAA,OAAO,QAAQ,EAAM,aAAQ;OAA6BA,EAAAA,OAAO,UAAU,EAAM,aAAQ;;KAUhV,OAAK,EAAA;sBAAgC;eAAiC,EAAA,MAAG;2BAA0C,EAAA,kBAAe;6BAA4C,EAAA;;QAO/K,EAWM,OAAA;KAXA,OAAK,EAAEA,EAAAA,OAAO,aAAY;KAAG,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;QAC3C,EASM,OAAA;cARA;KAAJ,KAAI;KACJ,eAAY;KACX,OAAK,EAAA,CAAGA,EAAAA,OAAO,kBAAkB,EAAA,SAAQ,CAAA;KACzC,aAAW;KACX,cAAY;QAGb,EAAkC,OAAA,MAAA,CAA7B,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,EAAA,EAGhC,EAAqC,OAAA,EAA/B,OAAK,EAAEA,EAAAA,OAAO,cAAa,EAAA,EAAA,MAAA,EAAA,CAAA,EAAA,EAAA,CAAA,EAAA,GAAA,CAAA,KAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.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 :class=\"props.disabled ? 'ui-slider__disabled' : undefined\" class=\"ui-slider__envelope\">\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\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <div v-if=\"props.mode === 'text'\" class=\"ui-slider__value-static text-s\">\n {{ realtimeVal }}{{ measure }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" class=\"ui-slider__bar\">\n <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\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 :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef\"\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 :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\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"Slider.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":""}

package/dist/components/Slider.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.vue.d.ts","sourceRoot":"","sources":["../../src/components/Slider.vue"],"names":[],"mappings":"~~AAyNA~~,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAQ3C,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;~~AAwSJ~~,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAQ/C,QAAA,MAAM,UAAU;;;;;~~WAzTJ~~,MAAM;;UAGP,UAAU;cAGN,OAAO;SATZ,MAAM;UAEL,MAAM;YAEJ,MAAM;aAGL,MAAM;iBACF,OAAO;~~6EAwTvB~~,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"Slider.vue.d.ts","sourceRoot":"","sources":["../../src/components/Slider.vue"],"names":[],"mappings":"AA6OA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAQ3C,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAmTJ,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAQ/C,QAAA,MAAM,UAAU;;;;;WApUJ,MAAM;;UAGP,UAAU;cAGN,OAAO;SATZ,MAAM;UAEL,MAAM;YAEJ,MAAM;aAGL,MAAM;iBACF,OAAO;6EAmUvB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -9,12 +9,15 @@ import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l
 //#region 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",
 	class: "text-s"
 }, O = {
 	key: 1,
+	"data-testid": "pl-slider-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" }, N = ["value"], P = {
 	key: 0,
+	"data-testid": "pl-slider-error",
 	class: "ui-slider__error"
 }, F = /* @__PURE__ */ f({
 	__name: "Slider",
@@ -73,8 +76,12 @@ var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section"
 			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);
 		}
-		return (e, t) => (h(), u("div", { class: p([R.disabled ? "ui-slider__disabled" : void 0, "ui-slider__envelope"]) }, [d("div", { class: p([`ui-slider__mode-${R.mode}`, "ui-slider"]) }, [d("div", T, [d("div", E, [f.label ? (h(), u("label", D, [d("span", null, b(f.label), 1), x(I).tooltip ? (h(), c(x(r), {
+		return (e, t) => (h(), u("div", {
+			"data-testid": "pl-slider",
+			class: p([R.disabled ? "ui-slider__disabled" : void 0, "ui-slider__envelope"])
+		}, [d("div", { class: p([`ui-slider__mode-${R.mode}`, "ui-slider"]) }, [d("div", T, [d("div", E, [f.label ? (h(), u("label", D, [d("span", null, b(f.label), 1), x(I).tooltip ? (h(), c(x(r), {
 			key: 0,
+			"data-testid": "pl-slider-tooltip",
 			class: "info",
 			position: "top"
 		}, {
@@ -83,23 +90,28 @@ var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section"
 		})) : 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,
+			"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", {
 			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,
+			"data-testid": "pl-slider-thumb",
 			tabindex: "0",
 			class: "ui-slider__thumb ui-slider__thumb-active",
 			style: m(q.value),
 			onKeydown: $
 		}, [...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)

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 :class=\"props.disabled ? 'ui-slider__disabled' : undefined\" class=\"ui-slider__envelope\">\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\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <div v-if=\"props.mode === 'text'\" class=\"ui-slider__value-static text-s\">\n {{ realtimeVal }}{{ measure }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" class=\"ui-slider__bar\">\n <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\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 :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef\"\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 :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\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~EAUA,IAAM,IAAQ,GAAU,EAElB,IAAO,GAEP,IAAQ,GA2BR,IAAO,EAAS,EACpB,YAAY,GACb,CAAC,EAEI,IAAQ,QAAe,EAAM,MAAM,EAAM,IAAI,EAE7C,IAAa,QACV,GAAO,EAAM,cAAc,KAAK,EAAK,YAAY,EAAM,KAAK,EAAM,IAAI,CAC7E,EAEI,IAAc,EAAI,EAAM,WAAW,EAEnC,IAAQ,QAAe;GAC3B,IAAM,IAAI,EAAM;AAchB,UAZK,OAAO,SAAS,EAAE,GAInB,IAAI,EAAM,MACL,cAAc,EAAM,QAGzB,IAAI,EAAM,MACL,cAAc,EAAM,QAGtB,EAAgB,EAAM,MAAM,GAX1B;IAYT,EAII,IAAiB,EAFN,QAAe,EAAM,CAEe,EAE/C,IAAW,SACP,EAAW,QAAQ,EAAM,OAAO,EAAM,MAC9C,EAEI,IAAgB,SAAgB,EACpC,OAAO,KAAK,MAAM,IAAI,EAAS,SAAS,IAAI,GAAG,KAChD,EAAE,EAEG,IAAa,SAEV,EACL,OAAO,QAFK,KAAK,MAAM,IAAI,EAAS,SAAS,IAAI,CAE5B,MACtB,EACD,EAEI,IAAS,GAAkB,EAC3B,IAAW,GAAkB;AAEnC,UACQ,EAAM,aACX,MAAQ;AACP,KAAY,QAAQ;IAEvB;EAED,SAAS,EAAM,GAAe;GAC5B,IAAM,IAAI,EAAM,GAAO,EAAM,KAAK,EAAM,IAAI;AAE5C,UAAO,KAAK,OAAO,iBAAuB,IAAI,EAAM,MAAM,IAAI,IAAI,EAAM;;AAG1E,IAAgB,IAAW,MAAO;AAChC,KAAM,EAAM,EAAO,EAAE,uBAAuB,GAAG,MAAS;IACtD,IAAM,EAAE,UAAO;AAQf,IANA,EAAK,aAAc,IAAK,EAAK,QAAS,EAAM,OAE5C,EAAY,QAAQ,EAClB,GAAO,EAAM,cAAc,KAAK,EAAK,YAAY,EAAM,KAAK,EAAM,IAAI,CACvE,EAEG,EAAG,SACL,EAAK,qBAAqB,EAAM,EAAW,MAAM,CAAC,EAClD,EAAK,aAAa;KAEpB;IACF;EAEF,SAAS,EAAc,GAAe;AACpC,KAAK,qBAAqB,EAAM,EAAM,CAAC;;EAGzC,SAAS,EAAiB,GAAc;AACtC,KAAc,CAAE,EAAM,OAA4B,MAAM;;EAG1D,SAAS,EAAe,GAA6C;AACnE,GAAI;IAAC;IAAa;IAAW;IAAc;IAAa;IAAQ,CAAC,SAAS,EAAE,KAAK,IAC/E,EAAE,gBAAgB;GAGpB,IAAM,IACJ,EAAE,SAAS,aAAa,EAAE,SAAS,eAC/B,EAAM,OAAO,IACb,EAAE,SAAS,eAAe,EAAE,SAAS,cACnC,EAAM,OAAO,KACb;AAER,KAAc,EAAM,aAAa,EAAS;;yBAK1C,~~EA2DM~~,OAAA,~~EA3DA~~,OAAK,EAAA,CAAE,EAAM,WAAQ,wBAA2B,KAAA,~~GAAiB~~,sBAAqB,CAAA,~~EAAA~~,~~EAAA,CAC1F,EAmDM,~~OAAA,~~EAnDA~~,OAAK,EAAA,CAAA,mBAAqB,EAAM,QAAc,YAAW,CAAA,EAAA,EAAA,CAC7D,~~EAwCM~~,~~OAxCN~~,~~GAwCM~~,~~CAvCJ~~,~~EAYM~~,~~OAZN~~,~~GAYM~~,~~CAXS~~,EAAA,SAAA,GAAA,EAAb,~~EAOQ~~,~~SAPR~~,~~GAOQ~~,~~CANN~~,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA,~~EACG~~,EAAA,EAAK,CAAC,WAAA,GAAA,~~EAAvB~~,~~EAIY~~,EAAA,EAAA,EAAA;;~~GAJoB~~,OAAM;~~GAAO~~,UAAS;;~~GACzC~~,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;~~kCAIlB~~,EAAM,SAAI,UAAA,GAAA,~~EAArB~~,~~EAEM~~,~~OAFN~~,~~GAEM~~,EADD,EAAA,MAAW,GAAA,EAAM,EAAA,QAAO,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA,EAG/B,~~EAyBM~~,~~OAzBN~~,~~GAyBM~~,~~CAxBJ~~,~~EAIM~~,~~OAJN~~,~~GAIM~~,~~CAHJ~~,~~EAEM~~,OAAA;~~YAFG~~;GAAJ,KAAI;GAAS,OAAM;~~MACtB~~,~~EAA0D~~,OAAA;~~GAArD~~,OAAM;~~GAAuB~~,OAAK,EAAE,EAAA,MAAa;~~wBAG1D~~,~~EAkBM~~,~~OAlBN~~,~~GAkBM~~,~~CAjBY~~,EAAM,eAAA,EAAA,GAAA,EACpB,~~EAKE~~,GAAA,EAAA,KAAA,GAAA,EAAA,~~EAJwB~~,EAAA,EAAc,GAA9B,GAAM,YADhB,~~EAKE~~,OAAA;~~GAHC~~,KAAK;~~GACL~~,OAAK,EAAA,EAAA,OAAA,GAAc,EAAI,IAAA,CAAA;GACxB,OAAM;oCAGV,~~EAQM~~,OAAA;~~YAPA~~;GAAJ,KAAI;GACJ,UAAS;GACT,OAAM;GACL,OAAK,EAAE,EAAA,MAAU;GACjB,WAAS;mBAEV,EAAgD,OAAA,EAA3C,OAAM,oCAAkC,EAAA,MAAA,GAAA,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAMrD,~~EAOM~~,~~OAPN~~,~~GAOM~~,~~CALI~~,EAAM,SAAI,WAAA,GAAA,EADlB,~~EAKE~~,SAAA;;~~GAHC~~,OAAO,EAAA;GACR,OAAM;GACL,UAAM,AAAA,EAAA,QAAA,MAAE,EAAiB,EAAM;uCAO3B,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,EAAA"}
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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"}

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 :class=\"props.disabled ? 'ui-slider__disabled' : undefined\" class=\"ui-slider__envelope\">\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\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <div v-if=\"props.mode === 'text'\" class=\"ui-slider__value-static text-s\">\n {{ textModelValue }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" class=\"ui-slider__bar\">\n <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\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 :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef1\"\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 :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 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\" class=\"ui-slider__error\">\n {{ error }}\n </div>\n </div>\n</template>\n"],"mappings":""}
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":""}

package/dist/components/SliderRange.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderRange.vue.d.ts","sourceRoot":"","sources":["../../src/components/SliderRange.vue"],"names":[],"mappings":"~~AAiRA~~,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAS3C,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;~~AAiXJ~~,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAS/C,QAAA,MAAM,UAAU;;;;;~~WAnYJ~~,MAAM;;UAGP,UAAU;cAGN,OAAO;SATZ,MAAM;UAEL,MAAM;YAEJ,MAAM;aAGL,MAAM;iBACF,OAAO;~~6EAkYvB~~,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"SliderRange.vue.d.ts","sourceRoot":"","sources":["../../src/components/SliderRange.vue"],"names":[],"mappings":"AAsSA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAS3C,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA8XJ,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAS/C,QAAA,MAAM,UAAU;;;;;WAhZJ,MAAM;;UAGP,UAAU;cAGN,OAAO;SATZ,MAAM;UAEL,MAAM;YAEJ,MAAM;aAGL,MAAM;iBACF,OAAO;6EA+YvB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -10,12 +10,15 @@ import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u
 //#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 = {
 	key: 0,
+	"data-testid": "pl-slider-range-label",
 	class: "text-s"
 }, O = {
 	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 = {
 	key: 0,
+	"data-testid": "pl-slider-range-error",
 	class: "ui-slider__error"
 }, N = /* @__PURE__ */ p({
 	__name: "SliderRange",
@@ -84,8 +87,12 @@ var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section"
 			let r = e.code === "ArrowUp" || e.code === "ArrowRight" ? P.step * 1 : e.code === "ArrowDown" || e.code === "ArrowLeft" ? P.step * -1 : 0, i = [...P.modelValue];
 			i[t] = n(i[t] + r, P.min, P.max), Q(i);
 		}
-		return (e, t) => (g(), d("div", { 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(r), {
+		return (e, t) => (g(), d("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(r), {
 			key: 0,
+			"data-testid": "pl-slider-range-tooltip",
 			class: "info",
 			position: "top"
 		}, {
@@ -94,19 +101,23 @@ var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section"
 		})) : 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", {
 			ref_key: "barRef",
 			ref: I,
+			"data-testid": "pl-slider-range-bar",
 			class: "ui-slider__bar"
 		}, [f("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", {
 				key: t,
+				"data-testid": "pl-slider-range-step",
 				style: h({ right: `${e}%` }),
 				class: "ui-slider__thumb-step"
 			}, null, 4))), 128)) : u("", !0),
 			f("div", {
 				ref_key: "thumbRef1",
 				ref: L,
+				"data-testid": "pl-slider-range-thumb",
 				style: h(ae.value),
 				class: "ui-slider__thumb",
 				tabindex: "0",
@@ -115,6 +126,7 @@ var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section"
 			f("div", {
 				ref_key: "thumbRef2",
 				ref: R,
+				"data-testid": "pl-slider-range-thumb",
 				style: h(oe.value),
 				class: "ui-slider__thumb",
 				tabindex: "0",
@@ -124,6 +136,7 @@ var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section"
 			key: 0,
 			modelValue: z.value,
 			"onUpdate:modelValue": t[2] ||= (e) => z.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));

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 :class=\"props.disabled ? 'ui-slider__disabled' : undefined\" class=\"ui-slider__envelope\">\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\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <div v-if=\"props.mode === 'text'\" class=\"ui-slider__value-static text-s\">\n {{ textModelValue }}\n </div>\n </div>\n <div class=\"ui-slider__base\">\n <div class=\"ui-slider__container\">\n <div ref=\"barRef\" class=\"ui-slider__bar\">\n <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\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 :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef1\"\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 :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 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\" 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":[],"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.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 :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\" class=\"text-s\">\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\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\" class=\"ui-slider__bar\">\n <div class=\"ui-slider__progress\" :style=\"progressStyle\" />\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 :style=\"{ right: `${item}%` }\"\n class=\"ui-slider__thumb-step\"\n />\n </template>\n <div\n ref=\"thumbRef1\"\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 :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 :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\" 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":[],"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":""}

package/dist/components/SliderRangeTriple.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderRangeTriple.vue.d.ts","sourceRoot":"","sources":["../../src/components/SliderRangeTriple.vue"],"names":[],"mappings":"~~AAgVA~~,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3C,KAAK,SAAS,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAK1C,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,SAAS,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;~~AA8ZJ~~,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAU/C,QAAA,MAAM,UAAU;;;;;~~WAjbJ~~,MAAM;;UAGP,UAAU;cAGN,OAAO;SATZ,MAAM;UAEL,MAAM;YAEJ,MAAM;aAGL,MAAM;iBACF,OAAO;~~6EAgbvB~~,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1	+ {"version":3,"file":"SliderRangeTriple.vue.d.ts","sourceRoot":"","sources":["../../src/components/SliderRangeTriple.vue"],"names":[],"mappings":"AA8VA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3C,KAAK,SAAS,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAK1C,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,SAAS,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAyaJ,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAU/C,QAAA,MAAM,UAAU;;;;;WA5bJ,MAAM;;UAGP,UAAU;cAGN,OAAO;SATZ,MAAM;UAEL,MAAM;YAEJ,MAAM;aAGL,MAAM;iBACF,OAAO;6EA2bvB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -9,9 +9,11 @@ import { Fragment as a, computed as o, createBlock as te, createCommentVNode as
 //#region src/components/SliderRangeTriple.vue?vue&type=script&setup=true&lang.ts
 var ae = { class: "ui-slider__wrapper" }, oe = { class: "ui-slider__label-section" }, b = {
 	key: 0,
+	"data-testid": "pl-slider-range-triple-label",
 	class: "text-s"
 }, x = { class: "ui-slider__base" }, S = { class: "ui-slider__container" }, C = { class: "ui-slider__container ui-slider__container-thumb" }, w = ["data-percent"], T = ["data-percent"], E = ["data-percent"], D = {
 	key: 0,
+	"data-testid": "pl-slider-range-triple-error",
 	class: "ui-slider__error"
 }, O = /* @__PURE__ */ u({
 	__name: "SliderRangeTriple",
@@ -127,8 +129,12 @@ var ae = { class: "ui-slider__wrapper" }, oe = { class: "ui-slider__label-sectio
 		}
 		return ne(() => {
 			Q();
-		}), (e, t) => (p(), c("div", { class: d([A.disabled ? "ui-slider__disabled" : void 0, "ui-slider__envelope ui-slider__triple"]) }, [l("div", { class: d([`ui-slider__mode-${A.mode}`, "ui-slider"]) }, [l("div", ae, [l("div", oe, [u.label ? (p(), c("label", b, [l("span", null, _(u.label), 1), v(k).tooltip ? (p(), te(v(r), {
+		}), (e, t) => (p(), c("div", {
+			"data-testid": "pl-slider-range-triple",
+			class: d([A.disabled ? "ui-slider__disabled" : void 0, "ui-slider__envelope ui-slider__triple"])
+		}, [l("div", { class: d([`ui-slider__mode-${A.mode}`, "ui-slider"]) }, [l("div", ae, [l("div", oe, [u.label ? (p(), c("label", b, [l("span", null, _(u.label), 1), v(k).tooltip ? (p(), te(v(r), {
 			key: 0,
+			"data-testid": "pl-slider-range-triple-tooltip",
 			class: "info",
 			position: "top"
 		}, {
@@ -137,19 +143,23 @@ var ae = { class: "ui-slider__wrapper" }, oe = { class: "ui-slider__label-sectio
 		})) : s("", !0)])) : s("", !0)]), l("div", x, [l("div", S, [l("div", {
 			ref_key: "barRef",
 			ref: M,
+			"data-testid": "pl-slider-range-triple-bar",
 			class: "ui-slider__bar"
 		}, [l("div", {
+			"data-testid": "pl-slider-range-triple-progress",
 			class: "ui-slider__progress",
 			style: f(ce.value)
 		}, null, 4)], 512)]), l("div", C, [
 			A.breakpoints ? (p(!0), c(a, { key: 0 }, h(v(L), (e, t) => (p(), c("div", {
 				key: t,
+				"data-testid": "pl-slider-range-triple-step",
 				style: f({ right: `${e}%` }),
 				class: "ui-slider__thumb-step"
 			}, null, 4))), 128)) : s("", !0),
 			l("div", {
 				ref_key: "thumbRef1",
 				ref: N,
+				"data-testid": "pl-slider-range-triple-thumb",
 				style: f(K.value),
 				"data-percent": A.modelValue[0] + "%",
 				class: "ui-slider__thumb ui-slider__triple-thumb",
@@ -160,6 +170,7 @@ var ae = { class: "ui-slider__wrapper" }, oe = { class: "ui-slider__label-sectio
 			l("div", {
 				ref_key: "thumbRef2",
 				ref: P,
+				"data-testid": "pl-slider-range-triple-thumb",
 				style: f(q.value),
 				"data-percent": A.modelValue[1] + "%",
 				class: "ui-slider__thumb ui-slider__triple-thumb",
@@ -170,6 +181,7 @@ var ae = { class: "ui-slider__wrapper" }, oe = { class: "ui-slider__label-sectio
 			l("div", {
 				ref_key: "thumbRef3",
 				ref: F,
+				"data-testid": "pl-slider-range-triple-thumb",
 				style: f(J.value),
 				"data-percent": A.modelValue[2] + "%",
 				class: "ui-slider__thumb ui-slider__triple-thumb",