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

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

"use strict";
const vue = require("vue");
const provide = require("./provide.js");
const types = require("./types.js");
const icons = require("../_utils/icons.js");
const clientOnly = require("../_components/client-only.js");
const is = require("../_utils/is.js");
const log = require("../_utils/log.js");
const __default__ = {
  inheritAttrs: false
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  __name: "OTabPane",
  props: types.tabPaneProps,
  setup(__props) {
    const props = __props;
    const isClosed = vue.ref(false);
    const navRef = vue.ref(null);
    const tabInjection = vue.inject(provide.tabInjectKey, null);
    const { navsRef, activeValue, lazy } = tabInjection || {};
    const instance = vue.getCurrentInstance();
    if (is.isUndefined(props.value) && is.isUndefined(props.label)) {
      log.log.warn("OTabPane is missing prop: value or lable");
    }
    const paneKey = vue.computed(() => {
      return props.value ?? props.label ?? (instance == null ? void 0 : instance.uid) ?? Math.random();
    });
    const isActive = vue.computed(() => paneKey.value === (activeValue == null ? void 0 : activeValue.value));
    const hasActived = vue.ref(isActive.value);
    const toMount = vue.computed(() => {
      if (isActive.value) {
        return true;
      }
      if ((props.lazy || lazy) && !hasActived.value) {
        return false;
      }
      if (props.unmountOnHide) {
        return false;
      }
      return true;
    });
    vue.watch(
      () => isActive.value,
      (v) => {
        if (v) {
          hasActived.value = true;
          tabInjection == null ? void 0 : tabInjection.updateValue(paneKey.value, navRef.value);
        }
      }
    );
    const navClick = () => {
      if (!props.disabled) {
        tabInjection == null ? void 0 : tabInjection.updateValue(paneKey.value, navRef.value);
      }
    };
    const navCloseClick = (e) => {
      e.stopImmediatePropagation();
      isClosed.value = true;
      tabInjection == null ? void 0 : tabInjection.onDeletePane(paneKey.value, e);
    };
    vue.onMounted(() => {
      vue.nextTick(() => {
        tabInjection == null ? void 0 : tabInjection.initValue(paneKey.value, navRef.value);
      });
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        vue.Fragment,
        null,
        [
          vue.createVNode(vue.unref(clientOnly), null, {
            default: vue.withCtx(() => [
              vue.unref(navsRef) && !isClosed.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
                key: 0,
                to: vue.unref(navsRef),
                disabled: !vue.unref(navsRef)
              }, [
                vue.createElementVNode(
                  "div",
                  {
                    ref_key: "navRef",
                    ref: navRef,
                    class: vue.normalizeClass([
                      "o-tab-nav",
                      {
                        "o-tab-nav-active": isActive.value,
                        "o-tab-nav-disabled": props.disabled,
                        "o-tab-nav-closable": props.closable
                      }
                    ]),
                    onClick: navClick
                  },
                  [
                    vue.renderSlot(_ctx.$slots, "nav", {}, () => [
                      vue.createTextVNode(
                        vue.toDisplayString(props.label || props.value),
                        1
                        /* TEXT */
                      )
                    ]),
                    props.closable ? (vue.openBlock(), vue.createElementBlock("div", {
                      key: 0,
                      class: "o-tab-nav-close",
                      onClick: navCloseClick
                    }, [
                      vue.createVNode(vue.unref(icons.IconClose))
                    ])) : vue.createCommentVNode("v-if", true)
                  ],
                  2
                  /* CLASS */
                )
              ], 8, ["to", "disabled"])) : vue.createCommentVNode("v-if", true)
            ]),
            _: 3
            /* FORWARDED */
          }),
          vue.createVNode(vue.Transition, {
            name: props.transition
          }, {
            default: vue.withCtx(() => [
              !isClosed.value && toMount.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
                "div",
                vue.mergeProps({
                  key: 0,
                  class: [
                    "o-tab-pane",
                    {
                      "o-tab-pane-active": isActive.value,
                      "o-tab-pane-disabled": props.disabled,
                      "o-tab-pane-closable": props.closable
                    }
                  ]
                }, _ctx.$attrs),
                [
                  vue.renderSlot(_ctx.$slots, "default")
                ],
                16
                /* FULL_PROPS */
              )), [
                [vue.vShow, isActive.value]
              ]) : vue.createCommentVNode("v-if", true)
            ]),
            _: 3
            /* FORWARDED */
          }, 8, ["name"])
        ],
        64
        /* STABLE_FRAGMENT */
      );
    };
  }
});
module.exports = _sfc_main;