@opentiny/vue-renderless/tabs-mf/vue-bar.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 { addResizeListener, removeResizeListener } from "@opentiny/utils";
import { wheelListener, getBoundRect, handleClickDropdownItem, key, emitAdd, scrollToLeft } from "./index";
import { getAddWheelListener } from "./wheel";
const { addWheelListener, removeWheelListener } = getAddWheelListener(window, document);
const api = ["state", "wheelListener", "handleClickDropdownItem", "key", "emitAdd", "scrollToLeft"];
const renderless = (props, { onMounted, onBeforeUnmount, reactive, watch, inject, computed }, { vm }) => {
  const tabs = inject("tabs", null);
  const state = reactive({
    moreList: [],
    moreLeft: false,
    moreRight: false,
    moreOptions: [],
    tabMoreWidth: 0,
    navPaddingRight: 0,
    withAdd: computed(() => tabs.withAdd),
    slotCustom: tabs.slots.custom,
    separator: inject("separator", null)
  });
  const api2 = {
    getBoundRect: getBoundRect(vm),
    handleClickDropdownItem: handleClickDropdownItem(tabs),
    key,
    emitAdd: emitAdd(tabs),
    scrollToLeft: scrollToLeft(tabs)
  };
  Object.assign(api2, {
    state,
    wheelListener: wheelListener({ vm, api: api2, tabs, state })
  });
  watch(
    () => state.moreList,
    () => {
      state.moreOptions = state.moreList.map((name) => tabs.state.items.find((item) => item.name === name));
    }
  );
  onMounted(() => {
    addWheelListener(vm.$refs.scroll, api2.wheelListener);
    addResizeListener(vm.$el, api2.wheelListener);
    api2.wheelListener();
  });
  onBeforeUnmount(() => {
    removeWheelListener(vm.$refs.scroll, api2.wheelListener);
    removeResizeListener(vm.$el, api2.wheelListener);
  });
  return api2;
};
export {
  api,
  renderless
};