@milaboratories/uikit 2.6.0 → 2.6.2

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

@@ -1,13 +1,17 @@
-import { defineComponent as ae, mergeModels as Q, useModel as ne, useSlots as oe, computed as u, shallowRef as R, watch as se, createElementBlock as y, openBlock as f, normalizeClass as d, createElementVNode as re, createCommentVNode as ue, 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 "@milaboratories/helpers";
-import { useSortable as ce } from "@vueuse/integrations/useSortable";
-import x from "./PlElementListItem.vue.js";
-import { moveElements as _ } from "./utils.js";
-const be = /* @__PURE__ */ ae({
+import { defineComponent as ue, mergeModels as x, useModel as ce, useSlots as ge, computed as u, shallowRef as R, watch as me, createElementBlock as F, openBlock as v, normalizeClass as C, createElementVNode as ve, createCommentVNode as de, Fragment as I, renderList as p, createBlock as ee, unref as r, createSlots as te, withCtx as c, renderSlot as g } from "vue";
+import { shallowHash as T, isFunction as d } from "@milaboratories/helpers";
+import { useSortable as be } from "@vueuse/integrations/useSortable";
+import ae from "./PlElementListItem.vue.js";
+import { moveElements as le } from "./utils.js";
+const Fe = /* @__PURE__ */ ue({
   __name: "PlElementList",
-  props: /* @__PURE__ */ Q({
-    getItemKey: { type: Function, default: (m) => JSON.stringify(m) },
+  props: /* @__PURE__ */ x({
+    getItemKey: { type: Function, default: (E) => JSON.stringify(E) },
     itemClass: { type: [String, Array, Function], default: void 0 },
+    itemClassTitle: { type: [String, Array, Function], default: void 0 },
+    itemClassBefore: { type: [String, Array, Function], default: void 0 },
+    itemClassAfter: { type: [String, Array, Function], default: void 0 },
+    itemClassContent: { type: [String, Array, Function], default: void 0 },
     isActive: { type: Function, default: void 0 },
     disableDragging: { type: Boolean, default: void 0 },
     isDraggable: { type: Function, default: void 0 },
@@ -32,206 +36,247 @@ const be = /* @__PURE__ */ ae({
     items: { required: !0 },
     itemsModifiers: {}
   }),
-  emits: /* @__PURE__ */ Q(["itemClick"], ["update:items"]),
-  setup(m, { emit: I }) {
-    const c = ne(m, "items"), t = m, T = I, F = oe(), 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);
+  emits: /* @__PURE__ */ x(["itemClick"], ["update:items"]),
+  setup(E, { emit: ie }) {
+    const m = ce(E, "items"), t = E, k = ie, b = ge(), D = u(() => t.disableDragging !== !0), f = u(() => m.value.filter(q)), oe = u(() => f.value.length > 0), h = u(() => m.value.filter((a, l) => !q(a, l))), S = u(() => h.value.length > 0), P = R(), A = R(), $ = R(), w = (a, l) => `${re.value}-${t.getItemKey(a, l)}`, se = u(() => f.value.map(w)), ne = u(() => h.value.map(w)), re = u((a) => {
+      const l = m.value.map(t.getItemKey);
+      if (P.value === void 0) return a ?? T(...l);
+      if (l.length !== P.value.length) return T(...l);
+      const e = P.value.map(t.getItemKey), i = new Set(e);
+      for (let o = 0; o < l.length; o++)
+        if (i.has(l[o]) && e[o] !== l[o])
+          return T(...l);
+      return a ?? T(...l);
     });
-    $(p, D, s, () => 0), $(C, S, v, () => s.value.length);
-    function $(i, l, e, a) {
-      const n = ce(l, e, {
+    B(oe, A, f, () => 0), B(S, $, h, () => f.value.length);
+    function B(a, l, e, i) {
+      const o = be(l, e, {
         handle: '[data-draggable="true"]',
         animation: 150,
         forceFallback: !0,
         fallbackOnBody: !0,
         scrollSensitivity: 80,
         forceAutoScrollFallback: !0,
-        onUpdate: (o) => {
-          var r;
-          if (o.oldIndex == null || o.newIndex == null)
+        onUpdate: (s) => {
+          var n;
+          if (s.oldIndex == null || s.newIndex == null)
             throw new Error("Sortable event has no index");
-          ((r = t.onDragEnd) == null ? void 0 : r.call(t, o.oldIndex, o.newIndex)) !== !1 && K(a() + o.oldIndex, a() + o.newIndex, !0);
+          ((n = t.onDragEnd) == null ? void 0 : n.call(t, s.oldIndex, s.newIndex)) !== !1 && K(i() + s.oldIndex, i() + s.newIndex, !0);
         }
       });
-      return se(
-        [l, () => t.disableDragging, i],
-        ([o, r, le]) => {
-          !o || r || !le ? n.stop() : n.start();
+      return me(
+        [l, () => t.disableDragging, a],
+        ([s, n, fe]) => {
+          !s || n || !fe ? o.stop() : o.start();
         },
         { immediate: !0 }
-      ), n;
+      ), o;
     }
-    function K(i, l, e) {
-      var n;
-      if (i === l) return;
-      e && (b.value = _(c.value.slice(), i, l)), ((n = t.onSort) == null ? void 0 : n.call(t, i, l)) === !1 || _(c.value, i, l);
+    function K(a, l, e) {
+      var o;
+      if (a === l) return;
+      e && (P.value = le(m.value.slice(), a, l)), ((o = t.onSort) == null ? void 0 : o.call(t, a, l)) === !1 || le(m.value, a, l);
     }
-    function A(i, l) {
+    function H(a, l) {
       var e;
-      return ((e = t.isActive) == null ? void 0 : e.call(t, i, l)) ?? !1;
+      return ((e = t.isActive) == null ? void 0 : e.call(t, a, l)) ?? !1;
     }
-    function B(i, l) {
+    function j(a, l) {
       var e;
-      return t.disableDragging === !0 ? !1 : ((e = t.isDraggable) == null ? void 0 : e.call(t, i, l)) ?? !0;
+      return t.disableDragging === !0 ? !1 : ((e = t.isDraggable) == null ? void 0 : e.call(t, a, l)) ?? !0;
     }
-    function H(i, l) {
+    function L(a, l) {
       var e;
-      return t.disableRemoving === !0 ? !1 : ((e = t.isRemovable) == null ? void 0 : e.call(t, i, l)) ?? !0;
+      return t.disableRemoving === !0 ? !1 : ((e = t.isRemovable) == null ? void 0 : e.call(t, a, l)) ?? !0;
     }
-    function j(i, l) {
+    function M(a, l) {
       var e;
-      return t.disableToggling === !0 ? !1 : ((e = t.isToggable) == null ? void 0 : e.call(t, i, l)) ?? (g(t.isToggled) || g(t.onToggle));
+      return t.disableToggling === !0 ? !1 : ((e = t.isToggable) == null ? void 0 : e.call(t, a, l)) ?? (d(t.isToggled) || d(t.onToggle));
     }
-    function L(i, l) {
+    function N(a, l) {
       var e;
-      return ((e = t.isToggled) == null ? void 0 : e.call(t, i, l)) ?? !1;
+      return ((e = t.isToggled) == null ? void 0 : e.call(t, a, l)) ?? !1;
     }
-    function M(i, l) {
+    function U(a, l) {
       var e;
-      return t.disablePinning === !0 ? !1 : ((e = t.isPinnable) == null ? void 0 : e.call(t, i, l)) ?? (g(t.isPinned) || g(t.onPin));
+      return t.disablePinning === !0 ? !1 : ((e = t.isPinnable) == null ? void 0 : e.call(t, a, l)) ?? (d(t.isPinned) || d(t.onPin));
     }
-    function N(i, l) {
+    function q(a, l) {
       var e;
-      return ((e = t.isPinned) == null ? void 0 : e.call(t, i, l)) ?? !1;
+      return ((e = t.isPinned) == null ? void 0 : e.call(t, a, l)) ?? !1;
     }
-    function U(i, l) {
+    function z(a, l) {
       var e;
-      return t.disableExpanding === !0 ? !1 : ((e = t.isExpandable) == null ? void 0 : e.call(t, i, l)) ?? (g(t.isExpanded) || g(t.onExpand));
+      return t.disableExpanding === !0 ? !1 : ((e = t.isExpandable) == null ? void 0 : e.call(t, a, l)) ?? (d(t.isExpanded) || d(t.onExpand));
     }
-    function q(i, l) {
+    function J(a, l) {
       var e;
-      return ((e = t.isExpanded) == null ? void 0 : e.call(t, i, l)) ?? !1;
+      return ((e = t.isExpanded) == null ? void 0 : e.call(t, a, l)) ?? !1;
     }
-    function z(i, l) {
+    function O(a, l) {
       var e;
-      (e = t.onExpand) == null || e.call(t, i, l);
+      (e = t.onExpand) == null || e.call(t, a, l);
     }
-    function J(i, l) {
+    function V(a, l) {
       var e;
-      (e = t.onToggle) == null || e.call(t, i, l);
+      (e = t.onToggle) == null || e.call(t, a, l);
     }
-    function O(i, l) {
-      var a;
+    function G(a, l) {
+      var i;
       if (l === -1)
         throw new Error("Pinnable item not found");
-      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);
+      const e = f.value.includes(a);
+      ((i = t.onPin) == null ? void 0 : i.call(t, a, l)) !== !1 && K(l, f.value.length + (e ? 0 : -1), !1);
     }
-    function V(i, l) {
+    function Q(a, l) {
       var e;
-      ((e = t.onRemove) == null ? void 0 : e.call(t, i, l)) !== !1 && c.value.splice(l, 1);
+      ((e = t.onRemove) == null ? void 0 : e.call(t, a, l)) !== !1 && m.value.splice(l, 1);
+    }
+    function y(a) {
+      return (l, e) => typeof a == "function" ? a(l, e) : a ?? null;
     }
-    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)
+    const W = y(t.itemClass), X = y(t.itemClassTitle), Y = y(t.itemClassContent), Z = y(t.itemClassBefore), _ = y(t.itemClassAfter);
+    return (a, l) => (v(), F("div", {
+      class: C(a.$style.root)
     }, [
-      re("div", {
+      ve("div", {
         ref_key: "pinnedContainerRef",
-        ref: D,
-        class: d(i.$style.list)
+        ref: A,
+        class: C(a.$style.list)
       }, [
-        (f(!0), y(W, null, X(s.value, (e, a) => (f(), Y(x, {
-          key: ee.value[a],
-          class: d([i.$style.item, G(e, a)]),
-          index: a,
+        (v(!0), F(I, null, p(f.value, (e, i) => (v(), ee(ae, {
+          key: se.value[i],
+          class: C([a.$style.item, r(W)(e, i)]),
+          titleClass: r(X)(e, i),
+          contentClass: r(Y)(e, i),
+          beforeClass: r(Z)(e, i),
+          afterClass: r(_)(e, i),
+          index: i,
           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),
+          showDragHandle: D.value,
+          isActive: H(e, i),
+          isDraggable: j(e, i),
+          isRemovable: L(e, i),
+          isToggable: M(e, i),
+          isToggled: N(e, i),
+          isPinnable: U(e, i),
           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
+          isExpandable: z(e, i),
+          isExpanded: J(e, i),
+          onClick: (o) => k("itemClick", e),
+          onRemove: Q,
+          onToggle: V,
+          onPin: G,
+          onExpand: O
+        }, te({
+          title: c(({ item: o, index: s }) => [
+            g(a.$slots, "item-title", {
+              index: s,
+              item: o
             })
           ]),
           _: 2
         }, [
-          F["item-content"] ? {
-            name: "content",
-            fn: E(({ item: n, index: o }) => [
-              h(i.$slots, "item-content", {
-                index: o,
-                item: n
+          b["item-before"] ? {
+            name: "before",
+            fn: c(({ item: o, index: s }) => [
+              g(a.$slots, "item-before", {
+                index: s,
+                item: o
               })
             ]),
             key: "0"
+          } : void 0,
+          b["item-content"] ? {
+            name: "content",
+            fn: c(({ item: o, index: s }) => [
+              g(a.$slots, "item-content", {
+                index: s,
+                item: o
+              })
+            ]),
+            key: "1"
+          } : void 0,
+          b["item-after"] ? {
+            name: "after",
+            fn: c(({ item: o, index: s }) => [
+              g(a.$slots, "item-after", {
+                index: s,
+                item: o
+              })
+            ]),
+            key: "2"
           } : void 0
-        ]), 1032, ["class", "index", "item", "showDragHandle", "isActive", "isDraggable", "isRemovable", "isToggable", "isToggled", "isPinnable", "isExpandable", "isExpanded", "onClick"]))), 128))
+        ]), 1032, ["class", "titleClass", "contentClass", "beforeClass", "afterClass", "index", "item", "showDragHandle", "isActive", "isDraggable", "isRemovable", "isToggable", "isToggled", "isPinnable", "isExpandable", "isExpanded", "onClick"]))), 128))
       ], 2),
-      C.value ? (f(), y("div", {
+      S.value ? (v(), F("div", {
         key: 0,
         ref_key: "unpinnedContainerRef",
-        ref: S,
-        class: d(i.$style.list)
+        ref: $,
+        class: C(a.$style.list)
       }, [
-        (f(!0), y(W, null, X(v.value, (e, a) => {
-          var n;
-          return f(), Y(x, {
-            key: te.value[a],
-            class: d([i.$style.item, G(e, a)]),
-            index: a + (((n = s.value) == null ? void 0 : n.length) ?? 0),
+        (v(!0), F(I, null, p(h.value, (e, i) => {
+          var o;
+          return v(), ee(ae, {
+            key: ne.value[i],
+            class: C([a.$style.item, r(W)(e, i)]),
+            titleClass: r(X)(e, i),
+            contentClass: r(Y)(e, i),
+            beforeClass: r(Z)(e, i),
+            afterClass: r(_)(e, i),
+            index: i + (((o = f.value) == null ? void 0 : o.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),
+            showDragHandle: D.value,
+            isActive: H(e, i),
+            isDraggable: j(e, i),
+            isRemovable: L(e, i),
+            isToggable: M(e, i),
+            isToggled: N(e, i),
+            isPinnable: U(e, i),
             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
+            isExpandable: z(e, i),
+            isExpanded: J(e, i),
+            onClick: (s) => k("itemClick", e),
+            onRemove: Q,
+            onToggle: V,
+            onPin: G,
+            onExpand: O
+          }, te({
+            title: c(({ item: s, index: n }) => [
+              g(a.$slots, "item-title", {
+                index: n,
+                item: s
               })
             ]),
             _: 2
           }, [
-            F["item-content"] ? {
+            b["item-content"] ? {
               name: "content",
-              fn: E(({ item: o, index: r }) => [
-                h(i.$slots, "item-content", {
-                  index: r,
-                  item: o
+              fn: c(({ item: s, index: n }) => [
+                g(a.$slots, "item-content", {
+                  index: n,
+                  item: s
                 })
               ]),
               key: "0"
+            } : void 0,
+            b["item-after"] ? {
+              name: "after",
+              fn: c(({ item: s, index: n }) => [
+                g(a.$slots, "item-after", {
+                  index: n,
+                  item: s
+                })
+              ]),
+              key: "1"
             } : void 0
-          ]), 1032, ["class", "index", "item", "showDragHandle", "isActive", "isDraggable", "isRemovable", "isToggable", "isToggled", "isPinnable", "isExpandable", "isExpanded", "onClick"]);
+          ]), 1032, ["class", "titleClass", "contentClass", "beforeClass", "afterClass", "index", "item", "showDragHandle", "isActive", "isDraggable", "isRemovable", "isToggable", "isToggled", "isPinnable", "isExpandable", "isExpanded", "onClick"]);
         }), 128))
-      ], 2)) : ue("", !0)
+      ], 2)) : de("", !0)
     ], 2));
   }
 });
 export {
-  be as default
+  Fe 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 { isFunction, shallowHash } from '@milaboratories/helpers';\nimport { useSortable } from '@vueuse/integrations/useSortable';\nimport { type SortableEvent } from 'sortablejs';\nimport type { ShallowRef } from 'vue';\nimport { computed, shallowRef, watch } from 'vue';\nimport PlElementListItem from './PlElementListItem.vue';\nimport { moveElements } from './utils.ts';\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(\n    [elRef, () => props.disableDragging, toggler],\n    ([elRef, disabled, on]) => {\n      if (!elRef || disabled || !on) {\n        sortable.stop();\n      } else {\n        sortable.start();\n      }\n    },\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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"}
+{"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 { isFunction, shallowHash } from '@milaboratories/helpers';\nimport { useSortable } from '@vueuse/integrations/useSortable';\nimport { type SortableEvent } from 'sortablejs';\nimport type { ShallowRef } from 'vue';\nimport { computed, shallowRef, watch } from 'vue';\nimport PlElementListItem from './PlElementListItem.vue';\nimport { moveElements } from './utils.ts';\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    itemClassTitle?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassBefore?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassAfter?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassContent?: 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    itemClassTitle: undefined,\n    itemClassContent: undefined,\n    itemClassBefore: undefined,\n    itemClassAfter: 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  ['item-before']?: (props: { item: T; index: number }) => unknown;\n  ['item-after']?: (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(\n    [elRef, () => props.disableDragging, toggler],\n    ([elRef, disabled, on]) => {\n      if (!elRef || disabled || !on) {\n        sortable.stop();\n      } else {\n        sortable.start();\n      }\n    },\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\nfunction getClassFunction(propsItemClass: string | string[] | ((item: T, index: number) => string | string[]) | undefined): (item: T, index: number) => null | string | string[] {\n  return (item: T, index: number): null | string | string[] => {\n    if (typeof propsItemClass === 'function') {\n      return propsItemClass(item, index);\n    }\n    return propsItemClass ?? null;\n  };\n}\nconst getItemClass = getClassFunction(props.itemClass);\nconst getItemClassTitle = getClassFunction(props.itemClassTitle);\nconst getItemClassContent = getClassFunction(props.itemClassContent);\nconst getItemClassBefore = getClassFunction(props.itemClassBefore);\nconst getItemClassAfter = getClassFunction(props.itemClassAfter);\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        :titleClass=\"getItemClassTitle(pinnedItem, pinnedIndex)\"\n        :contentClass=\"getItemClassContent(pinnedItem, pinnedIndex)\"\n        :beforeClass=\"getItemClassBefore(pinnedItem, pinnedIndex)\"\n        :afterClass=\"getItemClassAfter(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 v-if=\"slots['item-before']\" #before=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-before\" />\n        </template>\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        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\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        :titleClass=\"getItemClassTitle(unpinnedItem, unpinnedIndex)\"\n        :contentClass=\"getItemClassContent(unpinnedItem, unpinnedIndex)\"\n        :beforeClass=\"getItemClassBefore(unpinnedItem, unpinnedIndex)\"\n        :afterClass=\"getItemClassAfter(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        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\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","getClassFunction","propsItemClass","getItemClass","getItemClassTitle","getItemClassContent","getItemClassBefore","getItemClassAfter"],"mappings":"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"}

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

@@ -17,6 +17,10 @@ declare const _default: <T extends unknown = unknown>(__VLS_props: NonNullable<A
         isToggled: boolean;
         isPinnable: boolean;
         isPinned: boolean;
+        titleClass: string | string[] | null;
+        contentClass: string | string[] | null;
+        afterClass: string | string[] | null;
+        beforeClass: string | string[] | null;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
@@ -29,6 +33,14 @@ declare const _default: <T extends unknown = unknown>(__VLS_props: NonNullable<A
             item: T;
             index: number;
         }) => unknown;
+        after?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        before?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
     }> & {
         title: (props: {
             item: T;
@@ -38,6 +50,14 @@ declare const _default: <T extends unknown = unknown>(__VLS_props: NonNullable<A
             item: T;
             index: number;
         }) => unknown;
+        after?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        before?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
     };
     emit: {
         (e: "expand", item: T, index: number): void;