@neatui/css 4.0.2 → 4.2.0

package/GUIDE.md

@@ -137,7 +137,7 @@ npm install @neatui/css @neatui/vue
 
 ## 尺寸系统
 
-从3.x升级时，同名尺寸类不保证保持原值。请按 [4.0尺寸迁移指南](./MIGRATION-4.0.md) 的旧值表进行迁移。
+从3.x升级时，同名尺寸类不保证保持原值。请按 [4.0尺寸迁移指南](./MIGRATION-4.0.md) 的旧值表进行迁移。从4.0升级到4.1时，按 [4.1尺寸迁移指南](./MIGRATION-4.1.md) 检查 `*m`、`*l` 档位。
 
 ### 核心概念：S/M/L 矩阵
 
@@ -191,16 +191,16 @@ xl  →  5.5em
 
 中型容器段:
   w-xs*m    // 18em
-  w-xl*m    // 38em
+  w-xl*m    // 28em
 
 大型容器段:
-  w-xs*l    // 42em
-  w-xl*l    // 82em
+  w-xs*l    // 30em
+  w-xl*l    // 70em
 ```
 
 `w/h` 的 `*s/*m/*l` 是分段档位，不是乘法。4.0 起不再生成 `w-sm+` 这类宽高增量类。
 
-**覆盖范围**: 0-82em (0-1312px @ 16px)，共 45 种宽高尺寸
+**覆盖范围**: 0-70em (0-1120px @ 16px)，共 45 种宽高尺寸
 
 ### 应用于各属性
 

package/MIGRATION-4.0.md

@@ -85,6 +85,21 @@ mob:w-ll   20em -> mob:w-ss*m   20em
 | `*m` | 5 | 5.5 | 6 | 6.5 | 7 | 7.5 | 8 | 8.5 | 9 | 9.5 | 10 |
 | `*l` | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
 
+### 早期 3.x 遗留的 `fs-xxs`
+
+早期 3.x 曾生成 `fs-xxs`；后期 3.x 将字号收敛为 `fs-xs ~ fs-xl` 时从
+CSS 源码移除了该档位，但下游项目中仍可能保留大量 `fs-xxs`。迁移时必须显式搜索，
+不能因为最终 3.x 源码中已经没有该类就跳过：
+
+| 早期 3.x 类名 | 旧值 | 4.0 类名 | 新值 | 结果 |
+|---|---:|---|---:|---|
+| `fs-xxs` | 0.7rem | `fs-xs` | 0.6875rem | 近似，-0.0125rem |
+| `fs-xxs+` | 0.75rem | `fs-ss` | 0.75rem | 精确 |
+| `fs-xxs*` | 1.4rem | `fs-lm` | 1.375rem | 近似，-0.025rem |
+
+`fs-xxs-sub`、伪元素变体和响应式前缀使用同一数值映射。例如
+`mob:fs-xxs` 应迁移为 `mob:fs-xs`。
+
 | 3.x 类名 | 旧值 | 4.0 类名 | 新值 | 结果 |
 |---|---:|---|---:|---|
 | `fs-xs` | 0.8rem | `fs-sm` | 0.8125rem | 近似，+0.0125rem |
@@ -135,7 +150,7 @@ mob:w-ll   20em -> mob:w-ss*m   20em
 
 ## 检查清单
 
-1. 搜索所有字号及宽高类，包括动态字符串和响应式前缀。
+1. 搜索所有字号及宽高类，包括动态字符串和响应式前缀；必须单独搜索早期 3.x 遗留的 `fs-xxs`、`fs-xxs+`、`fs-xxs*`。
 2. 根据3.x表计算旧值。
 3. 优先选择4.0精确同值档位。
 4. 没有精确值时记录差值并进行视觉确认。

package/MIGRATION-4.1.md

@@ -0,0 +1,75 @@
+# NeatUI CSS 4.1 迁移指南
+
+4.1 调整了宽高尺寸系统的中型与大型容器段，使常用表单和弹窗宽度获得更细的档位。类名没有删除，但同名 `*m`、`*l` 类的实际值发生了变化，升级时必须检查布局。
+
+以下变化同时适用于响应式前缀，以及 `w / min-w / max-w / h / min-h / max-h` 六组属性。基础段和 `*s` 段保持不变。
+
+## 4.0.0 → 4.1.0 对照表
+
+单位均为 `em`；括号内为根字号或当前元素字号为 `16px` 时的参考像素值。
+
+| 档位 | 4.0.0 | 4.1.0 | 变化 |
+|---|---:|---:|---:|
+| `xs*m` | 18em（288px） | 18em（288px） | 不变 |
+| `ss*m` | 20em（320px） | 19em（304px） | -1em（-16px） |
+| `sm*m` | 22em（352px） | 20em（320px） | -2em（-32px） |
+| `sl*m` | 24em（384px） | 21em（336px） | -3em（-48px） |
+| `ms*m` | 26em（416px） | 22em（352px） | -4em（-64px） |
+| `mm*m` | 28em（448px） | 23em（368px） | -5em（-80px） |
+| `ml*m` | 30em（480px） | 24em（384px） | -6em（-96px） |
+| `ls*m` | 32em（512px） | 25em（400px） | -7em（-112px） |
+| `lm*m` | 34em（544px） | 26em（416px） | -8em（-128px） |
+| `ll*m` | 36em（576px） | 27em（432px） | -9em（-144px） |
+| `xl*m` | 38em（608px） | 28em（448px） | -10em（-160px） |
+| `xs*l` | 42em（672px） | 30em（480px） | -12em（-192px） |
+| `ss*l` | 46em（736px） | 34em（544px） | -12em（-192px） |
+| `sm*l` | 50em（800px） | 38em（608px） | -12em（-192px） |
+| `sl*l` | 54em（864px） | 42em（672px） | -12em（-192px） |
+| `ms*l` | 58em（928px） | 46em（736px） | -12em（-192px） |
+| `mm*l` | 62em（992px） | 50em（800px） | -12em（-192px） |
+| `ml*l` | 66em（1056px） | 54em（864px） | -12em（-192px） |
+| `ls*l` | 70em（1120px） | 58em（928px） | -12em（-192px） |
+| `lm*l` | 74em（1184px） | 62em（992px） | -12em（-192px） |
+| `ll*l` | 78em（1248px） | 66em（1056px） | -12em（-192px） |
+| `xl*l` | 82em（1312px） | 70em（1120px） | -12em（-192px） |
+
+## 保持 4.0.0 实际尺寸
+
+如果升级后必须尽量保持原来的实际宽高，不要保留同名类；应按目标值重新选择 4.1.0 档位。下表列出能够精确对应的常用迁移：
+
+| 4.0.0 类名 | 旧值 | 4.1.0 类名 | 新值 | 结果 |
+|---|---:|---|---:|---|
+| `*-ss*m` | 20em | `*-sm*m` | 20em | 精确 |
+| `*-sm*m` | 22em | `*-ms*m` | 22em | 精确 |
+| `*-sl*m` | 24em | `*-ml*m` | 24em | 精确 |
+| `*-ms*m` | 26em | `*-lm*m` | 26em | 精确 |
+| `*-mm*m` | 28em | `*-xl*m` | 28em | 精确 |
+| `*-ml*m` | 30em | `*-xs*l` | 30em | 精确 |
+| `*-lm*m` | 34em | `*-ss*l` | 34em | 精确 |
+| `*-xl*m` | 38em | `*-sm*l` | 38em | 精确 |
+| `*-xs*l` | 42em | `*-sl*l` | 42em | 精确 |
+| `*-ss*l` | 46em | `*-ms*l` | 46em | 精确 |
+| `*-sm*l` | 50em | `*-mm*l` | 50em | 精确 |
+| `*-sl*l` | 54em | `*-ml*l` | 54em | 精确 |
+| `*-ms*l` | 58em | `*-ls*l` | 58em | 精确 |
+| `*-mm*l` | 62em | `*-lm*l` | 62em | 精确 |
+| `*-ml*l` | 66em | `*-ll*l` | 66em | 精确 |
+| `*-ls*l` | 70em | `*-xl*l` | 70em | 精确 |
+
+这里的 `*` 表示保留原属性前缀。例如：
+
+```text
+w-ss*m       -> w-sm*m
+max-w-xl*m   -> max-w-sm*l
+mob:min-h-ms*l -> mob:min-h-ls*l
+```
+
+4.0.0 中实际使用的 `32 / 36 / 74 / 78 / 82em` 在 4.1.0 中没有精确档位。遇到这些值时，应根据布局选择相邻档位并进行视觉回归；不要仅按档位名称迁移。
+
+## 检查清单
+
+1. 搜索 `*m`、`*l` 宽高类，包括动态字符串和响应式前缀。
+2. 确认同名类缩小后，表单、弹窗、侧栏和固定高度区域是否仍符合预期。
+3. 需要保持旧尺寸时，按实际 `em` 值选择新的档位。
+4. 检查 `w / min-w / max-w / h / min-h / max-h` 六组属性。
+5. 编译 CSS，并在常用桌面与移动视口进行视觉回归。

package/components/form/base.scss

@@ -289,6 +289,11 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
     color: currentColor;
     box-shadow: inset 0 0 0 1px currentColor;
   }
+
+  &[ui-form-clean~='empty'] {
+    opacity: 0 !important;
+    pointer-events: none !important;
+  }
 }
 [ui-form] {
   &:hover {

package/core/trim.scss

@@ -30,32 +30,98 @@ $dimension-s: (
 
 $dimension-m: (
   xs: 18,
-  ss: 20,
-  sm: 22,
-  sl: 24,
-  ms: 26,
-  mm: 28,
-  ml: 30,
-  ls: 32,
-  lm: 34,
-  ll: 36,
-  xl: 38,
+  ss: 19,
+  sm: 20,
+  sl: 21,
+  ms: 22,
+  mm: 23,
+  ml: 24,
+  ls: 25,
+  lm: 26,
+  ll: 27,
+  xl: 28,
 );
 
 $dimension-l: (
-  xs: 42,
-  ss: 46,
-  sm: 50,
-  sl: 54,
-  ms: 58,
-  mm: 62,
-  ml: 66,
-  ls: 70,
-  lm: 74,
-  ll: 78,
-  xl: 82,
+  xs: 30,
+  ss: 34,
+  sm: 38,
+  sl: 42,
+  ms: 46,
+  mm: 50,
+  ml: 54,
+  ls: 58,
+  lm: 62,
+  ll: 66,
+  xl: 70,
 );
 
+$_spacing-scale: (
+  no: 0em,
+  xs: 1px,
+  ss: 0.25em,
+  sm: 0.5em,
+  sl: 0.75em,
+  ms: 1em,
+  mm: 1.5em,
+  ml: 2em,
+  ls: 2.5em,
+  lm: 3em,
+  ll: 4em,
+  xl: 5em,
+);
+
+$_radius-scale: (
+  no: 0em,
+  xs: 0.1em,
+  ss: 0.2em,
+  sm: 0.3em,
+  sl: 0.4em,
+  ms: 0.5em,
+  mm: 0.6em,
+  ml: 0.7em,
+  ls: 0.8em,
+  lm: 0.9em,
+  ll: 1em,
+  xl: 1.2em,
+);
+
+@mixin _spacing-properties($properties, $value, $important: false) {
+  @each $property in $properties {
+    @if $important {
+      #{$property}: $value !important;
+    } @else {
+      #{$property}: $value;
+    }
+  }
+}
+
+@mixin _spacing-utility($media, $prefix, $size, $value, $properties, $children: true) {
+  .#{$media}#{$prefix}-#{$size} {
+    @include _spacing-properties($properties, $value, true);
+  }
+
+  @if $children {
+    html body .#{$media}#{$prefix}-#{$size}-sub > *,
+    .#{$media}#{$prefix}-#{$size}-sun > * > * {
+      @include _spacing-properties($properties, $value);
+    }
+  }
+}
+
+@mixin _margin-edge-reset($media, $prefix, $size, $property, $pseudo) {
+  .#{$media}#{$prefix}-#{$size}-sub > *:#{$pseudo},
+  .#{$media}#{$prefix}-#{$size}-sun > * > *:#{$pseudo} {
+    #{$property}: 0;
+  }
+}
+
+@mixin _row-spacing($media, $prefix, $size, $value, $properties) {
+  [ui-row].#{$media}#{$prefix}-#{$size}-sub {
+    @include _spacing-properties($properties, -($value));
+  }
+}
+
 @mixin dimension-scale($media, $prefix, $property) {
   .#{$media}#{$prefix}-no {
     #{$property}: 0;
@@ -85,99 +151,62 @@ $dimension-l: (
 @mixin trim($media: "") {
   $size: (no, xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl);
 
-  // 栅格
-  $col_base: 0;
-  $col_unit: em;
-  @each $sz in $size {
-    @if ($sz == xs) {
-      $col_base: 1;
-      $col_unit: px;
-    } @else {
-      $col_unit: em;
-    }
-
-    // 栅格系统配套
-    [ui-row] {
-      // 左右内边距
-      &.#{$media}n-#{$sz}-sub,
-      &.#{$media}nx-#{$sz}-sub,
-      &.#{$media}nl-#{$sz}-sub {
-        margin-left: -$col_base + $col_unit;
-      }
-      &.#{$media}n-#{$sz}-sub,
-      &.#{$media}nx-#{$sz}-sub,
-      &.#{$media}nr-#{$sz}-sub {
-        margin-right: -$col_base + $col_unit;
-      }
-
-      // 上下内边距
-      &.#{$media}n-#{$sz}-sub,
-      &.#{$media}ny-#{$sz}-sub,
-      &.#{$media}nt-#{$sz}-sub {
-        margin-top: -$col_base + $col_unit;
-      }
-      &.#{$media}n-#{$sz}-sub,
-      &.#{$media}ny-#{$sz}-sub,
-      &.#{$media}nb-#{$sz}-sub {
-        margin-bottom: -$col_base + $col_unit;
-      }
-    }
-
-    @if ($sz == xs) {
-      $col_base: 0;
-    }
-    @if ($col_base < 1) {
-      $col_base: $col_base + 0.25;
-    } @else if($col_base >= 3) {
-      $col_base: $col_base + 1;
-    } @else {
-      $col_base: $col_base + 0.5;
-    }
+  // 栅格负边距补偿：总项 < 轴向 < 单边
+  @each $sz, $value in $_spacing-scale {
+    @include _row-spacing(
+      $media,
+      "n",
+      $sz,
+      $value,
+      (margin-top, margin-right, margin-bottom, margin-left)
+    );
+  }
+  @each $sz, $value in $_spacing-scale {
+    @include _row-spacing($media, "nx", $sz, $value, (margin-left, margin-right));
+    @include _row-spacing($media, "ny", $sz, $value, (margin-top, margin-bottom));
+  }
+  @each $sz, $value in $_spacing-scale {
+    @include _row-spacing($media, "nt", $sz, $value, (margin-top,));
+    @include _row-spacing($media, "nr", $sz, $value, (margin-right,));
+    @include _row-spacing($media, "nb", $sz, $value, (margin-bottom,));
+    @include _row-spacing($media, "nl", $sz, $value, (margin-left,));
   }
 
-  // 圆角
-  $br_base: 0;
+  // 圆角：总项 < 双角 < 单角
   .#{$media}r-full {
     border-radius: 10000em;
   }
-  @each $sz in $size {
-    // 四角
+  @each $sz, $value in $_radius-scale {
     .#{$media}r-#{$sz} {
-      border-radius: #{$br_base}em;
+      border-radius: $value;
     }
-    // 上面
+  }
+  @each $sz, $value in $_radius-scale {
     .#{$media}r-t-#{$sz} {
-      border-radius: #{$br_base}em #{$br_base}em 0 0;
+      border-top-left-radius: $value;
+      border-top-right-radius: $value;
     }
-    // 下面
     .#{$media}r-b-#{$sz} {
-      border-radius: 0 0 #{$br_base}em #{$br_base}em;
+      border-bottom-right-radius: $value;
+      border-bottom-left-radius: $value;
     }
-    // 左上
+  }
+  @each $sz, $value in $_radius-scale {
     .#{$media}r-lt-#{$sz} {
-      border-top-left-radius: #{$br_base}em;
+      border-top-left-radius: $value;
     }
-    // 右上
     .#{$media}r-rt-#{$sz} {
-      border-top-right-radius: #{$br_base}em;
+      border-top-right-radius: $value;
     }
-    // 左下
     .#{$media}r-lb-#{$sz} {
-      border-bottom-left-radius: #{$br_base}em;
+      border-bottom-left-radius: $value;
     }
-    // 右下
     .#{$media}r-rb-#{$sz} {
-      border-bottom-right-radius: #{$br_base}em;
-    }
-
-    @if ($br_base <1) {
-      $br_base: $br_base + 0.1;
-    } @else {
-      $br_base: $br_base + 0.2;
+      border-bottom-right-radius: $value;
     }
   }
 
-  // 边距
+  // 偏移量
   $base: 0;
   $unit: em;
   @each $sz in $size {
@@ -188,7 +217,6 @@ $dimension-l: (
       $unit: em;
     }
 
-    // 偏移量
     .#{$media}o {
       &l-#{$sz} {
         left: $base + $unit;
@@ -231,213 +259,6 @@ $dimension-l: (
       }
     }
 
-    // 内边距
-    .#{$media}n {
-      &l,
-      &x,
-      & {
-        &-#{$sz} {
-          @at-root {
-            & {
-              padding-left: $base + $unit !important;
-            }
-
-            html body &-sub > *,
-            &-sun > * > * {
-              padding-left: $base + $unit;
-            }
-          }
-        }
-      }
-
-      &r,
-      &x,
-      & {
-        &-#{$sz} {
-          @at-root {
-            & {
-              padding-right: $base + $unit !important;
-            }
-
-            html body &-sub > *,
-            &-sun > * > * {
-              padding-right: $base + $unit;
-            }
-          }
-        }
-      }
-
-      &t,
-      &y,
-      & {
-        &-#{$sz} {
-          @at-root {
-            & {
-              padding-top: $base + $unit !important;
-            }
-
-            html body &-sub > *,
-            &-sun > * > * {
-              padding-top: $base + $unit;
-            }
-          }
-        }
-      }
-
-      &b,
-      &y,
-      & {
-        &-#{$sz} {
-          @at-root {
-            & {
-              padding-bottom: $base + $unit !important;
-            }
-
-            html body &-sub > *,
-            &-sun > * > * {
-              padding-bottom: $base + $unit;
-            }
-          }
-        }
-      }
-    }
-
-    // 外边距
-    .#{$media}m {
-      &l,
-      &x,
-      & {
-        &-#{$sz} {
-          @at-root {
-            & {
-              margin-left: $base + $unit !important;
-            }
-
-            html body &-sub > *,
-            &-sun > * > * {
-              margin-left: $base + $unit;
-            }
-          }
-
-          // 子集
-          &-sub > *,
-          &-sun > * > * {
-            &:first-child {
-              margin-left: 0;
-            }
-          }
-        }
-      }
-
-      &r,
-      &x,
-      & {
-        &-#{$sz} {
-          @at-root {
-            & {
-              margin-right: $base + $unit !important;
-            }
-
-            html body &-sub > *,
-            &-sun > * > * {
-              margin-right: $base + $unit;
-            }
-          }
-
-          // 子集
-          &-sub > *,
-          &-sun > * > * {
-            &:last-child {
-              margin-right: 0;
-            }
-          }
-        }
-      }
-
-      &t,
-      &y,
-      & {
-        &-#{$sz} {
-          @at-root {
-            & {
-              margin-top: $base + $unit !important;
-            }
-
-            html body &-sub > *,
-            &-sun > * > * {
-              margin-top: $base + $unit;
-            }
-          }
-        }
-      }
-
-      &b,
-      &y,
-      & {
-        &-#{$sz} {
-          @at-root {
-            & {
-              margin-bottom: $base + $unit !important;
-            }
-
-            html body &-sub > *,
-            &-sun > * > * {
-              margin-bottom: $base + $unit;
-            }
-          }
-        }
-      }
-    }
-    .#{$media}-m {
-      &l,
-      &x,
-      & {
-        &-#{$sz} {
-          @at-root {
-            & {
-              margin-left: -($base + $unit) !important;
-            }
-          }
-        }
-      }
-
-      &r,
-      &x,
-      & {
-        &-#{$sz} {
-          @at-root {
-            & {
-              margin-right: -($base + $unit) !important;
-            }
-          }
-        }
-      }
-
-      &t,
-      &y,
-      & {
-        &-#{$sz} {
-          @at-root {
-            & {
-              margin-top: -($base + $unit) !important;
-            }
-          }
-        }
-      }
-
-      &b,
-      &y,
-      & {
-        &-#{$sz} {
-          @at-root {
-            & {
-              margin-bottom: -($base + $unit) !important;
-            }
-          }
-        }
-      }
-    }
-
     @if ($sz == xs) {
       $base: 0;
     }
@@ -450,6 +271,76 @@ $dimension-l: (
     }
   }
 
+  // 内边距：总项 < 轴向 < 单边
+  @each $sz, $value in $_spacing-scale {
+    @include _spacing-utility(
+      $media,
+      "n",
+      $sz,
+      $value,
+      (padding-top, padding-right, padding-bottom, padding-left)
+    );
+  }
+  @each $sz, $value in $_spacing-scale {
+    @include _spacing-utility($media, "nx", $sz, $value, (padding-left, padding-right));
+    @include _spacing-utility($media, "ny", $sz, $value, (padding-top, padding-bottom));
+  }
+  @each $sz, $value in $_spacing-scale {
+    @include _spacing-utility($media, "nt", $sz, $value, (padding-top,));
+    @include _spacing-utility($media, "nr", $sz, $value, (padding-right,));
+    @include _spacing-utility($media, "nb", $sz, $value, (padding-bottom,));
+    @include _spacing-utility($media, "nl", $sz, $value, (padding-left,));
+  }
+
+  // 外边距：总项 < 轴向 < 单边
+  @each $sz, $value in $_spacing-scale {
+    @include _spacing-utility(
+      $media,
+      "m",
+      $sz,
+      $value,
+      (margin-top, margin-right, margin-bottom, margin-left)
+    );
+    @include _margin-edge-reset($media, "m", $sz, margin-left, first-child);
+    @include _margin-edge-reset($media, "m", $sz, margin-right, last-child);
+  }
+  @each $sz, $value in $_spacing-scale {
+    @include _spacing-utility($media, "mx", $sz, $value, (margin-left, margin-right));
+    @include _margin-edge-reset($media, "mx", $sz, margin-left, first-child);
+    @include _margin-edge-reset($media, "mx", $sz, margin-right, last-child);
+    @include _spacing-utility($media, "my", $sz, $value, (margin-top, margin-bottom));
+  }
+  @each $sz, $value in $_spacing-scale {
+    @include _spacing-utility($media, "mt", $sz, $value, (margin-top,));
+    @include _spacing-utility($media, "mr", $sz, $value, (margin-right,));
+    @include _margin-edge-reset($media, "mr", $sz, margin-right, last-child);
+    @include _spacing-utility($media, "mb", $sz, $value, (margin-bottom,));
+    @include _spacing-utility($media, "ml", $sz, $value, (margin-left,));
+    @include _margin-edge-reset($media, "ml", $sz, margin-left, first-child);
+  }
+
+  // 负外边距：总项 < 轴向 < 单边
+  @each $sz, $value in $_spacing-scale {
+    @include _spacing-utility(
+      $media,
+      "-m",
+      $sz,
+      -($value),
+      (margin-top, margin-right, margin-bottom, margin-left),
+      false
+    );
+  }
+  @each $sz, $value in $_spacing-scale {
+    @include _spacing-utility($media, "-mx", $sz, -($value), (margin-left, margin-right), false);
+    @include _spacing-utility($media, "-my", $sz, -($value), (margin-top, margin-bottom), false);
+  }
+  @each $sz, $value in $_spacing-scale {
+    @include _spacing-utility($media, "-mt", $sz, -($value), (margin-top,), false);
+    @include _spacing-utility($media, "-mr", $sz, -($value), (margin-right,), false);
+    @include _spacing-utility($media, "-mb", $sz, -($value), (margin-bottom,), false);
+    @include _spacing-utility($media, "-ml", $sz, -($value), (margin-left,), false);
+  }
+
   // 宽度
   @include dimension-scale($media, "w", width);
   @include dimension-scale($media, "min-w", min-width);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/css",
-  "version": "4.0.2",
+  "version": "4.2.0",
   "description": "neatui",
   "main": "./neatui.scss",
   "license": "MIT",