@milaboratories/uikit 2.2.96 → 2.2.97

package/dist/components/PlElementList/PlElementList.vue2.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"PlElementList.vue2.js","sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown, K extends number | string = number | string\" lang=\"ts\" setup>\nimport type { ShallowRef } from 'vue';\nimport { computed, shallowRef, watch } from 'vue';\nimport { isNil, shallowHash } from '@milaboratories/helpers';\nimport { useSortable } from '@vueuse/integrations/useSortable';\nimport { type SortableEvent } from 'sortablejs';\nimport { moveElements, optionalUpdateRef } from './utils.ts';\nimport PlElementListItem from './PlElementListItem.vue';\n\nconst itemsRef = defineModel<T[]>('items', { required: true });\nconst draggableSetRef = defineModel<Set<K>>('draggableItems');\nconst removableSetRef = defineModel<Set<K>>('removableItems');\n\nconst expandableSetRef = defineModel<Set<K>>('expandableItems');\nconst expandedSetRef = defineModel<Set<K>>('expandedItems');\n\nconst pinnableSetRef = defineModel<Set<K>>('pinnableItems');\nconst pinnedSetRef = defineModel<Set<K>>('pinnedItems');\n\nconst toggableSetRef = defineModel<Set<K>>('toggableItems');\nconst toggledSetRef = defineModel<Set<K>>('toggledItems');\n\nconst props = withDefaults(\n  defineProps<{\n    getItemKey: (item: T, index: number) => K;\n\n    itemClass?: string | string[] | ((item: T, index: number) => string | string[]);\n    activeItems?: Set<K>;\n\n    enableDragging?: boolean;\n    onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;\n    onSort?: (oldIndex: number, newIndex: number) => void | boolean;\n\n    enableExpanding?: boolean;\n    onExpand?: (item: T, index: number) => void | boolean;\n\n    enableRemoving?: boolean;\n    onRemove?: (item: T, index: number) => void | boolean;\n\n    enableToggling?: boolean;\n    onToggle?: (item: T, index: number) => void | boolean;\n\n    enablePinning?: boolean;\n    onPin?: (item: T, index: number) => void | boolean;\n  }>(), {\n    itemClass: undefined,\n    activeItems: undefined,\n\n    enableDragging: undefined,\n    enableRemoving: undefined,\n    enableExpanding: undefined,\n    enableToggling: undefined,\n    enablePinning: undefined,\n\n    onDragEnd: undefined,\n    onSort: undefined,\n    onRemove: undefined,\n    onExpand: undefined,\n    onToggle: undefined,\n    onPin: undefined,\n  },\n);\n\nconst emits = defineEmits<{\n  (e: 'itemClick', item: T): void;\n}>();\n\nconst slots = defineSlots<{\n  ['item-title']: (props: { item: T; index: number }) => unknown;\n  ['item-content']?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n  return props.enableDragging !== false;\n});\n\nconst pinnedItemsRef = computed(() => itemsRef.value.filter(isPinned));\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() => itemsRef.value.filter((item, index) => !isPinned(item, index)));\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined | T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n  const currentVersion = shallowHash(...itemsRef.value.map(props.getItemKey));\n\n  if (domProjectionItemsRef.value === undefined) return oldVersion ?? currentVersion;\n\n  const lastSortedVersion = shallowHash(...domProjectionItemsRef.value.map(props.getItemKey));\n\n  if (currentVersion === lastSortedVersion) return oldVersion ?? currentVersion;\n\n  return oldVersion !== currentVersion ? currentVersion : lastSortedVersion;\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(hasUnpinnedItems, unpinnedContainerRef, unpinnedItemsRef, () => pinnedItemsRef.value.length);\n\nfunction createSortable(toggler: ShallowRef<boolean>, elRef: ShallowRef<undefined | HTMLElement>, itemsRef: ShallowRef<T[]>, getOffset: () => number) {\n  const sortable = useSortable(elRef, itemsRef, {\n    handle: `[data-draggable=\"true\"]`,\n    animation: 150,\n    forceFallback: true,\n    fallbackOnBody: true,\n    scrollSensitivity: 80,\n    forceAutoScrollFallback: true,\n    onUpdate: (evt: SortableEvent) => {\n      if (evt.oldIndex == null || evt.newIndex == null) {\n        throw new Error('Sortable event has no index');\n      }\n      if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n        moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n      }\n    },\n  });\n  watch(toggler, (on) => on ? sortable.start() : sortable.stop());\n\n  return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n  if (oldIndex === newIndex) return;\n\n  if (afterUpdateDom) {\n    domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n  }\n\n  const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n  if (!preventDefault) {\n    moveElements(itemsRef.value, oldIndex, newIndex);\n    optionalUpdateRef(itemsRef);\n  }\n}\n\nfunction isActive(item: T, index: number): boolean {\n  const k = props.getItemKey(item, index);\n  return props.activeItems?.has(k) ?? false;\n}\n\nfunction isDraggable(item: T, index: number): boolean {\n  const k = props.getItemKey(item, index);\n  if (props.enableDragging === false) return false;\n  return (draggableSetRef.value?.has(k) ?? true);\n}\n\nfunction isToggable(item: T, index: number): boolean {\n  const k = props.getItemKey(item, index);\n  if (props.enableToggling === false) return false;\n  return !isNil(toggledSetRef.value) && (toggableSetRef.value?.has(k) ?? true);\n}\n\nfunction isToggled(item: T, index: number): boolean {\n  const k = props.getItemKey(item, index);\n  return toggledSetRef.value?.has(k) ?? false;\n}\n\nfunction isPinnable(item: T, index: number): boolean {\n  const k = props.getItemKey(item, index);\n  if (props.enablePinning === false) return false;\n  return !isNil(pinnedSetRef.value) && (pinnableSetRef.value?.has(k) ?? true);\n}\n\nfunction isPinned(item: T, index: number): boolean {\n  const k = props.getItemKey(item, index);\n  return pinnedSetRef.value?.has(k) ?? false;\n}\n\nfunction isExpandable(item: T, index: number): boolean {\n  const k = props.getItemKey(item, index);\n  if (props.enableExpanding === false) return false;\n  return !isNil(expandedSetRef.value) && (expandableSetRef.value?.has(k) ?? true);\n}\n\nfunction isExpanded(item: T, index: number): boolean {\n  const k = props.getItemKey(item, index);\n  return expandedSetRef.value?.has(k) ?? false;\n}\n\nfunction isRemovable(item: T, index: number): boolean {\n  const k = props.getItemKey(item, index);\n  if (props.enableRemoving === false) return false;\n  if (removableSetRef.value?.has(k) === false) return false;\n  return props.enableRemoving === true || typeof props.onRemove === 'function';\n}\n\nfunction handleExpand(item: T, index: number) {\n  if (props.onExpand?.(item, index) === false || isNil(expandedSetRef.value)) return;\n  const k = props.getItemKey(item, index);\n  const expanded = expandedSetRef.value;\n  if (expanded.has(k)) expanded.delete(k);\n  else expanded.add(k);\n  optionalUpdateRef(expandedSetRef);\n}\n\nfunction handleToggle(item: T, index: number) {\n  if (props.onToggle?.(item, index) === false || isNil(toggledSetRef.value)) return;\n  const k = props.getItemKey(item, index);\n  const toggled = toggledSetRef.value;\n  if (toggled.has(k)) toggled.delete(k);\n  else toggled.add(k);\n  optionalUpdateRef(toggledSetRef);\n}\n\nfunction handlePin(item: T, index: number) {\n  if (index === -1) {\n    throw new Error('Pinnable item not found');\n  }\n\n  if (props.onPin?.(item, index) === false || isNil(pinnedSetRef.value)) return;\n\n  const k = props.getItemKey(item, index);\n  const pinned = pinnedSetRef.value;\n  const alreadyPinned = pinned.has(k);\n  if (alreadyPinned) pinned.delete(k);\n  else pinned.add(k);\n  optionalUpdateRef(pinnedSetRef);\n  moveItems(index, pinned.size + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n  if (props.onRemove?.(item, index) !== false) {\n    const k = props.getItemKey(item, index);\n\n    itemsRef.value.splice(index, 1);\n    optionalUpdateRef(itemsRef);\n\n    if (pinnedSetRef.value?.has(k)) {\n      pinnedSetRef.value.delete(k);\n      optionalUpdateRef(pinnedSetRef);\n    }\n\n    if (toggledSetRef.value?.has(k)) {\n      toggledSetRef.value.delete(k);\n      optionalUpdateRef(toggledSetRef);\n    }\n  }\n}\n\n// version fix problem with sync between data and rendered values\nconst getKey = (item: T, index: number) => {\n  return `${versionRef.value}-${props.getItemKey(item, index)}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\nconst getItemClass = (item: T, index: number): null | string | string[] => {\n  if (typeof props.itemClass === 'function') {\n    return props.itemClass(item, index);\n  }\n  return props.itemClass ?? null;\n};\n\n</script>\n\n<template>\n  <div :class=\"$style.root\">\n    <div ref=\"pinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"(pinnedItem, pinnedIndex) in pinnedItemsRef\" :key=\"pinnedKeysRef[pinnedIndex]\"\n        :class=\"[$style.item, getItemClass(pinnedItem, pinnedIndex)]\"\n\n        :index=\"pinnedIndex\"\n        :item=\"pinnedItem\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActive(pinnedItem, pinnedIndex)\"\n        :isDraggable=\"isDraggable(pinnedItem, pinnedIndex)\"\n        :isRemovable=\"isRemovable(pinnedItem, pinnedIndex)\"\n        :isToggable=\"isToggable(pinnedItem, pinnedIndex)\"\n        :isToggled=\"isToggled(pinnedItem, pinnedIndex)\"\n        :isPinnable=\"isPinnable(pinnedItem, pinnedIndex)\"\n        :isPinned=\"isPinned(pinnedItem, pinnedIndex)\"\n        :isExpandable=\"isExpandable(pinnedItem, pinnedIndex)\"\n        :isExpanded=\"isExpanded(pinnedItem, pinnedIndex)\"\n\n        @click=\"emits('itemClick', pinnedItem)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n      </PlElementListItem>\n    </div>\n    <div v-if=\"hasUnpinnedItems\" ref=\"unpinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"(unpinnedItem, unpinnedIndex) in unpinnedItemsRef\" :key=\"unpinnedKeysRef[unpinnedIndex]\"\n        :class=\"[$style.item, getItemClass(unpinnedItem, unpinnedIndex)]\"\n\n        :index=\"unpinnedIndex + (pinnedSetRef?.size ?? 0)\"\n        :item=\"unpinnedItem\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActive(unpinnedItem, unpinnedIndex)\"\n        :isDraggable=\"isDraggable(unpinnedItem, unpinnedIndex)\"\n        :isRemovable=\"isRemovable(unpinnedItem, unpinnedIndex)\"\n        :isToggable=\"isToggable(unpinnedItem, unpinnedIndex)\"\n        :isToggled=\"isToggled(unpinnedItem, unpinnedIndex)\"\n        :isPinnable=\"isPinnable(unpinnedItem, unpinnedIndex)\"\n        :isPinned=\"isPinned(unpinnedItem, unpinnedIndex)\"\n        :isExpandable=\"isExpandable(unpinnedItem, unpinnedIndex)\"\n        :isExpanded=\"isExpanded(unpinnedItem, unpinnedIndex)\"\n\n        @click=\"emits('itemClick', unpinnedItem)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n      </PlElementListItem>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root, .list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 180px;\n}\n\n.item {\n  width: 100%;\n}\n\n:global(.sortable-ghost) {\n  visibility: hidden;\n}\n:global(.sortable-drag) {\n  opacity: 1;\n}\n</style>\n"],"names":["itemsRef","_useModel","__props","draggableSetRef","removableSetRef","expandableSetRef","expandedSetRef","pinnableSetRef","pinnedSetRef","toggableSetRef","toggledSetRef","props","emits","__emit","slots","_useSlots","dndSortingEnabled","computed","pinnedItemsRef","isPinned","hasPinnedItems","unpinnedItemsRef","item","index","hasUnpinnedItems","domProjectionItemsRef","shallowRef","pinnedContainerRef","unpinnedContainerRef","versionRef","oldVersion","currentVersion","shallowHash","lastSortedVersion","createSortable","toggler","elRef","getOffset","sortable","useSortable","evt","_a","moveItems","watch","on","oldIndex","newIndex","afterUpdateDom","moveElements","optionalUpdateRef","isActive","k","isDraggable","isToggable","isNil","isToggled","isPinnable","isExpandable","isExpanded","isRemovable","handleExpand","expanded","handleToggle","toggled","handlePin","pinned","alreadyPinned","handleRemove","_b","_c","getKey","pinnedKeysRef","unpinnedKeysRef","getItemClass"],"mappings":"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"}
+{"version":3,"file":"PlElementList.vue2.js","sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown, K extends number | string = number | string\" lang=\"ts\" setup>\nimport type { ShallowRef } from 'vue';\nimport { computed, shallowRef, watch } from 'vue';\nimport { isFunction, shallowHash } from '@milaboratories/helpers';\nimport { useSortable } from '@vueuse/integrations/useSortable';\nimport { type SortableEvent } from 'sortablejs';\nimport { moveElements } from './utils.ts';\nimport PlElementListItem from './PlElementListItem.vue';\n\nconst itemsRef = defineModel<T[]>('items', { required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    getItemKey?: (item: T, index: number) => K;\n\n    itemClass?: string | string[] | ((item: T, index: number) => string | string[]);\n    isActive?: (item: T, index: number) => boolean;\n\n    disableDragging?: boolean;\n    isDraggable?: (item: T, index: number) => boolean;\n    onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;\n    onSort?: (oldIndex: number, newIndex: number) => void | boolean;\n\n    disableRemoving?: boolean;\n    isRemovable?: (item: T, index: number) => boolean;\n    onRemove?: (item: T, index: number) => void | boolean;\n\n    disableExpanding?: boolean;\n    isExpandable?: (item: T, index: number) => boolean;\n    isExpanded?: (item: T, index: number) => boolean;\n    onExpand?: (item: T, index: number) => unknown;\n\n    disableToggling?: boolean;\n    isToggable?: (item: T, index: number) => boolean;\n    isToggled?: (item: T, index: number) => boolean;\n    onToggle?: (item: T, index: number) => unknown;\n\n    disablePinning?: boolean;\n    isPinnable?: (item: T, index: number) => boolean;\n    isPinned?: (item: T, index: number) => boolean;\n    onPin?: (item: T, index: number) => void | boolean;\n  }>(), {\n    getItemKey: (item: T) => JSON.stringify(item) as K,\n\n    itemClass: undefined,\n    isActive: undefined,\n\n    disableDragging: undefined,\n    isDraggable: undefined,\n    onDragEnd: undefined,\n    onSort: undefined,\n\n    disableRemoving: undefined,\n    isRemovable: undefined,\n    onRemove: undefined,\n\n    disableExpanding: undefined,\n    isExpandable: undefined,\n    isExpanded: undefined,\n    onExpand: undefined,\n\n    disableToggling: undefined,\n    isToggable: undefined,\n    isToggled: undefined,\n    onToggle: undefined,\n\n    disablePinning: undefined,\n    isPinnable: undefined,\n    isPinned: undefined,\n    onPin: undefined,\n  },\n);\n\nconst emits = defineEmits<{\n  (e: 'itemClick', item: T): void;\n}>();\n\nconst slots = defineSlots<{\n  ['item-title']: (props: { item: T; index: number }) => unknown;\n  ['item-content']?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n  return props.disableDragging !== true;\n});\n\nconst pinnedItemsRef = computed(() => itemsRef.value.filter(isPinnedItem));\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() => itemsRef.value.filter((item, index) => !isPinnedItem(item, index)));\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined | T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values\nconst getKey = (item: T, index: number) => {\n  return `${versionRef.value}-${props.getItemKey(item, index)}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n  const currentKeys = itemsRef.value.map(props.getItemKey);\n\n  if (domProjectionItemsRef.value === undefined) return oldVersion ?? shallowHash(...currentKeys);\n  if (currentKeys.length !== domProjectionItemsRef.value.length) return shallowHash(...currentKeys);\n\n  const domProjectionKeys = domProjectionItemsRef.value.map(props.getItemKey);\n  const domProjectionKeysSet = new Set(domProjectionKeys);\n\n  for (let i = 0; i < currentKeys.length; i++) {\n    const hasInconsistentPosition = domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];\n\n    if (hasInconsistentPosition) {\n      return shallowHash(...currentKeys);\n    }\n  }\n\n  return oldVersion ?? shallowHash(...currentKeys);\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(hasUnpinnedItems, unpinnedContainerRef, unpinnedItemsRef, () => pinnedItemsRef.value.length);\n\nfunction createSortable(toggler: ShallowRef<boolean>, elRef: ShallowRef<undefined | HTMLElement>, itemsRef: ShallowRef<T[]>, getOffset: () => number) {\n  const sortable = useSortable(elRef, itemsRef, {\n    handle: `[data-draggable=\"true\"]`,\n    animation: 150,\n    forceFallback: true,\n    fallbackOnBody: true,\n    scrollSensitivity: 80,\n    forceAutoScrollFallback: true,\n    onUpdate: (evt: SortableEvent) => {\n      if (evt.oldIndex == null || evt.newIndex == null) {\n        throw new Error('Sortable event has no index');\n      }\n      if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n        moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n      }\n    },\n  });\n  watch([() => props.disableDragging, toggler], ([disabled, on]) => disabled || !on ? sortable.stop() : sortable.start(), {\n    immediate: true,\n  });\n\n  return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n  if (oldIndex === newIndex) return;\n\n  if (afterUpdateDom) {\n    domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n  }\n\n  const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n  if (!preventDefault) {\n    moveElements(itemsRef.value, oldIndex, newIndex);\n  }\n}\n\nfunction isActiveItem(item: T, index: number): boolean {\n  return props.isActive?.(item, index) ?? false;\n}\n\nfunction isDraggableItem(item: T, index: number): boolean {\n  if (props.disableDragging === true) return false;\n  return (props.isDraggable?.(item, index) ?? true);\n}\n\nfunction isRemovableItem(item: T, index: number): boolean {\n  if (props.disableRemoving === true) return false;\n  return (props.isRemovable?.(item, index) ?? true);\n}\n\nfunction isToggableItem(item: T, index: number): boolean {\n  if (props.disableToggling === true) return false;\n  return (props.isToggable?.(item, index) ?? (isFunction(props.isToggled) || isFunction(props.onToggle)));\n}\n\nfunction isToggledItem(item: T, index: number): boolean {\n  return props.isToggled?.(item, index) ?? false;\n}\n\nfunction isPinnableItem(item: T, index: number): boolean {\n  if (props.disablePinning === true) return false;\n  return (props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) || isFunction(props.onPin)));\n}\n\nfunction isPinnedItem(item: T, index: number): boolean {\n  return props.isPinned?.(item, index) ?? false;\n}\n\nfunction isExpandableItem(item: T, index: number): boolean {\n  if (props.disableExpanding === true) return false;\n  return (props.isExpandable?.(item, index) ?? (isFunction(props.isExpanded) || isFunction(props.onExpand)));\n}\n\nfunction isExpandedItem(item: T, index: number): boolean {\n  return props.isExpanded?.(item, index) ?? false;\n}\n\nfunction handleExpand(item: T, index: number) {\n  props.onExpand?.(item, index);\n}\n\nfunction handleToggle(item: T, index: number) {\n  props.onToggle?.(item, index);\n}\n\nfunction handlePin(item: T, index: number) {\n  if (index === -1) {\n    throw new Error('Pinnable item not found');\n  }\n\n  const alreadyPinned = pinnedItemsRef.value.includes(item);\n\n  if (props.onPin?.(item, index) === false) return;\n\n  moveItems(index, pinnedItemsRef.value.length + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n  if (props.onRemove?.(item, index) === false) return;\n  itemsRef.value.splice(index, 1);\n}\n\nconst getItemClass = (item: T, index: number): null | string | string[] => {\n  if (typeof props.itemClass === 'function') {\n    return props.itemClass(item, index);\n  }\n  return props.itemClass ?? null;\n};\n\n</script>\n\n<template>\n  <div :class=\"$style.root\">\n    <div ref=\"pinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"(pinnedItem, pinnedIndex) in pinnedItemsRef\" :key=\"pinnedKeysRef[pinnedIndex]\"\n        :class=\"[$style.item, getItemClass(pinnedItem, pinnedIndex)]\"\n\n        :index=\"pinnedIndex\"\n        :item=\"pinnedItem\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(pinnedItem, pinnedIndex)\"\n        :isDraggable=\"isDraggableItem(pinnedItem, pinnedIndex)\"\n        :isRemovable=\"isRemovableItem(pinnedItem, pinnedIndex)\"\n        :isToggable=\"isToggableItem(pinnedItem, pinnedIndex)\"\n        :isToggled=\"isToggledItem(pinnedItem, pinnedIndex)\"\n        :isPinnable=\"isPinnableItem(pinnedItem, pinnedIndex)\"\n        :isPinned=\"true\"\n        :isExpandable=\"isExpandableItem(pinnedItem, pinnedIndex)\"\n        :isExpanded=\"isExpandedItem(pinnedItem, pinnedIndex)\"\n\n        @click=\"emits('itemClick', pinnedItem)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n      </PlElementListItem>\n    </div>\n    <div v-if=\"hasUnpinnedItems\" ref=\"unpinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"(unpinnedItem, unpinnedIndex) in unpinnedItemsRef\" :key=\"unpinnedKeysRef[unpinnedIndex]\"\n        :class=\"[$style.item, getItemClass(unpinnedItem, unpinnedIndex)]\"\n\n        :index=\"unpinnedIndex + (pinnedItemsRef?.length ?? 0)\"\n        :item=\"unpinnedItem\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(unpinnedItem, unpinnedIndex)\"\n        :isDraggable=\"isDraggableItem(unpinnedItem, unpinnedIndex)\"\n        :isRemovable=\"isRemovableItem(unpinnedItem, unpinnedIndex)\"\n        :isToggable=\"isToggableItem(unpinnedItem, unpinnedIndex)\"\n        :isToggled=\"isToggledItem(unpinnedItem, unpinnedIndex)\"\n        :isPinnable=\"isPinnableItem(unpinnedItem, unpinnedIndex)\"\n        :isPinned=\"false\"\n        :isExpandable=\"isExpandableItem(unpinnedItem, unpinnedIndex)\"\n        :isExpanded=\"isExpandedItem(unpinnedItem, unpinnedIndex)\"\n\n        @click=\"emits('itemClick', unpinnedItem)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n      </PlElementListItem>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root, .list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 180px;\n}\n\n.item {\n  width: 100%;\n}\n\n:global(.sortable-ghost) {\n  visibility: hidden;\n}\n:global(.sortable-drag) {\n  opacity: 1;\n}\n</style>\n"],"names":["itemsRef","_useModel","__props","props","emits","__emit","slots","_useSlots","dndSortingEnabled","computed","pinnedItemsRef","isPinnedItem","hasPinnedItems","unpinnedItemsRef","item","index","hasUnpinnedItems","domProjectionItemsRef","shallowRef","pinnedContainerRef","unpinnedContainerRef","getKey","versionRef","pinnedKeysRef","unpinnedKeysRef","oldVersion","currentKeys","shallowHash","domProjectionKeys","domProjectionKeysSet","i","createSortable","toggler","elRef","getOffset","sortable","useSortable","evt","_a","moveItems","watch","disabled","on","oldIndex","newIndex","afterUpdateDom","moveElements","isActiveItem","isDraggableItem","isRemovableItem","isToggableItem","isFunction","isToggledItem","isPinnableItem","isExpandableItem","isExpandedItem","handleExpand","handleToggle","handlePin","alreadyPinned","handleRemove","getItemClass"],"mappings":"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"}

