@fangzhongya/fang-ui 0.1.3 → 0.1.5

package/dist/components/common/css.cjs

@@ -23,6 +23,10 @@ function setStyles(v, data, props) {
   if (height) {
     obj.height = height;
   }
+  const textAlign = v.align || props.align;
+  if (textAlign) {
+    obj.textAlign = textAlign;
+  }
   if (v.whole) {
     obj.width = "100%";
   }

package/dist/components/common/css.js

@@ -21,6 +21,10 @@ function setStyles(v, data, props) {
   if (height) {
     obj.height = height;
   }
+  const textAlign = v.align || props.align;
+  if (textAlign) {
+    obj.textAlign = textAlign;
+  }
   if (v.whole) {
     obj.width = "100%";
   }

package/dist/components/forms/index.css

@@ -599,8 +599,8 @@
 }
 .forms-div--query .forms-li {
   height: fit-content;
-  margin-top: var(--forms-query-interval);
-  margin-bottom: var(--forms-query-interval);
+  margin-top: var(--forms-interval);
+  margin-bottom: var(--forms-interval);
   margin-right: var(--forms-inline-right);
 }
 .forms-div--query .forms-li .el-form-item {

package/dist/components/forms/index.scss

@@ -65,8 +65,8 @@ $forms: 'forms';
 		}
 		.#{z($forms, 'li')} {
 			height: fit-content;
-			margin-top: var(vdm('query-interval', $forms));
-			margin-bottom: var(vdm('query-interval', $forms));
+			margin-top: var(vdm('interval', $forms));
+			margin-bottom: var(vdm('interval', $forms));
 			margin-right: var(vdm('inline-right', $forms));
 			.#{e()}form-item {
 				margin-bottom: 0;

package/dist/components/forms/src/data.cjs

@@ -109,13 +109,20 @@ const dataProps = {
     type: Boolean
   },
   /**
-   * @props { String } queryInterval='6px'
+   * @props { String } interval='6px'
    * 查询模式的上下间距
    */
-  queryInterval: {
+  interval: {
     type: String,
     default: "6px"
   },
+  /**
+   * @props { String } intervalHorizon
+   * 查询模式的左右间距
+   */
+  intervalHorizon: {
+    type: String
+  },
   /**
    * @props { String } inlineRight='32px'
    * 内连接右间距

package/dist/components/forms/src/data.d.ts

@@ -119,13 +119,20 @@ export declare const dataProps: {
         type: BooleanConstructor;
     };
     /**
-     * @props { String } queryInterval='6px'
+     * @props { String } interval='6px'
      * 查询模式的上下间距
      */
-    queryInterval: {
+    interval: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * @props { String } intervalHorizon
+     * 查询模式的左右间距
+     */
+    intervalHorizon: {
+        type: StringConstructor;
+    };
     /**
      * @props { String } inlineRight='32px'
      * 内连接右间距

package/dist/components/forms/src/data.js

@@ -107,13 +107,20 @@ const dataProps = {
     type: Boolean
   },
   /**
-   * @props { String } queryInterval='6px'
+   * @props { String } interval='6px'
    * 查询模式的上下间距
    */
-  queryInterval: {
+  interval: {
     type: String,
     default: "6px"
   },
+  /**
+   * @props { String } intervalHorizon
+   * 查询模式的左右间距
+   */
+  intervalHorizon: {
+    type: String
+  },
   /**
    * @props { String } inlineRight='32px'
    * 内连接右间距

package/dist/components/forms/src/index2.cjs

@@ -78,7 +78,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         style: vue.unref(cs).vdo({
           itemBottom: _ctx.itemBottom,
           inlineRight: _ctx.inlineRight,
-          queryInterval: _ctx.queryInterval,
+          interval: _ctx.interval,
           rowHeight: _ctx.rowHeight
         })
       }, vue.unref(attrs).root), [

package/dist/components/forms/src/index2.js

@@ -76,7 +76,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         style: unref(cs).vdo({
           itemBottom: _ctx.itemBottom,
           inlineRight: _ctx.inlineRight,
-          queryInterval: _ctx.queryInterval,
+          interval: _ctx.interval,
           rowHeight: _ctx.rowHeight
         })
       }, unref(attrs).root), [

package/dist/components/forms-drag/src/index2.cjs

@@ -106,7 +106,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         style: vue.unref(cs).vdo({
           itemBottom: _ctx.itemBottom,
           inlineRight: _ctx.inlineRight,
-          queryInterval: _ctx.queryInterval,
+          interval: _ctx.interval,
           rowHeight: _ctx.rowHeight
         })
       }, vue.unref(attrs).root), [

package/dist/components/forms-drag/src/index2.js

@@ -104,7 +104,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         style: unref(cs).vdo({
           itemBottom: _ctx.itemBottom,
           inlineRight: _ctx.inlineRight,
-          queryInterval: _ctx.queryInterval,
+          interval: _ctx.interval,
           rowHeight: _ctx.rowHeight
         })
       }, unref(attrs).root), [

package/dist/components/index.scss

@@ -116,5 +116,5 @@
 @use './paging/index.scss' as *;
 @use './tables/index.scss' as *;
 @use './tablesp/index.scss' as *;
-@use './tablesv/index.scss' as *;
-@use './tablesvp/index.scss' as *;
+@use './tabless/index.scss' as *;
+@use './tablesv/index.scss' as *;

package/dist/components/index2.scss

@@ -116,5 +116,5 @@
 @use './paging/style/index2.scss' as *;
 @use './tables/style/index2.scss' as *;
 @use './tablesp/style/index2.scss' as *;
-@use './tablesv/style/index2.scss' as *;
-@use './tablesvp/style/index2.scss' as *;
+@use './tabless/style/index2.scss' as *;
+@use './tablesv/style/index2.scss' as *;

package/dist/components/list/index.css

@@ -31,11 +31,19 @@
 }
 .list-div .list-table .list-table-td,
 .list-div .list-table .list-table-th {
-  padding: 6px;
+  padding: var(--list-interval) var(--list-interval-horizon, var(--list-interval));
 }
 .list-div .list-table .list-table-auto {
+  width: 100%;
   display: inline-flex;
-  align-items: center;
+  word-break: break-all;
+}
+.list-div .list-table .list-table-auto .list-table-td {
+  flex: 1;
+}
+.list-div .list-table .list-table-auto .is-width .list-table-label {
+  word-break: break-all;
+  white-space: normal;
 }
 .list-div .list-table .list-table-auto .list-table-label {
   white-space: nowrap;

package/dist/components/list/index.scss

@@ -23,12 +23,26 @@ $list: 'list';
 			}
 			.#{z($list, 'table-td')},
 			.#{z($list, 'table-th')} {
-				padding: 6px;
+				padding: var(vdm('interval', $list))
+					var(
+						vdm('interval-horizon', $list),
+						var(vdm('interval', $list))
+					);
 			}
 
 			.#{z($list, 'table-auto')} {
+				width: 100%;
 				display: inline-flex;
-				align-items: center;
+				word-break: break-all;
+				.#{z($list, 'table-td')} {
+					flex: 1;
+				}
+				.#{is('width')} {
+					.#{z($list, 'table-label')} {
+						word-break: break-all;
+						white-space: normal;
+					}
+				}
 				.#{z($list, 'table-label')} {
 					white-space: nowrap;
 				}

package/dist/components/list/src/data.cjs

@@ -68,6 +68,28 @@ const dataProps = {
     type: [Number, String]
     // default: '60px',
   },
+  /**
+   * @props { String } align ( )
+   * 左右位置
+   */
+  align: {
+    type: String
+  },
+  /**
+   * @props { String } labelAlign ( )
+   * 标签展示左右位置
+   */
+  labelAlign: {
+    type: String
+  },
+  /**
+   * @props { String } labelItems=center ( )
+   * 标签展示上下位置
+   */
+  labelItems: {
+    type: String,
+    default: "center"
+  },
   /**
    * @props { Boolean, String } border=true ( )
    * 是否需要边框，边框颜色
@@ -95,6 +117,21 @@ const dataProps = {
    */
   emptyDisplay: {
     type: String
+  },
+  /**
+   * @props { String } interval='8px'
+   * 查询模式的上下间距
+   */
+  interval: {
+    type: String,
+    default: "8px"
+  },
+  /**
+   * @props { String } intervalHorizon
+   * 查询模式的左右间距
+   */
+  intervalHorizon: {
+    type: String
   }
 };
 const dataEmits = ["list-events"];

package/dist/components/list/src/data.d.ts

@@ -73,6 +73,28 @@ export declare const dataProps: {
     labelWidth: {
         type: (StringConstructor | NumberConstructor)[];
     };
+    /**
+     * @props { String } align ( )
+     * 左右位置
+     */
+    align: {
+        type: StringConstructor;
+    };
+    /**
+     * @props { String } labelAlign ( )
+     * 标签展示左右位置
+     */
+    labelAlign: {
+        type: StringConstructor;
+    };
+    /**
+     * @props { String } labelItems=center ( )
+     * 标签展示上下位置
+     */
+    labelItems: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * @props { Boolean, String } border=true ( )
      * 是否需要边框，边框颜色
@@ -100,6 +122,21 @@ export declare const dataProps: {
     emptyDisplay: {
         type: StringConstructor;
     };
+    /**
+     * @props { String } interval='8px'
+     * 查询模式的上下间距
+     */
+    interval: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @props { String } intervalHorizon
+     * 查询模式的左右间距
+     */
+    intervalHorizon: {
+        type: StringConstructor;
+    };
 };
 export type DataProps = ExtractPropTypes<typeof dataProps>;
 export declare const dataEmits: string[];

package/dist/components/list/src/data.js

@@ -66,6 +66,28 @@ const dataProps = {
     type: [Number, String]
     // default: '60px',
   },
+  /**
+   * @props { String } align ( )
+   * 左右位置
+   */
+  align: {
+    type: String
+  },
+  /**
+   * @props { String } labelAlign ( )
+   * 标签展示左右位置
+   */
+  labelAlign: {
+    type: String
+  },
+  /**
+   * @props { String } labelItems=center ( )
+   * 标签展示上下位置
+   */
+  labelItems: {
+    type: String,
+    default: "center"
+  },
   /**
    * @props { Boolean, String } border=true ( )
    * 是否需要边框，边框颜色
@@ -93,6 +115,21 @@ const dataProps = {
    */
   emptyDisplay: {
     type: String
+  },
+  /**
+   * @props { String } interval='8px'
+   * 查询模式的上下间距
+   */
+  interval: {
+    type: String,
+    default: "8px"
+  },
+  /**
+   * @props { String } intervalHorizon
+   * 查询模式的左右间距
+   */
+  intervalHorizon: {
+    type: String
   }
 };
 const dataEmits = ["list-events"];

package/dist/components/list/src/index2.cjs

@@ -136,11 +136,16 @@ const _sfc_main = vue.defineComponent({
         "th",
         {
           style: {
-            width: obj.labelWidth ?? props.labelWidth
+            width: obj.labelWidth || props.labelWidth,
+            textAlign: obj.align || props.labelAlign || props.align
           },
           class: [
             cs.z("table-th"),
             cs.is("whole", obj.whole),
+            cs.is(
+              "width",
+              Boolean(obj.labelWidth || props.labelWidth)
+            ),
             obj.class ?? ""
           ].join(" "),
           colspan: props.labelPosition == "top" ? setColspan(obj) : void 0,
@@ -190,7 +195,10 @@ const _sfc_main = vue.defineComponent({
           vue.h(
             "span",
             {
-              class: cs.z("table-value")
+              class: cs.z("table-value"),
+              style: {
+                textAlign: obj.align || props.align
+              }
             },
             [
               util.setSslot(
@@ -247,7 +255,10 @@ const _sfc_main = vue.defineComponent({
               vue.h(
                 "div",
                 {
-                  class: cs.z("table-auto")
+                  class: cs.z("table-auto"),
+                  style: {
+                    alignItems: obj.labelItems || props.labelItems
+                  }
                 },
                 arr
               )
@@ -285,7 +296,8 @@ const _sfc_main = vue.defineComponent({
           {
             class: cs.z("div"),
             style: cs.vdo({
-              borderColor: borderColor.value
+              borderColor: borderColor.value,
+              interval: props.interval
             })
             // onClick(event: Event) {
             // 	isfocus.value = true;

package/dist/components/list/src/index2.js

@@ -134,11 +134,16 @@ const _sfc_main = defineComponent({
         "th",
         {
           style: {
-            width: obj.labelWidth ?? props.labelWidth
+            width: obj.labelWidth || props.labelWidth,
+            textAlign: obj.align || props.labelAlign || props.align
           },
           class: [
             cs.z("table-th"),
             cs.is("whole", obj.whole),
+            cs.is(
+              "width",
+              Boolean(obj.labelWidth || props.labelWidth)
+            ),
             obj.class ?? ""
           ].join(" "),
           colspan: props.labelPosition == "top" ? setColspan(obj) : void 0,
@@ -188,7 +193,10 @@ const _sfc_main = defineComponent({
           h(
             "span",
             {
-              class: cs.z("table-value")
+              class: cs.z("table-value"),
+              style: {
+                textAlign: obj.align || props.align
+              }
             },
             [
               setSslot(
@@ -245,7 +253,10 @@ const _sfc_main = defineComponent({
               h(
                 "div",
                 {
-                  class: cs.z("table-auto")
+                  class: cs.z("table-auto"),
+                  style: {
+                    alignItems: obj.labelItems || props.labelItems
+                  }
                 },
                 arr
               )
@@ -283,7 +294,8 @@ const _sfc_main = defineComponent({
           {
             class: cs.z("div"),
             style: cs.vdo({
-              borderColor: borderColor.value
+              borderColor: borderColor.value,
+              interval: props.interval
             })
             // onClick(event: Event) {
             // 	isfocus.value = true;

package/dist/components/lists/style/index2.scss

@@ -1,2 +1,3 @@
 @use '../../card/style/index2.scss' as *;
+@use '../../loading/style/index2.scss' as *;
 @use '../index.scss' as *;

package/dist/components/page/index.css

@@ -599,8 +599,8 @@
 }
 .forms-div--query .forms-li {
   height: fit-content;
-  margin-top: var(--forms-query-interval);
-  margin-bottom: var(--forms-query-interval);
+  margin-top: var(--forms-interval);
+  margin-bottom: var(--forms-interval);
   margin-right: var(--forms-inline-right);
 }
 .forms-div--query .forms-li .el-form-item {
@@ -643,11 +643,19 @@
 }
 .list-div .list-table .list-table-td,
 .list-div .list-table .list-table-th {
-  padding: 6px;
+  padding: var(--list-interval) var(--list-interval-horizon, var(--list-interval));
 }
 .list-div .list-table .list-table-auto {
+  width: 100%;
   display: inline-flex;
-  align-items: center;
+  word-break: break-all;
+}
+.list-div .list-table .list-table-auto .list-table-td {
+  flex: 1;
+}
+.list-div .list-table .list-table-auto .is-width .list-table-label {
+  word-break: break-all;
+  white-space: normal;
 }
 .list-div .list-table .list-table-auto .list-table-label {
   white-space: nowrap;
@@ -723,6 +731,12 @@
   background-color: transparent;
   --el-table-header-bg-color: rgb(248, 248, 249);
 }
+.tables-table.el-table--default .el-table__cell {
+  padding: var(--tables-interval) 0;
+}
+.tables-table.el-table--default .cell {
+  padding: 0 var(--tables-interval-horizon, var(--tables-interval));
+}
 
 .paging {
   padding: 10px;

package/dist/components/tables/index.css

@@ -27,4 +27,10 @@
 .tables-table {
   background-color: transparent;
   --el-table-header-bg-color: rgb(248, 248, 249);
+}
+.tables-table.el-table--default .el-table__cell {
+  padding: var(--tables-interval) 0;
+}
+.tables-table.el-table--default .cell {
+  padding: 0 var(--tables-interval-horizon, var(--tables-interval));
 }

package/dist/components/tables/index.scss

@@ -18,6 +18,20 @@ $tables: 'tables';
 		// width: 100%;
 		// 去掉背景色
 		background-color: transparent;
-		--#{e()}table-header-bg-color: rgb(248, 248, 249);
+
+		#{v(e()+'table-header-bg-color')}: rgb(248, 248, 249);
+
+		&.#{el('table', '', '', 'default')} {
+			.#{el('table', '', 'cell')} {
+				padding: var(vdm('interval', $tables)) 0;
+			}
+			.cell {
+				padding: 0
+					var(
+						vdm('interval-horizon', $tables),
+						var(vdm('interval', $tables))
+					);
+			}
+		}
 	}
 }

package/dist/components/tables/src/data.cjs

@@ -81,6 +81,21 @@ const dataProps = {
     default() {
       return {};
     }
+  },
+  /**
+   * @props { String } interval='6px'
+   * 查询模式的上下间距
+   */
+  interval: {
+    type: String,
+    default: "6px"
+  },
+  /**
+   * @props { String } intervalHorizon
+   * 查询模式的左右间距
+   */
+  intervalHorizon: {
+    type: String
   }
 };
 const dataEmits = [

package/dist/components/tables/src/data.d.ts

@@ -110,6 +110,21 @@ export declare const dataProps: {
         };
         default(): {};
     };
+    /**
+     * @props { String } interval='6px'
+     * 查询模式的上下间距
+     */
+    interval: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @props { String } intervalHorizon
+     * 查询模式的左右间距
+     */
+    intervalHorizon: {
+        type: StringConstructor;
+    };
 };
 export type DataProps = ExtractPropTypes<typeof dataProps>;
 /**

package/dist/components/tables/src/data.js

@@ -79,6 +79,21 @@ const dataProps = {
     default() {
       return {};
     }
+  },
+  /**
+   * @props { String } interval='6px'
+   * 查询模式的上下间距
+   */
+  interval: {
+    type: String,
+    default: "6px"
+  },
+  /**
+   * @props { String } intervalHorizon
+   * 查询模式的左右间距
+   */
+  intervalHorizon: {
+    type: String
   }
 };
 const dataEmits = [

package/dist/components/tables/src/index2.cjs

@@ -128,7 +128,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         class: vue.unref(cs).z()
-      }, vue.unref(attrs).root), [
+      }, vue.unref(attrs).root, {
+        style: vue.unref(cs).vdo({
+          interval: _ctx.interval,
+          intervalHorizon: _ctx.intervalHorizon
+        })
+      }), [
         vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$2.Table), vue.mergeProps(vue.unref(attrs).assem, {
           align: "left",
           ref_key: "tableRef",

package/dist/components/tables/src/index2.js

@@ -126,7 +126,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({
         class: unref(cs).z()
-      }, unref(attrs).root), [
+      }, unref(attrs).root, {
+        style: unref(cs).vdo({
+          interval: _ctx.interval,
+          intervalHorizon: _ctx.intervalHorizon
+        })
+      }), [
         withDirectives((openBlock(), createBlock(unref(Table), mergeProps(unref(attrs).assem, {
           align: "left",
           ref_key: "tableRef",

package/dist/components/tablesp/index.css

@@ -28,6 +28,12 @@
   background-color: transparent;
   --el-table-header-bg-color: rgb(248, 248, 249);
 }
+.tables-table.el-table--default .el-table__cell {
+  padding: var(--tables-interval) 0;
+}
+.tables-table.el-table--default .cell {
+  padding: 0 var(--tables-interval-horizon, var(--tables-interval));
+}
 
 .paging {
   padding: 10px;

package/dist/css/forms.css

@@ -599,8 +599,8 @@
 }
 .forms-div--query .forms-li {
   height: fit-content;
-  margin-top: var(--forms-query-interval);
-  margin-bottom: var(--forms-query-interval);
+  margin-top: var(--forms-interval);
+  margin-bottom: var(--forms-interval);
   margin-right: var(--forms-inline-right);
 }
 .forms-div--query .forms-li .el-form-item {

package/dist/css/index.css

@@ -599,8 +599,8 @@
 }
 .forms-div--query .forms-li {
   height: fit-content;
-  margin-top: var(--forms-query-interval);
-  margin-bottom: var(--forms-query-interval);
+  margin-top: var(--forms-interval);
+  margin-bottom: var(--forms-interval);
   margin-right: var(--forms-inline-right);
 }
 .forms-div--query .forms-li .el-form-item {
@@ -1050,11 +1050,19 @@
 }
 .list-div .list-table .list-table-td,
 .list-div .list-table .list-table-th {
-  padding: 6px;
+  padding: var(--list-interval) var(--list-interval-horizon, var(--list-interval));
 }
 .list-div .list-table .list-table-auto {
+  width: 100%;
   display: inline-flex;
-  align-items: center;
+  word-break: break-all;
+}
+.list-div .list-table .list-table-auto .list-table-td {
+  flex: 1;
+}
+.list-div .list-table .list-table-auto .is-width .list-table-label {
+  word-break: break-all;
+  white-space: normal;
 }
 .list-div .list-table .list-table-auto .list-table-label {
   white-space: nowrap;
@@ -1130,6 +1138,12 @@
   background-color: transparent;
   --el-table-header-bg-color: rgb(248, 248, 249);
 }
+.tables-table.el-table--default .el-table__cell {
+  padding: var(--tables-interval) 0;
+}
+.tables-table.el-table--default .cell {
+  padding: 0 var(--tables-interval-horizon, var(--tables-interval));
+}
 
 .paging {
   padding: 10px;
@@ -1615,6 +1629,28 @@
   justify-content: flex-end;
 }
 
+.tabless {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.tabless-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+}
+.tabless-main.is-radio .el-table__header .el-table-column--selection .el-checkbox {
+  display: none;
+}
+.tabless-paginat {
+  overflow: hidden;
+}
+.tabless-paginat .el-pagination {
+  justify-content: flex-end;
+}
+
 .tablesv {
   width: 100%;
   min-height: 100px;
@@ -1696,26 +1732,4 @@
   left: 0;
   z-index: 1;
   opacity: 0;
-}
-
-.tablesvp {
-  width: 100%;
-  height: var(--tablesvp-height);
-  display: flex;
-  flex-direction: column;
-}
-.tablesvp-main {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  width: 100%;
-}
-.tablesvp-main.is-radio .el-table__header .el-table-column--selection .el-checkbox {
-  display: none;
-}
-.tablesvp-paginat {
-  overflow: hidden;
-}
-.tablesvp-paginat .el-pagination {
-  justify-content: flex-end;
 }

package/dist/css/list.css

@@ -31,11 +31,19 @@
 }
 .list-div .list-table .list-table-td,
 .list-div .list-table .list-table-th {
-  padding: 6px;
+  padding: var(--list-interval) var(--list-interval-horizon, var(--list-interval));
 }
 .list-div .list-table .list-table-auto {
+  width: 100%;
   display: inline-flex;
-  align-items: center;
+  word-break: break-all;
+}
+.list-div .list-table .list-table-auto .list-table-td {
+  flex: 1;
+}
+.list-div .list-table .list-table-auto .is-width .list-table-label {
+  word-break: break-all;
+  white-space: normal;
 }
 .list-div .list-table .list-table-auto .list-table-label {
   white-space: nowrap;

package/dist/css/page.css

@@ -599,8 +599,8 @@
 }
 .forms-div--query .forms-li {
   height: fit-content;
-  margin-top: var(--forms-query-interval);
-  margin-bottom: var(--forms-query-interval);
+  margin-top: var(--forms-interval);
+  margin-bottom: var(--forms-interval);
   margin-right: var(--forms-inline-right);
 }
 .forms-div--query .forms-li .el-form-item {
@@ -643,11 +643,19 @@
 }
 .list-div .list-table .list-table-td,
 .list-div .list-table .list-table-th {
-  padding: 6px;
+  padding: var(--list-interval) var(--list-interval-horizon, var(--list-interval));
 }
 .list-div .list-table .list-table-auto {
+  width: 100%;
   display: inline-flex;
-  align-items: center;
+  word-break: break-all;
+}
+.list-div .list-table .list-table-auto .list-table-td {
+  flex: 1;
+}
+.list-div .list-table .list-table-auto .is-width .list-table-label {
+  word-break: break-all;
+  white-space: normal;
 }
 .list-div .list-table .list-table-auto .list-table-label {
   white-space: nowrap;
@@ -723,6 +731,12 @@
   background-color: transparent;
   --el-table-header-bg-color: rgb(248, 248, 249);
 }
+.tables-table.el-table--default .el-table__cell {
+  padding: var(--tables-interval) 0;
+}
+.tables-table.el-table--default .cell {
+  padding: 0 var(--tables-interval-horizon, var(--tables-interval));
+}
 
 .paging {
   padding: 10px;

package/dist/css/tables.css

@@ -27,4 +27,10 @@
 .tables-table {
   background-color: transparent;
   --el-table-header-bg-color: rgb(248, 248, 249);
+}
+.tables-table.el-table--default .el-table__cell {
+  padding: var(--tables-interval) 0;
+}
+.tables-table.el-table--default .cell {
+  padding: 0 var(--tables-interval-horizon, var(--tables-interval));
 }

package/dist/css/tablesp.css

@@ -28,6 +28,12 @@
   background-color: transparent;
   --el-table-header-bg-color: rgb(248, 248, 249);
 }
+.tables-table.el-table--default .el-table__cell {
+  padding: var(--tables-interval) 0;
+}
+.tables-table.el-table--default .cell {
+  padding: 0 var(--tables-interval-horizon, var(--tables-interval));
+}
 
 .paging {
   padding: 10px;

package/dist/icons/index.json

@@ -1,7 +1,7 @@
 {
     "prefix": "fang-ui",
     "info": {},
-    "lastModified": 1762497579365,
+    "lastModified": 1762508522818,
     "icons": {
         "bar": {
             "body": " <path fill=\"currentColor\" d=\"M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64z\" ></path> "

package/dist/index.css

@@ -599,8 +599,8 @@
 }
 .forms-div--query .forms-li {
   height: fit-content;
-  margin-top: var(--forms-query-interval);
-  margin-bottom: var(--forms-query-interval);
+  margin-top: var(--forms-interval);
+  margin-bottom: var(--forms-interval);
   margin-right: var(--forms-inline-right);
 }
 .forms-div--query .forms-li .el-form-item {
@@ -1050,11 +1050,19 @@
 }
 .list-div .list-table .list-table-td,
 .list-div .list-table .list-table-th {
-  padding: 6px;
+  padding: var(--list-interval) var(--list-interval-horizon, var(--list-interval));
 }
 .list-div .list-table .list-table-auto {
+  width: 100%;
   display: inline-flex;
-  align-items: center;
+  word-break: break-all;
+}
+.list-div .list-table .list-table-auto .list-table-td {
+  flex: 1;
+}
+.list-div .list-table .list-table-auto .is-width .list-table-label {
+  word-break: break-all;
+  white-space: normal;
 }
 .list-div .list-table .list-table-auto .list-table-label {
   white-space: nowrap;
@@ -1130,6 +1138,12 @@
   background-color: transparent;
   --el-table-header-bg-color: rgb(248, 248, 249);
 }
+.tables-table.el-table--default .el-table__cell {
+  padding: var(--tables-interval) 0;
+}
+.tables-table.el-table--default .cell {
+  padding: 0 var(--tables-interval-horizon, var(--tables-interval));
+}
 
 .paging {
   padding: 10px;
@@ -1615,6 +1629,28 @@
   justify-content: flex-end;
 }
 
+.tabless {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.tabless-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+}
+.tabless-main.is-radio .el-table__header .el-table-column--selection .el-checkbox {
+  display: none;
+}
+.tabless-paginat {
+  overflow: hidden;
+}
+.tabless-paginat .el-pagination {
+  justify-content: flex-end;
+}
+
 .tablesv {
   width: 100%;
   min-height: 100px;
@@ -1696,26 +1732,4 @@
   left: 0;
   z-index: 1;
   opacity: 0;
-}
-
-.tablesvp {
-  width: 100%;
-  height: var(--tablesvp-height);
-  display: flex;
-  flex-direction: column;
-}
-.tablesvp-main {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  width: 100%;
-}
-.tablesvp-main.is-radio .el-table__header .el-table-column--selection .el-checkbox {
-  display: none;
-}
-.tablesvp-paginat {
-  overflow: hidden;
-}
-.tablesvp-paginat .el-pagination {
-  justify-content: flex-end;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fangzhongya/fang-ui",
   "private": false,
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "description ": "fang-ui",
   "keywords": [