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__ */ 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 },
    onDragEnd: { type: Function, default: void 0 },
    onSort: { type: Function, default: void 0 },
    disableRemoving: { type: Boolean, default: void 0 },
    isRemovable: { type: Function, default: void 0 },
    onRemove: { type: Function, default: void 0 },
    disableExpanding: { type: Boolean, default: void 0 },
    isExpandable: { type: Function, default: void 0 },
    isExpanded: { type: Function, default: void 0 },
    onExpand: { type: Function, default: void 0 },
    disableToggling: { type: Boolean, default: void 0 },
    isToggable: { type: Function, default: void 0 },
    isToggled: { type: Function, default: void 0 },
    onToggle: { type: Function, default: void 0 },
    disablePinning: { type: Boolean, default: void 0 },
    isPinnable: { type: Function, default: void 0 },
    isPinned: { type: Function, default: void 0 },
    onPin: { type: Function, default: void 0 }
  }, {
    items: { required: !0 },
    itemsModifiers: {}
  }),
  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);
    });
    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: (s) => {
          var n;
          if (s.oldIndex == null || s.newIndex == null)
            throw new Error("Sortable event has no index");
          ((n = t.onDragEnd) == null ? void 0 : n.call(t, s.oldIndex, s.newIndex)) !== !1 && K(i() + s.oldIndex, i() + s.newIndex, !0);
        }
      });
      return me(
        [l, () => t.disableDragging, a],
        ([s, n, fe]) => {
          !s || n || !fe ? o.stop() : o.start();
        },
        { immediate: !0 }
      ), o;
    }
    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 H(a, l) {
      var e;
      return ((e = t.isActive) == null ? void 0 : e.call(t, a, l)) ?? !1;
    }
    function j(a, l) {
      var e;
      return t.disableDragging === !0 ? !1 : ((e = t.isDraggable) == null ? void 0 : e.call(t, a, l)) ?? !0;
    }
    function L(a, l) {
      var e;
      return t.disableRemoving === !0 ? !1 : ((e = t.isRemovable) == null ? void 0 : e.call(t, a, l)) ?? !0;
    }
    function M(a, l) {
      var e;
      return t.disableToggling === !0 ? !1 : ((e = t.isToggable) == null ? void 0 : e.call(t, a, l)) ?? (d(t.isToggled) || d(t.onToggle));
    }
    function N(a, l) {
      var e;
      return ((e = t.isToggled) == null ? void 0 : e.call(t, a, l)) ?? !1;
    }
    function U(a, l) {
      var e;
      return t.disablePinning === !0 ? !1 : ((e = t.isPinnable) == null ? void 0 : e.call(t, a, l)) ?? (d(t.isPinned) || d(t.onPin));
    }
    function q(a, l) {
      var e;
      return ((e = t.isPinned) == null ? void 0 : e.call(t, a, l)) ?? !1;
    }
    function z(a, l) {
      var e;
      return t.disableExpanding === !0 ? !1 : ((e = t.isExpandable) == null ? void 0 : e.call(t, a, l)) ?? (d(t.isExpanded) || d(t.onExpand));
    }
    function J(a, l) {
      var e;
      return ((e = t.isExpanded) == null ? void 0 : e.call(t, a, l)) ?? !1;
    }
    function O(a, l) {
      var e;
      (e = t.onExpand) == null || e.call(t, a, l);
    }
    function V(a, l) {
      var e;
      (e = t.onToggle) == null || e.call(t, a, l);
    }
    function G(a, l) {
      var i;
      if (l === -1)
        throw new Error("Pinnable item not found");
      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 Q(a, l) {
      var e;
      ((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 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)
    }, [
      ve("div", {
        ref_key: "pinnedContainerRef",
        ref: A,
        class: C(a.$style.list)
      }, [
        (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: 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: 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
        }, [
          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", "titleClass", "contentClass", "beforeClass", "afterClass", "index", "item", "showDragHandle", "isActive", "isDraggable", "isRemovable", "isToggable", "isToggled", "isPinnable", "isExpandable", "isExpanded", "onClick"]))), 128))
      ], 2),
      S.value ? (v(), F("div", {
        key: 0,
        ref_key: "unpinnedContainerRef",
        ref: $,
        class: C(a.$style.list)
      }, [
        (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: 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: 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
          }, [
            b["item-content"] ? {
              name: "content",
              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", "titleClass", "contentClass", "beforeClass", "afterClass", "index", "item", "showDragHandle", "isActive", "isDraggable", "isRemovable", "isToggable", "isToggled", "isPinnable", "isExpandable", "isExpanded", "onClick"]);
        }), 128))
      ], 2)) : de("", !0)
    ], 2));
  }
});
export {
  Fe as default
};
//# sourceMappingURL=PlElementList.vue2.js.map