package/dist/components/PlElementList/PlElementListItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlElementListItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"names":[],"mappings":"yBAqPiB,CAAC,SAAS,OAAO,yBACpB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA0M1D,mBAAmB,CAAC;;;;;;cAvMpB,CAAC;eACA,MAAM;wBACG,OAAO;kBACb,OAAO;qBACJ,OAAO;qBACP,OAAO;sBACN,OAAO;oBACT,OAAO;oBACP,OAAO;mBACR,OAAO;oBACN,OAAO;kBACT,OAAO;mBA4L2E,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;eAzLF,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;kBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;eADjD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;kBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;;YAKpD,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACvC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACvC,KAAK,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACpC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;;;;;YAqLD,OAAO,CAAC,OAAO,WAAW,CAAC;;AApNvE,wBAoN4E;AA0B5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlElementListItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"names":[],"mappings":"yBA6PiB,CAAC,SAAS,OAAO,yBACpB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA0M1D,mBAAmB,CAAC;;;;;;cAvMpB,CAAC;eACA,MAAM;wBACG,OAAO;kBACb,OAAO;qBACJ,OAAO;qBACP,OAAO;sBACN,OAAO;oBACT,OAAO;oBACP,OAAO;mBACR,OAAO;oBACN,OAAO;kBACT,OAAO;mBA4L2E,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;eAzLF,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;kBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;eADjD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;kBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;;YAKpD,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACvC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACvC,KAAK,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACpC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;;;;;YAqLD,OAAO,CAAC,OAAO,WAAW,CAAC;;AApNvE,wBAoN4E;AA2B5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/PlElementList/PlElementListItem.vue2.js

