@kayak-sj/design 1.0.53 → 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.53",
+  "version": "1.0.55",
   "type": "module",
   "description": "PC 组件库（Vue3 + Element Plus，对应旧 @kayak/kayak-design-vue2）",
   "license": "ISC",

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

@@ -7,9 +7,28 @@
   flex-wrap: wrap;
 
   /// 编辑/弹窗：Grid 多列 + 右对齐标签
+  /// auto-fit：列最小宽给足「偏宽 label(含 tip) + 300px 控件」，不够两列时先换行，不改 label 宽度算法
   &--grid-layout {
     display: grid;
-    grid-template-columns: repeat(var(--k-form-cols, 2), minmax(0, 1fr));
+    /* 面板再窄也不把控件压扁，由外层滚动条横向承载 */
+    min-width: var(--k-form-min-width);
+    width: 100%;
+    box-sizing: border-box;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(
+        min(
+          100%,
+          max(
+            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)
+            )
+          )
+        ),
+        1fr
+      )
+    );
     column-gap: var(--k-form-grid-gap-x);
     row-gap: 0;
     padding: 4px var(--k-form-padding-x) 0;

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

@@ -92,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

@@ -30,6 +30,10 @@ $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;