You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
2.8 KiB
119 lines
2.8 KiB
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
|
|
// Utils
|
|
import { createNamespace, isDef } from '../utils';
|
|
import { emit, inherit } from '../utils/functional';
|
|
import { routeProps, functionalRoute } from '../utils/router';
|
|
import { cellProps } from './shared'; // Components
|
|
|
|
import Icon from '../icon'; // Types
|
|
|
|
var _createNamespace = createNamespace('cell'),
|
|
createComponent = _createNamespace[0],
|
|
bem = _createNamespace[1];
|
|
|
|
function Cell(h, props, slots, ctx) {
|
|
var icon = props.icon,
|
|
size = props.size,
|
|
title = props.title,
|
|
label = props.label,
|
|
value = props.value,
|
|
isLink = props.isLink;
|
|
var showTitle = slots.title || isDef(title);
|
|
|
|
function Label() {
|
|
var showLabel = slots.label || isDef(label);
|
|
|
|
if (showLabel) {
|
|
return h("div", {
|
|
"class": [bem('label'), props.labelClass]
|
|
}, [slots.label ? slots.label() : label]);
|
|
}
|
|
}
|
|
|
|
function Title() {
|
|
if (showTitle) {
|
|
return h("div", {
|
|
"class": [bem('title'), props.titleClass],
|
|
"style": props.titleStyle
|
|
}, [slots.title ? slots.title() : h("span", [title]), Label()]);
|
|
}
|
|
}
|
|
|
|
function Value() {
|
|
var showValue = slots.default || isDef(value);
|
|
|
|
if (showValue) {
|
|
return h("div", {
|
|
"class": [bem('value', {
|
|
alone: !showTitle
|
|
}), props.valueClass]
|
|
}, [slots.default ? slots.default() : h("span", [value])]);
|
|
}
|
|
}
|
|
|
|
function LeftIcon() {
|
|
if (slots.icon) {
|
|
return slots.icon();
|
|
}
|
|
|
|
if (icon) {
|
|
return h(Icon, {
|
|
"class": bem('left-icon'),
|
|
"attrs": {
|
|
"name": icon,
|
|
"classPrefix": props.iconPrefix
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function RightIcon() {
|
|
var rightIconSlot = slots['right-icon'];
|
|
|
|
if (rightIconSlot) {
|
|
return rightIconSlot();
|
|
}
|
|
|
|
if (isLink) {
|
|
var arrowDirection = props.arrowDirection;
|
|
return h(Icon, {
|
|
"class": bem('right-icon'),
|
|
"attrs": {
|
|
"name": arrowDirection ? "arrow-" + arrowDirection : 'arrow'
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function onClick(event) {
|
|
emit(ctx, 'click', event);
|
|
functionalRoute(ctx);
|
|
}
|
|
|
|
var clickable = isLink || props.clickable;
|
|
var classes = {
|
|
clickable: clickable,
|
|
center: props.center,
|
|
required: props.required,
|
|
borderless: !props.border
|
|
};
|
|
|
|
if (size) {
|
|
classes[size] = size;
|
|
}
|
|
|
|
return h("div", _mergeJSXProps([{
|
|
"class": bem(classes),
|
|
"attrs": {
|
|
"role": clickable ? 'button' : null,
|
|
"tabindex": clickable ? 0 : null
|
|
},
|
|
"on": {
|
|
"click": onClick
|
|
}
|
|
}, inherit(ctx)]), [LeftIcon(), Title(), Value(), RightIcon(), slots.extra == null ? void 0 : slots.extra()]);
|
|
}
|
|
|
|
Cell.props = _extends({}, cellProps, routeProps);
|
|
export default createComponent(Cell); |