@uzum-tech/ui 1.5.2 → 1.5.3

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