import { defineComponent as f, useModel as h, computed as l, ref as g, provide as v, openBlock as s, createElementBlock as i, renderSlot as y, normalizeProps as T, guardReactiveProps as _, unref as E, Fragment as x, renderList as B, createBlock as I, mergeModels as d } from "vue";
import k, { moveSortableElements as M } from "./useSortable.js";
import S from "./ThumbnailEmpty.js";
import { T as w } from "./ThumbnailGroup.keys-EJ4qFNhx.js";
import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const D = /* @__PURE__ */ f({
  __name: "ThumbnailGroup",
  props: /* @__PURE__ */ d({
    draggable: { type: Boolean, default: !1 },
    radius: { default: "rounded" },
    removable: { type: Boolean, default: !1 },
    showEmpty: { type: Boolean, default: !1 },
    emptyOptions: { default: () => ({ max: 6 }) },
    thumbnails: { default: () => [] }
  }, {
    activeThumbnail: {
      default: -1
    },
    activeThumbnailModifiers: {}
  }),
  emits: /* @__PURE__ */ d(["dragStart", "dragEnd", "update:thumbnails"], ["update:activeThumbnail"]),
  setup(o, { emit: p }) {
    const n = p, t = o, r = h(o, "activeThumbnail"), a = l({
      get() {
        return t.thumbnails;
      },
      set(e) {
        n("update:thumbnails", e);
      }
    }), u = g(null), { isDragging: m } = k({
      ref: u,
      list: a,
      isEnabled: t.draggable,
      ghostClass: "thumbnail-ghost",
      chosenClass: "thumbnail-chosen",
      sortInPlace: !1,
      onDragStart: (e) => n("dragStart", e),
      onDragEnd: (e) => {
        r.value = e.newIndex, M({ list: a, from: e.oldIndex, to: e.newIndex }), n("dragEnd", e);
      }
    }), c = l(() => {
      if (!t.showEmpty) return 0;
      const { max: e } = t.emptyOptions || {};
      return a.value.length < e ? e - a.value.length : 0;
    });
    return v(
      w.key,
      Object.freeze({
        draggable: l(() => t.draggable),
        removable: l(() => t.removable),
        thumbnails: a,
        radius: t.radius,
        activeThumbnail: r,
        isDragging: m
      })
    ), (e, P) => (s(), i("ul", {
      ref_key: "thumbnailRef",
      ref: u,
      class: "stash-thumbnail-group flex flex-wrap gap-3",
      "data-test": "stash-thumbnail-group"
    }, [
      y(e.$slots, "default", T(_({ activeThumbnail: r.value, isDragging: E(m) }))),
      (s(!0), i(x, null, B(c.value, (R, b) => (s(), I(S, {
        key: `empty_thumb_${b}`
      }))), 128))
    ], 512));
  }
}), O = {}, N = {
  $style: O
}, A = /* @__PURE__ */ C(D, [["__cssModules", N]]);
export {
  A as default,
  M as moveSortableElements
};
//# sourceMappingURL=ThumbnailGroup.js.map
