@varlet/ui/es/tabs-items/TabsItems.mjs

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

var __async = (__this, __arguments, generator) => {
  return new Promise((resolve, reject) => {
    var fulfilled = (value) => {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    };
    var rejected = (value) => {
      try {
        step(generator.throw(value));
      } catch (e) {
        reject(e);
      }
    };
    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
    step((generator = generator.apply(__this, __arguments)).next());
  });
};
import { defineComponent, ref, watch } from "vue";
import { call, doubleRaf } from "@varlet/shared";
import VarSwipe from "../swipe/index.mjs";
import { createNamespace } from "../utils/components.mjs";
import { props } from "./props.mjs";
import { useTabItem } from "./provide.mjs";
const { name, n } = createNamespace("tabs-items");
import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
function __render__(_ctx, _cache) {
  const _component_var_swipe = _resolveComponent("var-swipe");
  return _openBlock(), _createBlock(_component_var_swipe, {
    ref: "swipe",
    class: _normalizeClass(_ctx.n()),
    loop: _ctx.loop,
    touchable: _ctx.canSwipe,
    indicator: false,
    onChange: _ctx.handleSwipeChange
  }, {
    default: _withCtx(() => [
      _renderSlot(_ctx.$slots, "default")
    ]),
    _: 3
    /* FORWARDED */
  }, 8, ["class", "loop", "touchable", "onChange"]);
}
const __sfc__ = defineComponent({
  name,
  components: { VarSwipe },
  props,
  setup(props2) {
    const swipe = ref(null);
    const { tabItemList, bindTabItem, length } = useTabItem();
    bindTabItem({});
    watch(() => props2.active, handleActiveChange);
    watch(
      () => length.value,
      () => __async(this, null, function* () {
        yield doubleRaf();
        handleActiveChange(props2.active);
      })
    );
    function matchName(active) {
      return tabItemList.find(({ name: name2 }) => active === name2.value);
    }
    function matchIndex(active) {
      return tabItemList.find(({ index }) => active === index.value);
    }
    function matchActive(active) {
      return matchName(active) || matchIndex(active);
    }
    function handleActiveChange(newValue) {
      var _a;
      const newActiveTabItemProvider = matchActive(newValue);
      if (!newActiveTabItemProvider) {
        return;
      }
      tabItemList.forEach(({ setCurrent }) => setCurrent(false));
      newActiveTabItemProvider.setCurrent(true);
      (_a = swipe.value) == null ? void 0 : _a.to(newActiveTabItemProvider.index.value);
    }
    function handleSwipeChange(currentIndex) {
      var _a;
      const tabItem = tabItemList.find(({ index }) => index.value === currentIndex);
      const active = (_a = tabItem.name.value) != null ? _a : tabItem.index.value;
      call(props2["onUpdate:active"], active);
    }
    function getSwipe() {
      return swipe.value;
    }
    return {
      swipe,
      n,
      handleSwipeChange,
      getSwipe
    };
  }
});
__sfc__.render = __render__;
var stdin_default = __sfc__;
export {
  stdin_default as default
};