@milaboratories/uikit 2.6.1 → 2.6.3

package/dist/components/PlEditableTitle/PlEditableTitle.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as L, mergeModels as M, useModel as k, ref as w, computed as E, onMounted as V, createElementBlock as s, openBlock as u, normalizeStyle as b, normalizeClass as d, unref as o, createElementVNode as c, createCommentVNode as h, withDirectives as C, toDisplayString as g, withKeys as v, vModelText as T } from "vue";
+import { defineComponent as L, mergeModels as M, useModel as k, ref as w, computed as E, onMounted as V, createElementBlock as u, openBlock as d, normalizeStyle as b, normalizeClass as m, unref as t, createElementVNode as p, createCommentVNode as h, withDirectives as C, toDisplayString as g, withKeys as v, vModelText as T } from "vue";
 import { useTransformedModel as B } from "../../composition/useTransformedModel.js";
-import m from "./pl-editable-title.module.scss.js";
+import f from "./pl-editable-title.module.scss.js";
 const S = { key: 0 }, W = ["placeholder"], N = /* @__PURE__ */ L({
   __name: "PlEditableTitle",
   props: /* @__PURE__ */ M({
@@ -15,65 +15,65 @@ const S = { key: 0 }, W = ["placeholder"], N = /* @__PURE__ */ L({
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(f) {
-    const a = k(f, "modelValue"), r = f, t = B(a, {
+  setup(a) {
+    const i = k(a, "modelValue"), o = a, e = B(i, {
       update() {
         return !1;
       },
-      parse: (e) => {
-        if (typeof e != "string")
+      parse: (r) => {
+        if (typeof r != "string")
           throw Error("value should be a string");
-        if (r.maxLength && e.length > r.maxLength)
-          throw Error(`Max title length is ${r.maxLength} characters`);
-        if (r.minLength && e.length < r.minLength)
-          throw Error(`Min title length is ${r.minLength} characters`);
-        return e.trim();
+        if (o.maxLength && r.length > o.maxLength)
+          throw Error(`Max title length is ${o.maxLength} characters`);
+        if (o.minLength && r.length < o.minLength)
+          throw Error(`Min title length is ${o.minLength} characters`);
+        return r.trim();
       }
-    }), i = w(), y = E(() => ({
-      maxWidth: r.maxWidth ?? "80%"
-    })), x = () => {
-      a.value = t.value && !t.error ? t.value : a.value, t.reset();
+    }), s = w(), x = E(() => ({
+      maxWidth: o.maxWidth ?? "80%"
+    })), y = () => {
+      i.value = e.value && !e.error ? e.value : i.value, e.reset();
     };
     return V(() => {
-      var e;
-      r.autofocus && ((e = i.value) == null || e.focus());
-    }), (e, l) => (u(), s("div", {
-      class: d(["pl-editable-title", o(m).component]),
-      style: b(y.value)
+      var r;
+      o.autofocus && ((r = s.value) == null || r.focus());
+    }), (r, l) => (d(), u("div", {
+      class: m(["pl-editable-title", t(f).component]),
+      style: b(x.value)
     }, [
-      c("div", {
-        class: d(o(m).container),
+      p("div", {
+        class: m(t(f).container),
         onClick: l[3] || (l[3] = () => {
           var n;
-          return (n = i.value) == null ? void 0 : n.focus();
+          return (n = s.value) == null ? void 0 : n.focus();
         })
       }, [
-        e.prefix ? (u(), s("span", S, g(e.prefix.trim()) + " ", 1)) : h("", !0),
-        C(c("input", {
+        a.prefix ? (d(), u("span", S, g(a.prefix.trim()) + " ", 1)) : h("", !0),
+        C(p("input", {
           ref_key: "inputRef",
-          ref: i,
-          "onUpdate:modelValue": l[0] || (l[0] = (n) => o(t).value = n),
-          placeholder: e.placeholder,
-          onFocusout: x,
+          ref: s,
+          "onUpdate:modelValue": l[0] || (l[0] = (n) => t(e).value = n),
+          placeholder: a.placeholder,
+          onFocusout: y,
           onKeydown: [
             l[1] || (l[1] = v(
               //@ts-ignore
-              (...n) => o(t).reset && o(t).reset(...n),
+              (...n) => t(e).reset && t(e).reset(...n),
               ["escape"]
             )),
             l[2] || (l[2] = v((n) => {
-              var p;
-              return (p = n.target) == null ? void 0 : p.blur();
+              var c;
+              return (c = n.target) == null ? void 0 : c.blur();
             }, ["enter"]))
           ]
         }, null, 40, W), [
-          [T, o(t).value]
+          [T, t(e).value]
         ])
       ], 2),
-      o(t).error ? (u(), s("div", {
+      t(e).error ? (d(), u("div", {
         key: 0,
-        class: d(o(m).error)
-      }, g(o(t).error), 3)) : h("", !0)
+        class: m(t(f).error)
+      }, g(t(e).error), 3)) : h("", !0)
     ], 6));
   }
 });

package/dist/components/PlEditableTitle/PlEditableTitle.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlEditableTitle.vue.js","sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTransformedModel } from '../../composition/useTransformedModel';\nimport style from './pl-editable-title.module.scss';\nimport { computed, onMounted, ref } from 'vue';\n\nconst model = defineModel<string>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Standard input placeholder\n     */\n    placeholder?: string;\n    /**\n     * Any css `width` value (px, %), default is 80%\n     */\n    maxWidth?: string;\n    /**\n     * Fixed non-editable prefix\n     */\n    prefix?: string;\n    /**\n     * Max title length (default is 1000)\n     */\n    maxLength?: number;\n    /**\n     * Min title length\n     */\n    minLength?: number;\n    /**\n     * If true, input will be focused on mount\n     */\n    autofocus?: boolean;\n  }>(),\n  {\n    placeholder: 'Title',\n    maxWidth: '80%',\n    prefix: undefined,\n    maxLength: 1000,\n    minLength: undefined,\n  },\n);\n\nconst local = useTransformedModel(model, {\n  update() {\n    return false;\n  },\n  parse: (v): string => {\n    if (typeof v !== 'string') {\n      throw Error('value should be a string');\n    }\n\n    if (props.maxLength && v.length > props.maxLength) {\n      throw Error(`Max title length is ${props.maxLength} characters`);\n    }\n\n    if (props.minLength && v.length < props.minLength) {\n      throw Error(`Min title length is ${props.minLength} characters`);\n    }\n\n    return v.trim();\n  },\n});\n\nconst inputRef = ref<HTMLInputElement>();\n\nconst computedStyle = computed(() => ({\n  maxWidth: props.maxWidth ?? '80%',\n}));\n\nconst save = () => {\n  model.value = local.value && !local.error ? local.value : model.value;\n  local.reset();\n};\n\nonMounted(() => {\n  if (props.autofocus) {\n    inputRef.value?.focus();\n  }\n});\n\n</script>\n\n<template>\n  <div class=\"pl-editable-title\" :class=\"style.component\" :style=\"computedStyle\">\n    <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n      <span v-if=\"prefix\">{{ prefix.trim() }}&nbsp;</span>\n      <input\n        ref=\"inputRef\"\n        v-model=\"local.value\"\n        :placeholder=\"placeholder\"\n        @focusout=\"save\"\n        @keydown.escape=\"local.reset\"\n        @keydown.enter=\"(ev) => (ev.target as HTMLInputElement)?.blur()\"\n      />\n    </div>\n    <div v-if=\"local.error\" :class=\"style.error\">{{ local.error }}</div>\n  </div>\n</template>\n"],"names":["model","_useModel","__props","props","local","useTransformedModel","v","inputRef","ref","computedStyle","computed","save","onMounted","_a"],"mappings":";;;;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,EAAmBC,GAAA,YAAC,GAE5BC,IAAQD,GAoCRE,IAAQC,EAAoBL,GAAO;AAAA,MACvC,SAAS;AACP,eAAO;AAAA,MACT;AAAA,MACA,OAAO,CAACM,MAAc;AACpB,YAAI,OAAOA,KAAM;AACf,gBAAM,MAAM,0BAA0B;AAGxC,YAAIH,EAAM,aAAaG,EAAE,SAASH,EAAM;AACtC,gBAAM,MAAM,uBAAuBA,EAAM,SAAS,aAAa;AAGjE,YAAIA,EAAM,aAAaG,EAAE,SAASH,EAAM;AACtC,gBAAM,MAAM,uBAAuBA,EAAM,SAAS,aAAa;AAGjE,eAAOG,EAAE,KAAA;AAAA,MACX;AAAA,IAAA,CACD,GAEKC,IAAWC,EAAA,GAEXC,IAAgBC,EAAS,OAAO;AAAA,MACpC,UAAUP,EAAM,YAAY;AAAA,IAAA,EAC5B,GAEIQ,IAAO,MAAM;AACjB,MAAAX,EAAM,QAAQI,EAAM,SAAS,CAACA,EAAM,QAAQA,EAAM,QAAQJ,EAAM,OAChEI,EAAM,MAAA;AAAA,IACR;AAEA,WAAAQ,EAAU,MAAM;;AACd,MAAIT,EAAM,eACRU,IAAAN,EAAS,UAAT,QAAAM,EAAgB;AAAA,IAEpB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlEditableTitle.vue.js","sources":["../../../src/components/PlEditableTitle/PlEditableTitle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTransformedModel } from '../../composition/useTransformedModel';\nimport style from './pl-editable-title.module.scss';\nimport { computed, onMounted, ref } from 'vue';\n\nconst model = defineModel<string>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Standard input placeholder\n     */\n    placeholder?: string;\n    /**\n     * Any css `width` value (px, %), default is 80%\n     */\n    maxWidth?: string;\n    /**\n     * Fixed non-editable prefix\n     */\n    prefix?: string;\n    /**\n     * Max title length (default is 1000)\n     */\n    maxLength?: number;\n    /**\n     * Min title length\n     */\n    minLength?: number;\n    /**\n     * If true, input will be focused on mount\n     */\n    autofocus?: boolean;\n  }>(),\n  {\n    placeholder: 'Title',\n    maxWidth: '80%',\n    prefix: undefined,\n    maxLength: 1000,\n    minLength: undefined,\n  },\n);\n\nconst local = useTransformedModel(model, {\n  update() {\n    return false;\n  },\n  parse: (v): string => {\n    if (typeof v !== 'string') {\n      throw Error('value should be a string');\n    }\n\n    if (props.maxLength && v.length > props.maxLength) {\n      throw Error(`Max title length is ${props.maxLength} characters`);\n    }\n\n    if (props.minLength && v.length < props.minLength) {\n      throw Error(`Min title length is ${props.minLength} characters`);\n    }\n\n    return v.trim();\n  },\n});\n\nconst inputRef = ref<HTMLInputElement>();\n\nconst computedStyle = computed(() => ({\n  maxWidth: props.maxWidth ?? '80%',\n}));\n\nconst save = () => {\n  model.value = local.value && !local.error ? local.value : model.value;\n  local.reset();\n};\n\nonMounted(() => {\n  if (props.autofocus) {\n    inputRef.value?.focus();\n  }\n});\n\n</script>\n\n<template>\n  <div class=\"pl-editable-title\" :class=\"style.component\" :style=\"computedStyle\">\n    <div :class=\"style.container\" @click=\"() => inputRef?.focus()\">\n      <span v-if=\"prefix\">{{ prefix.trim() }}&nbsp;</span>\n      <input\n        ref=\"inputRef\"\n        v-model=\"local.value\"\n        :placeholder=\"placeholder\"\n        @focusout=\"save\"\n        @keydown.escape=\"local.reset\"\n        @keydown.enter=\"(ev) => (ev.target as HTMLInputElement)?.blur()\"\n      />\n    </div>\n    <div v-if=\"local.error\" :class=\"style.error\">{{ local.error }}</div>\n  </div>\n</template>\n"],"names":["model","_useModel","__props","props","local","useTransformedModel","v","inputRef","ref","computedStyle","computed","save","onMounted","_a","_createElementBlock","_normalizeClass","_unref","style","_createElementVNode","_cache","_openBlock","_hoisted_1","_toDisplayString","$event","args","_withKeys","ev","_vModelText"],"mappings":";;;;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,EAAmBC,GAAA,YAAC,GAE5BC,IAAQD,GAoCRE,IAAQC,EAAoBL,GAAO;AAAA,MACvC,SAAS;AACP,eAAO;AAAA,MACT;AAAA,MACA,OAAO,CAACM,MAAc;AACpB,YAAI,OAAOA,KAAM;AACf,gBAAM,MAAM,0BAA0B;AAGxC,YAAIH,EAAM,aAAaG,EAAE,SAASH,EAAM;AACtC,gBAAM,MAAM,uBAAuBA,EAAM,SAAS,aAAa;AAGjE,YAAIA,EAAM,aAAaG,EAAE,SAASH,EAAM;AACtC,gBAAM,MAAM,uBAAuBA,EAAM,SAAS,aAAa;AAGjE,eAAOG,EAAE,KAAA;AAAA,MACX;AAAA,IAAA,CACD,GAEKC,IAAWC,EAAA,GAEXC,IAAgBC,EAAS,OAAO;AAAA,MACpC,UAAUP,EAAM,YAAY;AAAA,IAAA,EAC5B,GAEIQ,IAAO,MAAM;AACjB,MAAAX,EAAM,QAAQI,EAAM,SAAS,CAACA,EAAM,QAAQA,EAAM,QAAQJ,EAAM,OAChEI,EAAM,MAAA;AAAA,IACR;AAEA,WAAAQ,EAAU,MAAM;;AACd,MAAIT,EAAM,eACRU,IAAAN,EAAS,UAAT,QAAAM,EAAgB;AAAA,IAEpB,CAAC,mBAKCC,EAaM,OAAA;AAAA,MAbD,OAAKC,EAAA,CAAC,qBAA4BC,EAAAC,CAAA,EAAM,SAAS,CAAA;AAAA,MAAG,SAAOR,EAAA,KAAa;AAAA,IAAA;MAC3ES,EAUM,OAAA;AAAA,QAVA,OAAKH,EAAEC,EAAAC,CAAA,EAAM,SAAS;AAAA,QAAG,SAAKE,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,MAAA;;AAAQ,kBAAAN,IAAAN,EAAA,UAAA,gBAAAM,EAAU;AAAA;AAAA,MAAK;QAC7CX,EAAA,UAAZkB,EAAA,GAAAN,EAAoD,QAAAO,GAAAC,EAA7BpB,EAAA,OAAO,KAAA,KAAS,KAAM,CAAA;UAC7CgB,EAOE,SAAA;AAAA,mBANI;AAAA,UAAJ,KAAIX;AAAA,UACK,uBAAAY,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAI,MAAAP,EAAAZ,CAAA,EAAM,QAAKmB;AAAA,UACnB,aAAarB,EAAA;AAAA,UACb,YAAUS;AAAA,UACV,WAAO;AAAA;;cAAS,IAAAa,MAAAR,EAAAZ,CAAA,EAAM,SAANY,EAAAZ,CAAA,EAAM,MAAK,GAAAoB,CAAA;AAAA,cAAA,CAAA,QAAA;AAAA,YAAA;AAAA,YACXL,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAM,EAAA,CAAAC,MAAA;;AAAQ,sBAAAb,IAAAa,EAAG,WAAH,gBAAAb,EAAgC;AAAA,eAAI,CAAA,OAAA,CAAA;AAAA,UAAA;AAAA;UAJpD,CAAAc,GAAAX,EAAAZ,CAAA,EAAM,KAAK;AAAA,QAAA;;MAObY,EAAAZ,CAAA,EAAM,cAAjBU,EAAoE,OAAA;AAAA;QAA3C,OAAKC,EAAEC,EAAAC,CAAA,EAAM,KAAK;AAAA,MAAA,GAAKK,EAAAN,EAAAZ,CAAA,EAAM,KAAK,GAAA,CAAA;;;;"}

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

@@ -7,6 +7,10 @@ declare const _default: <T extends unknown = unknown, K extends number | string
     } & {
         getItemKey?: (item: T, index: number) => K;
         itemClass?: string | string[] | ((item: T, index: number) => string | string[]);
+        itemClassTitle?: string | string[] | ((item: T, index: number) => string | string[]);
+        itemClassBefore?: string | string[] | ((item: T, index: number) => string | string[]);
+        itemClassAfter?: string | string[] | ((item: T, index: number) => string | string[]);
+        itemClassContent?: string | string[] | ((item: T, index: number) => string | string[]);
         isActive?: (item: T, index: number) => boolean;
         disableDragging?: boolean;
         isDraggable?: (item: T, index: number) => boolean;
@@ -39,6 +43,14 @@ declare const _default: <T extends unknown = unknown, K extends number | string
             item: T;
             index: number;
         }) => unknown;
+        "item-before"?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        "item-after"?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
     }> & {
         "item-title": (props: {
             item: T;
@@ -48,6 +60,14 @@ declare const _default: <T extends unknown = unknown, K extends number | string
             item: T;
             index: number;
         }) => unknown;
+        "item-before"?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        "item-after"?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
     };
     emit: ((e: "itemClick", item: T) => void) & ((evt: "update:items", value: T[]) => void);
 }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {

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