plain-design 1.0.0-beta.44 → 1.0.0-beta.46
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/plain-design.commonjs.min.js +2 -2
- package/dist/plain-design.min.css +4 -4
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +2 -2
- package/package.json +1 -1
- package/src/packages/components/Application/theme/theme.ts +24 -14
- package/src/packages/components/AutoTable/auto-table.scss +63 -12
- package/src/packages/components/AutoTable/filter/useTableOption.filter.form.tsx +17 -15
- package/src/packages/components/AutoTable/use/useTableOption.buttons.tsx +12 -0
- package/src/packages/components/AutoTable/use/useTableOption.tips.tsx +1 -1
- package/src/packages/components/FilterFormMultiple/filter-form-multiple.scss +0 -1
- package/src/packages/components/Form/form.scss +1 -1
- package/src/packages/components/Form/layout/useFormLayout.tsx +3 -3
- package/src/packages/components/Icon/index.tsx +1 -1
- package/src/packages/components/Table/standard/PlcOperation/OuterOperation.tsx +4 -3
- package/src/packages/components/Table/standard/PlcOperation/PlcOperation.tsx +1 -1
- package/src/packages/components/Table/standard/PlcOperation/PlcOperation.utils.tsx +2 -0
- package/src/packages/components/ThemeEditor/theme-editor.scss +1 -1
package/package.json
CHANGED
@@ -5,12 +5,22 @@ import {clearFields} from "../../../utils/clearFields";
|
|
5
5
|
|
6
6
|
/*默认的基础色*/
|
7
7
|
export const BaseColors = {
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
8
|
+
dark: {
|
9
|
+
gray: '',
|
10
|
+
secondary: '',
|
11
|
+
primary: '#5e53ff',
|
12
|
+
success: '#00b42a',
|
13
|
+
warn: '#ff7d00',
|
14
|
+
error: '#f53f3f',
|
15
|
+
},
|
16
|
+
light: {
|
17
|
+
gray: '',
|
18
|
+
secondary: '',
|
19
|
+
primary: '#452feb',
|
20
|
+
success: '#00b42a',
|
21
|
+
warn: '#ff7d00',
|
22
|
+
error: '#f53f3f',
|
23
|
+
},
|
14
24
|
};
|
15
25
|
|
16
26
|
/*基础的灰色*/
|
@@ -121,10 +131,10 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
|
|
121
131
|
'box-size-normal-font-size': referenceVariable('font-size-normal'),
|
122
132
|
'box-size-large-font-size': referenceVariable('font-size-normal'),
|
123
133
|
/*border radius of sizes*/
|
124
|
-
'box-size-mini-border-radius': '
|
125
|
-
'box-size-small-border-radius': '
|
126
|
-
'box-size-normal-border-radius': '
|
127
|
-
'box-size-large-border-radius': '
|
134
|
+
'box-size-mini-border-radius': '4px',
|
135
|
+
'box-size-small-border-radius': '4px',
|
136
|
+
'box-size-normal-border-radius': '4px',
|
137
|
+
'box-size-large-border-radius': '4px',
|
128
138
|
/*---------------------------------------input-------------------------------------------*/
|
129
139
|
'input-padding-x-mini': '9px',
|
130
140
|
'input-padding-x-small': '11px',
|
@@ -137,8 +147,8 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
|
|
137
147
|
'input-clear-size-large': '23px',
|
138
148
|
/*---------------------------------------dialog-------------------------------------------*/
|
139
149
|
'dialog-mask-color': 'rgba(0,0,0,0.3)',
|
140
|
-
'dialog-head-padding-x': '
|
141
|
-
'dialog-body-padding': '16px
|
150
|
+
'dialog-head-padding-x': '16px',
|
151
|
+
'dialog-body-padding': '16px 16px',
|
142
152
|
'dialog-foot-padding': '8px 16px',
|
143
153
|
'dialog-head-size': '48px',
|
144
154
|
/*---------------------------------------message-------------------------------------------*/
|
@@ -190,7 +200,7 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
|
|
190
200
|
}
|
191
201
|
|
192
202
|
/*基础色*/
|
193
|
-
type iThemeBaseColors = keyof typeof BaseColors
|
203
|
+
type iThemeBaseColors = keyof typeof BaseColors.dark
|
194
204
|
/*其他主题变量*/
|
195
205
|
type iThemeOtherVars = keyof ReturnType<typeof createOtherVars>
|
196
206
|
/*基础色衍生的变量*/
|
@@ -205,7 +215,7 @@ export interface iThemeConfiguration {
|
|
205
215
|
|
206
216
|
export function createThemeConfigurationData(prefix: string | null, config?: DeepPartial<iThemeConfiguration>): iThemeConfiguration {
|
207
217
|
const dark = config?.dark == undefined ? false : config.dark;
|
208
|
-
const base = { ...BaseColors, ...clearFields(config?.base) };
|
218
|
+
const base = { ...dark ? BaseColors.dark : BaseColors.light, ...clearFields(config?.base) };
|
209
219
|
const referenceVariable = (varName: string): string => `var(--${!!prefix ? prefix + '-' : ''}${varName})`;
|
210
220
|
|
211
221
|
const baseColorList: Record<tGenerateBaseColorList<iThemeBaseColors>, string> = (() => {
|
@@ -12,6 +12,56 @@
|
|
12
12
|
}
|
13
13
|
}
|
14
14
|
}
|
15
|
+
|
16
|
+
.#{componentName(auto-table-tips)} .auto-table-tips-item {
|
17
|
+
margin-top: $margin;
|
18
|
+
margin-bottom: $margin;
|
19
|
+
}
|
20
|
+
|
21
|
+
.#{componentName(filter-form-multiple)} {
|
22
|
+
/* & + div {
|
23
|
+
position: relative;
|
24
|
+
|
25
|
+
&:before {
|
26
|
+
position: absolute;
|
27
|
+
left: calc(#{$margin} * -1);
|
28
|
+
right: calc(#{$margin} * -1);
|
29
|
+
bottom: calc(100% + #{$margin});
|
30
|
+
height: $margin;
|
31
|
+
background-color: plv(bg-1);
|
32
|
+
content: '';
|
33
|
+
}
|
34
|
+
}*/
|
35
|
+
}
|
36
|
+
|
37
|
+
.auto-table-filter-form-separator {
|
38
|
+
background-color: plv(bg-1);
|
39
|
+
margin: calc(#{$margin} - #{$border-radius}) calc(#{$margin} * -1);
|
40
|
+
height: calc(#{$margin} + #{$border-radius} * 2);
|
41
|
+
position: relative;
|
42
|
+
|
43
|
+
&:before {
|
44
|
+
position: absolute;
|
45
|
+
top: 0;
|
46
|
+
left: 0;
|
47
|
+
right: 0;
|
48
|
+
height: $border-radius;
|
49
|
+
background-color: plv(bg-2);
|
50
|
+
content: '';
|
51
|
+
border-radius: $border-radius;
|
52
|
+
}
|
53
|
+
|
54
|
+
&:after {
|
55
|
+
position: absolute;
|
56
|
+
bottom: 0;
|
57
|
+
left: 0;
|
58
|
+
right: 0;
|
59
|
+
height: $border-radius;
|
60
|
+
background-color: plv(bg-2);
|
61
|
+
content: '';
|
62
|
+
border-radius: $border-radius;
|
63
|
+
}
|
64
|
+
}
|
15
65
|
}
|
16
66
|
|
17
67
|
.virtual-table-head-table {
|
@@ -82,12 +132,12 @@
|
|
82
132
|
.auto-table-tips-item {
|
83
133
|
display: inline-flex;
|
84
134
|
align-items: center;
|
85
|
-
font-size:
|
86
|
-
background-color: plv(
|
87
|
-
border: solid 1px plv(
|
88
|
-
color: plv(
|
135
|
+
font-size: 12px;
|
136
|
+
background-color: plv(bg-2);
|
137
|
+
border: solid 1px plv(border-color);
|
138
|
+
color: plv(text-2);
|
89
139
|
cursor: pointer;
|
90
|
-
margin:
|
140
|
+
margin-right: 8px;
|
91
141
|
height: 1.8em;
|
92
142
|
overflow: hidden;
|
93
143
|
border-radius: plv(box-size-small-border-radius);
|
@@ -99,7 +149,7 @@
|
|
99
149
|
text-overflow: ellipsis;
|
100
150
|
white-space: nowrap;
|
101
151
|
position: relative;
|
102
|
-
padding: 0 4px;
|
152
|
+
padding: 0 0 0 4px;
|
103
153
|
|
104
154
|
&:hover {
|
105
155
|
text-decoration: underline;
|
@@ -112,15 +162,16 @@
|
|
112
162
|
transition: background-color linear 300ms;
|
113
163
|
|
114
164
|
&:hover {
|
115
|
-
background-color: plv(
|
165
|
+
background-color: plv(secondary-2);
|
116
166
|
}
|
117
167
|
}
|
118
168
|
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
169
|
+
/* & + .#{componentName(button)} {
|
170
|
+
@include comp(icon) {
|
171
|
+
position: relative;
|
172
|
+
top: 2px;
|
173
|
+
}
|
174
|
+
}*/
|
124
175
|
}
|
125
176
|
}
|
126
177
|
|
@@ -160,24 +160,26 @@ export const useTableOptionFilterForm = AutoModule.createRegistration((
|
|
160
160
|
});
|
161
161
|
|
162
162
|
hooks.onTableRender.use({
|
163
|
-
processor: ({ list, render }) => {list.push({ seq:
|
163
|
+
processor: ({ list, render }) => {list.push({ seq: 3.5, key: 'form-filter', render, });},
|
164
164
|
render: () => (
|
165
165
|
!!filterOptions.value &&
|
166
166
|
filterOptions.value.length > 0 &&
|
167
|
-
state.show &&
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
167
|
+
state.show && <>
|
168
|
+
<FilterFormMultiple
|
169
|
+
ref={onRef.filter}
|
170
|
+
filterOptions={filterOptions.value!}
|
171
|
+
initialState={state.data}
|
172
|
+
onSearch={handler.onNormalSearch}
|
173
|
+
column={config.filterFormColumn}
|
174
|
+
searchButtonAttrs={{ mode: 'flat' }}
|
175
|
+
v-slots={{
|
176
|
+
operation: () => (
|
177
|
+
<Button label={i18n('base.collapse').d('收起')} icon="pi-shrink" onClick={methods.toggleShow}/>
|
178
|
+
)
|
179
|
+
}}
|
180
|
+
/>
|
181
|
+
<div className="auto-table-filter-form-separator"/>
|
182
|
+
</>
|
181
183
|
),
|
182
184
|
});
|
183
185
|
|
@@ -79,6 +79,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
|
|
79
79
|
{
|
80
80
|
label: i18n('table.formEdit').d('表单编辑'),
|
81
81
|
position: 'outer',
|
82
|
+
dropdown:true,
|
82
83
|
type: 'update',
|
83
84
|
code: 'outer-update',
|
84
85
|
icon: 'pi-edit',
|
@@ -88,6 +89,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
|
|
88
89
|
{
|
89
90
|
label: i18n('table.batchCreate').d('批量新建'),
|
90
91
|
position: 'outer',
|
92
|
+
dropdown:true,
|
91
93
|
type: 'insert',
|
92
94
|
code: 'outer-batch-insert',
|
93
95
|
icon: 'pi-plus',
|
@@ -97,6 +99,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
|
|
97
99
|
{
|
98
100
|
label: i18n('table.batchEdit').d('批量编辑'),
|
99
101
|
position: 'outer',
|
102
|
+
dropdown:true,
|
100
103
|
type: 'update',
|
101
104
|
code: 'outer-batch-update',
|
102
105
|
icon: 'pi-save',
|
@@ -106,6 +109,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
|
|
106
109
|
{
|
107
110
|
label: i18n('table.batchDelete').d('批量删除'),
|
108
111
|
position: 'outer',
|
112
|
+
dropdown:true,
|
109
113
|
type: 'delete',
|
110
114
|
code: 'outer-batch-delete',
|
111
115
|
icon: 'pi-eraser',
|
@@ -115,6 +119,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
|
|
115
119
|
{
|
116
120
|
label: i18n('table.batchModify').d('批量修改'),
|
117
121
|
position: 'outer',
|
122
|
+
dropdown:true,
|
118
123
|
type: 'update',
|
119
124
|
code: 'outer-batch-modify',
|
120
125
|
icon: 'pi-mind-mapping',
|
@@ -124,6 +129,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
|
|
124
129
|
{
|
125
130
|
label: i18n('table.allFilter').d('所有筛选'),
|
126
131
|
position: 'outer',
|
132
|
+
dropdown:true,
|
127
133
|
type: 'other',
|
128
134
|
code: 'all-filters',
|
129
135
|
icon: 'pi-filter',
|
@@ -133,6 +139,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
|
|
133
139
|
{
|
134
140
|
label: i18n('table.seniorFilter').d('高级筛选'),
|
135
141
|
position: 'outer',
|
142
|
+
dropdown:true,
|
136
143
|
type: 'other',
|
137
144
|
code: 'senior-filters',
|
138
145
|
icon: 'pi-find-replace',
|
@@ -142,6 +149,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
|
|
142
149
|
{
|
143
150
|
label: i18n('table.seniorSort').d('高级排序'),
|
144
151
|
position: 'outer',
|
152
|
+
dropdown:true,
|
145
153
|
type: 'other',
|
146
154
|
code: 'senior-sort',
|
147
155
|
icon: 'pi-sort-ascending',
|
@@ -151,6 +159,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
|
|
151
159
|
{
|
152
160
|
label: i18n('table.customSetting').d('个性设置'),
|
153
161
|
position: 'outer',
|
162
|
+
dropdown:true,
|
154
163
|
type: 'other',
|
155
164
|
code: 'custom-setting',
|
156
165
|
icon: 'pi-settings',
|
@@ -160,6 +169,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
|
|
160
169
|
{
|
161
170
|
label: i18n('table.cacheSetting').d('缓存设置'),
|
162
171
|
position: 'outer',
|
172
|
+
dropdown:true,
|
163
173
|
type: 'other',
|
164
174
|
code: 'cache-setting',
|
165
175
|
icon: 'pi-layers',
|
@@ -169,6 +179,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
|
|
169
179
|
{
|
170
180
|
label: i18n('table.importData').d('导入数据'),
|
171
181
|
position: 'outer',
|
182
|
+
dropdown:true,
|
172
183
|
type: 'other',
|
173
184
|
code: 'import',
|
174
185
|
icon: 'pi-import',
|
@@ -178,6 +189,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
|
|
178
189
|
{
|
179
190
|
label: i18n('table.exportData').d('导出数据'),
|
180
191
|
position: 'outer',
|
192
|
+
dropdown:true,
|
181
193
|
type: 'other',
|
182
194
|
code: 'export',
|
183
195
|
icon: 'pi-export',
|
@@ -54,7 +54,7 @@ export const RenderTableOptionTips = designComponent({
|
|
54
54
|
{tips.map((tip, index) => (
|
55
55
|
<RenderTableOptionTipItem tip={tip} key={index}/>
|
56
56
|
))}
|
57
|
-
{!props.hideClearButton && <Button mode="text" icon="pi-delete" label={i18n('table.clearAll').d('全部清空')} onClick={emit.onClearAll}/>}
|
57
|
+
{!props.hideClearButton && <Button size="small" mode="text" icon="pi-delete" label={i18n('table.clearAll').d('全部清空')} onClick={emit.onClearAll}/>}
|
58
58
|
</div>
|
59
59
|
);
|
60
60
|
};
|
@@ -128,15 +128,15 @@ export const useFormLayout = (() => {
|
|
128
128
|
/*根节点样式*/
|
129
129
|
const styles = useStyles((styles) => {
|
130
130
|
if (!isSingleColumn.value) {
|
131
|
-
styles.padding = `${rowGutter.value / 2}px ${gutter.value}px`;
|
131
|
+
// styles.padding = `${rowGutter.value / 2}px ${gutter.value}px`;
|
132
132
|
}
|
133
133
|
});
|
134
134
|
/*inner节点样式,有列间距时拓展宽度*/
|
135
135
|
const innerStyles = useStyles(style => {
|
136
136
|
if (!isSingleColumn.value && !!gutter.value) {
|
137
137
|
style.width = `calc(100% + ${unit(gutter.value)})`;
|
138
|
-
style.marginLeft = unit(-gutter.value / 2);
|
139
138
|
}
|
139
|
+
style.margin = `${-rowGutter.value / 2}px ${unit(-gutter.value / 2)}`;
|
140
140
|
});
|
141
141
|
const refer = { props, styles, gutter, rowGutter, innerStyles, isSingleColumn, validateMessagePosition };
|
142
142
|
provide(FORM_LAYOUT_PROVIDER, refer);
|
@@ -290,7 +290,7 @@ const FormSizeRowsGutter: Record<typeof ThemeSize.TYPE, number> = {
|
|
290
290
|
large: 32,
|
291
291
|
normal: 24,
|
292
292
|
small: 16,
|
293
|
-
mini:
|
293
|
+
mini: 14,
|
294
294
|
};
|
295
295
|
|
296
296
|
export const FormValidateMessagePosition = createEnum([
|
@@ -14,7 +14,7 @@ export const Icon = designComponent({
|
|
14
14
|
inheritPropsType: iHTMLElement,
|
15
15
|
props: {
|
16
16
|
icon: { type: String },
|
17
|
-
strokeWidth: { type: Number, default:
|
17
|
+
strokeWidth: { type: Number, default: 4 },
|
18
18
|
strokeLinecap: { type: String as PropType<tStrokeLinecap>, default: "butt", },
|
19
19
|
strokeLinejoin: { type: String as PropType<tStrokeLinejoin>, default: "miter", },
|
20
20
|
|
@@ -62,7 +62,7 @@ export const OuterOperation = designComponent({
|
|
62
62
|
let outerOperationConfigs: iTableOuterOperationConfig[] = props.operations?.filter(i => !i.position || i.position === eTableOperationPosition.outer) as any;
|
63
63
|
outerOperationConfigs = props.processOuterOperations?.(outerOperationConfigs) || outerOperationConfigs || [];
|
64
64
|
outerOperationConfigs.forEach(i => {
|
65
|
-
const { position, handler, keyboard, render } = i;
|
65
|
+
const { position, handler, keyboard, render, dropdown } = i;
|
66
66
|
const type = typeof i.type === "function" ? i.type() : i.type || 'other';
|
67
67
|
const operation: iTableOuterOperation = {
|
68
68
|
label: typeof i.label === "function" ? i.label() : i.label,
|
@@ -73,6 +73,7 @@ export const OuterOperation = designComponent({
|
|
73
73
|
type,
|
74
74
|
disabled: typeof i.disabled === "function" ? i.disabled() : !!i.disabled,
|
75
75
|
position,
|
76
|
+
dropdown,
|
76
77
|
handler,
|
77
78
|
mode: typeof i.mode === "function" ? i.mode() : i.mode,
|
78
79
|
status: typeof i.status === "function" ? i.status() : i.status,
|
@@ -112,8 +113,8 @@ export const OuterOperation = designComponent({
|
|
112
113
|
<div className="table-operation-bar-right">
|
113
114
|
{(() => {
|
114
115
|
const outerButtonSize = 3;
|
115
|
-
const exposeOuterButtons = outerOperations.value.
|
116
|
-
const hiddenOuterButtons = outerOperations.value.
|
116
|
+
const exposeOuterButtons = outerOperations.value.filter(i => !i.dropdown);
|
117
|
+
const hiddenOuterButtons = outerOperations.value.filter(i => i.dropdown);
|
117
118
|
const renderContent: RenderNode[] = [];
|
118
119
|
const exposeOuterButtonsContent = exposeOuterButtons.map(operation => {
|
119
120
|
const btn = operation.render ? operation.render(false) : (
|
@@ -183,7 +183,7 @@ export const PlcOperation = designComponent({
|
|
183
183
|
const predicateWidth = computed((): number => {
|
184
184
|
if (innerOperationConfigs.value.length === 0) {return 0;}
|
185
185
|
return innerOperationConfigs.value.reduce((prev) => {
|
186
|
-
return prev + 2 * 14 +
|
186
|
+
return prev + 2 * 14 + 13;
|
187
187
|
}, 0) + 24;
|
188
188
|
});
|
189
189
|
|
@@ -50,6 +50,8 @@ type iBuildTableOperationConfig<Scope = never, IsConfig = true> = {
|
|
50
50
|
keyboard?: string,
|
51
51
|
/*外部按钮可以不用设置position,默认按钮就是外部的*/
|
52
52
|
position?: typeof eTableOperationPosition.outer,
|
53
|
+
/*是否放在更多按钮里边*/
|
54
|
+
dropdown?: boolean,
|
53
55
|
handler?: () => any,
|
54
56
|
render?: (isDropdown: boolean) => RenderNode
|
55
57
|
}) :
|