@kayak-sj/design 1.0.57 → 1.0.58

package/dist/index.js

@@ -464,7 +464,7 @@ var it = /* @__PURE__ */ j({
 		})), g = C(() => ({
 			"--k-form-cols": String(a.colLength),
 			"--k-form-label-width": m.value,
-			"--k-form-grid-min-col": "calc(var(--k-form-label-width) + var(--k-form-control-max-width))",
+			"--k-form-grid-min-col": "calc(var(--k-form-label-width) + var(--k-form-control-min-width))",
 			"--k-form-min-width": "calc(var(--k-form-grid-min-col) + var(--k-form-padding-x) * 2)"
 		})), _ = C(() => a.modelValue !== void 0), v = et({
 			formConfigs: H(a, "formConfigs"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kayak-sj/design",
-  "version": "1.0.57",
+  "version": "1.0.58",
   "type": "module",
   "description": "PC 组件库（Vue3 + Element Plus，对应旧 @kayak/kayak-design-vue2）",
   "license": "ISC",
@@ -72,8 +72,8 @@
     "vite": "^8.1.5",
     "vitest": "^4.1.10",
     "vue": "^3.5.13",
-    "@kayak/tsconfig": "1.0.0",
-    "@kayak/vite-config": "1.0.0"
+    "@kayak/vite-config": "1.0.0",
+    "@kayak/tsconfig": "1.0.0"
   },
   "scripts": {
     "build": "vite build",

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

@@ -7,7 +7,7 @@
   flex-wrap: wrap;
 
   /// 编辑/弹窗：Grid 多列 + 右对齐标签
-  /// auto-fit：列最小宽给足「偏宽 label(含 tip) + 300px 控件」，不够两列时先换行，不改 label 宽度算法
+  /// auto-fit：列最小宽 = label + 控件 min(200)；控件理想 300，可先缩到 200 再换列
   &--grid-layout {
     display: grid;
     /* 面板再窄也不把控件压扁，由外层滚动条横向承载 */
@@ -99,6 +99,8 @@
     .el-cascader,
     .k-datePicker {
       max-width: var(--k-form-control-max-width);
+      /* 与换行阈值一致：可从 300 压到 200，再窄则由 grid 折列 */
+      min-width: min(100%, var(--k-form-control-min-width));
     }
 
     .k-form-date-picker--datetimerange,

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

@@ -92,8 +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-control-min-width: #{sem.$form-control-min-width};
+  /// 换行阈值 = label + 控件 min；空间够时控件仍可撑到 max。表单实例覆盖 --k-form-label-width 后自动重算
+  --k-form-grid-min-col: calc(var(--k-form-label-width) + var(--k-form-control-min-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};
 

package/src/styles/tokens/_semantic.scss

@@ -29,9 +29,12 @@ $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;
+/** 控件最小宽度；缩到此值后才换列，避免过早折行 */
+$form-control-min-width: 200px !default;
+/** grid 单列最小宽 = label + 控件 min；运行时随 --k-form-label-width 变化 */
+$form-grid-min-col: calc(#{$form-label-width} + #{$form-control-min-width}) !default;
 /** 编辑表单整体最小宽：单列 label+控件+左右 padding，再窄则横向撑开由容器滚动 */
 $form-min-width: calc(#{$form-grid-min-col} + #{$form-padding-x} * 2) !default;
 $form-textarea-max-width: 500px !default;