savor-ui 0.29.0 → 0.30.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 
 
+# [0.30.0](https://gitee.com/mach552/savor-ui/compare/v0.29.0...v0.30.0) (2026-08-31)
+
+
+### Bug Fixes
+
+* **datetime-picker:** 修复禁用样式无效问题 ([19a295b](https://gitee.com/mach552/savor-ui/commits/19a295b6475dc97eb8456a0803c22791a7f299a8))
+* **input-tag:** 修复错误状态样式无效问题 ([1c219ef](https://gitee.com/mach552/savor-ui/commits/1c219efbc6f4211bc02f3f77fa9d2b076f53f6e0))
+* **textarea:** 修复错误状态样式无效问题 ([595dee9](https://gitee.com/mach552/savor-ui/commits/595dee93be93033a7adf058710012d72c7f982ab))
+* **textarea:** 修复禁用样式无效问题 ([86ae468](https://gitee.com/mach552/savor-ui/commits/86ae4689e9a43ad72fbc0d42093f5d89382c3f6f))
+
+
+### Features
+
+* **form:** 新增额外内容属性和插槽 ([bd9534d](https://gitee.com/mach552/savor-ui/commits/bd9534d1ba5d70501c3bd1467fe23b8b3bdfe0d2))
+
 # [0.29.0](https://gitee.com/mach552/savor-ui/compare/v0.28.0...v0.29.0) (2026-08-30)
 
 

package/dist/es/components/src/datetime-picker/datetime-picker.vue.mjs

@@ -251,7 +251,7 @@ var k = /*@__PURE__*/ m({
 						t.is("range", W.value),
 						t.is("error", T(j)),
 						t.is("filled", xe.value)
-					]), C(r, Me.value), S(r, "clearable", m.clearable), S(r, "placeholder", Pe.value), S(r, "disabled", n), b(r, [t.e("input")]);
+					]), C(r, Me.value), S(r, "clearable", m.clearable), S(r, "placeholder", Pe.value), S(r, "disabled", n), b(r, [t.e("inner")]);
 				}), x(e, null, 1), f(() => M.value && !!A.value && m.clearable, () => {
 					let e = ge();
 					return y(() => b(e, [T(k).e("close")])), x(e, null, 0), d(T(n)), _(e, "click", E(De, ["stop"])), e;
@@ -264,7 +264,7 @@ var k = /*@__PURE__*/ m({
 				r.$evtinput = p(Ue), _(r, "blur", We), _(r, "click", E(U, ["stop"]));
 				let o = se(i);
 				return a.$evtinput = p(Ge), _(a, "blur", Ke), _(a, "click", E(U, ["stop"])), y(() => {
-					let t = T(k), n = m.disabled, i = Ne.value, s = m.clearable, c = Fe.value, l = [t.e("input")];
+					let t = T(k), n = m.disabled, i = Ne.value, s = m.clearable, c = Fe.value, l = [t.e("inner")];
 					b(e, [
 						t.e("wrapper"),
 						t.is("disabled", n),

package/dist/es/components/src/form/form-item.d.ts

@@ -1,4 +1,4 @@
-import { FormItemExpose, FormItemProps } from './types';
+import { FormItemExpose, FormItemProps, FormItemSlots } from './types';
 import { PublicProps, ShallowUnwrapRef, VNode } from 'vue';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & __VLS_PrettifyLocal<FormItemProps> & (typeof globalThis extends {
@@ -6,19 +6,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     } ? P : {});
     expose: (exposed: ShallowUnwrapRef<FormItemExpose>) => void;
     attrs: any;
-    slots: {
-        label?: (props: {
-            label: string | undefined;
-        }) => any;
-    } & {
-        label?: (props: {
-            label: string | undefined;
-        }) => any;
-    } & {
-        default?: (props: {
-            validate: (trigger?: string) => Promise<true | void>;
-        }) => any;
-    };
+    slots: FormItemSlots;
     emit: {};
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/es/components/src/form/form-item.vue.mjs

@@ -4,12 +4,12 @@ import { useNamespace as t } from "../../../hooks/src/use-namespace.mjs";
 import "../../../hooks/index.mjs";
 import { AsteriskLine as n } from "../../../icons/src/svg/editor/index.mjs";
 import { QuestionLine as r } from "../../../icons/src/svg/system/index.mjs";
-import { formContextKey as i, formItemContextKey as a, formItemStatusContextKey as o } from "./types.mjs";
-import { STooltip as s } from "../tooltip/index.mjs";
-import { child as c, computed as l, createComponent as u, createIf as d, createSlot as f, defineVaporComponent as p, inject as m, onMounted as h, onUnmounted as g, provide as _, ref as v, renderEffect as y, setClass as b, setInsertionState as x, setStyle as S, setText as C, template as w, toDisplayString as T, txt as E, unref as D } from "vue";
-import O from "async-validator";
+import { formContextKey as i, formItemContextKey as a, formItemStatusContextKey as ee } from "./types.mjs";
+import { STooltip as o } from "../tooltip/index.mjs";
+import { child as s, computed as c, createComponent as l, createIf as u, createSlot as d, defineVaporComponent as f, inject as p, onMounted as m, onUnmounted as h, provide as g, ref as te, renderEffect as _, setClass as v, setInsertionState as y, setStyle as ne, setText as b, template as x, toDisplayString as S, txt as C, unref as w } from "vue";
+import T from "async-validator";
 //#region ../components/src/form/form-item.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var k = w("<span>"), A = w(" "), j = w("<div><label>"), M = w("<div> "), N = w("<div><div><div></div>", 1), P = /*@__PURE__*/ p({
+var E = x("<span>"), D = x(" "), O = x("<div><label>"), k = x("<div>"), A = x("<div> "), j = x("<div><div><div></div>", 1), M = /*@__PURE__*/ f({
 	name: "SFormItem",
 	__name: "form-item",
 	props: {
@@ -24,27 +24,28 @@ var k = w("<span>"), A = w(" "), j = w("<div><label>"), M = w("<div> "), N = w("
 			type: Boolean,
 			default: !0
 		},
-		requiredAlign: {}
+		requiredAlign: {},
+		extra: {}
 	},
-	setup(p, { expose: w }) {
-		let P = p, F = t("form-item"), I = m(i), L = l(() => P.labelPosition ? P.labelPosition : I?.labelPosition?.value ? I?.labelPosition?.value : "left"), ee = l(() => I?.labelPosition?.value === "top" ? "" : P.labelWidth || I?.labelWidth?.value), R = l(() => P.labelAlign ? P.labelAlign : I?.labelAlign?.value ? I?.labelAlign?.value : I?.labelPosition?.value === "top" ? "left" : "right"), z = null, B = l(() => {
-			let e = I?.model?.value;
-			return e && P.field && e[P.field] !== void 0 ? e[P.field] : null;
-		}), V = l(() => {
-			let e = I?.rules?.value;
-			return e && P.field && e[P.field] ? e[P.field] : P.rules && P.rules.length > 0 ? P.rules : [];
-		}), H = v({
+	setup(f, { expose: x, slots: M }) {
+		let N = f, P = t("form-item"), F = p(i), I = c(() => N.labelPosition ? N.labelPosition : F?.labelPosition?.value ? F?.labelPosition?.value : "left"), L = c(() => F?.labelPosition?.value === "top" ? "" : N.labelWidth || F?.labelWidth?.value), R = c(() => N.labelAlign ? N.labelAlign : F?.labelAlign?.value ? F?.labelAlign?.value : F?.labelPosition?.value === "top" ? "left" : "right"), z = null, B = c(() => {
+			let e = F?.model?.value;
+			return e && N.field && e[N.field] !== void 0 ? e[N.field] : null;
+		}), V = c(() => {
+			let e = F?.rules?.value;
+			return e && N.field && e[N.field] ? e[N.field] : N.rules && N.rules.length > 0 ? N.rules : [];
+		}), H = te({
 			state: "init",
 			errorMsg: "",
 			loading: !1
-		}), U = (e) => V.value ? V.value.filter((t) => !t.trigger || !e ? !0 : t.trigger && t.trigger === e) : [], W = l(() => V.value.some((e) => e.required) && (P.showRequired || I?.showRequired?.value)), G = l(() => P.requiredAlign ? P.requiredAlign : I?.requiredAlign?.value ? I?.requiredAlign?.value : "left"), K = async (e) => {
-			let t = P.field, n = U(e);
+		}), U = (e) => V.value ? V.value.filter((t) => !t.trigger || !e ? !0 : t.trigger && t.trigger === e) : [], W = c(() => V.value.some((e) => e.required) && (N.showRequired || F?.showRequired?.value)), G = c(() => N.requiredAlign ? N.requiredAlign : F?.requiredAlign?.value ? F?.requiredAlign?.value : "left"), K = async (e) => {
+			let t = N.field, n = U(e);
 			if (n.length === 0) return !0;
 			if (t) {
 				let e = B.value, r = Array.isArray(e) ? "array" : e != null && typeof e != "string" ? typeof e : void 0, i = r ? n.map((e) => e.type ? e : {
 					...e,
 					type: r
-				}) : n, a = new O({ [t]: i });
+				}) : n, a = new T({ [t]: i });
 				return H.value.loading = !0, a.validate({ [t]: e }).then(() => {
 					H.value.state = "success", H.value.errorMsg = "";
 				}).catch((e) => {
@@ -58,72 +59,78 @@ var k = w("<span>"), A = w(" "), j = w("<div><label>"), M = w("<div> "), N = w("
 			H.value.state = "init", H.value.errorMsg = "", H.value.loading = !1;
 		}, J = () => {
 			q();
-			let e = I?.model?.value;
-			e && P.field && (e[P.field] = z);
-		}, Y = l(() => H.value.state === "error"), X = {
+			let e = F?.model?.value;
+			e && N.field && (e[N.field] = z);
+		}, Y = c(() => H.value.state === "error"), X = {
 			validate: K,
-			field: P.field,
+			field: N.field,
 			resetField: J,
 			clearValidate: q
 		};
-		_(a, X), _(o, {
-			size: I?.size,
+		g(a, X), g(ee, {
+			size: F?.size,
 			error: Y
+		}), m(() => {
+			N.field && (F?.addField(X), z = F?.model?.value?.[N.field]);
 		}), h(() => {
-			P.field && (I?.addField(X), z = I?.model?.value?.[P.field]);
-		}), g(() => {
-			P.field && I?.removeField(X);
-		}), w({
+			N.field && F?.removeField(X);
+		}), x({
 			validate: K,
 			resetField: J,
 			clearValidate: q,
 			validateStatus: H
 		});
-		let Z = N(), Q = c(Z, 1), $ = c(Q);
-		return y(() => {
-			let e = D(F), t = H.value, n = t.state;
-			b(Z, [
+		let Z = j(), Q = s(Z, 1), $ = s(Q);
+		return _(() => {
+			let e = w(P), t = H.value, n = t.state;
+			v(Z, [
 				e.b(),
 				e.is("error", n === "error"),
 				e.is("success", n === "success"),
 				e.is("loading", t.loading),
-				e.is("top", L.value === "top"),
-				e.m(D(I)?.size?.value)
+				e.is("top", I.value === "top"),
+				e.m(w(F)?.size?.value)
 			]);
-		}), x(Z, 0, 0), d(() => W.value || p.label || p.tooltip, () => {
-			let t = j(), i = c(t);
-			return y(() => {
-				let n = D(F);
-				b(t, [n.e("label-wrapper")]), b(i, [n.e("label"), n.m("align-" + R.value)]), S(i, { width: D(e)(ee.value) });
-			}), x(i, null, 0), d(() => G.value === "left", () => [d(() => W.value, () => {
-				let e = k();
-				return y(() => b(e, [D(F).e("required")])), x(e, null, 0), u(D(n)), e;
-			}), f("label", { label: () => p.label }, () => {
-				let e = A();
-				return y(() => C(e, T(p.label))), e;
-			})], () => d(() => G.value === "right", () => [f("label", { label: () => p.label }, () => {
-				let e = A();
-				return y(() => C(e, T(p.label))), e;
-			}), d(() => W.value, () => {
-				let e = k();
-				return y(() => b(e, [D(F).e("required")])), x(e, null, 0), u(D(n)), e;
-			})], null, 2), 518), x(i, null, 1), d(() => p.tooltip, () => u(D(s), {
-				content: () => p.tooltip,
+		}), y(Z, 0, 0), u(() => W.value || f.label || f.tooltip, () => {
+			let t = O(), i = s(t);
+			return _(() => {
+				let n = w(P);
+				v(t, [n.e("label-wrapper")]), v(i, [n.e("label"), n.m("align-" + R.value)]), ne(i, { width: w(e)(L.value) });
+			}), y(i, null, 0), u(() => G.value === "left", () => [u(() => W.value, () => {
+				let e = E();
+				return _(() => v(e, [w(P).e("required")])), y(e, null, 0), l(w(n)), e;
+			}), d("label", { label: () => f.label }, () => {
+				let e = D();
+				return _(() => b(e, S(f.label))), e;
+			})], () => u(() => G.value === "right", () => [d("label", { label: () => f.label }, () => {
+				let e = D();
+				return _(() => b(e, S(f.label))), e;
+			}), u(() => W.value, () => {
+				let e = E();
+				return _(() => v(e, [w(P).e("required")])), y(e, null, 0), l(w(n)), e;
+			})], null, 2), 518), y(i, null, 1), u(() => f.tooltip, () => l(w(o), {
+				content: () => f.tooltip,
 				mini: ""
 			}, () => {
-				let e = k();
-				return y(() => b(e, [D(F).e("tooltip")])), x(e, null, 0), u(D(r)), e;
+				let e = E();
+				return _(() => v(e, [w(P).e("tooltip")])), y(e, null, 0), l(w(r)), e;
 			})), t;
-		}), y(() => {
-			let e = D(F);
-			b(Q, [e.e("content-wrapper")]), b($, [e.e("content")]);
-		}), x($, null, 0), f("default", { validate: () => K }), x(Q, null, 1), d(() => H.value.state === "error", () => {
-			let e = M(), t = E(e);
-			return y(() => {
-				b(e, [D(F).e("error-msg")]), C(t, T(H.value.errorMsg));
+		}), _(() => {
+			let e = w(P);
+			v(Q, [e.e("content-wrapper")]), v($, [e.e("content")]);
+		}), y($, null, 0), d("default", { validate: () => K }), y(Q, null, 1), u(() => M.extra || f.extra, () => {
+			let e = k();
+			return _(() => v(e, [w(P).e("extra")])), y(e, null, 0), d("extra", null, () => {
+				let e = D();
+				return _(() => b(e, S(f.extra))), e;
+			}), e;
+		}), y(Q, null, 2), u(() => H.value.state === "error", () => {
+			let e = A(), t = C(e);
+			return _(() => {
+				v(e, [w(P).e("error-msg")]), b(t, S(H.value.errorMsg));
 			}), e;
 		}), Z;
 	}
 });
 //#endregion
-export { P as default };
+export { M as default };

package/dist/es/components/src/form/index.d.ts

@@ -1,5 +1,5 @@
 import { PublicProps, ShallowUnwrapRef, VNode, Plugin } from 'vue';
-import { FormItemRule, FormExpose, FormItemExpose } from './types';
+import { FormItemRule, FormExpose, FormItemSlots, FormItemExpose } from './types';
 export declare const SForm: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
     attrs: any;
     slots: {
@@ -31,19 +31,7 @@ export declare const SForm: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setu
 }) & Plugin;
 export declare const SFormItem: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
     attrs: any;
-    slots: {
-        label?: (props: {
-            label: string | undefined;
-        }) => any;
-    } & {
-        label?: (props: {
-            label: string | undefined;
-        }) => any;
-    } & {
-        default?: (props: {
-            validate: (trigger?: string) => Promise<true | void>;
-        }) => any;
-    };
+    slots: FormItemSlots;
     emit: {};
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & {
@@ -56,24 +44,13 @@ export declare const SFormItem: ((__VLS_props: NonNullable<Awaited<typeof __VLS_
         labelAlign?: "left" | "right" | undefined;
         showRequired?: boolean | undefined;
         requiredAlign?: "left" | "right" | undefined;
+        extra?: string | undefined;
     } & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: ShallowUnwrapRef<FormItemExpose>) => void;
     attrs: any;
-    slots: {
-        label?: (props: {
-            label: string | undefined;
-        }) => any;
-    } & {
-        label?: (props: {
-            label: string | undefined;
-        }) => any;
-    } & {
-        default?: (props: {
-            validate: (trigger?: string) => Promise<true | void>;
-        }) => any;
-    };
+    slots: FormItemSlots;
     emit: {};
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/es/components/src/form/types.d.ts

@@ -53,6 +53,16 @@ export interface FormItemProps {
     showRequired?: boolean;
     /** 必填标识对齐方式 */
     requiredAlign?: "left" | "right";
+    /** 表单项额外内容 */
+    extra?: string;
+}
+export interface FormItemSlots {
+    /** 内容 */
+    default: () => any;
+    /** 标签 */
+    label: () => any;
+    /** 额外内容 */
+    extra: () => any;
 }
 export interface FormContext {
     /** 表单模型 */

package/dist/es/theme/components/datetime-picker.scss

@@ -21,7 +21,7 @@
     }
     @include when(range) {
       &:focus-within {
-        @include be(datetime-picker, input) {
+        @include be(datetime-picker, inner) {
           &:focus {
             background-color: getCssVar("color", "fill-2");
           }
@@ -109,13 +109,13 @@
           padding: 4px 8px 4px 4px;
         }
       }
-      @include be(datetime-picker, input) {
+      @include be(datetime-picker, inner) {
         font-size: getCssVar("font-size", $size);
       }
     }
   }
 
-  @include e(input) {
+  @include e(inner) {
     height: 100%;
     width: 100%;
     padding: 0 8px 0 8px;

package/dist/es/theme/components/form.scss

@@ -78,6 +78,12 @@
     justify-content: flex-start;
   }
 
+  @include e(extra) {
+    margin-top: 4px;
+    color: getCssVar("color", "text-3");
+    font-size: getCssVar("font-size", "mini");
+  }
+
   @include e(error-msg) {
     height: 20px;
     font-size: getCssVar("font-size", "small");

package/dist/es/theme/components/input-tag.scss

@@ -53,14 +53,14 @@
           border-color: getCssVar("color", "danger-6");
         }
         @include when(filled) {
-          background-color: getCssVar("color", "error-1");
-          border-color: getCssVar("color", "error-1");
+          background-color: getCssVar("color", "danger-1");
+          border-color: getCssVar("color", "danger-1");
           &:hover {
-            background-color: getCssVar("color", "error-2");
+            background-color: getCssVar("color", "danger-2");
           }
           &:focus-within {
             background-color: getCssVar("color", "bg-2");
-            border-color: getCssVar("color", "error-5");
+            border-color: getCssVar("color", "danger-5");
           }
         }
       }

package/dist/es/theme/components/textarea.scss

@@ -29,10 +29,10 @@
     }
     @include when(disabled) {
       cursor: not-allowed;
-      @include be(input, inner) {
+      @include be(textarea, inner) {
         color: getCssVar("color", "text-3");
       }
-      @include this-be(input, wrapper) {
+      @include this-be(textarea, wrapper) {
         background-color: getCssVar("color", "bg-2");
         border: 1px solid getCssVar("color", "fill-3");
         &:hover {
@@ -58,14 +58,14 @@
         border-color: getCssVar("color", "danger-6");
       }
       @include when(filled) {
-        background-color: getCssVar("color", "error-1");
-        border-color: getCssVar("color", "error-1");
+        background-color: getCssVar("color", "danger-1");
+        border-color: getCssVar("color", "danger-1");
         &:hover {
-          background-color: getCssVar("color", "error-2");
+          background-color: getCssVar("color", "danger-2");
         }
         &:focus-within {
           background-color: getCssVar("color", "bg-2");
-          border-color: getCssVar("color", "error-5");
+          border-color: getCssVar("color", "danger-5");
         }
       }
     }
@@ -78,7 +78,7 @@
       }
       &:focus-within {
         background-color: getCssVar("color", "bg-2");
-        border-color: getCssVar("color", "primary-6");
+        border-color: getCssVar("color", "primary-5");
       }
     }
   }

package/dist/json/vetur-attributes.json

@@ -878,6 +878,10 @@
   "s-form-item/requiredAlign": {
     "description": "必填标识对齐方式"
   },
+  "s-form-item/extra": {
+    "description": "表单项额外内容",
+    "type": "string"
+  },
   "s-galleria/modelValue": {
     "description": "当前选中项索引（v-model）",
     "type": "number"

package/dist/json/vetur-tags.json

@@ -381,7 +381,8 @@
       "labelPosition",
       "labelAlign",
       "showRequired",
-      "requiredAlign"
+      "requiredAlign",
+      "extra"
     ]
   },
   "s-galleria": {

package/dist/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "savor-ui",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -2340,10 +2340,31 @@
                 "type": "left | right",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "extra",
+              "description": "表单项额外内容",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
             }
           ],
           "events": [],
-          "slots": []
+          "slots": [
+            {
+              "name": "default",
+              "description": "内容"
+            },
+            {
+              "name": "label",
+              "description": "标签"
+            },
+            {
+              "name": "extra",
+              "description": "额外内容"
+            }
+          ]
         },
         {
           "name": "s-galleria",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "savor-ui",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "A Vue3 Components Library",
   "keywords": [
     "component library",