@neatui/css 5.3.0 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @neatui/css 更新记录
 
+## 5.5.0
+
+### 不兼容变更：换行只用 `ui-wrap`
+
+- 移除 `.wrap`、`.nowrap` 及 `pad:`、`mob:` 换行类。
+- `ui-wrap` 新增 `no`（不换行）。迁移：`nowrap` → `ui-wrap="no"`，`wrap` → `ui-wrap="all"`，`mob:wrap` → `ui-wrap="=mob"`，`pad:wrap` → `ui-wrap="<dpc"`。
+
 ## 5.2.1
 
 - `ui-icon="close"`：图案放大到 80%，线条更细；`steps` 内部使用的 `%icon-close` 不变。

package/GUIDE.md

@@ -933,6 +933,33 @@ dpc, dpc-s, dpc-m, dpc-l
 
 除两个兼容空端点外，命中的规则都使用 `display: none !important`。
 
+### 按断点换行 `ui-wrap`
+
+换行只用 `ui-wrap`（`wrap`、`nowrap` 及 `pad:`、`mob:` 换行类已移除）。三类取值：
+
+- `no`：不换行（`no` + `wrap`，对应 CSS `nowrap`）。
+- `all`：全部换行。
+- 断点值：与 `ui-hide` 相同（`>`、`<`、`=` + 九档细分值或设备段别名），可用空格组合，列出的范围换行、其余不换行。
+
+| 换行的端 | 写法 |
+| --- | --- |
+| 都不换行 | `ui-wrap="no"` |
+| 仅移动 | `ui-wrap="=mob"` |
+| 仅平板 | `ui-wrap="=pad"` |
+| 仅桌面 | `ui-wrap="=dpc"` |
+| 移动 + 平板 | `ui-wrap="<dpc"` |
+| 平板 + 桌面 | `ui-wrap=">mob"` |
+| 移动 + 桌面 | `ui-wrap="=mob =dpc"` |
+| 都换行 | `ui-wrap="all"` |
+
+```html
+<!-- 仅中平板档（960px–1119px）换行 -->
+<div ui-wrap="=pad-m">...</div>
+```
+
+迁移：`nowrap` → `ui-wrap="no"`，`wrap` → `ui-wrap="all"`，`mob:wrap` → `ui-wrap="=mob"`，`pad:wrap` → `ui-wrap="<dpc"`。
+`all` 不带媒体查询，比 `=mob =pad =dpc` 更可靠（后者在断点间的小数宽度，如 799.5px，不会命中）。
+
 ### 响应式 class 前缀
 
 组件级 class 使用 `base → pad → mob` 三层覆盖；`pad:` 在最大 1279px 生效，

package/core/basic.scss

@@ -1,5 +1,6 @@
 @use "./media.scss" as *;
 @use "./vars.scss" as *;
+@use "sass:list";
 
 @mixin base($d: "") {
   .#{$d}w-auto {
@@ -177,13 +178,6 @@
     overflow-y: auto;
   }
 
-  .#{$d}wrap {
-    white-space: normal;
-  }
-  .#{$d}nowrap {
-    white-space: nowrap;
-  }
-
   .#{$d}upper {
     text-transform: uppercase;
   }
@@ -204,6 +198,34 @@
   @include base("mob\\:");
 }
 
+// 换行只用 ui-wrap（已移除 wrap / nowrap 类）：
+// no = 不换行（no + wrap，同 CSS nowrap）；all = 全部换行；
+// 断点值同 ui-hide（>pad / <pad / =pad 及九档细分值），可空格组合，列出的范围换行、其余不换行
+[ui-wrap],
+[ui-wrap~='no'] {
+  white-space: nowrap;
+}
+[ui-wrap~='all'] {
+  white-space: normal;
+}
+@each $q in ('>', '<', '=') {
+  @each $sz in $level {
+    $n: #{list.nth($sz, 1)};
+    [ui-wrap~='#{$q}#{$n}'] {
+      @include med('#{$q}#{$n}') {
+        white-space: normal;
+      }
+    }
+  }
+}
+@each $p in ('>mob', '>pad', '<pad', '<dpc', '=mob', '=pad', '=dpc') {
+  [ui-wrap~='#{$p}'] {
+    @include med($p) {
+      white-space: normal;
+    }
+  }
+}
+
 // 代码
 code,
 .code {

package/dist/neatui.css

@@ -601,14 +601,6 @@ sup{
   overflow-y:auto;
 }
 
-.wrap{
-  white-space:normal;
-}
-
-.nowrap{
-  white-space:nowrap;
-}
-
 .upper{
   text-transform:uppercase;
 }
@@ -765,12 +757,6 @@ sup{
   .pad\:scroll-y{
     overflow-y:auto;
   }
-  .pad\:wrap{
-    white-space:normal;
-  }
-  .pad\:nowrap{
-    white-space:nowrap;
-  }
   .pad\:upper{
     text-transform:uppercase;
   }
@@ -926,12 +912,6 @@ sup{
   .mob\:scroll-y{
     overflow-y:auto;
   }
-  .mob\:wrap{
-    white-space:normal;
-  }
-  .mob\:nowrap{
-    white-space:nowrap;
-  }
   .mob\:upper{
     text-transform:uppercase;
   }
@@ -939,6 +919,206 @@ sup{
     text-transform:lowercase;
   }
 }
+[ui-wrap],[ui-wrap~=no]{
+  white-space:nowrap;
+}
+
+[ui-wrap~=all]{
+  white-space:normal;
+}
+
+@media screen and (min-width:480px){
+  [ui-wrap~=">mob-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:640px){
+  [ui-wrap~=">mob-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:800px){
+  [ui-wrap~=">mob-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:960px){
+  [ui-wrap~=">pad-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1120px){
+  [ui-wrap~=">pad-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1280px){
+  [ui-wrap~=">pad-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1440px){
+  [ui-wrap~=">dpc-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1600px){
+  [ui-wrap~=">dpc-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:479px){
+  [ui-wrap~="<mob-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:639px){
+  [ui-wrap~="<mob-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:799px){
+  [ui-wrap~="<pad-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:959px){
+  [ui-wrap~="<pad-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:1119px){
+  [ui-wrap~="<pad-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:1279px){
+  [ui-wrap~="<dpc-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:1439px){
+  [ui-wrap~="<dpc-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:1599px){
+  [ui-wrap~="<dpc-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:479px){
+  [ui-wrap~="=mob-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:480px) and (max-width:639px){
+  [ui-wrap~="=mob-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:640px) and (max-width:799px){
+  [ui-wrap~="=mob-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:800px) and (max-width:959px){
+  [ui-wrap~="=pad-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:960px) and (max-width:1119px){
+  [ui-wrap~="=pad-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1120px) and (max-width:1279px){
+  [ui-wrap~="=pad-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1280px) and (max-width:1439px){
+  [ui-wrap~="=dpc-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1440px) and (max-width:1599px){
+  [ui-wrap~="=dpc-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1600px){
+  [ui-wrap~="=dpc-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:800px){
+  [ui-wrap~=">mob"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1280px){
+  [ui-wrap~=">pad"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:799px){
+  [ui-wrap~="<pad"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:1279px){
+  [ui-wrap~="<dpc"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:799px){
+  [ui-wrap~="=mob"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:800px) and (max-width:1279px){
+  [ui-wrap~="=pad"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1280px){
+  [ui-wrap~="=dpc"]{
+    white-space:normal;
+  }
+}
+
 .code,code{
   font-family:Menlo,Monaco,Courier New,monospace;
   -webkit-font-smoothing:antialiased;