plain-design 1.0.0-beta.98 → 1.0.0-beta.99
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 +5 -5
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +2 -2
- package/package.json +2 -1
- package/src/packages/components/$object/createObjectService.tsx +3 -1
- package/src/packages/components/AutoTable/auto-table.scss +10 -1
- package/src/packages/components/AutoTable/use/useTableOption.table.tsx +7 -0
- package/src/packages/components/Dialog/dialog.scss +2 -2
- package/src/packages/components/Image/image.scss +2 -1
- package/src/packages/components/Image/index.tsx +12 -11
- package/src/packages/components/ImageUploader/index.tsx +10 -8
- package/src/packages/components/Object/object.scss +6 -0
- package/src/packages/components/PlcImage/index.tsx +8 -2
- package/src/packages/components/TabGroup/tabs.scss +23 -0
- package/src/packages/components/useDialog/DialogService.tsx +1 -1
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "plain-design",
|
3
|
-
"version": "1.0.0-beta.
|
3
|
+
"version": "1.0.0-beta.99",
|
4
4
|
"description": "",
|
5
5
|
"main": "dist/plain-design.min.js",
|
6
6
|
"module": "dist/plain-design.commonjs.min.js",
|
@@ -11,6 +11,7 @@
|
|
11
11
|
"src/index.ts"
|
12
12
|
],
|
13
13
|
"scripts": {
|
14
|
+
"local": "cross-env APP_ENV=local vue-cli-service serve",
|
14
15
|
"dev": "cross-env APP_ENV=prod vue-cli-service serve",
|
15
16
|
"build": "cross-env APP_ENV=prod vue-cli-service build",
|
16
17
|
"release": "cross-env NODE_ENV=production webpack --config ./build/webpack.release.js --progress"
|
@@ -3,7 +3,7 @@ import {iObjectServiceDefaultConfig, iObjectServicePickConfig, iObjectServicePic
|
|
3
3
|
import {$dialog} from "../$dialog";
|
4
4
|
import {AutoTable} from "../AutoTable";
|
5
5
|
import {PlcCheck} from "../Table/standard/PlcCheck/PlcCheck";
|
6
|
-
import {reactive} from "plain-design-composition";
|
6
|
+
import {getComponentCls, reactive} from "plain-design-composition";
|
7
7
|
import {deepcopy} from "plain-utils/object/deepcopy";
|
8
8
|
import {convertRowToSelected, convertSelectedToRow} from "./object.conver";
|
9
9
|
import {createEffects} from "plain-utils/utils/createEffects";
|
@@ -111,6 +111,7 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
|
|
111
111
|
...serviceConfig.dialogProps,
|
112
112
|
...serviceConfig.readonly ? { confirmButton: false, cancelButton: false } : {},
|
113
113
|
title: serviceConfig.option.config.title || publicDialogOption.title,
|
114
|
+
externalClass: [serviceConfig.dialogProps?.externalClass, getComponentCls('object-dialog')].filter(Boolean).join(' '),
|
114
115
|
onClose: () => {effects.clear();},
|
115
116
|
onOpen: () => config.option.methods.pageMethods.reload(),
|
116
117
|
handleConfirm: handler.handleConfirm,
|
@@ -168,6 +169,7 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
|
|
168
169
|
...serviceConfig.dialogProps,
|
169
170
|
...serviceConfig.readonly ? { confirmButton: false, cancelButton: false } : {},
|
170
171
|
title: serviceConfig.option.config.title || publicDialogOption.title,
|
172
|
+
externalClass: [serviceConfig.dialogProps?.externalClass, getComponentCls('object-dialog')].filter(Boolean).join(' '),
|
171
173
|
onClose: () => {effects.clear();},
|
172
174
|
onOpen: () => config.option.methods.pageMethods.reload(),
|
173
175
|
handleConfirm: async () => {
|
@@ -1,8 +1,17 @@
|
|
1
1
|
@include prefix(auto-table) {
|
2
2
|
position: relative;
|
3
3
|
|
4
|
+
.auto-table-title {
|
5
|
+
font-size: 1.25em;
|
6
|
+
color: plv(text-1);
|
7
|
+
}
|
8
|
+
|
4
9
|
@include sizeMixin(auto-table, (font-size)) {
|
5
10
|
|
11
|
+
.auto-table-title {
|
12
|
+
padding-bottom: $margin;
|
13
|
+
}
|
14
|
+
|
6
15
|
.table-operation-bar {
|
7
16
|
.table-operation-bar-left {
|
8
17
|
@include comp(input-group) {
|
@@ -29,7 +38,7 @@
|
|
29
38
|
}
|
30
39
|
}
|
31
40
|
|
32
|
-
& + .#{componentName(auto-table)} {
|
41
|
+
& + .#{componentName(auto-table)}, & + .#{componentName(tab-group)} {
|
33
42
|
margin-top: $margin;
|
34
43
|
}
|
35
44
|
}
|
@@ -51,6 +51,13 @@ export const useTableOptionTable = AutoModule.createRegistration((
|
|
51
51
|
</>
|
52
52
|
});
|
53
53
|
|
54
|
+
hooks.onTableRender.use({
|
55
|
+
processor: ({ list, render }) => {config.title && list.push({ key: 'table_title', seq: 3, render });},
|
56
|
+
render: () => (
|
57
|
+
<div className="auto-table-title">{config.title}</div>
|
58
|
+
)
|
59
|
+
});
|
60
|
+
|
54
61
|
hooks.onTableRender.use({
|
55
62
|
processor: ({ list, render }) => {list.push({ key: 'table', seq: 5, render });},
|
56
63
|
render: () => {
|
@@ -261,8 +261,9 @@
|
|
261
261
|
|
262
262
|
/*---------------------------------------image-------------------------------------------*/
|
263
263
|
|
264
|
-
|
264
|
+
.#{componentName(image)} {
|
265
265
|
vertical-align: bottom;
|
266
|
+
box-sizing: border-box;
|
266
267
|
}
|
267
268
|
|
268
269
|
img.image-preview-on-click {
|
@@ -30,6 +30,14 @@ export const ImagePropsOptions = {
|
|
30
30
|
alt: { type: String }, // 图片描述
|
31
31
|
fit: { type: String as PropType<typeof eImageFit.TYPE>, default: eImageFit.cover },// 图片 object-fit 属性
|
32
32
|
position: { type: String, default: 'top center' }, // 图片 object-position 属性
|
33
|
+
maxHeight: { type: [String, Number] }, // 最大高度
|
34
|
+
minHeight: { type: [String, Number] }, // 最小高度
|
35
|
+
maxWidth: { type: [String, Number] }, // 最大宽度
|
36
|
+
minWidth: { type: [String, Number] }, // 最小宽度
|
37
|
+
width: { type: [String, Number] }, // 图片宽度
|
38
|
+
height: { type: [String, Number] }, // 图片高度
|
39
|
+
hideTips: { type: Boolean }, // 隐藏提示文本
|
40
|
+
urlPrefix: { type: String }, // 图片地址前缀
|
33
41
|
};
|
34
42
|
|
35
43
|
/**
|
@@ -56,16 +64,9 @@ export const Image = designComponent({
|
|
56
64
|
formatImagePath,
|
57
65
|
},
|
58
66
|
props: {
|
59
|
-
src: { type: String as PropType<string | null> },
|
60
|
-
status: { type: String as PropType<typeof eImageStatus.TYPE> },
|
61
|
-
previewOnClick: { type: Boolean, default: true },
|
62
|
-
maxHeight: { type: [String, Number] }, // 最大高度
|
63
|
-
minHeight: { type: [String, Number] }, // 最小高度
|
64
|
-
maxWidth: { type: [String, Number] }, // 最大宽度
|
65
|
-
minWidth: { type: [String, Number] }, // 最小宽度
|
66
|
-
width: { type: [String, Number] }, // 图片宽度
|
67
|
-
height: { type: [String, Number] }, // 图片高度
|
68
|
-
urlPrefix: { type: String }, // 图片地址前缀
|
67
|
+
src: { type: String as PropType<string | null> }, // 图片地址
|
68
|
+
status: { type: String as PropType<typeof eImageStatus.TYPE> }, // 当前状态
|
69
|
+
previewOnClick: { type: Boolean, default: true }, // 是否点击的时候放大预览图片
|
69
70
|
...ImagePropsOptions,
|
70
71
|
},
|
71
72
|
emits: {
|
@@ -148,7 +149,7 @@ export const Image = designComponent({
|
|
148
149
|
return (
|
149
150
|
<div className={classes.value} style={styles.value} onClick={handler.onClick} ref={onRef.el}>
|
150
151
|
<Icon icon={status.value === eImageStatus.error ? 'pi-image-close' : 'pi-image'}/>
|
151
|
-
<span>{tip[status.value]}</span>
|
152
|
+
{!props.hideTips && <span>{tip[status.value]}</span>}
|
152
153
|
{status.value === eImageStatus.pending && (<LoadingMask modelValue={true} maskColor="rgba(255,255,255,0.15)"/>)}
|
153
154
|
</div>
|
154
155
|
);
|
@@ -180,6 +180,13 @@ export const ImageUploader = designComponent({
|
|
180
180
|
},
|
181
181
|
};
|
182
182
|
|
183
|
+
const imageAttrs = computed(() => {
|
184
|
+
return Object.keys(ImagePropsOptions).reduce((prev, key) => {
|
185
|
+
prev[key] = (props as any)[key];
|
186
|
+
return prev;
|
187
|
+
}, {} as any);
|
188
|
+
});
|
189
|
+
|
183
190
|
return {
|
184
191
|
refer: {
|
185
192
|
refs,
|
@@ -189,23 +196,18 @@ export const ImageUploader = designComponent({
|
|
189
196
|
{(!!model.value || !!state.chooseBase64) && (
|
190
197
|
<Image
|
191
198
|
src={model.value || state.chooseBase64}
|
192
|
-
fit={props.fit}
|
193
|
-
alt={props.alt}
|
194
|
-
position={props.position}
|
195
199
|
previewOnClick={false}
|
196
|
-
height={props.height}
|
197
|
-
width={props.width}
|
198
|
-
urlPrefix={urlPrefix.value}
|
199
200
|
onClick={handler.onClickImage}
|
201
|
+
{...imageAttrs.value}
|
200
202
|
/>
|
201
203
|
)}
|
202
204
|
{state.status === eImageUploaderStatus.empty && <div className="image-uploader-empty" onClick={handler.onClick}>
|
203
205
|
<Icon icon="pi-image"/>
|
204
|
-
<span>{i18n.$it('file.toBeUpload').d('待上传')}</span>
|
206
|
+
{!props.hideTips && <span>{i18n.$it('file.toBeUpload').d('待上传')}</span>}
|
205
207
|
</div>}
|
206
208
|
{state.status === eImageUploaderStatus.fail && <div className="image-uploader-fail" onClick={handler.onClick}>
|
207
209
|
<Icon icon="pi-image-close"/>
|
208
|
-
<span>{i18n.$it('file.uploadFailed').d('上传失败')}</span>
|
210
|
+
{!props.hideTips && <span>{i18n.$it('file.uploadFailed').d('上传失败')}</span>}
|
209
211
|
</div>}
|
210
212
|
<div className="image-uploader-button-group">
|
211
213
|
<div className="image-uploader-button" onClick={handler.onClick}>
|
@@ -29,8 +29,8 @@ export const PlcImage = designComponent({
|
|
29
29
|
const upload = $configuration.use('upload');
|
30
30
|
|
31
31
|
const size = computed(() => {
|
32
|
-
const bodyRowHeight = table.
|
33
|
-
return Math.ceil((bodyRowHeight as number) -
|
32
|
+
const bodyRowHeight = table.numberState.bodyRowHeight;
|
33
|
+
return Math.ceil((bodyRowHeight as number) - 8);
|
34
34
|
});
|
35
35
|
|
36
36
|
const urlPrefix = computed(() => props.urlPrefix || upload?.config.prefix);
|
@@ -52,6 +52,9 @@ export const PlcImage = designComponent({
|
|
52
52
|
src={row[plc.props.field]}
|
53
53
|
height={size.value}
|
54
54
|
width={size.value}
|
55
|
+
minWidth={size.value}
|
56
|
+
minHeight={size.value}
|
57
|
+
hideTips
|
55
58
|
fit="cover"
|
56
59
|
onClick={() => preview(node.state.index)}
|
57
60
|
/>
|
@@ -64,6 +67,9 @@ export const PlcImage = designComponent({
|
|
64
67
|
uploadConfig={props.uploadConfig}
|
65
68
|
height={size.value}
|
66
69
|
width={size.value}
|
70
|
+
minWidth={size.value}
|
71
|
+
minHeight={size.value}
|
72
|
+
hideTips
|
67
73
|
handleDelete={() => {
|
68
74
|
row[plc.props.field!] = null;
|
69
75
|
row[props.imgKeyField!] = null;
|
@@ -6,6 +6,10 @@
|
|
6
6
|
display: block;
|
7
7
|
}
|
8
8
|
|
9
|
+
.tabs-header {
|
10
|
+
background-color: plv(bg-2);
|
11
|
+
}
|
12
|
+
|
9
13
|
.tabs-header-item {
|
10
14
|
cursor: pointer;
|
11
15
|
user-select: none;
|
@@ -34,6 +38,25 @@
|
|
34
38
|
}
|
35
39
|
}
|
36
40
|
|
41
|
+
.inner-tab {
|
42
|
+
& > .#{componentName(auto-table)}:first-child, & > .#{componentName(page-card)}:first-child {
|
43
|
+
.auto-table-body, & > div:first-child {
|
44
|
+
border-top-left-radius: 0;
|
45
|
+
border-top-right-radius: 0;
|
46
|
+
}
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
37
50
|
@include sizeMixin(tab-group, (font-size)) {
|
51
|
+
.tabs-header {
|
52
|
+
border-top-left-radius: $border-radius;
|
53
|
+
border-top-right-radius: $border-radius;
|
54
|
+
|
55
|
+
.tabs-header-list {
|
56
|
+
box-sizing: border-box;
|
57
|
+
padding-left: $margin;
|
58
|
+
padding-right: $margin;
|
59
|
+
}
|
60
|
+
}
|
38
61
|
}
|
39
62
|
}
|
@@ -52,7 +52,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
|
|
52
52
|
*/
|
53
53
|
if (dialogProps.position === DialogPositions.center) {
|
54
54
|
if (!dialogProps.headAlign) {dialogProps.headAlign = DialogAlign.center;}
|
55
|
-
if (!dialogProps.contentAlign) {dialogProps.contentAlign = DialogAlign.center;}
|
55
|
+
if (!dialogProps.contentAlign && !customOption.render) {dialogProps.contentAlign = DialogAlign.center;}
|
56
56
|
if (!dialogProps.footAlign) {dialogProps.footAlign = DialogAlign.center;}
|
57
57
|
if (dialogProps.closeType === undefined) {dialogProps.closeType = DialogCloseType.triangle;}
|
58
58
|
if (dialogProps.maxWidth == null) {dialogProps.maxWidth = '50vw';}
|