@kayak-sj/design 1.0.54 → 1.0.55

package/dist/index.js

@@ -461,7 +461,10 @@ var it = /* @__PURE__ */ j({
 			"k-form--inline-layout": a.inline,
 			"k-form--query-layout": a.autoLayout,
 			"k-form--grid-layout": !a.autoLayout && !a.inline
-		})), g = C(() => ({ "--k-form-cols": String(a.colLength) })), _ = C(() => a.modelValue !== void 0), v = et({
+		})), g = C(() => ({
+			"--k-form-cols": String(a.colLength),
+			"--k-form-label-width": m.value
+		})), _ = C(() => a.modelValue !== void 0), v = et({
 			formConfigs: H(a, "formConfigs"),
 			data: H(a, "data"),
 			modelValue: H(a, "modelValue"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kayak-sj/design",
-  "version": "1.0.54",
+  "version": "1.0.55",
   "type": "module",
   "description": "PC 组件库（Vue3 + Element Plus，对应旧 @kayak/kayak-design-vue2）",
   "license": "ISC",

package/src/styles/components/_k-form.scss

@@ -20,7 +20,7 @@
         min(
           100%,
           max(
-            var(--k-form-grid-min-col, 450px),
+            var(--k-form-grid-min-col),
             calc(
               (100% - (var(--k-form-cols, 2) - 1) * var(--k-form-grid-gap-x)) / var(--k-form-cols, 2)
             )

package/src/styles/tokens/_css-vars.scss

@@ -82,8 +82,6 @@
   --k-form-padding-x: #{sem.$form-padding-x};
   --k-form-padding-y: #{sem.$form-padding-y};
   --k-form-grid-gap-x: #{sem.$form-grid-gap-x};
-  --k-form-grid-min-col: #{sem.$form-grid-min-col};
-  --k-form-min-width: #{sem.$form-min-width};
   --k-form-item-margin-bottom: #{sem.$form-item-margin-bottom};
   --k-form-label-width: #{sem.$form-label-width};
   --k-form-label-width-query: #{sem.$form-label-width-query};
@@ -94,6 +92,9 @@
   --k-form-control-border: var(--k-color-border);
   --k-form-control-bg: var(--k-color-bg-surface);
   --k-form-control-max-width: #{sem.$form-control-max-width};
+  /// 引用 label / control 变量，便于表单实例覆盖 --k-form-label-width 后自动重算
+  --k-form-grid-min-col: calc(var(--k-form-label-width) + var(--k-form-control-max-width));
+  --k-form-min-width: calc(var(--k-form-grid-min-col) + var(--k-form-padding-x) * 2);
   --k-form-textarea-max-width: #{sem.$form-textarea-max-width};
 
   --k-form-query-col-width: #{sem.$form-query-col-width};

package/src/styles/tokens/_semantic.scss

@@ -24,16 +24,16 @@ $shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08) !default;
 $form-padding-x: 24px !default;
 $form-padding-y: 20px !default;
 $form-grid-gap-x: 24px !default;
-/** grid 单列最小宽度, 两列临界时先换行，避免输入框被挤窄 */
-$form-grid-min-col: 450px !default;
-/** 编辑表单整体最小宽：单列 label+控件+左右 padding，再窄则横向撑开由容器滚动 */
-$form-min-width: calc(#{$form-grid-min-col} + #{$form-padding-x} * 2) !default;
 $form-item-margin-bottom: 20px !default;
 $form-label-width: 110px !default;
 $form-label-width-query: 120px !default;
 $form-control-height: 32px !default;
 $form-control-font-size: typo.$font-size-medium !default;
 $form-control-max-width: 300px !default;
+/** grid 单列最小宽 = label + 控件 max；运行时随 --k-form-label-width 变化 */
+$form-grid-min-col: calc(#{$form-label-width} + #{$form-control-max-width}) !default;
+/** 编辑表单整体最小宽：单列 label+控件+左右 padding，再窄则横向撑开由容器滚动 */
+$form-min-width: calc(#{$form-grid-min-col} + #{$form-padding-x} * 2) !default;
 $form-textarea-max-width: 500px !default;
 
 $form-query-col-width: 320px !default;