@fangzhongya/fang-ui 0.1.46 → 0.1.48

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.
Files changed (82) hide show
  1. package/dist/components/cascaders/index.css +6 -0
  2. package/dist/components/cascaders/index.scss +6 -0
  3. package/dist/components/common/compons/components.cjs +0 -16
  4. package/dist/components/common/compons/components.d.ts +0 -8
  5. package/dist/components/common/compons/components.js +0 -16
  6. package/dist/components/common/compons/index.scss +0 -8
  7. package/dist/components/common/compons/index2.scss +0 -8
  8. package/dist/components/dates-divide/index.css +6 -0
  9. package/dist/components/dates-divide/index.scss +6 -0
  10. package/dist/components/dates-divide/src/index2.cjs +4 -2
  11. package/dist/components/dates-divide/src/index2.js +4 -2
  12. package/dist/components/dates-picker/index.css +2 -2
  13. package/dist/components/dates-picker/index.scss +4 -4
  14. package/dist/components/dates-picker/src/index2.cjs +2 -1
  15. package/dist/components/dates-picker/src/index2.js +2 -1
  16. package/dist/components/dates2/index.css +9 -0
  17. package/dist/components/dates2/index.scss +3 -0
  18. package/dist/components/dates2/src/index2.cjs +6 -4
  19. package/dist/components/dates2/src/index2.js +6 -4
  20. package/dist/components/double/index.css +45 -10
  21. package/dist/components/double/index.scss +30 -17
  22. package/dist/components/double/src/data.cjs +24 -5
  23. package/dist/components/double/src/data.d.ts +23 -1
  24. package/dist/components/double/src/data.js +24 -5
  25. package/dist/components/double/src/index2.cjs +129 -64
  26. package/dist/components/double/src/index2.js +126 -61
  27. package/dist/components/double/style/index2.scss +1 -0
  28. package/dist/components/forms/common/config.cjs +3 -2
  29. package/dist/components/forms/common/config.js +3 -2
  30. package/dist/components/forms/index.css +74 -162
  31. package/dist/components/forms/src/util.cjs +30 -33
  32. package/dist/components/forms/src/util.js +29 -32
  33. package/dist/components/forms-item/index.css +3 -0
  34. package/dist/components/forms-item/index.scss +5 -0
  35. package/dist/components/forms-items/index.css +3 -0
  36. package/dist/components/input-history/index.css +3 -0
  37. package/dist/components/input-history/index.scss +3 -1
  38. package/dist/components/input-history/src/data.d.ts +1 -0
  39. package/dist/components/input-history/src/index2.cjs +23 -19
  40. package/dist/components/input-history/src/index2.js +15 -11
  41. package/dist/components/input-select/index.css +35 -7
  42. package/dist/components/input-select/index.scss +10 -7
  43. package/dist/components/input-select/src/index2.cjs +26 -19
  44. package/dist/components/input-select/src/index2.js +23 -16
  45. package/dist/components/input-select/style/index2.scss +2 -1
  46. package/dist/components/list/src/index2.cjs +5 -0
  47. package/dist/components/list/src/index2.js +6 -1
  48. package/dist/components/page/index.css +74 -162
  49. package/dist/components/scss/function.scss +3 -1
  50. package/dist/components/select-scroll/src/index2.cjs +1 -1
  51. package/dist/components/select-scroll/src/index2.js +2 -2
  52. package/dist/components/selector/index.css +50 -10
  53. package/dist/components/selector/index.scss +5 -0
  54. package/dist/components/selector/src/data.cjs +7 -3
  55. package/dist/components/selector/src/data.d.ts +8 -4
  56. package/dist/components/selector/src/data.js +7 -3
  57. package/dist/components/selector/src/index2.cjs +127 -91
  58. package/dist/components/selector/src/index2.js +124 -88
  59. package/dist/components/tables/common/pagin.d.ts +4 -4
  60. package/dist/components/tables/src/index2.cjs +9 -3
  61. package/dist/components/tables/src/index2.js +10 -4
  62. package/dist/components/tablesv/src/index2.cjs +9 -3
  63. package/dist/components/tablesv/src/index2.js +10 -4
  64. package/dist/css/cascaders.css +6 -0
  65. package/dist/css/dates-divide.css +6 -0
  66. package/dist/css/dates-picker.css +2 -2
  67. package/dist/css/dates2.css +9 -0
  68. package/dist/css/double.css +45 -10
  69. package/dist/css/forms-item.css +3 -0
  70. package/dist/css/forms-items.css +3 -0
  71. package/dist/css/forms.css +74 -162
  72. package/dist/css/index.css +227 -186
  73. package/dist/css/input-history.css +3 -0
  74. package/dist/css/input-select.css +35 -7
  75. package/dist/css/page.css +74 -162
  76. package/dist/css/selector.css +50 -10
  77. package/dist/icons/index.json +1 -1
  78. package/dist/index.css +227 -186
  79. package/dist/type.d.ts +2 -2
  80. package/package.json +5 -5
  81. /package/dist/components/{global-config → keep-com}/index.css +0 -0
  82. /package/dist/css/{global-config.css → keep-com.css} +0 -0
