@opentinyvue/vue-input 3.27.0 → 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.
@@ -115,7 +115,7 @@ var _sfc_main = defineComponent({
115
115
  TinyButton: Button,
116
116
  TinyDialogBox: DialogBox
117
117
  },
118
- props: [].concat(props, ["name", "size", "form", "type", "mask", "label", "modelValue", "height", "resize", "counter", "autosize", "disabled", "readonly", "tabindex", "clearable", "suffixIcon", "prefixIcon", "autocomplete", "showPassword", "validateEvent", "showWordLimit", "customClass", "displayOnly", "displayOnlyContent", "showEmptyValue", "popupMore", "showTooltip", "frontClearIcon", "hoverExpand"]),
118
+ props: [].concat(props, ["name", "size", "form", "type", "mask", "label", "modelValue", "height", "resize", "counter", "autosize", "disabled", "readonly", "tabindex", "clearable", "suffixIcon", "prefixIcon", "autocomplete", "showPassword", "validateEvent", "showWordLimit", "customClass", "displayOnly", "displayOnlyContent", "showEmptyValue", "popupMore", "showTooltip", "frontClearIcon", "hoverExpand", "inputBoxType"]),
119
119
  setup: function setup$1(props2, context) {
120
120
  return setup({
121
121
  props: props2,
@@ -162,10 +162,7 @@ var _hoisted_8 = {
162
162
  var _hoisted_9 = {
163
163
  class: "pointer-events-auto text-xs fill-color-icon-placeholder flex justify-start items-center"
164
164
  };
165
- var _hoisted_10 = {
166
- key: 5,
167
- class: "h-full inline-flex items-center text-xs sm:text-sm text-color-text-placeholder"
168
- };
165
+ var _hoisted_10 = ["id"];
169
166
  var _hoisted_11 = {
170
167
  class: "bg-color-bg-1 leading-none inline-block text-xs"
171
168
  };
@@ -189,11 +186,7 @@ var _hoisted_16 = {
189
186
  class: "font-[inherit]"
190
187
  };
191
188
  var _hoisted_17 = ["tabindex", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
192
- var _hoisted_18 = {
193
- key: 2,
194
- "data-tag": "tiny-input-limit",
195
- class: "text-color-text-placeholder text-xs leading-5 absolute bottom-0 right-3"
196
- };
189
+ var _hoisted_18 = ["id"];
197
190
  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
198
191
  var _component_tiny_tooltip = resolveComponent("tiny-tooltip");
199
192
  var _component_tiny_tall_storage = resolveComponent("tiny-tall-storage");
@@ -282,7 +275,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
282
275
  "data-tag": "tiny-input-inner",
283
276
  name: _ctx.name
284
277
  }, _ctx.a(_ctx.$attrs, ["type", "class", "style", "^on[A-Z]"]), {
285
- class: _ctx.m("w-full border-0 sm:border px-0 sm:px-3 sm:border-solid sm:border-color-border sm:hover:border-color-border-hover sm:focus:border-color-brand-focus sm:disabled:border-color-border placeholder:text-color-text-placeholder placeholder:text-sm sm:disabled:placeholder:text-color-text-disabled text-sm text-color-text-primary bg-color-bg-1 disabled:cursor-not-allowed disabled:text-color-text-disabled sm:disabled:text-color-text-disabled sm:disabled:bg-color-bg-6 py-0 outline-0 transition-colors duration-200 ease-in-out ", _ctx.state.inputSizeMf === "medium" ? "h-8 leading-8 " + _ctx.m("sm:text-sm") + " placeholder:text-sm" : _ctx.state.inputSizeMf === "mini" ? "h-6 leading-6 text-xs placeholder:text-xs" : "h-7 leading-7", _ctx.slots.prepend || _ctx.slots.append ? "align-middle table-cell" : "inline-block", _ctx.slots.prepend && _ctx.slots.append ? "rounded-none" : _ctx.slots.prepend ? "rounded-tl-none rounded-bl-none rounded-tr rounded-br" : _ctx.slots.append ? "rounded-tl rounded-bl rounded-tr-none rounded-br-none" : "rounded", _ctx.readonly ? " text-ellipsis overflow-hidden whitespace-nowrap" : "sm:border", (_ctx.slots.prefix || _ctx.prefixIcon) && (_ctx.slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword) ? "px-6 sm:px-6" : _ctx.slots.prefix || _ctx.prefixIcon ? "pl-6 sm:pl-6 pr-0 sm:pr-3" : _ctx.slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword ? "pl-0 sm:pl-3 pr-6 sm:pr-6" : "", _ctx.mask && _ctx.state.inputDisabled ? !_ctx.state.maskValueVisible ? "font-[serif] pr-6 sm:pr-6" : "pr-6 sm:pr-6" : "", (_ctx.slots.suffix || _ctx.suffixIcon || _ctx.showPassword) && _ctx.clearable ? "pr-10 sm:pr-10" : "", _ctx.state.isDisplayOnly ? "invisible h-auto leading-none border-0" : "", _ctx.state.isWordLimitVisible ? _ctx.clearable ? "pr-18 sm:pr-18" : "pr-14 sm:pr-14" : "", _ctx.customClass),
278
+ class: _ctx.m("w-full border-0 sm:border px-0 sm:px-3 sm:border-solid sm:border-color-border sm:hover:border-color-border-hover sm:focus:border-color-brand-focus sm:disabled:border-color-border placeholder:text-color-text-placeholder placeholder:text-sm sm:disabled:placeholder:text-color-text-disabled text-sm text-color-text-primary bg-color-bg-1 disabled:cursor-not-allowed disabled:text-color-text-disabled sm:disabled:text-color-text-disabled sm:disabled:bg-color-bg-6 py-0 outline-0 transition-colors duration-200 ease-in-out ", _ctx.state.inputSizeMf === "medium" ? "h-8 leading-8 " + _ctx.m("sm:text-sm") + " placeholder:text-sm" : _ctx.state.inputSizeMf === "mini" ? "h-6 leading-6 text-xs placeholder:text-xs" : "h-7 leading-7", _ctx.slots.prepend || _ctx.slots.append ? "align-middle table-cell" : "inline-block", _ctx.inputBoxType === "underline" ? "rounded-none border-t-0 border-l-0 border-r-0 border-b sm:border-b" : _ctx.slots.prepend && _ctx.slots.append ? "rounded-none" : _ctx.slots.prepend ? "rounded-tl-none rounded-bl-none rounded-tr rounded-br" : _ctx.slots.append ? "rounded-tl rounded-bl rounded-tr-none rounded-br-none" : "rounded", _ctx.readonly ? " text-ellipsis overflow-hidden whitespace-nowrap" : "sm:border", (_ctx.slots.prefix || _ctx.prefixIcon) && (_ctx.slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword) ? "px-6 sm:px-6" : _ctx.slots.prefix || _ctx.prefixIcon ? "pl-6 sm:pl-6 pr-0 sm:pr-3" : _ctx.slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword ? "pl-0 sm:pl-3 pr-6 sm:pr-6" : "", _ctx.mask && _ctx.state.inputDisabled ? !_ctx.state.maskValueVisible ? "font-[serif] pr-6 sm:pr-6" : "pr-6 sm:pr-6" : "", (_ctx.slots.suffix || _ctx.suffixIcon || _ctx.showPassword) && _ctx.clearable ? "pr-10 sm:pr-10" : "", _ctx.state.isDisplayOnly ? "invisible h-auto leading-none border-0" : "", _ctx.state.isWordLimitVisible ? _ctx.clearable ? "pr-18 sm:pr-18" : "pr-14 sm:pr-14" : "", _ctx.customClass),
286
279
  tabindex: _ctx.tabindex,
287
280
  type: _ctx.showPassword ? _ctx.state.passwordVisible ? "text" : "password" : _ctx.type,
288
281
  disabled: _ctx.state.inputDisabled,
@@ -310,7 +303,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
310
303
  onChange: _cache[7] || (_cache[7] = function() {
311
304
  return _ctx.handleChange && _ctx.handleChange.apply(_ctx, arguments);
312
305
  }),
313
- "aria-label": _ctx.label,
306
+ "aria-label": _ctx.label || _ctx.$attrs.placeholder,
314
307
  onKeyup: _cache[8] || (_cache[8] = function($event) {
315
308
  return _ctx.$emit("keyup", $event);
316
309
  }),
@@ -344,6 +337,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
344
337
  [createElementVNode("span", _hoisted_9, [_ctx.state.showClear ? (openBlock(), createBlock(_component_icon_close, {
345
338
  key: 0,
346
339
  class: normalizeClass(_ctx.m("hidden sm:block text-center transition-all duration-300 ease-in-out text-xs cursor-pointer", _ctx.state.inputSizeMf === "medium" ? "leading-8" : _ctx.state.inputSizeMf === "mini" ? "leading-6" : "leading-7")),
340
+ role: "button",
341
+ "aria-label": "clear",
342
+ tabindex: "0",
347
343
  onMousedown: _cache[11] || (_cache[11] = withModifiers(function() {
348
344
  }, ["prevent"])),
349
345
  onClick: _ctx.clear
@@ -361,26 +357,41 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
361
357
  )) : createCommentVNode("v-if", true), _ctx.state.showClear ? (openBlock(), createBlock(_component_icon_error, {
362
358
  key: 2,
363
359
  class: normalizeClass(_ctx.m("text-center transition-all duration-300 ease-in-out text-xs cursor-pointer fill-color-none-hover block sm:hidden", _ctx.state.inputSizeMf === "medium" ? "leading-8" : _ctx.state.inputSizeMf === "mini" ? "leading-6" : "leading-7")),
360
+ role: "button",
361
+ "aria-label": "clear",
362
+ tabindex: "0",
364
363
  onMousedown: _cache[12] || (_cache[12] = withModifiers(function() {
365
364
  }, ["prevent"])),
366
365
  onClick: _ctx.clear
367
366
  }, null, 8, ["class", "onClick"])) : createCommentVNode("v-if", true), _ctx.showPassword ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.passwordVisible ? "icon-eyeopen" : "icon-eyeclose"), {
368
367
  key: 3,
369
368
  class: normalizeClass(_ctx.m("text-center transition-all duration-300 ease-in-out text-xs", _ctx.state.inputSizeMf === "medium" ? "leading-8" : _ctx.state.inputSizeMf === "mini" ? "leading-6" : "leading-7")),
369
+ role: "button",
370
+ "aria-label": _ctx.state.passwordVisible ? "hide password" : "show password",
371
+ tabindex: "0",
370
372
  onClick: _ctx.handlePasswordVisible
371
- }, null, 8, ["class", "onClick"])) : createCommentVNode("v-if", true), _ctx.mask && _ctx.state.inputDisabled ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose"), {
373
+ }, null, 8, ["class", "aria-label", "onClick"])) : createCommentVNode("v-if", true), _ctx.mask && _ctx.state.inputDisabled ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose"), {
372
374
  key: 4,
373
375
  class: normalizeClass(_ctx.m("text-center transition-all duration-300 ease-in-out text-xs fill-color-text-placeholder", _ctx.state.inputSizeMf === "medium" ? "leading-8" : _ctx.state.inputSizeMf === "mini" ? "leading-6" : "leading-7")),
376
+ role: "button",
377
+ "aria-label": _ctx.state.maskValueVisible ? "hide content" : "show content",
378
+ tabindex: "0",
374
379
  onClick: _cache[13] || (_cache[13] = function($event) {
375
380
  return _ctx.state.maskValueVisible = !_ctx.state.maskValueVisible;
376
381
  })
377
- }, null, 8, ["class"])) : createCommentVNode("v-if", true), _ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock("span", _hoisted_10, [createElementVNode(
382
+ }, null, 8, ["class", "aria-label"])) : createCommentVNode("v-if", true), _ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock("span", {
383
+ key: 5,
384
+ id: (_ctx.$attrs.id || _ctx.name || "input") + "-word-limit",
385
+ class: "h-full inline-flex items-center text-xs sm:text-sm text-color-text-placeholder",
386
+ role: "status",
387
+ "aria-live": "polite"
388
+ }, [createElementVNode(
378
389
  "span",
379
390
  _hoisted_11,
380
391
  toDisplayString(_ctx.state.showWordLimit ? _ctx.state.textLength + "/" + _ctx.state.upperLimit : _ctx.state.textLength),
381
392
  1
382
393
  /* TEXT */
383
- )])) : createCommentVNode("v-if", true)]), _ctx.state.validateState ? (openBlock(), createElementBlock(
394
+ )], 8, _hoisted_10)) : createCommentVNode("v-if", true)]), _ctx.state.validateState ? (openBlock(), createElementBlock(
384
395
  "i",
385
396
  {
386
397
  key: 0,
@@ -532,17 +543,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
532
543
  onMouseleave: _cache[26] || (_cache[26] = function($event) {
533
544
  return _ctx.handleLeaveTextarea($event);
534
545
  }),
535
- "aria-label": _ctx.label
546
+ "aria-label": _ctx.label || _ctx.$attrs.placeholder
536
547
  }), "\n ", 16, _hoisted_17)],
