wetrade-design
Version:
一款多语言支持Vue3的UI框架
201 lines (200 loc) • 8.78 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.LegendProps = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _useConfigInject2 = _interopRequireDefault(require("../../_util/hooks/useConfigInject"));
var _icon = _interopRequireDefault(require("../../icon"));
var _vcResizeObserver = _interopRequireDefault(require("../../vc-resize-observer"));
var _const = require("./const");
var _classNames6 = _interopRequireDefault(require("../../_util/classNames"));
var _chartsColors = require("../../_util/chartsColors");
var LegendProps = function LegendProps() {
return {
// 图例数据
legendList: {
type: Array,
default: function _default() {
return [];
}
},
// 大于1行时，是否显示左右箭头
isShowTotal: {
type: Boolean,
default: false
},
// 是否显示手势，可点击的图例需要置为true
selectedMode: {
type: Boolean,
default: false
},
// 是否需要截断，不要的字符放在[]里；例：有的银行名称一致，需要加（卡号）区分，显示时需要截断
isLabelRemoveId: {
type: Boolean,
default: false
},
// 颜色队列
colors: {
type: Array,
default: []
},
// 是柱状图还是折线图，银行图例的形状 'line | bar | circle'
scene: {
type: [String, Array],
default: 'bar'
},
/** 边距
* in 图例与文字间的间距
* out 图例与图例间的间距
* */
spacing: {
type: Object,
default: function _default() {
return {
in: 10,
out: 24
};
}
},
onLegendChange: {
type: Function
}
};
};
exports.LegendProps = LegendProps;
var ChartLegend = (0, _vue.defineComponent)({
name: 'WdChartLegend',
props: LegendProps(),
setup: function setup(props, _ref) {
var emit = _ref.emit,
slots = _ref.slots;
var _useConfigInject = (0, _useConfigInject2.default)('chart-legend', props),
prefixCls = _useConfigInject.prefixCls,
configProvider = _useConfigInject.configProvider;
var legendRef = (0, _vue.ref)();
var PageType;
(function (PageType) {
PageType[PageType["PREV"] = 0] = "PREV";
PageType[PageType["NEXT"] = 1] = "NEXT";
})(PageType || (PageType = {}));
var data = (0, _vue.reactive)({
cur: 1,
total: 1
});
var _toRefs = (0, _vue.toRefs)(data),
cur = _toRefs.cur,
total = _toRefs.total;
// 点击图例
var handleClick = function handleClick(t, index) {
emit('legendChange', t, index);
};
// 计算y方向移动距离
var translateTop = (0, _vue.computed)(function () {
return !cur.value ? 0 : -((cur.value - 1) * 18);
});
// 截取图例多余文字
var showName = function showName(value) {
var findIndexs = value === null || value === void 0 ? void 0 : value.indexOf('[');
if (findIndexs > -1) {
var seriesName = value.substring(0, findIndexs);
return seriesName;
}
return value;
};
var legendListRef = (0, _vue.ref)();
var computedWidth = function computedWidth() {
if (!legendListRef.value) return;
var listHeight = legendListRef.value;
var parentHeight = legendRef.value;
total.value = Math.floor(listHeight.clientHeight / parentHeight.clientHeight);
cur.value = cur.value > total.value ? total.value > 0 ? total.value : cur.value : cur.value;
};
// 翻页
var btnClick = function btnClick(t) {
if (t === PageType.PREV) {
cur.value = cur.value > 1 ? cur.value - 1 : cur.value;
return;
}
cur.value = cur.value >= total.value ? total.value : cur.value + 1;
};
(0, _vue.watch)(function () {
return props.legendList;
}, function () {
(0, _vue.nextTick)(function () {
return computedWidth();
});
});
return function () {
var _classNames, _classNames2, _classNames3;
var list = props.legendList || [];
var leftIconClass = (0, _classNames6.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, prefixCls.value + '__icon-top', true), (0, _defineProperty2.default)(_classNames, prefixCls.value + '__disabled', cur.value === 1), _classNames));
var rightIconClass = (0, _classNames6.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, prefixCls.value + '__icon-bottom', true), (0, _defineProperty2.default)(_classNames2, prefixCls.value + '__disabled', cur.value === total.value), _classNames2));
var PAGEDOM;
// 是否显示翻页
if (props.isShowTotal) {
PAGEDOM = (0, _vue.withDirectives)((0, _vue.createVNode)("div", {
"class": "".concat(prefixCls.value, "__more-btns")
}, [(0, _vue.createVNode)(_icon.default, {
"class": leftIconClass,
"onClick": function onClick() {
return btnClick(PageType.PREV);
},
"icon-class": "wd-icon-direction_caret-up"
}, null), (0, _vue.createVNode)("span", null, [cur.value, (0, _vue.createTextVNode)("/"), total.value]), (0, _vue.createVNode)(_icon.default, {
"class": rightIconClass,
"onClick": function onClick() {
return btnClick(PageType.NEXT);
},
"icon-class": "wd-icon-direction_caret-down"
}, null)]), [[_vue.vShow, total.value > 1]]);
}
var boxClassName = (0, _classNames6.default)((_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, prefixCls.value + '__list', true), (0, _defineProperty2.default)(_classNames3, prefixCls.value + '__has-more', total.value > 1), _classNames3));
return (0, _vue.createVNode)("div", {
"ref": legendRef,
"class": "".concat(prefixCls.value)
}, [(0, _vue.createVNode)(_vcResizeObserver.default, {
"onResize": computedWidth
}, {
default: function _default() {
return [(0, _vue.createVNode)("div", {
"class": boxClassName,
"ref": legendListRef,
"style": " transform: translateY(".concat(translateTop.value, "px) ")
}, [list.map(function (item, index) {
var _classNames4, _classNames5, _slots$mark;
var itemClass = (0, _classNames6.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, prefixCls.value + '__item', true), (0, _defineProperty2.default)(_classNames4, prefixCls.value + '__no-selected', !(item !== null && item !== void 0 && item.isShow) && item.hasOwnProperty('isShow')), _classNames4));
var itemStyle = {
cursor: props.selectedMode ? 'pointer' : 'default',
margin: '0 ' + props.spacing.out / 2 + 'px'
};
var symbolClass = (0, _classNames6.default)((_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, prefixCls.value + '__item-symbol', true), (0, _defineProperty2.default)(_classNames5, prefixCls.value + '__symbol-' + (typeof props.scene === 'string' ? props.scene : props.scene[index]), true), _classNames5));
var colors = (0, _chartsColors.getColors)(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode);
var nColor = props.colors.length > 0 ? props.colors : colors.COMMONCOLOR;
var symbolStyle = {
backgroundColor: nColor[index % nColor.length] || '',
marginRight: ((props.scene === 'string' ? props.scene : props.scene[index]) === _const.SeriesType.LINE ? props.spacing.in - 1 : props.spacing.in) + 'px'
};
return (0, _vue.createVNode)("span", {
"class": itemClass,
"onClick": function onClick() {
return handleClick(item, index);
},
"key": (item === null || item === void 0 ? void 0 : item.id) || index,
"style": itemStyle
}, [(0, _vue.createVNode)("span", {
"class": symbolClass,
"style": symbolStyle
}, null), (0, _vue.createVNode)("span", {
"class": "".concat(prefixCls.value, "__item-text")
}, [props.isLabelRemoveId ? showName((item === null || item === void 0 ? void 0 : item.name) || item) : (item === null || item === void 0 ? void 0 : item.name) || item]), (_slots$mark = slots.mark) === null || _slots$mark === void 0 ? void 0 : _slots$mark.call(slots, item)]);
})])];
}
}), PAGEDOM]);
};
}
});
var _default2 = ChartLegend;
exports.default = _default2;