import { defineComponent, ref, watchEffect, onUnmounted, openBlock, createBlock, Transition, withCtx, createElementBlock, normalizeStyle, unref, createCommentVNode } from 'vue';
import { MeSvgIcon } from '../../svg-icon/index.mjs';

"use strict";
const __default__ = defineComponent({
  name: "me-expand-menu"
});
var script = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    top: { type: String, required: false, default: "210px" },
    customStyle: { type: Object, required: false, default: () => ({}) },
    target: { type: null, required: false },
    autoHide: { type: Boolean, required: false, default: false }
  },
  emits: ["expandChangeEvent"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const menuExpanded = ref(true);
    const iconSize = 16;
    const color = "rgb(78, 89, 105)";
    const showIcon = ref(props.autoHide ? false : true);
    const handleMouseEnter = () => {
      if (!props.autoHide) return;
      showIcon.value = true;
    };
    const handleMouseLeave = () => {
      if (!menuExpanded.value || !props.autoHide) return;
      showIcon.value = false;
    };
    const stop = watchEffect(() => {
      props.target?.addEventListener("mouseenter", handleMouseEnter);
      props.target?.addEventListener("mouseleave", handleMouseLeave);
    });
    onUnmounted(() => {
      stop();
      props.target?.removeEventListener("mouseenter", handleMouseEnter);
      props.target?.removeEventListener("mouseleave", handleMouseLeave);
    });
    const handleExpand = () => {
      menuExpanded.value = !menuExpanded.value;
      emit("expandChangeEvent", menuExpanded.value);
    };
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Transition, null, {
        default: withCtx(() => [
          showIcon.value ? (openBlock(), createElementBlock(
            "div",
            {
              key: 0,
              class: "me-expand-menu",
              style: normalizeStyle({ top: props.top, ...props.customStyle }),
              onClick: handleExpand
            },
            [
              menuExpanded.value ? (openBlock(), createBlock(unref(MeSvgIcon), {
                key: 0,
                color,
                name: "ri-arrow-left-s-line",
                size: iconSize
              })) : (openBlock(), createBlock(unref(MeSvgIcon), {
                key: 1,
                name: "ri-arrow-right-s-line",
                color,
                size: iconSize
              }))
            ],
            4
            /* STYLE */
          )) : createCommentVNode("v-if", true)
        ]),
        _: 1
        /* STABLE */
      });
    };
  }
});

export { script as default };
//# sourceMappingURL=expand-menu.vue2.mjs.map