537
548
  2
538
549
  /* CLASS */
539
- )), _ctx.state.isWordLimitVisible && _ctx.type === "textarea" ? (openBlock(), createElementBlock(
540
- "span",
541
- _hoisted_18,
542
- toDisplayString(_ctx.state.showWordLimit ? _ctx.state.textLength + "/" + _ctx.state.upperLimit : _ctx.state.textLength),
543
- 1
544
- /* TEXT */
545
- )) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")],
550
+ )), _ctx.state.isWordLimitVisible && _ctx.type === "textarea" ? (openBlock(), createElementBlock("span", {
551
+ key: 2,
552
+ "data-tag": "tiny-input-limit",
553
+ id: (_ctx.$attrs.id || _ctx.name || "textarea") + "-word-limit",
554
+ class: "text-color-text-placeholder text-xs leading-5 absolute bottom-0 right-3",
555
+ role: "status",
556
+ "aria-live": "polite"
557
+ }, toDisplayString(_ctx.state.showWordLimit ? _ctx.state.textLength + "/" + _ctx.state.upperLimit : _ctx.state.textLength), 9, _hoisted_18)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")],
546
558
  38
547
559
  /* CLASS, STYLE, NEED_HYDRATION */
548
560
  );
package/lib/pc.js CHANGED
@@ -168,10 +168,7 @@ var _hoisted_9 = {
168
168
  var _hoisted_10 = {
169
169
  class: "tiny-input__suffix-inner"
170
170
  };
171
- var _hoisted_11 = {
172
- key: 5,
173
- class: "tiny-input__count"
174
- };
171
+ var _hoisted_11 = ["id"];
175
172
  var _hoisted_12 = {
176
173
  class: "tiny-input__count-inner"
177
174
  };
@@ -199,10 +196,7 @@ var _hoisted_18 = {
199
196
  class: "tiny-textarea-display-only__content text-box"
200
197
  };
201
198
  var _hoisted_19 = ["tabindex", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
202
- var _hoisted_20 = {
203
- key: 2,
204
- class: "tiny-input__count"
205
- };
199
+ var _hoisted_20 = ["id"];
206
200
  var _hoisted_21 = {
207
201
  class: "tiny-input__count-inner"
208
202
  };
@@ -221,7 +215,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
221
215
  var _directive_clickoutside = resolveDirective("clickoutside");
222
216
  return openBlock(), createElementBlock(
223
217
  "div",
224
- mergeProps(_ctx.a(_ctx.$attrs, ["class"]), {
218
+ mergeProps(_ctx.a(_ctx.$attrs, ["class", "role", "aria-haspopup", "aria-autocomplete", "aria-owns", "aria-controls"]), {
225
219
  class: [_ctx.$attrs.class, _ctx.type === "textarea" ? "tiny-textarea" : "tiny-input", _ctx.state.inputSize ? "tiny-input-" + _ctx.state.inputSize : "", {
226
220
  "is-disabled": _ctx.state.inputDisabled,
227
221
  "is-exceed": _ctx.state.inputExceed,
@@ -299,7 +293,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
299
293
  ref: "input",
300
294
  name: _ctx.name,
301
295
  "data-tag": "tiny-input-inner"
302
- }, _ctx.a(_ctx.$attrs, ["type", "class", "style", "^on[A-Z]", "id"]), {
296
+ }, _ctx.a(_ctx.$attrs, ["type", "class", "style", "^on[A-Z]", "id", "aria-required", "aria-invalid"]), {
303
297
  class: ["tiny-input__inner", _ctx.mask && _ctx.state.inputDisabled && !_ctx.state.maskValueVisible && "tiny-input__mask"],
304
298
  tabindex: _ctx.tabindex,
305
299
  type: _ctx.showPassword ? _ctx.state.passwordVisible ? "text" : "password" : _ctx.type,
@@ -328,7 +322,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
328
322
  onChange: _cache[7] || (_cache[7] = function() {
329
323
  return _ctx.handleChange && _ctx.handleChange.apply(_ctx, arguments);
330
324
  }),
331
- "aria-label": _ctx.label,
325
+ "aria-label": _ctx.label || _ctx.$attrs.placeholder,
332
326
  onKeyup: _cache[8] || (_cache[8] = function($event) {
333
327
  return _ctx.$emit("keyup", $event);
334
328
  }),
@@ -363,6 +357,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
363
357
  [createElementVNode("span", _hoisted_10, [_ctx.frontClearIcon && _ctx.state.showClear ? (openBlock(), createBlock(_component_icon_close, {
364
358
  key: 0,
365
359
  class: "tiny-svg-size tiny-input__icon tiny-input__clear",
360
+ role: "button",
361
+ "aria-label": "清除",
362
+ tabindex: "0",
366
363
  onMousedown: _cache[11] || (_cache[11] = withModifiers(function() {
367
364
  }, ["prevent"])),
368
365
  onClick: _ctx.clear
@@ -380,20 +377,35 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
380
377
  )) : createCommentVNode("v-if", true), !_ctx.frontClearIcon && _ctx.state.showClear ? (openBlock(), createBlock(_component_icon_close, {
381
378
  key: 2,
382
379
  class: "tiny-svg-size tiny-input__icon tiny-input__clear",
380
+ role: "button",
381
+ "aria-label": "清除",
382
+ tabindex: "0",
383
383
  onMousedown: _cache[12] || (_cache[12] = withModifiers(function() {
384
384
  }, ["prevent"])),
385
385
  onClick: _ctx.clear
386
386
  }, null, 8, ["onClick"])) : createCommentVNode("v-if", true), _ctx.showPassword ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.passwordVisible ? "icon-eyeopen" : "icon-eyeclose"), {
387
387
  key: 3,
388
388
  class: "tiny-svg-size tiny-input__icon",
389
+ role: "button",
390
+ "aria-label": _ctx.state.passwordVisible ? "hide password" : "show password",
391
+ tabindex: "0",
389
392
  onClick: _ctx.handlePasswordVisible
390
- }, null, 8, ["onClick"])) : createCommentVNode("v-if", true), _ctx.mask && _ctx.state.inputDisabled ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose"), {
393
+ }, null, 8, ["aria-label", "onClick"])) : createCommentVNode("v-if", true), _ctx.mask && _ctx.state.inputDisabled ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose"), {
391
394
  key: 4,
392
395
  class: "tiny-svg-size tiny-input__icon",
396
+ role: "button",
397
+ "aria-label": _ctx.state.maskValueVisible ? "hide content" : "show content",
398
+ tabindex: "0",
393
399
  onClick: _cache[13] || (_cache[13] = function($event) {
394
400
  return _ctx.state.maskValueVisible = !_ctx.state.maskValueVisible;
395
401
  })
396
- })) : createCommentVNode("v-if", true), _ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock("span", _hoisted_11, [createElementVNode("span", _hoisted_12, [createElementVNode(
402
+ }, null, 8, ["aria-label"])) : createCommentVNode("v-if", true), _ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock("span", {
403
+ key: 5,
404
+ id: (_ctx.$attrs.id || _ctx.name || "input") + "-word-limit",
405
+ class: "tiny-input__count",
406
+ role: "status",
407
+ "aria-live": "polite"
408
+ }, [createElementVNode("span", _hoisted_12, [createElementVNode(
397
409
  "span",
398
410
  _hoisted_13,
399
411
  toDisplayString(_ctx.state.showWordLimit ? "" + _ctx.state.textLength : ""),
@@ -405,7 +417,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
405
417
  toDisplayString(_ctx.state.showWordLimit ? "/" + _ctx.state.upperLimit : _ctx.state.textLength),
406
418
  1
407
419
  /* TEXT */
408
- )])])) : createCommentVNode("v-if", true)]), _ctx.state.validateState ? (openBlock(), createElementBlock(
420
+ )])], 8, _hoisted_11)) : createCommentVNode("v-if", true)]), _ctx.state.validateState ? (openBlock(), createElementBlock(
409
421
  "i",
410
422
  {
411
423
  key: 0,
@@ -520,7 +532,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
520
532
  /* STABLE */
521
533
  }, 8, ["title", "visible"])) : createCommentVNode("v-if", true), withDirectives((openBlock(), createElementBlock("textarea", mergeProps({
522
534
  ref: "textarea"
523
- }, _ctx.a(_ctx.$attrs, ["type", "class", "style", "id"]), {
535
+ }, _ctx.a(_ctx.$attrs, ["type", "class", "style", "id", "aria-required", "aria-invalid"]), {
524
536
  tabindex: _ctx.tabindex,
525
537
  class: ["tiny-textarea__inner", _ctx.hoverExpand && !_ctx.state.enteredTextarea && "tiny-textarea__fix-height"],
526
538
  onCompositionstart: _cache[18] || (_cache[18] = function() {
@@ -561,7 +573,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
561
573
  onMouseup: _cache[28] || (_cache[28] = function($event) {
562
574
  return _ctx.handleTextareaMouseUp();
563
575
  }),
564
- "aria-label": _ctx.label,
576
+ "aria-label": _ctx.label || _ctx.$attrs.placeholder,
565
577
  onKeyup: _cache[29] || (_cache[29] = function($event) {
566
578
  return _ctx.$emit("keyup", $event);
567
579
  }),
@@ -578,7 +590,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
578
590
  }]])],
579
591
  2
580
592
  /* CLASS */
581
- )), _ctx.state.isWordLimitVisible && _ctx.type === "textarea" ? (openBlock(), createElementBlock("span", _hoisted_20, [createElementVNode("span", _hoisted_21, [createElementVNode(
593
+ )), _ctx.state.isWordLimitVisible && _ctx.type === "textarea" ? (openBlock(), createElementBlock("span", {
594
+ key: 2,
595
+ id: (_ctx.$attrs.id || _ctx.name || "textarea") + "-word-limit",
596
+ class: "tiny-input__count",
597
+ role: "status",
598
+ "aria-live": "polite"
599
+ }, [createElementVNode("span", _hoisted_21, [createElementVNode(
582
600
  "span",
583
601
  _hoisted_22,
584
602
  toDisplayString(_ctx.state.showWordLimit ? "" + _ctx.state.textLength : ""),
@@ -590,7 +608,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
590
608
  toDisplayString(_ctx.state.showWordLimit ? "/" + _ctx.state.upperLimit : _ctx.state.textLength),
591
609
  1
592
610
  /* TEXT */
593
- )])])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")],
611
+ )])], 8, _hoisted_20)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")],
594
612
  16
