@platforma-sdk/ui-vue 1.37.0 → 1.37.1

package/dist/lib/ui/uikit/dist/composition/useScroll.js

@@ -0,0 +1,44 @@
+import { onMounted as g } from "vue";
+import { useEventListener as p } from "./useEventListener.js";
+import { requestTick as y } from "../helpers/utils.js";
+function w(m, o = null, i = null) {
+  function f(t) {
+    const { scrollTop: r, scrollHeight: e, clientHeight: n } = t;
+    if (!(e > n) || !o)
+      return null;
+    const s = e - r - n, l = r > o ? o : 0, c = s > o ? n - o - l : n;
+    return `linear-gradient(
+        to bottom,
+        transparent,
+        black ${l}px,
+        black ${c}px,
+        transparent 100%
+      )`;
+  }
+  function k(t) {
+    const { scrollLeft: r, scrollWidth: e, clientWidth: n } = t;
+    if (!(e > n) || !i)
+      return null;
+    const s = e - r - n, l = r > i ? i : 0, c = s > i ? n - i - l : n;
+    return `linear-gradient(
+        to right,
+        transparent,
+        black ${l}px,
+        black ${c}px,
+        transparent 100%
+      )`;
+  }
+  function a() {
+    const t = m.value;
+    if (!t)
+      return;
+    const r = [f(t), k(t)].filter((e) => e !== null);
+    t.style.setProperty("-webkit-mask-image", r.join(",")), t.style.setProperty("mask-image", r.join(",")), r.length > 1 && (t.style.setProperty("-webkit-mask-composite", "source-in"), t.style.setProperty("mask-composite", "source-in"));
+  }
+  const u = y(a);
+  g(a), p(window, "scroll", u, !0), p(window, "resize", u, !0);
+}
+export {
+  w as useScroll
+};
+//# sourceMappingURL=useScroll.js.map

package/dist/lib/ui/uikit/dist/composition/useScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScroll.js","sources":["../../../../../../../../lib/ui/uikit/src/composition/useScroll.ts"],"sourcesContent":["import { type Ref, onMounted } from 'vue';\nimport { useEventListener } from './useEventListener';\nimport { requestTick } from '../helpers/utils';\n\nexport function useScroll($el: Ref<HTMLElement | undefined>, fadeHeight: number | null = null, fadeWidth: number | null = null) {\n  function getYMask(el: HTMLElement) {\n    const { scrollTop, scrollHeight, clientHeight } = el;\n\n    const hasScroll = scrollHeight > clientHeight;\n\n    if (!hasScroll || !fadeHeight) {\n      return null;\n    }\n\n    const scrollBottom = scrollHeight - scrollTop - clientHeight;\n    const offsetTop = scrollTop > fadeHeight ? fadeHeight : 0;\n    const offsetBottom = scrollBottom > fadeHeight ? clientHeight - fadeHeight - offsetTop : clientHeight;\n\n    return `linear-gradient(\n        to bottom,\n        transparent,\n        black ${offsetTop}px,\n        black ${offsetBottom}px,\n        transparent 100%\n      )`;\n  }\n\n  function getXMask(el: HTMLElement) {\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n\n    const hasScroll = scrollWidth > clientWidth;\n\n    if (!hasScroll || !fadeWidth) {\n      return null;\n    }\n\n    const scrollRight = scrollWidth - scrollLeft - clientWidth;\n    const offsetLeft = scrollLeft > fadeWidth ? fadeWidth : 0;\n    const offsetRight = scrollRight > fadeWidth ? clientWidth - fadeWidth - offsetLeft : clientWidth;\n\n    return `linear-gradient(\n        to right,\n        transparent,\n        black ${offsetLeft}px,\n        black ${offsetRight}px,\n        transparent 100%\n      )`;\n  }\n\n  function update() {\n    const el = $el.value;\n\n    if (!el) {\n      return;\n    }\n\n    const masks = [getYMask(el), getXMask(el)].filter((m) => m !== null);\n    el.style.setProperty('-webkit-mask-image', masks.join(','));\n    el.style.setProperty('mask-image', masks.join(','));\n    if (masks.length > 1) {\n      el.style.setProperty('-webkit-mask-composite', 'source-in');\n      el.style.setProperty('mask-composite', 'source-in');\n    }\n  }\n\n  const handle = requestTick(update);\n\n  onMounted(update);\n  useEventListener(window, 'scroll', handle, true);\n  useEventListener(window, 'resize', handle, true);\n}\n"],"names":["useScroll","$el","fadeHeight","fadeWidth","getYMask","el","scrollTop","scrollHeight","clientHeight","scrollBottom","offsetTop","offsetBottom","getXMask","scrollLeft","scrollWidth","clientWidth","scrollRight","offsetLeft","offsetRight","update","masks","m","handle","requestTick","onMounted","useEventListener"],"mappings":";;;AAIO,SAASA,EAAUC,GAAmCC,IAA4B,MAAMC,IAA2B,MAAM;AAC9H,WAASC,EAASC,GAAiB;AACjC,UAAM,EAAE,WAAAC,GAAW,cAAAC,GAAc,cAAAC,MAAiBH;AAI9C,QAAA,EAFcE,IAAeC,MAEf,CAACN;AACV,aAAA;AAGH,UAAAO,IAAeF,IAAeD,IAAYE,GAC1CE,IAAYJ,IAAYJ,IAAaA,IAAa,GAClDS,IAAeF,IAAeP,IAAaM,IAAeN,IAAaQ,IAAYF;AAElF,WAAA;AAAA;AAAA;AAAA,gBAGKE,CAAS;AAAA,gBACTC,CAAY;AAAA;AAAA;AAAA,EAAA;AAK1B,WAASC,EAASP,GAAiB;AACjC,UAAM,EAAE,YAAAQ,GAAY,aAAAC,GAAa,aAAAC,MAAgBV;AAI7C,QAAA,EAFcS,IAAcC,MAEd,CAACZ;AACV,aAAA;AAGH,UAAAa,IAAcF,IAAcD,IAAaE,GACzCE,IAAaJ,IAAaV,IAAYA,IAAY,GAClDe,IAAcF,IAAcb,IAAYY,IAAcZ,IAAYc,IAAaF;AAE9E,WAAA;AAAA;AAAA;AAAA,gBAGKE,CAAU;AAAA,gBACVC,CAAW;AAAA;AAAA;AAAA,EAAA;AAKzB,WAASC,IAAS;AAChB,UAAMd,IAAKJ,EAAI;AAEf,QAAI,CAACI;AACH;AAGF,UAAMe,IAAQ,CAAChB,EAASC,CAAE,GAAGO,EAASP,CAAE,CAAC,EAAE,OAAO,CAACgB,MAAMA,MAAM,IAAI;AACnEhB,MAAG,MAAM,YAAY,sBAAsBe,EAAM,KAAK,GAAG,CAAC,GAC1Df,EAAG,MAAM,YAAY,cAAce,EAAM,KAAK,GAAG,CAAC,GAC9CA,EAAM,SAAS,MACdf,EAAA,MAAM,YAAY,0BAA0B,WAAW,GACvDA,EAAA,MAAM,YAAY,kBAAkB,WAAW;AAAA,EAAA;AAIhDiB,QAAAA,IAASC,EAAYJ,CAAM;AAEjCK,EAAAA,EAAUL,CAAM,GACCM,EAAA,QAAQ,UAAUH,GAAQ,EAAI,GAC9BG,EAAA,QAAQ,UAAUH,GAAQ,EAAI;AACjD;"}

package/dist/lib/ui/uikit/dist/composition/useSliderBreakpoints.js

