wetrade-design
Version:
一款多语言支持Vue3的UI框架
131 lines (130 loc) • 4.02 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _KeyCode = _interopRequireDefault(require("../../../_util/KeyCode"));
var _classNames2 = _interopRequireDefault(require("../../../_util/classNames"));
var _default = (0, _vue.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 = (0, _vue.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 = (0, _vue.createVNode)("div", {
"key": key,
"ref": domRef,
"class": (0, _classNames2.default)(tabPrefix, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(tabPrefix, "-active"), active), (0, _defineProperty2.default)(_classNames, "".concat(tabPrefix, "-disabled"), disabled), _classNames)),
"style": (0, _extends2.default)(attrs.style || {}, props.index === 0 && props.marginOfLineTab !== undefined ? {
marginLeft: "".concat(props.marginOfLineTab, "px")
} : {}),
"onClick": onInternalClick
}, [(0, _vue.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.default.SPACE, _KeyCode.default.ENTER].includes(e.which)) {
e.preventDefault();
onInternalClick(e);
}
},
"onFocus": onFocus
}, [typeof tab === 'function' ? tab() : tab])]);
return renderWrapper ? renderWrapper(node) : node;
};
}
});
exports.default = _default;