@milaboratories/uikit 2.10.37 → 2.10.39

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

@@ -1 +1 @@
-{"version":3,"file":"PlTooltip.vue2.js","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"],"names":["__default__","emit","__emit","tKey","props","__props","data","reactive","tMap","closeTooltip","watch","v","clearTimeout","showTooltip","k","f","onOver","utils.delay","onLeave","utils.timeout","hide","rootRef","ref","tooltip","useClickOutside","onUnmounted","anchorName","uniqueId","_createBlock","_resolveDynamicComponent","_mergeProps","$style","$attrs","_renderSlot","_ctx","_createVNode","_Transition","$slots","_Teleport","_createElementVNode","_normalizeClass","_normalizeStyle"],"mappings":"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"}
+{"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"}

package/dist/components/PlTooltip/global.js

@@ -1,5 +1,4 @@
-const p = /* @__PURE__ */ new Map();
-export {
-  p as tMap
-};
-//# sourceMappingURL=global.js.map
+const e = /* @__PURE__ */ new Map();
+export { e as tMap };
+
+//# sourceMappingURL=global.js.map

package/dist/components/PlTooltip/global.js.map

@@ -1 +1 @@
-{"version":3,"file":"global.js","sources":["../../../src/components/PlTooltip/global.ts"],"sourcesContent":["export const tMap = new Map<symbol, () => void>();\n"],"names":["tMap"],"mappings":"AAAO,MAAMA,wBAAW,IAAA;"}
+{"version":3,"file":"global.js","names":[],"sources":["../../../src/components/PlTooltip/global.ts"],"sourcesContent":["export const tMap = new Map<symbol, () => void>();\n"],"mappings":"AAAA,MAAa,oBAAO,IAAI,KAAyB"}

package/dist/components/Scrollable.js

@@ -0,0 +1,5 @@
+import e from "./Scrollable.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=Scrollable.js.map

package/dist/components/Scrollable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollable.js","names":[],"sources":["../../src/components/Scrollable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport VScroll from \"./VScroll.vue\";\nimport HScroll from \"./HScroll.vue\";\nimport { onMounted, onUnmounted, reactive, ref, unref } from \"vue\";\nimport { tapIf, copyProps } from \"../helpers/functions\";\nimport { useResizeObserver } from \"../composition/useResizeObserver\";\n\nconst containerRef = ref<HTMLElement>();\n\nconst data = reactive({\n  scrollTop: 0,\n  scrollLeft: 0,\n  clientHeight: 0,\n  clientWidth: 0,\n  scrollHeight: 0,\n  scrollWidth: 0,\n});\n\nfunction updateState(container: HTMLElement) {\n  copyProps(\n    data,\n    container,\n    \"scrollTop\",\n    \"scrollLeft\",\n    \"clientHeight\",\n    \"clientWidth\",\n    \"scrollHeight\",\n    \"scrollWidth\",\n  );\n}\n\nconst onWheel = (e: WheelEvent) => {\n  e.preventDefault();\n  const root = e.currentTarget as HTMLElement;\n  root.scrollTop += e.deltaY;\n  root.scrollLeft += e.deltaX;\n  updateState(root);\n};\n\nfunction updateTop(v: number) {\n  tapIf(unref(containerRef), (el) => {\n    el.scrollTop = v;\n    updateState(el);\n  });\n}\n\nfunction updateLeft(v: number) {\n  tapIf(unref(containerRef), (el) => {\n    el.scrollLeft = v;\n    updateState(el);\n  });\n}\n\nuseResizeObserver(containerRef, (el) => {\n  tapIf(el, (el) => updateState(el));\n});\n\nonMounted(() => {\n  tapIf(unref(containerRef), (root) => {\n    updateState(root);\n    root.addEventListener(\"wheel\", onWheel);\n  });\n});\n\nonUnmounted(() => {\n  tapIf(unref(containerRef), (root) => root.removeEventListener(\"wheel\", onWheel));\n});\n</script>\n\n<template>\n  <div class=\"ui-scrollable\">\n    <div ref=\"containerRef\" class=\"ui-scrollable__container\" @wheel=\"onWheel\">\n      <slot />\n    </div>\n    <VScroll\n      :scroll-top=\"data.scrollTop\"\n      :client-height=\"data.clientHeight\"\n      :scroll-height=\"data.scrollHeight\"\n      @wheel.stop\n      @update:scroll-top=\"updateTop\"\n    />\n    <HScroll\n      :scroll-left=\"data.scrollLeft\"\n      :client-width=\"data.clientWidth\"\n      :scroll-width=\"data.scrollWidth\"\n      @wheel.stop\n      @update:scroll-left=\"updateLeft\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/Scrollable.vue2.js

