@milaboratories/uikit 2.2.92 → 2.2.94

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

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

package/CHANGELOG.md

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

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

@@ -0,0 +1,70 @@
+declare const _default: <T extends unknown = unknown, K extends number | string = string | number>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:items"?: ((value: T[]) => any) | undefined;
+        readonly "onUpdate:draggableItems"?: ((value: Set<T>) => any) | undefined;
+        readonly "onUpdate:removableItems"?: ((value: Set<T>) => any) | undefined;
+        readonly "onUpdate:expandableItems"?: ((value: Set<T>) => any) | undefined;
+        readonly "onUpdate:expandedItems"?: ((value: Set<T>) => any) | undefined;
+        readonly "onUpdate:pinnableItems"?: ((value: Set<T>) => any) | undefined;
+        readonly "onUpdate:pinnedItems"?: ((value: Set<T>) => any) | undefined;
+        readonly "onUpdate:toggableItems"?: ((value: Set<T>) => any) | undefined;
+        readonly "onUpdate:toggledItems"?: ((value: Set<T>) => any) | undefined;
+        readonly onItemClick?: ((item: T) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:items" | "onUpdate:draggableItems" | "onUpdate:removableItems" | "onUpdate:expandableItems" | "onUpdate:expandedItems" | "onUpdate:pinnableItems" | "onUpdate:pinnedItems" | "onUpdate:toggableItems" | "onUpdate:toggledItems" | "onItemClick"> & ({
+        items: T[];
+        draggableItems?: Set<T>;
+        removableItems?: Set<T>;
+        expandableItems?: Set<T>;
+        expandedItems?: Set<T>;
+        pinnableItems?: Set<T>;
+        pinnedItems?: Set<T>;
+        toggableItems?: Set<T>;
+        toggledItems?: Set<T>;
+    } & {
+        itemClass?: string | string[] | ((item: T, index: number) => string | string[]);
+        activeItems?: Set<T>;
+        enableDragging?: boolean;
+        getItemKey?: (item: T) => K;
+        onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;
+        onSort?: (oldIndex: number, newIndex: number) => void | boolean;
+        enableExpanding?: boolean;
+        onExpand?: (item: T, index: number) => void | boolean;
+        enableRemoving?: boolean;
+        onRemove?: (item: T, index: number) => void | boolean;
+        enableToggling?: boolean;
+        onToggle?: (item: T, index: number) => void | boolean;
+        enablePinning?: boolean;
+        onPin?: (item: T, index: number) => void | boolean;
+    }) & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        "item-title": (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        "item-content"?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+    }> & {
+        "item-title": (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        "item-content"?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+    };
+    emit: ((e: "itemClick", item: T) => void) & (((evt: "update:items", value: T[]) => void) & ((evt: "update:draggableItems", value: Set<T>) => void) & ((evt: "update:removableItems", value: Set<T>) => void) & ((evt: "update:expandableItems", value: Set<T>) => void) & ((evt: "update:expandedItems", value: Set<T>) => void) & ((evt: "update:pinnableItems", value: Set<T>) => void) & ((evt: "update:pinnedItems", value: Set<T>) => void) & ((evt: "update:toggableItems", value: Set<T>) => void) & ((evt: "update:toggledItems", value: Set<T>) => void));
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};
+//# sourceMappingURL=PlElementList.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlElementList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlElementList/PlElementList.vue"],"names":[],"mappings":"yBA0ViB,CAAC,SAAS,OAAO,YAAY,CAAC,SAAS,MAAM,GAAG,MAAM,iCACzD,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA+hB1D,mBAAmB,CAAC;;;;;;;;;;;;eAlRnB,CAAC,EAAE;yBACO,GAAG,CAAC,CAAC,CAAC;yBACN,GAAG,CAAC,CAAC,CAAC;0BACL,GAAG,CAAC,CAAC,CAAC;wBACR,GAAG,CAAC,CAAC,CAAC;wBACN,GAAG,CAAC,CAAC,CAAC;sBACR,GAAG,CAAC,CAAC,CAAC;wBACJ,GAAG,CAAC,CAAC,CAAC;uBACP,GAAG,CAAC,CAAC,CAAC;;oBArQP,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC;sBACjE,GAAG,CAAC,CAAC,CAAC;yBAEH,OAAO;qBACX,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC;oBACf,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;iBACzD,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;0BAE7C,OAAO;mBACd,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;yBAEpC,OAAO;mBACb,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;yBAEpC,OAAO;mBACb,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;wBAErC,OAAO;gBACf,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;oBA6fwC,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;sBAleO,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;yBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;sBADjD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;yBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;UAme5D,KAzeD,WAAW,QAAQ,CAAC,KAAG,IAAI,0fAyeW;;;;YAGA,OAAO,CAAC,OAAO,WAAW,CAAC;;AAziBvE,wBAyiB4E;AAS5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/PlElementList/PlElementList.vue.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlElementList.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

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

