@opentiny/vue-renderless/dropdown/vue.js

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

import "../chunk-G2ADBYYC.js";
import { guid } from "@opentiny/utils";
import {
  watchVisible,
  watchFocusing,
  show,
  hide,
  handleClick,
  handleTriggerKeyDown,
  handleItemKeyDown,
  resetTabindex,
  removeTabindex,
  initAria,
  initEvent,
  handleMenuItemClick,
  handleMainButtonClick,
  triggerElmFocus,
  initDomOperation,
  mounted,
  beforeDistory,
  clickOutside,
  toggleFocus
} from "./index";
const api = ["state", "handleMainButtonClick", "hide", "show", "initDomOperation", "handleClick", "clickOutside"];
const renderless = (props, { reactive, watch, provide, onMounted, computed, onBeforeUnmount }, { emit, parent, broadcast, vm, nextTick, mode, designConfig, useBreakpoint }) => {
  const api2 = {};
  const { current } = useBreakpoint();
  const state = reactive({
    current,
    visible: false,
    timeout: null,
    focusing: false,
    menuItems: [],
    menuItemsArray: [],
    triggerElm: null,
    dropdownElm: null,
    listId: `dropdown-menu-${guid()}`,
    showIcon: props.showIcon,
    showSelfIcon: props.showSelfIcon,
    designConfig,
    trigger: computed(() => {
      var _a;
      return props.trigger || ((_a = designConfig == null ? void 0 : designConfig.props) == null ? void 0 : _a.trigger) || "hover";
    }),
    visibleIsBoolean: computed(() => typeof props.visible === "boolean")
  });
  provide("dropdownVm", vm);
  Object.assign(api2, {
    state,
    watchVisible: watchVisible({ broadcast, emit, nextTick }),
    watchFocusing: watchFocusing(parent),
    show: show({ props, state, emit }),
    hide: hide({ api: api2, props, state, emit }),
    mounted: mounted({ api: api2, vm, state, broadcast, props }),
    handleClick: handleClick({ api: api2, props, state, emit }),
    handleTriggerKeyDown: handleTriggerKeyDown({ api: api2, state }),
    handleItemKeyDown: handleItemKeyDown({ api: api2, props, state, emit }),
    resetTabindex: resetTabindex(api2),
    removeTabindex: removeTabindex(state),
    initAria: initAria({ state, props }),
    initEvent: initEvent({ api: api2, props, state, vm, mode }),
    handleMenuItemClick: handleMenuItemClick({ props, state, emit }),
    handleMainButtonClick: handleMainButtonClick({ api: api2, emit }),
    triggerElmFocus: triggerElmFocus(state),
    initDomOperation: initDomOperation({ api: api2, state, vm }),
    beforeDistory: beforeDistory({ vm, api: api2, state }),
    clickOutside: clickOutside({ props, api: api2 }),
    toggleFocusOnTrue: toggleFocus({ state, value: true }),
    toggleFocusOnFalse: toggleFocus({ state, value: false })
  });
  if (typeof props.visible === "boolean") {
    watch(() => props.visible, api2.watchVisible);
  } else {
    watch(() => state.visible, api2.watchVisible);
  }
  watch(() => state.focusing, api2.watchFocusing);
  onMounted(api2.mounted);
  onBeforeUnmount(api2.beforeDistory);
  return api2;
};
export {
  api,
  renderless
};