vue2-client 1.17.32 → 1.17.34

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.
@@ -1,347 +0,0 @@
1
- <script setup lang="ts">
2
- import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
3
- import { ref, computed, useAttrs } from 'vue'
4
-
5
- const xAddNativeFormRef = ref()
6
-
7
- const attrs = useAttrs()
8
- const wrapperClassObject = computed(() => {
9
- const a = attrs
10
- const classes = {}
11
-
12
- // 1) 多个布尔型样式开关(存在且为真则生效)
13
- const booleanStyleKeys = [
14
- 'query-conditions',
15
- 'padding-50',
16
- 'label-text-horizontal',
17
- 'label-text-justify',
18
- 'charge-form'
19
- ]
20
- for (const key of booleanStyleKeys) {
21
- const val = a[key]
22
- const truthy = val === true || val === '' || val === 'true'
23
- if (truthy) classes[`h-form-${key}`] = true
24
- }
25
- return classes
26
- })
27
-
28
- defineExpose({
29
- getXAddNativeFormInstance: () => xAddNativeFormRef.value,
30
- init: (params) => xAddNativeFormRef.value && xAddNativeFormRef.value.init && xAddNativeFormRef.value.init(params),
31
- asyncSubmit: () => xAddNativeFormRef.value && xAddNativeFormRef.value.asyncSubmit && xAddNativeFormRef.value.asyncSubmit(),
32
- validateForm: () => xAddNativeFormRef.value && xAddNativeFormRef.value.validateForm && xAddNativeFormRef.value.validateForm()
33
- })
34
-
35
- </script>
36
-
37
- <template>
38
- <div
39
- class="h-form-wrapper"
40
- :class="[
41
- wrapperClassObject
42
- ]"
43
- >
44
-
45
- <x-add-native-form
46
- ref="xAddNativeFormRef"
47
- v-bind="$attrs"
48
- v-on="$listeners"
49
- >
50
- <template v-for="(_, name) in $slots" #[name]="slotData">
51
- <slot :name="name" v-bind="slotData" />
52
- </template>
53
- </x-add-native-form>
54
- </div>
55
- </template>
56
-
57
- <style scoped lang="less">
58
- .h-form-wrapper {
59
- // 基础样式
60
- :deep(.ant-form-item) {
61
- margin-bottom: 4px;
62
- }
63
-
64
- // query-conditions 样式
65
- &.h-form-query-conditions {
66
- // ant-card-body 样式
67
- :deep(.ant-card-body) {
68
- padding: 0px;
69
- }
70
-
71
- // ant-row-flex 样式
72
- :deep(.ant-row-flex) {
73
- // x-form-col-wrapper 样式
74
- .x-form-col-wrapper {
75
- .ant-form-item {
76
- display: flex;
77
- width: 100%;
78
- margin-bottom: 4px;
79
- justify-content: space-between;
80
-
81
- .ant-form-item-label {
82
- padding-left: 4px;
83
- width: 100%;
84
- }
85
-
86
- .ant-form-item-control-wrapper {
87
- padding-left: -6px;
88
- }
89
- }
90
- }
91
-
92
- // ant-col-24 样式
93
- .ant-col-24 {
94
- padding: 0px 4px !important;
95
- }
96
- }
97
- }
98
-
99
- &.h-form-padding-50 {
100
- // ant-row-flex 样式
101
- :deep(.ant-row-flex) {
102
- padding-left: 50px;
103
- padding-right: 50px
104
- }
105
- }
106
-
107
- // charge-form 样式
108
- &.h-form-charge-form {
109
- margin-top: 2px !important;
110
- // 定义变量
111
- @font-common: {
112
- font-family: 'Source Han Sans', sans-serif;
113
- font-size: 16px;
114
- font-weight: normal;
115
- letter-spacing: 0em;
116
- font-variation-settings: "opsz" auto;
117
- font-feature-settings: "kern" on;
118
- };
119
-
120
- @color-primary: #313131;
121
- @color-placeholder: #999999;
122
-
123
- // 定义混合宏
124
- .input-base() {
125
- width: 100%;
126
- height: 30px;
127
- line-height: 30px;
128
- vertical-align: top;
129
- margin: 0;
130
- text-align: left;
131
- color: @color-primary;
132
- opacity: 1;
133
- @font-common();
134
- }
135
-
136
- .placeholder-base() {
137
- color: @color-placeholder;
138
- opacity: 1;
139
- @font-common();
140
- }
141
-
142
- .option-group-base() {
143
- height: 30px;
144
- line-height: 30px;
145
- display: flex;
146
- align-items: center;
147
-
148
- .ant-radio-wrapper,
149
- .ant-checkbox-wrapper {
150
- height: 30px;
151
- line-height: 30px;
152
- margin-right: 16px;
153
- }
154
- }
155
-
156
- :deep(.ant-form-item) {
157
- margin-bottom: 16px;
158
- margin-top: 0;
159
- padding: 0;
160
- display: flex;
161
- align-items: center;
162
-
163
- .ant-form-item-label {
164
- text-align: left;
165
- margin: 0 16px 0 0 !important;
166
- width: 64px;
167
- min-width: 64px;
168
- max-width: 64px;
169
- flex-shrink: 0;
170
-
171
- label {
172
- height: 23px;
173
- opacity: 1;
174
- line-height: 23px;
175
- color: @color-primary;
176
- margin: 0;
177
- padding: 0;
178
- white-space: nowrap;
179
- display: block;
180
- @font-common();
181
-
182
- // 移除冒号
183
- &::after {
184
- content: '';
185
- }
186
- }
187
- }
188
-
189
- .ant-form-item-control-wrapper {
190
- margin: 0;
191
- padding: 0;
192
- flex: 1;
193
- min-width: 0;
194
- display: flex;
195
- align-items: center;
196
-
197
- .ant-form-item-control {
198
- margin: 0;
199
- padding: 0;
200
- width: 100%;
201
- text-align: left;
202
- line-height: 30px !important;
203
-
204
- // 输入框样式统一
205
- .ant-input,
206
- .ant-input-affix-wrapper,
207
- .ant-select,
208
- .ant-input-number,
209
- .ant-picker,
210
- .ant-radio-group,
211
- .ant-checkbox-group {
212
- .input-base();
213
- }
214
-
215
- // 选择器样式
216
- .ant-select {
217
- .ant-select-selector {
218
- .input-base();
219
- height: 30px;
220
- line-height: 30px;
221
-
222
- .ant-select-selection-item {
223
- .input-base();
224
- line-height: 30px;
225
- }
226
-
227
- .ant-select-selection-placeholder {
228
- .placeholder-base();
229
- line-height: 30px;
230
- }
231
- }
232
- }
233
-
234
- // 日期选择器样式
235
- .ant-picker {
236
- height: 30px;
237
-
238
- .ant-picker-input {
239
- height: 30px;
240
- line-height: 30px;
241
- .input-base();
242
-
243
- input {
244
- .input-base();
245
- height: 30px;
246
- line-height: 30px;
247
- }
248
- }
249
- }
250
-
251
- // 数字输入框样式
252
- .ant-input-number {
253
- height: 30px;
254
-
255
- .ant-input-number-input {
256
- .input-base();
257
- height: 30px;
258
- line-height: 30px;
259
- }
260
- }
261
-
262
- // 单选框组样式
263
- .ant-radio-group {
264
- .option-group-base();
265
- }
266
-
267
- // 复选框组样式
268
- .ant-checkbox-group {
269
- .option-group-base();
270
- }
271
- }
272
- }
273
- }
274
-
275
- // 重置可能的容器边距
276
- :deep(.ant-row) {
277
- margin: 0;
278
- padding: 0;
279
-
280
- .ant-col {
281
- margin: 0;
282
- padding: 0;
283
- }
284
- }
285
-
286
- // 强制重置所有可能的表单项样式
287
- :deep(.ant-form-item) {
288
- margin: 0 0 16px 0 !important;
289
-
290
- // 重置可能的内部边距
291
- .ant-form-item-control-input,
292
- .ant-form-item-control-input-content {
293
- margin: 0 !important;
294
- padding: 0 !important;
295
- }
296
- }
297
- }
298
-
299
- // label-text-horizontal 样式 - 只控制label文字从左到右排列
300
- &.h-form-label-text-horizontal {
301
- :deep(.ant-form-item-label) {
302
- text-align: left;
303
- direction: ltr;
304
-
305
- // 标签文字水平排列
306
- .ant-form-item-label-text {
307
- display: inline-block;
308
- text-align: left;
309
- direction: ltr;
310
- unicode-bidi: normal;
311
- }
312
-
313
- // 必填标识水平排列
314
- .ant-form-item-required::before {
315
- margin-right: 4px;
316
- margin-left: 0;
317
- }
318
- }
319
- }
320
-
321
- // label-text-justify 样式 - 标签文字两端对齐分散占满 必填*可能会有问题
322
- &.h-form-label-text-justify {
323
- :deep(.ant-form-item-label) {
324
- padding-left: 0;
325
- padding-right: 8px;
326
- label {
327
- position: relative;
328
- display: block;
329
- width: 100%;
330
- white-space: nowrap;
331
- margin: 0;
332
- text-indent: 0;
333
- text-align: justify;
334
- text-align-last: justify;
335
- text-justify: inter-ideograph;
336
- box-sizing: border-box;
337
- padding-right: 12px; // 给绝对定位的冒号留出空间
338
- }
339
- // 将冒号绝对定位到最右侧,避免参与两端对齐计算
340
- label::after {
341
- position: absolute;
342
- right: 0;
343
- }
344
- }
345
- }
346
- }
347
- </style>