@neatui/vue 5.3.0 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @neatui/vue 更新记录
 
+## 5.5.0
+
+### 换行改用 `ui-wrap`
+- 所有组件内部的 `nowrap` 类替换为 `ui-wrap="no"`，显示效果不变。
+- TableLoader：表头与单元格默认 `ui-wrap="=mob"`（桌面、平板不换行，移动端卡片换行）；在 `thead` / `attrs` 写 `ui-wrap` 即整体替换，`'no'` 为三端不换行。不再识别 `wrap` / `nowrap` class。
+
 ## 5.2.1
 
 ### IFollowView（移动端底部面板）

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "5.3.0",
+  "version": "5.5.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
     "@fekit/utils": "^6.0.0",
-    "@neatui/css": "^5.3.0",
+    "@neatui/css": "^5.5.0",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

package/src/components/form/Cascader.vue

@@ -15,7 +15,7 @@
             <ul v-if="opt?.length" class="min-h-ms*s max-h-xl*s" :class="`nx-sm lh-ml ${optIndex === 0 ? '' : 'bl-xs b-back b-solid'}`" ui-scroll=":y s">
               <!-- 多选 -->
               <template v-if="multiple">
-                <li v-for="(item, idx) of opt" :key="idx" class="ux-hover nx-sm r-ss nowrap" @click="multiSelect(item, optIndex)">
+                <li v-for="(item, idx) of opt" :key="idx" class="ux-hover nx-sm r-ss" ui-wrap="no" @click="multiSelect(item, optIndex)">
                   <div ui-flex="row xm">
                     <div :ui-form="`${theme} type:checkbox :block`">
                       <input
@@ -38,7 +38,7 @@
                   v-for="(item, idx) of opt"
                   :key="idx"
                   :class="item.value === state.transSelected?.value ? 'co-main' : ''"
-                  class="ux-hover nx-sm r-ss nowrap"
+                  class="ux-hover nx-sm r-ss" ui-wrap="no"
                   @click="select(item, optIndex)"
                 >
                   <IFollowView :ui-tips="uiTips" v-if="item.optTips" event="hover">
@@ -47,7 +47,7 @@
                       <i v-if="item.children?.length" :class="`icon icon-next ${state.transSelected.value[optIndex] === item.value ? 'co-main' : 'co-note'}`"></i>
                     </div>
                     <template #tips>
-                      <div class="nowrap">{{ item.optTips }}</div>
+                      <div ui-wrap="no">{{ item.optTips }}</div>
                     </template>
                   </IFollowView>
                   <div v-else ui-flex="row xm">
@@ -67,11 +67,11 @@
           </li>
           <li ui-flex="row xm">
             <div v-if="!multiple">
-              <p class="nx-sm r-ss nowrap">
+              <p class="nx-sm r-ss" ui-wrap="no">
                 <span>单选</span>
               </p>
             </div>
-            <label v-else class="nx-sm r-ss nowrap" :ui-form="`${theme} type:checkbox :block`">
+            <label v-else class="nx-sm r-ss" ui-wrap="no" :ui-form="`${theme} type:checkbox :block`">
               <input :checked="state.checkAll" name="checkAll" type="checkbox" @change="checkAllChange" />
               <span :class="`${state.checkAll ? 'co-main' : ''}`">全选</span>
             </label>

package/src/components/form/DateRangeView.vue

@@ -67,7 +67,7 @@
                       <span>{{ item.day }}</span>
                     </div>
                   </div>
-                  <div class="pa w-full lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 110%" ui-flex="row ct" v-html="extras(item)"></div>
+                  <div class="pa w-full lh-xs ny-ss ob-no ol-no s-ml bold" ui-wrap="no" style="transform-origin: 50% 110%" ui-flex="row ct" v-html="extras(item)"></div>
                 </div>
               </li>
             </ul>
@@ -141,7 +141,7 @@
                       <span>{{ item.day }}</span>
                     </div>
                   </div>
