@milaboratories/uikit 2.6.2 → 2.6.4

package/dist/components/PlTooltip/PlTooltip.vue.js

@@ -1,11 +1,11 @@
 (function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".pl-tooltip{--pl-tooltip-max-width: 300px;z-index:var(--z-tooltip);position:absolute;display:inline-block;padding:8px 12px 9px;background:var(--tooltip-bg);border-radius:6px;width:max-content;word-break:normal;transform-origin:0 50%;max-width:var(--pl-tooltip-max-width);color:#fff}.pl-tooltip__container{position:absolute;width:0;height:0}.pl-tooltip a{color:var(--tooltip-link-color)}.pl-tooltip p{margin-bottom:8px}.pl-tooltip ul,.pl-tooltip li{margin-left:6px;padding-left:6px}.pl-tooltip li{margin-bottom:4px}.pl-tooltip .beak{position:absolute;top:50%;right:100%}.pl-tooltip.top-left{bottom:0}.pl-tooltip.top-left .beak{position:absolute;top:calc(100% - 2px);transform:translate(-50%) rotate(-90deg);left:20%}.pl-tooltip.left{right:0;transform:translateY(-50%)}.pl-tooltip.left .beak{position:absolute;top:50%;transform:translateY(-50%) rotate(180deg);left:100%}.pl-tooltip.right{left:0;transform:translateY(-50%)}.pl-tooltip.right .beak{position:absolute;top:50%;transform:translateY(-50%);right:100%}.pl-tooltip.top{transform:translate(-50%);bottom:0}.pl-tooltip.top .beak{position:absolute;top:calc(100% - 2px);transform:translate(-50%) rotate(-90deg);left:50%}.pl-tooltip.southwest{transform:translateY(100%);bottom:0;right:-6px}.pl-tooltip.southwest .beak{position:absolute;top:-2px;transform:translateY(-50%) rotate(90deg);right:12px}.tooltip-transition-enter-active,.tooltip-transition-leave-active{transition:all .1s ease-in-out}.tooltip-transition-enter-from,.tooltip-transition-leave-to{opacity:0;transform:translateY(-50%) scale(0)}")),document.head.appendChild(t)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-import { defineComponent as $, reactive as b, watch as c, ref as u, toRef as N, computed as P, onUnmounted as R, createBlock as y, openBlock as a, resolveDynamicComponent as V, mergeProps as g, withCtx as v, renderSlot as k, createCommentVNode as h, Teleport as j, createVNode as w, Transition as z, createElementBlock as A, withModifiers as W, normalizeStyle as C, unref as q, createElementVNode as T, normalizeClass as x } from "vue";
+import { defineComponent as $, reactive as b, watch as u, ref as y, toRef as x, computed as N, onUnmounted as P, createBlock as v, openBlock as p, resolveDynamicComponent as R, mergeProps as V, withCtx as k, renderSlot as h, createCommentVNode as w, Teleport as g, createVNode as C, Transition as j, createElementBlock as z, withModifiers as A, normalizeStyle as T, unref as W, createElementVNode as M, normalizeClass as q } from "vue";
 
 import { useTooltipPosition as F } from "./useTooltipPosition.js";
 import { throttle as K, delay as L, timeout as U } from "../../helpers/utils.js";
 import { useClickOutside as G } from "../../composition/useClickOutside.js";
 import H from "./Beak.vue.js";
