| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- import { defineComponent, computed, getCurrentInstance, ref, watch, nextTick, provide, createVNode, renderSlot } from 'vue';
- import { omit } from 'lodash-unified';
- import { ElIcon } from '../../icon/index.mjs';
- import { Plus } from '@element-plus/icons-vue';
- import { tabsRootContextKey } from './constants.mjs';
- import TabNav from './tab-nav.mjs';
- import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
- import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
- import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
- import { useOrderedChildren } from '../../../hooks/use-ordered-children/index.mjs';
- import { EVENT_CODE } from '../../../constants/aria.mjs';
- import { isString } from '@vue/shared';
- import { isNumber, isUndefined } from '../../../utils/types.mjs';
- const tabsProps = buildProps({
- type: {
- type: String,
- values: ["card", "border-card", ""],
- default: ""
- },
- closable: Boolean,
- addable: Boolean,
- modelValue: {
- type: [String, Number]
- },
- editable: Boolean,
- tabPosition: {
- type: String,
- values: ["top", "right", "bottom", "left"],
- default: "top"
- },
- beforeLeave: {
- type: definePropType(Function),
- default: () => true
- },
- stretch: Boolean
- });
- const isPaneName = (value) => isString(value) || isNumber(value);
- const tabsEmits = {
- [UPDATE_MODEL_EVENT]: (name) => isPaneName(name),
- tabClick: (pane, ev) => ev instanceof Event,
- tabChange: (name) => isPaneName(name),
- edit: (paneName, action) => ["remove", "add"].includes(action),
- tabRemove: (name) => isPaneName(name),
- tabAdd: () => true
- };
- const Tabs = defineComponent({
- name: "ElTabs",
- props: tabsProps,
- emits: tabsEmits,
- setup(props, {
- emit,
- slots,
- expose
- }) {
- var _a;
- const ns = useNamespace("tabs");
- const isVertical = computed(() => ["left", "right"].includes(props.tabPosition));
- const {
- children: panes,
- addChild: registerPane,
- removeChild: unregisterPane,
- ChildrenSorter: PanesSorter
- } = useOrderedChildren(getCurrentInstance(), "ElTabPane");
- const nav$ = ref();
- const currentName = ref((_a = props.modelValue) != null ? _a : "0");
- const setCurrentName = async (value, trigger = false) => {
- var _a2, _b, _c, _d;
- if (currentName.value === value || isUndefined(value))
- return;
- try {
- let canLeave;
- if (props.beforeLeave) {
- const result = props.beforeLeave(value, currentName.value);
- canLeave = result instanceof Promise ? await result : result;
- } else {
- canLeave = true;
- }
- if (canLeave !== false) {
- const isFocusInsidePane = (_a2 = panes.value.find((item) => item.paneName === currentName.value)) == null ? void 0 : _a2.isFocusInsidePane();
- currentName.value = value;
- if (trigger) {
- emit(UPDATE_MODEL_EVENT, value);
- emit("tabChange", value);
- }
- (_c = (_b = nav$.value) == null ? void 0 : _b.removeFocus) == null ? void 0 : _c.call(_b);
- if (isFocusInsidePane) {
- (_d = nav$.value) == null ? void 0 : _d.focusActiveTab();
- }
- }
- } catch (e) {
- }
- };
- const handleTabClick = (tab, tabName, event) => {
- if (tab.props.disabled)
- return;
- emit("tabClick", tab, event);
- setCurrentName(tabName, true);
- };
- const handleTabRemove = (pane, ev) => {
- if (pane.props.disabled || isUndefined(pane.props.name))
- return;
- ev.stopPropagation();
- emit("edit", pane.props.name, "remove");
- emit("tabRemove", pane.props.name);
- };
- const handleTabAdd = () => {
- emit("edit", void 0, "add");
- emit("tabAdd");
- };
- const swapChildren = (vnode) => {
- const actualFirstChild = vnode.el.firstChild;
- const firstChild = ["bottom", "right"].includes(props.tabPosition) ? vnode.children[0].el : vnode.children[1].el;
- if (actualFirstChild !== firstChild) {
- actualFirstChild.before(firstChild);
- }
- };
- watch(() => props.modelValue, (modelValue) => setCurrentName(modelValue));
- watch(currentName, async () => {
- var _a2;
- await nextTick();
- (_a2 = nav$.value) == null ? void 0 : _a2.scrollToActiveTab();
- });
- provide(tabsRootContextKey, {
- props,
- currentName,
- registerPane,
- unregisterPane,
- nav$
- });
- expose({
- currentName,
- get tabNavRef() {
- return omit(nav$.value, ["scheduleRender"]);
- }
- });
- return () => {
- const addSlot = slots["add-icon"];
- const newButton = props.editable || props.addable ? createVNode("div", {
- "class": [ns.e("new-tab"), isVertical.value && ns.e("new-tab-vertical")],
- "tabindex": "0",
- "onClick": handleTabAdd,
- "onKeydown": (ev) => {
- if ([EVENT_CODE.enter, EVENT_CODE.numpadEnter].includes(ev.code))
- handleTabAdd();
- }
- }, [addSlot ? renderSlot(slots, "add-icon") : createVNode(ElIcon, {
- "class": ns.is("icon-plus")
- }, {
- default: () => [createVNode(Plus, null, null)]
- })]) : null;
- const tabNav = () => createVNode(TabNav, {
- "ref": nav$,
- "currentName": currentName.value,
- "editable": props.editable,
- "type": props.type,
- "panes": panes.value,
- "stretch": props.stretch,
- "onTabClick": handleTabClick,
- "onTabRemove": handleTabRemove
- }, null);
- const header = createVNode("div", {
- "class": [ns.e("header"), isVertical.value && ns.e("header-vertical"), ns.is(props.tabPosition)]
- }, [createVNode(PanesSorter, null, {
- default: tabNav,
- $stable: true
- }), newButton]);
- const panels = createVNode("div", {
- "class": ns.e("content")
- }, [renderSlot(slots, "default")]);
- return createVNode("div", {
- "class": [ns.b(), ns.m(props.tabPosition), {
- [ns.m("card")]: props.type === "card",
- [ns.m("border-card")]: props.type === "border-card"
- }],
- "onVnodeMounted": swapChildren,
- "onVnodeUpdated": swapChildren
- }, [panels, header]);
- };
- }
- });
- var Tabs$1 = Tabs;
- export { Tabs$1 as default, tabsEmits, tabsProps };
- //# sourceMappingURL=tabs.mjs.map
|