winbox-ui-next
Version:
We Design Vue 2.0: A Vue.js 3 UI Library
224 lines (223 loc) • 8.06 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, ref, computed, createVNode, Fragment } from "vue";
import { getPrefixCls } from "../_utils/global-config.js";
import { isObject, isArray, isFunction } from "../_utils/is.js";
const getItemSpan = (item, column) => {
if (!item.span) {
return 1;
}
if (item.span > column) {
return column;
}
return item.span;
};
const getTotalSpan = (arr) => {
return isArray(arr) ? arr.reduce((total, data) => total + (data.span || 1), 0) : 0;
};
var _Descriptions = defineComponent({
name: "Descriptions",
props: {
data: {
type: Array,
default: () => []
},
column: {
type: Number,
default: 3
},
title: String,
layout: {
type: String,
default: "horizontal"
},
align: {
type: [String, Object],
default: "left"
},
size: {
type: String,
default: "default"
},
bordered: {
type: Boolean,
default: false
},
labelStyle: {
type: Object
},
valueStyle: {
type: Object
}
},
setup(props, {
slots
}) {
const prefixCls = getPrefixCls("descriptions");
const screen = ref();
const column = computed(() => isObject(props.column) ? props.column[screen.value] : props.column);
const labelAlign = computed(() => {
var _a;
return (_a = isObject(props.align) ? props.align.label : props.align) != null ? _a : "left";
});
const valueAlign = computed(() => {
var _a;
return (_a = isObject(props.align) ? props.align.value : props.align) != null ? _a : "left";
});
const labelStyle = computed(() => __spreadValues({
textAlign: labelAlign.value
}, props.labelStyle));
const valueStyle = computed(() => __spreadValues({
textAlign: valueAlign.value
}, props.valueStyle));
const data = computed(() => {
const data2 = [];
if (isArray(props.data) && props.data.length > 0 && column.value > 0) {
for (const item of props.data) {
const itemSpan = getItemSpan(item, column.value);
const lastData2 = data2[data2.length - 1];
const lastDataTotalSpan2 = getTotalSpan(lastData2);
if (lastDataTotalSpan2 === 0 || lastDataTotalSpan2 >= column.value) {
data2.push([__spreadProps(__spreadValues({}, item), {
span: itemSpan
})]);
} else {
const span = item.span ? item.span + lastDataTotalSpan2 > column.value ? column.value - lastDataTotalSpan2 : item.span : 1;
lastData2.push(__spreadProps(__spreadValues({}, item), {
span
}));
}
}
const lastData = data2[data2.length - 1];
const lastDataTotalSpan = getTotalSpan(lastData);
if (lastDataTotalSpan < column.value) {
lastData[lastData.length - 1].span = lastData[lastData.length - 1].span + column.value - lastDataTotalSpan;
}
}
return data2;
});
const renderVerticalItems = (data2) => createVNode(Fragment, null, [createVNode("tr", {
"class": `${prefixCls}-row`
}, [data2.map((item, index) => {
var _a, _b, _c;
return createVNode("td", {
"key": `${(_a = item.key) != null ? _a : index}_label`,
"class": `${prefixCls}-item-label`,
"style": labelStyle.value,
"colspan": item.span
}, [(_c = (_b = slots.label) == null ? void 0 : _b.call(slots, {
label: item.label,
index,
data: item
})) != null ? _c : isFunction(item.label) ? item.label() : item.label]);
})]), createVNode("tr", {
"class": `${prefixCls}-row`
}, [data2.map((item, index) => {
var _a, _b, _c;
return createVNode("td", {
"key": `${(_a = item.key) != null ? _a : index}_value`,
"class": `${prefixCls}-item-value`,
"style": valueStyle.value,
"colspan": item.span
}, [(_c = (_b = slots.value) == null ? void 0 : _b.call(slots, {
value: item.value,
index,
data: item
})) != null ? _c : isFunction(item.value) ? item.value() : item.value]);
})])]);
const renderHorizontalItems = (data2, index) => createVNode("tr", {
"class": `${prefixCls}-row`,
"key": `tr-${index}`
}, [data2.map((item) => {
var _a, _b, _c, _d;
return createVNode(Fragment, null, [createVNode("td", {
"class": `${prefixCls}-item-label`,
"style": labelStyle.value
}, [(_b = (_a = slots.label) == null ? void 0 : _a.call(slots, {
label: item.label,
index,
data: item
})) != null ? _b : isFunction(item.label) ? item.label() : item.label]), createVNode("td", {
"class": `${prefixCls}-item-value`,
"style": valueStyle.value,
"colspan": item.span * 2 - 1
}, [(_d = (_c = slots.value) == null ? void 0 : _c.call(slots, {
value: item.value,
index,
data: item
})) != null ? _d : isFunction(item.value) ? item.value() : item.value])]);
})]);
const renderInlineItems = (data2, index) => createVNode("tr", {
"class": `${prefixCls}-row`,
"key": `inline-${index}`
}, [data2.map((item, index2) => {
var _a, _b, _c, _d, _e;
return createVNode("td", {
"key": (_a = item.key) != null ? _a : index2,
"class": `${prefixCls}-item`,
"colspan": item.span
}, [createVNode("div", {
"class": `${prefixCls}-item-label-inline`,
"style": labelStyle.value
}, [(_c = (_b = slots.label) == null ? void 0 : _b.call(slots, {
label: item.label,
index: index2,
data: item
})) != null ? _c : isFunction(item.label) ? item.label() : item.label]), createVNode("div", {
"class": `${prefixCls}-item-value-inline`,
"style": valueStyle.value
}, [(_e = (_d = slots.value) == null ? void 0 : _d.call(slots, {
value: item.value,
index: index2,
data: item
})) != null ? _e : isFunction(item.value) ? item.value() : item.value])]);
})]);
const renderItems = (data2, index) => {
if (["inline-horizontal", "inline-vertical"].includes(props.layout)) {
return renderInlineItems(data2, index);
}
if (props.layout === "vertical") {
return renderVerticalItems(data2);
}
return renderHorizontalItems(data2, index);
};
const cls = computed(() => [prefixCls, `${prefixCls}-layout-${props.layout}`, `${prefixCls}-size-${props.size}`, {
[`${prefixCls}-border`]: props.bordered
}]);
const renderTitle = () => {
var _a, _b;
const title = (_b = (_a = slots.title) == null ? void 0 : _a.call(slots)) != null ? _b : props.title;
if (title) {
return createVNode("div", {
"class": `${prefixCls}-title`
}, [title]);
}
return null;
};
return () => createVNode("div", {
"class": cls.value
}, [renderTitle(), createVNode("div", {
"class": `${prefixCls}-body`
}, [createVNode("table", {
"class": `${prefixCls}-table`
}, [createVNode("tbody", null, [data.value.map((data2, index) => renderItems(data2, index))])])])]);
}
});
export { _Descriptions as default };