@deppon/deppon-template 2.3.9 → 2.4.2

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.
@@ -11,60 +11,35 @@
11
11
  gap: 10px;
12
12
  row-gap: 8px;
13
13
  }
14
+ .field-tag-input .tag-input-input-row.has-error .tag-input-input-wrap .el-input__wrapper {
15
+ box-shadow: 0 0 0 1px var(--el-color-danger) inset !important;
16
+ }
14
17
  .field-tag-input .tag-input-input-row .tag-input-input-wrap {
18
+ flex: 1 1 0%;
19
+ min-width: 0;
20
+ }
21
+ .field-tag-input .tag-input-input-row .tag-input-tip-wrap {
22
+ flex: 2 1 0%;
23
+ min-width: 0;
15
24
  display: flex;
16
- align-items: stretch;
17
- flex: 1 1 360px;
25
+ align-items: center;
26
+ overflow: hidden;
27
+ }
28
+ .field-tag-input .tag-input-input-row .tag-input-tip-wrap .el-tooltip__trigger {
29
+ display: block;
18
30
  width: 100%;
19
- max-width: 100%;
20
- min-width: 240px;
21
- }
22
- .field-tag-input .tag-input-input-row .tag-input-input-wrap .tag-input-input {
23
- width: 100% !important;
24
- min-width: 0 !important;
25
- }
26
- .field-tag-input .tag-input-input-row .tag-input-input-wrap .el-input,
27
- .field-tag-input .tag-input-input-row .tag-input-input-wrap .el-input-group,
28
- .field-tag-input .tag-input-input-row .tag-input-input-wrap .el-input-group--append {
29
- width: 100% !important;
30
- max-width: 100% !important;
31
- }
32
- .field-tag-input .tag-input-input-row .tag-input-input-wrap .el-input-group {
33
- display: flex !important;
34
- align-items: stretch !important;
35
- }
36
- .field-tag-input .tag-input-input-row .tag-input-input-wrap .el-input__wrapper {
37
- flex: 1 1 auto !important;
38
- min-width: 0 !important;
39
- }
40
- .field-tag-input .tag-input-input-row .tag-input-input-wrap .el-input__inner {
41
- min-width: 0 !important;
42
- }
43
- .field-tag-input .tag-input-input-row .tag-input-input-wrap .el-input-group__append {
44
- flex: 0 0 auto !important;
45
- padding: 0 !important;
46
- border: none !important;
47
- background: transparent !important;
48
- }
49
- .field-tag-input .tag-input-input-row .tag-input-input-wrap .tag-input-add-btn {
50
- border-top-left-radius: 0 !important;
51
- border-bottom-left-radius: 0 !important;
52
- border-color: var(--el-color-primary) !important;
53
- background-color: var(--el-color-primary) !important;
54
- color: #fff !important;
31
+ min-width: 0;
32
+ overflow: hidden;
55
33
  }
56
34
  .field-tag-input .tag-input-input-row .tag-input-tip {
57
- flex: 0 0 auto !important;
58
- color: var(--el-text-color-secondary) !important;
59
- font-size: 12px !important;
60
- line-height: 32px !important;
61
- max-width: 100% !important;
62
- white-space: nowrap !important;
63
- overflow: hidden !important;
64
- text-overflow: ellipsis !important;
65
- }
66
- .field-tag-input .tag-input-input-row.has-error .tag-input-input-wrap .el-input__wrapper {
67
- box-shadow: 0 0 0 1px var(--el-color-danger) inset !important;
35
+ display: block;
36
+ width: 100%;
37
+ overflow: hidden;
38
+ text-overflow: ellipsis;
39
+ white-space: nowrap;
40
+ font-size: 12px;
41
+ line-height: 1.4;
42
+ color: var(--el-text-color-secondary);
68
43
  }