-                  <div class="pa w-full lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 110%" ui-flex="row ct" v-html="extras(item)"></div>
+                  <div class="pa w-full lh-xs ny-ss ob-no ol-no s-ml bold" ui-wrap="no" style="transform-origin: 50% 110%" ui-flex="row ct" v-html="extras(item)"></div>
                 </div>
               </li>
             </ul>
@@ -152,12 +152,12 @@
     <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="nx-sl ny-sl b-solid b-line-o-ls bt-xs">
       <div ui-flex="row lm" class="nl-ss">
         <p v-if="sta.value || end.value">
-          <span class="nowrap">已选：</span>
+          <span ui-wrap="no">已选：</span>
           <span>{{ sta.value || '-' }} ~ {{ end.value || '-' }}</span>
         </p>
         <div v-else-if="com.shortcuts?.length" ui-flex="row lm">
-          <span class="nowrap">推荐：</span>
-          <div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss nowrap fs-sl dib-sub" ui-scroll=":x y:hidden">
+          <span ui-wrap="no">推荐：</span>
+          <div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss fs-sl dib-sub" ui-wrap="no" ui-scroll=":x y:hidden">
             <p v-for="(item, idx) in com.shortcuts" :key="idx" class="bg-main-o-xs co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
             <p class="bg-main-o-xs co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
           </div>

package/src/components/form/DateView.vue

@@ -7,15 +7,15 @@
         </div>
       </div>
       <div ui-btns="@a none s" @click="setPanelType()">
-        <p v-if="state.type === 2" class="nowrap" ui-flex="row cm">
+        <p v-if="state.type === 2" ui-wrap="no" ui-flex="row cm">
           <b class="nx-ss">{{ panel.sta }}年</b>
           <span class="nx-xs">-</span>
           <b class="nx-ss">{{ panel.end }}年</b>
         </p>
-        <p v-else-if="state.type === 1" class="nowrap" ui-flex="row cm">
+        <p v-else-if="state.type === 1" ui-wrap="no" ui-flex="row cm">
           <b class="nx-ss">{{ state.curr.y }}年</b>
         </p>
-        <p v-else class="nowrap" ui-flex="row cm">
+        <p v-else ui-wrap="no" ui-flex="row cm">
           <b class="nx-xs">{{ state.curr.y }}年</b>
           <b class="nx-xs">{{ state.curr.M }}月</b>
         </p>
@@ -106,7 +106,7 @@
                   <span>{{ item.day }}</span>
                 </div>
               </div>
-              <div class="pa w-full lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 100%" ui-flex="row ct" v-html="extras(item)"></div>
+              <div class="pa w-full lh-xs ny-ss ob-no ol-no s-ml bold" ui-wrap="no" style="transform-origin: 50% 100%" ui-flex="row ct" v-html="extras(item)"></div>
             </div>
           </li>
         </ul>
@@ -165,7 +165,7 @@
           <!-- <span v-if="!state.isNoTime" :anim-editing="state.type === baseType" class="nx-ss">{{ idate(state.panel).format('HH:mm:ss') }}</span> -->
         </div>
         <div v-else-if="state.shortcuts?.length" ui-flex="row lm">
-          <div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss nowrap fs-sl dib-sub" ui-scroll=":x y:hidden">
+          <div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss fs-sl dib-sub" ui-wrap="no" ui-scroll=":x y:hidden">
             <p v-for="(item, idx) in state.shortcuts" :key="idx" class="bg-main-o-ss co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
             <p class="bg-main-o-ss co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
           </div>

package/src/components/form/MoreSelect.vue

@@ -22,13 +22,13 @@
         </div>
         <ul v-if="state.filter?.length" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
           <template v-for="(item, idx) of state.filter" :key="idx">
-            <li v-if="item.disabled" class="ux-hover nx-sm r-ss o-ms nowrap">
+            <li v-if="item.disabled" class="ux-hover nx-sm r-ss o-ms" ui-wrap="no">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="state.processedValue?.some((i: any) => `${i}` === `${item.value}`)" />
                 <del class="ml-sm">{{ item.label || item }}</del>
               </label>
             </li>
