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({
  __name: "PlElementList",
  props: /* @__PURE__ */ Q({
    getItemKey: { type: Function, default: (m) => JSON.stringify(m) },
    itemClass: { 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__ */ 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);
    });
    $(p, D, s, () => 0), $(C, S, v, () => s.value.length);
    function $(i, l, e, a) {
      const n = ce(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)
            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);
        }
      });
      return se(
        [l, () => t.disableDragging, i],
        ([o, r, le]) => {
          !o || r || !le ? n.stop() : n.start();
        },
        { immediate: !0 }
      ), n;
    }
    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 A(i, l) {
      var e;
      return ((e = t.isActive) == null ? void 0 : e.call(t, i, l)) ?? !1;
    }
    function B(i, l) {
      var e;
      return t.disableDragging === !0 ? !1 : ((e = t.isDraggable) == null ? void 0 : e.call(t, i, l)) ?? !0;
    }
    function H(i, l) {
      var e;
      return t.disableRemoving === !0 ? !1 : ((e = t.isRemovable) == null ? void 0 : e.call(t, i, l)) ?? !0;
    }
    function j(i, 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));
    }
    function L(i, l) {
      var e;
      return ((e = t.isToggled) == null ? void 0 : e.call(t, i, l)) ?? !1;
    }
    function M(i, 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));
    }
    function N(i, l) {
      var e;
      return ((e = t.isPinned) == null ? void 0 : e.call(t, i, l)) ?? !1;
    }
    function U(i, 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));
    }
    function q(i, l) {
      var e;
      return ((e = t.isExpanded) == null ? void 0 : e.call(t, i, l)) ?? !1;
    }
    function z(i, l) {
      var e;
      (e = t.onExpand) == null || e.call(t, i, l);
    }
    function J(i, l) {
      var e;
      (e = t.onToggle) == null || e.call(t, i, l);
    }
    function O(i, l) {
      var a;
      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);
    }
    function V(i, l) {
      var e;
      ((e = t.onRemove) == null ? void 0 : e.call(t, i, l)) !== !1 && c.value.splice(l, 1);
    }
    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)
    }, [
      re("div", {
        ref_key: "pinnedContainerRef",
        ref: D,
        class: d(i.$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,
          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),
          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
            })
          ]),
          _: 2
        }, [
          F["item-content"] ? {
            name: "content",
            fn: E(({ item: n, index: o }) => [
              h(i.$slots, "item-content", {
                index: o,
                item: n
              })
            ]),
            key: "0"
          } : void 0
        ]), 1032, ["class", "index", "item", "showDragHandle", "isActive", "isDraggable", "isRemovable", "isToggable", "isToggled", "isPinnable", "isExpandable", "isExpanded", "onClick"]))), 128))
      ], 2),
      C.value ? (f(), y("div", {
        key: 0,
        ref_key: "unpinnedContainerRef",
        ref: S,
        class: d(i.$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),
            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),
            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
              })
            ]),
            _: 2
          }, [
            F["item-content"] ? {
              name: "content",
              fn: E(({ item: o, index: r }) => [
                h(i.$slots, "item-content", {
                  index: r,
                  item: o
                })
              ]),
              key: "0"
            } : void 0
          ]), 1032, ["class", "index", "item", "showDragHandle", "isActive", "isDraggable", "isRemovable", "isToggable", "isToggled", "isPinnable", "isExpandable", "isExpanded", "onClick"]);
        }), 128))
      ], 2)) : ue("", !0)
    ], 2));
  }
});
export {
  be as default
};
//# sourceMappingURL=PlElementList.vue2.js.map
