import { defineComponent, getCurrentInstance, ref, computed, watch, provide, onMounted } from 'vue';
import { ElButton } from '../../button/index.mjs';
import _Popper from '../../popper/index.mjs';
import { ElScrollbar } from '../../scrollbar/index.mjs';
import { ElIcon } from '../../icon/index.mjs';
import { addClass, removeClass, on } from '../../../utils/dom.mjs';
import { addUnit } from '../../../utils/util.mjs';
import { ArrowDown } from '@element-plus/icons-vue';
import { useDropdown } from './useDropdown.mjs';
import { Effect } from '../../popper/src/use-popper/defaults.mjs';

const { ButtonGroup: ElButtonGroup } = ElButton;
var script = defineComponent({
  name: "ElDropdown",
  components: {
    ElButton,
    ElButtonGroup,
    ElScrollbar,
    ElPopper: _Popper,
    ElIcon,
    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: Effect.LIGHT
    },
    maxHeight: {
      type: [Number, String],
      default: ""
    }
  },
  emits: ["visible-change", "click", "command"],
  setup(props, { emit }) {
    const _instance = getCurrentInstance();
    const { ELEMENT } = useDropdown();
    const timeout = ref(null);
    const visible = ref(false);
    const scrollbar = ref(null);
    const wrapStyle = computed(() => ({
      maxHeight: addUnit(props.maxHeight)
    }));
    watch(() => visible.value, (val) => {
      if (val)
        triggerElmFocus();
      if (!val)
        triggerElmBlur();
      emit("visible-change", val);
    });
    const focusing = ref(false);
    watch(() => focusing.value, (val) => {
      const selfDefine = triggerElm.value;
      if (selfDefine) {
        if (val) {
          addClass(selfDefine, "focusing");
        } else {
          removeClass(selfDefine, "focusing");
        }
      }
    });
    const triggerVnode = ref(null);
    const triggerElm = 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 = computed(() => props.size || ELEMENT.size);
    function commandHandler(...args) {
      emit("command", ...args);
    }
    provide("elDropdown", {
      instance: _instance,
      dropdownSize,
      visible,
      handleClick,
      commandHandler,
      show,
      hide,
      trigger: computed(() => props.trigger),
      hideOnClick: computed(() => props.hideOnClick),
      triggerElm
    });
    onMounted(() => {
      if (!props.splitButton) {
        on(triggerElm.value, "focus", () => {
          focusing.value = true;
        });
        on(triggerElm.value, "blur", () => {
          focusing.value = false;
        });
        on(triggerElm.value, "click", () => {
          focusing.value = false;
        });
      }
      if (props.trigger === "hover") {
        on(triggerElm.value, "mouseenter", show);
        on(triggerElm.value, "mouseleave", hide);
      } else if (props.trigger === "click") {
        on(triggerElm.value, "click", handleClick);
      } else if (props.trigger === "contextmenu") {
        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
    };
  }
});

export { script as default };
//# sourceMappingURL=dropdown.vue_vue_type_script_lang.mjs.map