@@ -0,0 +1,240 @@
+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 { 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({
+  __name: "PlElementList",
+  props: /* @__PURE__ */ X({
+    itemClass: { type: [String, Array, Function], default: void 0 },
+    activeItems: { default: void 0 },
+    enableDragging: { type: Boolean, default: void 0 },
+    getItemKey: { type: Function, default: void 0 },
+    onDragEnd: { type: Function, default: void 0 },
+    onSort: { type: Function, default: void 0 },
+    enableExpanding: { type: Boolean, default: void 0 },
+    onExpand: { type: Function, default: void 0 },
+    enableRemoving: { type: Boolean, default: void 0 },
+    onRemove: { type: Function, default: void 0 },
+    enableToggling: { type: Boolean, default: void 0 },
+    onToggle: { type: Function, default: void 0 },
+    enablePinning: { type: Boolean, default: void 0 },
+    onPin: { type: Function, default: void 0 }
+  }, {
+    items: { required: !0 },
+    itemsModifiers: {},
+    draggableItems: {},
+    draggableItemsModifiers: {},
+    removableItems: {},
+    removableItemsModifiers: {},
+    expandableItems: {},
+    expandableItemsModifiers: {},
+    expandedItems: {},
+    expandedItemsModifiers: {},
+    pinnableItems: {},
+    pinnableItemsModifiers: {},
+    pinnedItems: {},
+    pinnedItemsModifiers: {},
+    toggableItems: {},
+    toggableItemsModifiers: {},
+    toggledItems: {},
+    toggledItemsModifiers: {}
+  }),
+  emits: /* @__PURE__ */ 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;
+    });
+    B(de, w, h, () => 0), B($, F, p, () => h.value.length);
+    function B(e, t, a, l) {
+      const s = he(t, a, {
+        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)
+            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);
+        }
+      });
+      return me(e, (i) => i ? s.start() : s.stop()), s;
+    }
+    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 K(e) {
+      var t;
+      return ((t = n.activeItems) == null ? void 0 : t.has(e)) ?? !1;
+    }
+    function H(e) {
+      var t;
+      return n.enableDragging === !1 ? !1 : ((t = se.value) == null ? void 0 : t.has(e)) ?? !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 L(e) {
+      var t;
+      return ((t = f.value) == null ? void 0 : t.has(e)) ?? !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 E(e) {
+      var t;
+      return ((t = r.value) == null ? void 0 : t.has(e)) ?? !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 V(e) {
+      var t;
+      return ((t = y.value) == null ? void 0 : t.has(e)) ?? !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 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 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 J(e, t) {
+      var s;
+      if (t === -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);
+    }
+    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)));
+    }
+    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)
+    }, [
+      be("div", {
+        ref_key: "pinnedContainerRef",
+        ref: w,
+        class: R(e.$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),
+          onRemove: O,
+          onToggle: G,
+          onPin: J,
+          onExpand: q
+        }, ee({
+          title: S(({ item: s, index: i }) => [
+            k(e.$slots, "item-title", {
+              index: i,
+              item: s
+            })
+          ]),
+          _: 2
+        }, [
+          T["item-content"] ? {
+            name: "content",
+            fn: S(({ item: s, index: i }) => [
+              k(e.$slots, "item-content", {
+                index: i,
+                item: s
+              })
+            ]),
+            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", {
+        key: 0,
+        ref_key: "unpinnedContainerRef",
+        ref: F,
+        class: R(e.$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),
+            onRemove: O,
+            onToggle: G,
+            onPin: J,
+            onExpand: q
+          }, ee({
+            title: S(({ item: i, index: m }) => [
+              k(e.$slots, "item-title", {
+                index: m,
+                item: i
+              })
+            ]),
+            _: 2
+          }, [
+            T["item-content"] ? {
+              name: "content",
+              fn: S(({ item: i, index: m }) => [
+                k(e.$slots, "item-content", {
+                  index: m,
+                  item: i
+                })
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["class", "index", "item", "showDragHandle", "isActive", "isDraggable", "isRemovable", "isToggable", "isToggled", "isPinnable", "isPinned", "isExpandable", "isExpanded", "onClick"]);
+        }), 128))
+      ], 2)) : ye("", !0)
+    ], 2));
+  }
+});
+export {
+  ke as default
+};
+//# sourceMappingURL=PlElementList.vue2.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,13 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._root_1inp1_2,._list_1inp1_2{display:flex;flex-direction:column;gap:8px;min-width:180px}._item_1inp1_9{width:100%}.sortable-ghost{visibility:hidden}.sortable-drag{opacity:1}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
+const t = "_root_1inp1_2", o = "_list_1inp1_2", i = "_item_1inp1_9", s = {
+  root: t,
+  list: o,
+  item: i
+};
+export {
+  s as default,
+  i as item,
+  o as list,
+  t as root
+};
+//# sourceMappingURL=PlElementList.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlElementList.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

