hongluan-ui
Version:
Hongluan Component Library for Vue 3
228 lines (223 loc) • 7.45 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
require('../../../utils/index.js');
require('../../../constants/index.js');
var index$3 = require('../../icon/index.js');
require('../../system-icon/index.js');
require('../../../tokens/index.js');
require('../../../hooks/index.js');
var tabNav = require('./tab-nav.js');
var runtime = require('../../../utils/vue/props/runtime.js');
var shared = require('@vue/shared');
var types = require('../../../utils/types.js');
var event = require('../../../constants/event.js');
var index = require('../../../hooks/use-ordered-children/index.js');
var index$1 = require('../../../hooks/use-deprecated/index.js');
var index$2 = require('../../../hooks/use-namespace/index.js');
var tabs = require('../../../tokens/tabs.js');
var aria = require('../../../constants/aria.js');
var add = require('../../system-icon/src/add.js');
const tabsProps = runtime.buildProps({
type: {
type: String,
values: ["line", "button", ""],
default: ""
},
activeName: {
type: [String, Number]
},
closable: Boolean,
addable: Boolean,
modelValue: {
type: [String, Number]
},
editable: Boolean,
tabPosition: {
type: String,
values: ["top", "right", "bottom", "left"],
default: "top"
},
beforeLeave: {
type: runtime.definePropType(Function),
default: () => true
},
showPane: {
type: Boolean,
default: true
},
paneHeight: {
type: String
},
navHeight: {
type: String
},
navPadding: {
type: String
},
gap: {
type: String
},
stretch: Boolean
});
const isPanelName = (value) => shared.isString(value) || types.isNumber(value);
const tabsEmits = {
[event.UPDATE_MODEL_EVENT]: (name) => isPanelName(name),
[event.INPUT_EVENT]: (name) => isPanelName(name),
tabClick: (pane, ev) => ev instanceof Event,
tabChange: (name) => isPanelName(name),
edit: (paneName, action) => ["remove", "add"].includes(action),
tabRemove: (name) => isPanelName(name),
tabAdd: () => true
};
const Tabs = vue.defineComponent({
name: "Tabs",
props: tabsProps,
emits: tabsEmits,
setup(props, {
emit,
slots,
expose
}) {
var _a, _b;
const isVertical = vue.computed(() => ["left", "right"].includes(props.tabPosition));
const {
children: panes,
addChild: sortPane,
removeChild: unregisterPane
} = index.useOrderedChildren(vue.getCurrentInstance(), "TabPane");
const instance = vue.getCurrentInstance();
const nav$ = vue.ref();
const currentName = vue.ref((_b = (_a = props.modelValue) != null ? _a : props.activeName) != null ? _b : "0");
index$1.useDeprecated({
scope: "Tabs",
type: "Event",
from: "input",
replacement: "tab-change",
version: "2.5.0",
ref: "https://hongluan-ui.github.io/hongluan-ui/2x/#/zh-CN/component/tabs.html#tabs-events"
}, vue.computed(() => {
var _a2;
return shared.isFunction((_a2 = instance.vnode.props) == null ? void 0 : _a2.onInput);
}));
index$1.useDeprecated({
from: '"activeName"',
replacement: '"model-value" or "v-model"',
scope: "Tabs",
version: "2.5.0",
ref: "https://hongluan-ui.github.io/hongluan-ui/2x/#/zh-CN/component/tabs.html#attributes",
type: "Attribute"
}, vue.computed(() => !!props.activeName));
const {
namespace
} = index$2.useNamespace("tabs");
const setCurrentName = async (value, trigger = false) => {
var _a2, _b2, _c;
if (currentName.value === value || types.isUndefined(value))
return;
try {
const canLeave = await ((_a2 = props.beforeLeave) == null ? void 0 : _a2.call(props, value, currentName.value));
if (canLeave !== false) {
currentName.value = value;
if (trigger) {
emit(event.UPDATE_MODEL_EVENT, value);
emit("tabChange", value);
}
(_c = (_b2 = nav$.value) == null ? void 0 : _b2.removeFocus) == null ? void 0 : _c.call(_b2);
}
} catch (e) {
}
};
const handleTabClick = (tab, tabName, event) => {
if (tab.props.disabled)
return;
setCurrentName(tabName, true);
emit("tabClick", tab, event);
};
const handleTabRemove = (pane, ev) => {
if (pane.props.disabled || types.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");
};
vue.watch(() => props.activeName, (modelValue) => setCurrentName(modelValue));
vue.watch(() => props.modelValue, (modelValue) => setCurrentName(modelValue));
vue.watch(currentName, async () => {
var _a2;
await vue.nextTick();
(_a2 = nav$.value) == null ? void 0 : _a2.scrollToActiveTab();
});
vue.provide(tabs.tabsRootContextKey, {
props,
currentName,
registerPane: (pane) => {
panes.value.push(pane);
},
sortPane,
unregisterPane
});
expose({
currentName
});
const TabNavRenderer = ({
render
}) => {
return render();
};
return () => {
const addSlot = slots["add-icon"];
const newButton = props.editable || props.addable ? vue.createVNode("div", {
"class": ["tab-new", isVertical.value && "new-tab-vertical"],
"tabindex": "0",
"onClick": handleTabAdd,
"onKeydown": (ev) => {
if (ev.code === aria.EVENT_CODE.enter)
handleTabAdd();
}
}, [addSlot ? vue.renderSlot(slots, "add-icon") : vue.createVNode(index$3.HlIcon, null, {
default: () => [vue.createVNode(add["default"], null, null)]
})]) : null;
const header = vue.createVNode("div", {
"class": ["tabs-header", `at-${props.tabPosition}`, isVertical.value && "header-vertical"]
}, [vue.createVNode(TabNavRenderer, {
"render": () => {
const hasLabelSlot = panes.value.some((pane) => pane.slots.label);
return vue.createVNode(tabNav["default"], {
ref: nav$,
currentName: currentName.value,
editable: props.editable,
type: props.type,
panes: panes.value,
stretch: props.stretch,
onTabClick: handleTabClick,
onTabRemove: handleTabRemove
}, {
$stable: !hasLabelSlot
});
}
}, null), newButton]);
const panels = vue.createVNode("div", {
"class": "tabs-content"
}, [vue.renderSlot(slots, "default")]);
return vue.createVNode("div", {
"class": {
[namespace.value]: true,
"tabs-line": props.type === "line",
"tabs-button": props.type === "button",
"no-pane": !props.showPane,
[`tabs-${props.tabPosition}`]: true
},
"style": [props.paneHeight ? `--tabs-pane-height:${props.paneHeight}` : "", props.navHeight ? `--tabs-height:${props.navHeight}` : "", props.navPadding ? `--tabs-padding:${props.navPadding}` : "", props.gap ? `--tabs-gap:${props.gap}` : ""]
}, [...props.tabPosition !== "bottom" ? [header, panels] : [panels, header]]);
};
}
});
exports["default"] = Tabs;
exports.tabsEmits = tabsEmits;
exports.tabsProps = tabsProps;
//# sourceMappingURL=tabs.js.map