@opentiny/vue-renderless/tabs-mf/vue-nav.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";
const api = ["state"];
const renderless = (props, { reactive, inject, computed, onMounted, onBeforeUnmount, watch, nextTick }, { vm }) => {
  const tabs = inject("tabs", null);
  const state = reactive({
    navItems: computed(() => tabs.state.items),
    currentNav: computed(() => tabs.state.navs[state.currentIndex]),
    currentIndex: computed(
      () => tabs.state.navs.findIndex((item) => tabs.state.cacheCurrentItem && tabs.state.cacheCurrentItem.name === item.name)
    ),
    currentWidth: 0,
    currentPosition: 0
  });
  const updateSliderBar = () => {
    const nav = state.currentNav;
    if (nav && nav.$el) {
      state.currentWidth = nav.$el.offsetWidth || 0;
      state.currentPosition = nav.$el.offsetLeft || 0;
    }
  };
  let mutationObserver;
  let resizeObserver;
  onMounted(() => {
    mutationObserver = new MutationObserver(() => {
      nextTick(() => {
        updateSliderBar();
      });
    });
    mutationObserver.observe(vm.$el, { attributes: true, subtree: true, childList: true });
    if (typeof ResizeObserver !== "undefined") {
      resizeObserver = new ResizeObserver(() => {
        nextTick(() => {
          updateSliderBar();
        });
      });
      const navItems = vm.$el.querySelectorAll('[data-tag="tiny-tab-nav-item"]');
      navItems.forEach((item) => {
        resizeObserver.observe(item);
      });
    }
    nextTick(() => {
      updateSliderBar();
    });
  });
  watch(
    () => state.currentNav,
    () => {
      nextTick(() => {
        updateSliderBar();
      });
    },
    { immediate: true }
  );
  watch(
    () => state.navItems,
    () => {
      if (resizeObserver) {
        resizeObserver.disconnect();
        nextTick(() => {
          const navItems = vm.$el.querySelectorAll('[data-tag="tiny-tab-nav-item"]');
          navItems.forEach((item) => {
            resizeObserver.observe(item);
          });
          updateSliderBar();
        });
      } else {
        nextTick(() => {
          updateSliderBar();
        });
      }
    },
    { deep: true }
  );
  onBeforeUnmount(() => {
    if (mutationObserver) {
      mutationObserver.disconnect();
      mutationObserver = null;
    }
    if (resizeObserver) {
      resizeObserver.disconnect();
      resizeObserver = null;
    }
  });
  Object.assign(api, {
    state
  });
  return api;
};
export {
  api,
  renderless
};