@@ -90,7 +90,7 @@ const f = ["data-draggable"], h = /* @__PURE__ */ B({
       ], 2),
       $.value && s.isExpanded ? (n(), o("div", {
         key: 0,
-        class: l(e.$style.body)
+        class: l([e.$style.body, { [e.$style.disabled]: s.isToggled }])
       }, [
         v(e.$slots, "content", {
           item: s.item,

package/dist/components/PlElementList/PlElementListItem.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlElementListItem.vue2.js","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\n\nconst props = defineProps<{\n  item: T;\n  index: number;\n  showDragHandle: boolean;\n  isActive: boolean;\n  isDraggable: boolean;\n  isRemovable: boolean;\n  isExpandable: boolean;\n  isExpanded: boolean;\n  isToggable: boolean;\n  isToggled: boolean;\n  isPinnable: boolean;\n  isPinned: boolean;\n}>();\n\nconst slots = defineSlots<{\n  title: (props: { item: T; index: number }) => unknown;\n  content?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots['content'] !== undefined);\n\nconst emit = defineEmits<{\n  (e: 'expand', item: T, index: number): void;\n  (e: 'toggle', item: T, index: number): void;\n  (e: 'pin', item: T, index: number): void;\n  (e: 'remove', item: T, index: number): void;\n}>();\n</script>\n\n<template>\n  <div\n    :class=\"[$style.root, {\n      [$style.active]: props.isActive,\n      [$style.pinned]: props.isPinned,\n      [$style.disabled]: props.isToggled,\n    }]\"\n  >\n    <div\n      :class=\"[$style.head, {\n        [$style.clickable]: hasContentSlot,\n      }]\"\n      @click=\"isExpandable && emit('expand', props.item, props.index)\"\n    >\n      <div\n        v-if=\"props.showDragHandle\"\n        :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable } ]\"\n        :data-draggable=\"props.isDraggable\"\n      >\n        <PlIcon16 name=\"drag-dots\" />\n      </div>\n      <PlIcon16 v-if=\"isExpandable\" :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\" name=\"chevron-down\" />\n\n      <div :class=\"$style.title\">\n        <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n      </div>\n\n      <div :class=\"[$style.actions, $style.showOnHover]\">\n        <div\n          v-if=\"props.isToggable\"\n          :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n          @click.stop=\"emit('toggle', props.item, props.index)\"\n        >\n          <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n        </div>\n        <div\n          v-if=\"props.isPinnable\"\n          :class=\"[$style.action, $style.clickable, {\n            [$style.disable]: !props.isPinnable,\n            [$style.activated]: props.isPinned,\n          }]\"\n          @click.stop=\"emit('pin', props.item, props.index)\"\n        >\n          <PlIcon24 name=\"pin\" size=\"16\" />\n        </div>\n        <div\n          v-if=\"props.isRemovable\"\n          :class=\"[$style.action, $style.clickable]\"\n          @click.stop=\"emit('remove', props.item, props.index)\"\n        >\n          <PlIcon16 name=\"close\" />\n        </div>\n      </div>\n    </div>\n    <div v-if=\"hasContentSlot && props.isExpanded\" :class=\"$style.body\">\n      <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n  </div>\n</template>\n\n<style module>\n@use '../../assets/variables.scss' as *;\n\n.root {\n  --background: rgba(255, 255, 255, 0.8);\n  --border-color: var(--color-div-grey);\n  --head-background: unset;\n  --box-shadow: none;\n  --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n  &:global(.sortable-drag),\n  &:global(.sortable-chosen) {\n    --head-background: var(--gradient-light-lime);\n    --border-color: var(--border-color-focus);\n    --box-shadow: var(--box-shadow-active)\n  }\n}\n.root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-radius: var(--border-radius);\n  border: 1px solid var(--border-color);\n  background-color: var(--background);\n  transition: box-shadow 0.15s;\n  box-shadow: var(--box-shadow);;\n  overflow: hidden;\n\n  &:hover {\n    --border-color: var(--border-color-focus);\n  }\n\n  &.disabled {\n    opacity: 0.6;\n    filter: grayscale(1);\n  }\n\n  &.pinned {\n    --background: var(--bg-base-light);\n  }\n\n  &.active {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--btn-accent-positive-500);\n  }\n}\n\n.head {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  background: var(--head-background);\n\n  &:hover, &.opened {\n    --head-background: var(--gradient-light-lime);\n  }\n}\n\n.contentChevron {\n  display: block;\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s;\n\n  &.opened {\n    transform: rotate(0deg);\n  }\n}\n\n.title {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  gap: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n}\n\n.actions {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  background-color: var(--background);\n  border-radius: var(--border-radius);\n}\n\n.action {\n  width: 24px;\n  height: 24px;\n  padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n  opacity: 0.6;\n  border-radius: var(--border-radius);\n  transition: all 0.15s;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &:hover {\n    opacity: 1;\n    background-color: var(--bg-elevated-02);\n  }\n\n  &.activated {\n    opacity: 0.8;\n  }\n\n  &.disable {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.clickable {\n  cursor: pointer;\n}\n\n.draggable {\n  cursor: grab;\n}\n\n.showOnHover {\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n  opacity: 1;\n}\n</style>\n"],"names":["props","__props","slots","_useSlots","hasContentSlot","computed","emit","__emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,GAeRC,IAAQC,EAGV,GACEC,IAAiBC,EAAS,MAAMH,EAAM,YAAe,MAAS,GAE9DI,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlElementListItem.vue2.js","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\n\nconst props = defineProps<{\n  item: T;\n  index: number;\n  showDragHandle: boolean;\n  isActive: boolean;\n  isDraggable: boolean;\n  isRemovable: boolean;\n  isExpandable: boolean;\n  isExpanded: boolean;\n  isToggable: boolean;\n  isToggled: boolean;\n  isPinnable: boolean;\n  isPinned: boolean;\n}>();\n\nconst slots = defineSlots<{\n  title: (props: { item: T; index: number }) => unknown;\n  content?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots['content'] !== undefined);\n\nconst emit = defineEmits<{\n  (e: 'expand', item: T, index: number): void;\n  (e: 'toggle', item: T, index: number): void;\n  (e: 'pin', item: T, index: number): void;\n  (e: 'remove', item: T, index: number): void;\n}>();\n</script>\n\n<template>\n  <div\n    :class=\"[$style.root, {\n      [$style.active]: props.isActive,\n      [$style.pinned]: props.isPinned,\n      [$style.disabled]: props.isToggled,\n    }]\"\n  >\n    <div\n      :class=\"[$style.head, {\n        [$style.clickable]: hasContentSlot,\n      }]\"\n      @click=\"isExpandable && emit('expand', props.item, props.index)\"\n    >\n      <div\n        v-if=\"props.showDragHandle\"\n        :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable } ]\"\n        :data-draggable=\"props.isDraggable\"\n      >\n        <PlIcon16 name=\"drag-dots\" />\n      </div>\n      <PlIcon16 v-if=\"isExpandable\" :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\" name=\"chevron-down\" />\n\n      <div :class=\"$style.title\">\n        <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n      </div>\n\n      <div :class=\"[$style.actions, $style.showOnHover]\">\n        <div\n          v-if=\"props.isToggable\"\n          :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n          @click.stop=\"emit('toggle', props.item, props.index)\"\n        >\n          <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n        </div>\n        <div\n          v-if=\"props.isPinnable\"\n          :class=\"[$style.action, $style.clickable, {\n            [$style.disable]: !props.isPinnable,\n            [$style.activated]: props.isPinned,\n          }]\"\n          @click.stop=\"emit('pin', props.item, props.index)\"\n        >\n          <PlIcon24 name=\"pin\" size=\"16\" />\n        </div>\n        <div\n          v-if=\"props.isRemovable\"\n          :class=\"[$style.action, $style.clickable]\"\n          @click.stop=\"emit('remove', props.item, props.index)\"\n        >\n          <PlIcon16 name=\"close\" />\n        </div>\n      </div>\n    </div>\n    <div\n      v-if=\"hasContentSlot && props.isExpanded\"\n      :class=\"[$style.body, { [$style.disabled]: props.isToggled }]\"\n    >\n      <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n  </div>\n</template>\n\n<style module>\n@use '../../assets/variables.scss' as *;\n\n.root {\n  --background: rgba(255, 255, 255, 0.8);\n  --border-color: var(--color-div-grey);\n  --head-background: unset;\n  --box-shadow: none;\n  --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n  &:global(.sortable-drag),\n  &:global(.sortable-chosen) {\n    --head-background: var(--gradient-light-lime);\n    --border-color: var(--border-color-focus);\n    --box-shadow: var(--box-shadow-active)\n  }\n}\n.root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-radius: var(--border-radius);\n  border: 1px solid var(--border-color);\n  background-color: var(--background);\n  transition: box-shadow 0.15s;\n  box-shadow: var(--box-shadow);;\n  overflow: hidden;\n\n  &:hover {\n    --border-color: var(--border-color-focus);\n  }\n\n  &.disabled {\n    opacity: 0.6;\n    filter: grayscale(1);\n  }\n\n  &.pinned {\n    --background: var(--bg-base-light);\n  }\n\n  &.active {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--btn-accent-positive-500);\n  }\n}\n\n.head {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  min-height: 40px;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  background: var(--head-background);\n\n  &:hover, &.opened {\n    --head-background: var(--gradient-light-lime);\n  }\n}\n\n.contentChevron {\n  display: block;\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s;\n\n  &.opened {\n    transform: rotate(0deg);\n  }\n}\n\n.title {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  gap: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n.actions {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  background-color: var(--background);\n  border-radius: var(--border-radius);\n}\n\n.action {\n  width: 24px;\n  height: 24px;\n  padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n  opacity: 0.6;\n  border-radius: var(--border-radius);\n  transition: all 0.15s;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &:hover {\n    opacity: 1;\n    background-color: var(--bg-elevated-02);\n  }\n\n  &.activated {\n    opacity: 0.8;\n  }\n\n  &.disable {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.clickable {\n  cursor: pointer;\n}\n\n.draggable {\n  cursor: grab;\n}\n\n.showOnHover {\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n  opacity: 1;\n}\n</style>\n"],"names":["props","__props","slots","_useSlots","hasContentSlot","computed","emit","__emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,GAeRC,IAAQC,EAGV,GACEC,IAAiBC,EAAS,MAAMH,EAAM,YAAe,MAAS,GAE9DI,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}