@opentiny/vue-renderless 3.28.2 → 3.29.0

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 (58) hide show
  1. package/alert/vue.js +4 -1
  2. package/base-select/index.js +6 -3
  3. package/base-select/vue.js +1 -1
  4. package/date-range/index.js +1 -1
  5. package/dialog-box/vue.js +4 -1
  6. package/dialog-select/index.js +1 -1
  7. package/drawer/index.js +6 -0
  8. package/drawer/vue.js +3 -1
  9. package/fluent-editor/index.js +72 -4
  10. package/fluent-editor/vue.js +3 -1
  11. package/form-item/index.js +1 -1
  12. package/form-item/vue.js +11 -1
  13. package/grid-select/index.js +3 -3
  14. package/guide/index.js +17 -11
  15. package/guide/vue.js +2 -1
  16. package/modal/index.js +11 -11
  17. package/modal/vue.js +3 -0
  18. package/notify/vue.js +4 -1
  19. package/package.json +3 -3
  20. package/picker/vue.js +3 -2
  21. package/qr-code/vue.js +3 -1
  22. package/rate/index.js +3 -1
  23. package/search/vue.js +6 -1
  24. package/select/index.js +6 -3
  25. package/select/vue.js +5 -4
  26. package/statistic/index.js +48 -1
  27. package/statistic/vue.js +31 -11
  28. package/tag-group/index.js +3 -0
  29. package/tag-input/index.js +91 -0
  30. package/tag-input/vue.js +72 -0
  31. package/time/index.js +22 -0
  32. package/time/vue.js +14 -2
  33. package/types/alert.type.d.ts +2 -0
  34. package/types/button-group.type.d.ts +5 -0
  35. package/types/date-picker.type.d.ts +1 -1
  36. package/types/dialog-box.type.d.ts +2 -0
  37. package/types/drawer.type.d.ts +2 -0
  38. package/types/{dropdown-item.type-b3ced3ce.d.ts → dropdown-item.type-f83b014f.d.ts} +1 -1
  39. package/types/dropdown-item.type.d.ts +1 -1
  40. package/types/dropdown-menu.type.d.ts +1 -1
  41. package/types/file-upload.type.d.ts +1 -1
  42. package/types/form-item.type.d.ts +1 -1
  43. package/types/{form.type-a54e1c06.d.ts → form.type-e0db2f7c.d.ts} +9 -0
  44. package/types/form.type.d.ts +1 -1
  45. package/types/input.type.d.ts +1 -1
  46. package/types/modal.type.d.ts +2 -0
  47. package/types/popeditor.type.d.ts +2 -2
  48. package/types/popover.type.d.ts +1 -1
  49. package/types/rate.type.d.ts +4 -0
  50. package/types/search.type.d.ts +1 -0
  51. package/types/statistic.type.d.ts +17 -1
  52. package/types/tag-input.type.d.ts +113 -0
  53. package/types/transfer.type.d.ts +3 -3
  54. package/types/tree-menu.type.d.ts +1 -1
  55. package/types/upload-dragger.type.d.ts +1 -1
  56. package/types/{upload-list.type-36a8374a.d.ts → upload-list.type-d5ff675d.d.ts} +1 -1
  57. package/types/upload-list.type.d.ts +1 -1
  58. package/types/upload.type.d.ts +1 -1
package/alert/vue.js CHANGED
@@ -9,6 +9,7 @@ import {
9
9
  watchAutoHide,
10
10
  handlerTargetNode
11
11
  } from "./index";
12
+ import { nanoid } from "@opentiny/utils";
12
13
  const api = ["handleClose", "state", "handleHeaderClick"];
