@opentinyvue/vue-form-item 2.28.0 → 2.29.0

package/lib/index.js

@@ -47,6 +47,10 @@ var formItemProps = _extends({}, $props, {
   },
   messageType: String,
   label: String,
+  labelLine: {
+    type: Number,
+    default: 2
+  },
   labelWidth: String,
   manual: Boolean,
   popperOptions: {

package/lib/mobile-first.js

@@ -73,6 +73,10 @@ var __vue2_script = defineComponent({
       default: ""
     },
     label: String,
+    labelLine: {
+      type: Number,
+      default: 2
+    },
     labelWidth: String,
     manual: Boolean,
     popperOptions: {
@@ -119,7 +123,9 @@ var render = function render2() {
   return _c("div", {
     class: _vm.m("flex min-h-[theme(spacing.12)] sm:min-h-[theme(spacing.7)] mb-0 p-0 sm:mb-4 box-border after:content-[''] after:table after:clear-both before:content-['']  before:table border-b-0.5 border-color-border-separator sm:border-none", _vm.state.validateState === "error" && _vm.state.validateType === "text" ? "mb-0 sm:mb-4" : "", _vm.state.formInline ? "align-sub" : "", _vm.state.labelPosition === "top" ? "block mb-4" : "", _vm.state.validateState === "error" ? "[&_.tiny-range-editor]:border-color-error [&_[data-tag~=tiny-range-editor]]:border-color-error [&_[data-tag=tiny-numeric-main]]:border-color-error [&_input]:border-color-error [&_textarea]:border-color-error [&_input:focus]:border-color-error [&_input:hover]:border-color-error [&_textarea:focus]:border-color-error [&_textarea:hover]:border-color-error" : "", _vm.state.labelPosition === "top" && !_vm.state.hideRequiredAsterisk ? "pl-0" : "", !_vm.slots.label && !_vm.label ? "border-none" : "", _vm.state.isDisplayOnly ? "border-none py-0.5" : ""),
     attrs: {
-      "data-tag": "tiny-form-item"
+      "data-tag": "tiny-form-item",
+      "role": "group",
+      "aria-labelledby": _vm.state.labelId
     }
   }, [_c("label-wrap", {
     attrs: {
@@ -132,10 +138,12 @@ var render = function render2() {
     style: _vm.state.labelStyle,
     attrs: {
       "data-tag": "tiny-item-label",
-      "for": _vm.state.labelFor
+      "id": _vm.state.labelId,
+      "for": _vm.state.labelFor,
+      "aria-required": _vm.state.isRequired || _vm.required ? "true" : void 0
     }
   }, [_c("span", {
-    class: _vm.m("max-h-[theme(spacing.10)] line-clamp-2 inline-block relative top-px leading-normal", (_vm.state.isRequired || _vm.required) && !_vm.state.hideRequiredAsterisk ? "before:content-['*'] before:text-color-error before:relative before:mr-1" : "", _vm.state.isDisplayOnly ? "pl-0 before:hidden" : "")
+    class: _vm.m("max-h-[theme(spacing." + _vm.labelLine * 5 + ")] line-clamp-" + _vm.labelLine + " inline-block relative top-px leading-normal", (_vm.state.isRequired || _vm.required) && !_vm.state.hideRequiredAsterisk ? "before:content-['*'] before:text-color-error before:relative before:mr-1" : "", _vm.state.isDisplayOnly ? "pl-0 before:hidden" : "")
   }, [_vm._t("label", function() {
     return [_vm._v(_vm._s(_vm.label + _vm.state.labelSuffix))];
   })], 2), _vm.tipContent ? _c("tiny-tooltip", {
@@ -173,12 +181,18 @@ var render = function render2() {
     }],
     class: ["[&_[aria-label=checkbox-group]]:pl-0.5 sm:[&_[aria-label=checkbox-group]]:pl-0", "[&_>:first-child[data-tag=tiny-checkbox]]:pl-0.5 sm:[&_>:first-child[data-tag=tiny-checkbox]]:pl-0", "[&_[class^=tiny-autocomplete]]:w-full", "[&_[class^=tiny-cascader]]:w-full", _vm.state.isDisplayOnly ? "[&_>*:not([data-tag^=tiny-],[class^=tiny-])]:leading-8 [&_>*:not([data-tag^=tiny-],[class^=tiny-])]:sm:leading-normal" : ""],
     attrs: {
-      "data-tag": "tiny-form-item-show"
+      "data-tag": "tiny-form-item-show",
+      "aria-describedby": _vm.state.validateState === "error" ? _vm.state.errorId : void 0,
+      "aria-invalid": _vm.state.validateState === "error" ? "true" : "false"
     }
   }, [_vm._t("default")], 2), _vm.state.validateState === "error" && _vm.showMessage && _vm.state.showMessage ? _vm._t("error", function() {
     return [_c("div", {
       class: _vm.m("sm:absolute left-0 bottom-1 sm:-bottom-4 text-color-error text-xs leading-4 line-clamp-3 sm:line-clamp-1 break-all", typeof _vm.inlineMessage === "boolean" && _vm.inlineMessage || _vm.state.inlineMessage ? "relative top-auto left-auto inline-block" : ""),
       attrs: {
+        "id": _vm.state.errorId,
+        "role": "alert",
+        "aria-live": "assertive",
+        "aria-atomic": "true",
         "title": _vm.state.validateMessage
       }
     }, [_vm._v(" " + _vm._s(_vm.state.validateMessage) + " ")])];

package/lib/pc.js

@@ -167,10 +167,24 @@ var __vue2_script = defineComponent({
       if (!item.dynamicProps.includes("size")) {
         item.dynamicProps.push("size");
       }
+      var ariaAttrs = {};
+      if (state.isRequired || required) {
+        ariaAttrs["aria-required"] = "true";
+      }
+      if (isShowError && state.errorId) {
+        ariaAttrs["aria-describedby"] = state.errorId;
+        ariaAttrs["aria-invalid"] = "true";
+      } else {
+        ariaAttrs["aria-invalid"] = "false";
+      }
       Object.assign(item.props, {
         size: state.formItemSize,
         mini: state.formItemSize === "mini" || Boolean(item.props.mini)
       });
+      if (!item.attrs) {
+        item.attrs = {};
+      }
+      Object.assign(item.attrs, ariaAttrs);
       if (type && type.name && type.name.toLowerCase().endsWith("button")) {
         return item;
       }
@@ -231,10 +245,21 @@ var __vue2_script = defineComponent({
     var ErrorContent = isShowError && state.getValidateType === "text" ? errorSlot || h("div", {
       class: (_class = {}, _class[classPrefix + "form-item__error"] = true, _class[classPrefix + "form-item__error--inline"] = isErrorInline, _class[classPrefix + "form-item__error--block"] = isErrorBlock, _class),
       attrs: {
+        id: state.errorId,
+        // 为错误信息添加唯一 ID，用于 aria-describedby 关联
+        role: "alert",
+        // 使用 alert 角色，屏幕阅读器会立即读出错误
+        "aria-live": "assertive",
+        // 确保错误信息能被立即通知
+        "aria-atomic": "true",
+        // 确保完整读出错误信息
         title: [state.validateMessage]
       }
     }, [validateIcon ? h(validateIcon, {
-      class: "validate-icon"
+      class: "validate-icon",
+      attrs: {
+        "aria-hidden": "true"
+      }
     }) : null, h("span", {
       "class": classPrefix + "form-item__validate-message"
     }, [state.validateMessage])]) : null;
@@ -280,7 +305,10 @@ var __vue2_script = defineComponent({
             tooltipContent = [errorSlot];
           } else {
             tooltipContent = [validateIconNode, h2("span", {
-              "class": classPrefix + "form-item__validate-message"
+              "class": classPrefix + "form-item__validate-message",
+              "attrs": {
+                "id": state.errorId
+              }
             }, [state.validateMessage])];
           }
           return tooltipContent;

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@opentinyvue/vue-form-item",
   "type": "module",
-  "version": "2.28.0",
+  "version": "2.29.0",
   "description": "",
   "license": "MIT",
   "sideEffects": false,
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "dependencies": {
-    "@opentinyvue/vue-common": "~2.28.0",
-    "@opentinyvue/vue-icon": "~2.28.0",
-    "@opentinyvue/vue-renderless": "~3.28.0",
-    "@opentinyvue/vue-tooltip": "~2.28.0"
+    "@opentinyvue/vue-common": "~2.29.0",
+    "@opentinyvue/vue-icon": "~2.29.0",
+    "@opentinyvue/vue-renderless": "~3.29.0",
+    "@opentinyvue/vue-tooltip": "~2.29.0"
   },
   "types": "index.d.ts",
   "scripts": {

package/src/index.d.ts

@@ -25,6 +25,10 @@ export declare const formItemProps: {
     };
     messageType: StringConstructor;
     label: StringConstructor;
+    labelLine: {
+        type: NumberConstructor;
+        default: number;
+    };
     labelWidth: StringConstructor;
     manual: BooleanConstructor;
     popperOptions: {