UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 5.49 kB
{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/descriptions/src/index.vue"],"sourcesContent":["<template>\n <div :class=\"descriptionKls\">\n <div\n v-if=\"title || extra || $slots.title || $slots.extra\"\n :class=\"ns.e('header')\"\n >\n <div :class=\"ns.e('title')\">\n <slot name=\"title\">{{ title }}</slot>\n </div>\n <div :class=\"ns.e('extra')\">\n <slot name=\"extra\">{{ extra }}</slot>\n </div>\n </div>\n\n <div :class=\"ns.e('body')\">\n <table :class=\"[ns.e('table'), ns.is('bordered', border)]\">\n <tbody>\n <template v-for=\"(row, index) in getRows()\" :key=\"index\">\n <el-descriptions-row :row=\"row\" />\n </template>\n </tbody>\n </table>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, provide } from 'vue'\nimport { isValidComponentSize } from '@element-plus/utils'\nimport { useSize, useNamespace } from '@element-plus/hooks'\nimport DescriptionsRow from './descriptions-row.vue'\nimport { elDescriptionsKey } from './token'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\n\nexport default defineComponent({\n name: 'ElDescriptions',\n components: {\n [DescriptionsRow.name]: DescriptionsRow,\n },\n props: {\n border: {\n type: Boolean,\n default: false,\n },\n column: {\n type: Number,\n default: 3,\n },\n direction: {\n type: String as PropType<'horizontal' | 'vertical'>,\n default: 'horizontal',\n },\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n title: {\n type: String,\n default: '',\n },\n extra: {\n type: String,\n default: '',\n },\n },\n setup(props, { slots }) {\n provide(elDescriptionsKey, props)\n\n const descriptionsSize = useSize()\n const ns = useNamespace('descriptions')\n\n const descriptionKls = computed(() => [\n ns.b(),\n ns.is(ns.m(descriptionsSize.value), !!descriptionsSize.value),\n ])\n\n const flattedChildren = (children) => {\n const temp = Array.isArray(children) ? children : [children]\n const res = []\n temp.forEach((child) => {\n if (Array.isArray(child.children)) {\n res.push(...flattedChildren(child.children))\n } else {\n res.push(child)\n }\n })\n return res\n }\n\n const filledNode = (node, span, count, isLast = false) => {\n if (!node.props) {\n node.props = {}\n }\n if (span > count) {\n node.props.span = count\n }\n if (isLast) {\n // set the last span\n node.props.span = span\n }\n return node\n }\n\n const getRows = () => {\n const children = flattedChildren(slots.default?.()).filter(\n (node) => node?.type?.name === 'ElDescriptionsItem'\n )\n const rows = []\n let temp = []\n let count = props.column\n let totalSpan = 0 // all spans number of item\n\n children.forEach((node, index) => {\n const span = node.props?.span || 1\n\n if (index < children.length - 1) {\n totalSpan += span > count ? count : span\n }\n\n if (index === children.length - 1) {\n // calculate the last item span\n const lastSpan = props.column - (totalSpan % props.column)\n temp.push(filledNode(node, lastSpan, count, true))\n rows.push(temp)\n return\n }\n\n if (span < count) {\n count -= span\n temp.push(node)\n } else {\n temp.push(filledNode(node, span, count))\n rows.push(temp)\n count = props.column\n temp = []\n }\n })\n\n return rows\n }\n\n return {\n descriptionKls,\n getRows,\n ns,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;AAoCA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,KACT,gBAAgB,OAAO;AAAA;AAAA,EAE1B,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,IAEb,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,MAAM,OAAO,EAAE,SAAS;AACtB,YAAQ,mBAAmB;AAE3B,UAAM,mBAAmB;AACzB,UAAM,KAAK,aAAa;AAExB,UAAM,iBAAiB,SAAS,MAAM;AAAA,MACpC,GAAG;AAAA,MACH,GAAG,GAAG,GAAG,EAAE,iBAAiB,QAAQ,CAAC,CAAC,iBAAiB;AAAA;AAGzD,UAAM,kBAAkB,CAAC,aAAa;AACpC,YAAM,OAAO,MAAM,QAAQ,YAAY,WAAW,CAAC;AACnD,YAAM,MAAM;AACZ,WAAK,QAAQ,CAAC,UAAU;AACtB,YAAI,MAAM,QAAQ,MAAM,WAAW;AACjC,cAAI,KAAK,GAAG,gBAAgB,MAAM;AAAA,eAC7B;AACL,cAAI,KAAK;AAAA;AAAA;AAGb,aAAO;AAAA;AAGT,UAAM,aAAa,CAAC,MAAM,MAAM,OAAO,SAAS,UAAU;AACxD,UAAI,CAAC,KAAK,OAAO;AACf,aAAK,QAAQ;AAAA;AAEf,UAAI,OAAO,OAAO;AAChB,aAAK,MAAM,OAAO;AAAA;AAEpB,UAAI,QAAQ;AAEV,aAAK,MAAM,OAAO;AAAA;AAEpB,aAAO;AAAA;AAGT,UAAM,UAAU,MAAM;AACpB,YAAM;AAGN,YAAM;AACN;AACA;AACA;AAEA;AACE,cAAM;AAEN;AACE,uBAAa;AAAuB;AAGtC,YAAI;AAEF,iCAAuB,2BAA4B;AACnD,oBAAU;AACV;AACA;AAAA;AAGF;AACE,mBAAS;AACT,eAAK,KAAK;AAAA;AAEV;AACA;AACA,wBAAc;AACd;AAAO;AAAA;AAIX;AAAO;AAGT;AAAO;AACL;AACA,MACA;AAAA;AAAA;AAAA;;;;;AAjJuB;AAEjB;;AACA;;AAEN;AAAa;SACX;AAAA;AAAsB;;;AAExB;AAAa;;AACX;AAAsB;;;;AAYpB,uBARK,OAAE;AAAA;;AACX;AAAgB;;AACd,oCACE;AAAA;gCAAuD;AAAA;AAC1B;;;;;;;;;;;;;;;;;"}