@opensig/opendesign/lib/tab/OTabPane.vue.js

"use strict";
const vue = require("vue");
const is = require("../_utils/is.js");
const log = require("../_utils/log.js");
const vueUtils = require("../_utils/vue-utils.js");
const provide = require("./provide.js");
const types = require("./types.js");
const _hoisted_1 = ["data-tab-pane-key"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "OTabPane",
  props: types.tabPaneProps,
  setup(__props) {
    const props = __props;
    vue.useSlots();
    const runtimeSlots = vue.useSlots();
    const tabInjection = vue.inject(provide.tabInjectKey);
    const instance = vue.getCurrentInstance();
    if (is.isUndefined(props.value) && is.isUndefined(props.label)) {
      log.log.warn("OTabPane is missing prop: value or label");
    }
    const paneKey = vue.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: vueUtils.isEmptySlot(runtimeSlots.nav) ? void 0 : () => {
          var _a;
          return (_a = runtimeSlots.nav) == null ? void 0 : _a.call(runtimeSlots);
        }
      });
    };
    registerSelf();
    const isActive = vue.computed(() => {
      var _a;
      return paneKey.value === ((_a = tabInjection == null ? void 0 : tabInjection.activeValue) == null ? void 0 : _a.value);
    });
    const hasActived = vue.ref(isActive.value);
    const toMount = vue.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;
    });
    vue.watch(
      () => isActive.value,
      (v) => {
        if (v) {
          hasActived.value = true;
        }
      }
    );
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.Transition, {
        name: props.transition
      }, {
        default: vue.withCtx(() => [
          toMount.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
            key: 0,
            class: vue.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
          }, [
            vue.renderSlot(_ctx.$slots, "default")
          ], 10, _hoisted_1)), [
            [vue.vShow, isActive.value]
          ]) : vue.createCommentVNode("v-if", true)
        ]),
        _: 3
        /* FORWARDED */
      }, 8, ["name"]);
    };
  }
});
module.exports = _sfc_main;