@@ -0,0 +1,16 @@
+import { clamp as n } from "../helpers/math.js";
+import { computed as a } from "vue";
+const u = (p) => a(() => {
+  const r = [100], { min: o, max: t, step: s } = p.value;
+  let e = o;
+  for (; e < t; ) {
+    e += s;
+    const m = (1 - (n(e, o, t) - o) / (t - o)) * 100;
+    r.push(m);
+  }
+  return r;
+});
+export {
+  u as useSliderBreakpoints
+};
+//# sourceMappingURL=useSliderBreakpoints.js.map

package/dist/lib/ui/uikit/dist/composition/useSliderBreakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderBreakpoints.js","sources":["../../../../../../../../lib/ui/uikit/src/composition/useSliderBreakpoints.ts"],"sourcesContent":["import { clamp } from '../helpers/math';\nimport type { ComputedRef } from 'vue';\nimport { computed } from 'vue';\nexport const useSliderBreakpoints = (props: ComputedRef<{ min: number; max: number; step: number }>) => {\n  return computed(() => {\n    const result: number[] = [100];\n    const { min, max, step } = props.value;\n    let start = min;\n    while (start < max) {\n      start += step;\n      const posValue = (clamp(start, min, max) - min) / (max - min);\n      const percent = (1 - posValue) * 100;\n      result.push(percent);\n    }\n    return result;\n  });\n};\n"],"names":["useSliderBreakpoints","props","computed","result","min","max","step","start","percent","clamp"],"mappings":";;AAGa,MAAAA,IAAuB,CAACC,MAC5BC,EAAS,MAAM;AACdC,QAAAA,IAAmB,CAAC,GAAG,GACvB,EAAE,KAAAC,GAAK,KAAAC,GAAK,MAAAC,EAAAA,IAASL,EAAM;AACjC,MAAIM,IAAQH;AACZ,SAAOG,IAAQF,KAAK;AACTE,IAAAA,KAAAD;AAEHE,UAAAA,KAAW,KADCC,EAAMF,GAAOH,GAAKC,CAAG,IAAID,MAAQC,IAAMD,MACxB;AACjCD,MAAO,KAAKK,CAAO;AAAA,EAAA;AAEdL,SAAAA;AAAA,CACR;"}

package/dist/lib/ui/uikit/dist/composition/useSortable.js

@@ -0,0 +1,118 @@
+import { computed as Y, watchEffect as _ } from "vue";
+import { useEventListener as C } from "./useEventListener.js";
+const c = {
+  item: "sortable__item",
+  animate: "sortable__animate"
+}, u = (a) => a.getBoundingClientRect().y, E = (a) => {
+  const { y: l, height: t } = a.getBoundingClientRect();
+  return l + Math.ceil(t / 2);
+}, $ = (a) => {
+  const { y: l, height: t } = a.getBoundingClientRect();
+  return l + t;
+};
+function M(a, l) {
+  const t = {
+    item: void 0,
+    options() {
+      var e;
+      return [...((e = a.value) == null ? void 0 : e.children) ?? []];
+    }
+  }, p = Y(() => t.options()), v = l.shakeBuffer ?? 10, x = l.reorderDelay ?? 100;
+  function y(e) {
+    const n = l.handle ? this.querySelector(l.handle) : null;
+    n && (n && !n.contains(e.target) || (this.classList.remove(c.animate), this.classList.add(c.item), t.item = {
+      el: this,
+      y: e.y,
+      dy: 0,
+      orderChanged: !1
+    }));
+  }
+  function w(e) {
+    const n = t.options();
+    return n.slice(0, n.indexOf(e));
+  }
+  function b(e) {
+    const n = t.options();
+    return n.slice(n.indexOf(e) + 1);
+  }
+  function B(e, n) {
+    const o = t.options().filter((r) => r !== n), s = o.indexOf(e);
+    return o.splice(s, 0, n), o;
+  }
+  function O(e, n) {
+    const o = t.options().filter((r) => r !== n), s = o.indexOf(e);
+    return o.splice(s + 1, 0, n), o;
+  }
+  function A(e, n) {
+    e.dy = n - e.y, e.el.style.setProperty("transform", `translateY(${e.dy}px)`);
+  }
+  function g(e) {
+    var n;
+    if (!t.item)
+      return;
+    const { el: o } = t.item;
+    if (!o.isConnected) {
+      t.item = void 0;
+      return;
+    }
+    const s = e.map((i) => u(i)), r = u(o);
+    (n = a.value) == null || n.replaceChildren(...e);
+    const f = u(o), m = e.map((i) => u(i)), d = [];
+    for (let i = 0; i < m.length; i++) {
+      const h = e[i];
+      if (h === t.item.el)
+        continue;
+      const P = m[i], S = s[i] - P;
+      h.style.transform = `translateY(${S}px)`, d.push(h);
+    }
+    const L = f - r;
+    t.item.y = t.item.y + L, t.item.dy = t.item.dy - L, t.item.orderChanged = !0, t.item.el.style.setProperty("transform", `translateY(${t.item.dy}px)`), d.forEach((i) => i.classList.remove(c.animate)), requestAnimationFrame(function() {
+      d.forEach((i) => {
+        i.classList.add(c.animate), i.style.transform = "", i.addEventListener("transitionend", () => {
+          i.classList.remove(c.animate);
+        });
+      });
+    });
+  }
+  C(window, "mousemove", (e) => {
+    if (!t.item)
+      return;
+    const { el: n } = t.item;
+    A(t.item, e.y);
+    const o = u(t.item.el), s = $(t.item.el), r = w(n), f = b(n);
+    r.forEach((m) => {
+      const d = E(m);
+      o + v < d && g(B(m, n));
+    }), f.forEach((m) => {
+      const d = E(m);
+      s - v > d && g(O(m, n));
+    });
+  }), C(window, "mouseup", () => {
+    if (!t.item)
+      return;
+    const { el: e, orderChanged: n } = t.item;
+    e.classList.add(c.animate), e.style.removeProperty("transform"), e.addEventListener("transitionend", () => {
+      e.classList.remove(c.animate, c.item);
+    }), setTimeout(() => {
+      if (!n)
+        return;
+      const o = t.options().map((r) => Number(r.getAttribute("data-index"))), s = a.value;
+      if (s) {
+        for (const r of t.options())
+          s.removeChild(r);
+        p.value.forEach((r) => {
+          s.appendChild(r);
+        });
+      }
+      l.onChange(o);
+    }, x), t.item = void 0;
+  }), _(() => {
+    p.value.forEach((e, n) => {
+      e.removeEventListener("mousedown", y), e.addEventListener("mousedown", y), e.setAttribute("data-index", String(n));
+    });
+  });
+}
+export {
+  M as useSortable
+};
+//# sourceMappingURL=useSortable.js.map

