import { defineComponent, ref, useSlots, openBlock, createElementBlock, createVNode, unref, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, toDisplayString } from 'vue';
import { MeSvgIcon } from '../../svg-icon/index.mjs';

"use strict";
const _hoisted_1 = { class: "me-group" };
const _hoisted_2 = {
  key: 0,
  style: { "font-size": "11px", "margin-right": "-5px" }
};
const __default__ = defineComponent({
  name: "me-group"
});
var script = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    width: { type: String, required: false }
  },
  setup(__props) {
    const props = __props;
    const groupWidth = ref(props.width);
    const groupRef = ref();
    const isExpand = ref(false);
    const slots = useSlots();
    const handleExpand = () => {
      if (!groupRef?.value) return;
      isExpand.value = true;
      groupRef.value.style.width = "auto";
      const { width } = groupRef.value.getBoundingClientRect();
      console.log(width);
      groupRef.value.style.width = groupWidth.value || "";
      requestAnimationFrame(() => {
        if (!groupRef.value) return;
        groupRef.value.style.width = `${width}px`;
      });
    };
    const handleFold = () => {
      isExpand.value = false;
      if (!groupRef.value) return;
      groupRef.value.style.width = groupWidth.value || "";
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        isExpand.value ? (openBlock(), createElementBlock("div", {
          key: 0,
          onClick: handleFold,
          style: { "height": "auto", "display": "flex", "align-items": "center", "justify-content": "center" }
        }, [
          createVNode(unref(MeSvgIcon), { name: "ri-arrow-left-s-line" })
        ])) : createCommentVNode("v-if", true),
        createElementVNode(
          "div",
          {
            class: "group",
            ref_key: "groupRef",
            ref: groupRef,
            style: normalizeStyle({ width: groupWidth.value })
          },
          [
            renderSlot(_ctx.$slots, "default")
          ],
          4
          /* STYLE */
        ),
        !isExpand.value ? (openBlock(), createElementBlock("div", {
          key: 1,
          onClick: handleExpand,
          class: "icon",
          style: { "height": "auto", "display": "flex", "align-items": "center", "justify-content": "center" }
        }, [
          unref(slots)?.default ? (openBlock(), createElementBlock(
            "span",
            _hoisted_2,
            toDisplayString(unref(slots).default().length - 1),
            1
            /* TEXT */
          )) : createCommentVNode("v-if", true),
          createVNode(unref(MeSvgIcon), { name: "ri-arrow-right-s-line" })
        ])) : createCommentVNode("v-if", true)
      ]);
    };
  }
});

export { script as default };
//# sourceMappingURL=group.vue2.mjs.map