-            <li v-else class="ux-hover nx-sm r-ss nowrap" @click.stop="select(item.value)">
+            <li v-else class="ux-hover nx-sm r-ss" ui-wrap="no" @click.stop="select(item.value)">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="state.processedValue?.some((i: any) => `${i}` === `${item.value}`)" />
                 <span class="ml-sm">{{ item.label || item }}</span>
@@ -40,7 +40,7 @@
         <ul class="nx-sm lh-sl" v-if="tools">
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
-            <div class="ux-hover nx-sm ny-ss r-ss nowrap co-main" @click.stop="allselect()">
+            <div class="ux-hover nx-sm ny-ss r-ss co-main" ui-wrap="no" @click.stop="allselect()">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="state.all" />
                 <span class="ml-sm">全选({{ state.selectedCount }}/{{ state.availableCount }})</span>

package/src/components/form/MoreSelectPanel.vue

@@ -33,7 +33,7 @@
         <ul class="nx-sm lh-ml" v-if="tools">
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
-            <div class="ux-hover nx-sm r-ss nowrap co-main" @click.stop="allselect()">
+            <div class="ux-hover nx-sm r-ss co-main" ui-wrap="no" @click.stop="allselect()">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="state.name" :checked="state.all" />
                 <span class="ml-sm">全选({{ props.options?.length || 0 }})</span>

package/src/components/form/MoreSelectPicker.vue

@@ -13,7 +13,7 @@
           <div class="flex-block">
             <IScrollView class="full n-ms" :pull="false" :load="false">
               <ul v-if="props.options?.length" class="my-sm-sub">
-                <li class="ux-hover n-sm r-ss nowrap b-solid b-case b-xs" v-for="(item, idx) of props.options" :key="idx" @click.stop="select(item.value)">
+                <li class="ux-hover n-sm r-ss b-solid b-case b-xs" ui-wrap="no" v-for="(item, idx) of props.options" :key="idx" @click.stop="select(item.value)">
                   <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                     <input type="checkbox" :name="field" :checked="mv?.some((i: any) => `${i}` === `${item.value}`)" />
                     <span class="ml-sm">{{ item.label || item }}</span>

package/src/components/form/MoreSelectTree.vue

@@ -33,7 +33,7 @@
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
             <div class="co-main">
-              <p class="nx-sm r-ss nowrap">
+              <p class="nx-sm r-ss" ui-wrap="no">
                 <span>{{ state.count }}个可选项</span>
               </p>
             </div>

package/src/components/form/PageMoreSelect.vue

@@ -17,7 +17,7 @@
           </div>
         </div>
         <ul v-if="props.options?.length" ui-form-dropdown="" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
-          <li class="ux-hover nx-sm r-ss nowrap" v-for="(item, idx) of props.options" :key="idx" @click.stop="select(item.value)">
+          <li class="ux-hover nx-sm r-ss" ui-wrap="no" v-for="(item, idx) of props.options" :key="idx" @click.stop="select(item.value)">
             <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
               <input type="checkbox" :name="formName" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
               <span class="ml-sm">{{ item.label || item }}</span>
@@ -28,7 +28,7 @@
         <ul class="nx-sm lh-ml" v-if="tools">
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
-            <div class="ux-hover nx-sm r-ss nowrap co-main" @click.stop="allselect()">
+            <div class="ux-hover nx-sm r-ss co-main" ui-wrap="no" @click.stop="allselect()">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="formName" :checked="state.all" />
                 <!-- <span class="ml-sm">全选({{ props.options?.length || 0 }})</span> -->

package/src/components/form/PageSelect.vue

@@ -15,7 +15,7 @@
           </div>
         </div>
         <ul v-if="props.options?.length" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 16em">
-          <li class="ux-hover nx-sm r-ss nowrap" :class="item.value === state.selectd?.value ? 'co-main' : ''" v-for="(item, idx) of options" :key="idx" @click="select(item)">
+          <li class="ux-hover nx-sm r-ss" ui-wrap="no" :class="item.value === state.selectd?.value ? 'co-main' : ''" v-for="(item, idx) of options" :key="idx" @click="select(item)">
             {{ item.label || item }}
           </li>
         </ul>

