@platforma-sdk/ui-vue 1.37.7 → 1.37.11

package/.turbo/turbo-type-check.log

@@ -1,5 +1,5 @@
  WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
 
-> @platforma-sdk/ui-vue@1.37.7 type-check /home/runner/_work/platforma/platforma/sdk/ui-vue
+> @platforma-sdk/ui-vue@1.37.11 type-check /home/runner/_work/platforma/platforma/sdk/ui-vue
 > vue-tsc --noEmit --project ./tsconfig.json
 

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @platforma-sdk/ui-vue
 
+## 1.37.11
+
+### Patch Changes
+
+- Updated dependencies [10e5841]
+  - @platforma-sdk/model@1.37.11
+  - @milaboratories/uikit@2.2.94
+
+## 1.37.10
+
+### Patch Changes
+
+- c6b4dd2: Extend interface for PlElementList
+- Updated dependencies [c6b4dd2]
+  - @milaboratories/uikit@2.2.93
+
 ## 1.37.7
 
 ### Patch Changes

package/dist/lib/ui/uikit/dist/components/DataTable/BaseCellComponent.vue.js

@@ -1,6 +1,6 @@
 import { defineComponent as y, reactive as b, computed as k, ref as C, createElementBlock as o, openBlock as u, normalizeClass as V, toDisplayString as _, unref as g } from "vue";
 import { call as B } from "../../lib/util/helpers/dist/index.js";
