@uzum-tech/ui 1.5.2 → 1.5.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.
Files changed (200) hide show
  1. package/README.md +0 -1
  2. package/dist/index.js +1147 -628
  3. package/dist/index.prod.js +3 -3
  4. package/es/_internal/checkbox/src/use-checkbox.js +3 -3
  5. package/es/_internal/radio/src/use-radio.js +3 -3
  6. package/es/_mixins/use-form-item.d.ts +4 -4
  7. package/es/_mixins/use-form-item.js +4 -4
  8. package/es/_styles/common/dark.js +1 -1
  9. package/es/_styles/common/light.d.ts +3 -0
  10. package/es/_styles/common/light.js +1 -1
  11. package/es/_utils/composable/composables.d.ts +11 -0
  12. package/es/_utils/composable/composables.js +40 -0
  13. package/es/_utils/index.d.ts +1 -1
  14. package/es/_utils/index.js +1 -1
  15. package/es/_utils/uzum/index.d.ts +1 -0
  16. package/es/_utils/uzum/index.js +1 -0
  17. package/es/_utils/uzum/value.d.ts +1 -0
  18. package/es/_utils/uzum/value.js +9 -0
  19. package/es/_utils/vue/resolve-slot.d.ts +1 -1
  20. package/es/alert/styles/light.js +6 -6
  21. package/es/auto-complete/src/AutoComplete.js +10 -10
  22. package/es/avatar/src/Avatar.d.ts +6 -0
  23. package/es/avatar/src/Avatar.js +9 -3
  24. package/es/card-list/src/CardList.js +1 -1
  25. package/es/card-list/src/CardListItem.d.ts +13 -0
  26. package/es/card-list/src/CardListItem.js +11 -4
  27. package/es/card-list/src/interface.d.ts +1 -0
  28. package/es/card-list/src/styles/index.cssr.js +6 -6
  29. package/es/card-list/styles/light.js +2 -2
  30. package/es/cascader/src/Cascader.js +7 -7
  31. package/es/checkbox/src/CheckboxGroup.js +9 -9
  32. package/es/collapse/src/Collapse.d.ts +47 -14
  33. package/es/collapse/src/Collapse.js +6 -3
  34. package/es/collapse/src/CollapseItem.js +3 -2
  35. package/es/collapse/src/styles/index.cssr.js +27 -7
  36. package/es/collapse/styles/light.d.ts +4 -1
  37. package/es/collapse/styles/light.js +6 -3
  38. package/es/color-picker/src/ColorPicker.js +6 -6
  39. package/es/components.d.ts +1 -0
  40. package/es/components.js +1 -0
  41. package/es/config-provider/src/internal-interface.d.ts +2 -0
  42. package/es/data-table/src/DataTable.d.ts +7 -0
  43. package/es/data-table/src/DataTable.js +21 -10
  44. package/es/data-table/src/TableParts/Body.d.ts +1 -0
  45. package/es/data-table/src/TableParts/Body.js +8 -6
  46. package/es/data-table/src/TableParts/Cell.js +85 -23
  47. package/es/data-table/src/interface.d.ts +14 -6
  48. package/es/data-table/src/interface.js +1 -1
  49. package/es/data-table/src/styles/index.cssr.js +5 -3
  50. package/es/data-table/src/use-mask.d.ts +3 -6
  51. package/es/data-table/src/utils.d.ts +2 -1
  52. package/es/data-table/src/utils.js +13 -0
  53. package/es/date-picker/src/DatePicker.js +7 -7
  54. package/es/dialog/src/DialogProvider.d.ts +6 -0
  55. package/es/dynamic-tags/src/DynamicTags.d.ts +10 -0
  56. package/es/dynamic-tags/src/DynamicTags.js +3 -3
  57. package/es/dynamic-tags/styles/light.d.ts +1 -0
  58. package/es/input/src/Input.js +8 -8
  59. package/es/input-number/src/InputNumber.js +7 -7
  60. package/es/input-otp/index.d.ts +3 -0
  61. package/es/input-otp/index.js +1 -0
  62. package/es/input-otp/src/InputOtp.d.ts +871 -0
  63. package/es/input-otp/src/InputOtp.js +250 -0
  64. package/es/input-otp/src/public-types.d.ts +25 -0
  65. package/es/input-otp/src/public-types.js +1 -0
  66. package/es/input-otp/src/styles/index.cssr.d.ts +2 -0
  67. package/es/input-otp/src/styles/index.cssr.js +20 -0
  68. package/es/input-otp/src/styles/input-otp-rtl.cssr.d.ts +2 -0
  69. package/es/input-otp/src/styles/input-otp-rtl.cssr.js +5 -0
  70. package/es/input-otp/styles/dark.d.ts +3 -0
  71. package/es/input-otp/styles/dark.js +12 -0
  72. package/es/input-otp/styles/index.d.ts +4 -0
  73. package/es/input-otp/styles/index.js +3 -0
  74. package/es/input-otp/styles/light.d.ts +83 -0
  75. package/es/input-otp/styles/light.js +22 -0
  76. package/es/input-otp/styles/rtl.d.ts +2 -0
  77. package/es/input-otp/styles/rtl.js +5 -0
  78. package/es/legacy-transfer/src/Transfer.js +3 -3
  79. package/es/list/src/ListItem.js +8 -4
  80. package/es/mention/src/Mention.js +7 -7
  81. package/es/radio/src/RadioGroup.js +5 -5
  82. package/es/rate/src/Rate.js +3 -3
  83. package/es/select/src/Select.js +7 -7
  84. package/es/slider/src/Slider.js +3 -3
  85. package/es/styles.d.ts +1 -0
  86. package/es/styles.js +1 -0
  87. package/es/switch/src/Switch.js +7 -7
  88. package/es/tag/src/Tag.d.ts +27 -13
  89. package/es/tag/src/Tag.js +7 -2
  90. package/es/tag/src/styles/index.cssr.js +13 -3
  91. package/es/tag/styles/light.d.ts +1 -0
  92. package/es/tag/styles/light.js +7 -6
  93. package/es/theme-editor/src/ThemeEditor.d.ts +3 -0
  94. package/es/themes/dark.js +2 -0
  95. package/es/themes/light.js +2 -0
  96. package/es/time-picker/src/TimePicker.js +7 -7
  97. package/es/transfer/src/Transfer.js +3 -3
  98. package/es/tree-select/src/TreeSelect.js +5 -5
  99. package/es/version.d.ts +1 -1
  100. package/es/version.js +1 -1
  101. package/lib/_internal/checkbox/src/use-checkbox.js +3 -3
  102. package/lib/_internal/radio/src/use-radio.js +3 -3
  103. package/lib/_mixins/use-form-item.d.ts +4 -4
  104. package/lib/_mixins/use-form-item.js +4 -4
  105. package/lib/_styles/common/dark.js +1 -1
  106. package/lib/_styles/common/light.d.ts +3 -0
  107. package/lib/_styles/common/light.js +1 -1
  108. package/lib/_utils/composable/composables.d.ts +11 -0
  109. package/lib/_utils/composable/composables.js +47 -0
  110. package/lib/_utils/index.d.ts +1 -1
  111. package/lib/_utils/index.js +2 -1
  112. package/lib/_utils/uzum/index.d.ts +1 -0
  113. package/lib/_utils/uzum/index.js +3 -1
  114. package/lib/_utils/uzum/value.d.ts +1 -0
  115. package/lib/_utils/uzum/value.js +12 -0
  116. package/lib/_utils/vue/resolve-slot.d.ts +1 -1
  117. package/lib/alert/styles/light.js +6 -6
  118. package/lib/auto-complete/src/AutoComplete.js +10 -10
  119. package/lib/avatar/src/Avatar.d.ts +6 -0
  120. package/lib/avatar/src/Avatar.js +9 -3
  121. package/lib/card-list/src/CardList.js +1 -1
  122. package/lib/card-list/src/CardListItem.d.ts +13 -0
  123. package/lib/card-list/src/CardListItem.js +11 -4
  124. package/lib/card-list/src/interface.d.ts +1 -0
  125. package/lib/card-list/src/styles/index.cssr.js +5 -5
  126. package/lib/card-list/styles/light.js +2 -2
  127. package/lib/cascader/src/Cascader.js +7 -7
  128. package/lib/checkbox/src/CheckboxGroup.js +9 -9
  129. package/lib/collapse/src/Collapse.d.ts +47 -14
  130. package/lib/collapse/src/Collapse.js +6 -3
  131. package/lib/collapse/src/CollapseItem.js +3 -2
  132. package/lib/collapse/src/styles/index.cssr.js +27 -7
  133. package/lib/collapse/styles/light.d.ts +4 -1
  134. package/lib/collapse/styles/light.js +6 -3
  135. package/lib/color-picker/src/ColorPicker.js +6 -6
  136. package/lib/components.d.ts +1 -0
  137. package/lib/components.js +1 -0
  138. package/lib/config-provider/src/internal-interface.d.ts +2 -0
  139. package/lib/data-table/src/DataTable.d.ts +7 -0
  140. package/lib/data-table/src/DataTable.js +21 -10
  141. package/lib/data-table/src/TableParts/Body.d.ts +1 -0
  142. package/lib/data-table/src/TableParts/Body.js +8 -6
  143. package/lib/data-table/src/TableParts/Cell.js +84 -22
  144. package/lib/data-table/src/interface.d.ts +14 -6
  145. package/lib/data-table/src/interface.js +1 -1
  146. package/lib/data-table/src/styles/index.cssr.js +5 -3
  147. package/lib/data-table/src/use-mask.d.ts +3 -6
  148. package/lib/data-table/src/utils.d.ts +2 -1
  149. package/lib/data-table/src/utils.js +14 -1
  150. package/lib/date-picker/src/DatePicker.js +7 -7
  151. package/lib/dialog/src/DialogProvider.d.ts +6 -0
  152. package/lib/dynamic-tags/src/DynamicTags.d.ts +10 -0
  153. package/lib/dynamic-tags/src/DynamicTags.js +3 -3
  154. package/lib/dynamic-tags/styles/light.d.ts +1 -0
  155. package/lib/input/src/Input.js +8 -8
  156. package/lib/input-number/src/InputNumber.js +7 -7
  157. package/lib/input-otp/index.d.ts +3 -0
  158. package/lib/input-otp/index.js +9 -0
  159. package/lib/input-otp/src/InputOtp.d.ts +871 -0
  160. package/lib/input-otp/src/InputOtp.js +256 -0
  161. package/lib/input-otp/src/public-types.d.ts +25 -0
  162. package/lib/input-otp/src/public-types.js +2 -0
  163. package/lib/input-otp/src/styles/index.cssr.d.ts +2 -0
  164. package/lib/input-otp/src/styles/index.cssr.js +25 -0
  165. package/lib/input-otp/src/styles/input-otp-rtl.cssr.d.ts +2 -0
  166. package/lib/input-otp/src/styles/input-otp-rtl.cssr.js +10 -0
  167. package/lib/input-otp/styles/dark.d.ts +3 -0
  168. package/lib/input-otp/styles/dark.js +14 -0
  169. package/lib/input-otp/styles/index.d.ts +4 -0
  170. package/lib/input-otp/styles/index.js +12 -0
  171. package/lib/input-otp/styles/light.d.ts +83 -0
  172. package/lib/input-otp/styles/light.js +25 -0
  173. package/lib/input-otp/styles/rtl.d.ts +2 -0
  174. package/lib/input-otp/styles/rtl.js +11 -0
  175. package/lib/legacy-transfer/src/Transfer.js +3 -3
  176. package/lib/list/src/ListItem.js +8 -4
  177. package/lib/mention/src/Mention.js +7 -7
  178. package/lib/radio/src/RadioGroup.js +5 -5
  179. package/lib/rate/src/Rate.js +3 -3
  180. package/lib/select/src/Select.js +7 -7
  181. package/lib/slider/src/Slider.js +3 -3
  182. package/lib/styles.d.ts +1 -0
  183. package/lib/styles.js +106 -103
  184. package/lib/switch/src/Switch.js +7 -7
  185. package/lib/tag/src/Tag.d.ts +27 -13
  186. package/lib/tag/src/Tag.js +7 -2
  187. package/lib/tag/src/styles/index.cssr.js +13 -3
  188. package/lib/tag/styles/light.d.ts +1 -0
  189. package/lib/tag/styles/light.js +7 -6
  190. package/lib/theme-editor/src/ThemeEditor.d.ts +3 -0
  191. package/lib/themes/dark.js +2 -0
  192. package/lib/themes/light.js +2 -0
  193. package/lib/time-picker/src/TimePicker.js +7 -7
  194. package/lib/transfer/src/Transfer.js +3 -3
  195. package/lib/tree-select/src/TreeSelect.js +5 -5
  196. package/lib/version.d.ts +1 -1
  197. package/lib/version.js +1 -1
  198. package/package.json +1 -1
  199. package/volar.d.ts +1 -0
  200. package/web-types.json +131 -4