package/src/components/form/SearchMoreSelect.vue

@@ -15,7 +15,7 @@
           </div>
         </div>
         <ul v-if="props.options?.length" ui-form-dropdown="" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
-          <li class="ux-hover nx-sm r-ss nowrap" v-for="(item, idx) of state.filter" :key="idx" @click.stop="select(item.value)">
+          <li class="ux-hover nx-sm r-ss" ui-wrap="no" v-for="(item, idx) of state.filter" :key="idx" @click.stop="select(item.value)">
             <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
               <input type="checkbox" :name="formName" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
               <span class="ml-sm">{{ item.label || item }}</span>
@@ -26,7 +26,7 @@
         <ul class="nx-sm lh-ml" v-if="tools">
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
-            <div class="ux-hover nx-sm r-ss nowrap co-main" @click.stop="allselect()">
+            <div class="ux-hover nx-sm r-ss co-main" ui-wrap="no" @click.stop="allselect()">
               <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
                 <input type="checkbox" :name="formName" :checked="state.all" />
                 <span class="ml-sm">全选({{ state.filter?.length || 0 }})</span>

package/src/components/form/SearchSelect.vue

@@ -18,7 +18,7 @@
         </div>
         <ul v-if="props.options?.length" ui-scroll=":y s" class="nx-sm lh-sl" style="min-width: 100%; max-height: 16em">
           <li
-            class="ux-hover nx-sm ny-ss r-ss nowrap"
+            class="ux-hover nx-sm ny-ss r-ss" ui-wrap="no"
             :class="item.value === state.selectd?.value ? 'co-main' : ''"
             v-for="(item, idx) of state.filter"
             :key="idx"
@@ -32,7 +32,7 @@
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
             <div class="co-main">
-              <p class="nx-sm r-ss nowrap">
+              <p class="nx-sm r-ss" ui-wrap="no">
                 <span>{{ state.filter?.length || 0 }}个可选项</span>
               </p>
             </div>

package/src/components/form/Select.vue

@@ -21,10 +21,10 @@
         </div>
         <ul v-if="state.filter?.length" ui-scroll=":y s" class="nx-sm lh-sl" style="min-width: 100%; max-height: 16em">
           <template v-for="(item, idx) of state.filter" :key="idx">
-            <li v-if="item.disabled" class="ux-hover nx-sm ny-ss r-ss o-ms nowrap" :class="isItemSelected(item) ? 'co-main' : ''">
+            <li v-if="item.disabled" class="ux-hover nx-sm ny-ss r-ss o-ms" ui-wrap="no" :class="isItemSelected(item) ? 'co-main' : ''">
               <del>{{ item.label || item }}</del>
             </li>
-            <li v-else class="ux-hover nx-sm ny-ss r-ss nowrap" :class="isItemSelected(item) ? 'co-main' : ''" @click="select(item)">
+            <li v-else class="ux-hover nx-sm ny-ss r-ss" ui-wrap="no" :class="isItemSelected(item) ? 'co-main' : ''" @click="select(item)">
               <span>{{ item.label || item }}</span>
             </li>
           </template>
@@ -51,7 +51,7 @@
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
             <div class="co-main">
-              <p class="nx-sm r-ss nowrap">
+              <p class="nx-sm r-ss" ui-wrap="no">
                 <span>{{ state.availableCount }}个可选项</span>
               </p>
             </div>

package/src/components/form/SelectTree/SelectTree.vue

@@ -24,7 +24,7 @@
           <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
           <li ui-flex="row xm">
             <div class="co-main">
-              <p class="nx-sm r-ss nowrap">
+              <p class="nx-sm r-ss" ui-wrap="no">
                 <span>{{ state.filter?.length || 0 }}个可选项</span>
               </p>
             </div>

package/src/components/loader/LayerLoader/LayerLoader.vue

@@ -30,7 +30,7 @@
                 <i class="icon icon-add"></i>
               </button>
               <div ui-tips-box="bl">