-import { tMap as p } from "./global.js";
+import { tMap as m } from "./global.js";
 const I = {
   name: "PlTooltip"
 }, te = /* @__PURE__ */ $({
@@ -20,89 +20,89 @@ const I = {
     maxWidth: { default: "300px" }
   },
   emits: ["tooltip:close"],
-  setup(M, { emit: _ }) {
-    const B = _, i = Symbol(), t = M, o = b({
+  setup(i, { emit: B }) {
+    const D = B, s = Symbol(), t = i, e = b({
       open: !1,
       over: !1,
       tooltipOpen: !1,
       key: Symbol()
     });
-    p.set(i, () => l()), c(
-      () => o.open,
-      (e) => {
+    m.set(s, () => l()), u(
+      () => e.open,
+      (o) => {
         requestAnimationFrame(() => {
-          o.tooltipOpen = e;
+          e.tooltipOpen = o;
         });
       }
     );
-    let m = () => {
+    let f = () => {
     };
-    const D = K(() => window.dispatchEvent(new CustomEvent("adjust")), 1e3), O = () => {
-      o.open = !0;
-      for (const [e, n] of p.entries())
-        e !== i && n();
+    const O = K(() => window.dispatchEvent(new CustomEvent("adjust")), 1e3), S = () => {
+      e.open = !0;
+      for (const [o, n] of m.entries())
+        o !== s && n();
     }, l = () => {
-      o.open = !1, B("tooltip:close");
-    }, s = async () => {
-      t.hide || (D(), o.over = !0, m(), await L(t.openDelay ?? 100), o.over && O());
-    }, f = () => {
-      o.over = !1, m = U(() => {
-        o.over || l();
+      e.open = !1, D("tooltip:close");
+    }, r = async () => {
+      t.hide || (O(), e.over = !0, f(), await L(t.openDelay ?? 100), e.over && S());
+    }, c = () => {
+      e.over = !1, f = U(() => {
+        e.over || l();
       }, t.closeDelay);
     };
-    c(
+    u(
       () => t.hide,
-      (e) => {
-        e && l();
+      (o) => {
+        o && l();
       }
     );
-    const r = u(), d = u(), S = F(r, N(t));
-    G([r, d], () => l());
-    const E = P(() => ({
+    const a = y(), d = y(), E = F(a, x(t));
+    G([a, d], () => l());
+    const _ = N(() => ({
       "--pl-tooltip-max-width": t.maxWidth
     }));
-    return R(() => {
-      p.delete(i);
-    }), (e, n) => (a(), y(V(e.element), g(e.$attrs, {
+    return P(() => {
+      m.delete(s);
+    }), (o, n) => (p(), v(R(i.element), V(o.$attrs, {
       ref_key: "rootRef",
-      ref: r,
-      onClick: s,
-      onMouseover: s,
-      onMouseleave: f
+      ref: a,
+      onClick: r,
+      onMouseover: r,
+      onMouseleave: c
     }), {
-      default: v(() => [
-        k(e.$slots, "default"),
-        e.$slots.tooltip && o.open ? (a(), y(j, {
+      default: k(() => [
+        h(o.$slots, "default"),
+        o.$slots.tooltip && e.open ? (p(), v(g, {
           key: 0,
           to: "body"
         }, [
-          w(z, { name: "tooltip-transition" }, {
-            default: v(() => [
-              o.tooltipOpen ? (a(), A("div", {
+          C(j, { name: "tooltip-transition" }, {
+            default: k(() => [
+              e.tooltipOpen ? (p(), z("div", {
                 key: 0,
                 class: "pl-tooltip__container",
-                style: C(q(S)),
-                onClick: n[0] || (n[0] = W(() => {
+                style: T(W(E)),
+                onClick: n[0] || (n[0] = A(() => {
                 }, ["stop"]))
               }, [
-                T("div", {
+                M("div", {
                   ref_key: "tooltip",
                   ref: d,
-                  class: x(["pl-tooltip", e.position]),
-                  style: C(E.value),
-                  onMouseover: s,
-                  onMouseleave: f
+                  class: q(["pl-tooltip", i.position]),
+                  style: T(_.value),
+                  onMouseover: r,
+                  onMouseleave: c
                 }, [
-                  T("div", null, [
-                    k(e.$slots, "tooltip")
+                  M("div", null, [
+                    h(o.$slots, "tooltip")
                   ]),
-                  w(H)
+                  C(H)
                 ], 38)
-              ], 4)) : h("", !0)
+              ], 4)) : w("", !0)
             ]),
             _: 3
           })
-        ])) : h("", !0)
+        ])) : w("", !0)
       ]),
       _: 3
     }, 16));

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

@@ -1 +1 @@
-{"version":3,"file":"PlTooltip.vue.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 './pl-tooltip.scss';\nimport { computed, onUnmounted, reactive, ref, toRef, watch } from 'vue';\nimport { useTooltipPosition } from './useTooltipPosition';\nimport * as utils from '../../helpers/utils';\nimport { useClickOutside } from '../../composition/useClickOutside';\nimport Beak from './Beak.vue';\nimport { tMap } from './global';\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' | 'left' | 'right' | 'top' | 'southwest';\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     * 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  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    position: 'top',\n    element: 'div',\n    maxWidth: '300px',\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 dispatchAdjust = utils.throttle(() => window.dispatchEvent(new CustomEvent('adjust')), 1000);\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) {\n    return;\n  }\n\n  dispatchAdjust();\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  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    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nconst style = useTooltipPosition(rootRef, toRef(props));\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nconst tooltipStyle = computed(() => ({\n  '--pl-tooltip-max-width': props.maxWidth,\n}));\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\n</script>\n\n<template>\n  <component :is=\"element\" v-bind=\"$attrs\" ref=\"rootRef\" @click=\"onOver\" @mouseover=\"onOver\" @mouseleave=\"onLeave\">\n    <slot />\n    <Teleport v-if=\"$slots['tooltip'] && data.open\" to=\"body\">\n      <Transition name=\"tooltip-transition\">\n        <div v-if=\"data.tooltipOpen\" class=\"pl-tooltip__container\" :style=\"style\" @click.stop>\n          <div ref=\"tooltip\" class=\"pl-tooltip\" :style=\"tooltipStyle\" :class=\"position\" @mouseover=\"onOver\" @mouseleave=\"onLeave\">\n            <!-- should be one line -->\n            <div><slot name=\"tooltip\" /></div>\n            <Beak />\n          </div>\n        </div>\n      </Transition>\n    </Teleport>\n  </component>\n</template>\n"],"names":["__default__","emit","__emit","tKey","props","__props","data","reactive","tMap","closeTooltip","watch","v","clearTimeout","dispatchAdjust","utils.throttle","showTooltip","k","f","onOver","utils.delay","onLeave","utils.timeout","hide","rootRef","ref","tooltip","style","useTooltipPosition","toRef","useClickOutside","tooltipStyle","computed","onUnmounted"],"mappings":";;;;;;;AAEA,MAAAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;AAYA,UAAMC,IAAOC,GAEPC,IAAO,OAAA,GAEPC,IAAQC,GAyCRC,IAAOC,EAAS;AAAA,MACpB,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,KAAK,OAAA;AAAA,IAAO,CACb;AAED,IAAAC,EAAK,IAAIL,GAAM,MAAMM,EAAA,CAAc,GAGnCC;AAAA,MACE,MAAMJ,EAAK;AAAA,MACX,CAACK,MAAM;AACL,8BAAsB,MAAM;AAC1B,UAAAL,EAAK,cAAcK;AAAA,QACrB,CAAC;AAAA,MACH;AAAA,IAAA;AAGF,QAAIC,IAAe,MAAM;AAAA,IAAC;AAE1B,UAAMC,IAAiBC,EAAe,MAAM,OAAO,cAAc,IAAI,YAAY,QAAQ,CAAC,GAAG,GAAI,GAE3FC,IAAc,MAAM;AACxB,MAAAT,EAAK,OAAO;AAEZ,iBAAW,CAACU,GAAGC,CAAC,KAAKT,EAAK;AACxB,QAAIQ,MAAMb,KACRc,EAAA;AAAA,IAGN,GAEMR,IAAe,MAAM;AACzB,MAAAH,EAAK,OAAO,IACZL,EAAK,eAAe;AAAA,IACtB,GAEMiB,IAAS,YAAY;AACzB,MAAId,EAAM,SAIVS,EAAA,GAEAP,EAAK,OAAO,IAEZM,EAAA,GAEA,MAAMO,EAAYf,EAAM,aAAa,GAAG,GAEpCE,EAAK,QACPS,EAAA;AAAA,IAEJ,GAEMK,IAAU,MAAM;AACpB,MAAAd,EAAK,OAAO,IACZM,IAAeS,EAAc,MAAM;AACjC,QAAKf,EAAK,QACRG,EAAA;AAAA,MAEJ,GAAGL,EAAM,UAAU;AAAA,IACrB;AAEA,IAAAM;AAAA,MACE,MAAMN,EAAM;AAAA,MACZ,CAACkB,MAAS;AACR,QAAIA,KACFb,EAAA;AAAA,MAEJ;AAAA,IAAA;AAGF,UAAMc,IAAUC,EAAA,GACVC,IAAUD,EAAA,GAEVE,IAAQC,EAAmBJ,GAASK,EAAMxB,CAAK,CAAC;AAEtD,IAAAyB,EAAgB,CAACN,GAASE,CAAO,GAAG,MAAMhB,GAAc;AAExD,UAAMqB,IAAeC,EAAS,OAAO;AAAA,MACnC,0BAA0B3B,EAAM;AAAA,IAAA,EAChC;AAEF,WAAA4B,EAAY,MAAM;AAChB,MAAAxB,EAAK,OAAOL,CAAI;AAAA,IAClB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlTooltip.vue.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 './pl-tooltip.scss';\nimport { computed, onUnmounted, reactive, ref, toRef, watch } from 'vue';\nimport { useTooltipPosition } from './useTooltipPosition';\nimport * as utils from '../../helpers/utils';\nimport { useClickOutside } from '../../composition/useClickOutside';\nimport Beak from './Beak.vue';\nimport { tMap } from './global';\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' | 'left' | 'right' | 'top' | 'southwest';\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     * 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  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    position: 'top',\n    element: 'div',\n    maxWidth: '300px',\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 dispatchAdjust = utils.throttle(() => window.dispatchEvent(new CustomEvent('adjust')), 1000);\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) {\n    return;\n  }\n\n  dispatchAdjust();\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  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    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nconst style = useTooltipPosition(rootRef, toRef(props));\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nconst tooltipStyle = computed(() => ({\n  '--pl-tooltip-max-width': props.maxWidth,\n}));\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\n</script>\n\n<template>\n  <component :is=\"element\" v-bind=\"$attrs\" ref=\"rootRef\" @click=\"onOver\" @mouseover=\"onOver\" @mouseleave=\"onLeave\">\n    <slot />\n    <Teleport v-if=\"$slots['tooltip'] && data.open\" to=\"body\">\n      <Transition name=\"tooltip-transition\">\n        <div v-if=\"data.tooltipOpen\" class=\"pl-tooltip__container\" :style=\"style\" @click.stop>\n          <div ref=\"tooltip\" class=\"pl-tooltip\" :style=\"tooltipStyle\" :class=\"position\" @mouseover=\"onOver\" @mouseleave=\"onLeave\">\n            <!-- should be one line -->\n            <div><slot name=\"tooltip\" /></div>\n            <Beak />\n          </div>\n        </div>\n      </Transition>\n    </Teleport>\n  </component>\n</template>\n"],"names":["__default__","emit","__emit","tKey","props","__props","data","reactive","tMap","closeTooltip","watch","v","clearTimeout","dispatchAdjust","utils.throttle","showTooltip","k","f","onOver","utils.delay","onLeave","utils.timeout","hide","rootRef","ref","tooltip","style","useTooltipPosition","toRef","useClickOutside","tooltipStyle","computed","onUnmounted","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","$attrs","_renderSlot","_ctx","$slots","_Teleport","_createVNode","_Transition","_createElementBlock","_unref","_createElementVNode","_normalizeClass","Beak"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Scrollable.vue.js","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(data, container, 'scrollTop', 'scrollLeft', 'clientHeight', 'clientWidth', 'scrollHeight', 'scrollWidth');\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"],"names":["containerRef","ref","data","reactive","updateState","container","copyProps","onWheel","root","updateTop","v","tapIf","unref","el","updateLeft","useResizeObserver","onMounted","onUnmounted"],"mappings":";;;;;;;;AAOA,UAAMA,IAAeC,EAAA,GAEfC,IAAOC,EAAS;AAAA,MACpB,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,aAAa;AAAA,MACb,cAAc;AAAA,MACd,aAAa;AAAA,IAAA,CACd;AAED,aAASC,EAAYC,GAAwB;AAC3C,MAAAC,EAAUJ,GAAMG,GAAW,aAAa,cAAc,gBAAgB,eAAe,gBAAgB,aAAa;AAAA,IACpH;AAEA,UAAME,IAAU,CAAC,MAAkB;AACjC,QAAE,eAAA;AACF,YAAMC,IAAO,EAAE;AACf,MAAAA,EAAK,aAAa,EAAE,QACpBA,EAAK,cAAc,EAAE,QACrBJ,EAAYI,CAAI;AAAA,IAClB;AAEA,aAASC,EAAUC,GAAW;AAC5B,MAAAC,EAAMC,EAAMZ,CAAY,GAAG,CAACa,MAAO;AACjC,QAAAA,EAAG,YAAYH,GACfN,EAAYS,CAAE;AAAA,MAChB,CAAC;AAAA,IACH;AAEA,aAASC,EAAWJ,GAAW;AAC7B,MAAAC,EAAMC,EAAMZ,CAAY,GAAG,CAACa,MAAO;AACjC,QAAAA,EAAG,aAAaH,GAChBN,EAAYS,CAAE;AAAA,MAChB,CAAC;AAAA,IACH;AAEA,WAAAE,EAAkBf,GAAc,CAACa,MAAO;AACtC,MAAAF,EAAME,GAAI,CAACA,MAAOT,EAAYS,CAAE,CAAC;AAAA,IACnC,CAAC,GAEDG,EAAU,MAAM;AACd,MAAAL,EAAMC,EAAMZ,CAAY,GAAG,CAACQ,MAAS;AACnC,QAAAJ,EAAYI,CAAI,GAChBA,EAAK,iBAAiB,SAASD,CAAO;AAAA,MACxC,CAAC;AAAA,IACH,CAAC,GAEDU,EAAY,MAAM;AAChB,MAAAN,EAAMC,EAAMZ,CAAY,GAAG,CAACQ,MAASA,EAAK,oBAAoB,SAASD,CAAO,CAAC;AAAA,IACjF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Scrollable.vue.js","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(data, container, 'scrollTop', 'scrollLeft', 'clientHeight', 'clientWidth', 'scrollHeight', 'scrollWidth');\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"],"names":["containerRef","ref","data","reactive","updateState","container","copyProps","onWheel","root","updateTop","v","tapIf","unref","el","updateLeft","useResizeObserver","onMounted","onUnmounted","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_renderSlot","_ctx","_createVNode","VScroll","HScroll"],"mappings":";;;;;;;;AAOA,UAAMA,IAAeC,EAAA,GAEfC,IAAOC,EAAS;AAAA,MACpB,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,aAAa;AAAA,MACb,cAAc;AAAA,MACd,aAAa;AAAA,IAAA,CACd;AAED,aAASC,EAAYC,GAAwB;AAC3C,MAAAC,EAAUJ,GAAMG,GAAW,aAAa,cAAc,gBAAgB,eAAe,gBAAgB,aAAa;AAAA,IACpH;AAEA,UAAME,IAAU,CAAC,MAAkB;AACjC,QAAE,eAAA;AACF,YAAMC,IAAO,EAAE;AACf,MAAAA,EAAK,aAAa,EAAE,QACpBA,EAAK,cAAc,EAAE,QACrBJ,EAAYI,CAAI;AAAA,IAClB;AAEA,aAASC,EAAUC,GAAW;AAC5B,MAAAC,EAAMC,EAAMZ,CAAY,GAAG,CAACa,MAAO;AACjC,QAAAA,EAAG,YAAYH,GACfN,EAAYS,CAAE;AAAA,MAChB,CAAC;AAAA,IACH;AAEA,aAASC,EAAWJ,GAAW;AAC7B,MAAAC,EAAMC,EAAMZ,CAAY,GAAG,CAACa,MAAO;AACjC,QAAAA,EAAG,aAAaH,GAChBN,EAAYS,CAAE;AAAA,MAChB,CAAC;AAAA,IACH;AAEA,WAAAE,EAAkBf,GAAc,CAACa,MAAO;AACtC,MAAAF,EAAME,GAAI,CAACA,MAAOT,EAAYS,CAAE,CAAC;AAAA,IACnC,CAAC,GAEDG,EAAU,MAAM;AACd,MAAAL,EAAMC,EAAMZ,CAAY,GAAG,CAACQ,MAAS;AACnC,QAAAJ,EAAYI,CAAI,GAChBA,EAAK,iBAAiB,SAASD,CAAO;AAAA,MACxC,CAAC;AAAA,IACH,CAAC,GAEDU,EAAY,MAAM;AAChB,MAAAN,EAAMC,EAAMZ,CAAY,GAAG,CAACQ,MAASA,EAAK,oBAAoB,SAASD,CAAO,CAAC;AAAA,IACjF,CAAC,cAICW,EAAA,GAAAC,EAkBM,OAlBNC,GAkBM;AAAA,MAjBJC,EAEM,OAAA;AAAA,iBAFG;AAAA,QAAJ,KAAIrB;AAAA,QAAe,OAAM;AAAA,QAA4B,SAAAO;AAAA,MAAA;QACxDe,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;MAEVC,EAMEC,GAAA;AAAA,QALC,cAAYvB,EAAK;AAAA,QACjB,iBAAeA,EAAK;AAAA,QACpB,iBAAeA,EAAK;AAAA,QACpB,2BAAD,MAAA;AAAA,QAAA,GAAW,CAAA,MAAA,CAAA;AAAA,QACV,sBAAmBO;AAAA,MAAA;MAEtBe,EAMEE,GAAA;AAAA,QALC,eAAaxB,EAAK;AAAA,QAClB,gBAAcA,EAAK;AAAA,QACnB,gBAAcA,EAAK;AAAA,QACnB,2BAAD,MAAA;AAAA,QAAA,GAAW,CAAA,MAAA,CAAA;AAAA,QACV,uBAAoBY;AAAA,MAAA;;;;"}

package/dist/components/Slider.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as z, useSlots as F, reactive as I, computed as r, ref as f, watch as K, createElementBlock as i, openBlock as s, normalizeClass as M, createElementVNode as l, createCommentVNode as a, createBlock as P, toDisplayString as c, unref as m, withCtx as U, renderSlot as O, normalizeStyle as v, Fragment as j, renderList as q } from "vue";
+import { defineComponent as z, useSlots as F, reactive as I, computed as r, ref as v, watch as K, createElementBlock as i, openBlock as s, normalizeClass as R, createElementVNode as l, createCommentVNode as a, createBlock as P, toDisplayString as m, unref as _, withCtx as U, renderSlot as O, normalizeStyle as h, Fragment as j, renderList as q } from "vue";
 import { useMouseCapture as G } from "../composition/useMouseCapture.js";
 import { tapIf as H } from "../helpers/functions.js";
-import { clamp as h } from "../helpers/math.js";
+import { clamp as b } from "../helpers/math.js";
 import J from "./PlTooltip/PlTooltip.vue.js";
 import { useSliderBreakpoints as Q } from "../composition/useSliderBreakpoints.js";
 import { getErrorMessage as T } from "../helpers/error.js";
@@ -14,7 +14,7 @@ const W = { class: "ui-slider__wrapper" }, X = { class: "ui-slider__label-sectio
 }, ee = { class: "ui-slider__base" }, te = { class: "ui-slider__container" }, le = { class: "ui-slider__container ui-slider__container-thumb" }, oe = { class: "ui-slider__input-wrapper d-flex" }, se = ["value"], re = {
   key: 0,
   class: "ui-slider__error"
-}, pe = /* @__PURE__ */ z({
+}, _e = /* @__PURE__ */ z({
   __name: "Slider",
   props: {
     modelValue: {},
@@ -30,56 +30,56 @@ const W = { class: "ui-slider__wrapper" }, X = { class: "ui-slider__label-sectio
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(R, { emit: A }) {
-    const B = F(), b = A, e = R, n = I({
+  setup(n, { emit: A }) {
+    const B = F(), V = A, e = n, d = I({
       deltaValue: 0
-    }), V = r(() => e.max - e.min), y = r(() => h((e.modelValue ?? 0) + n.deltaValue, e.min, e.max)), d = f(e.modelValue), g = r(() => {
+    }), y = r(() => e.max - e.min), x = r(() => b((e.modelValue ?? 0) + d.deltaValue, e.min, e.max)), c = v(e.modelValue), g = r(() => {
       const t = e.modelValue;
       return Number.isFinite(t) ? t < e.min ? `Min value: ${e.min}` : t > e.max ? `Max value: ${e.max}` : T(e.error) : "Not a number";
-    }), C = r(() => e), $ = Q(C), k = r(() => (y.value - e.min) / V.value), N = r(() => ({
+    }), C = r(() => e), $ = Q(C), k = r(() => (x.value - e.min) / y.value), N = r(() => ({
       right: Math.ceil((1 - k.value) * 100) + "%"
     })), E = r(() => ({
       right: `calc(${Math.ceil((1 - k.value) * 100)}%) `
-    })), w = f(), x = f();
+    })), w = v(), S = v();
     K(
       () => e.modelValue,
       (t) => {
-        d.value = t;
+        c.value = t;
       }
     );
     function p(t) {
-      const o = h(t, e.min, e.max);
+      const o = b(t, e.min, e.max);
       return Math.round((o + Number.EPSILON) * (1 / e.step)) / (1 / e.step);
     }
-    G(x, (t) => {
+    G(S, (t) => {
       var o;
-      H((o = m(w)) == null ? void 0 : o.getBoundingClientRect(), (u) => {
-        const { dx: _ } = t;
-        n.deltaValue = _ / u.width * V.value, d.value = p(h((e.modelValue ?? 0) + n.deltaValue, e.min, e.max)), t.stop && (b("update:modelValue", p(y.value)), n.deltaValue = 0);
+      H((o = _(w)) == null ? void 0 : o.getBoundingClientRect(), (u) => {
+        const { dx: f } = t;
+        d.deltaValue = f / u.width * y.value, c.value = p(b((e.modelValue ?? 0) + d.deltaValue, e.min, e.max)), t.stop && (V("update:modelValue", p(x.value)), d.deltaValue = 0);
       });
     });
-    function S(t) {
-      b("update:modelValue", p(t));
+    function M(t) {
+      V("update:modelValue", p(t));
     }
     function D(t) {
-      S(+t.target.value);
+      M(+t.target.value);
     }
     function L(t) {
       ["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Enter"].includes(t.code) && t.preventDefault();
       const o = t.code === "ArrowUp" || t.code === "ArrowRight" ? e.step * 1 : t.code === "ArrowDown" || t.code === "ArrowLeft" ? e.step * -1 : 0;
-      S(e.modelValue + o);
+      M(e.modelValue + o);
     }
     return (t, o) => (s(), i("div", {
-      class: M([e.disabled ? "ui-slider__disabled" : void 0, "ui-slider__envelope"])
+      class: R([e.disabled ? "ui-slider__disabled" : void 0, "ui-slider__envelope"])
     }, [
       l("div", {
-        class: M([`ui-slider__mode-${e.mode}`, "ui-slider"])
+        class: R([`ui-slider__mode-${e.mode}`, "ui-slider"])
       }, [
         l("div", W, [
           l("div", X, [
-            t.label ? (s(), i("label", Y, [
-              l("span", null, c(t.label), 1),
-              m(B).tooltip ? (s(), P(m(J), {
+            n.label ? (s(), i("label", Y, [
+              l("span", null, m(n.label), 1),
+              _(B).tooltip ? (s(), P(_(J), {
                 key: 0,
                 class: "info",
                 position: "top"
@@ -90,7 +90,7 @@ const W = { class: "ui-slider__wrapper" }, X = { class: "ui-slider__label-sectio
                 _: 3
               })) : a("", !0)
             ])) : a("", !0),
-            e.mode === "text" ? (s(), i("div", Z, c(d.value) + c(t.measure), 1)) : a("", !0)
+            e.mode === "text" ? (s(), i("div", Z, m(c.value) + m(n.measure), 1)) : a("", !0)
           ]),
           l("div", ee, [
             l("div", te, [
@@ -101,43 +101,43 @@ const W = { class: "ui-slider__wrapper" }, X = { class: "ui-slider__label-sectio
               }, [
                 l("div", {
                   class: "ui-slider__progress",
-                  style: v(N.value)
+                  style: h(N.value)
                 }, null, 4)
               ], 512)
             ]),
             l("div", le, [
-              e.breakpoints ? (s(!0), i(j, { key: 0 }, q(m($), (u, _) => (s(), i("div", {
-                key: _,
-                style: v({ right: `${u}%` }),
+              e.breakpoints ? (s(!0), i(j, { key: 0 }, q(_($), (u, f) => (s(), i("div", {
+                key: f,
+                style: h({ right: `${u}%` }),
                 class: "ui-slider__thumb-step"
               }, null, 4))), 128)) : a("", !0),
               l("div", {
                 ref_key: "thumbRef",
-                ref: x,
+                ref: S,
                 tabindex: "0",
                 class: "ui-slider__thumb ui-slider__thumb-active",
-                style: v(E.value),
+                style: h(E.value),
                 onKeydown: L
-              }, o[1] || (o[1] = [
+              }, [...o[1] || (o[1] = [
                 l("div", { class: "ui-slider__thumb-focused-contour" }, null, -1)
-              ]), 36)
+              ])], 36)
             ])
           ])
         ]),
         l("div", oe, [
           e.mode === "input" ? (s(), i("input", {
             key: 0,
-            value: d.value,
+            value: c.value,
             class: "ui-slider__value text-s",
             onChange: o[0] || (o[0] = (u) => D(u))
           }, null, 40, se)) : a("", !0)
         ])
       ], 2),
-      g.value ? (s(), i("div", re, c(g.value), 1)) : a("", !0)
+      g.value ? (s(), i("div", re, m(g.value), 1)) : a("", !0)
     ], 2));
   }
 });
 export {
-  pe as default
+  _e as default
 };
 //# sourceMappingURL=Slider.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.vue.js","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(clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max));\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' ? props.step * 1 : e.code === 'ArrowDown' || e.code === 'ArrowLeft' ? props.step * -1 : 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\">{{ realtimeVal }}{{ measure }}</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 v-for=\"(item, index) in breakpointsRef\" :key=\"index\" :style=\"{ right: `${item}%` }\" class=\"ui-slider__thumb-step\"/>\n            </template>\n            <div ref=\"thumbRef\" tabindex=\"0\" class=\"ui-slider__thumb ui-slider__thumb-active\" :style=\"thumbStyle\" @keydown=\"handleKeyPress\">\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 v-if=\"props.mode === 'input'\" :value=\"realtimeVal\" class=\"ui-slider__value text-s\" @change=\"updateModelValue($event)\" />\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"],"names":["slots","useSlots","emit","__emit","props","__props","data","reactive","range","computed","localValue","clamp","realtimeVal","ref","error","v","getErrorMessage","propsRef","breakpointsRef","useSliderBreakpoints","position","progressStyle","thumbStyle","barRef","thumbRef","watch","val","round","value","useMouseCapture","ev","tapIf","_a","unref","rect","dx","setModelValue","updateModelValue","event","handleKeyPress","e","nextStep"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAMA,IAAQC,EAAA,GAERC,IAAOC,GAEPC,IAAQC,GA2BRC,IAAOC,EAAS;AAAA,MACpB,YAAY;AAAA,IAAA,CACb,GAEKC,IAAQC,EAAS,MAAML,EAAM,MAAMA,EAAM,GAAG,GAE5CM,IAAaD,EAAS,MACnBE,GAAOP,EAAM,cAAc,KAAKE,EAAK,YAAYF,EAAM,KAAKA,EAAM,GAAG,CAC7E,GAEKQ,IAAcC,EAAIT,EAAM,UAAU,GAElCU,IAAQL,EAAS,MAAM;AAC3B,YAAMM,IAAIX,EAAM;AAEhB,aAAK,OAAO,SAASW,CAAC,IAIlBA,IAAIX,EAAM,MACL,cAAcA,EAAM,GAAG,KAG5BW,IAAIX,EAAM,MACL,cAAcA,EAAM,GAAG,KAGzBY,EAAgBZ,EAAM,KAAK,IAXzB;AAAA,IAYX,CAAC,GAEKa,IAAWR,EAAS,MAAML,CAAK,GAE/Bc,IAAiBC,EAAqBF,CAAQ,GAE9CG,IAAWX,EAAS,OAChBC,EAAW,QAAQN,EAAM,OAAOI,EAAM,KAC/C,GAEKa,IAAgBZ,EAAS,OAAO;AAAA,MACpC,OAAO,KAAK,MAAM,IAAIW,EAAS,SAAS,GAAG,IAAI;AAAA,IAAA,EAC/C,GAEIE,IAAab,EAAS,OAEnB;AAAA,MACL,OAAO,QAFK,KAAK,MAAM,IAAIW,EAAS,SAAS,GAAG,CAE5B;AAAA,IAAA,EAEvB,GAEKG,IAASV,EAAA,GACTW,IAAWX,EAAA;AAEjB,IAAAY;AAAA,MACE,MAAMrB,EAAM;AAAA,MACZ,CAACsB,MAAQ;AACP,QAAAd,EAAY,QAAQc;AAAA,MACtB;AAAA,IAAA;AAGF,aAASC,EAAMC,GAAe;AAC5B,YAAMb,IAAIJ,EAAMiB,GAAOxB,EAAM,KAAKA,EAAM,GAAG;AAE3C,aAAO,KAAK,OAAOW,IAAI,OAAO,YAAY,IAAIX,EAAM,KAAK,KAAK,IAAIA,EAAM;AAAA,IAC1E;AAEA,IAAAyB,EAAgBL,GAAU,CAACM,MAAO;;AAChC,MAAAC,GAAMC,IAAAC,EAAMV,CAAM,MAAZ,gBAAAS,EAAe,yBAAyB,CAACE,MAAS;AACtD,cAAM,EAAE,IAAAC,MAAOL;AAEf,QAAAxB,EAAK,aAAc6B,IAAKD,EAAK,QAAS1B,EAAM,OAE5CI,EAAY,QAAQe,EAAMhB,GAAOP,EAAM,cAAc,KAAKE,EAAK,YAAYF,EAAM,KAAKA,EAAM,GAAG,CAAC,GAE5F0B,EAAG,SACL5B,EAAK,qBAAqByB,EAAMjB,EAAW,KAAK,CAAC,GACjDJ,EAAK,aAAa;AAAA,MAEtB,CAAC;AAAA,IACH,CAAC;AAED,aAAS8B,EAAcR,GAAe;AACpC,MAAA1B,EAAK,qBAAqByB,EAAMC,CAAK,CAAC;AAAA,IACxC;AAEA,aAASS,EAAiBC,GAAc;AACtC,MAAAF,EAAc,CAAEE,EAAM,OAA4B,KAAK;AAAA,IACzD;AAEA,aAASC,EAAeC,GAA6C;AACnE,MAAI,CAAC,aAAa,WAAW,cAAc,aAAa,OAAO,EAAE,SAASA,EAAE,IAAI,KAC9EA,EAAE,eAAA;AAGJ,YAAMC,IACFD,EAAE,SAAS,aAAaA,EAAE,SAAS,eAAepC,EAAM,OAAO,IAAIoC,EAAE,SAAS,eAAeA,EAAE,SAAS,cAAcpC,EAAM,OAAO,KAAK;AAE5I,MAAAgC,EAAchC,EAAM,aAAaqC,CAAQ;AAAA,IAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Slider.vue.js","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(clamp((props.modelValue ?? 0) + data.deltaValue, props.min, props.max));\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' ? props.step * 1 : e.code === 'ArrowDown' || e.code === 'ArrowLeft' ? props.step * -1 : 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\">{{ realtimeVal }}{{ measure }}</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 v-for=\"(item, index) in breakpointsRef\" :key=\"index\" :style=\"{ right: `${item}%` }\" class=\"ui-slider__thumb-step\"/>\n            </template>\n            <div ref=\"thumbRef\" tabindex=\"0\" class=\"ui-slider__thumb ui-slider__thumb-active\" :style=\"thumbStyle\" @keydown=\"handleKeyPress\">\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 v-if=\"props.mode === 'input'\" :value=\"realtimeVal\" class=\"ui-slider__value text-s\" @change=\"updateModelValue($event)\" />\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"],"names":["slots","useSlots","emit","__emit","props","__props","data","reactive","range","computed","localValue","clamp","realtimeVal","ref","error","v","getErrorMessage","propsRef","breakpointsRef","useSliderBreakpoints","position","progressStyle","thumbStyle","barRef","thumbRef","watch","val","round","value","useMouseCapture","ev","tapIf","_a","unref","rect","dx","setModelValue","updateModelValue","event","handleKeyPress","e","nextStep","_createElementBlock","_createElementVNode","_normalizeClass","_hoisted_1","_hoisted_2","_openBlock","_hoisted_3","_unref","_createBlock","PlTooltip","_renderSlot","_ctx","_hoisted_4","_toDisplayString","_hoisted_5","_hoisted_6","_hoisted_7","_Fragment","_renderList","item","index","_hoisted_8","_cache","$event","_hoisted_10"],"mappings":"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"}

package/dist/components/SliderRange.vue.js

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