@@ -1,5 +1,77 @@
-import f from "./Scrollable.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=Scrollable.vue2.js.map
+import { copyProps as e, tapIf as t } from "../helpers/functions.js";
+import n from "./VScroll.js";
+import r from "./HScroll.js";
+import { useResizeObserver as i } from "../composition/useResizeObserver.js";
+import { createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, onMounted as l, onUnmounted as u, openBlock as d, reactive as f, ref as p, renderSlot as m, unref as h, withModifiers as g } from "vue";
+var _ = { class: "ui-scrollable" }, v = /* @__PURE__ */ c({
+	__name: "Scrollable",
+	setup(c) {
+		let v = p(), y = f({
+			scrollTop: 0,
+			scrollLeft: 0,
+			clientHeight: 0,
+			clientWidth: 0,
+			scrollHeight: 0,
+			scrollWidth: 0
+		});
+		function b(t) {
+			e(y, t, "scrollTop", "scrollLeft", "clientHeight", "clientWidth", "scrollHeight", "scrollWidth");
+		}
+		let x = (e) => {
+			e.preventDefault();
+			let t = e.currentTarget;
+			t.scrollTop += e.deltaY, t.scrollLeft += e.deltaX, b(t);
+		};
+		function S(e) {
+			t(h(v), (t) => {
+				t.scrollTop = e, b(t);
+			});
+		}
+		function C(e) {
+			t(h(v), (t) => {
+				t.scrollLeft = e, b(t);
+			});
+		}
+		return i(v, (e) => {
+			t(e, (e) => b(e));
+		}), l(() => {
+			t(h(v), (e) => {
+				b(e), e.addEventListener("wheel", x);
+			});
+		}), u(() => {
+			t(h(v), (e) => e.removeEventListener("wheel", x));
+		}), (e, t) => (d(), a("div", _, [
+			o("div", {
+				ref_key: "containerRef",
+				ref: v,
+				class: "ui-scrollable__container",
+				onWheel: x
+			}, [m(e.$slots, "default")], 544),
+			s(n, {
+				"scroll-top": y.scrollTop,
+				"client-height": y.clientHeight,
+				"scroll-height": y.scrollHeight,
+				onWheel: t[0] ||= g(() => {}, ["stop"]),
+				"onUpdate:scrollTop": S
+			}, null, 8, [
+				"scroll-top",
+				"client-height",
+				"scroll-height"
+			]),
+			s(r, {
+				"scroll-left": y.scrollLeft,
+				"client-width": y.clientWidth,
+				"scroll-width": y.scrollWidth,
+				onWheel: t[1] ||= g(() => {}, ["stop"]),
+				"onUpdate:scrollLeft": C
+			}, null, 8, [
+				"scroll-left",
+				"client-width",
+				"scroll-width"
+			])
+		]));
+	}
+});
+export { v as default };
+
+//# sourceMappingURL=Scrollable.vue2.js.map