package/dist/lib/ui/uikit/dist/composition/useSortable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSortable.js","sources":["../../../../../../../../lib/ui/uikit/src/composition/useSortable.ts"],"sourcesContent":["import type { Ref } from 'vue';\nimport { computed, watchEffect } from 'vue';\nimport { useEventListener } from './useEventListener';\n\ntype SortableItem = {\n  el: HTMLElement;\n  y: number;\n  dy: number;\n  orderChanged: boolean;\n};\n\nexport type SortableSettings = {\n  onChange: (indices: number[]) => void;\n  handle?: string;\n  shakeBuffer?: number;\n  reorderDelay?: number;\n  transitionDelay?: string;\n};\n\nconst classes = {\n  item: 'sortable__item',\n  animate: 'sortable__animate',\n};\n\nconst getOffset = (el: HTMLElement) => {\n  return el.getBoundingClientRect().y;\n};\n\nconst getMiddle = (el: HTMLElement) => {\n  const { y, height } = el.getBoundingClientRect();\n  return y + Math.ceil(height / 2);\n};\n\nconst getBottom = (el: HTMLElement) => {\n  const { y, height } = el.getBoundingClientRect();\n  return y + height;\n};\n\nexport function useSortable(listRef: Ref<HTMLElement | undefined>, settings: SortableSettings) {\n  const state = {\n    item: undefined as SortableItem | undefined,\n    options() {\n      return [...(listRef.value?.children ?? [])] as HTMLElement[];\n    },\n  };\n\n  const optionsRef = computed(() => {\n    return state.options();\n  });\n\n  const shakeBuffer = settings.shakeBuffer ?? 10;\n\n  const reorderDelay = settings.reorderDelay ?? 100;\n\n  function mouseDown(this: HTMLElement, e: { y: number; target: EventTarget | null }) {\n    const handle = settings.handle ? this.querySelector(settings.handle) : null;\n\n    if (!handle) {\n      return;\n    }\n\n    if (handle && !handle.contains(e.target as HTMLElement)) {\n      return;\n    }\n\n    this.classList.remove(classes.animate);\n    this.classList.add(classes.item);\n\n    state.item = {\n      el: this,\n      y: e.y,\n      dy: 0,\n      orderChanged: false,\n    };\n  }\n\n  function elementsBefore(el: HTMLElement) {\n    const options = state.options();\n    return options.slice(0, options.indexOf(el));\n  }\n\n  function elementsAfter(el: HTMLElement) {\n    const children = state.options();\n    return children.slice(children.indexOf(el) + 1);\n  }\n\n  function insertBefore(before: HTMLElement, el: HTMLElement) {\n    const children = state.options().filter((e) => e !== el);\n    const index = children.indexOf(before);\n    children.splice(index, 0, el);\n    return children;\n  }\n\n  function insertAfter(after: HTMLElement, el: HTMLElement) {\n    const children = state.options().filter((e) => e !== el);\n    const index = children.indexOf(after);\n    children.splice(index + 1, 0, el);\n    return children;\n  }\n\n  function updatePosition(item: SortableItem, y: number) {\n    item.dy = y - item.y;\n    item.el.style.setProperty('transform', `translateY(${item.dy}px)`);\n  }\n\n  function changeOrder(reordered: HTMLElement[]) {\n    if (!state.item) {\n      return;\n    }\n\n    const { el } = state.item;\n\n    if (!el.isConnected) {\n      state.item = undefined;\n      return;\n    }\n\n    const oldPositions = reordered.map((e) => getOffset(e));\n\n    const y1 = getOffset(el);\n    listRef.value?.replaceChildren(...reordered);\n    const y2 = getOffset(el);\n\n    const newPositions = reordered.map((e) => getOffset(e));\n\n    const toAnimate: HTMLElement[] = [];\n\n    for (let i = 0; i < newPositions.length; i++) {\n      const option = reordered[i];\n\n      if (option === state.item.el) {\n        continue;\n      }\n\n      const newY = newPositions[i];\n\n      const oldY = oldPositions[i];\n\n      const invert = oldY - newY;\n\n      option.style.transform = `translateY(${invert}px)`;\n\n      toAnimate.push(option);\n    }\n\n    const dy = y2 - y1;\n\n    state.item.y = state.item.y + dy;\n    state.item.dy = state.item.dy - dy;\n    state.item.orderChanged = true;\n    state.item.el.style.setProperty('transform', `translateY(${state.item.dy}px)`);\n\n    toAnimate.forEach((o) => o.classList.remove(classes.animate));\n\n    requestAnimationFrame(function () {\n      toAnimate.forEach((option) => {\n        option.classList.add(classes.animate);\n        option.style.transform = '';\n        option.addEventListener('transitionend', () => {\n          option.classList.remove(classes.animate);\n        });\n      });\n    });\n  }\n\n  useEventListener(window, 'mousemove', (e: { y: number }) => {\n    if (!state.item) {\n      return;\n    }\n\n    const { el } = state.item;\n\n    updatePosition(state.item, e.y);\n\n    const upper = getOffset(state.item.el);\n    const bottom = getBottom(state.item.el);\n\n    const before = elementsBefore(el);\n    const after = elementsAfter(el);\n\n    before.forEach((e) => {\n      const y = getMiddle(e);\n\n      if (upper + shakeBuffer < y) {\n        changeOrder(insertBefore(e, el));\n      }\n    });\n\n    after.forEach((e) => {\n      const y = getMiddle(e);\n\n      if (bottom - shakeBuffer > y) {\n        changeOrder(insertAfter(e, el));\n      }\n    });\n  });\n\n  useEventListener(window, 'mouseup', () => {\n    if (!state.item) {\n      return;\n    }\n\n    const { el, orderChanged } = state.item;\n\n    el.classList.add(classes.animate);\n    el.style.removeProperty('transform');\n\n    el.addEventListener('transitionend', () => {\n      el.classList.remove(classes.animate, classes.item);\n    });\n\n    setTimeout(() => {\n      if (!orderChanged) {\n        return;\n      }\n\n      const newIndices = state.options().map((o) => Number(o.getAttribute('data-index')));\n\n      const list = listRef.value;\n\n      if (list) {\n        for (const child of state.options()) {\n          list.removeChild(child);\n        }\n\n        optionsRef.value.forEach((child) => {\n          list.appendChild(child);\n        });\n      }\n\n      settings.onChange(newIndices);\n    }, reorderDelay);\n\n    state.item = undefined;\n  });\n\n  watchEffect(() => {\n    optionsRef.value.forEach((child, i) => {\n      child.removeEventListener('mousedown', mouseDown);\n      child.addEventListener('mousedown', mouseDown);\n      child.setAttribute('data-index', String(i));\n    });\n  });\n}\n"],"names":["classes","getOffset","el","getMiddle","y","height","getBottom","useSortable","listRef","settings","state","_a","optionsRef","computed","shakeBuffer","reorderDelay","mouseDown","e","handle","elementsBefore","options","elementsAfter","children","insertBefore","before","index","insertAfter","after","updatePosition","item","changeOrder","reordered","oldPositions","y1","y2","newPositions","toAnimate","i","option","newY","invert","dy","o","useEventListener","upper","bottom","orderChanged","newIndices","list","child","watchEffect"],"mappings":";;AAmBA,MAAMA,IAAU;AAAA,EACd,MAAM;AAAA,EACN,SAAS;AACX,GAEMC,IAAY,CAACC,MACVA,EAAG,wBAAwB,GAG9BC,IAAY,CAACD,MAAoB;AACrC,QAAM,EAAE,GAAAE,GAAG,QAAAC,EAAAA,IAAWH,EAAG,sBAAsB;AAC/C,SAAOE,IAAI,KAAK,KAAKC,IAAS,CAAC;AACjC,GAEMC,IAAY,CAACJ,MAAoB;AACrC,QAAM,EAAE,GAAAE,GAAG,QAAAC,EAAAA,IAAWH,EAAG,sBAAsB;AAC/C,SAAOE,IAAIC;AACb;AAEgB,SAAAE,EAAYC,GAAuCC,GAA4B;AAC7F,QAAMC,IAAQ;AAAA,IACZ,MAAM;AAAA,IACN,UAAU;;AACD,aAAA,CAAC,KAAIC,IAAAH,EAAQ,UAAR,OAAAG,SAAAA,EAAe,aAAY,EAAG;AAAA,IAAA;AAAA,EAIxCC,GAAAA,IAAaC,EAAS,MACnBH,EAAM,QACd,CAAA,GAEKI,IAAcL,EAAS,eAAe,IAEtCM,IAAeN,EAAS,gBAAgB;AAE9C,WAASO,EAA6BC,GAA8C;AAClF,UAAMC,IAAST,EAAS,SAAS,KAAK,cAAcA,EAAS,MAAM,IAAI;AAElES,UAIDA,KAAU,CAACA,EAAO,SAASD,EAAE,MAAqB,MAIjD,KAAA,UAAU,OAAOjB,EAAQ,OAAO,GAChC,KAAA,UAAU,IAAIA,EAAQ,IAAI,GAE/BU,EAAM,OAAO;AAAA,MACX,IAAI;AAAA,MACJ,GAAGO,EAAE;AAAA,MACL,IAAI;AAAA,MACJ,cAAc;AAAA,IAAA;AAAA,EAChB;AAGF,WAASE,EAAejB,GAAiB;AACjCkB,UAAAA,IAAUV,EAAM,QAAQ;AAC9B,WAAOU,EAAQ,MAAM,GAAGA,EAAQ,QAAQlB,CAAE,CAAC;AAAA,EAAA;AAG7C,WAASmB,EAAcnB,GAAiB;AAChCoB,UAAAA,IAAWZ,EAAM,QAAQ;AAC/B,WAAOY,EAAS,MAAMA,EAAS,QAAQpB,CAAE,IAAI,CAAC;AAAA,EAAA;AAGvCqB,WAAAA,EAAaC,GAAqBtB,GAAiB;AACpD,UAAAoB,IAAWZ,EAAM,QAAQ,EAAE,OAAO,CAACO,MAAMA,MAAMf,CAAE,GACjDuB,IAAQH,EAAS,QAAQE,CAAM;AAC5B,WAAAF,EAAA,OAAOG,GAAO,GAAGvB,CAAE,GACrBoB;AAAAA,EAAA;AAGAI,WAAAA,EAAYC,GAAoBzB,GAAiB;AAClD,UAAAoB,IAAWZ,EAAM,QAAQ,EAAE,OAAO,CAACO,MAAMA,MAAMf,CAAE,GACjDuB,IAAQH,EAAS,QAAQK,CAAK;AACpC,WAAAL,EAAS,OAAOG,IAAQ,GAAG,GAAGvB,CAAE,GACzBoB;AAAAA,EAAA;AAGAM,WAAAA,EAAeC,GAAoBzB,GAAW;AAChDyB,IAAAA,EAAA,KAAKzB,IAAIyB,EAAK,GACnBA,EAAK,GAAG,MAAM,YAAY,aAAa,cAAcA,EAAK,EAAE,KAAK;AAAA,EAAA;AAGnE,WAASC,EAAYC,GAA0B;;AACzC,QAAA,CAACrB,EAAM;AACT;AAGI,UAAA,EAAE,IAAAR,EAAAA,IAAOQ,EAAM;AAEjB,QAAA,CAACR,EAAG,aAAa;AACnBQ,MAAAA,EAAM,OAAO;AACb;AAAA,IAAA;AAGIsB,UAAAA,IAAeD,EAAU,IAAI,CAACd,MAAMhB,EAAUgB,CAAC,CAAC,GAEhDgB,IAAKhC,EAAUC,CAAE;AACf,KAAAS,IAAAH,EAAA,UAAA,QAAAG,EAAO,gBAAgB,GAAGoB,CAAAA;AAC5B,UAAAG,IAAKjC,EAAUC,CAAE,GAEjBiC,IAAeJ,EAAU,IAAI,CAACd,MAAMhB,EAAUgB,CAAC,CAAC,GAEhDmB,IAA2B,CAAC;AAElC,aAASC,IAAI,GAAGA,IAAIF,EAAa,QAAQE,KAAK;AACtCC,YAAAA,IAASP,EAAUM,CAAC;AAEtBC,UAAAA,MAAW5B,EAAM,KAAK;AACxB;AAGI,YAAA6B,IAAOJ,EAAaE,CAAC,GAIrBG,IAFOR,EAAaK,CAAC,IAELE;AAEfD,QAAA,MAAM,YAAY,cAAcE,CAAM,OAE7CJ,EAAU,KAAKE,CAAM;AAAA,IAAA;AAGvB,UAAMG,IAAKP,IAAKD;AAEhBvB,IAAAA,EAAM,KAAK,IAAIA,EAAM,KAAK,IAAI+B,GAC9B/B,EAAM,KAAK,KAAKA,EAAM,KAAK,KAAK+B,GAChC/B,EAAM,KAAK,eAAe,IACpBA,EAAA,KAAK,GAAG,MAAM,YAAY,aAAa,cAAcA,EAAM,KAAK,EAAE,KAAK,GAEnE0B,EAAA,QAAQ,CAACM,MAAMA,EAAE,UAAU,OAAO1C,EAAQ,OAAO,CAAC,GAE5D,sBAAsB,WAAY;AACtBoC,MAAAA,EAAA,QAAQ,CAACE,MAAW;AACrBA,QAAAA,EAAA,UAAU,IAAItC,EAAQ,OAAO,GACpCsC,EAAO,MAAM,YAAY,IAClBA,EAAA,iBAAiB,iBAAiB,MAAM;AACtCA,UAAAA,EAAA,UAAU,OAAOtC,EAAQ,OAAO;AAAA,QAAA,CACxC;AAAA,MAAA,CACF;AAAA,IAAA,CACF;AAAA,EAAA;AAGc2C,EAAAA,EAAA,QAAQ,aAAa,CAAC1B,MAAqB;AACtD,QAAA,CAACP,EAAM;AACT;AAGI,UAAA,EAAE,IAAAR,EAAAA,IAAOQ,EAAM;AAENkB,IAAAA,EAAAlB,EAAM,MAAMO,EAAE,CAAC;AAE9B,UAAM2B,IAAQ3C,EAAUS,EAAM,KAAK,EAAE,GAC/BmC,IAASvC,EAAUI,EAAM,KAAK,EAAE,GAEhCc,IAASL,EAAejB,CAAE,GAC1ByB,IAAQN,EAAcnB,CAAE;AAEvBsB,IAAAA,EAAA,QAAQ,CAACP,MAAM;AACdb,YAAAA,IAAID,EAAUc,CAAC;AAEjB2B,MAAAA,IAAQ9B,IAAcV,KACZ0B,EAAAP,EAAaN,GAAGf,CAAE,CAAC;AAAA,IAElC,CAAA,GAEKyB,EAAA,QAAQ,CAACV,MAAM;AACbb,YAAAA,IAAID,EAAUc,CAAC;AAEjB4B,MAAAA,IAAS/B,IAAcV,KACb0B,EAAAJ,EAAYT,GAAGf,CAAE,CAAC;AAAA,IAAA,CAEjC;AAAA,EACF,CAAA,GAEgByC,EAAA,QAAQ,WAAW,MAAM;AACpC,QAAA,CAACjC,EAAM;AACT;AAGF,UAAM,EAAE,IAAAR,GAAI,cAAA4C,EAAAA,IAAiBpC,EAAM;AAEhCR,IAAAA,EAAA,UAAU,IAAIF,EAAQ,OAAO,GAC7BE,EAAA,MAAM,eAAe,WAAW,GAEhCA,EAAA,iBAAiB,iBAAiB,MAAM;AACzCA,MAAAA,EAAG,UAAU,OAAOF,EAAQ,SAASA,EAAQ,IAAI;AAAA,IAAA,CAClD,GAED,WAAW,MAAM;AACf,UAAI,CAAC8C;AACH;AAGF,YAAMC,IAAarC,EAAM,QAAQ,EAAE,IAAI,CAACgC,MAAM,OAAOA,EAAE,aAAa,YAAY,CAAC,CAAC,GAE5EM,IAAOxC,EAAQ;AAErB,UAAIwC,GAAM;AACG,mBAAAC,KAASvC,EAAM,QAAA;AACxBsC,UAAAA,EAAK,YAAYC,CAAK;AAGbrC,UAAA,MAAM,QAAQ,CAACqC,MAAU;AAClCD,UAAAA,EAAK,YAAYC,CAAK;AAAA,QAAA,CACvB;AAAA,MAAA;AAGHxC,MAAAA,EAAS,SAASsC,CAAU;AAAA,IAC3BhC,GAAAA,CAAY,GAEfL,EAAM,OAAO;AAAA,EAAA,CACd,GAEDwC,EAAY,MAAM;AAChBtC,MAAW,MAAM,QAAQ,CAACqC,GAAOZ,MAAM;AAC/BY,MAAAA,EAAA,oBAAoB,aAAajC,CAAS,GAC1CiC,EAAA,iBAAiB,aAAajC,CAAS,GAC7CiC,EAAM,aAAa,cAAc,OAAOZ,CAAC,CAAC;AAAA,IAAA,CAC3C;AAAA,EAAA,CACF;AACH;"}

