@opentinyvue/vue-input 2.26.0 → 2.28.0

package/lib/mobile-first.js

@@ -110,7 +110,7 @@ var __vue2_script = defineComponent({
     TinyButton: Button,
     TinyDialogBox: DialogBox
   },
-  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"]),
+  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"]),
   setup: function setup$1(props2, context) {
     return setup({
       props: props2,
@@ -189,7 +189,7 @@ var render = function render2() {
     staticClass: "absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap leading-7 sm:leading-normal text-color-text-primary"
   }, [_vm._v(" " + _vm._s(_vm.state.displayOnlyText) + " ")])]) : _vm._e(), _vm.type !== "textarea" ? _c("input", _vm._b({
     ref: "input",
-    class: _vm.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 ", _vm.state.inputSizeMf === "medium" ? "h-8 leading-8 " + _vm.m("sm:text-sm") + " placeholder:text-sm" : _vm.state.inputSizeMf === "mini" ? "h-6 leading-6 text-xs placeholder:text-xs" : "h-7 leading-7", _vm.slots.prepend || _vm.slots.append ? "align-middle table-cell" : "inline-block", _vm.slots.prepend && _vm.slots.append ? "rounded-none" : _vm.slots.prepend ? "rounded-tl-none rounded-bl-none rounded-tr rounded-br" : _vm.slots.append ? "rounded-tl rounded-bl rounded-tr-none rounded-br-none" : "rounded", _vm.readonly ? " text-ellipsis overflow-hidden whitespace-nowrap" : "sm:border", (_vm.slots.prefix || _vm.prefixIcon) && (_vm.slots.suffix || _vm.suffixIcon || _vm.clearable || _vm.showPassword) ? "px-6 sm:px-6" : _vm.slots.prefix || _vm.prefixIcon ? "pl-6 sm:pl-6 pr-0 sm:pr-3" : _vm.slots.suffix || _vm.suffixIcon || _vm.clearable || _vm.showPassword ? "pl-0 sm:pl-3 pr-6 sm:pr-6" : "", _vm.mask && _vm.state.inputDisabled ? !_vm.state.maskValueVisible ? "font-[serif] pr-6 sm:pr-6" : "pr-6 sm:pr-6" : "", (_vm.slots.suffix || _vm.suffixIcon || _vm.showPassword) && _vm.clearable ? "pr-10 sm:pr-10" : "", _vm.state.isDisplayOnly ? "invisible h-auto leading-none border-0" : "", _vm.state.isWordLimitVisible ? _vm.clearable ? "pr-18 sm:pr-18" : "pr-14 sm:pr-14" : "", _vm.customClass),
+    class: _vm.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 ", _vm.state.inputSizeMf === "medium" ? "h-8 leading-8 " + _vm.m("sm:text-sm") + " placeholder:text-sm" : _vm.state.inputSizeMf === "mini" ? "h-6 leading-6 text-xs placeholder:text-xs" : "h-7 leading-7", _vm.slots.prepend || _vm.slots.append ? "align-middle table-cell" : "inline-block", _vm.inputBoxType === "underline" ? "rounded-none border-t-0 border-l-0 border-r-0 border-b sm:border-b" : _vm.slots.prepend && _vm.slots.append ? "rounded-none" : _vm.slots.prepend ? "rounded-tl-none rounded-bl-none rounded-tr rounded-br" : _vm.slots.append ? "rounded-tl rounded-bl rounded-tr-none rounded-br-none" : "rounded", _vm.readonly ? " text-ellipsis overflow-hidden whitespace-nowrap" : "sm:border", (_vm.slots.prefix || _vm.prefixIcon) && (_vm.slots.suffix || _vm.suffixIcon || _vm.clearable || _vm.showPassword) ? "px-6 sm:px-6" : _vm.slots.prefix || _vm.prefixIcon ? "pl-6 sm:pl-6 pr-0 sm:pr-3" : _vm.slots.suffix || _vm.suffixIcon || _vm.clearable || _vm.showPassword ? "pl-0 sm:pl-3 pr-6 sm:pr-6" : "", _vm.mask && _vm.state.inputDisabled ? !_vm.state.maskValueVisible ? "font-[serif] pr-6 sm:pr-6" : "pr-6 sm:pr-6" : "", (_vm.slots.suffix || _vm.suffixIcon || _vm.showPassword) && _vm.clearable ? "pr-10 sm:pr-10" : "", _vm.state.isDisplayOnly ? "invisible h-auto leading-none border-0" : "", _vm.state.isWordLimitVisible ? _vm.clearable ? "pr-18 sm:pr-18" : "pr-14 sm:pr-14" : "", _vm.customClass),
     attrs: {
       "data-tag": "tiny-input-inner",
       "name": _vm.name,
@@ -199,7 +199,7 @@ var render = function render2() {
       "readonly": _vm.readonly,
       "unselectable": _vm.readonly ? "on" : "off",
       "autocomplete": _vm.autocomplete,
-      "aria-label": _vm.label
+      "aria-label": _vm.label || _vm.$attrs.placeholder
     },
     on: {
       "compositionstart": _vm.handleCompositionStart,
@@ -247,6 +247,11 @@ var render = function render2() {
     staticClass: "pointer-events-auto text-xs fill-color-icon-placeholder flex justify-start items-center"
   }, [_vm.state.showClear ? _c("icon-close", {
     class: _vm.m("hidden sm:block text-center transition-all duration-300 ease-in-out text-xs cursor-pointer", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7"),
+    attrs: {
+      "role": "button",
+      "aria-label": "clear",
+      "tabindex": "0"
+    },
     on: {
       "mousedown": function mousedown($event) {
         $event.preventDefault();
@@ -258,6 +263,11 @@ var render = function render2() {
     class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7")
   }) : _vm._e()] : _vm._e(), _vm.state.showClear ? _c("icon-error", {
     class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs cursor-pointer fill-color-none-hover block sm:hidden", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7"),
+    attrs: {
+      "role": "button",
+      "aria-label": "clear",
+      "tabindex": "0"
+    },
     on: {
       "mousedown": function mousedown($event) {
         $event.preventDefault();
@@ -267,6 +277,11 @@ var render = function render2() {
   }) : _vm._e(), _vm.showPassword ? _c(_vm.state.passwordVisible ? "icon-eyeopen" : "icon-eyeclose", {
     tag: "component",
     class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7"),
+    attrs: {
+      "role": "button",
+      "aria-label": _vm.state.passwordVisible ? "hide password" : "show password",
+      "tabindex": "0"
+    },
     nativeOn: {
       "click": function click($event) {
         return _vm.handlePasswordVisible.apply(null, arguments);
@@ -275,13 +290,23 @@ var render = function render2() {
   }) : _vm._e(), _vm.mask && _vm.state.inputDisabled ? _c(_vm.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose", {
     tag: "component",
     class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs fill-color-text-placeholder", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7"),
+    attrs: {
+      "role": "button",
+      "aria-label": _vm.state.maskValueVisible ? "hide content" : "show content",
+      "tabindex": "0"
+    },
     nativeOn: {
       "click": function click($event) {
         _vm.state.maskValueVisible = !_vm.state.maskValueVisible;
       }
     }
   }) : _vm._e(), _vm.state.isWordLimitVisible ? _c("span", {
-    staticClass: "h-full inline-flex items-center text-xs sm:text-sm text-color-text-placeholder"
+    staticClass: "h-full inline-flex items-center text-xs sm:text-sm text-color-text-placeholder",
+    attrs: {
+      "id": (_vm.$attrs.id || _vm.name || "input") + "-word-limit",
+      "role": "status",
+      "aria-live": "polite"
+    }
   }, [_c("span", {
     staticClass: "bg-color-bg-1 leading-none inline-block text-xs"
   }, [_vm._v(_vm._s(_vm.state.showWordLimit ? _vm.state.textLength + "/" + _vm.state.upperLimit : _vm.state.textLength))])]) : _vm._e()], 2), _vm.state.validateState ? _c("i", {
@@ -365,7 +390,7 @@ var render = function render2() {
       "readonly": _vm.readonly,
       "unselectable": _vm.readonly ? "on" : "off",
       "autocomplete": _vm.autocomplete,
-      "aria-label": _vm.label
+      "aria-label": _vm.label || _vm.$attrs.placeholder
     },
     on: {
       "compositionstart": _vm.handleCompositionStart,
@@ -385,7 +410,10 @@ var render = function render2() {
   }, "textarea", _vm.a(_vm.$attrs, ["type", "class", "style", "^on[A-Z]"]), false))], 1), _vm.state.isWordLimitVisible && _vm.type === "textarea" ? _c("span", {
     staticClass: "text-color-text-placeholder text-xs leading-5 absolute bottom-0 right-3",
     attrs: {
-      "data-tag": "tiny-input-limit"
+      "data-tag": "tiny-input-limit",
+      "id": (_vm.$attrs.id || _vm.name || "textarea") + "-word-limit",
+      "role": "status",
+      "aria-live": "polite"
     }
   }, [_vm._v(_vm._s(_vm.state.showWordLimit ? _vm.state.textLength + "/" + _vm.state.upperLimit : _vm.state.textLength))]) : _vm._e(), _vm._t("default")], 2);
 };

package/lib/pc.js

@@ -130,7 +130,7 @@ var render = function render2() {
         return _vm.$emit("click", $event);
       }
     }
-  }, "div", _vm.a(_vm.$attrs, ["class"]), false), [_vm.type !== "textarea" ? [_vm.slots.prepend && !_vm.state.isDisplayOnly ? _c("div", {
+  }, "div", _vm.a(_vm.$attrs, ["class", "role", "aria-haspopup", "aria-autocomplete", "aria-owns", "aria-controls"]), false), [_vm.type !== "textarea" ? [_vm.slots.prepend && !_vm.state.isDisplayOnly ? _c("div", {
     ref: "prepend",
     staticClass: "tiny-input-group__prepend"
   }, [_vm._t("prepend")], 2) : _vm._e(), _c("span", {
@@ -176,7 +176,7 @@ var render = function render2() {
       "readonly": _vm.readonly,
       "unselectable": _vm.readonly ? "on" : "off",
       "autocomplete": _vm.autocomplete,
-      "aria-label": _vm.label
+      "aria-label": _vm.label || _vm.$attrs.placeholder
     },
     on: {
       "compositionend": _vm.handleCompositionEnd,
@@ -196,7 +196,7 @@ var render = function render2() {
         return _vm.$emit("paste", $event);
       }
     }
-  }, "input", _vm.a(_vm.$attrs, ["type", "class", "style", "^on[A-Z]", "id"]), false)) : _vm._e()], 1), _vm.isMemoryStorage ? _c("tiny-tall-storage", {
+  }, "input", _vm.a(_vm.$attrs, ["type", "class", "style", "^on[A-Z]", "id", "aria-required", "aria-invalid"]), false)) : _vm._e()], 1), _vm.isMemoryStorage ? _c("tiny-tall-storage", {
     attrs: {
       "name": _vm.name,
       "localstorage-data": _vm.storageData,
@@ -222,6 +222,11 @@ var render = function render2() {
     staticClass: "tiny-input__suffix-inner"
   }, [_vm.frontClearIcon && _vm.state.showClear ? _c("icon-close", {
     staticClass: "tiny-svg-size tiny-input__icon tiny-input__clear",
+    attrs: {
+      "role": "button",
+      "aria-label": "清除",
+      "tabindex": "0"
+    },
     on: {
       "mousedown": function mousedown($event) {
         $event.preventDefault();
@@ -233,6 +238,11 @@ var render = function render2() {
     staticClass: "tiny-svg-size tiny-input__icon"
   }) : _vm._e()] : _vm._e(), !_vm.frontClearIcon && _vm.state.showClear ? _c("icon-close", {
     staticClass: "tiny-svg-size tiny-input__icon tiny-input__clear",
+    attrs: {
+      "role": "button",
+      "aria-label": "清除",
+      "tabindex": "0"
+    },
     on: {
       "mousedown": function mousedown($event) {
         $event.preventDefault();
@@ -242,6 +252,11 @@ var render = function render2() {
   }) : _vm._e(), _vm.showPassword ? _c(_vm.state.passwordVisible ? "icon-eyeopen" : "icon-eyeclose", {
     tag: "component",
     staticClass: "tiny-svg-size tiny-input__icon",
+    attrs: {
+      "role": "button",
+      "aria-label": _vm.state.passwordVisible ? "hide password" : "show password",
+      "tabindex": "0"
+    },
     nativeOn: {
       "click": function click($event) {
         return _vm.handlePasswordVisible.apply(null, arguments);
@@ -250,13 +265,23 @@ var render = function render2() {
   }) : _vm._e(), _vm.mask && _vm.state.inputDisabled ? _c(_vm.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose", {
     tag: "component",
     staticClass: "tiny-svg-size tiny-input__icon",
+    attrs: {
+      "role": "button",
+      "aria-label": _vm.state.maskValueVisible ? "hide content" : "show content",
+      "tabindex": "0"
+    },
     nativeOn: {
       "click": function click($event) {
         _vm.state.maskValueVisible = !_vm.state.maskValueVisible;
       }
     }
   }) : _vm._e(), _vm.state.isWordLimitVisible ? _c("span", {
-    staticClass: "tiny-input__count"
+    staticClass: "tiny-input__count",
+    attrs: {
+      "id": (_vm.$attrs.id || _vm.name || "input") + "-word-limit",
+      "role": "status",
+      "aria-live": "polite"
+    }
   }, [_c("span", {
     staticClass: "tiny-input__count-inner"
   }, [_c("span", {
@@ -346,7 +371,7 @@ var render = function render2() {
       "readonly": _vm.readonly,
       "unselectable": _vm.readonly ? "on" : "off",
       "autocomplete": _vm.autocomplete,
-      "aria-label": _vm.label
+      "aria-label": _vm.label || _vm.$attrs.placeholder
     },
     on: {
       "compositionstart": _vm.handleCompositionStart,
@@ -378,8 +403,13 @@ var render = function render2() {
         return _vm.$emit("paste", $event);
       }
     }
-  }, "textarea", _vm.a(_vm.$attrs, ["type", "class", "style", "id"]), false))], 1), _vm.state.isWordLimitVisible && _vm.type === "textarea" ? _c("span", {
-    staticClass: "tiny-input__count"
+  }, "textarea", _vm.a(_vm.$attrs, ["type", "class", "style", "id", "aria-required", "aria-invalid"]), false))], 1), _vm.state.isWordLimitVisible && _vm.type === "textarea" ? _c("span", {
+    staticClass: "tiny-input__count",
+    attrs: {
+      "id": (_vm.$attrs.id || _vm.name || "textarea") + "-word-limit",
+      "role": "status",
+      "aria-live": "polite"
+    }
   }, [_c("span", {
     staticClass: "tiny-input__count-inner"
   }, [_c("span", {

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@opentinyvue/vue-input",
   "type": "module",
-  "version": "2.26.0",
+  "version": "2.28.0",
   "description": "",
   "license": "MIT",
   "sideEffects": false,
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "dependencies": {
-    "@opentinyvue/vue-directive": "~2.26.0",
-    "@opentinyvue/vue-button": "~2.26.0",
-    "@opentinyvue/vue-common": "~2.26.0",
-    "@opentinyvue/vue-dialog-box": "~2.26.0",
-    "@opentinyvue/vue-icon": "~2.26.0",
-    "@opentinyvue/vue-renderless": "~3.26.0",
-    "@opentinyvue/vue-theme": "~3.26.0",
-    "@opentinyvue/vue-tooltip": "~2.26.0"
+    "@opentinyvue/vue-directive": "~2.28.0",
+    "@opentinyvue/vue-button": "~2.28.0",
+    "@opentinyvue/vue-common": "~2.28.0",
+    "@opentinyvue/vue-dialog-box": "~2.28.0",
+    "@opentinyvue/vue-icon": "~2.28.0",
+    "@opentinyvue/vue-renderless": "~3.28.0",
+    "@opentinyvue/vue-theme": "~3.28.0",
+    "@opentinyvue/vue-tooltip": "~2.28.0"
   },
   "types": "index.d.ts",
   "scripts": {