'use strict';

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

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

"use strict";
const __default__ = vue.defineComponent({
  name: "me-expand-menu"
});
var script = /* @__PURE__ */ vue.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 = vue.ref(true);
    const iconSize = 16;
    const color = "rgb(78, 89, 105)";
    const showIcon = vue.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 = vue.watchEffect(() => {
      props.target?.addEventListener("mouseenter", handleMouseEnter);
      props.target?.addEventListener("mouseleave", handleMouseLeave);
    });
    vue.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 vue.openBlock(), vue.createBlock(vue.Transition, null, {
        default: vue.withCtx(() => [
          showIcon.value ? (vue.openBlock(), vue.createElementBlock(
            "div",
            {
              key: 0,
              class: "me-expand-menu",
              style: vue.normalizeStyle({ top: props.top, ...props.customStyle }),
              onClick: handleExpand
            },
            [
              menuExpanded.value ? (vue.openBlock(), vue.createBlock(vue.unref(index.MeSvgIcon), {
                key: 0,
                color,
                name: "ri-arrow-left-s-line",
                size: iconSize
              })) : (vue.openBlock(), vue.createBlock(vue.unref(index.MeSvgIcon), {
                key: 1,
                name: "ri-arrow-right-s-line",
                color,
                size: iconSize
              }))
            ],
            4
            /* STYLE */
          )) : vue.createCommentVNode("v-if", true)
        ]),
        _: 1
        /* STABLE */
      });
    };
  }
});

exports.default = script;
//# sourceMappingURL=expand-menu.vue2.js.map