package/dist/lib/ui/uikit/dist/composition/useSortable2.js

@@ -0,0 +1,136 @@
+import { watch as $, computed as A, watchEffect as _ } from "vue";
+import { useEventListener as L } from "./useEventListener.js";
+const u = {
+  item: "sortable__item",
+  animate: "sortable__animate"
+}, v = (o) => o.getBoundingClientRect().y, x = (o) => {
+  const { y: d, height: n } = o.getBoundingClientRect();
+  return d + Math.ceil(n / 2);
+}, P = (o) => {
+  const { y: d, height: n } = o.getBoundingClientRect();
+  return d + n;
+};
+function k(o, d) {
+  const n = {
+    item: void 0,
+    options() {
+      var e;
+      return [...((e = o.value) == null ? void 0 : e.children) ?? []];
+    }
+  };
+  let h = 0;
+  $(() => o.value, () => {
+    setTimeout(() => {
+      o.value && (o.value.scrollTop = h);
+    }, 0);
+  });
+  const y = A(() => n.options()), g = d.shakeBuffer ?? 10, T = d.reorderDelay ?? 100;
+  function C(e) {
+    var t;
+    const i = d.handle ? this.querySelector(d.handle) : null;
+    i && (i && !i.contains(e.target) || (this.classList.remove(u.animate), this.classList.add(u.item), n.item = {
+      el: this,
+      y: e.y,
+      dy: 0,
+      initialScrollTop: ((t = o.value) == null ? void 0 : t.scrollTop) || 0,
+      orderChanged: !1
+    }));
+  }
+  function w(e) {
+    const t = n.options();
+    return t.slice(0, t.indexOf(e));
+  }
+  function b(e) {
+    const t = n.options();
+    return t.slice(t.indexOf(e) + 1);
+  }
+  function B(e, t) {
+    const i = n.options().filter((a) => a !== t), r = i.indexOf(e);
+    return i.splice(r, 0, t), i;
+  }
+  function Y(e, t) {
+    const i = n.options().filter((a) => a !== t), r = i.indexOf(e);
+    return i.splice(r + 1, 0, t), i;
+  }
+  function R(e, t) {
+    var i;
+    const r = (((i = o.value) == null ? void 0 : i.scrollTop) || 0) - (e.initialScrollTop || 0);
+    e.dy = t - e.y + r, e.el.style.setProperty("transform", `translateY(${e.dy}px)`);
+  }
+  function E(e) {
+    var t;
+    if (!n.item)
+      return;
+    const { el: i } = n.item;
+    if (!i.isConnected) {
+      n.item = void 0;
+      return;
+    }
+    const r = e.map((s) => v(s)), a = v(i);
+    (t = o.value) == null || t.replaceChildren(...e);
+    const m = v(i), l = e.map((s) => v(s)), c = [];
+    for (let s = 0; s < l.length; s++) {
+      const p = e[s];
+      if (p === n.item.el)
+        continue;
+      const S = l[s], O = r[s] - S;
+      p.style.transform = `translateY(${O}px)`, c.push(p);
+    }
+    const f = m - a;
+    n.item.y = n.item.y + f, n.item.dy = n.item.dy - f, n.item.orderChanged = !0, n.item.el.style.setProperty("transform", `translateY(${n.item.dy}px)`), c.forEach((s) => s.classList.remove(u.animate)), requestAnimationFrame(function() {
+      c.forEach((s) => {
+        s.classList.add(u.animate), s.style.transform = "", s.addEventListener("transitionend", () => {
+          s.classList.remove(u.animate);
+        });
+      });
+    });
+  }
+  L(window, "mousemove", (e) => {
+    if (!n.item)
+      return;
+    const { el: t } = n.item;
+    R(n.item, e.y);
+    const i = v(n.item.el), r = P(n.item.el), a = w(t), m = b(t);
+    if (a.forEach((l) => {
+      const c = x(l);
+      i + g < c && E(B(l, t));
+    }), m.forEach((l) => {
+      const c = x(l);
+      r - g > c && E(Y(l, t));
+    }), o.value) {
+      const l = o.value.getBoundingClientRect(), c = l.top + t.getBoundingClientRect().height / 2;
+      e.clientY < c && (o.value.scrollTop += e.clientY - c);
+      const f = l.bottom - t.getBoundingClientRect().height / 2;
+      e.clientY > f && (o.value.scrollTop += e.clientY - f);
+    }
+  }), L(window, "mouseup", () => {
+    var e;
+    if (!n.item)
+      return;
+    h = ((e = o.value) == null ? void 0 : e.scrollTop) || 0;
+    const { el: t, orderChanged: i } = n.item;
+    t.classList.add(u.animate), t.style.removeProperty("transform"), t.addEventListener("transitionend", () => {
+      t.classList.remove(u.animate, u.item);
+    }), setTimeout(() => {
+      if (!i)
+        return;
+      const r = n.options().map((m) => Number(m.getAttribute("data-index"))), a = o.value;
+      if (a) {
+        for (const m of n.options())
+          a.removeChild(m);
+        y.value.forEach((m) => {
+          a.appendChild(m);
+        });
+      }
+      d.onChange(r);
+    }, T), n.item = void 0;
+  }), _(() => {
+    y.value.forEach((e, t) => {
+      e.removeEventListener("mousedown", C), e.addEventListener("mousedown", C), e.setAttribute("data-index", String(t));
+    });
+  });
+}
+export {
+  k as useSortable2
+};
+//# sourceMappingURL=useSortable2.js.map

