@milaboratories/uikit 2.2.94 → 2.2.96

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

@@ -1,15 +1,15 @@
-import { defineComponent as ce, mergeModels as X, useModel as u, useSlots as ve, computed as g, shallowRef as C, watch as me, createElementBlock as P, openBlock as b, normalizeClass as R, createElementVNode as be, createCommentVNode as ye, Fragment as Y, renderList as Z, createBlock as _, createSlots as ee, withCtx as S, renderSlot as k } from "vue";
-import { isNil as c, shallowHash as te } from "../../lib/util/helpers/dist/index.js";
+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 v, moveElements as ae } from "./utils.js";
-import ne from "./PlElementListItem.vue.js";
-const ke = /* @__PURE__ */ ce({
+import { optionalUpdateRef as m, moveElements as te } from "./utils.js";
+import ae from "./PlElementListItem.vue.js";
+const Ce = /* @__PURE__ */ me({
   __name: "PlElementList",
   props: /* @__PURE__ */ X({
+    getItemKey: {},
     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 },
@@ -41,189 +41,201 @@ const ke = /* @__PURE__ */ ce({
     toggledItemsModifiers: {}
   }),
   emits: /* @__PURE__ */ X(["itemClick"], ["update:items", "update:draggableItems", "update:removableItems", "update:expandableItems", "update:expandedItems", "update:pinnableItems", "update:pinnedItems", "update:toggableItems", "update:toggledItems"]),
-  setup(o, { emit: le }) {
-    const d = u(o, "items"), se = u(o, "draggableItems"), ie = u(o, "removableItems"), oe = u(o, "expandableItems"), y = u(o, "expandedItems"), re = u(o, "pinnableItems"), r = u(o, "pinnedItems"), ue = u(o, "toggableItems"), f = u(o, "toggledItems"), n = o, I = le, T = ve(), D = g(() => n.enableDragging !== !1 && !c(n.getItemKey)), h = g(() => d.value.filter(E)), de = g(() => h.value.length > 0), p = g(() => d.value.filter((e) => !E(e))), $ = g(() => p.value.length > 0), x = C(), w = C(), F = C(), M = g((e) => {
-      const t = te(...d.value);
-      if (x.value === void 0) return e ?? t;
-      const a = te(...x.value);
-      return t === a ? e ?? t : e !== t ? t : a;
+  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;
     });
-    B(de, w, h, () => 0), B($, F, p, () => h.value.length);
-    function B(e, t, a, l) {
-      const s = he(t, a, {
+    F(ue, M, h, () => 0), F(w, p, k, () => h.value.length);
+    function F(a, l, t, e) {
+      const o = he(l, t, {
         handle: '[data-draggable="true"]',
         animation: 150,
         forceFallback: !0,
         fallbackOnBody: !0,
         scrollSensitivity: 80,
         forceAutoScrollFallback: !0,
-        onUpdate: (i) => {
-          var m;
-          if (i.oldIndex == null || i.newIndex == null)
+        onUpdate: (n) => {
+          var d;
+          if (n.oldIndex == null || n.newIndex == null)
             throw new Error("Sortable event has no index");
-          ((m = n.onDragEnd) == null ? void 0 : m.call(n, i.oldIndex, i.newIndex)) !== !1 && A(l() + i.oldIndex, l() + i.newIndex, !0);
+          ((d = s.onDragEnd) == null ? void 0 : d.call(s, n.oldIndex, n.newIndex)) !== !1 && B(e() + n.oldIndex, e() + n.newIndex, !0);
         }
       });
-      return me(e, (i) => i ? s.start() : s.stop()), s;
+      return ve(a, (n) => n ? o.start() : o.stop()), o;
     }
-    function A(e, t, a) {
-      var s;
-      if (e === t) return;
-      a && (x.value = ae(d.value.slice(), e, t)), ((s = n.onSort) == null ? void 0 : s.call(n, e, t)) === !1 || (ae(d.value, e, t), v(d));
+    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(e) {
-      var t;
-      return ((t = n.activeItems) == null ? void 0 : t.has(e)) ?? !1;
+    function A(a, l) {
+      var e;
+      const t = s.getItemKey(a, l);
+      return ((e = s.activeItems) == null ? void 0 : e.has(t)) ?? !1;
     }
-    function H(e) {
-      var t;
-      return n.enableDragging === !1 ? !1 : ((t = se.value) == null ? void 0 : t.has(e)) ?? !0;
+    function H(a, l) {
+      var e;
+      const t = s.getItemKey(a, l);
+      return s.enableDragging === !1 ? !1 : ((e = se.value) == null ? void 0 : e.has(t)) ?? !0;
     }
-    function z(e) {
-      var t;
-      return n.enableToggling === !1 ? !1 : !c(f.value) && (((t = ue.value) == null ? void 0 : t.has(e)) ?? !0);
+    function z(a, 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);
     }
-    function L(e) {
-      var t;
-      return ((t = f.value) == null ? void 0 : t.has(e)) ?? !1;
+    function L(a, l) {
+      var e;
+      const t = s.getItemKey(a, l);
+      return ((e = g.value) == null ? void 0 : e.has(t)) ?? !1;
     }
-    function N(e) {
-      var t;
-      return n.enablePinning === !1 ? !1 : !c(r.value) && (((t = re.value) == null ? void 0 : t.has(e)) ?? !0);
+    function N(a, 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);
     }
-    function E(e) {
-      var t;
-      return ((t = r.value) == null ? void 0 : t.has(e)) ?? !1;
+    function E(a, l) {
+      var e;
+      const t = s.getItemKey(a, l);
+      return ((e = r.value) == null ? void 0 : e.has(t)) ?? !1;
     }
-    function U(e) {
-      var t;
-      return n.enableExpanding === !1 ? !1 : !c(y.value) && (((t = oe.value) == null ? void 0 : t.has(e)) ?? !0);
+    function U(a, 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);
     }
-    function V(e) {
-      var t;
-      return ((t = y.value) == null ? void 0 : t.has(e)) ?? !1;
+    function V(a, l) {
+      var e;
+      const t = s.getItemKey(a, l);
+      return ((e = y.value) == null ? void 0 : e.has(t)) ?? !1;
     }
-    function j(e) {
-      var t;
-      return n.enableRemoving === !1 || ((t = ie.value) == null ? void 0 : t.has(e)) === !1 ? !1 : n.enableRemoving === !0 || typeof n.onRemove == "function";
+    function j(a, 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";
     }
-    function q(e, t) {
-      var l;
-      if (((l = n.onExpand) == null ? void 0 : l.call(n, e, t)) === !1 || c(y.value)) return;
-      const a = y.value;
-      a.has(e) ? a.delete(e) : a.add(e), v(y);
+    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 G(e, t) {
-      var l;
-      if (((l = n.onToggle) == null ? void 0 : l.call(n, e, t)) === !1 || c(f.value)) return;
-      const a = f.value;
-      a.has(e) ? a.delete(e) : a.add(e), v(f);
+    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(e, t) {
-      var s;
-      if (t === -1)
+    function J(a, l) {
+      var n;
+      if (l === -1)
         throw new Error("Pinnable item not found");
-      if (((s = n.onPin) == null ? void 0 : s.call(n, e, t)) === !1 || c(r.value)) return;
-      const a = r.value, l = a.has(e);
-      l ? a.delete(e) : a.add(e), v(r), A(t, a.size + (l ? 0 : -1), !1);
+      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);
     }
-    function O(e, t) {
-      var a, l, s;
-      ((a = n.onRemove) == null ? void 0 : a.call(n, e, t)) !== !1 && (d.value.splice(t, 1), v(d), (l = r.value) != null && l.has(e) && (r.value.delete(e), v(r)), (s = f.value) != null && s.has(e) && (f.value.delete(e), v(f)));
+    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));
+      }
     }
-    const Q = (e, t) => c(n.getItemKey) ? `${M.value}-${t}` : `${M.value}-${n.getItemKey(e)}`, fe = g(() => h.value.map(Q)), ge = g(() => p.value.map(Q)), W = (e, t) => typeof n.itemClass == "function" ? n.itemClass(e, t) : n.itemClass ?? null;
-    return (e, t) => (b(), P("div", {
-      class: R(e.$style.root)
+    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)
     }, [
       be("div", {
         ref_key: "pinnedContainerRef",
-        ref: w,
-        class: R(e.$style.list)
+        ref: M,
+        class: R(a.$style.list)
       }, [
-        (b(!0), P(Y, null, Z(h.value, (a, l) => (b(), _(ne, {
-          key: fe.value[l],
-          class: R([e.$style.item, W(a, l)]),
-          index: l,
-          item: a,
-          showDragHandle: D.value,
-          isActive: K(a),
-          isDraggable: H(a),
-          isRemovable: j(a),
-          isToggable: z(a),
-          isToggled: L(a),
-          isPinnable: N(a),
-          isPinned: E(a),
-          isExpandable: U(a),
-          isExpanded: V(a),
-          onClick: (s) => I("itemClick", a),
+        (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
-        }, ee({
-          title: S(({ item: s, index: i }) => [
-            k(e.$slots, "item-title", {
-              index: i,
-              item: s
+        }, _({
+          title: S(({ item: o, index: n }) => [
+            C(a.$slots, "item-title", {
+              index: n,
+              item: o
             })
           ]),
           _: 2
         }, [
-          T["item-content"] ? {
+          I["item-content"] ? {
             name: "content",
-            fn: S(({ item: s, index: i }) => [
-              k(e.$slots, "item-content", {
-                index: i,
-                item: s
+            fn: S(({ item: o, index: n }) => [
+              C(a.$slots, "item-content", {
+                index: n,
+                item: o
               })
             ]),
             key: "0"
           } : void 0
         ]), 1032, ["class", "index", "item", "showDragHandle", "isActive", "isDraggable", "isRemovable", "isToggable", "isToggled", "isPinnable", "isPinned", "isExpandable", "isExpanded", "onClick"]))), 128))
       ], 2),
-      $.value ? (b(), P("div", {
+      w.value ? (v(), P("div", {
         key: 0,
         ref_key: "unpinnedContainerRef",
-        ref: F,
-        class: R(e.$style.list)
+        ref: p,
+        class: R(a.$style.list)
       }, [
-        (b(!0), P(Y, null, Z(p.value, (a, l) => {
-          var s;
-          return b(), _(ne, {
-            key: ge.value[l],
-            class: R([e.$style.item, W(a, l)]),
-            index: l + (((s = r.value) == null ? void 0 : s.size) ?? 0),
-            item: a,
-            showDragHandle: D.value,
-            isActive: K(a),
-            isDraggable: H(a),
-            isRemovable: j(a),
-            isToggable: z(a),
-            isToggled: L(a),
-            isPinnable: N(a),
-            isPinned: E(a),
-            isExpandable: U(a),
-            isExpanded: V(a),
-            onClick: (i) => I("itemClick", a),
+        (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
-          }, ee({
-            title: S(({ item: i, index: m }) => [
-              k(e.$slots, "item-title", {
-                index: m,
-                item: i
+          }, _({
+            title: S(({ item: n, index: d }) => [
+              C(a.$slots, "item-title", {
+                index: d,
+                item: n
               })
             ]),
             _: 2
           }, [
-            T["item-content"] ? {
+            I["item-content"] ? {
               name: "content",
-              fn: S(({ item: i, index: m }) => [
-                k(e.$slots, "item-content", {
-                  index: m,
-                  item: i
+              fn: S(({ item: n, index: d }) => [
+                C(a.$slots, "item-content", {
+                  index: d,
+                  item: n
                 })
               ]),
               key: "0"
@@ -235,6 +247,6 @@ const ke = /* @__PURE__ */ ce({
   }
 });
 export {
-  ke as default
+  Ce 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<T>>('draggableItems');\nconst removableSetRef = defineModel<Set<T>>('removableItems');\n\nconst expandableSetRef = defineModel<Set<T>>('expandableItems');\nconst expandedSetRef = defineModel<Set<T>>('expandedItems');\n\nconst pinnableSetRef = defineModel<Set<T>>('pinnableItems');\nconst pinnedSetRef = defineModel<Set<T>>('pinnedItems');\n\nconst toggableSetRef = defineModel<Set<T>>('toggableItems');\nconst toggledSetRef = defineModel<Set<T>>('toggledItems');\n\nconst props = withDefaults(\n  defineProps<{\n    itemClass?: string | string[] | ((item: T, index: number) => string | string[]);\n    activeItems?: Set<T>;\n\n    enableDragging?: boolean;\n    getItemKey?: (item: T) => K;\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    getItemKey: undefined,\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 && !isNil(props.getItemKey);\n});\n\nconst pinnedItemsRef = computed(() => itemsRef.value.filter(isPinned));\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() => itemsRef.value.filter((item) => !isPinned(item)));\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);\n\n  if (domProjectionItemsRef.value === undefined) return oldVersion ?? currentVersion;\n\n  const lastSortedVersion = shallowHash(...domProjectionItemsRef.value);\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): boolean {\n  return props.activeItems?.has(item) ?? false;\n}\n\nfunction isDraggable(item: T): boolean {\n  if (props.enableDragging === false) return false;\n  return (draggableSetRef.value?.has(item) ?? true);\n}\n\nfunction isToggable(item: T): boolean {\n  if (props.enableToggling === false) return false;\n  return !isNil(toggledSetRef.value) && (toggableSetRef.value?.has(item) ?? true);\n}\n\nfunction isToggled(item: T): boolean {\n  return toggledSetRef.value?.has(item) ?? false;\n}\n\nfunction isPinnable(item: T): boolean {\n  if (props.enablePinning === false) return false;\n  return !isNil(pinnedSetRef.value) && (pinnableSetRef.value?.has(item) ?? true);\n}\n\nfunction isPinned(item: T): boolean {\n  return pinnedSetRef.value?.has(item) ?? false;\n}\n\nfunction isExpandable(item: T): boolean {\n  if (props.enableExpanding === false) return false;\n  return !isNil(expandedSetRef.value) && (expandableSetRef.value?.has(item) ?? true);\n}\n\nfunction isExpanded(item: T): boolean {\n  return expandedSetRef.value?.has(item) ?? false;\n}\n\nfunction isRemovable(item: T): boolean {\n  if (props.enableRemoving === false) return false;\n  if (removableSetRef.value?.has(item) === 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\n  const expanded = expandedSetRef.value;\n  if (expanded.has(item)) expanded.delete(item);\n  else expanded.add(item);\n  optionalUpdateRef(expandedSetRef);\n}\n\nfunction handleToggle(item: T, index: number) {\n  if (props.onToggle?.(item, index) === false || isNil(toggledSetRef.value)) return;\n\n  const toggled = toggledSetRef.value;\n  if (toggled.has(item)) toggled.delete(item);\n  else toggled.add(item);\n  optionalUpdateRef(toggledSetRef);\n}\n\nfunction handlePin(item: T, oldIndex: number) {\n  if (oldIndex === -1) {\n    throw new Error('Pinnable item not found');\n  }\n\n  if (props.onPin?.(item, oldIndex) === false || isNil(pinnedSetRef.value)) return;\n\n  const pinned = pinnedSetRef.value;\n  const alreadyPinned = pinned.has(item);\n  if (alreadyPinned) pinned.delete(item);\n  else pinned.add(item);\n  optionalUpdateRef(pinnedSetRef);\n  moveItems(oldIndex, pinned.size + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n  if (props.onRemove?.(item, index) !== false) {\n    itemsRef.value.splice(index, 1);\n    optionalUpdateRef(itemsRef);\n\n    if (pinnedSetRef.value?.has(item)) {\n      pinnedSetRef.value.delete(item);\n      optionalUpdateRef(pinnedSetRef);\n    }\n\n    if (toggledSetRef.value?.has(item)) {\n      toggledSetRef.value.delete(item);\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  if (isNil(props.getItemKey)) return `${versionRef.value}-${index}`;\n  return `${versionRef.value}-${props.getItemKey(item)}`;\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)\"\n        :isDraggable=\"isDraggable(pinnedItem)\"\n        :isRemovable=\"isRemovable(pinnedItem)\"\n        :isToggable=\"isToggable(pinnedItem)\"\n        :isToggled=\"isToggled(pinnedItem)\"\n        :isPinnable=\"isPinnable(pinnedItem)\"\n        :isPinned=\"isPinned(pinnedItem)\"\n        :isExpandable=\"isExpandable(pinnedItem)\"\n        :isExpanded=\"isExpanded(pinnedItem)\"\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)\"\n        :isDraggable=\"isDraggable(unpinnedItem)\"\n        :isRemovable=\"isRemovable(unpinnedItem)\"\n        :isToggable=\"isToggable(unpinnedItem)\"\n        :isToggled=\"isToggled(unpinnedItem)\"\n        :isPinnable=\"isPinnable(unpinnedItem)\"\n        :isPinned=\"isPinned(unpinnedItem)\"\n        :isExpandable=\"isExpandable(unpinnedItem)\"\n        :isExpanded=\"isExpanded(unpinnedItem)\"\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","isNil","pinnedItemsRef","isPinned","hasPinnedItems","unpinnedItemsRef","item","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","isDraggable","isToggable","isToggled","isPinnable","isExpandable","isExpanded","isRemovable","handleExpand","index","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 { 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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"}

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  gap: 8px;\n  max-width: calc(100% - 50px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\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 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,39 +1,39 @@
-(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode('@use "../../assets/variables.scss" as *;._root_lt147_4{--background: rgba(255, 255, 255, .8);--border-color: var(--color-div-grey);--head-background: unset;--box-shadow: none;--box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent)}._root_lt147_4.sortable-drag,._root_lt147_4.sortable-chosen{--head-background: var(--gradient-light-lime);--border-color: var(--border-color-focus);--box-shadow: var(--box-shadow-active) }._root_lt147_4{display:flex;flex-direction:column;justify-content:center;border-radius:var(--border-radius);border:1px solid var(--border-color);background-color:var(--background);transition:box-shadow .15s;box-shadow:var(--box-shadow);overflow:hidden}._root_lt147_4:hover{--border-color: var(--border-color-focus)}._root_lt147_4._disabled_lt147_33{opacity:.6;filter:grayscale(1)}._root_lt147_4._pinned_lt147_38{--background: var(--bg-base-light)}._root_lt147_4._active_lt147_42{--border-color: var(--border-color-focus);--head-background: var(--btn-accent-positive-500)}._head_lt147_48{position:relative;display:flex;align-items:center;padding:8px;border-radius:var(--border-radius) var(--border-radius) 0 0;background:var(--head-background)}._head_lt147_48:hover,._head_lt147_48._opened_lt147_56{--head-background: var(--gradient-light-lime)}._contentChevron_lt147_61{display:block;width:16px;height:16px;margin-right:4px;transform:rotate(-90deg);transition:transform .15s}._contentChevron_lt147_61._opened_lt147_56{transform:rotate(0)}._title_lt147_74{display:flex;flex-direction:row;gap:8px;max-width:calc(100% - 50px);overflow:hidden;text-overflow:ellipsis}._body_lt147_83{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:0 0 var(--border-radius) var(--border-radius)}._actions_lt147_91{position:absolute;top:8px;right:8px;display:flex;align-items:center;background-color:var(--background);border-radius:var(--border-radius)}._action_lt147_91{width:24px;height:24px;padding:4px;opacity:.6;border-radius:var(--border-radius);transition:all .15s}._action_lt147_91 svg{width:16px;height:16px}._action_lt147_91:hover{opacity:1;background-color:var(--bg-elevated-02)}._action_lt147_91._activated_lt147_119{opacity:.8}._action_lt147_91._disable_lt147_33{cursor:not-allowed;opacity:.4}._clickable_lt147_129{cursor:pointer}._draggable_lt147_133{cursor:grab}._showOnHover_lt147_137{opacity:0;transition:opacity .15s}._root_lt147_4:hover ._showOnHover_lt147_137{opacity:1}')),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-const t = "_root_lt147_4", o = "_disabled_lt147_33", _ = "_pinned_lt147_38", e = "_active_lt147_42", n = "_head_lt147_48", c = "_opened_lt147_56", l = "_contentChevron_lt147_61", a = "_title_lt147_74", s = "_body_lt147_83", d = "_actions_lt147_91", i = "_action_lt147_91", b = "_activated_lt147_119", r = "_disable_lt147_33", v = "_clickable_lt147_129", h = "_draggable_lt147_133", p = "_showOnHover_lt147_137", g = {
-  root: t,
-  disabled: o,
-  pinned: _,
-  active: e,
-  head: n,
+(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode('@use "../../assets/variables.scss" as *;._root_1n01w_4{--background: rgba(255, 255, 255, .8);--border-color: var(--color-div-grey);--head-background: unset;--box-shadow: none;--box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent)}._root_1n01w_4.sortable-drag,._root_1n01w_4.sortable-chosen{--head-background: var(--gradient-light-lime);--border-color: var(--border-color-focus);--box-shadow: var(--box-shadow-active) }._root_1n01w_4{display:flex;flex-direction:column;justify-content:center;border-radius:var(--border-radius);border:1px solid var(--border-color);background-color:var(--background);transition:box-shadow .15s;box-shadow:var(--box-shadow);overflow:hidden}._root_1n01w_4:hover{--border-color: var(--border-color-focus)}._root_1n01w_4._disabled_1n01w_33{opacity:.6;filter:grayscale(1)}._root_1n01w_4._pinned_1n01w_38{--background: var(--bg-base-light)}._root_1n01w_4._active_1n01w_42{--border-color: var(--border-color-focus);--head-background: var(--btn-accent-positive-500)}._head_1n01w_48{position:relative;display:flex;align-items:center;padding:8px;border-radius:var(--border-radius) var(--border-radius) 0 0;background:var(--head-background)}._head_1n01w_48:hover,._head_1n01w_48._opened_1n01w_56{--head-background: var(--gradient-light-lime)}._contentChevron_1n01w_61{display:block;width:16px;height:16px;margin-right:4px;transform:rotate(-90deg);transition:transform .15s}._contentChevron_1n01w_61._opened_1n01w_56{transform:rotate(0)}._title_1n01w_74{display:flex;flex-direction:row;flex:1 1 0;gap:8px;overflow:hidden;text-overflow:ellipsis}._body_1n01w_83{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:0 0 var(--border-radius) var(--border-radius)}._actions_1n01w_91{position:absolute;top:8px;right:8px;display:flex;align-items:center;background-color:var(--background);border-radius:var(--border-radius)}._action_1n01w_91{width:24px;height:24px;padding:4px;opacity:.6;border-radius:var(--border-radius);transition:all .15s}._action_1n01w_91 svg{width:16px;height:16px}._action_1n01w_91:hover{opacity:1;background-color:var(--bg-elevated-02)}._action_1n01w_91._activated_1n01w_119{opacity:.8}._action_1n01w_91._disable_1n01w_33{cursor:not-allowed;opacity:.4}._clickable_1n01w_129{cursor:pointer}._draggable_1n01w_133{cursor:grab}._showOnHover_1n01w_137{opacity:0;transition:opacity .15s}._root_1n01w_4:hover ._showOnHover_1n01w_137{opacity:1}')),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+const n = "_root_1n01w_4", t = "_disabled_1n01w_33", o = "_pinned_1n01w_38", _ = "_active_1n01w_42", e = "_head_1n01w_48", c = "_opened_1n01w_56", a = "_contentChevron_1n01w_61", s = "_title_1n01w_74", d = "_body_1n01w_83", i = "_actions_1n01w_91", l = "_action_1n01w_91", w = "_activated_1n01w_119", b = "_disable_1n01w_33", r = "_clickable_1n01w_129", v = "_draggable_1n01w_133", h = "_showOnHover_1n01w_137", p = {
+  root: n,
+  disabled: t,
+  pinned: o,
+  active: _,
+  head: e,
   opened: c,
-  contentChevron: l,
-  title: a,
-  body: s,
-  actions: d,
-  action: i,
-  activated: b,
-  disable: r,
-  clickable: v,
-  draggable: h,
-  showOnHover: p
+  contentChevron: a,
+  title: s,
+  body: d,
+  actions: i,
+  action: l,
+  activated: w,
+  disable: b,
+  clickable: r,
+  draggable: v,
+  showOnHover: h
 };
 export {
-  i as action,
-  d as actions,
-  b as activated,
-  e as active,
-  s as body,
-  v as clickable,
-  l as contentChevron,
-  g as default,
-  r as disable,
-  o as disabled,
-  h as draggable,
-  n as head,
+  l as action,
+  i as actions,
+  w as activated,
+  _ as active,
+  d as body,
+  r as clickable,
+  a as contentChevron,
+  p as default,
+  b as disable,
+  t as disabled,
+  v as draggable,
+  e as head,
   c as opened,
-  _ as pinned,
-  t as root,
-  p as showOnHover,
-  a as title
+  o as pinned,
+  n as root,
+  h as showOnHover,
+  s as title
 };
 //# sourceMappingURL=PlElementListItem.vue3.js.map