package/dist/components/Scrollable.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollable.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"Scrollable.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/Scrollable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport VScroll from \"./VScroll.vue\";\nimport HScroll from \"./HScroll.vue\";\nimport { onMounted, onUnmounted, reactive, ref, unref } from \"vue\";\nimport { tapIf, copyProps } from \"../helpers/functions\";\nimport { useResizeObserver } from \"../composition/useResizeObserver\";\n\nconst containerRef = ref<HTMLElement>();\n\nconst data = reactive({\n  scrollTop: 0,\n  scrollLeft: 0,\n  clientHeight: 0,\n  clientWidth: 0,\n  scrollHeight: 0,\n  scrollWidth: 0,\n});\n\nfunction updateState(container: HTMLElement) {\n  copyProps(\n    data,\n    container,\n    \"scrollTop\",\n    \"scrollLeft\",\n    \"clientHeight\",\n    \"clientWidth\",\n    \"scrollHeight\",\n    \"scrollWidth\",\n  );\n}\n\nconst onWheel = (e: WheelEvent) => {\n  e.preventDefault();\n  const root = e.currentTarget as HTMLElement;\n  root.scrollTop += e.deltaY;\n  root.scrollLeft += e.deltaX;\n  updateState(root);\n};\n\nfunction updateTop(v: number) {\n  tapIf(unref(containerRef), (el) => {\n    el.scrollTop = v;\n    updateState(el);\n  });\n}\n\nfunction updateLeft(v: number) {\n  tapIf(unref(containerRef), (el) => {\n    el.scrollLeft = v;\n    updateState(el);\n  });\n}\n\nuseResizeObserver(containerRef, (el) => {\n  tapIf(el, (el) => updateState(el));\n});\n\nonMounted(() => {\n  tapIf(unref(containerRef), (root) => {\n    updateState(root);\n    root.addEventListener(\"wheel\", onWheel);\n  });\n});\n\nonUnmounted(() => {\n  tapIf(unref(containerRef), (root) => root.removeEventListener(\"wheel\", onWheel));\n});\n</script>\n\n<template>\n  <div class=\"ui-scrollable\">\n    <div ref=\"containerRef\" class=\"ui-scrollable__container\" @wheel=\"onWheel\">\n      <slot />\n    </div>\n    <VScroll\n      :scroll-top=\"data.scrollTop\"\n      :client-height=\"data.clientHeight\"\n      :scroll-height=\"data.scrollHeight\"\n      @wheel.stop\n      @update:scroll-top=\"updateTop\"\n    />\n    <HScroll\n      :scroll-left=\"data.scrollLeft\"\n      :client-width=\"data.clientWidth\"\n      :scroll-width=\"data.scrollWidth\"\n      @wheel.stop\n      @update:scroll-left=\"updateLeft\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;EAOA,IAAM,IAAe,GAAkB,EAEjC,IAAO,EAAS;GACpB,WAAW;GACX,YAAY;GACZ,cAAc;GACd,aAAa;GACb,cAAc;GACd,aAAa;GACd,CAAC;EAEF,SAAS,EAAY,GAAwB;AAC3C,KACE,GACA,GACA,aACA,cACA,gBACA,eACA,gBACA,cACD;;EAGH,IAAM,KAAW,MAAkB;AACjC,KAAE,gBAAgB;GAClB,IAAM,IAAO,EAAE;AAGf,GAFA,EAAK,aAAa,EAAE,QACpB,EAAK,cAAc,EAAE,QACrB,EAAY,EAAK;;EAGnB,SAAS,EAAU,GAAW;AAC5B,KAAM,EAAM,EAAa,GAAG,MAAO;AAEjC,IADA,EAAG,YAAY,GACf,EAAY,EAAG;KACf;;EAGJ,SAAS,EAAW,GAAW;AAC7B,KAAM,EAAM,EAAa,GAAG,MAAO;AAEjC,IADA,EAAG,aAAa,GAChB,EAAY,EAAG;KACf;;SAGJ,EAAkB,IAAe,MAAO;AACtC,KAAM,IAAK,MAAO,EAAY,EAAG,CAAC;IAClC,EAEF,QAAgB;AACd,KAAM,EAAM,EAAa,GAAG,MAAS;AAEnC,IADA,EAAY,EAAK,EACjB,EAAK,iBAAiB,SAAS,EAAQ;KACvC;IACF,EAEF,QAAkB;AAChB,KAAM,EAAM,EAAa,GAAG,MAAS,EAAK,oBAAoB,SAAS,EAAQ,CAAC;IAChF,kBAIA,EAkBM,OAlBN,GAkBM;GAjBJ,EAEM,OAAA;aAFG;IAAJ,KAAI;IAAe,OAAM;IAAmC;OAC/D,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA;GAEV,EAME,GAAA;IALC,cAAY,EAAK;IACjB,iBAAe,EAAK;IACpB,iBAAe,EAAK;IACpB,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;IACV,sBAAmB;;;;;;GAEtB,EAME,GAAA;IALC,eAAa,EAAK;IAClB,gBAAc,EAAK;IACnB,gBAAc,EAAK;IACnB,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;IACV,uBAAoB"}