-                <div class="n-sm nowrap fs-sl">
+                <div class="n-sm fs-sl" ui-wrap="no">
                   <ul class="nx-sm-sub ny-ss-sub">
                     <li class="r-sm ux-hover" @click="fAddArea(item, data, path, idx)">用容器包裹</li>
                     <li class="b-solid b-line bb-xs n-no my-ss" v-if="isBoxNode(item.model)"></li>

package/src/components/loader/LimitLoader/LimitLoader.vue

@@ -22,7 +22,7 @@
         </div>
       </template>
     </div>
-    <div class="flex-fixed mr-sl-sub my-sm-sub nowrap" ui-flex="row rm" ui-hide="<pad">
+    <div class="flex-fixed mr-sl-sub my-sm-sub" ui-wrap="no" ui-flex="row rm" ui-hide="<pad">
       <IFollowView v-if="tools" tipBoxClass="nr-no">
         <button class="bg-fore" ui-btn="@a s case :border :square">
           <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="co-read fs-sl" style="width: 1em; height: 1em">
@@ -33,7 +33,7 @@
         </button>
         <template v-if="state.limit.length" #tips>
           <div class="w-ml*s max-h-xl*s n-sl" ui-scroll="x:hidden :y">
-            <div v-for="(item, idx) in state.limit" :key="idx" class="item ux-hover nowrap r-ss">
+            <div v-for="(item, idx) in state.limit" :key="idx" class="item ux-hover r-ss" ui-wrap="no">
               <label class="ny-xs nx-sm" ui-form="@a type:checkbox">
                 <input :checked="!item._close" type="checkbox" @change="item._close = item._close ? 0 : 1" />
                 <span>{{ item.label }}</span>

package/src/components/loader/TableLoader/TableLoader.vue

@@ -41,7 +41,7 @@
                       <div class="w-ml*s h-ll*s n-sl" ui-scroll="x:hidden :y">
                         <IDraggable v-model:lists="state.table">
                           <template #default="{ item: element, idx: index }">
-                            <div :class="`item ux-hover nowrap r-ss ${element.fixed ? 'forbid' : 'element'}`" :key="index">
+                            <div :class="`item ux-hover r-ss ${element.fixed ? 'forbid' : 'element'}`" ui-wrap="no" :key="index">
                               <label ui-form="@a type:checkbox" class="ny-xs nx-sl">
                                 <input type="checkbox" :checked="!element.__close" @change="element.__close = element.__close ? 0 : 1" />
                                 <span>
@@ -65,7 +65,7 @@
             col-fixed="r"
             :col-fixed-side="fixedSide('__operate')"
             :style="fixedStyle('__operate')"
-            class="fs-sl nowrap ar"
+            class="fs-sl ar" ui-wrap="no"
           >
             <div ui-flex="row rm">
               <span>{{ words['operate'] || '操作' }}</span>
@@ -77,7 +77,7 @@
                   <div class="w-ml*s h-ll*s n-sl" ui-scroll="x:hidden :y">
                     <IDraggable v-model:lists="state.table">
                       <template #default="{ item: element, idx: index }">
-                        <div :class="`item ux-hover nowrap r-ss ${element.fixed ? 'forbid' : 'element'}`" :key="index">
+                        <div :class="`item ux-hover r-ss ${element.fixed ? 'forbid' : 'element'}`" ui-wrap="no" :key="index">
                           <label ui-form="@a type:checkbox" class="ny-xs nx-sl">
                             <input type="checkbox" :checked="!element.__close" @change="element.__close = element.__close ? 0 : 1" />
                             <span>
@@ -176,7 +176,7 @@
               <template #tips>
                 <IDraggable v-model:lists="state.table">
                   <template #default="{ item: element, idx: index }">
-                    <div class="item ux-hover nowrap r-ss" :key="index">
+                    <div class="item ux-hover r-ss" ui-wrap="no" :key="index">
                       <label ui-form="@a type:checkbox" class="ny-xs nx-sl">
                         <input type="checkbox" :checked="!element.__close" @change="element.__close = element.__close ? 0 : 1" />
                         <span>{{ element.label }}</span>