package/dist/lib/ui/uikit/dist/composition/useSortable2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSortable2.js","sources":["../../../../../../../../lib/ui/uikit/src/composition/useSortable2.ts"],"sourcesContent":["import type { Ref } from 'vue';\nimport { computed, watch, watchEffect } from 'vue';\nimport { useEventListener } from './useEventListener';\n\ntype SortableItem = {\n  el: HTMLElement;\n  y: number;\n  dy: number;\n  orderChanged: boolean;\n  initialScrollTop: number;\n};\n\nexport type SortableSettings = {\n  onChange: (indices: number[]) => void;\n  handle?: string;\n  shakeBuffer?: number;\n  reorderDelay?: number;\n  transitionDelay?: string;\n};\n\nconst classes = {\n  item: 'sortable__item',\n  animate: 'sortable__animate',\n};\n\nconst getOffset = (el: HTMLElement) => {\n  return el.getBoundingClientRect().y;\n};\n\nconst getMiddle = (el: HTMLElement) => {\n  const { y, height } = el.getBoundingClientRect();\n  return y + Math.ceil(height / 2);\n};\n\nconst getBottom = (el: HTMLElement) => {\n  const { y, height } = el.getBoundingClientRect();\n  return y + height;\n};\n\n/**\n * Description: Scroll support has been added to the container where sorting takes place.\n * Some functionality duplicates the behavior of useScrollable.\n *\n * Purpose: To enable automatic scrolling when dragging items beyond the visible area of the container.\n * Future Plan:\n * - Verify the behavior of the new scrolling functionality within blocks and text elements.\n * - Merge the current implementation with useScrollable to eliminate code duplication and create a unified scrolling solution.\n */\nexport function useSortable2(listRef: Ref<HTMLElement | undefined>, settings: SortableSettings) {\n  const state = {\n    item: undefined as SortableItem | undefined,\n    options() {\n      return [...(listRef.value?.children ?? [])] as HTMLElement[];\n    },\n  };\n  let oldScrollTop = 0;\n\n  watch(() => listRef.value, () => {\n    setTimeout(() => {\n      if (listRef.value) {\n        listRef.value.scrollTop = oldScrollTop;\n      }\n    }, 0);\n  });\n\n  const optionsRef = computed(() => {\n    return state.options();\n  });\n\n  const shakeBuffer = settings.shakeBuffer ?? 10;\n\n  const reorderDelay = settings.reorderDelay ?? 100;\n\n  function mouseDown(this: HTMLElement, e: { y: number; target: EventTarget | null }) {\n    const handle = settings.handle ? this.querySelector(settings.handle) : null;\n\n    if (!handle) {\n      return;\n    }\n\n    if (handle && !handle.contains(e.target as HTMLElement)) {\n      return;\n    }\n\n    this.classList.remove(classes.animate);\n    this.classList.add(classes.item);\n\n    state.item = {\n      el: this,\n      y: e.y,\n      dy: 0,\n      initialScrollTop: listRef.value?.scrollTop || 0,\n      orderChanged: false,\n    };\n  }\n\n  function elementsBefore(el: HTMLElement) {\n    const options = state.options();\n    return options.slice(0, options.indexOf(el));\n  }\n\n  function elementsAfter(el: HTMLElement) {\n    const children = state.options();\n    return children.slice(children.indexOf(el) + 1);\n  }\n\n  function insertBefore(before: HTMLElement, el: HTMLElement) {\n    const children = state.options().filter((e) => e !== el);\n    const index = children.indexOf(before);\n    children.splice(index, 0, el);\n    return children;\n  }\n\n  function insertAfter(after: HTMLElement, el: HTMLElement) {\n    const children = state.options().filter((e) => e !== el);\n    const index = children.indexOf(after);\n    children.splice(index + 1, 0, el);\n    return children;\n  }\n\n  function updatePosition(item: SortableItem, y: number) {\n    const currentScrollTop = listRef.value?.scrollTop || 0;\n    const scrollDiff = currentScrollTop - (item.initialScrollTop || 0);\n    item.dy = y - item.y + scrollDiff;\n    item.el.style.setProperty('transform', `translateY(${item.dy}px)`);\n  }\n\n  function changeOrder(reordered: HTMLElement[]) {\n    if (!state.item) {\n      return;\n    }\n\n    const { el } = state.item;\n\n    if (!el.isConnected) {\n      state.item = undefined;\n      return;\n    }\n\n    const oldPositions = reordered.map((e) => getOffset(e));\n\n    const y1 = getOffset(el);\n    listRef.value?.replaceChildren(...reordered);\n    const y2 = getOffset(el);\n\n    const newPositions = reordered.map((e) => getOffset(e));\n\n    const toAnimate: HTMLElement[] = [];\n\n    for (let i = 0; i < newPositions.length; i++) {\n      const option = reordered[i];\n\n      if (option === state.item.el) {\n        continue;\n      }\n\n      const newY = newPositions[i];\n\n      const oldY = oldPositions[i];\n\n      const invert = oldY - newY;\n\n      option.style.transform = `translateY(${invert}px)`;\n\n      toAnimate.push(option);\n    }\n\n    const dy = y2 - y1;\n\n    state.item.y = state.item.y + dy;\n    state.item.dy = state.item.dy - dy;\n    state.item.orderChanged = true;\n    state.item.el.style.setProperty('transform', `translateY(${state.item.dy}px)`);\n\n    toAnimate.forEach((o) => o.classList.remove(classes.animate));\n\n    requestAnimationFrame(function () {\n      toAnimate.forEach((option) => {\n        option.classList.add(classes.animate);\n        option.style.transform = '';\n        option.addEventListener('transitionend', () => {\n          option.classList.remove(classes.animate);\n        });\n      });\n    });\n  }\n\n  useEventListener(window, 'mousemove', (e: { y: number }) => {\n    if (!state.item) {\n      return;\n    }\n\n    const { el } = state.item;\n\n    updatePosition(state.item, e.y);\n\n    const upper = getOffset(state.item.el);\n    const bottom = getBottom(state.item.el);\n\n    const before = elementsBefore(el);\n    const after = elementsAfter(el);\n\n    before.forEach((e) => {\n      const y = getMiddle(e);\n\n      if (upper + shakeBuffer < y) {\n        changeOrder(insertBefore(e, el));\n      }\n    });\n\n    after.forEach((e) => {\n      const y = getMiddle(e);\n\n      if (bottom - shakeBuffer > y) {\n        changeOrder(insertAfter(e, el));\n      }\n    });\n\n    if (listRef.value) {\n      const rect = listRef.value.getBoundingClientRect();\n\n      const deltaUp = rect.top + el.getBoundingClientRect().height / 2;\n      if ((e as MouseEvent).clientY < deltaUp) {\n        listRef.value.scrollTop += (e as MouseEvent).clientY - deltaUp;\n      }\n\n      const deltaDown = rect.bottom - el.getBoundingClientRect().height / 2;\n      if ((e as MouseEvent).clientY > deltaDown) {\n        listRef.value.scrollTop += (e as MouseEvent).clientY - deltaDown;\n      }\n    }\n  });\n\n  useEventListener(window, 'mouseup', () => {\n    if (!state.item) {\n      return;\n    }\n\n    oldScrollTop = listRef.value?.scrollTop || 0;\n\n    const { el, orderChanged } = state.item;\n\n    el.classList.add(classes.animate);\n    el.style.removeProperty('transform');\n\n    el.addEventListener('transitionend', () => {\n      el.classList.remove(classes.animate, classes.item);\n    });\n\n    setTimeout(() => {\n      if (!orderChanged) {\n        return;\n      }\n\n      const newIndices = state.options().map((o) => Number(o.getAttribute('data-index')));\n\n      const list = listRef.value;\n\n      if (list) {\n        for (const child of state.options()) {\n          list.removeChild(child);\n        }\n\n        optionsRef.value.forEach((child) => {\n          list.appendChild(child);\n        });\n      }\n\n      settings.onChange(newIndices);\n    }, reorderDelay);\n\n    state.item = undefined;\n  });\n\n  watchEffect(() => {\n    optionsRef.value.forEach((child, i) => {\n      child.removeEventListener('mousedown', mouseDown);\n      child.addEventListener('mousedown', mouseDown);\n      child.setAttribute('data-index', String(i));\n    });\n  });\n}\n"],"names":["classes","getOffset","el","getMiddle","y","height","getBottom","useSortable2","listRef","settings","state","_a","oldScrollTop","watch","optionsRef","computed","shakeBuffer","reorderDelay","mouseDown","e","handle","elementsBefore","options","elementsAfter","children","insertBefore","before","index","insertAfter","after","updatePosition","item","scrollDiff","changeOrder","reordered","oldPositions","y1","y2","newPositions","toAnimate","i","option","newY","invert","dy","o","useEventListener","upper","bottom","rect","deltaUp","deltaDown","orderChanged","newIndices","list","child","watchEffect"],"mappings":"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"}