13
14
  const initState = ({ api: api2, computed, constants, reactive }) => {
14
15
  return reactive({
@@ -21,7 +22,9 @@ const initState = ({ api: api2, computed, constants, reactive }) => {
21
22
  getIcon: computed(() => api2.computedGetIcon()),
22
23
  getTitle: computed(() => api2.computedGetTitle()),
23
24
  alertClass: computed(() => api2.computedClass()),
24
- alertStyle: computed(() => api2.computedStyle())
25
+ alertStyle: computed(() => api2.computedStyle()),
26
+ titleId: `tiny-alert-title-${nanoid.api.nanoid(8)}`,
27
+ contentId: `tiny-alert-description-${nanoid.api.nanoid(8)}`
25
28
  });
26
29
  };
27
30
  const initApi = ({ api: api2, state, constants, props, designConfig, t, emit, vm, parent, nextTick, mode }) => {
@@ -1214,10 +1214,9 @@ const computedCurrentSizeMap = ({ state, designConfig }) => () => {
1214
1214
  const sizeMap = ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.sizeMap) || defaultSizeMap;
1215
1215
  return sizeMap[state.selectSize || "default"];
1216
1216
  };
1217
- const mounted = ({ api, parent, state, props, vm, designConfig }) => () => {
1217
+ const mounted = ({ api, parent, state, props, vm, designConfig, nextTick }) => () => {
1218
1218
  const parentEl = parent.$el;
1219
1219
  const inputEl = parentEl.querySelector('input[data-tag="tiny-input-inner"]');
1220
- const inputClientRect = inputEl && inputEl.getBoundingClientRect() || {};
1221
1220
  if (inputEl === document.activeElement) {
1222
1221
  document.activeElement.blur();
1223
1222
  }
@@ -1229,10 +1228,14 @@ const mounted = ({ api, parent, state, props, vm, designConfig }) => () => {
1229
1228
  if (vm.$refs.tags) {
1230
1229
  addResizeListener(vm.$refs.tags, api.resetInputHeight);
1231
1230
  }
1231
+ nextTick(() => {
1232
+ if (inputEl) {
1233
+ state.inputWidth = inputEl.offsetWidth || 0;
1234
+ }
1235
+ });
1232
1236
  if (props.remote && props.multiple) {
1233
1237
  api.resetInputHeight();
1234
1238
  }
1235
- state.inputWidth = inputClientRect.width;
1236
1239
  api.initQuery({ init: true }).then(() => {
1237
1240
  api.setSelected(true);
1238
1241
  if (props.modelValue && props.initLabel) {
@@ -472,7 +472,7 @@ const addApi = ({
472
472
  debouncRquest: debouncRquest({ api: api2, state, props }),
473
473
  defaultOnQueryChange: defaultOnQueryChange({ props, state, constants, api: api2, nextTick, vm }),
474
474
  queryChange: queryChange({ props, state, constants, api: api2, nextTick, vm }),
475
- mounted: mounted({ api: api2, parent, state, props, vm, designConfig }),
475
+ mounted: mounted({ api: api2, parent, state, props, vm, designConfig, nextTick }),
476
476
  unMount: unMount({ api: api2, parent, vm, state }),
477
477
  watchOptimizeOpts: watchOptimizeOpts({ props, state }),
478
478
  handleDropdownClick: handleDropdownClick({ props, vm, state, emit }),
@@ -139,7 +139,7 @@ const handleClear = ({ emit, state }) => () => {
139
139
  state.rightDate = nextMonth1(state.leftDate);
140
140
  state.rangeState.selecting = false;
141
141
  state.rangeState.endDate = null;
142
- emit("pick", []);
142
+ emit("pick", null);
143
143
  };
144
144
  const handleChangeRange = (state, props) => (val) => {
145
145
  if (props.readonly) {
package/dialog-box/vue.js CHANGED
@@ -22,6 +22,7 @@ import {
22
22
  hideScrollbar,
23
23
  toggleFullScreen
24
24
  } from "./index";
25
+ import { nanoid } from "@opentiny/utils";
25
26
  import { usePopup } from "@opentiny/vue-hooks";
26
27
  const api = [
27
28
  "afterEnter",
@@ -61,7 +62,9 @@ const initState = ({
61
62
  style: computed(() => api2.computedStyle()),
62
63
  animationName: computed(() => api2.computedAnimationName()),
63
64
  current,
64
- dragStyle: null
65
+ dragStyle: null,
66
+ titleId: `tiny-dialog-box-title-${nanoid.api.nanoid(8)}`,
67
+ contentId: `tiny-dialog-box-content-${nanoid.api.nanoid(8)}`
65
68
  });
66
69
  return state;
67
70
  };
@@ -439,7 +439,7 @@ const multiGridRadioChange = ({ props, state }) => ({ row, $table }, event) => {
439
439
  }
440
440
  };
441
441
  const watchMulti = ({ api, state, props }) => () => {
442
- state.splitValue = props.multi ? 0.7 : 1;
442
+ state.splitValue = props.multi && props.showSelectedBox ? 0.7 : 1;
443
443
  state.selectedChanged = false;
444
444
  state.selectedDatas = [];
445
445
  state.selectedValues = [];
package/drawer/index.js CHANGED
@@ -28,6 +28,11 @@ const computedHeight = ({
28
28
  const close = ({ api }) => (force = true) => {
29
29
  api.handleClose("close", typeof force === "boolean" ? force : false);
30
30
  };
31
+ const closed = ({ state, emit }) => () => {
32
+ if (!state.visible) {
33
+ emit("closed");
34
+ }
35
+ };
31
36
  const watchVisible = ({ state, api }) => (value) => {
32
37
  value ? api.open() : api.close();
33
38
  };
@@ -146,6 +151,7 @@ export {
146
151
  addDragEvent,
147
152
  addKeydownEvent,
148
153
  close,
154
+ closed,
149
155
  computedHeight,
150
156
  computedWidth,
151
157
  confirm,
package/drawer/vue.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import "../chunk-G2ADBYYC.js";
2
2
  import {
3
3
  close,
4
+ closed,
4
5
  watchVisible,
5
6
  confirm,
6
7
  mousedown,
@@ -18,7 +19,7 @@ import {
18
19
  addKeydownEvent,
19
20
  removeKeydownEvent
20
21
  } from "./index";
21
- const api = ["state", "close", "confirm", "handleClose", "open"];
22
+ const api = ["state", "close", "closed", "confirm", "handleClose", "open"];
22
23
  const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, computed }, { emit, vm, mode, constants, designConfig }) => {
23
24
  const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode);
24
25
  const api2 = {};
@@ -35,6 +36,7 @@ const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, comput
35
36
  open: open({ state, emit, vm }),
36
37
  confirm: confirm({ api: api2 }),
37
38
  close: close({ api: api2 }),
39
+ closed: closed({ state, emit }),
38
40
  handleClose: handleClose({ emit, props, state }),
39
41
  mousedown: mousedown({ state, vm }),
40
42
  mousemove: mousemove({ state, props, emit }),
@@ -1,4 +1,6 @@
1
- import "../chunk-G2ADBYYC.js";
1
+ import {
2
+ __spreadValues
3
+ } from "../chunk-G2ADBYYC.js";
2
4
  import { extend } from "@opentiny/utils";
3
5
  import { isNull } from "@opentiny/utils";
4
6
  import { xss } from "@opentiny/utils";
@@ -18,12 +20,23 @@ const init = ({
18
20
  useBreakpoint,
19
21
  simpleToolbar
20
22
  }) => () => {
21
- var _a;
23
+ var _a, _b, _c;
22
24
  UploaderDfls.enableMultiUpload = { file: true, image: true };
23
25
  UploaderDfls.handler = api.uploaderDflsHandler;
24
26
  UploaderDfls.imagePasteFailCallback = props.imagePasteFailCallback;
25
27
  defaultOptions.modules.toolbar.handlers = api.handlers();
26
28
  state.innerOptions = extend(true, {}, defaultOptions, props.globalOptions, props.options);
29
+ const toolbarOpt = (_b = (_a = state.innerOptions) == null ? void 0 : _a.modules) == null ? void 0 : _b.toolbar;
30
+ const defaultHandlers = api.handlers();
31
+ if (Array.isArray(toolbarOpt)) {
32
+ state.innerOptions.modules.toolbar = {
33
+ container: toolbarOpt,
34
+ handlers: defaultHandlers
35
+ };
36
+ } else if (toolbarOpt && typeof toolbarOpt === "object") {
37
+ const userHandlers = toolbarOpt.handlers || {};
38
+ state.innerOptions.modules.toolbar.handlers = __spreadValues(__spreadValues({}, defaultHandlers), userHandlers);
39
+ }
27
40
  if (props.imageUpload) {
28
41
  state.innerOptions.imageUpload = props.imageUpload;
29
42
  } else {
@@ -43,7 +56,7 @@ const init = ({
43
56
  if (current.value === "default") {
44
57
  state.innerOptions.modules.toolbar = simpleToolbar;
45
58
  }
46
- (_a = props.beforeEditorInit) == null ? void 0 : _a.call(props, FluentEditor);
59
+ (_c = props.beforeEditorInit) == null ? void 0 : _c.call(props, FluentEditor);
47
60
  const quill = new FluentEditor(vm.$refs.editor, state.innerOptions);
48
61
  quill.emitter.on("file-change", api.fileOperationToSev);
49
62
  state.quill = Object.freeze(quill);
@@ -458,6 +471,59 @@ const uploadImageToSev = ({ state }) => (event) => {
458
471
  };
459
472
  xhr.send(fd);
460
473
  };
474
+ const alignHandler = ({ state, FluentEditor }) => (value) => {
475
+ var _a, _b, _c, _d;
476
+ const range = state.quill.getSelection(true);
477
+ if (!range) {
478
+ return;
479
+ }
480
+ const betterTableModule = state.quill.getModule("better-table");
481
+ const selectedTds = (_a = betterTableModule == null ? void 0 : betterTableModule.tableSelection) == null ? void 0 : _a.selectedTds;
482
+ if (Array.isArray(selectedTds) && selectedTds.length > 0) {
483
+ const selectedCells = selectedTds.map((tdBlot) => tdBlot == null ? void 0 : tdBlot.domNode).filter(Boolean);
484
+ selectedCells.forEach((cellElement) => {
485
+ const cellBlot = state.quill.scroll.find(cellElement);
486
+ if (!cellBlot)
487
+ return;
488
+ const lines = [];
489
+ const findLines = (blot) => {
490
+ var _a2, _b2;
491
+ if (((_a2 = blot == null ? void 0 : blot.statics) == null ? void 0 : _a2.blotName) === "table-cell-line") {
492
+ lines.push(blot);
493
+ }
494
+ if ((_b2 = blot == null ? void 0 : blot.children) == null ? void 0 : _b2.length) {
495
+ blot.children.forEach((child) => findLines(child));
496
+ }
497
+ };
498
+ findLines(cellBlot);
499
+ lines.forEach((line2) => {
500
+ var _a2;
501
+ try {
502
+ const lineIndex = state.quill.getIndex(line2);
503
+ if (lineIndex !== null && lineIndex >= 0) {
504
+ const lineLength = line2.length();
505
+ if (lineLength > 0) {
506
+ state.quill.formatLine(lineIndex, lineLength, "align", value, FluentEditor.sources.USER);
507
+ }
508
+ }
509
+ } catch (e) {
510
+ try {
511
+ (_a2 = line2 == null ? void 0 : line2.format) == null ? void 0 : _a2.call(line2, "align", value);
512
+ } catch (err) {
513
+ }
514
+ }
515
+ });
516
+ });
517
+ (_c = (_b = betterTableModule == null ? void 0 : betterTableModule.tableSelection) == null ? void 0 : _b.clearSelection) == null ? void 0 : _c.call(_b);
518
+ return;
519
+ }
520
+ const [line] = state.quill.getLine(range.index);
521
+ if (((_d = line == null ? void 0 : line.statics) == null ? void 0 : _d.blotName) === "table-cell-line") {
522
+ state.quill.formatLine(range.index, 1, "align", value, FluentEditor.sources.USER);
523
+ return;
524
+ }
525
+ state.quill.format("align", value, FluentEditor.sources.USER);
526
+ };
461
527
  const handlers = ({ api }) => () => {
462
528
  return {
463
529
  undo: api.undoHandler,
@@ -465,7 +531,8 @@ const handlers = ({ api }) => () => {
465
531
  lineheight: api.lineheightHandler,
466
532
  file: api.fileHandler,
467
533
  image: api.imageHandler,
468
- inputFile: api.inputFileHandler
534
+ inputFile: api.inputFileHandler,
535
+ align: api.alignHandler
469
536
  };
470
537
  };
471
538
  const getFileUploadUrl = ({ service }) => () => {
@@ -661,6 +728,7 @@ const setToolbarTitle = ({ state, t }) => () => {
661
728
  const computeZIndex = ({ constants, props }) => () => props.zIndex === constants.EDITOR_FULLSCREEN_OPTIONS || props.zIndex < 1 ? PopupManager.nextZIndex() : props.zIndex;
662
729
  export {
663
730
  addFullscreenchange,
731
+ alignHandler,
664
732
  beforeUnmount,
665
733
  checkTableISEndElement,
666
734
  computePreviewOptions,
@@ -36,7 +36,8 @@ import {
36
36
  handleCompositionstart,
37
37
  handleCompositionend,
38
38
  removeHandleComposition,
39
- checkTableISEndElement
39
+ checkTableISEndElement,
40
+ alignHandler
40
41
  } from "./index";
41
42
  import { defaultOption, iconOption, iconOptionMobileFirst, simpleToolbar } from "./options";
42
43
  const api = ["state", "init", "initContent", "selectionChange", "textChange", "doPreview", "handleDblclick"];
@@ -101,6 +102,7 @@ const initApi = ({ api: api2, state, service, emit, props, nextTick, FluentEdito
101
102
  undoHandler: undoHandler({ state }),
102
103
  redoHandler: redoHandler({ state }),
103
104
  lineheightHandler: lineheightHandler({ state, FluentEditor }),
105
+ alignHandler: alignHandler({ state, FluentEditor }),
104
106
  inputFileHandler: inputFileHandler({ state, UploaderDfls }),
105
107
  insertFileToEditor: insertFileToEditor({ state, FluentEditor, Delta }),
106
108
  insertImageToEditor: insertImageToEditor({ state, FluentEditor, Delta }),
@@ -268,7 +268,7 @@ const getFilteredRule = (api) => (trigger) => {
268
268
  }).map((rule) => merge({}, rule));
269
269
  };
270
270
  const onFieldBlur = (api) => () => {
271
- api.validate("blur");
271
+ api.validateOrigin("blur");
272
272
  };
273
273
  const onFieldChange = ({ api, state }) => () => {
274
274
  if (state.validateDisabled) {
package/form-item/vue.js CHANGED
@@ -32,9 +32,11 @@ import {
32
32
  handleMouseenter,
33
33
  handleMouseleave
34
34
  } from "./index";
35
+ import { nanoid } from "@opentiny/utils";
35
36
  const api = [
36
37
  "state",
37
38
  "validate",
39
+ "validateOrigin",
38
40
  "clearValidate",
39
41
  "resetField",
40
42
  "getRules",
@@ -58,6 +60,9 @@ const initState = ({
58
60
  inject,
59
61
  props
60
62
  }) => {
63
+ const uniqueId = nanoid.api.nanoid(8);
64
+ const errorId = `tiny-form-item-error-${uniqueId}`;
65
+ const labelId = `tiny-form-item-label-${uniqueId}`;
61
66
  const state = reactive({
62
67
  mode,
63
68
  validateState: "",
@@ -77,6 +82,9 @@ const initState = ({
77
82
  showTooltip: false,
78
83
  typeName: "",
79
84
  formInstance: inject("form"),
85
+ // 无障碍支持:为错误信息和标签生成唯一 ID
86
+ errorId,
87
+ labelId,
80
88
  labelFor: computed(() => props.for || props.prop || ""),
81
89
  labelStyle: computed(() => api2.computedLabelStyle()),
82
90
  valueStyle: computed(() => api2.computedValueStyle()),
@@ -142,6 +150,7 @@ const initState = ({
142
150
  return state;
143
151
  };
144
152
  const initApi = ({ api: api2, state, dispatch, broadcast, props, constants, vm, t, nextTick, slots }) => {
153
+ const validateOriginFunc = validate({ api: api2, props, state, t });
145
154
  Object.assign(api2, {
146
155
  state,
147
156
  dispatch,
@@ -170,7 +179,8 @@ const initApi = ({ api: api2, state, dispatch, broadcast, props, constants, vm,
170
179
  onFieldBlur: onFieldBlur(api2),
171
180
  onFieldChange: onFieldChange({ api: api2, state }),
172
181
  addValidateEvents: addValidateEvents({ api: api2, vm, props, state }),
173
- validate: wrapValidate({ validateFunc: validate({ api: api2, props, state, t }), props }),
182
+ validateOrigin: validateOriginFunc,
183
+ validate: wrapValidate({ validateFunc: validateOriginFunc, props }),
174
184
  getDisplayedValue: getDisplayedValue({ state }),
175
185
  clearDisplayedValue: clearDisplayedValue({ state }),
176
186
  handleLabelMouseenter: handleLabelMouseenter({ props, state, slots }),
@@ -31,7 +31,7 @@ const syncGridSelection = ({ props, vm, state, nextTick }) => () => {
31
31
  const fullData = (tableData == null ? void 0 : tableData.fullData) || [];
32
32
  if (props.multiple) {
33
33
  if (Array.isArray(state.modelValue) && state.modelValue.length > 0) {
34
- const rowsToSelect = fullData.filter((row) => state.modelValue.indexOf(row[props.valueField]) !== -1);
34
+ const rowsToSelect = fullData.filter((row) => state.modelValue.includes(row[props.valueField]));
35
35
  vm.$refs.gridRef.clearSelection();
36
36
  if (rowsToSelect.length > 0) {
37
37
  vm.$refs.gridRef.setSelection(rowsToSelect, true);
@@ -93,7 +93,7 @@ const filter = ({ props, state, vm }) => async (value) => {
93
93
  if (multiple) {
94
94
  const selectedIds = Array.isArray(state.selected) ? state.selected.map((sel) => sel[valueField]) : [];
95
95
  vm.$refs.gridRef.clearSelection();
96
- const selectedRows = data.filter((row) => selectedIds.indexOf(row[valueField]) !== -1);
96
+ const selectedRows = data.filter((row) => selectedIds.includes(row[valueField]));
97
97
  if (selectedRows.length > 0) {
98
98
  vm.$refs.gridRef.setSelection(selectedRows, true);
99
99
  }
@@ -441,7 +441,7 @@ const selectChange = ({ props, vm, emit, state, nextTick }) => ({ $table, select
441
441
  try {
442
442
  const tableData = vm.$refs.gridRef.getTableData();
443
443
  const fullData = (tableData == null ? void 0 : tableData.fullData) || [];
444
- const rowsToSelect = fullData.filter((row2) => currentValue.indexOf(row2[valueField]) !== -1);
444
+ const rowsToSelect = fullData.filter((row2) => currentValue.includes(row2[valueField]));
445
445
  vm.$refs.gridRef.clearSelection();
446
446
  if (rowsToSelect.length > 0) {
447
447
  vm.$refs.gridRef.setSelection(rowsToSelect, true);
package/guide/index.js CHANGED
@@ -103,7 +103,7 @@ const itemStep = (item, state, deepCopy, index, Shepherd) => {
103
103
  hightBox: item.hightBox || null,
104
104
  buttons: deepCopy[index].button,
105
105
  cancelIcon: {
106
- enabled: true
106
+ enabled: state.showClose
107
107
  },
108
108
  id: item.id,
109
109
  scrollTo: true,
@@ -122,16 +122,22 @@ const itemStep = (item, state, deepCopy, index, Shepherd) => {
122
122
  const currentStepElement = currentStep && currentStep.getElement();
123
123
  const footer = currentStepElement && currentStepElement.querySelector(".shepherd-footer");
124
124
  const cancelIcon = currentStepElement && currentStepElement.querySelector(".shepherd-header .shepherd-cancel-icon span");
125
- const cloesIcon = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
126
- <desc fill="none">
127
- Created with Pixso.
128
- </desc>
129
- <defs fill="none" />
130
- <g>
131
- <path id="path" d="M12.49 3.3C12.66 3.47 12.66 3.74 12.54 3.92L8.58 7.89L12.49 11.77C12.7 11.96 12.72 12.25 12.54 12.48C12.37 12.67 12.05 12.72 11.83 12.54L7.88 8.58L4 12.49C3.82 12.66 3.5 12.67 3.32 12.5C3.13 12.33 3.08 12.05 3.24 11.83L7.17 7.89L3.29 4C3.12 3.79 3.13 3.48 3.33 3.29C3.5 3.15 3.75 3.13 3.91 3.24L7.88 7.17L11.78 3.3C11.96 3.08 12.29 3.08 12.49 3.3Z" fill-opacity="1.000000" fill-rule="evenodd"/>
132
- </g>
133
- </svg>`;
134
- cancelIcon.innerHTML = cloesIcon;
125
+ if (cancelIcon) {
126
+ if (state.showClose) {
127
+ const cloesIcon = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
128
+ <desc fill="none">
129
+ Created with Pixso.
130
+ </desc>
131
+ <defs fill="none" />
132
+ <g>
133
+ <path id="path" d="M12.49 3.3C12.66 3.47 12.66 3.74 12.54 3.92L8.58 7.89L12.49 11.77C12.7 11.96 12.72 12.25 12.54 12.48C12.37 12.67 12.05 12.72 11.83 12.54L7.88 8.58L4 12.49C3.82 12.66 3.5 12.67 3.32 12.5C3.13 12.33 3.08 12.05 3.24 11.83L7.17 7.89L3.29 4C3.12 3.79 3.13 3.48 3.33 3.29C3.5 3.15 3.75 3.13 3.91 3.24L7.88 7.17L11.78 3.3C11.96 3.08 12.29 3.08 12.49 3.3Z" fill-opacity="1.000000" fill-rule="evenodd"/>
134
+ </g>
135
+ </svg>`;
136
+ cancelIcon.innerHTML = cloesIcon;
137
+ } else {
138
+ cancelIcon.parentElement.style.display = "none";
139
+ }
140
+ }
135
141
  const progress = document.createElement("span");
136
142
  progress.classList.add("progress-style");
137
143
  progress.innerText = `${Shepherd.activeTour && Shepherd.activeTour.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour && Shepherd.activeTour.steps.length}`;
package/guide/vue.js CHANGED
@@ -17,7 +17,8 @@ const renderless = (props, { reactive, onMounted, onBeforeUnmount, watch }, { de
17
17
  modalOverlayOpeningPadding: props.modalOverlayOpeningPadding,
18
18
  modalOverlayOpeningRadius: props.modalOverlayOpeningRadius,
19
19
  arrow: props.arrow,
20
- lightClass: props.lightClass
20
+ lightClass: props.lightClass,
21
+ showClose: props.showClose
21
22
  });
22
23
  let baseApi = {
23
24
  state,
package/modal/index.js CHANGED
@@ -87,12 +87,12 @@ const mouseEnterEvent = (state) => () => {
87
87
  };
88
88
  const mouseLeaveEvent = ({ api, props, state }) => () => {
89
89
  api.addMsgQueue();
90
- state.timer = window.setTimeout(
91
- () => {
90
+ const duration = parseFloat(props.duration);
91
+ if (duration > 0) {
92
+ state.timer = window.setTimeout(() => {
92
93
  api.close("close");
93
- },
94
- parseFloat(props.duration)
95
- );
94
+ }, duration);
95
+ }
96
96
  };
97
97
  const updateZindex = ({ state, props }) => () => {
98
98
  state.modalZindex = props.zIndex || PopupManager.nextZIndex();
@@ -157,12 +157,12 @@ const open = ({
157
157
  }, 10);
158
158
  if (state.isMsg) {
159
159
  api.addMsgQueue();
160
- state.timer = window.setTimeout(
161
- () => {
160
+ const duration = parseFloat(props.duration);
161
+ if (duration > 0) {
162
+ state.timer = window.setTimeout(() => {
162
163
  api.close(params.type);
163
- },
164
- parseFloat(props.duration)
165
- );
164
+ }, duration);
165
+ }
166
166
  } else {
167
167
  nextTick(() => {
168
168
  if (!isMobileFirstMode) {
@@ -233,7 +233,7 @@ const close = ({ emit, parent, props, state }) => (type) => {
233
233
  emit("update:modelValue", false);
234
234
  emit("hide", params);
235
235
  }
236
- }, 200);
236
+ }, 400);
237
237
  }
238
238
  };
239
239
  const handleGlobalKeydownEvent = (api) => (event) => {
package/modal/vue.js CHANGED
@@ -33,6 +33,7 @@ import {
33
33
  hideScrollbar,
34
34
  watchVisible
35
35
  } from "./index";
36
+ import { nanoid } from "@opentiny/utils";
36
37
  const api = [
37
38
  "state",
38
39
  "dragEvent",
@@ -59,6 +60,8 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
59
60
  const api2 = {};
60
61
  const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode);
61
62
  const state = reactive({
63
+ titleId: "tiny-modal-title-" + nanoid.api.nanoid(8),
64
+ contentId: "tiny-modal-content-" + nanoid.api.nanoid(8),
62
65
  emitter: emitter(),
63
66
  visible: false,
64
67
  contentVisible: false,
package/notify/vue.js CHANGED
@@ -11,6 +11,7 @@ import {
11
11
  getPositionSide,
12
12
  getZindex
13
13
  } from "./index";
14
+ import { nanoid } from "@opentiny/utils";
14
15
  const api = [
15
16
  "state",
16
17
  "clearTimer",
@@ -37,7 +38,9 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
37
38
  dangerouslyUseHTMLString: false,
38
39
  positionStyle: computed(() => api2.getOffsetStyle(state)),
39
40
  verticalProperty: computed(() => api2.getPositionSide(state)),
40
- customClass: computed(() => props.customClass)
41
+ customClass: computed(() => props.customClass),
42
+ titleId: `tiny-notify-title-${nanoid.api.nanoid(8)}`,
43
+ contentId: `tiny-notify-content-${nanoid.api.nanoid(8)}`
41
44
  });
42
45
  Object.assign(api2, {
43
46
  state,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opentiny/vue-renderless",
3
- "version": "3.28.2",
3
+ "version": "3.29.0",
4
4
  "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
5
5
  "author": "OpenTiny Team",
6
6
  "license": "MIT",
@@ -25,8 +25,8 @@
25
25
  ],
26
26
  "sideEffects": false,
27
27
  "dependencies": {
28
- "@opentiny/utils": "~3.28.0",
29
- "@opentiny/vue-hooks": "~3.28.0",
28
+ "@opentiny/utils": "~3.29.0",
29
+ "@opentiny/vue-hooks": "~3.29.0",
30
30
  "color": "4.2.3"
31
31
  },
32
32
  "devDependencies": {
package/picker/vue.js CHANGED
@@ -59,7 +59,7 @@ import {
59
59
  formatInputValue
60
60
  } from "./index";
61
61
  import { dateMobileToggle, timeMobileToggle, dateToTimeArray, timeArrayToDate, timeMobileConfirm } from "./mb";
62
- import { DATEPICKER } from "@opentiny/utils";
62
+ import { DATEPICKER, nanoid } from "@opentiny/utils";
63
63
  const api = [
64
64
  "state",
65
65
  "btnClick",
@@ -154,7 +154,8 @@ const initState = ({ api: api2, reactive, vm, computed, props, utils, parent, br
154
154
  innerWidth: 0,
155
155
  breakLine: computed(
156
156
  () => (state.innerWidth < 230 && state.type === "daterange" || state.innerWidth < 335 && state.type === "datetimerange") && state.displayValue && state.displayValue[1]
157
- )
157
+ ),
158
+ ariaPanelId: "panel-" + nanoid.api.nanoid(8)
158
159
  });
159
160
  return state;
160
161
  };
package/qr-code/vue.js CHANGED
@@ -21,7 +21,9 @@ const renderless = (props, { reactive, watch, onMounted }, { vm, emit }, { QRCod
21
21
  () => {
22
22
  api2.draw();
23
23
  api2.change();
24
- }
24
+ },
25
+ { deep: true }
26
+ // 添加深度监听,防止响应式失效
25
27
  );
26
28
  return api2;
27
29
  };
package/rate/index.js CHANGED
@@ -52,7 +52,9 @@ const selectValue = ({ emit, props, state }) => (value) => {
52
52
  if (props.disabled) {
53
53
  return;
54
54
  }
55
- if (props.allowHalf && state.pointerAtLeftHalf) {
55
+ if (props.clearable && props.modelValue === value) {
56
+ value = 0;
57
+ } else if (props.allowHalf && state.pointerAtLeftHalf) {
56
58
  value = state.currentValue;
57
59
  }
58
60
  emit("update:modelValue", value);
package/search/vue.js CHANGED
@@ -17,6 +17,9 @@ import {
17
17
  searchEnterKey,
18
18
  emitInput
19
19
  } from "./index";
20
+ const generateUniqueId = () => {
21
+ return `search-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
22
+ };
20
23
  const api = [
21
24
  "state",
22
25
  "handleChange",
@@ -68,7 +71,9 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, toR
68
71
  }, formatSearchTypes2.state), {
69
72
  showClear: computed(() => props.clearable && (state.focus || state.hovering) && state.currentValue),
70
73
  formItemSize: computed(() => (parent.formItem || {}).formItemSize),
71
- searchSize: computed(() => props.size || state.formItemSize)
74
+ searchSize: computed(() => props.size || state.formItemSize),
75
+ instanceId: generateUniqueId()
76
+ // 生成唯一 ID,用于避免多个组件实例时 id 重复
72
77
  }));
73
78
  const api2 = __spreadValues({
74
79
  state,
package/select/index.js CHANGED
@@ -1498,11 +1498,10 @@ const computedCurrentSizeMap = ({ state, designConfig }) => () => {
1498
1498
  const sizeMap = ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.sizeMap) || defaultSizeMap;
1499
1499
  return sizeMap[state.selectSize || "default"];
1500
1500
  };
1501
- const mounted = ({ api, parent, state, props, vm, designConfig }) => () => {
1501
+ const mounted = ({ api, parent, state, props, vm, designConfig, nextTick }) => () => {
1502
1502
  state.defaultCheckedKeys = props.multiple ? state.gridCheckedData : props.treeOp.defaultCheckedKeys || [];
1503
1503
  const parentEl = parent.$el;
1504
1504
  const inputEl = parentEl.querySelector('input[data-tag="tiny-input-inner"]');
1505
- const inputClientRect = inputEl && inputEl.getBoundingClientRect() || {};
1506
1505
  if (inputEl === document.activeElement) {
1507
1506
  document.activeElement.blur();
1508
1507
  }
@@ -1514,10 +1513,14 @@ const mounted = ({ api, parent, state, props, vm, designConfig }) => () => {
1514
1513
  if (vm.$refs.tags) {
1515
1514
  addResizeListener(vm.$refs.tags, api.resetInputHeight);
1516
1515
  }
1516
+ nextTick(() => {
1517
+ if (inputEl) {
1518
+ state.inputWidth = inputEl.offsetWidth || 0;
1519
+ }
1520
+ });
1517
1521
  if (props.remote && props.multiple) {
1518
1522
  api.resetInputHeight();
1519
1523
  }
1520
- state.inputWidth = inputClientRect.width;
1521
1524
  api.initQuery({ init: true }).then(() => {
1522
1525
  api.setSelected(true);
1523
1526
  if (props.modelValue && props.initLabel) {
package/select/vue.js CHANGED
@@ -116,10 +116,10 @@ import {
116
116
  computedCurrentSizeMap,
117
117
  watchOptionsWhenAutoSelect
118
118
  } from "./index";
119
- import { debounce, nanoid } from "@opentiny/utils";
119
+ import { debounce } from "@opentiny/utils";
120
120
  import { isNumber } from "@opentiny/utils";
121
121
  import { useUserAgent } from "@opentiny/vue-hooks";
122
- import { isServer } from "@opentiny/utils";
122
+ import { isServer, nanoid } from "@opentiny/utils";
123
123
  const api = [
124
124
  "state",
125
125
  "nodeCollapse",
@@ -288,7 +288,8 @@ const initState = ({
288
288
  currentSizeMap: computed(() => api2.computedCurrentSizeMap()),
289
289
  rootAutoTipConfig: computed(() => __spreadValues({
290
290
  content: state.displayOnlyContent,
291
- always: !!state.displayOnlyContent
291
+ always: !!state.displayOnlyContent,
292
+ popperClass: "tiny-select__popper-maxh-50"
292
293
  }, props.tooltipConfig)),
293
294
  ariaListId: "tiny-select-" + nanoid.api.nanoid(8)
294
295
  }));
@@ -506,7 +507,7 @@ const addApi = ({
506
507
  debouncRquest: debouncRquest({ api: api2, state, props }),
507
508
  defaultOnQueryChange: defaultOnQueryChange({ props, state, constants, api: api2, nextTick, vm }),
508
509
  queryChange: queryChange({ props, state, constants, api: api2, nextTick, vm }),
509
- mounted: mounted({ api: api2, parent, state, props, vm, designConfig }),
510
+ mounted: mounted({ api: api2, parent, state, props, vm, designConfig, nextTick }),
510
511
  unMount: unMount({ api: api2, parent, vm, state }),
511
512
  watchOptimizeOpts: watchOptimizeOpts({ props, state }),
512
513
  handleDropdownClick: handleDropdownClick({ props, vm, state, emit }),