@@ -48,6 +48,9 @@
48
48
  min-height: var(--forms-item-row-height);
49
49
  display: grid;
50
50
  }
51
+ .forms-item-el-item.is-error .double {
52
+ box-shadow: 0 0 0 1px var(--el-color-danger) inset;
53
+ }
51
54
 
52
55
  .forms-items {
53
56
  width: 100%;
@@ -67,26 +70,63 @@
67
70
  --el-color-danger: var(--el-input-focus-border);
68
71
  }
69
72
 
73
+ .icon {
74
+ --color: inherit;
75
+ height: 1em;
76
+ width: 1em;
77
+ line-height: 1em;
78
+ display: inline-flex;
79
+ justify-content: center;
80
+ align-items: center;
81
+ position: relative;
82
+ fill: currentColor;
83
+ color: var(--color);
84
+ font-size: inherit;
85
+ }
86
+ .icon-cont {
87
+ border: 0;
88
+ display: inline-flex;
89
+ align-items: center;
90
+ object-fit: contain;
91
+ justify-content: center;
92
+ font-size: inherit !important;
93
+ width: inherit !important;
94
+ height: inherit !important;
95
+ }
96
+
70
97
  .double {
71
98
  width: 100%;
72
99
  display: inline-flex;
73
100
  align-items: center;
74
- box-sizing: content-box;
75
- padding: 1.2px 1px;
101
+ box-sizing: border-box;
102
+ padding: 1px 1px;
76
103
  position: relative;
77
104
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
78
105
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
79
106
  }
80
107
  .double.is-focus {
81
- box-shadow: 0 0 0 1px var(--color-primary) inset;
108
+ box-shadow: 0 0 0 1px var(--el-color-primary) inset;
109
+ }
110
+ .double.is-error {
111
+ box-shadow: 0 0 0 1px var(--el-color-danger) inset;
112
+ }
113
+ .double.is-disabled {
114
+ cursor: not-allowed;
115
+ background-color: var(--el-disabled-bg-color);
116
+ }
117
+ .double.is-disabled .double-range {
118
+ color: var(--el-disabled-text-color);
82
119
  }
83
120
  .double-error {
84
121
  position: absolute;
85
- bottom: -23px;
86
- color: #f00;
87
- font-size: 0.8rem;
122
+ padding-top: 2px;
123
+ color: var(--el-color-danger);
124
+ bottom: -15px;
125
+ font-size: 12px;
126
+ line-height: 1;
88
127
  border-radius: 4px;
89
128
  left: 12px;
129
+ white-space: nowrap;
90
130
  }
