@opensig/opendesign/es/tab/OTabPane.vue.mjs

import { defineComponent, useSlots, inject, getCurrentInstance, computed, ref, watch, createBlock, openBlock, Transition, withCtx, withDirectives, createCommentVNode, createElementBlock, normalizeClass, renderSlot, vShow } from "vue";
import { isUndefined } from "../_utils/is.mjs";
import { log } from "../_utils/log.mjs";
import { isEmptySlot } from "../_utils/vue-utils.mjs";
import { tabInjectKey } from "./provide.mjs";
import { tabPaneProps } from "./types.mjs";
const _hoisted_1 = ["data-tab-pane-key"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OTabPane",
  props: tabPaneProps,
  setup(__props) {
    const props = __props;
    useSlots();
    const runtimeSlots = useSlots();
    const tabInjection = inject(tabInjectKey);
    const instance = getCurrentInstance();
    if (isUndefined(props.value) && isUndefined(props.label)) {
      log.warn("OTabPane is missing prop: value or label");
    }
    const paneKey = computed(() => {
      return props.value ?? props.label ?? (instance == null ? void 0 : instance.uid) ?? Math.random();
    });
    const registerSelf = () => {
      tabInjection == null ? void 0 : tabInjection.addChild({
        uid: instance.uid,
        getVNode: () => instance == null ? void 0 : instance.vnode,
        props,
        paneKey,
        navRenderer: isEmptySlot(runtimeSlots.nav) ? void 0 : () => {
          var _a;
          return (_a = runtimeSlots.nav) == null ? void 0 : _a.call(runtimeSlots);
        }
      });
    };
    registerSelf();
    const isActive = computed(() => {
      var _a;
      return paneKey.value === ((_a = tabInjection == null ? void 0 : tabInjection.activeValue) == null ? void 0 : _a.value);
    });
    const hasActived = ref(isActive.value);
    const toMount = computed(() => {
      if (isActive.value) {
        return true;
      }
      if ((props.lazy || (tabInjection == null ? void 0 : tabInjection.lazy)) && !hasActived.value) {
        return false;
      }
      if (props.unmountOnHide) {
        return false;
      }
      return true;
    });
    watch(
      () => isActive.value,
      (v) => {
        if (v) {
          hasActived.value = true;
        }
      }
    );
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Transition, {
        name: props.transition
      }, {
        default: withCtx(() => [
          toMount.value ? withDirectives((openBlock(), createElementBlock("div", {
            key: 0,
            class: normalizeClass([
              "o-tab-pane",
              {
                "o-tab-pane-active": isActive.value,
                "o-tab-pane-disabled": props.disabled,
                "o-tab-pane-closable": props.closable
              }
            ]),
            "data-tab-pane-key": paneKey.value
          }, [
            renderSlot(_ctx.$slots, "default")
          ], 10, _hoisted_1)), [
            [vShow, isActive.value]
          ]) : createCommentVNode("v-if", true)
        ]),
        _: 3
        /* FORWARDED */
      }, 8, ["name"]);
    };
  }
});
export {
  _sfc_main as default
};