@ditari/bsui 5.1.22 → 5.1.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/card/Card.cjs +10 -4
- package/dist/cjs/components/card/Card.cjs.map +1 -1
- package/dist/cjs/components/card/Card.d.ts +11 -1
- package/dist/cjs/components/card/style.cjs +24 -7
- package/dist/cjs/components/card/style.cjs.map +1 -1
- package/dist/cjs/components/card/style.d.ts +1 -0
- package/dist/cjs/components/table/Table.cjs +45 -0
- package/dist/cjs/components/table/Table.cjs.map +1 -1
- package/dist/cjs/components/table-form/TableFormItem.cjs +18 -6
- package/dist/cjs/components/table-form/TableFormItem.cjs.map +1 -1
- package/dist/cjs/components/table-form/style.cjs +84 -50
- package/dist/cjs/components/table-form/style.cjs.map +1 -1
- package/dist/cjs/components/table-form/style.d.ts +0 -3
- package/dist/esm/components/card/Card.d.ts +11 -1
- package/dist/esm/components/card/Card.mjs +10 -4
- package/dist/esm/components/card/Card.mjs.map +1 -1
- package/dist/esm/components/card/style.d.ts +1 -0
- package/dist/esm/components/card/style.mjs +24 -7
- package/dist/esm/components/card/style.mjs.map +1 -1
- package/dist/esm/components/table/Table.mjs +45 -0
- package/dist/esm/components/table/Table.mjs.map +1 -1
- package/dist/esm/components/table-form/TableFormItem.mjs +18 -6
- package/dist/esm/components/table-form/TableFormItem.mjs.map +1 -1
- package/dist/esm/components/table-form/style.d.ts +0 -3
- package/dist/esm/components/table-form/style.mjs +84 -50
- package/dist/esm/components/table-form/style.mjs.map +1 -1
- package/dist/types/components/card/Card.d.ts +11 -1
- package/dist/types/components/card/Card.d.ts.map +1 -1
- package/dist/types/components/card/style.d.ts +1 -0
- package/dist/types/components/card/style.d.ts.map +1 -1
- package/dist/types/components/table/Table.d.ts.map +1 -1
- package/dist/types/components/table-form/TableFormItem.d.ts.map +1 -1
- package/dist/types/components/table-form/style.d.ts +0 -3
- package/dist/types/components/table-form/style.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -10,109 +10,143 @@ const useFormItemStyle = (styles, _token) => {
|
|
|
10
10
|
borderColor,
|
|
11
11
|
focusBorderColor
|
|
12
12
|
} = styles;
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
13
|
+
const token = _token.value;
|
|
14
|
+
const horizontalPadding = `${token.paddingSM}px`;
|
|
15
|
+
const textColor = token.colorText;
|
|
16
|
+
const focusStyle = `
|
|
17
|
+
outline: 1px solid ${focusBorderColor} !important;
|
|
18
|
+
outline-offset: -1px !important;
|
|
19
|
+
z-index: 10;
|
|
20
|
+
position: relative;
|
|
21
|
+
`;
|
|
22
|
+
const errorStyle = `
|
|
23
|
+
outline: 1px solid ${token.colorError} !important;
|
|
24
|
+
outline-offset: -1px !important;
|
|
25
|
+
z-index: 10;
|
|
26
|
+
position: relative;
|
|
18
27
|
`;
|
|
19
28
|
return {
|
|
20
29
|
cellBorderStyle: css.css`
|
|
21
|
-
//min-height: ${rowHeight}px;
|
|
22
|
-
/* 现有单元格边框 */
|
|
23
30
|
border-right: 1px solid ${borderColor};
|
|
24
31
|
border-bottom: 1px solid ${borderColor};
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
position: relative;
|
|
25
34
|
|
|
26
35
|
.ant-form-item {
|
|
27
|
-
height: 100%;
|
|
28
36
|
margin-bottom: 0 !important;
|
|
29
|
-
|
|
37
|
+
height: 100%;
|
|
30
38
|
.ant-form-item-row {
|
|
31
39
|
height: 100%;
|
|
32
40
|
|
|
33
41
|
.ant-form-item-label {
|
|
34
|
-
height: 100%;
|
|
42
|
+
//height: 100%;
|
|
35
43
|
border-right: 1px solid ${borderColor};
|
|
36
44
|
background-color: ${labelBgColor};
|
|
37
|
-
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: flex-end;
|
|
38
48
|
& > label {
|
|
39
|
-
height: ${rowHeight}px;
|
|
40
49
|
}
|
|
41
50
|
}
|
|
42
51
|
|
|
43
52
|
.ant-form-item-control-input {
|
|
44
|
-
height:
|
|
45
|
-
|
|
53
|
+
min-height: ${rowHeight}px;
|
|
46
54
|
.ant-form-item-control-input-content {
|
|
47
55
|
display: flex;
|
|
48
56
|
align-items: center;
|
|
49
57
|
height: 100%;
|
|
50
58
|
|
|
51
|
-
|
|
52
|
-
margin-left: 10px;
|
|
53
|
-
}
|
|
54
|
-
|
|
59
|
+
// 基础组件宽高
|
|
55
60
|
input,
|
|
56
61
|
.ant-picker,
|
|
57
|
-
.ant-select
|
|
62
|
+
.ant-select,
|
|
63
|
+
.ant-input-number,
|
|
64
|
+
.ant-select-selector,
|
|
65
|
+
.ant-input-number-input-wrap,
|
|
66
|
+
.ant-mentions textarea {
|
|
58
67
|
width: 100%;
|
|
59
|
-
height:
|
|
68
|
+
height: ${rowHeight}px;
|
|
60
69
|
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
height: 100%;
|
|
70
|
+
|
|
71
|
+
.ant-mentions textarea {
|
|
72
|
+
line-height: ${rowHeight}px;
|
|
65
73
|
}
|
|
66
74
|
}
|
|
67
75
|
}
|
|
68
76
|
|
|
77
|
+
// ⭐️ 统一重置：移除 AntD 默认边框和阴影，设置直角
|
|
69
78
|
.ant-input,
|
|
70
79
|
.ant-select-selector,
|
|
71
80
|
.ant-input-number,
|
|
72
|
-
.ant-picker
|
|
73
|
-
|
|
74
|
-
border
|
|
81
|
+
.ant-picker,
|
|
82
|
+
.ant-mentions {
|
|
83
|
+
border: 0 !important;
|
|
84
|
+
box-shadow: none !important;
|
|
85
|
+
border-radius: 0 !important;
|
|
86
|
+
background: transparent !important;
|
|
87
|
+
transition: none !important;
|
|
88
|
+
}
|
|
75
89
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
90
|
+
// ⭐️ 只有在获取焦点时才添加边框（使用 outline）
|
|
91
|
+
// 1. 普通 Input
|
|
92
|
+
.ant-input:focus,
|
|
93
|
+
.ant-mentions textarea:focus {
|
|
94
|
+
${focusStyle}
|
|
95
|
+
}
|
|
96
|
+
// 2. Select (AntD 聚焦类在 selector 上)
|
|
97
|
+
.ant-select-focused .ant-select-selector {
|
|
98
|
+
${focusStyle}
|
|
99
|
+
}
|
|
100
|
+
// 3. DatePicker
|
|
101
|
+
.ant-picker-focused {
|
|
102
|
+
${focusStyle}
|
|
103
|
+
}
|
|
104
|
+
// 4. InputNumber (外层容器聚焦)
|
|
105
|
+
.ant-input-number-focused {
|
|
106
|
+
${focusStyle}
|
|
83
107
|
}
|
|
84
108
|
|
|
85
|
-
|
|
86
|
-
.ant-
|
|
87
|
-
|
|
109
|
+
// 修正 InputNumber 内部结构线
|
|
110
|
+
.ant-input-number-handler-wrap {
|
|
111
|
+
border-left: 0;
|
|
112
|
+
background: transparent;
|
|
88
113
|
}
|
|
89
114
|
|
|
90
|
-
|
|
91
|
-
|
|
115
|
+
// 文本居中处理
|
|
116
|
+
.ant-select-selector {
|
|
117
|
+
padding: 0 ${horizontalPadding} !important;
|
|
118
|
+
display: flex !important;
|
|
119
|
+
align-items: center !important;
|
|
120
|
+
}
|
|
121
|
+
.ant-input,
|
|
122
|
+
.ant-input-number-input,
|
|
123
|
+
.ant-mentions textarea {
|
|
124
|
+
padding: 0 ${horizontalPadding} !important;
|
|
92
125
|
}
|
|
93
126
|
}
|
|
94
127
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
128
|
+
// ⭐️ 错误状态的处理
|
|
129
|
+
&.ant-form-item-has-error {
|
|
130
|
+
.ant-input,
|
|
131
|
+
.ant-select-selector,
|
|
132
|
+
.ant-input-number,
|
|
133
|
+
.ant-picker {
|
|
134
|
+
${errorStyle}
|
|
135
|
+
}
|
|
100
136
|
}
|
|
101
137
|
}
|
|
102
138
|
`,
|
|
103
139
|
valueDisplayClass: css.css`
|
|
104
140
|
width: 100%;
|
|
105
|
-
height: 100%;
|
|
106
141
|
display: flex;
|
|
107
|
-
padding: 0 11px 0 11px;
|
|
108
142
|
align-items: center;
|
|
143
|
+
padding-left: ${horizontalPadding};
|
|
144
|
+
color: ${textColor};
|
|
145
|
+
box-sizing: border-box;
|
|
109
146
|
`,
|
|
110
|
-
// 内部元素：实现文本溢出
|
|
111
147
|
textWrapperClass: css.css`
|
|
112
|
-
|
|
113
|
-
flex-grow: 1; /* 占据可用空间 */
|
|
148
|
+
flex-grow: 1;
|
|
114
149
|
min-width: 0;
|
|
115
|
-
|
|
116
150
|
white-space: nowrap;
|
|
117
151
|
overflow: hidden;
|
|
118
152
|
text-overflow: ellipsis;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.cjs","sources":["../../../../src/components/table-form/style.ts"],"sourcesContent":["import { ComputedRef } from \"vue\";\r\n\r\nimport { StylesConfig } from \"./interface\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\n\r\
|
|
1
|
+
{"version":3,"file":"style.cjs","sources":["../../../../src/components/table-form/style.ts"],"sourcesContent":["import { ComputedRef } from \"vue\";\r\n\r\nimport { StylesConfig } from \"./interface\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\n\r\nexport const useFormItemStyle = (\r\n styles: StylesConfig,\r\n _token: ComputedRef<GlobalToken>\r\n) => {\r\n const {\r\n rowHeight,\r\n labelBgColor,\r\n borderColor,\r\n focusBorderColor\r\n } = styles;\r\n const token = _token.value;\r\n\r\n const horizontalPadding = `${token.paddingSM}px`;\r\n const textColor = token.colorText;\r\n\r\n // ⭐️ 核心聚焦样式：使用 outline 确保覆盖在所有子组件（如加减按钮）之上\r\n const focusStyle = `\r\n outline: 1px solid ${focusBorderColor} !important;\r\n outline-offset: -1px !important;\r\n z-index: 10;\r\n position: relative;\r\n `;\r\n\r\n // 错误样式\r\n const errorStyle = `\r\n outline: 1px solid ${token.colorError} !important;\r\n outline-offset: -1px !important;\r\n z-index: 10;\r\n position: relative;\r\n `;\r\n\r\n return {\r\n cellBorderStyle: css`\r\n border-right: 1px solid ${borderColor};\r\n border-bottom: 1px solid ${borderColor};\r\n overflow: hidden;\r\n position: relative;\r\n\r\n .ant-form-item {\r\n margin-bottom: 0 !important;\r\n height: 100%;\r\n .ant-form-item-row {\r\n height: 100%;\r\n\r\n .ant-form-item-label {\r\n //height: 100%;\r\n border-right: 1px solid ${borderColor};\r\n background-color: ${labelBgColor};\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n & > label {\r\n }\r\n }\r\n\r\n .ant-form-item-control-input {\r\n min-height: ${rowHeight}px;\r\n .ant-form-item-control-input-content {\r\n display: flex;\r\n align-items: center;\r\n height: 100%;\r\n\r\n // 基础组件宽高\r\n input,\r\n .ant-picker,\r\n .ant-select,\r\n .ant-input-number,\r\n .ant-select-selector,\r\n .ant-input-number-input-wrap,\r\n .ant-mentions textarea {\r\n width: 100%;\r\n height: ${rowHeight}px;\r\n }\r\n\r\n .ant-mentions textarea {\r\n line-height: ${rowHeight}px;\r\n }\r\n }\r\n }\r\n\r\n // ⭐️ 统一重置：移除 AntD 默认边框和阴影，设置直角\r\n .ant-input,\r\n .ant-select-selector,\r\n .ant-input-number,\r\n .ant-picker,\r\n .ant-mentions {\r\n border: 0 !important;\r\n box-shadow: none !important;\r\n border-radius: 0 !important;\r\n background: transparent !important;\r\n transition: none !important;\r\n }\r\n\r\n // ⭐️ 只有在获取焦点时才添加边框（使用 outline）\r\n // 1. 普通 Input\r\n .ant-input:focus,\r\n .ant-mentions textarea:focus {\r\n ${focusStyle}\r\n }\r\n // 2. Select (AntD 聚焦类在 selector 上)\r\n .ant-select-focused .ant-select-selector {\r\n ${focusStyle}\r\n }\r\n // 3. DatePicker\r\n .ant-picker-focused {\r\n ${focusStyle}\r\n }\r\n // 4. InputNumber (外层容器聚焦)\r\n .ant-input-number-focused {\r\n ${focusStyle}\r\n }\r\n\r\n // 修正 InputNumber 内部结构线\r\n .ant-input-number-handler-wrap {\r\n border-left: 0;\r\n background: transparent;\r\n }\r\n\r\n // 文本居中处理\r\n .ant-select-selector {\r\n padding: 0 ${horizontalPadding} !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n }\r\n .ant-input,\r\n .ant-input-number-input,\r\n .ant-mentions textarea {\r\n padding: 0 ${horizontalPadding} !important;\r\n }\r\n }\r\n\r\n // ⭐️ 错误状态的处理\r\n &.ant-form-item-has-error {\r\n .ant-input,\r\n .ant-select-selector,\r\n .ant-input-number,\r\n .ant-picker {\r\n ${errorStyle}\r\n }\r\n }\r\n }\r\n `,\r\n\r\n valueDisplayClass: css`\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n padding-left: ${horizontalPadding};\r\n color: ${textColor};\r\n box-sizing: border-box;\r\n `,\r\n\r\n textWrapperClass: css`\r\n flex-grow: 1;\r\n min-width: 0;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n `\r\n };\r\n};\r\n"],"names":["css"],"mappings":";;;;;AAMO,MAAM,gBAAA,GAAmB,CAC9B,MAAA,EACA,MAAA,KACG;AACH,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF,GAAI,MAAA;AACJ,EAAA,MAAM,QAAQ,MAAA,CAAO,KAAA;AAErB,EAAA,MAAM,iBAAA,GAAoB,CAAA,EAAG,KAAA,CAAM,SAAS,CAAA,EAAA,CAAA;AAC5C,EAAA,MAAM,YAAY,KAAA,CAAM,SAAA;AAGxB,EAAA,MAAM,UAAA,GAAa;AAAA,uBAAA,EACI,gBAAgB,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAOvC,EAAA,MAAM,UAAA,GAAa;AAAA,uBAAA,EACI,MAAM,UAAU,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAMvC,EAAA,OAAO;AAAA,IACL,eAAA,EAAiBA,OAAA;AAAA,8BAAA,EACW,WAAW,CAAA;AAAA,+BAAA,EACV,WAAW,CAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA,oCAAA,EAYN,WAAW,CAAA;AAAA,8BAAA,EACjB,YAAY,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA,wBAAA,EASlB,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAA,EAeT,SAAS,CAAA;AAAA;;AAAA;AAAA,6BAAA,EAIJ,SAAS,CAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,YAAA,EAsB1B,UAAU;AAAA;AAAA;AAAA;AAAA,YAAA,EAIV,UAAU;AAAA;AAAA;AAAA;AAAA,YAAA,EAIV,UAAU;AAAA;AAAA;AAAA;AAAA,YAAA,EAIV,UAAU;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA,uBAAA,EAWC,iBAAiB,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAA,EAOjB,iBAAiB,CAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAA,EAU5B,UAAU;AAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAMpB,iBAAA,EAAmBA,OAAA;AAAA;AAAA;AAAA;AAAA,oBAAA,EAID,iBAAiB,CAAA;AAAA,aAAA,EACxB,SAAS,CAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAIpB,gBAAA,EAAkBA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,GAOpB;AACF;;;;"}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { ComputedRef } from "vue";
|
|
2
2
|
import { StylesConfig } from "./interface";
|
|
3
3
|
import type { GlobalToken } from "ant-design-vue/es/theme/interface";
|
|
4
|
-
/**
|
|
5
|
-
* 表单项样式
|
|
6
|
-
*/
|
|
7
4
|
export declare const useFormItemStyle: (styles: StylesConfig, _token: ComputedRef<GlobalToken>) => {
|
|
8
5
|
cellBorderStyle: string;
|
|
9
6
|
valueDisplayClass: string;
|
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
export declare const Card: import("../../utils/withInstall").SFCWithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
2
2
|
title: StringConstructor;
|
|
3
|
+
headerBordered: {
|
|
4
|
+
type: BooleanConstructor;
|
|
5
|
+
default: boolean;
|
|
6
|
+
};
|
|
3
7
|
}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
4
8
|
title: StringConstructor;
|
|
5
|
-
|
|
9
|
+
headerBordered: {
|
|
10
|
+
type: BooleanConstructor;
|
|
11
|
+
default: boolean;
|
|
12
|
+
};
|
|
13
|
+
}>> & Readonly<{}>, {
|
|
14
|
+
headerBordered: boolean;
|
|
15
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
|
|
6
16
|
//# sourceMappingURL=Card.d.ts.map
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import { defineComponent, createVNode } from 'vue';
|
|
2
|
+
import { useStyle } from './style.mjs';
|
|
2
3
|
import { cx } from '@emotion/css';
|
|
3
4
|
import { useDesign } from '../../hooks/useDesign.mjs';
|
|
4
5
|
import { withInstall } from '../../utils/withInstall.mjs';
|
|
5
|
-
import { useStyle } from './style.mjs';
|
|
6
6
|
|
|
7
7
|
"use strict";
|
|
8
8
|
const _Card = /* @__PURE__ */ defineComponent({
|
|
9
9
|
name: "DCard",
|
|
10
10
|
props: {
|
|
11
|
-
title: String
|
|
11
|
+
title: String,
|
|
12
|
+
headerBordered: {
|
|
13
|
+
type: Boolean,
|
|
14
|
+
default: false
|
|
15
|
+
}
|
|
12
16
|
},
|
|
13
17
|
setup(props, {
|
|
14
18
|
slots
|
|
@@ -30,9 +34,11 @@ const _Card = /* @__PURE__ */ defineComponent({
|
|
|
30
34
|
return createVNode("div", {
|
|
31
35
|
"class": cx(rootCls, styles.container)
|
|
32
36
|
}, [createVNode("div", {
|
|
33
|
-
"class": cx(headerWrapperCls, styles.header
|
|
37
|
+
"class": cx(headerWrapperCls, styles.header, {
|
|
38
|
+
border: props.headerBordered
|
|
39
|
+
})
|
|
34
40
|
}, [createVNode("div", {
|
|
35
|
-
"class": cx(headerCls)
|
|
41
|
+
"class": cx(headerCls, styles.headerLeft)
|
|
36
42
|
}, [slots.icon && createVNode("div", {
|
|
37
43
|
"class": cx(iconCls, styles.icon)
|
|
38
44
|
}, [slots.icon()]), createVNode("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.mjs","sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["// components/card/index.tsx\r\nimport { defineComponent } from \"vue\";\r\n\r\nimport { cx } from \"@emotion/css\"; // 引入 cx\r\n\r\nimport { useDesign } from \"../../hooks/useDesign\"; // 引入我们刚才写的 hook\r\nimport { withInstall } from \"../../utils/withInstall\";\r\n\r\
|
|
1
|
+
{"version":3,"file":"Card.mjs","sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["// components/card/index.tsx\r\nimport { defineComponent } from \"vue\";\r\n\r\nimport { useStyle } from \"./style\";\r\nimport { cx } from \"@emotion/css\"; // 引入 cx\r\n\r\nimport { useDesign } from \"../../hooks/useDesign\"; // 引入我们刚才写的 hook\r\n\r\nimport { withInstall } from \"../../utils/withInstall\";\r\n\r\nconst _Card = defineComponent({\r\n name: \"DCard\",\r\n props: {\r\n title: String,\r\n headerBordered: {\r\n type: Boolean,\r\n default: false\r\n }\r\n },\r\n setup(props, { slots }) {\r\n // 初始化 Design Hook，传入组件名 'card'\r\n const { getPrefixCls } = useDesign(\"card\");\r\n\r\n // 初始化 Emotion 样式\r\n const styles = useStyle();\r\n\r\n return () => {\r\n // 生成语义化类名\r\n const rootCls = getPrefixCls();\r\n const headerWrapperCls = getPrefixCls(\"head-wrapper\");\r\n const headerCls = getPrefixCls(\"head\");\r\n const headerExctraCls = getPrefixCls(\"extra\");\r\n const iconCls = getPrefixCls(\"icon\");\r\n const titleCls = getPrefixCls(\"title\");\r\n const actionCls = getPrefixCls(\"action\");\r\n const bodyCls = getPrefixCls(\"body\");\r\n\r\n return (\r\n <div class={cx(rootCls, styles.container)}>\r\n {/* Header 区域 */}\r\n <div\r\n class={cx(headerWrapperCls, styles.header, {\r\n border: props.headerBordered\r\n })}\r\n >\r\n <div class={cx(headerCls, styles.headerLeft)}>\r\n {slots.icon && (\r\n <div class={cx(iconCls, styles.icon)}>\r\n {slots.icon()}\r\n </div>\r\n )}\r\n <div\r\n class={cx(titleCls, styles.header_title)}\r\n >\r\n {props.title}\r\n </div>\r\n </div>\r\n {slots.extra && (\r\n <div class={cx(headerExctraCls)}>\r\n {slots.extra()}\r\n </div>\r\n )}\r\n </div>\r\n {/*action*/}\r\n {slots.action && (\r\n <div class={cx(actionCls, styles.action)}>\r\n {slots.action()}\r\n </div>\r\n )}\r\n\r\n {/* Body 区域 */}\r\n <div class={cx(bodyCls, styles.body)}>\r\n {slots.default?.()}\r\n </div>\r\n </div>\r\n );\r\n };\r\n }\r\n});\r\n\r\nexport const Card = withInstall(_Card);\r\n"],"names":["_Card","defineComponent","name","props","title","String","headerBordered","type","Boolean","default","setup","slots","getPrefixCls","useDesign","styles","useStyle","rootCls","headerWrapperCls","headerCls","headerExctraCls","iconCls","titleCls","actionCls","bodyCls","_createVNode","cx","container","header","border","headerLeft","icon","header_title","extra","action","body","Card","withInstall"],"mappings":"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"}
|
|
@@ -2,36 +2,53 @@ import { css } from '@emotion/css';
|
|
|
2
2
|
|
|
3
3
|
"use strict";
|
|
4
4
|
const useStyle = () => {
|
|
5
|
+
const paddingBase = "10px";
|
|
6
|
+
const borderColor = "rgba(5, 5, 5, 0.06)";
|
|
5
7
|
return {
|
|
6
8
|
container: css`
|
|
7
9
|
display: flex;
|
|
8
10
|
flex-direction: column;
|
|
9
11
|
background-color: #fff;
|
|
12
|
+
|
|
13
|
+
overflow: hidden; /* 确保子元素边框不溢出圆角 */
|
|
10
14
|
`,
|
|
11
15
|
header: css`
|
|
12
16
|
display: flex;
|
|
13
|
-
padding:
|
|
17
|
+
padding: ${paddingBase};
|
|
14
18
|
align-items: center;
|
|
15
19
|
justify-content: space-between;
|
|
20
|
+
transition: border-color 0.3s; /* 增加平滑感 */
|
|
21
|
+
|
|
22
|
+
&.border {
|
|
23
|
+
border-bottom: 1px solid ${borderColor};
|
|
24
|
+
}
|
|
25
|
+
`,
|
|
26
|
+
headerLeft: css`
|
|
27
|
+
display: flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
min-width: 0; /* 配合 ellipsis 必须加这行 */
|
|
16
30
|
`,
|
|
17
31
|
header_title: css`
|
|
18
|
-
|
|
19
|
-
|
|
32
|
+
font-weight: 600; /* 标题加粗 */
|
|
33
|
+
color: rgba(0, 0, 0, 0.88);
|
|
20
34
|
white-space: nowrap;
|
|
35
|
+
overflow: hidden;
|
|
36
|
+
text-overflow: ellipsis; /* 标题过长自动省略号，比单纯截断更友好 */
|
|
21
37
|
`,
|
|
22
|
-
// 可选：如果你需要对 icon 容器做特殊处理（例如防止图标被压缩）
|
|
23
38
|
icon: css`
|
|
24
|
-
margin-right:
|
|
39
|
+
margin-right: 8px; /* 间距稍大一点 */
|
|
25
40
|
display: inline-flex;
|
|
26
41
|
align-items: center;
|
|
27
|
-
flex-shrink: 0;
|
|
42
|
+
flex-shrink: 0;
|
|
43
|
+
font-size: 16px; /* 统一图标大小 */
|
|
28
44
|
`,
|
|
29
45
|
action: css`
|
|
30
|
-
padding:
|
|
46
|
+
padding: ${paddingBase};
|
|
31
47
|
`,
|
|
32
48
|
body: css`
|
|
33
49
|
display: flex;
|
|
34
50
|
flex-direction: column;
|
|
51
|
+
flex: 1; /* 让 body 自动撑开 */
|
|
35
52
|
`
|
|
36
53
|
};
|
|
37
54
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/card/style.ts"],"sourcesContent":["import { css } from \"@emotion/css\";\r\n\r\nexport const useStyle = () => {\r\n return {\r\n container: css`\r\n display: flex;\r\n flex-direction: column;\r\n background-color: #fff;\r\n `,\r\n header: css`\r\n display: flex;\r\n padding:
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/card/style.ts"],"sourcesContent":["import { css } from \"@emotion/css\";\r\n\r\nexport const useStyle = () => {\r\n // 建议定义一组内部变量，或者从主题 hook 中获取\r\n const paddingBase = \"10px\"; // 稍微大一点的内边距看起来更有质感\r\n const borderColor = \"rgba(5, 5, 5, 0.06)\"; // AntD 5 风格的淡色边框\r\n\r\n return {\r\n container: css`\r\n display: flex;\r\n flex-direction: column;\r\n background-color: #fff;\r\n\r\n overflow: hidden; /* 确保子元素边框不溢出圆角 */\r\n `,\r\n header: css`\r\n display: flex;\r\n padding: ${paddingBase};\r\n align-items: center;\r\n justify-content: space-between;\r\n transition: border-color 0.3s; /* 增加平滑感 */\r\n\r\n &.border {\r\n border-bottom: 1px solid ${borderColor};\r\n }\r\n `,\r\n headerLeft: css`\r\n display: flex;\r\n align-items: center;\r\n min-width: 0; /* 配合 ellipsis 必须加这行 */\r\n `,\r\n header_title: css`\r\n font-weight: 600; /* 标题加粗 */\r\n color: rgba(0, 0, 0, 0.88);\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis; /* 标题过长自动省略号，比单纯截断更友好 */\r\n `,\r\n icon: css`\r\n margin-right: 8px; /* 间距稍大一点 */\r\n display: inline-flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n font-size: 16px; /* 统一图标大小 */\r\n `,\r\n action: css`\r\n padding: ${paddingBase};\r\n `,\r\n body: css`\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1; /* 让 body 自动撑开 */\r\n `\r\n };\r\n};\r\n"],"names":[],"mappings":";;;AAEO,MAAM,WAAW,MAAM;AAE5B,EAAA,MAAM,WAAA,GAAc,MAAA;AACpB,EAAA,MAAM,WAAA,GAAc,qBAAA;AAEpB,EAAA,OAAO;AAAA,IACL,SAAA,EAAW,GAAA;AAAA;AAAA;AAAA;;AAAA;AAAA,IAAA,CAAA;AAAA,IAOX,MAAA,EAAQ,GAAA;AAAA;AAAA,eAAA,EAEK,WAAW,CAAA;AAAA;AAAA;AAAA;;AAAA;AAAA,iCAAA,EAMO,WAAW,CAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAG1C,UAAA,EAAY,GAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAKZ,YAAA,EAAc,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAOd,IAAA,EAAM,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAON,MAAA,EAAQ,GAAA;AAAA,eAAA,EACK,WAAW,CAAA;AAAA,IAAA,CAAA;AAAA,IAExB,IAAA,EAAM,GAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,GAKR;AACF;;;;"}
|
|
@@ -128,14 +128,59 @@ const DTable = /* @__PURE__ */ defineComponent({
|
|
|
128
128
|
}
|
|
129
129
|
function useSlots() {
|
|
130
130
|
const tableSlots2 = {
|
|
131
|
+
// --- 单元格类 ---
|
|
131
132
|
bodyCell: (params) => {
|
|
132
133
|
var _a;
|
|
133
134
|
return (_a = slots.bodyCell) == null ? void 0 : _a.call(slots, params);
|
|
134
135
|
},
|
|
136
|
+
headerCell: (params) => {
|
|
137
|
+
var _a;
|
|
138
|
+
return (_a = slots.headerCell) == null ? void 0 : _a.call(slots, params);
|
|
139
|
+
},
|
|
140
|
+
// 自定义表头
|
|
141
|
+
// --- 展开与总结 ---
|
|
142
|
+
expandedRowRender: (params) => {
|
|
143
|
+
var _a;
|
|
144
|
+
return (_a = slots.expandedRowRender) == null ? void 0 : _a.call(slots, params);
|
|
145
|
+
},
|
|
146
|
+
// 额外展开行内容
|
|
147
|
+
expandIcon: (params) => {
|
|
148
|
+
var _a;
|
|
149
|
+
return (_a = slots.expandIcon) == null ? void 0 : _a.call(slots, params);
|
|
150
|
+
},
|
|
151
|
+
// 自定义展开图标
|
|
135
152
|
summary: () => {
|
|
136
153
|
var _a;
|
|
137
154
|
return (_a = slots.summary) == null ? void 0 : _a.call(slots);
|
|
155
|
+
},
|
|
156
|
+
// 总结行
|
|
157
|
+
// --- 筛选与搜索 ---
|
|
158
|
+
customFilterDropdown: (params) => {
|
|
159
|
+
var _a;
|
|
160
|
+
return (_a = slots.customFilterDropdown) == null ? void 0 : _a.call(slots, params);
|
|
161
|
+
},
|
|
162
|
+
// 自定义筛选菜单
|
|
163
|
+
customFilterIcon: (params) => {
|
|
164
|
+
var _a;
|
|
165
|
+
return (_a = slots.customFilterIcon) == null ? void 0 : _a.call(slots, params);
|
|
166
|
+
},
|
|
167
|
+
// 自定义筛选图标
|
|
168
|
+
// --- 装饰类 ---
|
|
169
|
+
title: () => {
|
|
170
|
+
var _a;
|
|
171
|
+
return (_a = slots.title) == null ? void 0 : _a.call(slots);
|
|
172
|
+
},
|
|
173
|
+
// 表格顶部标题
|
|
174
|
+
footer: () => {
|
|
175
|
+
var _a;
|
|
176
|
+
return (_a = slots.footer) == null ? void 0 : _a.call(slots);
|
|
177
|
+
},
|
|
178
|
+
// 表格底部页脚
|
|
179
|
+
emptyText: () => {
|
|
180
|
+
var _a;
|
|
181
|
+
return (_a = slots.emptyText) == null ? void 0 : _a.call(slots);
|
|
138
182
|
}
|
|
183
|
+
// 自定义空状态内容
|
|
139
184
|
};
|
|
140
185
|
return {
|
|
141
186
|
tableSlots: tableSlots2
|