91
131
  .double-error.type-1 {
92
132
  left: calc(50% + 24px);
@@ -102,6 +142,8 @@
102
142
  .double-value {
103
143
  flex: 1;
104
144
  height: 100%;
145
+ display: flex;
146
+ align-items: center;
105
147
  }
106
148
  .double-range {
107
149
  padding: 0 5px;
@@ -113,10 +155,6 @@
113
155
  justify-content: center;
114
156
  padding: 5px;
115
157
  }
116
- .double-clear svg {
117
- width: 1rem;
118
- height: 1rem;
119
- }
120
158
  .double .el-input .el-input__wrapper {
121
159
  border: none;
122
160
  box-shadow: none;
@@ -164,171 +202,34 @@
164
202
  height: 100%;
165
203
  }
166
204
 
167
- .buttons-li {
168
- height: inherit;
169
- }
170
-
171
205
  .dates-divide {
172
206
  display: inline-flex;
173
207
  align-items: center;
208
+ width: 100%;
174
209
  }
175
210
  .dates-divide-range {
176
211
  padding: 0 10px;
177
212
  }
178
-
179
- .dates2 .dates2-date {
213
+ .dates-divide .dates-divide-date {
180
214
  height: 100%;
181
215
  width: 100%;
182
216
  box-sizing: border-box;
183
217
  }
184
- .dates2 .dates2-separate {
185
- display: flex;
186
- align-items: center;
187
- }
188
-
189
- .edit-float-body {
190
- display: inline-flex;
191
- align-items: center;
192
- justify-content: center;
193
- }
194
- .edit-float-value {
195
- min-width: 3px;
196
- }
197
- .edit-float-icon {
198
- margin-left: 4px;
199
- cursor: pointer;
200
- }
201
- .edit-float-input {
202
- padding: 10px 0;
203
- }
204
- .edit-float-but {
205
- text-align: right;
206
- }
207
218
 
208
- .edit {
209
- display: inline-flex;
210
- align-items: center;
211
- }
212
- .edit-value {
213
- display: inline-block;
214
- min-width: 3px;
215
- }
216
- .edit-icon {
217
- display: inline-flex;
218
- align-items: center;
219
+ .dates-picker .dates-picker-date {
219
220
  height: 100%;
220
- min-width: 3px;
221
- font-size: 16px;
222
- margin: 0 4px;
223
- cursor: pointer;
224
- }
225
-
226
- .history {
227
- display: flex;
228
- }
229
- .history-icon {
230
- cursor: pointer;
231
- }
232
- .history-icon.is-disabled {
233
- opacity: 0.4;
234
- cursor: not-allowed;
235
- }
236
-
237
- .images-img {
238
221
  width: 100%;
239
- height: 100%;
222
+ box-sizing: border-box;
240
223
  }
241
-
242
- .input-array {
243
- width: 100%;
244
- display: inline-flex;
224
+ .dates-picker .dates-picker-separate {
225
+ display: flex;
245
226
  align-items: center;
246
- padding: 1px;
247
- position: relative;
248
- box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
249
- border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
250
- }
251
- .input-array.is-focus {
252
- box-shadow: 0 0 0 1px var(--color-primary) inset;
253
- }
254
- .input-array-focus {
255
- position: absolute;
256
- z-index: -1;
257
- opacity: 0;
258
- }
259
- .input-array-input {
260
- height: 100%;
261
- flex: 1;
262
- }
263
- .input-array-range {
264
- padding: 0 5px;
265
- }
266
- .input-array-icon {
267
- cursor: pointer;
268
- }
269
- .input-array-icon svg {
270
- width: 1rem;
271
- height: 1rem;
272
- }
273
- .input-array .el-input .el-input__wrapper {
274
- border: none;
275
- box-shadow: none;
276
- }
277
- .input-array .el-input .el-input__wrapper input {
278
- text-align: center;
279
227
  }
280
228
 
281
- .input-history {
282
- display: flex;
283
- }
284
- .input-history-popper {
285
- padding: 6px 0 !important;
286
- }
287
- .input-history-select {
288
- max-height: 274px;
229
+ .input-select {
289
230
  height: 100%;
290
- overflow-y: auto;
291
- }
292
- .input-history-select-ul {
293
- list-style: none;
294
- margin: 6px 0;
295
- padding: 0;
296
- box-sizing: border-box;
297
- }
298
- .input-history-select-ul .input-history-select-li {
299
- padding: 0 32px 0 20px;
300
- position: relative;
301
- white-space: nowrap;
302
- overflow: hidden;
303
- text-overflow: ellipsis;
304
- color: #606266;
305
- height: 34px;
306
- line-height: 34px;
307
- box-sizing: border-box;
308
- cursor: pointer;
309
- }
310
- .input-history-select-ul .input-history-select-li.hover, .input-history-select-ul .input-history-select-li:hover {
311
- background-color: #f5f7fa;
312
- }
313
- .input-history-select-ul .input-history-select-li.hover .input-history-select-li-clean, .input-history-select-ul .input-history-select-li:hover .input-history-select-li-clean {
314
- display: inline-flex;
315
- }
316
- .input-history-select-ul .input-history-select-li.selected {
317
- color: var(--bv-color-primary);
318
- font-weight: 700;
319
- }
320
- .input-history-select-ul .input-history-select-li.is-disabled {
321
- background-color: #ffffff;
322
- color: #a8abb2;
323
- cursor: not-allowed;
324
- }
325
- .input-history-select-ul .input-history-select-li-clean {
326
- align-items: center;
327
- justify-content: center;
328
- display: none;
329
- margin-left: 5px;
231
+ width: 100%;
330
232
  }
331
-
332
233
  .input-select-select-icon {
333
234
  margin-left: 8px;
334
235
  display: inline-flex;
@@ -342,13 +243,13 @@
342
243
  .input-select-select-icon.is-reverse {
343
244
  transform: rotate(-180deg);
344
245
  }
345
- .input-select-select-icon svg {
346
- width: 1rem;
347
- height: 1rem;
348
- }
349
246
  .input-select.is-disabled .input-select-select-icon {
350
247
  cursor: not-allowed;
351
248
  }
249
+ .input-select-input {
250
+ height: 100%;
251
+ width: 100%;
252
+ }
352
253
  .input-select-popper {
353
254
  padding: 6px 0 !important;
354
255
  }
@@ -376,11 +277,11 @@
376
277
  cursor: pointer;
377
278
  }
378
279
  .input-select-popper .input-select-select .input-select-select-li.hover, .input-select-popper .input-select-select .input-select-select-li:hover {
379
- background-color: #f5f7fa;
280
+ background-color: var(--el-fill-color-light);
380
281
  }
381
282
  .input-select-popper .input-select-select .input-select-select-li.selected {
382
- color: var(--bv-color-primary);
383
- font-weight: 700;
283
+ color: var(--el-color-primary);
284
+ font-weight: bold;
384
285
  }
385
286
  .input-select-popper .input-select-select .input-select-select-li.is-disabled {
386
287
  background-color: #ffffff;
@@ -443,6 +344,11 @@
443
344
  .selector-popper.el-popover.el-popper {
444
345
  padding: 0;
445
346
  }
347
+ .selector-double {
348
+ height: 100%;
349
+ width: 100%;
350
+ box-sizing: border-box;
351
+ }
446
352
  .selector-select {
447
353
  padding: 5px 10px;
448
354
  z-index: 1000;
@@ -474,10 +380,16 @@
474
380
  height: 100%;
475
381
  width: 100%;
476
382
  }
383
+ .cascaders-cascader .el-input {
384
+ height: 100%;
385
+ }
477
386
  .cascaders-tree {
478
387
  height: 100%;
479
388
  width: 100%;
480
389
  }
390
+ .cascaders-tree .el-select__wrapper {
391
+ height: 100%;
392
+ }
481
393
 
482
394
  .input-num-input {
483
395
  height: 100%;
@@ -68,7 +68,9 @@ $cssname: m();
68
68
  @function v($name) {
69
69
  @return #{'--' + $name};
70
70
  }
71
-
71
+ @function ve($name) {
72
+ @return #{'--' + e() + $name};
73
+ }
72
74
  @function vm($name) {
73
75
  @return #{'--' + $cssname + $name};
74
76
  }
@@ -151,7 +151,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
151
151
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(props).options, (item, ind) => {
152
152
  return vue.openBlock(), vue.createElementBlock("div", {
153
153
  class: vue.normalizeClass([vue.unref(cs).z("list-li"), setClass(ind, item)]),
154
- onClick: vue.withModifiers(($event) => onClick(ind, item), ["stop"]),
154
+ onClick: ($event) => onClick(ind, item),
155
155
  style: vue.normalizeStyle({
156
156
  height: h.value + "px",
157
157
  "line-height": h.value + "px",
@@ -1,4 +1,4 @@
1
- import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, normalizeStyle, Fragment, renderList, withModifiers, toDisplayString } from "vue";
1
+ import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, normalizeStyle, Fragment, renderList, toDisplayString } from "vue";
2
2
  import { name, dataProps, dataExpose, dataEmits } from "./data.js";
3
3
  import { useCssName } from "../../../hooks/cssname/index.js";
4
4
  import { useVueValue } from "../../common/use.js";
@@ -149,7 +149,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
149
149
  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(props).options, (item, ind) => {
150
150
  return openBlock(), createElementBlock("div", {
151
151
  class: normalizeClass([unref(cs).z("list-li"), setClass(ind, item)]),
152
- onClick: withModifiers(($event) => onClick(ind, item), ["stop"]),
152
+ onClick: ($event) => onClick(ind, item),
153
153
  style: normalizeStyle({
154
154
  height: h.value + "px",
155
155
  "line-height": h.value + "px",
@@ -74,26 +74,63 @@
74
74
  cursor: not-allowed;
75
75
  }
76
76
 
77
+ .icon {
78
+ --color: inherit;
79
+ height: 1em;
80
+ width: 1em;
81
+ line-height: 1em;
82
+ display: inline-flex;
83
+ justify-content: center;
84
+ align-items: center;
85
+ position: relative;
86
+ fill: currentColor;
87
+ color: var(--color);
88
+ font-size: inherit;
89
+ }
90
+ .icon-cont {
91
+ border: 0;
92
+ display: inline-flex;
93
+ align-items: center;
94
+ object-fit: contain;
95
+ justify-content: center;
96
+ font-size: inherit !important;
97
+ width: inherit !important;
98
+ height: inherit !important;
99
+ }
100
+
77
101
  .double {
78
102
  width: 100%;
79
103
  display: inline-flex;
80
104
  align-items: center;
81
- box-sizing: content-box;
82
- padding: 1.2px 1px;
105
+ box-sizing: border-box;
106
+ padding: 1px 1px;
83
107
  position: relative;
84
108
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
85
109
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
86
110
  }
87
111
  .double.is-focus {
88
- box-shadow: 0 0 0 1px var(--color-primary) inset;
112
+ box-shadow: 0 0 0 1px var(--el-color-primary) inset;
113
+ }
114
+ .double.is-error {
115
+ box-shadow: 0 0 0 1px var(--el-color-danger) inset;
116
+ }
117
+ .double.is-disabled {
118
+ cursor: not-allowed;
119
+ background-color: var(--el-disabled-bg-color);
120
+ }
121
+ .double.is-disabled .double-range {
122
+ color: var(--el-disabled-text-color);
89
123
  }
90
124
  .double-error {
91
125
  position: absolute;
92
- bottom: -23px;
93
- color: #f00;
94
- font-size: 0.8rem;
126
+ padding-top: 2px;
127
+ color: var(--el-color-danger);
128
+ bottom: -15px;
129
+ font-size: 12px;
130
+ line-height: 1;
95
131
  border-radius: 4px;
96
132
  left: 12px;
133
+ white-space: nowrap;
97
134
  }
98
135
  .double-error.type-1 {
99
136
  left: calc(50% + 24px);
@@ -109,6 +146,8 @@
109
146
  .double-value {
110
147
  flex: 1;
111
148
  height: 100%;
149
+ display: flex;
150
+ align-items: center;
112
151
  }
113
152
  .double-range {
114
153
  padding: 0 5px;
@@ -120,10 +159,6 @@
120
159
  justify-content: center;
121
160
  padding: 5px;
122
161
  }
123
- .double-clear svg {
124
- width: 1rem;
125
- height: 1rem;
126
- }
127
162
  .double .el-input .el-input__wrapper {
128
163
  border: none;
129
164
  box-shadow: none;
@@ -139,6 +174,11 @@
139
174
  .selector-popper.el-popover.el-popper {
140
175
  padding: 0;
141
176
  }
177
+ .selector-double {
178
+ height: 100%;
179
+ width: 100%;
180
+ box-sizing: border-box;
181
+ }
142
182
  .selector-select {
143
183
  padding: 5px 10px;
144
184
  z-index: 1000;
@@ -13,6 +13,11 @@ $selector: 'selector';
13
13
  padding: 0;
14
14
  }
15
15
  }
16
+ &-double {
17
+ height: 100%;
18
+ width: 100%;
19
+ box-sizing: border-box;
20
+ }
16
21
  &-select {
17
22
  padding: 5px 10px;
18
23
  z-index: 1000;
@@ -9,7 +9,6 @@ const dataProps = {
9
9
  type: Boolean,
10
10
  default: true
11
11
  },
12
- disabled: { type: Boolean, default: false },
13
12
  width: {
14
13
  type: [String, Number],
15
14
  default: "320px"
@@ -30,9 +29,14 @@ const dataProps = {
30
29
  },
31
30
  modelValue: {
32
31
  type: Array
33
- }
32
+ },
33
+ /**
34
+ * @props { Boolean } disabled=false
35
+ * 是否禁用
36
+ */
37
+ disabled: { type: Boolean, default: false }
34
38
  };
35
- const dataEmits = ["update:modelValue", "change"];
39
+ const dataEmits = ["update:modelValue", "change", "blur", "focus"];
36
40
  const dataSlot = {
37
41
  default: "default"
38
42
  };
@@ -20,10 +20,6 @@ export declare const dataProps: {
20
20
  type: BooleanConstructor;
21
21
  default: boolean;
22
22
  };
23
- disabled: {
24
- type: BooleanConstructor;
25
- default: boolean;
26
- };
27
23
  width: {
28
24
  type: (StringConstructor | NumberConstructor)[];
29
25
  default: string;
@@ -43,6 +39,14 @@ export declare const dataProps: {
43
39
  modelValue: {
44
40
  type: ArrayConstructor;
45
41
  };
42
+ /**
43
+ * @props { Boolean } disabled=false
44
+ * 是否禁用
45
+ */
46
+ disabled: {
47
+ type: BooleanConstructor;
48
+ default: boolean;
49
+ };
46
50
  };
47
51
  export type DataProps = ExtractPropTypes<typeof dataProps>;
48
52
  /**
@@ -7,7 +7,6 @@ const dataProps = {
7
7
  type: Boolean,
8
8
  default: true
9
9
  },
10
- disabled: { type: Boolean, default: false },
11
10
  width: {
12
11
  type: [String, Number],
13
12
  default: "320px"
@@ -28,9 +27,14 @@ const dataProps = {
28
27
  },
29
28
  modelValue: {
30
29
  type: Array
31
- }
30
+ },
31
+ /**
32
+ * @props { Boolean } disabled=false
33
+ * 是否禁用
34
+ */
35
+ disabled: { type: Boolean, default: false }
32
36
  };
33
- const dataEmits = ["update:modelValue", "change"];
37
+ const dataEmits = ["update:modelValue", "change", "blur", "focus"];
34
38
  const dataSlot = {
35
39
  default: "default"
36
40
  };