package/dist/lib/ui/uikit/dist/composition/useTheme.js

@@ -0,0 +1,27 @@
+import { ref as i, computed as c, watch as m, unref as u, onMounted as s, onUnmounted as h } from "vue";
+import { toList as f, mapIterable as w } from "../helpers/iterators.js";
+import { useLocalStorage as v } from "./useLocalStorage.js";
+const r = /* @__PURE__ */ new Set();
+window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+  f(w(r.values(), (a) => a(e.matches ? "dark" : "light")));
+});
+const p = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", d = i(p), o = v("theme");
+function L(e) {
+  const a = c(() => o.value ? o.value : d.value), n = (t) => {
+    d.value = t, e == null || e(t);
+  };
+  function l() {
+    o.value = a.value === "light" ? "dark" : (a.value, "light");
+  }
+  return m(a, (t) => {
+    e == null || e(u(t));
+  }), s(() => {
+    r.add(n);
+  }), h(() => {
+    r.delete(n);
+  }), [a, l];
+}
+export {
+  L as useTheme
+};
+//# sourceMappingURL=useTheme.js.map

package/dist/lib/ui/uikit/dist/composition/useTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.js","sources":["../../../../../../../../lib/ui/uikit/src/composition/useTheme.ts"],"sourcesContent":["import { computed, onMounted, onUnmounted, ref, unref, watch } from 'vue';\nimport { mapIterable, toList } from '../helpers/iterators';\nimport { useLocalStorage } from './useLocalStorage';\n\ntype Theme = 'light' | 'dark';\n\ntype Callback = (mode: Theme) => void;\n\nconst cm = new Set<Callback>();\n\nif (window.matchMedia) {\n  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {\n    toList(mapIterable(cm.values(), (cb) => cb(e.matches ? 'dark' : 'light')));\n  });\n}\n\nconst init = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n\nconst browserTheme = ref<Theme>(init);\nconst savedTheme = useLocalStorage<Theme>('theme');\n\nexport function useTheme(_cb?: Callback) {\n  const theme = computed<Theme>(() => {\n    return savedTheme.value ? savedTheme.value : browserTheme.value;\n  });\n\n  const cb = (theme: Theme) => {\n    browserTheme.value = theme;\n    _cb?.(theme);\n  };\n\n  function toggleTheme() {\n    savedTheme.value = theme.value === 'light' ? 'dark' : theme.value === 'dark' ? 'light' : 'light';\n  }\n\n  watch(theme, (v) => {\n    _cb?.(unref(v));\n  });\n\n  onMounted(() => {\n    cm.add(cb);\n  });\n\n  onUnmounted(() => {\n    cm.delete(cb);\n  });\n\n  return [theme, toggleTheme] as const;\n}\n"],"names":["cm","e","toList","mapIterable","cb","init","browserTheme","ref","savedTheme","useLocalStorage","useTheme","_cb","theme","computed","toggleTheme","watch","v","unref","onMounted","onUnmounted"],"mappings":";;;AAQA,MAAMA,wBAAS,IAAc;AAEzB,OAAO,cACT,OAAO,WAAW,8BAA8B,EAAE,iBAAiB,UAAU,CAACC,MAAM;AAClFC,EAAAA,EAAOC,EAAYH,EAAG,OAAU,GAAA,CAACI,MAAOA,EAAGH,EAAE,UAAU,SAAS,OAAO,CAAC,CAAC;AAAA,CAC1E;AAGH,MAAMI,IAAO,OAAO,cAAc,OAAO,WAAW,8BAA8B,EAAE,UAAU,SAAS,SAEjGC,IAAeC,EAAWF,CAAI,GAC9BG,IAAaC,EAAuB,OAAO;AAE1C,SAASC,EAASC,GAAgB;AACjC,QAAAC,IAAQC,EAAgB,MACrBL,EAAW,QAAQA,EAAW,QAAQF,EAAa,KAC3D,GAEKF,IAAK,CAACQ,MAAiB;AAC3BN,MAAa,QAAQM,GACrBD,KAAA,QAAAA,EAAMC,CAAAA;AAAAA,EACR;AAEA,WAASE,IAAc;AACVN,MAAA,QAAQI,EAAM,UAAU,UAAU,UAASA,EAAM,OAAmB;AAAA,EAAA;AAG3EG,SAAAA,EAAAH,GAAO,CAACI,MAAM;AACZL,SAAA,QAAAA,EAAAM,EAAMD,CAAC,CAAA;AAAA,EAAA,CACd,GAEDE,EAAU,MAAM;AACdlB,MAAG,IAAII,CAAE;AAAA,EAAA,CACV,GAEDe,EAAY,MAAM;AAChBnB,MAAG,OAAOI,CAAE;AAAA,EAAA,CACb,GAEM,CAACQ,GAAOE,CAAW;AAC5B;"}

