UNPKG

element-plus

Version:

A Component Library for Vue 3

165 lines (160 loc) 5.21 kB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var vue = require('vue'); require('../../../utils/index.js'); require('../../../hooks/index.js'); var descriptionsRow = require('./descriptions-row.js'); var token = require('./token.js'); var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js'); var validator = require('../../../utils/vue/validator.js'); var index = require('../../../hooks/use-common-props/index.js'); var index$1 = require('../../../hooks/use-namespace/index.js'); const _sfc_main = vue.defineComponent({ name: "ElDescriptions", components: { [descriptionsRow["default"].name]: descriptionsRow["default"] }, props: { border: { type: Boolean, default: false }, column: { type: Number, default: 3 }, direction: { type: String, default: "horizontal" }, size: { type: String, validator: validator.isValidComponentSize }, title: { type: String, default: "" }, extra: { type: String, default: "" } }, setup(props, { slots }) { vue.provide(token.elDescriptionsKey, props); const descriptionsSize = index.useSize(); const ns = index$1.useNamespace("descriptions"); const descriptionKls = vue.computed(() => [ ns.b(), ns.is(ns.m(descriptionsSize.value), !!descriptionsSize.value) ]); const flattedChildren = (children) => { const temp = Array.isArray(children) ? children : [children]; const res = []; temp.forEach((child) => { if (Array.isArray(child.children)) { res.push(...flattedChildren(child.children)); } else { res.push(child); } }); return res; }; const filledNode = (node, span, count, isLast = false) => { if (!node.props) { node.props = {}; } if (span > count) { node.props.span = count; } if (isLast) { node.props.span = span; } return node; }; const getRows = () => { var _a; const children = flattedChildren((_a = slots.default) == null ? void 0 : _a.call(slots)).filter((node) => { var _a2; return ((_a2 = node == null ? void 0 : node.type) == null ? void 0 : _a2.name) === "ElDescriptionsItem"; }); const rows = []; let temp = []; let count = props.column; let totalSpan = 0; children.forEach((node, index) => { var _a2; const span = ((_a2 = node.props) == null ? void 0 : _a2.span) || 1; if (index < children.length - 1) { totalSpan += span > count ? count : span; } if (index === children.length - 1) { const lastSpan = props.column - totalSpan % props.column; temp.push(filledNode(node, lastSpan, count, true)); rows.push(temp); return; } if (span < count) { count -= span; temp.push(node); } else { temp.push(filledNode(node, span, count)); rows.push(temp); count = props.column; temp = []; } }); return rows; }; return { descriptionKls, getRows, ns }; } }); function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { const _component_el_descriptions_row = vue.resolveComponent("el-descriptions-row"); return vue.openBlock(), vue.createElementBlock("div", { class: vue.normalizeClass(_ctx.descriptionKls) }, [ _ctx.title || _ctx.extra || _ctx.$slots.title || _ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock("div", { key: 0, class: vue.normalizeClass(_ctx.ns.e("header")) }, [ vue.createElementVNode("div", { class: vue.normalizeClass(_ctx.ns.e("title")) }, [ vue.renderSlot(_ctx.$slots, "title", {}, () => [ vue.createTextVNode(vue.toDisplayString(_ctx.title), 1) ]) ], 2), vue.createElementVNode("div", { class: vue.normalizeClass(_ctx.ns.e("extra")) }, [ vue.renderSlot(_ctx.$slots, "extra", {}, () => [ vue.createTextVNode(vue.toDisplayString(_ctx.extra), 1) ]) ], 2) ], 2)) : vue.createCommentVNode("v-if", true), vue.createElementVNode("div", { class: vue.normalizeClass(_ctx.ns.e("body")) }, [ vue.createElementVNode("table", { class: vue.normalizeClass([_ctx.ns.e("table"), _ctx.ns.is("bordered", _ctx.border)]) }, [ vue.createElementVNode("tbody", null, [ (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.getRows(), (row, index) => { return vue.openBlock(), vue.createBlock(_component_el_descriptions_row, { key: index, row }, null, 8, ["row"]); }), 128)) ]) ], 2) ], 2) ], 2); } var Descriptions = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/descriptions/src/index.vue"]]); exports["default"] = Descriptions; //# sourceMappingURL=index.js.map