feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
@@ -0,0 +1,13 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { DescriptionInstance, DescriptionProps, DescriptionPropsPublic, descriptionProps } from "./src/description.js";
import { _default } from "./src/description.vue.js";
import { DescriptionItem, DescriptionItemProps, DescriptionItemPropsPublic, DescriptionItemVNode, descriptionItemProps } from "./src/description-item.js";
//#region ../../packages/components/descriptions/index.d.ts
declare const ElDescriptions: SFCWithInstall<typeof _default> & {
DescriptionsItem: typeof DescriptionItem;
};
declare const ElDescriptionsItem: SFCWithInstall<typeof DescriptionItem>;
//#endregion
export { DescriptionInstance, DescriptionItemProps, DescriptionItemPropsPublic, DescriptionItemVNode, DescriptionProps, DescriptionPropsPublic, ElDescriptions, ElDescriptions as default, ElDescriptionsItem, descriptionItemProps, descriptionProps };
@@ -0,0 +1,12 @@
import { withInstall, withNoopInstall } from "../../utils/vue/install.mjs";
import { descriptionProps } from "./src/description.mjs";
import description_default from "./src/description2.mjs";
import DescriptionItem, { descriptionItemProps } from "./src/description-item.mjs";
//#region ../../packages/components/descriptions/index.ts
const ElDescriptions = withInstall(description_default, { DescriptionsItem: DescriptionItem });
const ElDescriptionsItem = withNoopInstall(DescriptionItem);
//#endregion
export { ElDescriptions, ElDescriptions as default, ElDescriptionsItem, descriptionItemProps, descriptionProps };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["Descriptions","DescriptionsItem"],"sources":["../../../../../packages/components/descriptions/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils'\nimport Descriptions from './src/description.vue'\nimport DescriptionsItem from './src/description-item'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElDescriptions: SFCWithInstall<typeof Descriptions> & {\n DescriptionsItem: typeof DescriptionsItem\n} = withInstall(Descriptions, {\n DescriptionsItem,\n})\n\nexport const ElDescriptionsItem: SFCWithInstall<typeof DescriptionsItem> =\n withNoopInstall(DescriptionsItem)\n\nexport default ElDescriptions\n\nexport * from './src/description'\nexport * from './src/description-item'\n"],"mappings":";;;;;;AAMA,MAAa,iBAET,YAAYA,qBAAc,EAC5B,mCACD,CAAC;AAEF,MAAa,qBACX,gBAAgBC,gBAAiB"}
@@ -0,0 +1,6 @@
//#region ../../packages/components/descriptions/src/constants.ts
const COMPONENT_NAME = "ElDescriptionsItem";
//#endregion
export { COMPONENT_NAME };
//# sourceMappingURL=constants.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"constants.mjs","names":[],"sources":["../../../../../../packages/components/descriptions/src/constants.ts"],"sourcesContent":["export const COMPONENT_NAME = 'ElDescriptionsItem'\n"],"mappings":";AAAA,MAAa,iBAAiB"}
@@ -0,0 +1,90 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import * as vue from "vue";
import { ExtractPropTypes, ExtractPublicPropTypes, Slot, VNode } from "vue";
//#region ../../packages/components/descriptions/src/description-item.d.ts
declare const descriptionItemProps: {
label: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
span: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
rowspan: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
width: EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, string, boolean>;
minWidth: EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, string, boolean>;
labelWidth: {
readonly type: vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
align: EpPropFinalized<StringConstructor, "center" | "left" | "right", unknown, string, boolean>;
labelAlign: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "center" | "left" | "right", unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
className: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
labelClassName: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
};
declare const DescriptionItem: vue.DefineComponent<ExtractPropTypes<{
label: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
span: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
rowspan: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
width: EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, string, boolean>;
minWidth: EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, string, boolean>;
labelWidth: {
readonly type: vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
align: EpPropFinalized<StringConstructor, "center" | "left" | "right", unknown, string, boolean>;
labelAlign: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "center" | "left" | "right", unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
className: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
labelClassName: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ExtractPropTypes<{
label: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
span: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
rowspan: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
width: EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, string, boolean>;
minWidth: EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, string, boolean>;
labelWidth: {
readonly type: vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
align: EpPropFinalized<StringConstructor, "center" | "left" | "right", unknown, string, boolean>;
labelAlign: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "center" | "left" | "right", unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
className: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
labelClassName: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
}>> & Readonly<{}>, {
className: string;
minWidth: EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>;
width: EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>;
label: string;
span: number;
rowspan: number;
align: EpPropMergeType<StringConstructor, "center" | "left" | "right", unknown>;
labelClassName: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
type DescriptionItemProps = ExtractPropTypes<typeof descriptionItemProps>;
type DescriptionItemPropsPublic = ExtractPublicPropTypes<typeof descriptionItemProps>;
type DescriptionItemVNode = VNode & {
children: {
[name: string]: Slot;
} | null;
props: Partial<DescriptionItemProps> | null;
};
//#endregion
export { DescriptionItem, DescriptionItemProps, DescriptionItemPropsPublic, DescriptionItemVNode, descriptionItemProps };
@@ -0,0 +1,54 @@
import { columnAlignment } from "../../../constants/column-alignment.mjs";
import { buildProps } from "../../../utils/vue/props/runtime.mjs";
import { COMPONENT_NAME } from "./constants.mjs";
import { defineComponent } from "vue";
//#region ../../packages/components/descriptions/src/description-item.ts
const descriptionItemProps = buildProps({
label: {
type: String,
default: ""
},
span: {
type: Number,
default: 1
},
rowspan: {
type: Number,
default: 1
},
width: {
type: [String, Number],
default: ""
},
minWidth: {
type: [String, Number],
default: ""
},
labelWidth: { type: [String, Number] },
align: {
type: String,
values: columnAlignment,
default: "left"
},
labelAlign: {
type: String,
values: columnAlignment
},
className: {
type: String,
default: ""
},
labelClassName: {
type: String,
default: ""
}
});
const DescriptionItem = defineComponent({
name: COMPONENT_NAME,
props: descriptionItemProps
});
//#endregion
export { DescriptionItem as default, descriptionItemProps };
//# sourceMappingURL=description-item.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"description-item.mjs","names":[],"sources":["../../../../../../packages/components/descriptions/src/description-item.ts"],"sourcesContent":["import { defineComponent } from 'vue'\nimport { columnAlignment } from '@element-plus/constants'\nimport { buildProps } from '@element-plus/utils'\nimport { COMPONENT_NAME } from './constants'\n\nimport type { ExtractPropTypes, ExtractPublicPropTypes, Slot, VNode } from 'vue'\n\nexport const descriptionItemProps = buildProps({\n /**\n * @description label text\n */\n label: {\n type: String,\n default: '',\n },\n /**\n * @description colspan of column\n */\n span: {\n type: Number,\n default: 1,\n },\n /**\n * @description the number of rows a cell should span\n */\n rowspan: {\n type: Number,\n default: 1,\n },\n /**\n * @description column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)\n */\n width: {\n type: [String, Number],\n default: '',\n },\n /**\n * @description column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content)\n */\n minWidth: {\n type: [String, Number],\n default: '',\n },\n /**\n * @description column label width, if not set, it will be the same as the width of the column. Higher priority than the `label-width` of `Descriptions`\n */\n labelWidth: {\n type: [String, Number],\n },\n /**\n * @description column content alignment (If no `border`, effective for both label and content)\n */\n align: {\n type: String,\n values: columnAlignment,\n default: 'left',\n },\n /**\n * @description column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)\n */\n labelAlign: {\n type: String,\n values: columnAlignment,\n },\n /**\n * @description column content custom class name\n */\n className: {\n type: String,\n default: '',\n },\n /**\n * @description column label custom class name\n */\n labelClassName: {\n type: String,\n default: '',\n },\n})\n\nconst DescriptionItem = defineComponent({\n name: COMPONENT_NAME,\n props: descriptionItemProps,\n})\n\nexport default DescriptionItem\n\nexport type DescriptionItemProps = ExtractPropTypes<typeof descriptionItemProps>\nexport type DescriptionItemPropsPublic = ExtractPublicPropTypes<\n typeof descriptionItemProps\n>\nexport type DescriptionItemVNode = VNode & {\n children: { [name: string]: Slot } | null\n props: Partial<DescriptionItemProps> | null\n}\n"],"mappings":";;;;;;AAOA,MAAa,uBAAuB,WAAW;CAI7C,OAAO;EACL,MAAM;EACN,SAAS;EACV;CAID,MAAM;EACJ,MAAM;EACN,SAAS;EACV;CAID,SAAS;EACP,MAAM;EACN,SAAS;EACV;CAID,OAAO;EACL,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;CAID,UAAU;EACR,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;CAID,YAAY,EACV,MAAM,CAAC,QAAQ,OAAO,EACvB;CAID,OAAO;EACL,MAAM;EACN,QAAQ;EACR,SAAS;EACV;CAID,YAAY;EACV,MAAM;EACN,QAAQ;EACT;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;CAID,gBAAgB;EACd,MAAM;EACN,SAAS;EACV;CACF,CAAC;AAEF,MAAM,kBAAkB,gBAAgB;CACtC,MAAM;CACN,OAAO;CACR,CAAC"}
@@ -0,0 +1,73 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import { ComponentSize } from "../../../constants/size.js";
import "../../../utils/index.js";
import { _default } from "./description.vue.js";
import * as vue from "vue";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/descriptions/src/description.d.ts
interface DescriptionProps {
/**
* @description with or without border
* @default false
*/
border?: boolean;
/**
* @description numbers of `Descriptions Item` in one line
* @default 3
*/
column?: number;
/**
* @description direction of list
* @default 'horizontal'
*/
direction?: 'horizontal' | 'vertical';
/**
* @description size of list
* @default ''
*/
size?: ComponentSize;
/**
* @description title text, display on the top left
* @default ''
*/
title?: string;
/**
* @description extra text, display on the top right
* @default ''
*/
extra?: string;
/**
* @description width of every label column
*/
labelWidth?: string | number;
}
/**
* @deprecated Removed after 3.0.0, Use `DescriptionProps` instead.
*/
declare const descriptionProps: {
readonly border: BooleanConstructor;
readonly column: EpPropFinalized<NumberConstructor, unknown, unknown, 3, boolean>;
readonly direction: EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "horizontal", boolean>;
readonly size: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly title: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly extra: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly labelWidth: {
readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
};
/**
* @deprecated Removed after 3.0.0, Use `DescriptionProps` instead.
*/
type DescriptionPropsPublic = ExtractPublicPropTypes<typeof descriptionProps>;
type DescriptionInstance = InstanceType<typeof _default> & unknown;
//#endregion
export { DescriptionInstance, DescriptionProps, DescriptionPropsPublic, descriptionProps };
@@ -0,0 +1,33 @@
import { buildProps } from "../../../utils/vue/props/runtime.mjs";
import { useSizeProp } from "../../../hooks/use-size/index.mjs";
//#region ../../packages/components/descriptions/src/description.ts
/**
* @deprecated Removed after 3.0.0, Use `DescriptionProps` instead.
*/
const descriptionProps = buildProps({
border: Boolean,
column: {
type: Number,
default: 3
},
direction: {
type: String,
values: ["horizontal", "vertical"],
default: "horizontal"
},
size: useSizeProp,
title: {
type: String,
default: ""
},
extra: {
type: String,
default: ""
},
labelWidth: { type: [String, Number] }
});
//#endregion
export { descriptionProps };
//# sourceMappingURL=description.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"description.mjs","names":[],"sources":["../../../../../../packages/components/descriptions/src/description.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport { useSizeProp } from '@element-plus/hooks'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type Description from './description.vue'\n\nexport interface DescriptionProps {\n /**\n * @description with or without border\n * @default false\n */\n border?: boolean\n /**\n * @description numbers of `Descriptions Item` in one line\n * @default 3\n */\n column?: number\n /**\n * @description direction of list\n * @default 'horizontal'\n */\n direction?: 'horizontal' | 'vertical'\n /**\n * @description size of list\n * @default ''\n */\n size?: ComponentSize\n /**\n * @description title text, display on the top left\n * @default ''\n */\n title?: string\n /**\n * @description extra text, display on the top right\n * @default ''\n */\n extra?: string\n /**\n * @description width of every label column\n */\n labelWidth?: string | number\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `DescriptionProps` instead.\n */\nexport const descriptionProps = buildProps({\n /**\n * @description with or without border\n */\n border: Boolean,\n /**\n * @description numbers of `Descriptions Item` in one line\n */\n column: {\n type: Number,\n default: 3,\n },\n /**\n * @description direction of list\n */\n direction: {\n type: String,\n values: ['horizontal', 'vertical'],\n default: 'horizontal',\n },\n /**\n * @description size of list\n */\n size: useSizeProp,\n /**\n * @description title text, display on the top left\n */\n title: {\n type: String,\n default: '',\n },\n /**\n * @description extra text, display on the top right\n */\n extra: {\n type: String,\n default: '',\n },\n /**\n * @description width of every label column\n */\n labelWidth: {\n type: [String, Number],\n },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `DescriptionProps` instead.\n */\nexport type DescriptionPropsPublic = ExtractPublicPropTypes<\n typeof descriptionProps\n>\nexport type DescriptionInstance = InstanceType<typeof Description> & unknown\n"],"mappings":";;;;;;;AA+CA,MAAa,mBAAmB,WAAW;CAIzC,QAAQ;CAIR,QAAQ;EACN,MAAM;EACN,SAAS;EACV;CAID,WAAW;EACT,MAAM;EACN,QAAQ,CAAC,cAAc,WAAW;EAClC,SAAS;EACV;CAID,MAAM;CAIN,OAAO;EACL,MAAM;EACN,SAAS;EACV;CAID,OAAO;EACL,MAAM;EACN,SAAS;EACV;CAID,YAAY,EACV,MAAM,CAAC,QAAQ,OAAO,EACvB;CACF,CAAU"}
@@ -0,0 +1,25 @@
import { DescriptionProps } from "./description.js";
import * as vue from "vue";
//#region ../../packages/components/descriptions/src/description.vue.d.ts
declare var __VLS_1: {}, __VLS_3: {};
type __VLS_Slots = {} & {
title?: (props: typeof __VLS_1) => any;
} & {
extra?: (props: typeof __VLS_3) => any;
};
declare const __VLS_base: vue.DefineComponent<DescriptionProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<DescriptionProps> & Readonly<{}>, {
title: string;
column: number;
direction: "horizontal" | "vertical";
extra: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,85 @@
import { flattedChildren } from "../../../utils/vue/vnode.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { useFormSize } from "../../form/src/hooks/use-form-common-props.mjs";
import { descriptionProps } from "./description.mjs";
import { descriptionsKey } from "./token.mjs";
import descriptions_row_default from "./descriptions-row2.mjs";
import { COMPONENT_NAME } from "./constants.mjs";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, provide, renderList, renderSlot, toDisplayString, unref, useSlots } from "vue";
//#region ../../packages/components/descriptions/src/description.vue?vue&type=script&setup=true&lang.ts
var description_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "ElDescriptions",
__name: "description",
props: descriptionProps,
setup(__props) {
const props = __props;
const ns = useNamespace("descriptions");
const descriptionsSize = useFormSize();
const slots = useSlots();
provide(descriptionsKey, props);
const descriptionKls = computed(() => [ns.b(), ns.m(descriptionsSize.value)]);
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 = () => {
if (!slots.default) return [];
const children = flattedChildren(slots.default()).filter((node) => node?.type?.name === COMPONENT_NAME);
const rows = [];
let temp = [];
let count = props.column;
let totalSpan = 0;
const rowspanTemp = [];
children.forEach((node, index) => {
const span = node.props?.span || 1;
const rowspan = node.props?.rowspan || 1;
const rowNo = rows.length;
rowspanTemp[rowNo] ||= 0;
if (rowspan > 1) for (let i = 1; i < rowspan; i++) {
rowspanTemp[rowNo + i] ||= 0;
rowspanTemp[rowNo + i]++;
totalSpan++;
}
if (rowspanTemp[rowNo] > 0) {
count -= rowspanTemp[rowNo];
rowspanTemp[rowNo] = 0;
}
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 (_ctx, _cache) => {
return openBlock(), createElementBlock("div", { class: normalizeClass(descriptionKls.value) }, [__props.title || __props.extra || _ctx.$slots.title || _ctx.$slots.extra ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(unref(ns).e("header"))
}, [createElementVNode("div", { class: normalizeClass(unref(ns).e("title")) }, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2), createElementVNode("div", { class: normalizeClass(unref(ns).e("extra")) }, [renderSlot(_ctx.$slots, "extra", {}, () => [createTextVNode(toDisplayString(__props.extra), 1)])], 2)], 2)) : createCommentVNode("v-if", true), createElementVNode("div", { class: normalizeClass(unref(ns).e("body")) }, [createElementVNode("table", { class: normalizeClass([unref(ns).e("table"), unref(ns).is("bordered", __props.border)]) }, [createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(getRows(), (row, _index) => {
return openBlock(), createBlock(descriptions_row_default, {
key: _index,
row
}, null, 8, ["row"]);
}), 128))])], 2)], 2)], 2);
};
}
});
//#endregion
export { description_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=description.vue_vue_type_script_setup_true_lang.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
import description_vue_vue_type_script_setup_true_lang_default from "./description.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/descriptions/src/description.vue
var description_default = description_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { description_default as default };
//# sourceMappingURL=description2.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"description2.mjs","names":[],"sources":["../../../../../../packages/components/descriptions/src/description.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\" setup>\nimport { computed, provide, useSlots } from 'vue'\nimport { flattedChildren } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useFormSize } from '@element-plus/components/form'\nimport ElDescriptionsRow from './descriptions-row.vue'\nimport { descriptionsKey } from './token'\nimport { COMPONENT_NAME } from './constants'\n\nimport type { DescriptionProps } from './description'\nimport type { IDescriptionsInject } from './descriptions.type'\nimport type { DescriptionItemVNode } from './description-item'\n\ndefineOptions({\n name: 'ElDescriptions',\n})\n\nconst props = withDefaults(defineProps<DescriptionProps>(), {\n column: 3,\n direction: 'horizontal',\n title: '',\n extra: '',\n})\n\nconst ns = useNamespace('descriptions')\n\nconst descriptionsSize = useFormSize()\n\nconst slots = useSlots()\n\nprovide(descriptionsKey, props as IDescriptionsInject)\n\nconst descriptionKls = computed(() => [ns.b(), ns.m(descriptionsSize.value)])\n\nconst filledNode = (\n node: DescriptionItemVNode,\n span: number,\n count: number,\n isLast = false\n) => {\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\nconst getRows = () => {\n if (!slots.default) return []\n\n const children = flattedChildren(slots.default()).filter(\n (node): node is DescriptionItemVNode =>\n (node as any)?.type?.name === COMPONENT_NAME\n )\n const rows: DescriptionItemVNode[][] = []\n let temp: DescriptionItemVNode[] = []\n let count = props.column\n let totalSpan = 0 // all spans number of item\n const rowspanTemp: number[] = [] // the number of row spans\n\n children.forEach((node, index) => {\n const span = node.props?.span || 1\n const rowspan = node.props?.rowspan || 1\n const rowNo = rows.length\n rowspanTemp[rowNo] ||= 0\n\n if (rowspan > 1) {\n for (let i = 1; i < rowspan; i++) {\n rowspanTemp[rowNo + i] ||= 0\n rowspanTemp[rowNo + i]++\n totalSpan++\n }\n }\n if (rowspanTemp[rowNo] > 0) {\n count -= rowspanTemp[rowNo]\n rowspanTemp[rowNo] = 0\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</script>\n"],"mappings":""}
@@ -0,0 +1,99 @@
import { addUnit } from "../../../utils/dom/style.mjs";
import { getNormalizedProps } from "../../../utils/vue/vnode.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { descriptionsKey } from "./token.mjs";
import { isNil } from "lodash-unified";
import { defineComponent, h, inject, withDirectives } from "vue";
//#region ../../packages/components/descriptions/src/descriptions-cell.ts
var descriptions_cell_default = defineComponent({
name: "ElDescriptionsCell",
props: {
cell: { type: Object },
tag: {
type: String,
default: "td"
},
type: { type: String }
},
setup() {
return { descriptions: inject(descriptionsKey, {}) };
},
render() {
const item = getNormalizedProps(this.cell);
const directives = (this.cell?.dirs || []).map((dire) => {
const { dir, arg, modifiers, value } = dire;
return [
dir,
value,
arg,
modifiers
];
});
const { border, direction } = this.descriptions;
const isVertical = direction === "vertical";
const renderLabel = () => this.cell?.children?.label?.() || item.label;
const renderContent = () => this.cell?.children?.default?.();
const span = item.span;
const rowspan = item.rowspan;
const align = item.align ? `is-${item.align}` : "";
const labelAlign = item.labelAlign ? `is-${item.labelAlign}` : align;
const className = item.className;
const labelClassName = item.labelClassName;
const style = {
width: addUnit(this.type === "label" ? item.labelWidth ?? this.descriptions.labelWidth ?? item.width : item.width),
minWidth: addUnit(item.minWidth)
};
const ns = useNamespace("descriptions");
switch (this.type) {
case "label": return withDirectives(h(this.tag, {
style,
class: [
ns.e("cell"),
ns.e("label"),
ns.is("bordered-label", border),
ns.is("vertical-label", isVertical),
labelAlign,
labelClassName
],
colSpan: isVertical ? span : 1,
rowspan: isVertical ? 1 : rowspan
}, renderLabel()), directives);
case "content": return withDirectives(h(this.tag, {
style,
class: [
ns.e("cell"),
ns.e("content"),
ns.is("bordered-content", border),
ns.is("vertical-content", isVertical),
align,
className
],
colSpan: isVertical ? span : span * 2 - 1,
rowspan: isVertical ? rowspan * 2 - 1 : rowspan
}, renderContent()), directives);
default: {
const label = renderLabel();
const labelStyle = {};
const width = addUnit(item.labelWidth ?? this.descriptions.labelWidth);
if (width) {
labelStyle.width = width;
labelStyle.display = "inline-block";
}
return withDirectives(h("td", {
style,
class: [ns.e("cell"), align],
colSpan: span,
rowspan
}, [!isNil(label) ? h("span", {
style: labelStyle,
class: [ns.e("label"), labelClassName]
}, label) : void 0, h("span", { class: [ns.e("content"), className] }, renderContent())]), directives);
}
}
}
});
//#endregion
export { descriptions_cell_default as default };
//# sourceMappingURL=descriptions-cell.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,14 @@
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
//#region ../../packages/components/descriptions/src/descriptions-row.ts
/**
* @deprecated Removed after 3.0.0, Use `DescriptionsRowProps` instead.
*/
const descriptionsRowProps = buildProps({ row: {
type: definePropType(Array),
default: () => []
} });
//#endregion
export { descriptionsRowProps };
//# sourceMappingURL=descriptions-row.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"descriptions-row.mjs","names":[],"sources":["../../../../../../packages/components/descriptions/src/descriptions-row.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { DescriptionItemVNode } from './description-item'\n\nexport interface DescriptionsRowProps {\n row?: DescriptionItemVNode[]\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `DescriptionsRowProps` instead.\n */\nexport const descriptionsRowProps = buildProps({\n row: {\n type: definePropType<DescriptionItemVNode[]>(Array),\n default: () => [],\n },\n} as const)\n"],"mappings":";;;;;;AAWA,MAAa,uBAAuB,WAAW,EAC7C,KAAK;CACH,MAAM,eAAuC,MAAM;CACnD,eAAe,EAAE;CAClB,EACF,CAAU"}
@@ -0,0 +1,51 @@
import { descriptionsRowProps } from "./descriptions-row.mjs";
import { descriptionsKey } from "./token.mjs";
import descriptions_cell_default from "./descriptions-cell.mjs";
import { Fragment, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, inject, openBlock, renderList, unref } from "vue";
//#region ../../packages/components/descriptions/src/descriptions-row.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = { key: 1 };
var descriptions_row_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "ElDescriptionsRow",
__name: "descriptions-row",
props: descriptionsRowProps,
setup(__props) {
const descriptions = inject(descriptionsKey, {});
return (_ctx, _cache) => {
return unref(descriptions).direction === "vertical" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("tr", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.row, (cell, _index) => {
return openBlock(), createBlock(unref(descriptions_cell_default), {
key: `tr1-${_index}`,
cell,
tag: "th",
type: "label"
}, null, 8, ["cell"]);
}), 128))]), createElementVNode("tr", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.row, (cell, _index) => {
return openBlock(), createBlock(unref(descriptions_cell_default), {
key: `tr2-${_index}`,
cell,
tag: "td",
type: "content"
}, null, 8, ["cell"]);
}), 128))])], 64)) : (openBlock(), createElementBlock("tr", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.row, (cell, _index) => {
return openBlock(), createElementBlock(Fragment, { key: `tr3-${_index}` }, [unref(descriptions).border ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(descriptions_cell_default), {
cell,
tag: "td",
type: "label"
}, null, 8, ["cell"]), createVNode(unref(descriptions_cell_default), {
cell,
tag: "td",
type: "content"
}, null, 8, ["cell"])], 64)) : (openBlock(), createBlock(unref(descriptions_cell_default), {
key: 1,
cell,
tag: "td",
type: "both"
}, null, 8, ["cell"]))], 64);
}), 128))]));
};
}
});
//#endregion
export { descriptions_row_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=descriptions-row.vue_vue_type_script_setup_true_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"descriptions-row.vue_vue_type_script_setup_true_lang.mjs","names":[],"sources":["../../../../../../packages/components/descriptions/src/descriptions-row.vue"],"sourcesContent":["<template>\n <template v-if=\"descriptions.direction === 'vertical'\">\n <tr>\n <template v-for=\"(cell, _index) in row\" :key=\"`tr1-${_index}`\">\n <el-descriptions-cell :cell=\"cell\" tag=\"th\" type=\"label\" />\n </template>\n </tr>\n <tr>\n <template v-for=\"(cell, _index) in row\" :key=\"`tr2-${_index}`\">\n <el-descriptions-cell :cell=\"cell\" tag=\"td\" type=\"content\" />\n </template>\n </tr>\n </template>\n <tr v-else>\n <template v-for=\"(cell, _index) in row\" :key=\"`tr3-${_index}`\">\n <template v-if=\"descriptions.border\">\n <el-descriptions-cell :cell=\"cell\" tag=\"td\" type=\"label\" />\n <el-descriptions-cell :cell=\"cell\" tag=\"td\" type=\"content\" />\n </template>\n <el-descriptions-cell v-else :cell=\"cell\" tag=\"td\" type=\"both\" />\n </template>\n </tr>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject } from 'vue'\nimport ElDescriptionsCell from './descriptions-cell'\nimport { descriptionsKey } from './token'\n\nimport type { DescriptionsRowProps } from './descriptions-row'\nimport type { IDescriptionsInject } from './descriptions.type'\n\ndefineOptions({\n name: 'ElDescriptionsRow',\n})\n\nwithDefaults(defineProps<DescriptionsRowProps>(), {\n row: () => [],\n})\n\nconst descriptions = inject(descriptionsKey, {} as IDescriptionsInject)\n</script>\n"],"mappings":";;;;;;;;;;;;EAwCA,MAAM,eAAe,OAAO,iBAAiB,EAAE,CAAuB;;UAvCpD,MAAA,aAAY,CAAC,cAAS,2BAAtC,mBAWW,UAAA,EAAA,KAAA,GAAA,EAAA,CAVT,mBAIK,MAAA,MAAA,mBAHH,mBAEW,UAAA,MAAA,WAFwB,QAAA,MAAjB,MAAM,WAAM;wBAC5B,YAA2D,MAAA,0BAAA,EAAA;iBADR;KACtB;KAAM,KAAI;KAAK,MAAK;;gBAGrD,mBAIK,MAAA,MAAA,mBAHH,mBAEW,UAAA,MAAA,WAFwB,QAAA,MAAjB,MAAM,WAAM;wBAC5B,YAA6D,MAAA,0BAAA,EAAA;iBADV;KACtB;KAAM,KAAI;KAAK,MAAK;;sCAIvD,mBAQK,MAAA,YAAA,mBAPH,mBAMW,UAAA,MAAA,WANwB,QAAA,MAAjB,MAAM,WAAM;mEAAuB,aACnC,MAAA,aAAY,CAAC,uBAA7B,mBAGW,UAAA,EAAA,KAAA,GAAA,EAAA,CAFT,YAA2D,MAAA,0BAAA,EAAA;KAA9B;KAAM,KAAI;KAAK,MAAK;2BACjD,YAA6D,MAAA,0BAAA,EAAA;KAAhC;KAAM,KAAI;KAAK,MAAK;iDAEnD,YAAiE,MAAA,0BAAA,EAAA;;KAA7B;KAAM,KAAI;KAAK,MAAK"}
@@ -0,0 +1,8 @@
import descriptions_row_vue_vue_type_script_setup_true_lang_default from "./descriptions-row.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/descriptions/src/descriptions-row.vue
var descriptions_row_default = descriptions_row_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { descriptions_row_default as default };
//# sourceMappingURL=descriptions-row2.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"descriptions-row2.mjs","names":[],"sources":["../../../../../../packages/components/descriptions/src/descriptions-row.vue"],"sourcesContent":["<template>\n <template v-if=\"descriptions.direction === 'vertical'\">\n <tr>\n <template v-for=\"(cell, _index) in row\" :key=\"`tr1-${_index}`\">\n <el-descriptions-cell :cell=\"cell\" tag=\"th\" type=\"label\" />\n </template>\n </tr>\n <tr>\n <template v-for=\"(cell, _index) in row\" :key=\"`tr2-${_index}`\">\n <el-descriptions-cell :cell=\"cell\" tag=\"td\" type=\"content\" />\n </template>\n </tr>\n </template>\n <tr v-else>\n <template v-for=\"(cell, _index) in row\" :key=\"`tr3-${_index}`\">\n <template v-if=\"descriptions.border\">\n <el-descriptions-cell :cell=\"cell\" tag=\"td\" type=\"label\" />\n <el-descriptions-cell :cell=\"cell\" tag=\"td\" type=\"content\" />\n </template>\n <el-descriptions-cell v-else :cell=\"cell\" tag=\"td\" type=\"both\" />\n </template>\n </tr>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject } from 'vue'\nimport ElDescriptionsCell from './descriptions-cell'\nimport { descriptionsKey } from './token'\n\nimport type { DescriptionsRowProps } from './descriptions-row'\nimport type { IDescriptionsInject } from './descriptions.type'\n\ndefineOptions({\n name: 'ElDescriptionsRow',\n})\n\nwithDefaults(defineProps<DescriptionsRowProps>(), {\n row: () => [],\n})\n\nconst descriptions = inject(descriptionsKey, {} as IDescriptionsInject)\n</script>\n"],"mappings":""}
@@ -0,0 +1,6 @@
//#region ../../packages/components/descriptions/src/token.ts
const descriptionsKey = Symbol("elDescriptions");
//#endregion
export { descriptionsKey };
//# sourceMappingURL=token.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"token.mjs","names":[],"sources":["../../../../../../packages/components/descriptions/src/token.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { IDescriptionsInject } from './descriptions.type'\n\nexport const descriptionsKey: InjectionKey<IDescriptionsInject> =\n Symbol('elDescriptions')\n"],"mappings":";AAGA,MAAa,kBACX,OAAO,iBAAiB"}
@@ -0,0 +1,3 @@
import "../../base/style/css.mjs";
import "../../descriptions-item/style/css.mjs";
import "element-plus/theme-chalk/el-descriptions.css";
@@ -0,0 +1,3 @@
import "../../base/style/index.mjs";
import "../../descriptions-item/style/index.mjs";
import "element-plus/theme-chalk/src/descriptions.scss";