package/dist/components/Slider.js

@@ -0,0 +1,5 @@
+import e from "./Slider.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=Slider.js.map

package/dist/components/Slider.js.map

@@ -0,0 +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":""}

package/dist/components/Slider.vue2.js

@@ -1,5 +1,109 @@
-import f from "./Slider.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=Slider.vue2.js.map
+import { useMouseCapture as e } from "../composition/useMouseCapture.js";
+import { tapIf as t } from "../helpers/functions.js";
+import { clamp as n } from "../helpers/math.js";
+import r from "./PlTooltip/PlTooltip.js";
+import { useSliderBreakpoints as i } from "../composition/useSliderBreakpoints.js";
+import { getErrorMessage as a } from "../helpers/error.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, defineComponent as f, normalizeClass as p, normalizeStyle as m, openBlock as h, reactive as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useSlots as S, watch as C, withCtx as w } from "vue";
+var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section" }, D = {
+	key: 0,
+	class: "text-s"
+}, O = {
+	key: 1,
+	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,
+	class: "ui-slider__error"
+}, F = /* @__PURE__ */ f({
+	__name: "Slider",
+	props: {
+		modelValue: {},
+		min: { default: 0 },
+		max: {},
+		step: { default: 1 },
+		label: { default: void 0 },
+		helper: { default: void 0 },
+		error: { default: void 0 },
+		mode: { default: "text" },
+		measure: { default: "" },
+		breakpoints: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(f, { emit: F }) {
+		let I = S(), L = F, R = f, z = g({ deltaValue: 0 }), B = s(() => R.max - R.min), V = s(() => n((R.modelValue ?? 0) + z.deltaValue, R.min, R.max)), H = _(R.modelValue), U = s(() => {
+			let e = R.modelValue;
+			return Number.isFinite(e) ? e < R.min ? `Min value: ${R.min}` : e > R.max ? `Max value: ${R.max}` : a(R.error) : "Not a number";
+		}), W = i(s(() => R)), G = s(() => (V.value - R.min) / B.value), K = s(() => ({ right: Math.ceil((1 - G.value) * 100) + "%" })), q = s(() => ({ right: `calc(${Math.ceil((1 - G.value) * 100)}%) ` })), J = _(), Y = _();
+		C(() => R.modelValue, (e) => {
+			H.value = e;
+		});
+		function X(e) {
+			let t = n(e, R.min, R.max);
+			return Math.round((t + 2 ** -52) * (1 / R.step)) / (1 / R.step);
+		}
+		e(Y, (e) => {
+			t(x(J)?.getBoundingClientRect(), (t) => {
+				let { dx: r } = e;
+				z.deltaValue = r / t.width * B.value, H.value = X(n((R.modelValue ?? 0) + z.deltaValue, R.min, R.max)), e.stop && (L("update:modelValue", X(V.value)), z.deltaValue = 0);
+			});
+		});
+		function Z(e) {
+			L("update:modelValue", X(e));
+		}
+		function Q(e) {
+			Z(+e.target.value);
+		}
+		function $(e) {
+			[
+				"ArrowDown",
+				"ArrowUp",
+				"ArrowRight",
+				"ArrowLeft",
+				"Enter"
+			].includes(e.code) && e.preventDefault();
+			let t = e.code === "ArrowUp" || e.code === "ArrowRight" ? R.step * 1 : e.code === "ArrowDown" || e.code === "ArrowLeft" ? R.step * -1 : 0;
+			Z(R.modelValue + t);
+		}
+		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), {
+			key: 0,
+			class: "info",
+			position: "top"
+		}, {
+			tooltip: w(() => [y(e.$slots, "tooltip")]),
+			_: 3
+		})) : l("", !0)])) : l("", !0), R.mode === "text" ? (h(), u("div", O, b(H.value) + b(f.measure), 1)) : l("", !0)]), d("div", k, [d("div", A, [d("div", {
+			ref_key: "barRef",
+			ref: J,
+			class: "ui-slider__bar"
+		}, [d("div", {
+			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,
+			style: m({ right: `${e}%` }),
+			class: "ui-slider__thumb-step"
+		}, null, 4))), 128)) : l("", !0), d("div", {
+			ref_key: "thumbRef",
+			ref: Y,
+			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,
+			value: H.value,
+			class: "ui-slider__value text-s",
+			onChange: t[0] ||= (e) => Q(e)
+		}, null, 40, N)) : l("", !0)])], 2), U.value ? (h(), u("div", P, b(U.value), 1)) : l("", !0)], 2));
+	}
+});
+export { F as default };
+
+//# sourceMappingURL=Slider.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"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":"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"}

