'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var index = require('../../svg-icon/index.js');

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

exports.default = script;
//# sourceMappingURL=group.vue2.js.map
