@signalplus/params-about 0.1.1 → 0.1.4

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/index.d.ts CHANGED
@@ -32,6 +32,7 @@ interface ParamValueStruct {
32
32
  interface ParamRendererProps extends BaseInputProps {
33
33
  valueType?: ParamType;
34
34
  value?: ParamValueStruct;
35
+ expiriesOptions?: string[];
35
36
  onChange?(val: ParamValueStruct): void;
36
37
  }
37
38
  declare class ParamRenderer extends PureComponent<ParamRendererProps> {
@@ -79,7 +80,7 @@ interface ParamFormProps {
79
80
  }
80
81
  declare class ParamForm extends PureComponent<ParamFormProps> {
81
82
  ref: React.RefObject<any>;
82
- formItems: {
83
+ get formItems(): {
83
84
  label: string;
84
85
  name: string;
85
86
  Comp: React.ComponentType<BaseInputProps>;
@@ -93,7 +94,9 @@ declare class ParamFormModalEl extends PureComponent<ParamFormProps & Required<P
93
94
  ref: React.RefObject<ParamForm>;
94
95
  state: {
95
96
  visible: boolean;
97
+ pending: boolean;
96
98
  };
99
+ get isEdit(): boolean;
97
100
  onShow: () => void;
98
101
  onHide: () => void;
99
102
  onSubmit: () => any;
@@ -127,7 +130,7 @@ interface ParamValueEditorProps {
127
130
  }
128
131
  declare class ParamValueEditor extends PureComponent<ParamValueEditorProps> {
129
132
  ref: React.RefObject<any>;
130
- formItems: {
133
+ get formItems(): {
131
134
  label: string;
132
135
  name: string;
133
136
  Comp: React.ComponentType<BaseInputProps>;
@@ -141,6 +144,7 @@ declare class ParamValueEditorModalEl extends PureComponent<ParamValueEditorProp
141
144
  ref: React.RefObject<ParamValueEditor>;
142
145
  state: {
143
146
  visible: boolean;
147
+ pending: boolean;
144
148
  };
145
149
  onShow: () => void;
146
150
  onHide: () => void;
@@ -153,6 +157,61 @@ declare class ParamValueEditorModal {
153
157
  static hide(): Promise<void>;
154
158
  }
155
159
 
160
+ interface ImageUploadProps extends BaseInputProps {
161
+ value?: string;
162
+ onChange?(val?: string): void;
163
+ getSignedUrl(key: string): Promise<string>;
164
+ /**
165
+ * 返回图片的 key
166
+ * */
167
+ handleUpload(file: Blob): Promise<string>;
168
+ }
169
+
170
+ interface ParamGroupEditorData {
171
+ parentId: string;
172
+ paramId?: string;
173
+ name: string;
174
+ descriptionUrl?: string;
175
+ }
176
+ interface ParamGroupEditorProps extends Required<Pick<ImageUploadProps, 'getSignedUrl' | 'handleUpload'>> {
177
+ /**
178
+ * 传了表示为有父级
179
+ * */
180
+ allParams?: ParentSelectorProps['parentOptions'];
181
+ initialValues?: ParamGroupEditorData;
182
+ onChange?(data: ParamGroupEditorData): void;
183
+ onSubmit?(data: ParamGroupEditorData): Promise<any>;
184
+ }
185
+ declare class ParamGroupEditor extends PureComponent<ParamGroupEditorProps> {
186
+ ref: React.RefObject<any>;
187
+ get formItems(): {
188
+ label: string;
189
+ name: string;
190
+ Comp: React.ComponentType<BaseInputProps>;
191
+ required?: boolean | undefined;
192
+ validator?(_: any, val: any): Promise<any>;
193
+ }[];
194
+ onChange: (changed: any, data: any) => void;
195
+ render(): JSX.Element;
196
+ }
197
+ declare class ParamGroupEditorModalEl extends PureComponent<ParamGroupEditorProps & Required<Pick<ParamGroupEditorProps, 'onSubmit'>>> {
198
+ ref: React.RefObject<ParamGroupEditor>;
199
+ state: {
200
+ visible: boolean;
201
+ pending: boolean;
202
+ };
203
+ get isEdit(): boolean;
204
+ onShow: () => void;
205
+ onHide: () => void;
206
+ onSubmit: () => any;
207
+ render(): JSX.Element;
208
+ }
209
+ declare class ParamGroupEditorModal {
210
+ static el: ReactGlobalComp<ParamGroupEditorProps & Required<Pick<ParamGroupEditorProps, "onSubmit">>>;
211
+ static show(props: Omit<ComponentProps<typeof ParamGroupEditorModalEl>, 'visible'>): Promise<void>;
212
+ static hide(): Promise<void>;
213
+ }
214
+
156
215
  declare const ParamTypeConfig: Record<ParamType, {
157
216
  name: string;
158
217
  key?: string;
@@ -182,8 +241,8 @@ declare function numRangeValidator(val: {
182
241
  }, enableEmpty?: boolean): string;
183
242
  declare function expiryValidator(val: string, enableEmpty?: boolean): "Should not be empty" | "" | "Out of format";
184
243
  declare function expiriesValidator(val: string[]): string;
185
- declare function keyValidator(val: string): string;
244
+ declare function keyValidator(val: string): "Should not be empty" | "" | "Out of format: should be a combination of the following chars `_.0-9a-zA-Z`";
186
245
  declare function isExpired(val?: string): boolean;
187
246
  declare function validatorCvt(validator: (val: any, values: any) => ValidateInfo['string'], form?: () => any): (_: any, val: any) => Promise<any>;
188
247
 
189
- export { BaseInputProps, ParamForm, ParamFormData, ParamFormModal, ParamFormProps, ParamRenderer, ParamRendererProps, ParamType, ParamTypeConfig, ParamTypeOptions, ParamValueEditor, ParamValueEditorData, ParamValueEditorModal, ParamValueEditorModalEl, ParamValueEditorProps, ParamValueStruct, ValidateInfo, emptyValidator, expiriesValidator, expiryValidator, formatNum, isExpired, isNullLike, keyValidator, numRangeValidator, paramValidator, validatorCvt };
248
+ export { BaseInputProps, ParamForm, ParamFormData, ParamFormModal, ParamFormProps, ParamGroupEditor, ParamGroupEditorData, ParamGroupEditorModal, ParamGroupEditorModalEl, ParamGroupEditorProps, ParamRenderer, ParamRendererProps, ParamType, ParamTypeConfig, ParamTypeOptions, ParamValueEditor, ParamValueEditorData, ParamValueEditorModal, ParamValueEditorModalEl, ParamValueEditorProps, ParamValueStruct, ValidateInfo, emptyValidator, expiriesValidator, expiryValidator, formatNum, isExpired, isNullLike, keyValidator, numRangeValidator, paramValidator, validatorCvt };
@@ -11,6 +11,7 @@
11
11
  border: 1px solid $border-color;
12
12
  border-radius: 2px;
13
13
  cursor: pointer;
14
+ background: $bg;
14
15
 
15
16
  &.readonly {
16
17
  padding: 0;
@@ -18,6 +19,7 @@
18
19
  overflow: initial;
19
20
  white-space: initial;
20
21
  cursor: default;
22
+ background: transparent;
21
23
  }
22
24
 
23
25
  &.multiple {
@@ -37,13 +39,13 @@
37
39
 
38
40
  .param-expiries-val {
39
41
  display: inline-block;
40
- margin: 9px 6px 0 0;
42
+ margin: calc((#{$input-height} - 20px - 2px) / 2) 6px 0 0;
41
43
  line-height: 20px;
42
44
  }
43
45
 
44
46
  .param-expiries-placeholder {
45
47
  display: inline-block;
46
- margin: 9px 6px 0 0;
48
+ margin: calc((#{$input-height} - 20px - 2px) / 2) 6px 0 0;
47
49
  line-height: 20px;
48
50
  color: $placeholder-color;
49
51
  max-width: 100%;
@@ -54,7 +56,7 @@
54
56
 
55
57
  .param-expiries-multi-val {
56
58
  display: inline-block;
57
- margin: 9px 6px 0 0;
59
+ margin: calc((#{$input-height} - 20px - 2px) / 2) 6px 0 0;
58
60
  padding: 0 3px 0 8px;
59
61
  line-height: 20px;
60
62
  border-radius: 2px;
package/lib/css/Num.scss CHANGED
@@ -5,9 +5,6 @@
5
5
  display: flex;
6
6
  align-items: center;
7
7
  height: $input-height;
8
- }
9
-
10
- .param-number {
11
8
 
12
9
  &.readonly {
13
10
 
@@ -38,5 +35,5 @@
38
35
  margin: 0 0 0 -2px;
39
36
  border-radius: 2px;
40
37
  border: 1px solid $border-color;
41
- background: #f2f2f2;
38
+ background: $suffix-bg;
42
39
  }
@@ -5,9 +5,6 @@
5
5
  display: flex;
6
6
  align-items: center;
7
7
  height: $input-height;
8
- }
9
-
10
- .param-number-range {
11
8
 
12
9
  .param-number {
13
10
  height: 100%;
@@ -12,30 +12,14 @@
12
12
 
13
13
  .ant-form-item-label {
14
14
  width: 80px;
15
- text-align: left;
15
+ padding: 0 15px 0 0;
16
16
 
17
17
  > label {
18
18
  height: $input-height;
19
19
 
20
- &:before {
21
- content: none !important;
22
- }
23
-
24
20
  &:after {
25
21
  content: none !important;
26
22
  }
27
-
28
- &.ant-form-item-required {
29
-
30
- &:after {
31
- display: inline-block;
32
- margin-left: 4px;
33
- color: #ff4d4f;
34
- font-size: 14px;
35
- line-height: 1;
36
- content: "*" !important;
37
- }
38
- }
39
23
  }
40
24
  }
41
25
 
@@ -53,4 +37,23 @@
53
37
  min-height: $input-height;
54
38
  padding: 9px 10px;
55
39
  }
40
+
41
+ .ant-form-item.ant-form-item:not(.ant-form-item-with-help) {
42
+ margin: 0 0 12px;
43
+ }
44
+
45
+ .ant-form-item-explain.ant-form-item-explain {
46
+ height: auto;
47
+ min-height: auto;
48
+ margin: 0 0 12px;
49
+ font-size: 12px;
50
+ line-height: 14px;
51
+ }
52
+ }
53
+
54
+ .param-image-upload.param-image-upload {
55
+
56
+ .react-file-input {
57
+ border-color: $border-color;
58
+ }
56
59
  }
@@ -15,13 +15,13 @@
15
15
  width: 160px;
16
16
  }
17
17
 
18
- &:first-child:last-child {
19
-
20
- .param-arr-ops-del {
21
- visibility: hidden;
22
- pointer-events: none;
23
- }
24
- }
18
+ //&:first-child:last-child {
19
+ //
20
+ // .param-arr-ops-del {
21
+ // visibility: hidden;
22
+ // pointer-events: none;
23
+ // }
24
+ //}
25
25
  }
26
26
 
27
27
  .param-arr-ops {
package/lib/css/index.css CHANGED
@@ -1 +1 @@
1
- .param-parent-selector.readonly .ant-select-selector{padding:0 !important;border-color:transparent !important;background:transparent !important;cursor:initial !important}.param-parent-selector.readonly .ant-select-selection-item{color:#333 !important}.param-parent-selector.readonly .ant-select-arrow{display:none !important}.param-form.param-value-editor .ant-form-item-label,.param-value-editor.param-value-editor .ant-form-item-label{width:100px}.param-form .ant-form-item-label,.param-value-editor .ant-form-item-label{width:80px;text-align:left}.param-form .ant-form-item-label>label,.param-value-editor .ant-form-item-label>label{height:40px}.param-form .ant-form-item-label>label:before,.param-value-editor .ant-form-item-label>label:before{content:none !important}.param-form .ant-form-item-label>label:after,.param-value-editor .ant-form-item-label>label:after{content:none !important}.param-form .ant-form-item-label>label.ant-form-item-required:after,.param-value-editor .ant-form-item-label>label.ant-form-item-required:after{display:inline-block;margin-left:4px;color:#ff4d4f;font-size:14px;line-height:1;content:"*" !important}.param-form input.ant-input.ant-input,.param-form .ant-select-selector.ant-select-selector,.param-form .ant-cascader.ant-cascader,.param-value-editor input.ant-input.ant-input,.param-value-editor .ant-select-selector.ant-select-selector,.param-value-editor .ant-cascader.ant-cascader{height:40px !important}.param-form input.ant-input.ant-input input,.param-form input.ant-input.ant-input .ant-select-selection-placeholder,.param-form input.ant-input.ant-input .ant-select-selection-item,.param-form .ant-select-selector.ant-select-selector input,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-form .ant-cascader.ant-cascader input,.param-form .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-form .ant-cascader.ant-cascader .ant-select-selection-item,.param-value-editor input.ant-input.ant-input input,.param-value-editor input.ant-input.ant-input .ant-select-selection-placeholder,.param-value-editor input.ant-input.ant-input .ant-select-selection-item,.param-value-editor .ant-select-selector.ant-select-selector input,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-value-editor .ant-cascader.ant-cascader input,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-item{height:calc(40px - 2px) !important;line-height:calc(40px - 2px) !important}.param-form textarea.ant-input.ant-input,.param-value-editor textarea.ant-input.ant-input{height:100px;min-height:40px;padding:9px 10px}.param-bool{flex:1;display:flex;align-items:center;height:40px}.param-bool-option{display:inline-flex;align-items:center;margin:0 16px 0 0;cursor:pointer}.param-bool-option>svg{margin:0 5px 0 0}.param-expiries{position:relative;flex:1;max-width:100%;min-width:calc(7em + 24px + 2px);height:40px;padding:0 calc(1em + 14px) 0 10px;line-height:0;border:1px solid #d9d9d9;border-radius:2px;cursor:pointer}.param-expiries.readonly{padding:0;border-color:transparent;overflow:initial;white-space:initial;cursor:default}.param-expiries.multiple{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.param-expiries-arrow{position:absolute;top:50%;right:7px;margin:-0.5em 0 0;color:#d9d9d9 !important}.param-expiries-val{display:inline-block;margin:9px 6px 0 0;line-height:20px}.param-expiries-placeholder{display:inline-block;margin:9px 6px 0 0;line-height:20px;color:rgba(0,0,0,0.25);max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.param-expiries-multi-val{display:inline-block;margin:9px 6px 0 0;padding:0 3px 0 8px;line-height:20px;border-radius:2px;background:rgba(0,0,0,0.1)}.param-expiries-multi-val svg{display:inline-block;margin:0 0 0 4px;color:#999;cursor:pointer}.param-expiries-popover .ant-popover-inner-content{max-height:50vh;overflow-y:auto}.param-expiries-option{display:flex;align-items:center;justify-content:space-between;width:240px;margin:0 -16px;padding:0 16px;line-height:30px;color:rgba(51,51,51,0.6);cursor:pointer}.param-expiries-option.param-expiries-option-checked{font-weight:bold;color:#333}.param-expiries-option.param-expiries-option-disabled{cursor:not-allowed;opacity:0.5}.param-expiries-option:hover{color:#333;background:rgba(0,0,0,0.1)}.param-expiries-option svg{color:#57be6a}.param-expiries-limit{padding:calc((40px - 20px) / 2) 0}.param-expiries-limit .param-number-range{margin:0 0 0 10px}.param-expiries-limit .param-number-range-prefix{display:none}.param-expiries-limit .param-number-suffix{padding:0 7px}.param-expiries-limit-val{display:block}.param-expiries-limit-val:after{content:';'}.param-expiries-limit-val-sep{padding:0 4px;color:#999}.param-expiries-limit-inputs{display:grid;grid-row-gap:10px;grid-column-gap:10px;grid-template-rows:auto;grid-template-columns:auto auto auto auto}.param-expiries-limit-inputs .param-expiries,.param-expiries-limit-inputs .param-number-range,.param-expiries-limit-inputs .param-arr-ops{height:30px;margin:0}.param-expiries-limit-inputs .param-expiries.readonly,.param-expiries-limit-inputs .param-number-range.readonly,.param-expiries-limit-inputs .param-arr-ops.readonly{height:20px;line-height:18px}.param-expiries-limit-inputs .param-expiries.readonly .param-expiries-val,.param-expiries-limit-inputs .param-number-range.readonly .param-expiries-val,.param-expiries-limit-inputs .param-arr-ops.readonly .param-expiries-val{margin-top:0}.param-expiries-limit-inputs .param-expiries .param-expiries-placeholder,.param-expiries-limit-inputs .param-expiries .param-expiries-val,.param-expiries-limit-inputs .param-number-range .param-expiries-placeholder,.param-expiries-limit-inputs .param-number-range .param-expiries-val,.param-expiries-limit-inputs .param-arr-ops .param-expiries-placeholder,.param-expiries-limit-inputs .param-arr-ops .param-expiries-val{margin-top:4px}.param-expiries-limit-inputs .param-expiries .param-number-range-sep,.param-expiries-limit-inputs .param-number-range .param-number-range-sep,.param-expiries-limit-inputs .param-arr-ops .param-number-range-sep{margin:0 6px}.param-expiries-limit-inputs .param-arr-ops{padding:0}.param-expiries-popover{padding:0 !important}.param-expiries-popover .ant-popover-arrow{display:none}.param-number{flex:1;display:flex;align-items:center;height:40px}.param-number.readonly .param-number-suffix{padding:0;margin:0 0 0 1px;border:none;background:none}.param-number-val{position:relative;z-index:1;margin:0}.param-number-suffix{display:flex;align-items:center;justify-content:center;position:relative;z-index:0;flex:none;height:100%;padding:0 14px;margin:0 0 0 -2px;border-radius:2px;border:1px solid #d9d9d9;background:#f2f2f2}.param-number-range{flex:1;display:flex;align-items:center;height:40px}.param-number-range .param-number{height:100%}.param-number-range.readonly .param-number{flex:none}.param-number-range .param-number-range-prefix{margin:0 8px 0 0}.param-number-range .param-number-range-sep{margin:0 10px}.param-text-array{padding:calc((40px - 30px) / 2) 0}.param-arr-item{display:flex;align-items:center;height:30px;margin:0 0 4px}.param-arr-item>input{flex:none;width:160px}.param-arr-item:first-child:last-child .param-arr-ops-del{visibility:hidden;pointer-events:none}.param-arr-ops{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:100%;padding:0 10px}.param-arr-ops .param-arr-ops-add,.param-arr-ops .param-arr-ops-del{display:flex;align-items:center;justify-content:center;width:30px;height:100%;border-radius:4px;color:#006FA7}.param-arr-ops .param-arr-ops-add:hover,.param-arr-ops .param-arr-ops-del:hover{background:rgba(0,0,0,0.1)}.param-arr-ops .param-arr-ops-del{color:#d51414}.param-renderer{margin:0;box-sizing:border-box;color:#333}.param-renderer.readonly input,.param-renderer.readonly select,.param-renderer.readonly .select{padding:0;border:none;box-shadow:none}.param-renderer *{box-sizing:border-box}.param-renderer input,.param-renderer select,.param-renderer .select{flex:1;width:50px;height:100%;padding:0 10px;border:1px solid #d9d9d9;border-radius:2px;outline:none;box-shadow:none;background:#fff}.param-renderer input::placeholder,.param-renderer select::placeholder,.param-renderer .select::placeholder{color:rgba(0,0,0,0.25)}.param-renderer input:hover,.param-renderer select:hover,.param-renderer .select:hover{border-color:#006FA7}.param-renderer input:focus,.param-renderer select:focus,.param-renderer .select:focus{border-color:#006FA7;box-shadow:0 0 0 2px rgba(0,111,167,0.1)}
1
+ .param-parent-selector.readonly .ant-select-selector{padding:0 !important;border-color:transparent !important;background:transparent !important;cursor:initial !important}.param-parent-selector.readonly .ant-select-selection-item{color:#333 !important}.param-parent-selector.readonly .ant-select-arrow{display:none !important}.param-form.param-value-editor .ant-form-item-label,.param-value-editor.param-value-editor .ant-form-item-label{width:100px}.param-form .ant-form-item-label,.param-value-editor .ant-form-item-label{width:80px;padding:0 15px 0 0}.param-form .ant-form-item-label>label,.param-value-editor .ant-form-item-label>label{height:40px}.param-form .ant-form-item-label>label:after,.param-value-editor .ant-form-item-label>label:after{content:none !important}.param-form input.ant-input.ant-input,.param-form .ant-select-selector.ant-select-selector,.param-form .ant-cascader.ant-cascader,.param-value-editor input.ant-input.ant-input,.param-value-editor .ant-select-selector.ant-select-selector,.param-value-editor .ant-cascader.ant-cascader{height:40px !important}.param-form input.ant-input.ant-input input,.param-form input.ant-input.ant-input .ant-select-selection-placeholder,.param-form input.ant-input.ant-input .ant-select-selection-item,.param-form .ant-select-selector.ant-select-selector input,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-form .ant-cascader.ant-cascader input,.param-form .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-form .ant-cascader.ant-cascader .ant-select-selection-item,.param-value-editor input.ant-input.ant-input input,.param-value-editor input.ant-input.ant-input .ant-select-selection-placeholder,.param-value-editor input.ant-input.ant-input .ant-select-selection-item,.param-value-editor .ant-select-selector.ant-select-selector input,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-value-editor .ant-cascader.ant-cascader input,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-item{height:calc(40px - 2px) !important;line-height:calc(40px - 2px) !important}.param-form textarea.ant-input.ant-input,.param-value-editor textarea.ant-input.ant-input{height:100px;min-height:40px;padding:9px 10px}.param-form .ant-form-item.ant-form-item:not(.ant-form-item-with-help),.param-value-editor .ant-form-item.ant-form-item:not(.ant-form-item-with-help){margin:0 0 12px}.param-form .ant-form-item-explain.ant-form-item-explain,.param-value-editor .ant-form-item-explain.ant-form-item-explain{height:auto;min-height:auto;margin:0 0 12px;font-size:12px;line-height:14px}.param-image-upload.param-image-upload .react-file-input{border-color:#d9d9d9}.param-bool{flex:1;display:flex;align-items:center;height:40px}.param-bool-option{display:inline-flex;align-items:center;margin:0 16px 0 0;cursor:pointer}.param-bool-option>svg{margin:0 5px 0 0}.param-expiries{position:relative;flex:1;max-width:100%;min-width:calc(7em + 24px + 2px);height:40px;padding:0 calc(1em + 14px) 0 10px;line-height:0;border:1px solid #d9d9d9;border-radius:2px;cursor:pointer;background:#fff}.param-expiries.readonly{padding:0;border-color:transparent;overflow:initial;white-space:initial;cursor:default;background:transparent}.param-expiries.multiple{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.param-expiries-arrow{position:absolute;top:50%;right:7px;margin:-0.5em 0 0;color:#d9d9d9 !important}.param-expiries-val{display:inline-block;margin:calc((40px - 20px - 2px) / 2) 6px 0 0;line-height:20px}.param-expiries-placeholder{display:inline-block;margin:calc((40px - 20px - 2px) / 2) 6px 0 0;line-height:20px;color:rgba(0,0,0,0.25);max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.param-expiries-multi-val{display:inline-block;margin:calc((40px - 20px - 2px) / 2) 6px 0 0;padding:0 3px 0 8px;line-height:20px;border-radius:2px;background:rgba(0,0,0,0.1)}.param-expiries-multi-val svg{display:inline-block;margin:0 0 0 4px;color:#999;cursor:pointer}.param-expiries-popover .ant-popover-inner-content{max-height:50vh;overflow-y:auto}.param-expiries-option{display:flex;align-items:center;justify-content:space-between;width:240px;margin:0 -16px;padding:0 16px;line-height:30px;color:rgba(51,51,51,0.6);cursor:pointer}.param-expiries-option.param-expiries-option-checked{font-weight:bold;color:#333}.param-expiries-option.param-expiries-option-disabled{cursor:not-allowed;opacity:0.5}.param-expiries-option:hover{color:#333;background:rgba(0,0,0,0.1)}.param-expiries-option svg{color:#57be6a}.param-expiries-limit{padding:calc((40px - 20px) / 2) 0}.param-expiries-limit .param-number-range{margin:0 0 0 10px}.param-expiries-limit .param-number-range-prefix{display:none}.param-expiries-limit .param-number-suffix{padding:0 7px}.param-expiries-limit-val{display:block}.param-expiries-limit-val:after{content:';'}.param-expiries-limit-val-sep{padding:0 4px;color:#999}.param-expiries-limit-inputs{display:grid;grid-row-gap:10px;grid-column-gap:10px;grid-template-rows:auto;grid-template-columns:auto auto auto auto}.param-expiries-limit-inputs .param-expiries,.param-expiries-limit-inputs .param-number-range,.param-expiries-limit-inputs .param-arr-ops{height:30px;margin:0}.param-expiries-limit-inputs .param-expiries.readonly,.param-expiries-limit-inputs .param-number-range.readonly,.param-expiries-limit-inputs .param-arr-ops.readonly{height:20px;line-height:18px}.param-expiries-limit-inputs .param-expiries.readonly .param-expiries-val,.param-expiries-limit-inputs .param-number-range.readonly .param-expiries-val,.param-expiries-limit-inputs .param-arr-ops.readonly .param-expiries-val{margin-top:0}.param-expiries-limit-inputs .param-expiries .param-expiries-placeholder,.param-expiries-limit-inputs .param-expiries .param-expiries-val,.param-expiries-limit-inputs .param-number-range .param-expiries-placeholder,.param-expiries-limit-inputs .param-number-range .param-expiries-val,.param-expiries-limit-inputs .param-arr-ops .param-expiries-placeholder,.param-expiries-limit-inputs .param-arr-ops .param-expiries-val{margin-top:4px}.param-expiries-limit-inputs .param-expiries .param-number-range-sep,.param-expiries-limit-inputs .param-number-range .param-number-range-sep,.param-expiries-limit-inputs .param-arr-ops .param-number-range-sep{margin:0 6px}.param-expiries-limit-inputs .param-arr-ops{padding:0}.param-expiries-popover{padding:0 !important}.param-expiries-popover .ant-popover-arrow{display:none}.param-number{flex:1;display:flex;align-items:center;height:40px}.param-number.readonly .param-number-suffix{padding:0;margin:0 0 0 1px;border:none;background:none}.param-number-val{position:relative;z-index:1;margin:0}.param-number-suffix{display:flex;align-items:center;justify-content:center;position:relative;z-index:0;flex:none;height:100%;padding:0 14px;margin:0 0 0 -2px;border-radius:2px;border:1px solid #d9d9d9;background:#f2f2f2}.param-number-range{flex:1;display:flex;align-items:center;height:40px}.param-number-range .param-number{height:100%}.param-number-range.readonly .param-number{flex:none}.param-number-range .param-number-range-prefix{margin:0 8px 0 0}.param-number-range .param-number-range-sep{margin:0 10px}.param-text-array{padding:calc((40px - 30px) / 2) 0}.param-arr-item{display:flex;align-items:center;height:30px;margin:0 0 4px}.param-arr-item>input{flex:none;width:160px}.param-arr-ops{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:100%;padding:0 10px}.param-arr-ops .param-arr-ops-add,.param-arr-ops .param-arr-ops-del{display:flex;align-items:center;justify-content:center;width:30px;height:100%;border-radius:4px;color:#006FA7}.param-arr-ops .param-arr-ops-add:hover,.param-arr-ops .param-arr-ops-del:hover{background:rgba(0,0,0,0.1)}.param-arr-ops .param-arr-ops-del{color:#d51414}.param-renderer{box-sizing:border-box;margin:0;line-height:20px;color:#333}.param-renderer.readonly input,.param-renderer.readonly select,.param-renderer.readonly .select{padding:0;border:none;box-shadow:none}.param-renderer *{box-sizing:border-box}.param-renderer input,.param-renderer select,.param-renderer .select{flex:1;width:50px;height:100%;padding:0 10px;border:1px solid #d9d9d9;border-radius:2px;outline:none;box-shadow:none;background:#fff}.param-renderer input::placeholder,.param-renderer select::placeholder,.param-renderer .select::placeholder{color:rgba(0,0,0,0.25)}.param-renderer input:hover,.param-renderer select:hover,.param-renderer .select:hover{border-color:#006FA7}.param-renderer input:focus,.param-renderer select:focus,.param-renderer .select:focus{border-color:#006FA7;box-shadow:0 0 0 2px rgba(0,111,167,0.1)}
@@ -8,8 +8,9 @@
8
8
  @import "./TextArray";
9
9
 
10
10
  .param-renderer {
11
- margin: 0;
12
11
  box-sizing: border-box;
12
+ margin: 0;
13
+ line-height: 20px;
13
14
  color: $text-color;
14
15
 
15
16
  &.readonly {
package/lib/css/var.scss CHANGED
@@ -5,3 +5,4 @@ $bg: #fff;
5
5
  $red: #d51414;
6
6
  $text-color: #333;
7
7
  $input-height: 40px;
8
+ $suffix-bg: #f2f2f2;