package/dist/components/SliderRange.js

@@ -0,0 +1,5 @@
+import e from "./SliderRange.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=SliderRange.js.map

package/dist/components/SliderRange.js.map

@@ -0,0 +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":""}

package/dist/components/SliderRange.vue2.js

@@ -1,5 +1,132 @@
-import f from "./SliderRange.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=SliderRange.vue2.js.map
+import { useMouseCapture as e } from "../composition/useMouseCapture.js";
+import { tapIf as t } from "../helpers/functions.js";
+import { clamp as n } from "../helpers/math.js";
+import r from "./PlTooltip/PlTooltip.js";
+import { useSliderBreakpoints as i } from "../composition/useSliderBreakpoints.js";
+import { getErrorMessage as a } from "../helpers/error.js";
+import o from "./InputRange.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, openBlock as g, reactive as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useSlots as C, watch as w, withCtx as ee } from "vue";
+var T = { class: "ui-slider__wrapper" }, E = { class: "ui-slider__label-section" }, D = {
+	key: 0,
+	class: "text-s"
+}, O = {
+	key: 1,
+	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,
+	class: "ui-slider__error"
+}, N = /* @__PURE__ */ p({
+	__name: "SliderRange",
+	props: {
+		modelValue: {},
+		min: { default: 0 },
+		max: {},
+		step: { default: 1 },
+		label: { default: void 0 },
+		helper: { default: void 0 },
+		error: { default: void 0 },
+		mode: { default: "text" },
+		measure: { default: "" },
+		breakpoints: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(p, { emit: N }) {
+		let ne = C(), re = N, P = p, F = _({
+			deltaValue1: 0,
+			deltaValue2: 0
+		}), I = v(), L = v(), R = v(), z = v(P.modelValue), B = v(P.modelValue[0]), V = v(P.modelValue[1]), H = i(c(() => P)), U = c(() => [B.value, V.value].sort((e, t) => e - t).join("-")), W = c(() => P.max - P.min), G = c(() => n((P.modelValue[0] ?? 0) + F.deltaValue1, P.min, P.max)), K = c(() => n((P.modelValue[1] ?? 0) + F.deltaValue2, P.min, P.max)), q = c(() => {
+			let e = P.modelValue;
+			return Array.isArray(e) && e.length === 2 && e.every((e) => Number.isFinite(e)) ? a(P.error) : "Expected model [number, number]";
+		}), J = c(() => (G.value - P.min) / W.value), Y = c(() => (K.value - P.min) / W.value), X = c(() => se()), ie = c(() => ({
+			right: X.value[0] + "%",
+			left: 100 - X.value[1] + "%"
+		})), ae = c(() => ({ right: Math.ceil((1 - J.value) * 100) + "%" })), oe = c(() => ({ right: Math.ceil((1 - Y.value) * 100) + "%" }));
+		w(() => P.modelValue, (e) => {
+			z.value = e, B.value = +e[0], V.value = +e[1];
+		}, { immediate: !0 }), e(L, (e) => {
+			t(S(I)?.getBoundingClientRect(), (t) => {
+				let { dx: r } = e;
+				F.deltaValue1 = r / t.width * W.value, B.value = Z(n((P.modelValue[0] ?? 0) + F.deltaValue1, P.min, P.max)), z.value = [B.value, V.value].sort((e, t) => e - t), e.stop && (Q([Z(G.value), Z(K.value)]), F.deltaValue1 = 0);
+			});
+		}), e(R, (e) => {
+			t(S(I)?.getBoundingClientRect(), (t) => {
+				let { dx: r } = e;
+				F.deltaValue2 = r / t.width * W.value, V.value = Z(n((P.modelValue[1] ?? 0) + F.deltaValue2, P.min, P.max)), z.value = [B.value, V.value].sort((e, t) => e - t), e.stop && (Q([Z(G.value), Z(K.value)]), F.deltaValue2 = 0);
+			});
+		});
+		function se() {
+			return [Math.ceil((1 - J.value) * 100), Math.ceil((1 - Y.value) * 100)].sort((e, t) => e - t);
+		}
+		function Z(e) {
+			let t = n(e, P.min, P.max);
+			return Math.round((t + 2 ** -52) * (1 / P.step)) / (1 / P.step);
+		}
+		function Q(e) {
+			re("update:modelValue", e);
+		}
+		function $(e, t) {
+			[
+				"ArrowDown",
+				"ArrowUp",
+				"ArrowRight",
+				"ArrowLeft",
+				"Enter"
+			].includes(e.code) && e.preventDefault();
+			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), {
+			key: 0,
+			class: "info",
+			position: "top"
+		}, {
+			tooltip: ee(() => [b(e.$slots, "tooltip")]),
+			_: 3
+		})) : u("", !0)])) : u("", !0), P.mode === "text" ? (g(), d("div", O, x(U.value), 1)) : u("", !0)]), f("div", k, [f("div", A, [f("div", {
+			ref_key: "barRef",
+			ref: I,
+			class: "ui-slider__bar"
+		}, [f("div", {
+			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,
+				style: h({ right: `${e}%` }),
+				class: "ui-slider__thumb-step"
+			}, null, 4))), 128)) : u("", !0),
+			f("div", {
+				ref_key: "thumbRef1",
+				ref: L,
+				style: h(ae.value),
+				class: "ui-slider__thumb",
+				tabindex: "0",
+				onKeydown: t[0] ||= (e) => $(e, 0)
+			}, [...t[3] ||= [f("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)]], 36),
+			f("div", {
+				ref_key: "thumbRef2",
+				ref: R,
+				style: h(oe.value),
+				class: "ui-slider__thumb",
+				tabindex: "0",
+				onKeydown: t[1] ||= (e) => $(e, 1)
+			}, [...t[4] ||= [f("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)]], 36)
+		])])]), f("div", M, [P.mode === "input" ? (g(), l(o, {
+			key: 0,
+			modelValue: z.value,
+			"onUpdate:modelValue": t[2] ||= (e) => z.value = e,
+			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));
+	}
+});
+export { N as default };
+
+//# sourceMappingURL=SliderRange.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SliderRange.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"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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"}

package/dist/components/SliderRangeTriple.js

@@ -0,0 +1,5 @@
+import e from "./SliderRangeTriple.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=SliderRangeTriple.js.map

package/dist/components/SliderRangeTriple.js.map

@@ -0,0 +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":""}