wetrade-design
Version:
一款多语言支持Vue3的UI框架
124 lines • 3.65 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { createVNode as _createVNode } from "vue";
import { defineComponent, ref } from 'vue';
import KeyCode from '../../../_util/KeyCode';
import classNames from '../../../_util/classNames';
export default defineComponent({
compatConfig: {
MODE: 3
},
name: 'TabNode',
props: {
id: {
type: String
},
prefixCls: {
type: String
},
tab: {
type: Object
},
active: {
type: Boolean
},
closable: {
type: Boolean
},
marginOfLineTab: {
type: Number
},
index: {
type: Number
},
// editable: { type: Object as PropType<EditableConfig> },
onClick: {
type: Function
},
onResize: {
type: Function
},
renderWrapper: {
type: Function
},
removeAriaLabel: {
type: String
},
// onRemove: { type: Function as PropType<() => void> },
onFocus: {
type: Function
}
},
emits: ['click', 'resize', 'remove', 'focus'],
setup: function setup(props, _ref) {
var expose = _ref.expose,
attrs = _ref.attrs;
var domRef = ref();
function onInternalClick(e) {
var _props$tab;
if ((_props$tab = props.tab) !== null && _props$tab !== void 0 && _props$tab.disabled) {
return;
}
props.onClick(e);
}
expose({
domRef: domRef
});
// onBeforeUnmount(() => {
// props.onRemove();
// });
// function onRemoveTab(event: MouseEvent | KeyboardEvent) {
// event.preventDefault();
// event.stopPropagation();
// props.editable.onEdit('remove', {
// key: props.tab?.key,
// event,
// });
// }
// const removable = computed(
// () => props.editable && props.closable !== false && !props.tab?.disabled,
// );
return function () {
var _classNames;
var prefixCls = props.prefixCls,
id = props.id,
active = props.active,
_props$tab2 = props.tab,
key = _props$tab2.key,
tab = _props$tab2.tab,
disabled = _props$tab2.disabled,
renderWrapper = props.renderWrapper,
onFocus = props.onFocus;
var tabPrefix = "".concat(prefixCls, "-tab");
var node = _createVNode("div", {
"key": key,
"ref": domRef,
"class": classNames(tabPrefix, (_classNames = {}, _defineProperty(_classNames, "".concat(tabPrefix, "-active"), active), _defineProperty(_classNames, "".concat(tabPrefix, "-disabled"), disabled), _classNames)),
"style": _extends(attrs.style || {}, props.index === 0 && props.marginOfLineTab !== undefined ? {
marginLeft: "".concat(props.marginOfLineTab, "px")
} : {}),
"onClick": onInternalClick
}, [_createVNode("div", {
"role": "tab",
"aria-selected": active,
"id": id && "".concat(id, "-tab-").concat(key),
"class": "".concat(tabPrefix, "-btn"),
"aria-controls": id && "".concat(id, "-panel-").concat(key),
"aria-disabled": disabled,
"tabindex": disabled ? null : 0,
"onClick": function onClick(e) {
e.stopPropagation();
onInternalClick(e);
},
"onKeydown": function onKeydown(e) {
if ([KeyCode.SPACE, KeyCode.ENTER].includes(e.which)) {
e.preventDefault();
onInternalClick(e);
}
},
"onFocus": onFocus
}, [typeof tab === 'function' ? tab() : tab])]);
return renderWrapper ? renderWrapper(node) : node;
};
}
});