@@ -0,0 +1,57 @@
+declare const _default: <T extends unknown = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onToggle?: ((item: T, index: number) => any) | undefined;
+        readonly onPin?: ((item: T, index: number) => any) | undefined;
+        readonly onExpand?: ((item: T, index: number) => any) | undefined;
+        readonly onRemove?: ((item: T, index: number) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onToggle" | "onPin" | "onExpand" | "onRemove"> & {
+        item: T;
+        index: number;
+        showDragHandle: boolean;
+        isActive: boolean;
+        isDraggable: boolean;
+        isRemovable: boolean;
+        isExpandable: boolean;
+        isExpanded: boolean;
+        isToggable: boolean;
+        isToggled: boolean;
+        isPinnable: boolean;
+        isPinned: boolean;
+    } & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        title: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        content?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+    }> & {
+        title: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        content?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+    };
+    emit: {
+        (e: "expand", item: T, index: number): void;
+        (e: "toggle", item: T, index: number): void;
+        (e: "pin", item: T, index: number): void;
+        (e: "remove", item: T, index: number): void;
+    };
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};
+//# sourceMappingURL=PlElementListItem.vue.d.ts.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlElementListItem.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

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

@@ -0,0 +1,106 @@
+import { defineComponent as B, useSlots as C, computed as E, createElementBlock as o, openBlock as n, normalizeClass as l, createElementVNode as m, createCommentVNode as t, createBlock as P, createVNode as r, unref as a, renderSlot as v, withModifiers as p } from "vue";
+import g from "../PlIcon16/PlIcon16.vue.js";
+import b from "../PlIcon24/PlIcon24.vue.js";
+const f = ["data-draggable"], h = /* @__PURE__ */ B({
+  __name: "PlElementListItem",
+  props: {
+    item: {},
+    index: {},
+    showDragHandle: { type: Boolean },
+    isActive: { type: Boolean },
+    isDraggable: { type: Boolean },
+    isRemovable: { type: Boolean },
+    isExpandable: { type: Boolean },
+    isExpanded: { type: Boolean },
+    isToggable: { type: Boolean },
+    isToggled: { type: Boolean },
+    isPinnable: { type: Boolean },
+    isPinned: { type: Boolean }
+  },
+  emits: ["expand", "toggle", "pin", "remove"],
+  setup(k, { emit: u }) {
+    const s = k, c = C(), $ = E(() => c.content !== void 0), d = u;
+    return (e, i) => (n(), o("div", {
+      class: l([e.$style.root, {
+        [e.$style.active]: s.isActive,
+        [e.$style.pinned]: s.isPinned,
+        [e.$style.disabled]: s.isToggled
+      }])
+    }, [
+      m("div", {
+        class: l([e.$style.head, {
+          [e.$style.clickable]: $.value
+        }]),
+        onClick: i[3] || (i[3] = (y) => e.isExpandable && d("expand", s.item, s.index))
+      }, [
+        s.showDragHandle ? (n(), o("div", {
+          key: 0,
+          class: l([e.$style.action, e.$style.draggable, { [e.$style.disable]: !s.isDraggable }]),
+          "data-draggable": s.isDraggable
+        }, [
+          r(a(g), { name: "drag-dots" })
+        ], 10, f)) : t("", !0),
+        e.isExpandable ? (n(), P(a(g), {
+          key: 1,
+          class: l([e.$style.contentChevron, { [e.$style.opened]: s.isExpanded }]),
+          name: "chevron-down"
+        }, null, 8, ["class"])) : t("", !0),
+        m("div", {
+          class: l(e.$style.title)
+        }, [
+          v(e.$slots, "title", {
+            item: s.item,
+            index: s.index
+          })
+        ], 2),
+        m("div", {
+          class: l([e.$style.actions, e.$style.showOnHover])
+        }, [
+          s.isToggable ? (n(), o("div", {
+            key: 0,
+            class: l([e.$style.action, e.$style.clickable, { [e.$style.disable]: !s.isToggable }]),
+            onClick: i[0] || (i[0] = p((y) => d("toggle", s.item, s.index), ["stop"]))
+          }, [
+            r(a(b), {
+              name: s.isToggled === !0 ? "view-hide" : "view-show",
+              size: "16"
+            }, null, 8, ["name"])
+          ], 2)) : t("", !0),
+          s.isPinnable ? (n(), o("div", {
+            key: 1,
+            class: l([e.$style.action, e.$style.clickable, {
+              [e.$style.disable]: !s.isPinnable,
+              [e.$style.activated]: s.isPinned
+            }]),
+            onClick: i[1] || (i[1] = p((y) => d("pin", s.item, s.index), ["stop"]))
+          }, [
+            r(a(b), {
+              name: "pin",
+              size: "16"
+            })
+          ], 2)) : t("", !0),
+          s.isRemovable ? (n(), o("div", {
+            key: 2,
+            class: l([e.$style.action, e.$style.clickable]),
+            onClick: i[2] || (i[2] = p((y) => d("remove", s.item, s.index), ["stop"]))
+          }, [
+            r(a(g), { name: "close" })
+          ], 2)) : t("", !0)
+        ], 2)
+      ], 2),
+      $.value && s.isExpanded ? (n(), o("div", {
+        key: 0,
+        class: l(e.$style.body)
+      }, [
+        v(e.$slots, "content", {
+          item: s.item,
+          index: s.index
+        })
+      ], 2)) : t("", !0)
+    ], 2));
+  }
+});
+export {
+  h as default
+};
+//# sourceMappingURL=PlElementListItem.vue2.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}