package/dist/lib/ui/uikit/dist/composition/useTransformedModel.js

@@ -0,0 +1,28 @@
+import { ref as l, computed as i, reactive as d } from "vue";
+function m(u, n) {
+  const r = l(), t = l(), { parse: v, update: o } = n, s = () => {
+    r.value = void 0, t.value = void 0;
+  }, c = i({
+    get() {
+      return r.value !== void 0 ? r.value : u.value;
+    },
+    set(a) {
+      s();
+      try {
+        const e = v ? v(a) : a;
+        !o || o(e) ? u.value = e : r.value = e;
+      } catch (e) {
+        r.value = a, t.value = e instanceof Error ? e.message : String(e);
+      }
+    }
+  });
+  return d({
+    value: c,
+    error: t,
+    reset: s
+  });
+}
+export {
+  m as useTransformedModel
+};
+//# sourceMappingURL=useTransformedModel.js.map

package/dist/lib/ui/uikit/dist/composition/useTransformedModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransformedModel.js","sources":["../../../../../../../../lib/ui/uikit/src/composition/useTransformedModel.ts"],"sourcesContent":["import type { Ref, UnwrapNestedRefs } from 'vue';\nimport { reactive, computed, ref } from 'vue';\n\n/**\n * Creates a reactive local model with optional transformation and validation logic.\n *\n * @template T The type of the model's value.\n *\n * @param model - A `Ref` representing the underlying value.\n * @param options - Optional configuration for validation and parsing.\n * @param options.update - A function that takes the transformed value and returns `true` if it should be applied to the model, or `false` to keep it in a cached state.\n * @param options.parse - A function that takes the input value and returns a transformed value of type `T`. If omitted, the value is used as-is.\n *\n * @returns A reactive object with the following properties:\n * - `value`: A computed property for getting and setting the model value.\n * - `error`: A `Ref<string | undefined>` containing the last error message, if any.\n * - `reset`: A method to clear the cached value and error state.\n *\n * ### Example\n * ```ts\n * import { ref } from 'vue';\n * import { useTransformedModel } from './useTransformedModel';\n *\n * const model = ref<number>(42);\n *\n * const transformedModel = useTransformedModel(model, {\n *   parse: (value) => {\n *     const parsed = Number(value);\n *     if (!Number.isFinite(parsed)) throw new Error('Invalid number');\n *     return parsed;\n *   },\n *   update: (value) => value >= 0, // Only allow non-negative numbers\n * });\n */\n\nexport function useTransformedModel<T>(model: Ref<T>, options: { update?: (v: T) => boolean; parse?: (v: unknown) => T }) {\n  const cached = ref<T | undefined>();\n  const error = ref<string>();\n\n  const { parse, update } = options;\n\n  const reset = () => {\n    cached.value = undefined;\n    error.value = undefined;\n  };\n\n  const value = computed<T>({\n    get() {\n      if (cached.value !== undefined) {\n        return cached.value;\n      }\n\n      return model.value;\n    },\n    set(value) {\n      reset();\n\n      try {\n        const newValue = parse ? parse(value) : value;\n\n        const shouldUpdate = update ? update(newValue) : true;\n\n        if (shouldUpdate) {\n          model.value = newValue;\n        } else {\n          cached.value = newValue;\n        }\n      } catch (err) {\n        cached.value = value;\n        error.value = err instanceof Error ? err.message : String(err);\n      }\n    },\n  });\n\n  return reactive({\n    value,\n    error,\n    reset,\n  }) as UnwrapNestedRefs<{ value: T; error?: string; reset: () => void }>;\n}\n"],"names":["useTransformedModel","model","options","cached","ref","error","parse","update","reset","value","computed","newValue","err","reactive"],"mappings":";AAmCgB,SAAAA,EAAuBC,GAAeC,GAAoE;AACxH,QAAMC,IAASC,EAAAA,GACTC,IAAQD,KAER,EAAE,OAAAE,GAAO,QAAAC,EAAWL,IAAAA,GAEpBM,IAAQ,MAAM;AAClBL,MAAO,QAAQ,QACfE,EAAM,QAAQ;AAAA,EAAA,GAGVI,IAAQC,EAAY;AAAA,IACxB,MAAM;AACA,aAAAP,EAAO,UAAU,SACZA,EAAO,QAGTF,EAAM;AAAA,IACf;AAAA,IACA,IAAIQ,GAAO;AACHD,MAAAA,EAAA;AAEF,UAAA;AACF,cAAMG,IAAWL,IAAQA,EAAMG,CAAK,IAAIA;AAEnBF,QAAAA,CAAAA,KAASA,EAAOI,CAAQ,IAG3CV,EAAM,QAAQU,IAEdR,EAAO,QAAQQ;AAAAA,MAAA,SAEVC,GAAK;AACZT,UAAO,QAAQM,GACfJ,EAAM,QAAQO,aAAe,QAAQA,EAAI,UAAU,OAAOA,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAC/D,CAEH;AAED,SAAOC,EAAS;AAAA,IACd,OAAAJ;AAAAA,IACA,OAAAJ;AAAAA,IACA,OAAAG;AAAAA,EAAA,CACD;AACH;"}