-const F = ["value"], T = { key: 1 }, S = /* @__PURE__ */ y({
+const F = ["value"], T = { key: 1 }, R = /* @__PURE__ */ y({
   __name: "BaseCellComponent",
   props: {
     modelValue: {},
@@ -37,6 +37,6 @@ const F = ["value"], T = { key: 1 }, S = /* @__PURE__ */ y({
   }
 });
 export {
-  S as default
+  R as default
 };
 //# sourceMappingURL=BaseCellComponent.vue.js.map

package/dist/lib/ui/uikit/dist/components/DataTable/TdCell.vue.js

@@ -6,7 +6,7 @@ import D from "./BaseCellComponent.vue.js";
 const U = ["^data-row-index"], T = {
   key: 0,
   class: "control-cell"
-}, j = /* @__PURE__ */ R({
+}, F = /* @__PURE__ */ R({
   __name: "TdCell",
   props: {
     cell: {}
@@ -70,6 +70,6 @@ const U = ["^data-row-index"], T = {
   }
 });
 export {
-  j as default
+  F as default
 };
 //# sourceMappingURL=TdCell.vue.js.map

package/dist/lib/ui/uikit/dist/components/DataTable/composition/useResize.js

@@ -17,7 +17,7 @@ function I(i) {
     });
   }).slice(0, s.length - 1);
 }
-function _(i, o) {
+function A(i, o) {
   const s = y(), r = w(o, {}), { data: e } = i, n = h(
     (t) => {
       a(e.resizeTh, (c) => {
@@ -49,6 +49,6 @@ function _(i, o) {
 }
 export {
   I as getColumnPositions,
-  _ as useResize
+  A as useResize
 };
 //# sourceMappingURL=useResize.js.map

package/dist/lib/ui/uikit/dist/components/DataTable/composition/useTableColumns.js

@@ -12,12 +12,12 @@ function b(l) {
         frozen: !0
       })
     );
-    let r = 0;
-    const n = s.map((o) => {
-      const c = { ...o, offset: r };
-      return r += o.width + w, c;
-    }), u = n.filter((o) => o.frozen);
-    return p(n, (o) => o.frozen ? !1 : t < o.offset + o.width && o.offset < a + t).concat(u).map((o) => ({
+    let n = 0;
+    const r = s.map((o) => {
+      const c = { ...o, offset: n };
+      return n += o.width + w, c;
+    }), u = r.filter((o) => o.frozen);
+    return p(r, (o) => o.frozen ? !1 : t < o.offset + o.width && o.offset < a + t).concat(u).map((o) => ({
       ...o,
       style: {
         left: o.frozen ? `${o.offset}px` : `${o.offset - e.scrollLeft}px`,

package/dist/lib/ui/uikit/dist/components/DataTable/state.js

@@ -1,17 +1,17 @@
 import { reactive as W, watch as u, computed as a, provide as v } from "vue";
-import { deepClone as h, tap as p, clamp as m, deepEqual as S, resolveAwaited as C, delay as R } from "../../lib/util/helpers/dist/index.js";
+import { deepClone as h, tap as p, clamp as m, deepEqual as R, resolveAwaited as S, delay as C } from "../../lib/util/helpers/dist/index.js";
 import { stateKey as L } from "./keys.js";
-import { useTableColumns as D } from "./composition/useTableColumns.js";
-import { useTableRows as $ } from "./composition/useTableRows.js";
+import { useTableColumns as j } from "./composition/useTableColumns.js";
+import { useTableRows as A } from "./composition/useTableRows.js";
 import { GAP as w, WINDOW_DELTA as g } from "./constants.js";
-const j = async (l, t) => {
+const B = async (l, t) => {
   const { scrollTop: r, bodyHeight: i } = l;
-  return await R(0), C({
+  return await C(0), S({
     rows: t.getRows(r, i),
     dataWindow: l
   });
 };
-function I(l) {
+function K(l) {
   const t = W({
     rowIndex: -1,
     columns: [],
@@ -41,14 +41,14 @@ function I(l) {
     bodyHeight: t.bodyHeight,
     scrollTop: t.scrollTop,
     current: t.currentWindow
-  })), n = D({
+  })), n = j({
     data: t,
     settings: r
-  }), T = $(t, n), d = {
+  }), H = A(t, n), d = {
     data: t,
     settings: r,
     tableColumns: n,
-    tableRows: T,
+    tableRows: H,
     adjustWidth: () => {
       const e = t.columns.reduce((s, c) => s + c.width + w, 0), o = t.bodyWidth + t.scrollLeft;
       if (e < o) {
@@ -98,14 +98,14 @@ function I(l) {
       (!s || e.scrollTop < s.scrollTop || e.scrollTop + e.bodyHeight > s.bodyHeight + s.scrollTop) && (t.currentWindow = {
         scrollTop: e.scrollTop - g,
         bodyHeight: e.bodyHeight + g * 2
-      }, j(h(t.currentWindow), r.value.dataSource).then(({ rows: c, dataWindow: H }) => {
-        S(t.currentWindow, H) && (t.rows = c);
+      }, B(h(t.currentWindow), r.value.dataSource).then(({ rows: c, dataWindow: T }) => {
+        R(t.currentWindow, T) && (t.rows = c);
       }));
     },
     { deep: !0, immediate: !0 }
   ), v(L, d), d;
 }
 export {
-  I as createState
+  K as createState
 };
 //# sourceMappingURL=state.js.map

package/dist/lib/ui/uikit/dist/components/PlAutocomplete/PlAutocomplete.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as ne, mergeModels as pe, useModel as ce, useSlots as se, ref as m, useTemplateRef as ue, reactive as de, computed as u, unref as h, watch as x, watchPostEffect as ve, createElementBlock as n, openBlock as r, withModifiers as L, createElementVNode as g, createCommentVNode as s, normalizeClass as M, createBlock as _, createVNode as R, withDirectives as fe, vModelText as me, withCtx as D, createTextVNode as he, toDisplayString as k, renderSlot as H, Fragment as xe, renderList as ge } from "vue";
+import { defineComponent as ne, mergeModels as pe, useModel as ce, useSlots as se, ref as m, useTemplateRef as ue, reactive as de, computed as u, unref as h, watch as x, watchPostEffect as ve, createElementBlock as n, openBlock as r, withModifiers as L, createElementVNode as g, createCommentVNode as s, normalizeClass as M, createBlock as _, createVNode as O, withDirectives as fe, vModelText as me, withCtx as D, createTextVNode as he, toDisplayString as k, renderSlot as R, Fragment as xe, renderList as ge } from "vue";
 import { tap as we } from "../../helpers/functions.js";
 import be from "../PlTooltip/PlTooltip.vue.js";
 import _e from "../../utils/DoubleContour.vue.js";
@@ -6,7 +6,7 @@ import { useLabelNotch as ke } from "../../utils/useLabelNotch.js";
 import { deepEqual as y } from "../../helpers/objects.js";
 import ye from "../DropdownListItem.vue.js";
 import ze from "../LongText.vue.js";
-import { normalizeListOptions as O } from "../../helpers/utils.js";
+import { normalizeListOptions as H } from "../../helpers/utils.js";
 import Le from "../PlIcon16/PlIcon16.vue.js";
 import Se from "../PlIcon24/PlIcon24.vue.js";
 import $e from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
@@ -34,13 +34,13 @@ const Be = ["tabindex"], Ve = { class: "pl-autocomplete__container" }, Ae = { cl
 }, Te = { key: 0 }, qe = {
   key: 0,
   class: "nothing-found"
-}, Re = {
+}, Oe = {
   key: 0,
   class: "pl-autocomplete__error"
-}, He = {
+}, Re = {
   key: 1,
   class: "pl-autocomplete__helper"
-}, Oe = {
+}, He = {
   key: 2,
   class: "pl-autocomplete__helper"
 }, Ue = {
@@ -74,7 +74,7 @@ const Be = ["tabindex"], Ve = { class: "pl-autocomplete__container" }, Ae = { cl
     }), P = () => we(
       b.value.findIndex((e) => y(e.value, a.value)),
       (e) => e < 0 ? 0 : e
-    ), W = () => t.activeIndex = P(), $ = m([]), w = m(), b = u(() => O($.value).map((e, o) => ({
+    ), W = () => t.activeIndex = P(), $ = m([]), w = m(), b = u(() => H($.value).map((e, o) => ({
       ...e,
       index: o,
       isSelected: o === Y.value,
@@ -145,7 +145,7 @@ const Be = ["tabindex"], Ve = { class: "pl-autocomplete__container" }, Ae = { cl
     return x(() => B.value, (e) => {
       e && ($.value = e, p.value !== null && (I.value = !1));
     }), x(() => q.value, (e) => {
-      e && (w.value = O([e])[0]);
+      e && (w.value = H([e])[0]);
     }), x(() => B.error, (e) => {
       e && (I.value = !!e);
     }), x(() => B.loading || q.loading, (e) => {
@@ -179,7 +179,7 @@ const Be = ["tabindex"], Ve = { class: "pl-autocomplete__container" }, Ae = { cl
               [me, p.value]
             ]),
             t.open ? s("", !0) : (r(), n("div", De, [
-              R(ze, null, {
+              O(ze, null, {
                 default: D(() => [
                   he(k(F.value), 1)
                 ]),
@@ -197,7 +197,7 @@ const Be = ["tabindex"], Ve = { class: "pl-autocomplete__container" }, Ae = { cl
                 name: "delete-clear",
                 onClick: L(J, ["stop"])
               })) : s("", !0),
-              H(e.$slots, "append"),
+              R(e.$slots, "append"),
               g("div", {
                 class: "pl-autocomplete__arrow-wrapper",
                 onClick: L(X, ["stop"])
@@ -221,7 +221,7 @@ const Be = ["tabindex"], Ve = { class: "pl-autocomplete__container" }, Ae = { cl
               position: "top"
             }, {
               tooltip: D(() => [
-                H(e.$slots, "tooltip")
+                R(e.$slots, "tooltip")
               ]),
               _: 3
             })) : s("", !0)
@@ -247,10 +247,10 @@ const Be = ["tabindex"], Ve = { class: "pl-autocomplete__container" }, Ae = { cl
             ]),
             _: 1
           }, 8, ["root"])) : s("", !0),
-          R(_e, { class: "pl-autocomplete__contour" })
+          O(_e, { class: "pl-autocomplete__contour" })
         ])
       ], 42, Be),
-      C.value ? (r(), n("div", Re, k(C.value), 1)) : z.value && e.loadingOptionsHelper ? (r(), n("div", He, k(e.loadingOptionsHelper), 1)) : e.helper ? (r(), n("div", Oe, k(e.helper), 1)) : s("", !0)
+      C.value ? (r(), n("div", Oe, k(C.value), 1)) : z.value && e.loadingOptionsHelper ? (r(), n("div", Re, k(e.loadingOptionsHelper), 1)) : e.helper ? (r(), n("div", He, k(e.helper), 1)) : s("", !0)
     ]));
   }
 });

package/dist/lib/ui/uikit/dist/components/PlBtnSplit/PlBtnSplit.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as $, mergeModels as z, useModel as O, ref as u, reactive as I, watch as R, computed as d, createElementBlock as y, openBlock as r, normalizeClass as D, createElementVNode as w, createBlock as E, createCommentVNode as W, withKeys as G, withModifiers as H, toDisplayString as J, unref as M, Teleport as Q, normalizeStyle as X, Fragment as Y, renderList as Z } from "vue";
+import { defineComponent as U, mergeModels as z, useModel as O, ref as u, reactive as I, watch as R, computed as d, createElementBlock as y, openBlock as r, normalizeClass as D, createElementVNode as w, createBlock as E, createCommentVNode as W, withKeys as G, withModifiers as H, toDisplayString as J, unref as M, Teleport as Q, normalizeStyle as X, Fragment as Y, renderList as Z } from "vue";
 import ee from "../DropdownListItem.vue.js";
 import { useElementPosition as oe } from "../../composition/usePosition.js";
 import { normalizeListOptions as te } from "../../helpers/utils.js";
@@ -14,7 +14,7 @@ import ne from "../PlIcon16/PlIcon16.vue.js";
     console.error("vite-plugin-css-injected-by-js", v);
   }
 })();
-const ie = ["onKeyup"], ce = /* @__PURE__ */ $({
+const ie = ["onKeyup"], ce = /* @__PURE__ */ U({
   __name: "PlBtnSplit",
   props: /* @__PURE__ */ z({
     options: {},
@@ -56,7 +56,7 @@ const ie = ["onKeyup"], ce = /* @__PURE__ */ $({
         isSelected: o === N.value,
         isActive: o === t.activeIndex
       }))
-    ), x = d(() => a.loading || a.options === void 0), P = d(() => {
+    ), x = d(() => a.loading || a.options === void 0), T = d(() => {
       var e;
       return ((e = c.value.find((o) => S(o.value, b.value))) == null ? void 0 : e.label) ?? (a.options === void 0 ? "..." : "");
     });
@@ -71,7 +71,7 @@ const ie = ["onKeyup"], ce = /* @__PURE__ */ $({
     function m() {
       j("click");
     }
-    const T = (e) => {
+    const F = (e) => {
       var o, n;
       if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code))
         e.preventDefault();
@@ -91,9 +91,9 @@ const ie = ["onKeyup"], ce = /* @__PURE__ */ $({
       if (!_)
         return;
       e.code === "Enter" && B((n = h.find((k) => k.index === g)) == null ? void 0 : n.value);
-      const L = h.findIndex((k) => k.index === g) ?? -1, q = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, U = Math.abs(L + q + _) % _;
-      t.activeIndex = c.value[U].index ?? -1;
-    }, F = (e) => {
+      const P = h.findIndex((k) => k.index === g) ?? -1, $ = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, q = Math.abs(P + $ + _) % _;
+      t.activeIndex = c.value[q].index ?? -1;
+    }, L = (e) => {
       var o, n;
       const l = e.relatedTarget;
       !((o = i.value) != null && o.contains(l)) && !((n = f.value) != null && n.contains(l)) && (t.open = !1);
@@ -102,8 +102,8 @@ const ie = ["onKeyup"], ce = /* @__PURE__ */ $({
       ref_key: "root",
       ref: i,
       class: D([{ disabled: e.disabled || x.value, loading: x.value }, "pl-btn-split d-flex"]),
-      onFocusout: F,
-      onKeydown: T
+      onFocusout: L,
+      onKeydown: F
     }, [
       w("div", {
         ref_key: "buttonAction",
@@ -112,7 +112,7 @@ const ie = ["onKeyup"], ce = /* @__PURE__ */ $({
         tabindex: "0",
         onClick: m,
         onKeyup: G(H(m, ["stop"]), ["enter"])
-      }, J(P.value), 41, ie),
+      }, J(T.value), 41, ie),
       w("div", {
         ref_key: "menuActivator",
         ref: C,

package/dist/lib/ui/uikit/dist/components/PlBtnSplit/PlBtnSplit.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlBtnSplit.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlBtnSplit/PlBtnSplit.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M = unknown\">\nimport { computed, reactive, ref, unref, watch } from 'vue';\nimport './pl-btn-split.scss';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport type { ListOption } from '../../types';\nimport { useElementPosition } from '../../composition/usePosition';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { deepEqual } from '@milaboratories/helpers';\nimport { PlMaskIcon16 } from '../PlMaskIcon16';\n\nconst props = defineProps<{\n  /**\n   * List of available options for the dropdown menu\n   */\n  options?: Readonly<ListOption<M>[]>;\n\n  /**\n   * If `true`, the dropdown component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n}>();\n\nconst emits = defineEmits(['click']);\n\nconst model = defineModel<M>({ required: true });\n\nconst root = ref<HTMLElement | undefined>();\nconst list = ref<HTMLElement | undefined>();\nconst menuActivator = ref<HTMLElement | undefined>();\nconst buttonAction = ref<HTMLElement | undefined>();\n\nconst data = reactive({\n  open: false,\n  optionsHeight: 0,\n  activeIndex: -1,\n});\n\ndefineExpose({\n  data,\n});\n\nconst optionsStyle = reactive({\n  top: '0px',\n  left: '0px',\n  width: '0px',\n});\n\nwatch(\n  list,\n  (el) => {\n    if (el) {\n      const rect = el.getBoundingClientRect();\n      data.optionsHeight = rect.height;\n      window.dispatchEvent(new CustomEvent('adjust'));\n    }\n  },\n  { immediate: true },\n);\n\nconst iconState = computed(() => (data.open ? 'mask-24 mask-chevron-up' : 'mask-24 mask-chevron-down'));\n\nconst selectedIndex = computed(() => {\n  return (props.options ?? []).findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst items = computed(() =>\n  normalizeListOptions(props.options ?? []).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })),\n);\n\nconst isLoadingOptions = computed(() => props.loading || props.options === undefined);\n\nconst actionName = computed(() => items.value.find((o) => deepEqual(o.value, model.value))?.label ?? (props.options === undefined ? '...' : ''));\n\nuseElementPosition(root, (pos) => {\n  const focusWidth = 3;\n\n  const downTopOffset = pos.top + pos.height + focusWidth;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    optionsStyle.top = pos.top - data.optionsHeight - focusWidth + 'px';\n  } else {\n    optionsStyle.top = downTopOffset + 'px';\n  }\n\n  optionsStyle.left = pos.left + 'px';\n  optionsStyle.width = pos.width + 'px';\n});\n\nconst selectOption = (v: M | undefined) => {\n  model.value = v!;\n  data.open = false;\n  root?.value?.focus();\n};\n\nfunction emitEnter() {\n  emits('click');\n}\n\nconst handleKeydown = (e: { code: string; preventDefault(): void; stopPropagation(): void; target: EventTarget | null }) => {\n  if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  if (e.target === buttonAction.value && e.code === 'Enter') {\n    emitEnter();\n    return;\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open && e.target === menuActivator.value) {\n    if (e.code === 'Enter') {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === 'Escape') {\n    data.open = false;\n    root.value?.focus();\n  }\n\n  const filtered = unref(items);\n\n  const { length } = filtered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === 'Enter') {\n    selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = items.value[newIndex].index ?? -1;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!root.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {\n    data.open = false;\n  }\n};\n</script>\n<template>\n  <div\n    ref=\"root\"\n    :class=\"{ disabled: disabled || isLoadingOptions, loading: isLoadingOptions }\"\n    class=\"pl-btn-split d-flex\"\n    @focusout=\"onFocusOut\"\n    @keydown=\"handleKeydown\"\n  >\n    <div\n      ref=\"buttonAction\"\n      class=\"pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn\"\n      tabindex=\"0\"\n      @click=\"emitEnter\"\n      @keyup.stop.enter=\"emitEnter\"\n    >\n      {{ actionName }}\n    </div>\n    <div ref=\"menuActivator\" class=\"pl-btn-split__icon-container d-flex align-center justify-center\" tabindex=\"0\" @click=\"data.open = !data.open\">\n      <PlMaskIcon16 v-if=\"isLoadingOptions\" name=\"loading\" />\n      <div v-else :class=\"iconState\" class=\"pl-btn-split__icon\" />\n    </div>\n\n    <Teleport v-if=\"data.open\" to=\"body\">\n      <div ref=\"list\" class=\"pl-dropdown__options\" :style=\"optionsStyle\" tabindex=\"-1\">\n        <DropdownListItem\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"'medium'\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"names":["props","__emit","model","y","z","f","q","s","u","m","_","b","o","B","O","c","watch","list","rect","data","t","iconState","D","T","r","K","d","opt","index","computed","useElementPosition","te","pos","downTopOffset","n","selectOption","x","A","open","items","length","filtered","p","localIndex","E","it","h","newIndex","W","$","P","root","i"],"mappings":"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"}
+{"version":3,"file":"PlBtnSplit.vue.js","sources":["../../../../../../../../../lib/ui/uikit/src/components/PlBtnSplit/PlBtnSplit.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M = unknown\">\nimport { computed, reactive, ref, unref, watch } from 'vue';\nimport './pl-btn-split.scss';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport type { ListOption } from '../../types';\nimport { useElementPosition } from '../../composition/usePosition';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { deepEqual } from '@milaboratories/helpers';\nimport { PlMaskIcon16 } from '../PlMaskIcon16';\n\nconst props = defineProps<{\n  /**\n   * List of available options for the dropdown menu\n   */\n  options?: Readonly<ListOption<M>[]>;\n\n  /**\n   * If `true`, the dropdown component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n}>();\n\nconst emits = defineEmits(['click']);\n\nconst model = defineModel<M>({ required: true });\n\nconst root = ref<HTMLElement | undefined>();\nconst list = ref<HTMLElement | undefined>();\nconst menuActivator = ref<HTMLElement | undefined>();\nconst buttonAction = ref<HTMLElement | undefined>();\n\nconst data = reactive({\n  open: false,\n  optionsHeight: 0,\n  activeIndex: -1,\n});\n\ndefineExpose({\n  data,\n});\n\nconst optionsStyle = reactive({\n  top: '0px',\n  left: '0px',\n  width: '0px',\n});\n\nwatch(\n  list,\n  (el) => {\n    if (el) {\n      const rect = el.getBoundingClientRect();\n      data.optionsHeight = rect.height;\n      window.dispatchEvent(new CustomEvent('adjust'));\n    }\n  },\n  { immediate: true },\n);\n\nconst iconState = computed(() => (data.open ? 'mask-24 mask-chevron-up' : 'mask-24 mask-chevron-down'));\n\nconst selectedIndex = computed(() => {\n  return (props.options ?? []).findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst items = computed(() =>\n  normalizeListOptions(props.options ?? []).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })),\n);\n\nconst isLoadingOptions = computed(() => props.loading || props.options === undefined);\n\nconst actionName = computed(() => items.value.find((o) => deepEqual(o.value, model.value))?.label ?? (props.options === undefined ? '...' : ''));\n\nuseElementPosition(root, (pos) => {\n  const focusWidth = 3;\n\n  const downTopOffset = pos.top + pos.height + focusWidth;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    optionsStyle.top = pos.top - data.optionsHeight - focusWidth + 'px';\n  } else {\n    optionsStyle.top = downTopOffset + 'px';\n  }\n\n  optionsStyle.left = pos.left + 'px';\n  optionsStyle.width = pos.width + 'px';\n});\n\nconst selectOption = (v: M | undefined) => {\n  model.value = v!;\n  data.open = false;\n  root?.value?.focus();\n};\n\nfunction emitEnter() {\n  emits('click');\n}\n\nconst handleKeydown = (e: { code: string; preventDefault(): void; stopPropagation(): void; target: EventTarget | null }) => {\n  if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  if (e.target === buttonAction.value && e.code === 'Enter') {\n    emitEnter();\n    return;\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open && e.target === menuActivator.value) {\n    if (e.code === 'Enter') {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === 'Escape') {\n    data.open = false;\n    root.value?.focus();\n  }\n\n  const filtered = unref(items);\n\n  const { length } = filtered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === 'Enter') {\n    selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = items.value[newIndex].index ?? -1;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!root.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {\n    data.open = false;\n  }\n};\n</script>\n<template>\n  <div\n    ref=\"root\"\n    :class=\"{ disabled: disabled || isLoadingOptions, loading: isLoadingOptions }\"\n    class=\"pl-btn-split d-flex\"\n    @focusout=\"onFocusOut\"\n    @keydown=\"handleKeydown\"\n  >\n    <div\n      ref=\"buttonAction\"\n      class=\"pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn\"\n      tabindex=\"0\"\n      @click=\"emitEnter\"\n      @keyup.stop.enter=\"emitEnter\"\n    >\n      {{ actionName }}\n    </div>\n    <div ref=\"menuActivator\" class=\"pl-btn-split__icon-container d-flex align-center justify-center\" tabindex=\"0\" @click=\"data.open = !data.open\">\n      <PlMaskIcon16 v-if=\"isLoadingOptions\" name=\"loading\" />\n      <div v-else :class=\"iconState\" class=\"pl-btn-split__icon\" />\n    </div>\n\n    <Teleport v-if=\"data.open\" to=\"body\">\n      <div ref=\"list\" class=\"pl-dropdown__options\" :style=\"optionsStyle\" tabindex=\"-1\">\n        <DropdownListItem\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"'medium'\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"names":["props","__emit","model","y","z","f","q","s","u","m","_","b","o","B","O","c","watch","list","rect","data","t","iconState","D","T","r","K","d","opt","index","computed","useElementPosition","te","pos","downTopOffset","n","selectOption","x","A","open","items","length","filtered","p","localIndex","E","it","h","newIndex","W","$","root","i"],"mappings":"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"}

package/dist/lib/ui/uikit/dist/components/PlElementList/PlElementList.vue.js

@@ -0,0 +1,10 @@
+import o from "./PlElementList.vue2.js";
+import s from "./PlElementList.vue3.js";
+import r from "../../_virtual/_plugin-vue_export-helper.js";
+const t = {
+  $style: s
+}, p = /* @__PURE__ */ r(o, [["__cssModules", t]]);
+export {
+  p as default
+};
+//# sourceMappingURL=PlElementList.vue.js.map

package/dist/lib/ui/uikit/dist/components/PlElementList/PlElementList.vue2.js

@@ -0,0 +1,239 @@
+import { defineComponent as fe, mergeModels as W, useModel as u, useSlots as ge, computed as m, shallowRef as w, watch as ce, createElementBlock as E, openBlock as p, normalizeClass as x, createElementVNode as pe, createCommentVNode as be, Fragment as X, renderList as Y, createBlock as Z, createSlots as ee, withCtx as k, renderSlot as $ } from "vue";
+import { isNil as f, shallowHash as ne } from "../../lib/util/helpers/dist/index.js";
+import { useSortable as Ie } from "../../node_modules/.pnpm/@vueuse_integrations@13.3.0_axios@1.8.1_focus-trap@7.6.0_sortablejs@1.15.6_vue@3.5.13_typescript@5.6.3_/node_modules/@vueuse/integrations/useSortable.js";
+import { optionalUpdateRef as g, moveElements as le } from "./utils.js";
+import te from "./PlElementListItem.vue.js";
+const $e = /* @__PURE__ */ fe({
+  __name: "PlElementList",
+  props: /* @__PURE__ */ W({
+    itemClass: { type: [String, Array, Function], default: void 0 },
+    activeItems: { default: void 0 },
+    enableDragging: { type: Boolean, default: void 0 },
+    getItemKey: { type: Function, default: void 0 },
+    onDragEnd: { type: Function, default: void 0 },
+    onSort: { type: Function, default: void 0 },
+    enableExpanding: { type: Boolean, default: void 0 },
+    onExpand: { type: Function, default: void 0 },
+    enableRemoving: { type: Boolean, default: void 0 },
+    onRemove: { type: Function, default: void 0 },
+    enableToggling: { type: Boolean, default: void 0 },
+    onToggle: { type: Function, default: void 0 },
+    enablePinning: { type: Boolean, default: void 0 },
+    onPin: { type: Function, default: void 0 }
+  }, {
+    items: { required: !0 },
+    itemsModifiers: {},
+    draggableItems: {},
+    draggableItemsModifiers: {},
+    removableItems: {},
+    removableItemsModifiers: {},
+    expandableItems: {},
+    expandableItemsModifiers: {},
+    expandedItems: {},
+    expandedItemsModifiers: {},
+    pinnableItems: {},
+    pinnableItemsModifiers: {},
+    pinnedItems: {},
+    pinnedItemsModifiers: {},
+    toggableItems: {},
+    toggableItemsModifiers: {},
+    toggledItems: {},
+    toggledItemsModifiers: {}
+  }),
+  emits: /* @__PURE__ */ W(["itemClick"], ["update:items", "update:draggableItems", "update:removableItems", "update:expandableItems", "update:expandedItems", "update:pinnableItems", "update:pinnedItems", "update:toggableItems", "update:toggledItems"]),
+  setup(s, { emit: ae }) {
+    const r = u(s, "items"), ie = u(s, "draggableItems"), oe = u(s, "removableItems"), se = u(s, "expandableItems"), b = u(s, "expandedItems"), de = u(s, "pinnableItems"), d = u(s, "pinnedItems"), ue = u(s, "toggableItems"), v = u(s, "toggledItems"), a = s, P = ae, R = ge(), D = m(() => a.enableDragging !== !1 && !f(a.getItemKey)), I = m(() => r.value.filter(h)), re = m(() => I.value.length > 0), y = m(() => r.value.filter((e) => !h(e))), T = m(() => y.value.length > 0), C = w(), F = w(), M = w(), B = m((e) => {
+      const n = ne(...r.value);
+      if (C.value === void 0) return e ?? n;
+      const l = ne(...C.value);
+      return n === l ? e ?? n : e !== n ? n : l;
+    });
+    S(re, F, I, () => 0), S(T, M, y, () => I.value.length);
+    function S(e, n, l, t) {
+      const i = Ie(n, l, {
+        handle: '[data-draggable="true"]',
+        animation: 150,
+        forceFallback: !0,
+        fallbackOnBody: !0,
+        scrollSensitivity: 80,
+        forceAutoScrollFallback: !0,
+        onUpdate: (o) => {
+          var c;
+          if (o.oldIndex == null || o.newIndex == null)
+            throw new Error("Sortable event has no index");
+          ((c = a.onDragEnd) == null ? void 0 : c.call(a, o.oldIndex, o.newIndex)) !== !1 && A(t() + o.oldIndex, t() + o.newIndex, !0);
+        }
+      });
+      return ce(e, (o) => o ? i.start() : i.stop()), i;
+    }
+    function A(e, n, l) {
+      var t;
+      e !== n && (l && (C.value = le(r.value.slice(), e, n)), ((t = a.onSort) == null ? void 0 : t.call(a, e, n)) === !1 || (le(r.value, e, n), g(r)));
+    }
+    function H(e) {
+      var n;
+      return ((n = a.activeItems) == null ? void 0 : n.has(e)) ?? !1;
+    }
+    function _(e) {
+      var n;
+      return a.enableDragging === !1 ? !1 : ((n = ie.value) == null ? void 0 : n.has(e)) ?? !0;
+    }
+    function K(e) {
+      var n;
+      return a.enableToggling === !1 ? !1 : !f(v.value) && (((n = ue.value) == null ? void 0 : n.has(e)) ?? !0);
+    }
+    function z(e) {
+      var n;
+      return ((n = v.value) == null ? void 0 : n.has(e)) ?? !1;
+    }
+    function N(e) {
+      var n;
+      return a.enablePinning === !1 ? !1 : !f(d.value) && (((n = de.value) == null ? void 0 : n.has(e)) ?? !0);
+    }
+    function h(e) {
+      var n;
+      return ((n = d.value) == null ? void 0 : n.has(e)) ?? !1;
+    }
+    function L(e) {
+      var n;
+      return a.enableExpanding === !1 ? !1 : !f(b.value) && (((n = se.value) == null ? void 0 : n.has(e)) ?? !0);
+    }
+    function U(e) {
+      var n;
+      return ((n = b.value) == null ? void 0 : n.has(e)) ?? !1;
+    }
+    function V(e) {
+      var n;
+      return a.enableRemoving === !1 || ((n = oe.value) == null ? void 0 : n.has(e)) === !1 ? !1 : a.enableRemoving === !0 || typeof a.onRemove == "function";
+    }
+    function q(e, n) {
+      var l;
+      if (((l = a.onExpand) == null ? void 0 : l.call(a, e, n)) === !1 || f(b.value)) return;
+      const t = b.value;
+      t.has(e) ? t.delete(e) : t.add(e), g(b);
+    }
+    function O(e, n) {
+      var l;
+      if (((l = a.onToggle) == null ? void 0 : l.call(a, e, n)) === !1 || f(v.value)) return;
+      const t = v.value;
+      t.has(e) ? t.delete(e) : t.add(e), g(v);
+    }
+    function j(e, n) {
+      var l;
+      if (n === -1)
+        throw new Error("Pinnable item not found");
+      if (((l = a.onPin) == null ? void 0 : l.call(a, e, n)) === !1 || f(d.value)) return;
+      const t = d.value, i = t.has(e);
+      i ? t.delete(e) : t.add(e), g(d), A(n, t.size + (i ? 0 : -1), !1);
+    }
+    function G(e, n) {
+      var l, t, i;
+      ((l = a.onRemove) == null ? void 0 : l.call(a, e, n)) !== !1 && (r.value.splice(n, 1), g(r), (t = d.value) != null && t.has(e) && (d.value.delete(e), g(d)), (i = v.value) != null && i.has(e) && (v.value.delete(e), g(v)));
+    }
+    const J = (e, n) => f(a.getItemKey) ? `${B.value}-${n}` : `${B.value}-${a.getItemKey(e)}`, ve = m(() => I.value.map(J)), me = m(() => y.value.map(J)), Q = (e, n) => typeof a.itemClass == "function" ? a.itemClass(e, n) : a.itemClass ?? null;
+    return (e, n) => (p(), E("div", {
+      class: x(e.$style.root)
+    }, [
+      pe("div", {
+        ref_key: "pinnedContainerRef",
+        ref: F,
+        class: x(e.$style.list)
+      }, [
+        (p(!0), E(X, null, Y(I.value, (l, t) => (p(), Z(te, {
+          key: ve.value[t],
+          class: x([e.$style.item, Q(l, t)]),
+          index: t,
+          item: l,
+          showDragHandle: D.value,
+          isActive: H(l),
+          isDraggable: _(l),
+          isRemovable: V(l),
+          isToggable: K(l),
+          isToggled: z(l),
+          isPinnable: N(l),
+          isPinned: h(l),
+          isExpandable: L(l),
+          isExpanded: U(l),
+          onClick: (i) => P("itemClick", l),
+          onRemove: G,
+          onToggle: O,
+          onPin: j,
+          onExpand: q
+        }, ee({
+          title: k(({ item: i, index: o }) => [
+            $(e.$slots, "item-title", {
+              index: o,
+              item: i
+            })
+          ]),
+          _: 2
+        }, [
+          R["item-content"] ? {
+            name: "content",
+            fn: k(({ item: i, index: o }) => [
+              $(e.$slots, "item-content", {
+                index: o,
+                item: i
+              })
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["class", "index", "item", "showDragHandle", "isActive", "isDraggable", "isRemovable", "isToggable", "isToggled", "isPinnable", "isPinned", "isExpandable", "isExpanded", "onClick"]))), 128))
+      ], 2),
+      T.value ? (p(), E("div", {
+        key: 0,
+        ref_key: "unpinnedContainerRef",
+        ref: M,
+        class: x(e.$style.list)
+      }, [
+        (p(!0), E(X, null, Y(y.value, (l, t) => {
+          var i;
+          return p(), Z(te, {
+            key: me.value[t],
+            class: x([e.$style.item, Q(l, t)]),
+            index: t + (((i = d.value) == null ? void 0 : i.size) ?? 0),
+            item: l,
+            showDragHandle: D.value,
+            isActive: H(l),
+            isDraggable: _(l),
+            isRemovable: V(l),
+            isToggable: K(l),
+            isToggled: z(l),
+            isPinnable: N(l),
+            isPinned: h(l),
+            isExpandable: L(l),
+            isExpanded: U(l),
+            onClick: (o) => P("itemClick", l),
+            onRemove: G,
+            onToggle: O,
+            onPin: j,
+            onExpand: q
+          }, ee({
+            title: k(({ item: o, index: c }) => [
+              $(e.$slots, "item-title", {
+                index: c,
+                item: o
+              })
+            ]),
+            _: 2
+          }, [
+            R["item-content"] ? {
+              name: "content",
+              fn: k(({ item: o, index: c }) => [
+                $(e.$slots, "item-content", {
+                  index: c,
+                  item: o
+                })
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["class", "index", "item", "showDragHandle", "isActive", "isDraggable", "isRemovable", "isToggable", "isToggled", "isPinnable", "isPinned", "isExpandable", "isExpanded", "onClick"]);
+        }), 128))
+      ], 2)) : be("", !0)
+    ], 2));
+  }
+});
+export {
+  $e as default
+};
+//# sourceMappingURL=PlElementList.vue2.js.map