@@ -194,7 +194,7 @@
               <tbody>
                 <template v-for="(col, cid) in state.table" :key="cid">
                   <tr v-if="!col.__close">
-                    <td class="nowrap vt n-ss">{{ col.label }}:</td>
+                    <td class="vt n-ss" ui-wrap="no">{{ col.label }}:</td>
                     <td class="n-ss">
                       <TableRender :node="col" :data="item" />
                     </td>
@@ -216,7 +216,7 @@
                   <tbody>
                     <template v-for="(col, cid) in state.table" :key="cid">
                       <tr v-if="!col.__close && childHas(col, child)">
-                        <td class="nowrap vt n-ss">{{ col.label }}:</td>
+                        <td class="vt n-ss" ui-wrap="no">{{ col.label }}:</td>
                         <td class="n-ss">
                           <TableRender :node="col" :data="child" />
                         </td>
@@ -238,7 +238,7 @@
                       <tbody>
                         <template v-for="(col, cid) in state.table" :key="cid">
                           <tr v-if="!col.__close && childHas(col, grand)">
-                            <td class="nowrap vt n-ss">{{ col.label }}:</td>
+                            <td class="vt n-ss" ui-wrap="no">{{ col.label }}:</td>
                             <td class="n-ss">
                               <TableRender :node="col" :data="grand" />
                             </td>
@@ -449,9 +449,8 @@
           // 表头属性处理
           col.thead ??= {};
           col.thead.class = (col.thead.class || '').split(/\s+/);
-          if (!col.thead.class.some((c: any) => c === 'wrap' || c === 'nowrap')) {
-            col.thead.class.push('nowrap');
-          }
+          // 换行：未配置 ui-wrap（null / undefined）时默认仅移动端换行；'' 表示三端都不换行
+          if (col.thead['ui-wrap'] == null) col.thead['ui-wrap'] = '=mob';
           // 如果没有以 fs- 开头的类，就加 fs-sl
           if (!col.thead.class.some((c: string) => /^fs-/.test(c))) {
             col.thead.class.push('fs-sl');

package/src/components/loader/TableLoader/TableRender.vue

@@ -66,15 +66,8 @@
     if (!attrs) attrs = {};
     else attrs = { ...attrs };
 
-    // 处理 class 属性
-    if (attrs.class) {
-      attrs.class = attrs.class.split(/\s+/);
-      if (!attrs.class.some((c: string) => c === 'wrap' || c === 'nowrap')) {
-        attrs.class.push('nowrap');
-      }
-    } else {
-      attrs.class = ['nowrap'];
-    }
+    // 换行：未配置 ui-wrap（null / undefined）时默认仅移动端换行；'' 表示三端都不换行
+    if (attrs['ui-wrap'] == null) attrs['ui-wrap'] = '=mob';
 
     return attrs;
   });

package/src/components/tools/FormDraftsView.vue

@@ -17,7 +17,7 @@
       <ul v-if="state.detail" class="mb-sl fs-sl" ui-scroll=":y" style="max-height: 20rem">
         <template v-for="(item, idx) in state.diffs" :key="idx">
           <li v-if="item.label" ui-flex="row lm" class="bb-xs b-line b-solid ny-ss">
-            <span class="nx-ss r-sm mr-sm ux-hover nowrap" @click="fScrollToField(item.domId)">[{{ item.label }}]</span>
+            <span class="nx-ss r-sm mr-sm ux-hover" ui-wrap="no" @click="fScrollToField(item.domId)">[{{ item.label }}]</span>
             <span v-if="item.lhsLabel" class="nx-ss r-sm ux-hover" ui-flex="row lm" @click="fDiscardDrafts(item)">
               <i class="icon icon-cloud co-well o-mm mr-xs"></i>
               <span ui-omit="1">{{ item.lhsLabel }}</span>

package/src/components/tools/MoreTools.vue

