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

<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>

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