package/dist/lib/ui/uikit/dist/composition/useWatchFetch.js

@@ -0,0 +1,27 @@
+import { ref as c, reactive as l, computed as n, watch as d } from "vue";
+import { exclusiveRequest as s } from "../lib/util/helpers/dist/index.js";
+function h(o, t, u) {
+  const r = c(0), e = l({
+    loading: n(() => r.value > 0),
+    loadingRef: r,
+    value: void 0,
+    error: void 0
+  }), i = s(t);
+  return d(
+    o,
+    async (v) => {
+      e.error = void 0, r.value++, i(v).then((a) => {
+        a.ok && (e.value = a.value);
+      }).catch((a) => {
+        e.value = void 0, e.error = a;
+      }).finally(() => {
+        r.value--;
+      });
+    },
+    Object.assign({ immediate: !0, deep: !0 }, u ?? {})
+  ), e;
+}
+export {
+  h as useWatchFetch
+};
+//# sourceMappingURL=useWatchFetch.js.map

package/dist/lib/ui/uikit/dist/composition/useWatchFetch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWatchFetch.js","sources":["../../../../../../../../lib/ui/uikit/src/composition/useWatchFetch.ts"],"sourcesContent":["import type { WatchSource, WatchOptions } from 'vue';\nimport { reactive, watch, ref, computed } from 'vue';\nimport { exclusiveRequest } from '@milaboratories/helpers';\n\nexport type FetchResult<V, E = unknown> = {\n  loading: boolean;\n  value: V | undefined;\n  error: E;\n};\n\n// TODO Should we keep the old value while fetching the new value?\n\n/**\n * Watch any reactive source and perform an asynchronous operation\n *\n * @example\n * ```ts\n * const v = useWatchFetch(\n *   watchSource,\n *   async (sourceValue) => {\n *     return await fetchDataFromApi(sourceValue);\n *   }\n * );\n *\n * // Usage in a template\n * <template>\n *   <div v-if=\"v.loading\">Loading...</div>\n *   <div v-else-if=\"v.error\">Error: {{ v.error.message }}</div>\n *   <div v-else>Data: {{ v.value }}</div>\n * </template>\n * ```\n */\nexport function useWatchFetch<S, V>(watchSource: WatchSource<S>, doFetch: (s: S) => Promise<V>, watchOptions?: WatchOptions): FetchResult<V> {\n  const loadingRef = ref(0);\n\n  const data = reactive({\n    loading: computed(() => loadingRef.value > 0),\n    loadingRef,\n    value: undefined as V,\n    error: undefined,\n  }) as FetchResult<V>;\n\n  const exclusive = exclusiveRequest(doFetch);\n\n  watch(\n    watchSource,\n    async (s) => {\n      data.error = undefined;\n      loadingRef.value++;\n      exclusive(s)\n        .then((res) => {\n          if (res.ok) {\n            data.value = res.value;\n          }\n        })\n        .catch((err) => {\n          data.value = undefined;\n          data.error = err;\n        })\n        .finally(() => {\n          loadingRef.value--;\n        });\n    },\n    Object.assign({ immediate: true, deep: true }, watchOptions ?? {}),\n  );\n\n  return data;\n}\n"],"names":["useWatchFetch","watchSource","doFetch","watchOptions","loadingRef","ref","data","reactive","computed","exclusive","exclusiveRequest","watch","s","res","err"],"mappings":";;AAgCgB,SAAAA,EAAoBC,GAA6BC,GAA+BC,GAA6C;AACrI,QAAAC,IAAaC,EAAI,CAAC,GAElBC,IAAOC,EAAS;AAAA,IACpB,SAASC,EAAS,MAAMJ,EAAW,QAAQ,CAAC;AAAA,IAC5C,YAAAA;AAAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,EAAA,CACR,GAEKK,IAAYC,EAAiBR,CAAO;AAE1CS,SAAAA;AAAAA,IACEV;AAAAA,IACA,OAAOW,MAAM;AACXN,QAAK,QAAQ,QACFF,EAAA,SACXK,EAAUG,CAAC,EACR,KAAK,CAACC,MAAQ;AACTA,QAAAA,EAAI,OACNP,EAAK,QAAQO,EAAI;AAAA,MAAA,CAEpB,EACA,MAAM,CAACC,MAAQ;AACdR,UAAK,QAAQ,QACbA,EAAK,QAAQQ;AAAAA,MAAA,CACd,EACA,QAAQ,MAAM;AACFV,QAAAA,EAAA;AAAA,MAAA,CACZ;AAAA,IACL;AAAA,IACA,OAAO,OAAO,EAAE,WAAW,IAAM,MAAM,GAAK,GAAGD,KAAgB,CAAE,CAAA;AAAA,EAAA,GAG5DG;AACT;"}

package/dist/lib/ui/uikit/dist/composition/utils.js

@@ -0,0 +1,8 @@
+import { onMounted as n, onUpdated as e } from "vue";
+function d(o) {
+  n(o), e(o);
+}
+export {
+  d as onChanged
+};
+//# sourceMappingURL=utils.js.map

package/dist/lib/ui/uikit/dist/composition/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../../../lib/ui/uikit/src/composition/utils.ts"],"sourcesContent":["import { onMounted, onUpdated } from 'vue';\n\nexport function onChanged(hook: () => unknown) {\n  onMounted(hook);\n  onUpdated(hook);\n}\n"],"names":["onChanged","hook","onMounted","onUpdated"],"mappings":";AAEO,SAASA,EAAUC,GAAqB;AAC7CC,EAAAA,EAAUD,CAAI,GACdE,EAAUF,CAAI;AAChB;"}