@@ -0,0 +1,250 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import { pxfy, repeat } from 'seemly';
13
+ import { useMergedState } from 'vooks';
14
+ import { computed, defineComponent, h, ref, toRef } from 'vue';
15
+ import { useConfig, useFormItem, useRtl, useTheme, useThemeClass } from '../../_mixins';
16
+ import { call, createKey, isArrayShallowEqual, resolveSlotWithProps } from '../../_utils';
17
+ import inputOtpLight from '../styles/light';
18
+ import style from './styles/index.cssr';
19
+ import { UInput } from '../../input';
20
+ export const inputOtpProps = Object.assign(Object.assign({}, useTheme.props), { defaultValue: { type: Array, default: [] }, value: Array, length: {
21
+ type: Number,
22
+ default: 6
23
+ }, block: Boolean, size: String, disabled: Boolean, mask: Boolean, readonly: Boolean, status: String, gap: [String, Number], placeholder: { type: String, default: '' }, allowInput: Function, onBlur: [Function, Array], onFocus: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onFinish: [Function, Array] });
24
+ export default defineComponent({
25
+ name: 'InputOtp',
26
+ props: inputOtpProps,
27
+ slots: Object,
28
+ setup(props) {
29
+ const { mergedClsPrefixRef, mergedRtlRef, inlineThemeDisabled } = useConfig(props);
30
+ const themeRef = useTheme('InputOtp', '-input-otp', style, inputOtpLight, props, mergedClsPrefixRef);
31
+ const rtlEnabledRef = useRtl('InputOtp', mergedRtlRef, mergedClsPrefixRef);
32
+ // form-item
33
+ const formItem = useFormItem(props);
34
+ const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
35
+ const cssVarsRef = computed(() => {
36
+ const { value: size } = mergedSizeRef;
37
+ const { gap: propGap } = props;
38
+ const { self: { [createKey('inputWidth', size)]: inputWidth, [createKey('gap', size)]: gap } } = themeRef.value;
39
+ return {
40
+ '--u-gap': propGap === undefined
41
+ ? gap
42
+ : typeof propGap === 'number'
43
+ ? pxfy(propGap)
44
+ : propGap,
45
+ '--u-input-width': inputWidth
46
+ };
47
+ });
48
+ const themeClassHandle = inlineThemeDisabled
49
+ ? useThemeClass('input-otp', computed(() => {
50
+ const { value: size } = mergedSizeRef;
51
+ return size[0];
52
+ }), cssVarsRef, props)
53
+ : undefined;
54
+ const uncontrolledValueRef = ref(props.defaultValue);
55
+ const controlledValueRef = toRef(props, 'value');
56
+ const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
57
+ const inputRefList = ref([]);
58
+ const inputTypeRef = computed(() => props.mask ? 'password' : 'text');
59
+ const handleFocus = (event, index) => {
60
+ // If it's focused from other input element inside the component, returns
61
+ if (inputRefList === null || inputRefList === void 0 ? void 0 : inputRefList.value.some((inputInst) => inputInst.inputElRef === event.relatedTarget)) {
62
+ return;
63
+ }
64
+ const { onFocus } = props;
65
+ if (onFocus) {
66
+ call(onFocus, event, index);
67
+ }
68
+ const { triggerFormFocus } = formItem;
69
+ triggerFormFocus();
70
+ };
71
+ const handleBlur = (event, index) => {
72
+ // If it's blured to other input element inside the component, returns
73
+ if (inputRefList === null || inputRefList === void 0 ? void 0 : inputRefList.value.some((inputInst) => inputInst.inputElRef === event.relatedTarget)) {
74
+ return;
75
+ }
76
+ const { onBlur } = props;
77
+ const { triggerFormBlur } = formItem;
78
+ if (onBlur) {
79
+ call(onBlur, event, index);
80
+ }
81
+ triggerFormBlur();
82
+ };
83
+ const focusOnChar = (charIndex) => {
84
+ if (charIndex >= props.length) {
85
+ return;
86
+ }
87
+ if (charIndex < 0) {
88
+ return;
89
+ }
90
+ inputRefList === null || inputRefList === void 0 ? void 0 : inputRefList.value[charIndex].focus();
91
+ inputRefList === null || inputRefList === void 0 ? void 0 : inputRefList.value[charIndex].select();
92
+ };
93
+ const focusOnNextChar = (currentIndex) => {
94
+ if (currentIndex >= props.length - 1) {
95
+ return;
96
+ }
97
+ focusOnChar(currentIndex + 1);
98
+ };
99
+ const focusOnPrevChar = (currentIndex) => {
100
+ if (currentIndex <= 0) {
101
+ return;
102
+ }
103
+ focusOnChar(currentIndex - 1);
104
+ };
105
+ const justifyValue = (value) => {
106
+ const justifiedValue = value ? Array.from(value) : [];
107
+ const length = props.length;
108
+ while (justifiedValue.length > length) {
109
+ justifiedValue.pop();
110
+ }
111
+ while (justifiedValue.length < length) {
112
+ justifiedValue.push('');
113
+ }
114
+ return justifiedValue;
115
+ };
116
+ function doUpdateValue(values, meta) {
117
+ const { triggerFormInput, triggerFormChange } = formItem;
118
+ if (isArrayShallowEqual(values, mergedValueRef.value)) {
119
+ triggerFormInput();
120
+ return;
121
+ }
122
+ const { 'onUpdate:value': _onUpdateValue, onUpdateValue, onFinish } = props;
123
+ if (_onUpdateValue) {
124
+ call(_onUpdateValue, values, meta);
125
+ }
126
+ if (onUpdateValue) {
127
+ call(onUpdateValue, values, meta);
128
+ }
129
+ if (onFinish && values.every(Boolean)) {
130
+ call(onFinish, values);
131
+ }
132
+ uncontrolledValueRef.value = values;
133
+ triggerFormInput();
134
+ triggerFormChange();
135
+ }
136
+ const handlePaste = (event, index) => {
137
+ if (props.readonly || mergedDisabledRef.value) {
138
+ return;
139
+ }
140
+ event.preventDefault();
141
+ const { clipboardData } = event;
142
+ const text = clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.getData('text');
143
+ if (!text) {
144
+ return;
145
+ }
146
+ const currentValue = justifyValue(mergedValueRef.value);
147
+ let startIndex = index;
148
+ const allowInput = props.allowInput;
149
+ let pasteApplied = false;
150
+ let appendedText = '';
151
+ for (let i = 0; i < text.length; ++i) {
152
+ if (allowInput && !allowInput(text[i], startIndex, currentValue)) {
153
+ continue;
154
+ }
155
+ pasteApplied = true;
156
+ currentValue[startIndex] = text[i];
157
+ appendedText += text[i];
158
+ startIndex++;
159
+ if (startIndex >= currentValue.length) {
160
+ break;
161
+ }
162
+ }
163
+ if (pasteApplied) {
164
+ focusOnChar(startIndex);
165
+ doUpdateValue(currentValue, {
166
+ diff: appendedText,
167
+ index: startIndex,
168
+ source: 'paste'
169
+ });
170
+ }
171
+ };
172
+ const handleKeydown = (event, index) => {
173
+ if (mergedDisabledRef.value) {
174
+ return;
175
+ }
176
+ const keyCode = event.code || event.key;
177
+ const currentValue = justifyValue(mergedValueRef.value);
178
+ if (keyCode === 'Backspace' && !props.readonly) {
179
+ event.preventDefault();
180
+ currentValue[Math.max(index, 0)] = '';
181
+ doUpdateValue(currentValue, { diff: '', index, source: 'delete' });
182
+ focusOnPrevChar(index);
183
+ }
184
+ else if (keyCode === 'ArrowLeft') {
185
+ event.preventDefault();
186
+ focusOnPrevChar(index);
187
+ }
188
+ else if (keyCode === 'ArrowRight') {
189
+ event.preventDefault();
190
+ focusOnNextChar(index);
191
+ }
192
+ };
193
+ const handleInput = (value, index) => {
194
+ const currentValue = justifyValue(mergedValueRef.value);
195
+ const currentValueAtIndex = currentValue[index];
196
+ const diff = value.replace(currentValueAtIndex, '');
197
+ const char = diff[diff.length - 1] || value[value.length - 1] || '';
198
+ const allowInput = props.allowInput;
199
+ if (allowInput && !allowInput(char, index, currentValue)) {
200
+ return;
201
+ }
202
+ currentValue[index] = char;
203
+ doUpdateValue(currentValue, { diff: char, index, source: 'input' });
204
+ focusOnNextChar(index);
205
+ };
206
+ // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
207
+ const getTemplateEvents = (index) => {
208
+ return {
209
+ onInput: (value) => {
210
+ handleInput(value, index);
211
+ },
212
+ onPaste: (event) => {
213
+ handlePaste(event, index);
214
+ },
215
+ onKeydown: (event) => {
216
+ handleKeydown(event, index);
217
+ },
218
+ onFocus: (event) => {
219
+ handleFocus(event, index);
220
+ },
221
+ onBlur: (event) => {
222
+ handleBlur(event, index);
223
+ }
224
+ };
225
+ };
226
+ const exposedMethods = {
227
+ focusOnChar
228
+ };
229
+ return Object.assign({ mergedTheme: themeRef, perItemValueArray: computed(() => justifyValue(mergedValueRef.value)), mergedClsPrefix: mergedClsPrefixRef, inputRefList, inputType: inputTypeRef, rtlEnabled: rtlEnabledRef, mergedStatus: mergedStatusRef, mergedDisabled: mergedDisabledRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, getTemplateEvents, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
230
+ },
231
+ render() {
232
+ const { mergedTheme, mergedClsPrefix, perItemValueArray, size, placeholder, mergedDisabled, mergedStatus, readonly, inputType, $slots, getTemplateEvents, themeClass, onRender } = this;
233
+ onRender === null || onRender === void 0 ? void 0 : onRender();
234
+ return (h("div", { style: this.cssVars, class: [
235
+ `${mergedClsPrefix}-input-otp`,
236
+ themeClass,
237
+ this.rtlEnabled && `${mergedClsPrefix}-input-otp--rtl`,
238
+ this.block && `${mergedClsPrefix}-input-otp--block`
239
+ ] }, repeat(this.length, undefined).map((_, index) => resolveSlotWithProps($slots.default, Object.assign({ index, value: perItemValueArray[index], type: inputType, size,
240
+ placeholder, disabled: mergedDisabled, readonly, status: mergedStatus, builtinThemeOverrides: {
241
+ paddingTiny: '0',
242
+ paddingSmall: '0',
243
+ paddingMedium: '0',
244
+ paddingLarge: '0'
245
+ }, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, ref: (el) => (this.inputRefList[index] = el) }, getTemplateEvents(index)), (_a) => {
246
+ var { index } = _a, restProps = __rest(_a, ["index"]);
247
+ return [h(UInput, Object.assign({}, restProps, { key: index }))];
248
+ }))));
249
+ }
250
+ });
@@ -0,0 +1,25 @@
1
+ import type { VNode } from 'vue';
2
+ import type { InputInst } from '../../components';
3
+ import type { InputProps } from '../../input/src/Input';
4
+ export type InputOtpAllowInput = (char: string, index: number, currentValue: string[]) => boolean;
5
+ export type InputOtpSize = 'small' | 'medium' | 'large';
6
+ export type InputOtpOnUpdateValue = (value: string[], meta: InputOtpOnUpdateValueMeta) => void;
7
+ export type InputOtpOnFocus = (e: FocusEvent, index: number) => void;
8
+ export type InputOtpOnBlur = (e: FocusEvent, index: number) => void;
9
+ export interface InputOtpSlots {
10
+ default?: InputOtpDefaultSlot;
11
+ }
12
+ export type InputOtpDefaultSlot = (props: InputProps & {
13
+ index: number;
14
+ ref: (inst: InputInst) => void;
15
+ }) => VNode[];
16
+ export type InputOtpOnFinish = (value: string[]) => void;
17
+ export interface InputOtpOnUpdateValueMeta {
18
+ diff: string;
19
+ index: number;
20
+ source: InputOtpOnUpdateValueMetaSource;
21
+ }
22
+ export type InputOtpOnUpdateValueMetaSource = 'paste' | 'input' | 'delete';
23
+ export interface InputOtpInst {
24
+ focusOnChar: (charIndex: number) => void;
25
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,2 @@
1
+ declare const _default: import("css-render").CNode;
2
+ export default _default;
@@ -0,0 +1,20 @@
1
+ import { c, cB, cM, cNotM } from '../../../_utils/cssr';
2
+ // --u-input-width
3
+ // --u-gap
4
+ export default c([cB('input-otp', `
5
+ display: flex;
6
+ align-items: center;
7
+ gap: var(--u-gap);
8
+ `, [cM('block', '', [cB('input', '', [cNotM('autosize', `
9
+ text-align: center;
10
+ min-width: 0;
11
+ `), cM('autosize', `
12
+ text-align: center;
13
+ min-width: 0;
14
+ `)])]), cNotM('block', '', [cB('input', '', [cNotM('autosize', `
15
+ width: var(--u-input-width);
16
+ text-align: center;
17
+ `), cM('autosize', `
18
+ width: var(--u-input-width);
19
+ text-align: center;
20
+ `)])])])]);
@@ -0,0 +1,2 @@
1
+ declare const _default: import("css-render").CNode;
2
+ export default _default;
@@ -0,0 +1,5 @@
1
+ import { cB, cM } from '../../../_utils/cssr';
2
+ // --u-gap
3
+ export default cB('input-otp', [cM('rtl', `
4
+ direction: rtl;
5
+ `)]);
@@ -0,0 +1,3 @@
1
+ import type { InputOtpTheme } from './light';
2
+ declare const inputOtpDark: InputOtpTheme;
3
+ export default inputOtpDark;
@@ -0,0 +1,12 @@
1
+ import { commonDark } from '../../_styles/common';
2
+ import { inputDark } from '../../input/styles';
3
+ import { self } from './light';
4
+ const inputOtpDark = {
5
+ name: 'InputOtp',
6
+ common: commonDark,
7
+ peers: {
8
+ Input: inputDark
9
+ },
10
+ self
11
+ };
12
+ export default inputOtpDark;
@@ -0,0 +1,4 @@
1
+ export { default as inputOtpDark } from './dark';
2
+ export { default as inputOtpLight } from './light';
3
+ export type { InputOtpTheme } from './light';
4
+ export { inputOtpRtl } from './rtl';
@@ -0,0 +1,3 @@
1
+ export { default as inputOtpDark } from './dark';
2
+ export { default as inputOtpLight } from './light';
3
+ export { inputOtpRtl } from './rtl';
@@ -0,0 +1,83 @@
1
+ export declare function self(): {
2
+ inputWidthSmall: string;
3
+ inputWidthMedium: string;
4
+ inputWidthLarge: string;
5
+ gapSmall: string;
6
+ gapMedium: string;
7
+ gapLarge: string;
8
+ };
9
+ declare const inputOtpLight: import("../../_mixins").Theme<"InputOtp", {
10
+ inputWidthSmall: string;
11
+ inputWidthMedium: string;
12
+ inputWidthLarge: string;
13
+ gapSmall: string;
14
+ gapMedium: string;
15
+ gapLarge: string;
16
+ }, {
17
+ Input: import("../../_mixins").Theme<"Input", {
18
+ paddingTiny: string;
19
+ paddingSmall: string;
20
+ paddingMedium: string;
21
+ paddingLarge: string;
22
+ paddingHuge: string;
23
+ clearSize: string;
24
+ countTextColorDisabled: string;
25
+ countTextColor: string;
26
+ heightTiny: string;
27
+ heightSmall: string;
28
+ heightMedium: string;
29
+ heightLarge: string;
30
+ heightHuge: string;
31
+ fontSizeTiny: string;
32
+ fontSizeSmall: string;
33
+ fontSizeMedium: string;
34
+ fontSizeLarge: string;
35
+ fontSizeHuge: string;
36
+ lineHeight: string;
37
+ lineHeightTextarea: string;
38
+ borderRadius: string;
39
+ iconSize: string;
40
+ groupLabelTextColor: string;
41
+ textColor: string;
42
+ textColorDisabled: string;
43
+ textDecorationColor: string;
44
+ caretColor: string;
45
+ placeholderColor: string;
46
+ placeholderColorDisabled: string;
47
+ color: string;
48
+ colorDisabled: string;
49
+ colorFocus: string;
50
+ groupLabelBorder: string;
51
+ border: string;
52
+ borderHover: string;
53
+ borderDisabled: string;
54
+ borderFocus: string;
55
+ boxShadowFocus: string;
56
+ loadingColor: string;
57
+ loadingColorWarning: string;
58
+ borderWarning: string;
59
+ borderHoverWarning: string;
60
+ colorFocusWarning: string;
61
+ borderFocusWarning: string;
62
+ boxShadowFocusWarning: string;
63
+ caretColorWarning: string;
64
+ loadingColorError: string;
65
+ borderError: string;
66
+ borderHoverError: string;
67
+ colorFocusError: string;
68
+ borderFocusError: string;
69
+ boxShadowFocusError: string;
70
+ caretColorError: string;
71
+ clearColor: string;
72
+ clearColorHover: string;
73
+ clearColorPressed: string;
74
+ iconColor: string;
75
+ iconColorDisabled: string;
76
+ iconColorHover: string;
77
+ iconColorPressed: string;
78
+ suffixTextColor: string;
79
+ selectionColor: string;
80
+ }, any>;
81
+ }>;
82
+ export default inputOtpLight;
83
+ export type InputOtpTheme = typeof inputOtpLight;
@@ -0,0 +1,22 @@
1
+ import { createTheme } from '../../_mixins';
2
+ import { commonLight } from '../../_styles/common';
3
+ import { inputLight } from '../../input/styles';
4
+ export function self() {
5
+ return {
6
+ inputWidthSmall: '44px',
7
+ inputWidthMedium: '50px',
8
+ inputWidthLarge: '56px',
9
+ gapSmall: '6px',
10
+ gapMedium: '8px',
11
+ gapLarge: '10px'
12
+ };
13
+ }
14
+ const inputOtpLight = createTheme({
15
+ name: 'InputOtp',
16
+ common: commonLight,
17
+ peers: {
18
+ Input: inputLight
19
+ },
20
+ self
21
+ });
22
+ export default inputOtpLight;
@@ -0,0 +1,2 @@
1
+ import type { RtlItem } from '../../config-provider/src/internal-interface';
2
+ export declare const inputOtpRtl: RtlItem;
@@ -0,0 +1,5 @@
1
+ import rtlStyle from '../src/styles/input-otp-rtl.cssr';
2
+ export const inputOtpRtl = {
3
+ name: 'InputOtp',
4
+ style: rtlStyle
5
+ };
@@ -56,7 +56,7 @@ export default defineComponent({
56
56
  const { uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, avlSrcValueSet: avlSrcValueSetRef, avlTgtValueSet: avlTgtValueSetRef, tgtOpts: tgtOptsRef, srcOpts: srcOptsRef, filteredSrcOpts: filteredSrcOptsRef, filteredTgtOpts: filteredTgtOptsRef, srcCheckedValues: srcCheckedValuesRef, tgtCheckedValues: tgtCheckedValuesRef, srcCheckedStatus: srcCheckedStatusRef, tgtCheckedStatus: tgtCheckedStatusRef, srcPattern: srcPatternRef, tgtPattern: tgtPatternRef, isInputing: isInputingRef, fromButtonDisabled: fromButtonDisabledRef, toButtonDisabled: toButtonDisabledRef, handleInputFocus, handleInputBlur, handleTgtFilterUpdateValue, handleSrcFilterUpdateValue } = useTransferData(props, mergedDisabledRef);
57
57
  function doUpdateValue(value) {
58
58
  const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
59
- const { nTriggerFormInput, nTriggerFormChange } = formItem;
59
+ const { triggerFormInput, triggerFormChange } = formItem;
60
60
  if (onUpdateValue)
61
61
  call(onUpdateValue, value);
62
62
  if (_onUpdateValue)
@@ -64,8 +64,8 @@ export default defineComponent({
64
64
  if (onChange)
65
65
  call(onChange, value);
66
66
  uncontrolledValueRef.value = value;
67
- nTriggerFormInput();
68
- nTriggerFormChange();
67
+ triggerFormInput();
68
+ triggerFormChange();
69
69
  }
70
70
  function handleSrcHeaderCheck(value) {
71
71
  const { value: { checked, indeterminate } } = srcCheckedStatusRef;
@@ -123,7 +123,7 @@ export default defineComponent({
123
123
  if (!Object.values(this.avatar).length)
124
124
  return null;
125
125
  const Avatar = (h(UAvatar, Object.assign({ size: size }, this.avatar, { icon: undefined }), renderIcon(this.avatar.icon)));
126
- return this.avatar.hasBadge ? (h(UBadge, Object.assign({}, this.badge), Avatar)) : (Avatar);
126
+ return this.avatar.hasBadge ? (h(UBadge, Object.assign({}, this.badge), { default: () => Avatar })) : (Avatar);
127
127
  };
128
128
  const prefixSkeletonSizes = {
129
129
  large: 54,
@@ -170,7 +170,9 @@ export default defineComponent({
170
170
  const headerProps = Object.assign(Object.assign(Object.assign({}, defaultHeaderProps), this.header), { skeleton: Object.assign(Object.assign({}, defaultHeaderProps.skeleton), (_c = this.header) === null || _c === void 0 ? void 0 : _c.skeleton) });
171
171
  const descriptionProps = Object.assign(Object.assign(Object.assign({}, defaultDescriptionProps), this.description), { skeleton: Object.assign(Object.assign({}, defaultDescriptionProps.skeleton), (_d = this.description) === null || _d === void 0 ? void 0 : _d.skeleton) });
172
172
  function renderTextNode(content, props, classSuffix) {
173
- return content ? (h(InternalUText, Object.assign({}, props, { text: undefined, align: undefined, skeleton: undefined, class: `${mergedClsPrefix}-list-item__${classSuffix}` }), skeletonOn || (props === null || props === void 0 ? void 0 : props.loading) ? (h(UBaseSkeleton, Object.assign({}, props.skeletonPro, { style: { borderRadius: '6px' } }))) : typeof content === 'string' ? (props.text) : (content()))) : null;
173
+ return content ? (h(InternalUText, Object.assign({}, props, { text: undefined, align: undefined, skeleton: undefined, class: `${mergedClsPrefix}-list-item__${classSuffix}` }), {
174
+ default: () => skeletonOn || (props === null || props === void 0 ? void 0 : props.loading) ? (h(UBaseSkeleton, Object.assign({}, props.skeletonPro, { style: { borderRadius: '6px' } }))) : typeof content === 'string' ? (props.text) : (content())
175
+ })) : null;
174
176
  }
175
177
  const headerNode = renderTextNode(header, headerProps, 'title');
176
178
  const descriptionNode = renderTextNode(description, descriptionProps, 'subtitle');
@@ -187,7 +189,8 @@ export default defineComponent({
187
189
  headerProps.align && `${mergedClsPrefix}-align-${headerProps.align}`,
188
190
  !(headerSide || descriptionSide) &&
189
191
  `${mergedClsPrefix}-list-item__content--full`
190
- ] }, (headerProps === null || headerProps === void 0 ? void 0 : headerProps.position) === 'top' && descriptionProps.position === 'bottom'
192
+ ] }, (headerProps === null || headerProps === void 0 ? void 0 : headerProps.position) === 'top' &&
193
+ descriptionProps.position === 'bottom'
191
194
  ? [headerNode, descriptionNode]
192
195
  : [descriptionNode, headerNode])) : null;
193
196
  const rightNode = hasRight ? (h("div", { class: [
@@ -197,7 +200,8 @@ export default defineComponent({
197
200
  `${mergedClsPrefix}-align-${headerSideProps.align}`,
198
201
  !(header || description) &&
199
202
  `${mergedClsPrefix}-list-item__content--full`
200
- ] }, (headerSideProps === null || headerSideProps === void 0 ? void 0 : headerSideProps.position) === 'top' && descriptionSideProps.position === 'bottom'
203
+ ] }, (headerSideProps === null || headerSideProps === void 0 ? void 0 : headerSideProps.position) === 'top' &&
204
+ descriptionSideProps.position === 'bottom'
201
205
  ? [headerSideNode, descriptionSideNode]
202
206
  : [descriptionSideNode, headerSideNode])) : null;
203
207
  const suffixIcon = !skeletonOn && this.mergedShowIcon ? (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, () => h(ChevronRightIcon, null))) : null;
@@ -113,15 +113,15 @@ export default defineComponent({
113
113
  }
114
114
  function doUpdateValue(value) {
115
115
  const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props;
116
- const { nTriggerFormChange, nTriggerFormInput } = formItem;
116
+ const { triggerFormChange, triggerFormInput } = formItem;
117
117
  if (_onUpdateValue) {
118
118
  call(_onUpdateValue, value);
119
119
  }
120
120
  if (onUpdateValue) {
121
121
  call(onUpdateValue, value);
122
122
  }
123
- nTriggerFormInput();
124
- nTriggerFormChange();
123
+ triggerFormInput();
124
+ triggerFormChange();
125
125
  uncontrolledValueRef.value = value;
126
126
  }
127
127
  function getInputEl() {
@@ -238,8 +238,8 @@ export default defineComponent({
238
238
  function handleInputFocus(e) {
239
239
  const { onFocus } = props;
240
240
  onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
241
- const { nTriggerFormFocus } = formItem;
242
- nTriggerFormFocus();
241
+ const { triggerFormFocus } = formItem;
242
+ triggerFormFocus();
243
243
  syncAfterCursorMove();
244
244
  }
245
245
  function focus() {
@@ -253,8 +253,8 @@ export default defineComponent({
253
253
  function handleInputBlur(e) {
254
254
  const { onBlur } = props;
255
255
  onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
256
- const { nTriggerFormBlur } = formItem;
257
- nTriggerFormBlur();
256
+ const { triggerFormBlur } = formItem;
257
+ triggerFormBlur();
258
258
  doUpdateShowMenu(false);
259
259
  }
260
260
  function handleSelect(tmNode) {
@@ -75,7 +75,7 @@ export default defineComponent({
75
75
  props: radioGroupProps,
76
76
  setup(props) {
77
77
  const selfElRef = ref(null);
78
- const { mergedSizeRef, mergedDisabledRef, nTriggerFormChange, nTriggerFormInput, nTriggerFormBlur, nTriggerFormFocus } = useFormItem(props);
78
+ const { mergedSizeRef, mergedDisabledRef, triggerFormChange, triggerFormInput, triggerFormBlur, triggerFormFocus } = useFormItem(props);
79
79
  const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
80
80
  const themeRef = useTheme('Radio', '-radio-group', style, radioLight, props, mergedClsPrefixRef);
81
81
  const uncontrolledValueRef = ref(props.defaultValue);
@@ -90,8 +90,8 @@ export default defineComponent({
90
90
  call(_onUpdateValue, value);
91
91
  }
92
92
  uncontrolledValueRef.value = value;
93
- nTriggerFormChange();
94
- nTriggerFormInput();
93
+ triggerFormChange();
94
+ triggerFormInput();
95
95
  }
96
96
  function handleFocusin(e) {
97
97
  const { value: selfEl } = selfElRef;
@@ -99,7 +99,7 @@ export default defineComponent({
99
99
  return;
100
100
  if (selfEl.contains(e.relatedTarget))
101
101
  return;
102
- nTriggerFormFocus();
102
+ triggerFormFocus();
103
103
  }
104
104
  function handleFocusout(e) {
105
105
  const { value: selfEl } = selfElRef;
@@ -107,7 +107,7 @@ export default defineComponent({
107
107
  return;
108
108
  if (selfEl.contains(e.relatedTarget))
109
109
  return;
110
- nTriggerFormBlur();
110
+ triggerFormBlur();
111
111
  }
112
112
  provide(radioGroupInjectionKey, {
113
113
  mergedClsPrefixRef,
@@ -29,7 +29,7 @@ export default defineComponent({
29
29
  const mergedValue = useMergedState(controlledValueRef, uncontrolledValueRef);
30
30
  function doUpdateValue(value) {
31
31
  const { 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
32
- const { nTriggerFormChange, nTriggerFormInput } = formItem;
32
+ const { triggerFormChange, triggerFormInput } = formItem;
33
33
  if (_onUpdateValue) {
34
34
  call(_onUpdateValue, value);
35
35
  }
@@ -37,8 +37,8 @@ export default defineComponent({
37
37
  call(onUpdateValue, value);
38
38
  }
39
39
  uncontrolledValueRef.value = value;
40
- nTriggerFormChange();
41
- nTriggerFormInput();
40
+ triggerFormChange();
41
+ triggerFormInput();
42
42
  }
43
43
  function getDerivedValue(index, e) {
44
44
  if (props.allowHalf) {