@@ -5,7 +5,7 @@
       <slot name="prefix"></slot>
       <slot>
         <div>
-          <h6 class="fs-sm o-mm nowrap">每页显示数量</h6>
+          <h6 class="fs-sm o-mm" ui-wrap="no">每页显示数量</h6>
           <div ui-btns="@a line s :group :border">
             <button @click="setLinkMode('default')"><code :class="`${state.tools.confs.linkMode === 'default' ? 'co-main' : ''}`">跳转</code></button>
             <button @click="setLinkMode('preview')"><code :class="`${state.tools.confs.linkMode === 'preview' ? 'co-main' : ''}`">预览</code></button>
@@ -14,7 +14,7 @@
         </div>
         <div ui-line="@a" class="mt-sm mb-ss"></div>
         <div>
-          <h6 class="fs-sm o-mm nowrap">每页显示数量</h6>
+          <h6 class="fs-sm o-mm" ui-wrap="no">每页显示数量</h6>
           <div ui-btns="@a line s :group :border">
             <button @click="setPageSize(10)"><code :class="`${state.tools.param.pageSize === 10 ? 'co-main' : ''}`">10</code></button>
             <button @click="setPageSize(20)"><code :class="`${state.tools.param.pageSize === 20 ? 'co-main' : ''}`">20</code></button>

package/src/components/tools/Pagination@a.vue

@@ -89,14 +89,14 @@
           <slot name="setting">
             <ul class="n-ms mb-sm-sub">
               <li>
-                <h6 class="fs-sm o-mm nowrap">显示总条数</h6>
+                <h6 class="fs-sm o-mm" ui-wrap="no">显示总条数</h6>
                 <label ui-form="@a type:switch">
                   <input type="checkbox" name="form2" v-model="state.showTotal" />
                   <span>{{ state.showTotal ? '' : '' }}</span>
                 </label>
               </li>
               <li>
-                <h6 class="fs-sm o-mm nowrap">每页显示数量</h6>
+                <h6 class="fs-sm o-mm" ui-wrap="no">每页显示数量</h6>
                 <ul>
                   <li v-for="item in pageSizeOptions" :key="item" @click="size(item)" class="ux-hover r-sm">
                     <code :class="`${pageSize === item ? 'co-main' : ''}`">{{ item }}条/页</code>

package/src/components/tools/Pagination@b.vue

@@ -70,7 +70,7 @@
           </div>
           <div v-if="state.list.length" ui-tips-box="tl" class="ny-sl al">
             <div class="max-h-xl*s" ui-scroll=":y s">
-              <ul class="n-ms nx-ss-sub nowrap">
+              <ul class="n-ms nx-ss-sub" ui-wrap="no">
                 <li @click="size(10)" class="ux-hover r-sm"><code :class="`${modelValue.pageSize === 10 ? 'co-main' : ''}`">10条/页</code></li>
                 <li @click="size(20)" class="ux-hover r-sm"><code :class="`${modelValue.pageSize === 20 ? 'co-main' : ''}`">20条/页</code></li>
                 <li @click="size(50)" class="ux-hover r-sm"><code :class="`${modelValue.pageSize === 50 ? 'co-main' : ''}`">50条/页</code></li>
@@ -104,14 +104,14 @@
         <slot name="setting">
           <ul class="n-ms mb-sm-sub">
             <li>
-              <h6 class="fs-sm o-mm nowrap">显示总页数</h6>
+              <h6 class="fs-sm o-mm" ui-wrap="no">显示总页数</h6>
               <label ui-form="@a type:switch">
                 <input type="checkbox" v-model="state.showTotalPages" />
                 <span>{{ state.showTotalPages ? '' : '' }}</span>
               </label>
             </li>
             <li>
-              <h6 class="fs-sm o-mm nowrap">显示总条数</h6>
+              <h6 class="fs-sm o-mm" ui-wrap="no">显示总条数</h6>
               <label ui-form="@a type:switch">
                 <input type="checkbox" v-model="state.showTotal" />
                 <span>{{ state.showTotal ? '' : '' }}</span>