595
613
  /* FULL_PROPS */
596
614
  );
package/package.json CHANGED
@@ -1,21 +1,21 @@
1
1
  {
2
2
  "name": "@opentinyvue/vue-input",
3
3
  "type": "module",
4
- "version": "3.27.0",
4
+ "version": "3.29.0",
5
5
  "description": "",
6
6
  "license": "MIT",
7
7
  "sideEffects": false,
8
8
  "main": "./lib/index.js",
9
9
  "module": "./lib/index.js",
10
10
  "dependencies": {
11
- "@opentinyvue/vue-directive": "~3.27.0",
12
- "@opentinyvue/vue-button": "~3.27.0",
13
- "@opentinyvue/vue-common": "~3.27.0",
14
- "@opentinyvue/vue-dialog-box": "~3.27.0",
15
- "@opentinyvue/vue-icon": "~3.27.0",
16
- "@opentinyvue/vue-renderless": "~3.27.0",
17
- "@opentinyvue/vue-theme": "~3.27.0",
18
- "@opentinyvue/vue-tooltip": "~3.27.0"
11
+ "@opentinyvue/vue-directive": "~3.29.0",
12
+ "@opentinyvue/vue-button": "~3.29.0",
13
+ "@opentinyvue/vue-common": "~3.29.0",
14
+ "@opentinyvue/vue-dialog-box": "~3.29.0",
15
+ "@opentinyvue/vue-icon": "~3.29.0",
16
+ "@opentinyvue/vue-renderless": "~3.29.0",
17
+ "@opentinyvue/vue-theme": "~3.29.0",
18
+ "@opentinyvue/vue-tooltip": "~3.29.0"
19
19
  },
20
20
  "types": "index.d.ts",
21
21
  "scripts": {
@@ -36,6 +36,7 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
36
36
  frontClearIcon?: any;
37
37
  showEmptyValue?: any;
38
38
  showTooltip?: any;
39
+ inputBoxType?: any;
39
40
  }>, any, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("input" | "change" | "keyup" | "keydown" | "blur" | "click" | "focus" | "mouseenter" | "mouseleave" | "paste" | "clear" | "update:modelValue")[], "input" | "change" | "keyup" | "keydown" | "blur" | "click" | "focus" | "mouseenter" | "mouseleave" | "paste" | "clear" | "update:modelValue", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
40
41
  name?: any;
41
42
  label?: any;
@@ -74,6 +75,7 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
74
75
  frontClearIcon?: any;
75
76
  showEmptyValue?: any;
76
77
  showTooltip?: any;
78
+ inputBoxType?: any;
77
79
  }>>> & {
78
80
  onInput?: ((...args: any[]) => any) | undefined;
79
81
  onChange?: ((...args: any[]) => any) | undefined;
@@ -125,5 +127,6 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
125
127
  readonly frontClearIcon?: any;
126
128
  readonly showEmptyValue?: any;
127
129
  readonly showTooltip?: any;
130
+ readonly inputBoxType?: any;
128
131
  }, {}>;
129
132
  export default _default;