69
44
  .field-tag-input .tag-input-add-error {
70
45
  font-size: 12px;
@@ -13,25 +13,21 @@ var _hoisted_1 = {
13
13
  "class": "field-tag-input-readonly"
14
14
  };
15
15
  var _hoisted_2 = {
16
- key: 1,
17
- "class": "field-tag-input"
18
- };
19
- var _hoisted_3 = {
20
16
  "class": "tag-input-input-wrap"
21
17
  };
22
- var _hoisted_4 = {
18
+ var _hoisted_3 = {
23
19
  key: 0,
24
- "class": "tag-input-tip"
20
+ "class": "tag-input-tip-wrap"
25
21
  };
26
- var _hoisted_5 = {
22
+ var _hoisted_4 = {
27
23
  key: 0,
28
24
  "class": "tag-input-add-error"
29
25
  };
30
- var _hoisted_6 = {
26
+ var _hoisted_5 = {
31
27
  key: 1,
32
28
  "class": "tag-input-list-row"
33
29
  };
34
- var _hoisted_7 = {
30
+ var _hoisted_6 = {
35
31
  key: 0,
36
32
  "class": "tag-input-list-label"
37
33
  };
@@ -63,14 +59,18 @@ var script = {
63
59
  var __emit = _ref.emit;
64
60
  var props = __props;
65
61
  var emit = __emit;
62
+ var rootRef = ref(null);
66
63
  var inputRef = ref(null);
67
64
  var inputValue = ref('');
68
65
  var addLoading = ref(false);
69
66
  var removingIndex = ref(-1);
70
67
  /** 添加时校验失败的错误信息,在输入框下方展示 */
71
68
  var addError = ref('');
69
+ var inFormItem = ref(false);
72
70
  var readonlyRef = ref(null);
73
71
  var readonlyOverflow = ref(false);
72
+ var tipRef = ref(null);
73
+ var tipOverflow = ref(false);
74
74
  var checkReadonlyOverflow = function checkReadonlyOverflow() {
75
75
  var el = readonlyRef.value;
76
76
  if (!el) {
@@ -79,6 +79,18 @@ var script = {
79
79
  }
80
80
  readonlyOverflow.value = el.scrollWidth > el.clientWidth;
81
81
  };
82
+ var checkTipOverflow = function checkTipOverflow() {
83
+ var el = tipRef.value;
84
+ if (!el) {
85
+ tipOverflow.value = false;
86
+ return;
87
+ }
88
+ tipOverflow.value = el.scrollWidth > el.clientWidth;
89
+ };
90
+ var runOverflowChecks = function runOverflowChecks() {
91
+ checkReadonlyOverflow();
92
+ checkTipOverflow();
93
+ };
82
94
  var readonlyTooltipContent = computed(function () {
83
95
  var _ref2, _displayText$value;
84
96
  var v = (_ref2 = (_displayText$value = displayText.value) !== null && _displayText$value !== void 0 ? _displayText$value : props.emptyText) !== null && _ref2 !== void 0 ? _ref2 : '-';
@@ -88,16 +100,20 @@ var script = {
88
100
  return s;
89
101
  });
90
102
  onMounted(function () {
91
- nextTick(checkReadonlyOverflow);
92
- window.addEventListener('resize', checkReadonlyOverflow);
103
+ nextTick(runOverflowChecks);
104
+ var rootEl = rootRef.value;
105
+ if (rootEl && typeof rootEl.closest === 'function') {
106
+ inFormItem.value = !!rootEl.closest('.el-form-item');
107
+ }
108
+ window.addEventListener('resize', runOverflowChecks);
93
109
  });
94
110
  onUnmounted(function () {
95
- window.removeEventListener('resize', checkReadonlyOverflow);
111
+ window.removeEventListener('resize', runOverflowChecks);
96
112
  });
97
113
  watch(function () {
98
114
  return [props.mode, props.text, props.fieldProps];
99
115
  }, function () {
100
- return nextTick(checkReadonlyOverflow);
116
+ return nextTick(runOverflowChecks);
101
117
  }, {
102
118
  deep: true
103
119
  });
@@ -113,6 +129,9 @@ var script = {
113
129
  var _props$fieldProps$tip, _props$fieldProps3;
114
130
  return (_props$fieldProps$tip = (_props$fieldProps3 = props.fieldProps) === null || _props$fieldProps3 === void 0 ? void 0 : _props$fieldProps3.tip) !== null && _props$fieldProps$tip !== void 0 ? _props$fieldProps$tip : '';
115
131
  });
132
+ watch(tip, function () {
133
+ return nextTick(checkTipOverflow);
134
+ });
116
135
  var listLabel = computed(function () {
117
136
  var _props$fieldProps$lis, _props$fieldProps4;
118
137
  return (_props$fieldProps$lis = (_props$fieldProps4 = props.fieldProps) === null || _props$fieldProps4 === void 0 ? void 0 : _props$fieldProps4.listLabel) !== null && _props$fieldProps$lis !== void 0 ? _props$fieldProps$lis : '已配项';
@@ -139,6 +158,11 @@ var script = {
139
158
  var _props$fieldProps0;
140
159
  return ((_props$fieldProps0 = props.fieldProps) === null || _props$fieldProps0 === void 0 ? void 0 : _props$fieldProps0.disabled) === true;
141
160
  });
161
+ /** 在 el-form-item 内时,空输入提示优先复用外层错误区,避免双重提示 */
162
+ var useFormItemRequiredError = computed(function () {
163
+ var _props$fieldProps1;
164
+ return ((_props$fieldProps1 = props.fieldProps) === null || _props$fieldProps1 === void 0 ? void 0 : _props$fieldProps1.useFormItemRequiredError) !== false;
165
+ });
142
166
  var tagList = computed(function () {
143
167
  var val = props.text;
144
168
  if (Array.isArray(val)) return val;
@@ -154,9 +178,8 @@ var script = {
154
178
  var trimmed = (value || '').trim();
155
179
  var rules = addRules.value;
156
180
  if (!rules.length) {
157
- // 未显式配置添加校验规则时,空输入仅拦截,不展示内部错误,
158
- // 避免与外层 el-form-item 的必填提示重复显示。
159
- if (!trimmed) return '';
181
+ // 未配置规则时,至少保证空输入有基础提示。
182
+ if (!trimmed) return '请输入';
160
183
  return '';
161
184
  }
162
185
  var _iterator = _createForOfIteratorHelper(rules),
@@ -197,7 +220,7 @@ var script = {
197
220
  }
198
221
  function _addItem() {
199
222
  _addItem = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
200
- var _inputValue$value, _props$fieldProps1;
223
+ var _inputValue$value, _props$fieldProps10;
201
224
  var raw, name, list, err, onAdd, result, nextList;
202
225
  return _regeneratorRuntime.wrap(function (_context) {
203
226
  while (1) switch (_context.prev = _context.next) {
@@ -213,40 +236,46 @@ var script = {
213
236
  name = raw.trim();
214
237
  list = _toConsumableArray(tagList.value);
215
238
  if (name) {
216
- _context.next = 2;
239
+ _context.next = 3;
217
240
  break;
218
241
  }
219
- // 空值不允许加入;未配置 addRules 时静默拦截,避免与外层必填提示重复。
220
- if (addRules.value.length) {
221
- addError.value = validateAddInput(raw, list);
242
+ if (!(useFormItemRequiredError.value && inFormItem.value)) {
243
+ _context.next = 2;
244
+ break;
222
245
  }
246
+ // 主动触发一次 update:text,让外层 ProForm 执行 validateField 并展示 el-form-item 错误。
247
+ emit('update:text', list);
223
248
  return _context.abrupt("return");
224
249
  case 2:
250
+ // 非表单场景保留组件内提示。
251
+ addError.value = validateAddInput(raw, list);
252
+ return _context.abrupt("return");
253
+ case 3:
225
254
  err = validateAddInput(raw, list);
226
255
  if (!err) {
227
- _context.next = 3;
256
+ _context.next = 4;
228
257
  break;
229
258
  }
230
259
  addError.value = err;
231
260
  return _context.abrupt("return");
232
- case 3:
261
+ case 4:
233
262
  if (!(list.length >= maxCount.value)) {
234
- _context.next = 4;
263
+ _context.next = 5;
235
264
  break;
236
265
  }
237
266
  addError.value = "\u6700\u591A\u6DFB\u52A0".concat(maxCount.value, "\u4E2A");
238
267
  return _context.abrupt("return");
239
- case 4:
240
- onAdd = (_props$fieldProps1 = props.fieldProps) === null || _props$fieldProps1 === void 0 ? void 0 : _props$fieldProps1.onAdd;
268
+ case 5:
269
+ onAdd = (_props$fieldProps10 = props.fieldProps) === null || _props$fieldProps10 === void 0 ? void 0 : _props$fieldProps10.onAdd;
241
270
  if (!(typeof onAdd === 'function')) {
242
- _context.next = 10;
271
+ _context.next = 11;
243
272
  break;
244
273
  }
245
274
  addLoading.value = true;
246
- _context.prev = 5;
247
- _context.next = 6;
275
+ _context.prev = 6;
276
+ _context.next = 7;
248
277
  return Promise.resolve(onAdd(name, list));
249
- case 6:
278
+ case 7:
250
279
  result = _context.sent;
251
280
  if (Array.isArray(result)) {
252
281
  emit('update:text', result);
@@ -266,18 +295,18 @@ var script = {
266
295
  return (_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 || (_inputRef$value2$focu = _inputRef$value2.focus) === null || _inputRef$value2$focu === void 0 ? void 0 : _inputRef$value2$focu.call(_inputRef$value2);
267
296
  });
268
297
  }
269
- _context.next = 8;
298
+ _context.next = 9;
270
299
  break;
271
- case 7:
272
- _context.prev = 7;
273
- _context["catch"](5);
274
300
  case 8:
275
301
  _context.prev = 8;
276
- addLoading.value = false;
277
- return _context.finish(8);
302
+ _context["catch"](6);
278
303
  case 9:
279
- return _context.abrupt("return");
304
+ _context.prev = 9;
305
+ addLoading.value = false;
306
+ return _context.finish(9);
280
307
  case 10:
308
+ return _context.abrupt("return");
309
+ case 11:
281
310
  list.push(name);
282
311
  emit('update:text', list);
283
312
  inputValue.value = '';
@@ -286,11 +315,11 @@ var script = {
286
315
  var _inputRef$value3, _inputRef$value3$focu;
287
316
  return (_inputRef$value3 = inputRef.value) === null || _inputRef$value3 === void 0 || (_inputRef$value3$focu = _inputRef$value3.focus) === null || _inputRef$value3$focu === void 0 ? void 0 : _inputRef$value3$focu.call(_inputRef$value3);
288
317
  });
289
- case 11:
318
+ case 12:
290
319
  case "end":
291
320
  return _context.stop();
292
321
  }
293
- }, _callee, null, [[5, 7, 8, 9]]);
322
+ }, _callee, null, [[6, 8, 9, 10]]);
294
323
  }));
295
324
  return _addItem.apply(this, arguments);
296
325
  }
@@ -299,7 +328,7 @@ var script = {
299
328
  }
300
329
  function _removeItem() {
301
330
  _removeItem = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(index) {
302
- var _props$fieldProps10;
331
+ var _props$fieldProps11;
303
332
  var list, name, onRemove, result, nextList;
304
333
  return _regeneratorRuntime.wrap(function (_context2) {
305
334
  while (1) switch (_context2.prev = _context2.next) {
@@ -318,7 +347,7 @@ var script = {
318
347
  }
319
348
  return _context2.abrupt("return");
320
349
  case 2:
321
- onRemove = (_props$fieldProps10 = props.fieldProps) === null || _props$fieldProps10 === void 0 ? void 0 : _props$fieldProps10.onRemove;
350
+ onRemove = (_props$fieldProps11 = props.fieldProps) === null || _props$fieldProps11 === void 0 ? void 0 : _props$fieldProps11.onRemove;
322
351
  if (!(typeof onRemove === 'function')) {
323
352
  _context2.next = 8;
324
353
  break;
@@ -373,11 +402,16 @@ var script = {
373
402
  }, toDisplayString(displayText.value), 513 /* TEXT, NEED_PATCH */)];
374
403
  }),
375
404
  _: 1 /* STABLE */
376
- }, 8 /* PROPS */, ["content", "disabled"])])) : __props.mode === 'edit' || __props.mode === 'update' ? (openBlock(), createElementBlock("div", _hoisted_2, [createCommentVNode(" 输入 + 添加 区域 "), createElementVNode("div", {
405
+ }, 8 /* PROPS */, ["content", "disabled"])])) : __props.mode === 'edit' || __props.mode === 'update' ? (openBlock(), createElementBlock("div", {
406
+ key: 1,
407
+ ref_key: "rootRef",
408
+ ref: rootRef,
409
+ "class": "field-tag-input"
410
+ }, [createCommentVNode(" 输入 + 添加 区域 "), createElementVNode("div", {
377
411
  "class": normalizeClass(["tag-input-input-row", {
378
412
  'has-error': addError.value
379
413
  }])
380
- }, [createElementVNode("div", _hoisted_3, [createVNode(unref(ElInput), {
414
+ }, [createElementVNode("div", _hoisted_2, [createVNode(unref(ElInput), {
381
415
  ref_key: "inputRef",
382
416
  ref: inputRef,
383
417
  modelValue: inputValue.value,
@@ -418,7 +452,20 @@ var script = {
418
452
  }, 8 /* PROPS */, ["loading", "disabled"]))];
419
453
  }),
420
454
  _: 3 /* FORWARDED */
421
- }, 8 /* PROPS */, ["modelValue", "placeholder", "disabled"])]), tip.value ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(tip.value), 1 /* TEXT */)) : createCommentVNode("v-if", true)], 2 /* CLASS */), addError.value ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(addError.value), 1 /* TEXT */)) : createCommentVNode("v-if", true), createCommentVNode(" 标签列表:有数据时才显示 "), tagList.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6, [listLabel.value ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(listLabel.value) + "(" + toDisplayString(tagList.value.length) + "/" + toDisplayString(maxCount.value) + ") ", 1 /* TEXT */)) : createCommentVNode("v-if", true), createElementVNode("div", {
455
+ }, 8 /* PROPS */, ["modelValue", "placeholder", "disabled"])]), tip.value ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(ElTooltip), {
456
+ content: tip.value,
457
+ placement: "top",
458
+ disabled: !tipOverflow.value
459
+ }, {
460
+ "default": withCtx(function () {
461
+ return [createElementVNode("span", {
462
+ ref_key: "tipRef",
463
+ ref: tipRef,
464
+ "class": "tag-input-tip"
465
+ }, toDisplayString(tip.value), 513 /* TEXT, NEED_PATCH */)];
466
+ }),
467
+ _: 1 /* STABLE */
468
+ }, 8 /* PROPS */, ["content", "disabled"])])) : createCommentVNode("v-if", true)], 2 /* CLASS */), addError.value ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(addError.value), 1 /* TEXT */)) : createCommentVNode("v-if", true), createCommentVNode(" 标签列表:有数据时才显示 "), tagList.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5, [listLabel.value ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(listLabel.value) + "(" + toDisplayString(tagList.value.length) + "/" + toDisplayString(maxCount.value) + ") ", 1 /* TEXT */)) : createCommentVNode("v-if", true), createElementVNode("div", {
422
469
  "class": normalizeClass(["tag-input-list-content", {
423
470
  'is-removing': removingIndex.value >= 0
424
471
  }])
@@ -447,7 +494,7 @@ var script = {
447
494
  }), 128 /* KEYED_FRAGMENT */))];
