'use strict';

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

var vue = require('vue');
var index = require('../../button/index.js');
var index$2 = require('../../popper/index.js');
var index$1 = require('../../scrollbar/index.js');
var index$3 = require('../../icon/index.js');
var dom = require('../../../utils/dom.js');
var util = require('../../../utils/util.js');
var iconsVue = require('@element-plus/icons-vue');
var useDropdown = require('./useDropdown.js');
var defaults = require('../../popper/src/use-popper/defaults.js');

const { ButtonGroup: ElButtonGroup } = index.ElButton;
var script = vue.defineComponent({
  name: "ElDropdown",
  components: {
    ElButton: index.ElButton,
    ElButtonGroup,
    ElScrollbar: index$1.ElScrollbar,
    ElPopper: index$2["default"],
    ElIcon: index$3.ElIcon,
    ArrowDown: iconsVue.ArrowDown
  },
  props: {
    trigger: {
      type: String,
      default: "hover"
    },
    type: String,
    size: {
      type: String,
      default: ""
    },
    splitButton: Boolean,
    hideOnClick: {
      type: Boolean,
      default: true
    },
    placement: {
      type: String,
      default: "bottom"
    },
    showTimeout: {
      type: Number,
      default: 150
    },
    hideTimeout: {
      type: Number,
      default: 150
    },
    tabindex: {
      type: [Number, String],
      default: 0
    },
    effect: {
      type: String,
      default: defaults.Effect.LIGHT
    },
    maxHeight: {
      type: [Number, String],
      default: ""
    }
  },
  emits: ["visible-change", "click", "command"],
  setup(props, { emit }) {
    const _instance = vue.getCurrentInstance();
    const { ELEMENT } = useDropdown.useDropdown();
    const timeout = vue.ref(null);
    const visible = vue.ref(false);
    const scrollbar = vue.ref(null);
    const wrapStyle = vue.computed(() => ({
      maxHeight: util.addUnit(props.maxHeight)
    }));
    vue.watch(() => visible.value, (val) => {
      if (val)
        triggerElmFocus();
      if (!val)
        triggerElmBlur();
      emit("visible-change", val);
    });
    const focusing = vue.ref(false);
    vue.watch(() => focusing.value, (val) => {
      const selfDefine = triggerElm.value;
      if (selfDefine) {
        if (val) {
          dom.addClass(selfDefine, "focusing");
        } else {
          dom.removeClass(selfDefine, "focusing");
        }
      }
    });
    const triggerVnode = vue.ref(null);
    const triggerElm = vue.computed(() => {
      var _a, _b, _c;
      const _ = (_b = (_a = triggerVnode.value) == null ? void 0 : _a.$refs.triggerRef) == null ? void 0 : _b.children[0];
      return !props.splitButton ? _ : (_c = _ == null ? void 0 : _.children) == null ? void 0 : _c[1];
    });
    function handleClick() {
      var _a;
      if ((_a = triggerElm.value) == null ? void 0 : _a.disabled)
        return;
      if (visible.value) {
        hide();
      } else {
        show();
      }
    }
    function show() {
      var _a;
      if ((_a = triggerElm.value) == null ? void 0 : _a.disabled)
        return;
      timeout.value && clearTimeout(timeout.value);
      timeout.value = window.setTimeout(() => {
        visible.value = true;
      }, ["click", "contextmenu"].includes(props.trigger) ? 0 : props.showTimeout);
    }
    function hide() {
      var _a;
      if ((_a = triggerElm.value) == null ? void 0 : _a.disabled)
        return;
      removeTabindex();
      if (props.tabindex >= 0) {
        resetTabindex(triggerElm.value);
      }
      clearTimeout(timeout.value);
      timeout.value = window.setTimeout(() => {
        visible.value = false;
      }, ["click", "contextmenu"].includes(props.trigger) ? 0 : props.hideTimeout);
    }
    function removeTabindex() {
      var _a;
      (_a = triggerElm.value) == null ? void 0 : _a.setAttribute("tabindex", "-1");
    }
    function resetTabindex(ele) {
      removeTabindex();
      ele == null ? void 0 : ele.setAttribute("tabindex", "0");
    }
    function triggerElmFocus() {
      var _a, _b;
      (_b = (_a = triggerElm.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
    }
    function triggerElmBlur() {
      var _a, _b;
      (_b = (_a = triggerElm.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
    }
    const dropdownSize = vue.computed(() => props.size || ELEMENT.size);
    function commandHandler(...args) {
      emit("command", ...args);
    }
    vue.provide("elDropdown", {
      instance: _instance,
      dropdownSize,
      visible,
      handleClick,
      commandHandler,
      show,
      hide,
      trigger: vue.computed(() => props.trigger),
      hideOnClick: vue.computed(() => props.hideOnClick),
      triggerElm
    });
    vue.onMounted(() => {
      if (!props.splitButton) {
        dom.on(triggerElm.value, "focus", () => {
          focusing.value = true;
        });
        dom.on(triggerElm.value, "blur", () => {
          focusing.value = false;
        });
        dom.on(triggerElm.value, "click", () => {
          focusing.value = false;
        });
      }
      if (props.trigger === "hover") {
        dom.on(triggerElm.value, "mouseenter", show);
        dom.on(triggerElm.value, "mouseleave", hide);
      } else if (props.trigger === "click") {
        dom.on(triggerElm.value, "click", handleClick);
      } else if (props.trigger === "contextmenu") {
        dom.on(triggerElm.value, "contextmenu", (e) => {
          e.preventDefault();
          handleClick();
        });
      }
      Object.assign(_instance, {
        handleClick,
        hide,
        resetTabindex
      });
    });
    const handlerMainButtonClick = (event) => {
      emit("click", event);
      hide();
    };
    return {
      visible,
      scrollbar,
      wrapStyle,
      dropdownSize,
      handlerMainButtonClick,
      triggerVnode
    };
  }
});

exports["default"] = script;
//# sourceMappingURL=dropdown.vue_vue_type_script_lang.js.map