448
495
  }),
449
496
  _: 1 /* STABLE */
450
- })], 2 /* CLASS */)])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true);
497
+ })], 2 /* CLASS */)])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */)) : createCommentVNode("v-if", true);
451
498
  };
452
499
  }
453
500
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deppon/deppon-template",
3
- "version": "2.3.9",
3
+ "version": "2.4.2",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "typings": "es/index.d.ts",
@@ -43,11 +43,11 @@
43
43
  "less": "^4.2.0"
44
44
  },
45
45
  "dependencies": {
46
- "@deppon/deppon-assets": "2.3.9",
47
- "@deppon/deppon-request": "2.3.9",
48
- "@deppon/deppon-router": "2.3.9",
49
- "@deppon/deppon-ui": "2.3.9",
50
- "@deppon/deppon-utils": "2.3.9",
46
+ "@deppon/deppon-assets": "2.4.2",
47
+ "@deppon/deppon-request": "2.4.2",
48
+ "@deppon/deppon-router": "2.4.2",
49
+ "@deppon/deppon-ui": "2.4.2",
50
+ "@deppon/deppon-utils": "2.4.2",
51
51
  "dayjs": "^1.11.10",
52
52
  "lodash-es": "^4.17.21",
53
53
  "mitt": "^3.0.1"