@fangzhongya/fang-ui 0.0.54 → 0.0.55

package/dist/components/lists/index.css

@@ -12,85 +12,40 @@
   --g-main-bg: var(--bg-color-page);
 }
 
-.lists-div .lists-table {
+.lists {
   width: 100%;
-  height: 100%;
-}
-.lists-div .lists-table td {
-  text-align: left;
-}
-.lists-div .lists-table th {
-  font-weight: initial;
-}
-.lists-div .lists-table .is-whole .lists-table-auto {
-  width: 100%;
-}
-.lists-div .lists-table .is-whole .lists-table-value {
-  width: 100%;
-  display: block;
-}
-.lists-div .lists-table .lists-table-td,
-.lists-div .lists-table .lists-table-th {
-  padding: 6px;
-}
-.lists-div .lists-table .lists-table-auto {
-  display: inline-flex;
-  align-items: center;
-}
-.lists-div .lists-table .lists-table-auto .lists-table-label {
-  white-space: nowrap;
-}
-.lists-div .lists-table .lists-table-th {
-  text-align: left;
-}
-.lists-div .lists-table.right .lists-table-th {
-  text-align: right;
-}
-.lists-div .lists-table.center .lists-table-th {
-  text-align: center;
-}
-.lists-div .lists-table.auto .lists-table-th {
-  padding-right: 0;
-}
-.lists-div .lists-table.top .lists-table-th {
-  padding-bottom: 0;
-}
-.lists-div .lists-table.is-aliquots {
-  table-layout: fixed;
-}
-.lists-div .lists-table.is-border {
-  border-right: 1px solid var(--lists-border-color);
-  border-top: 1px solid var(--lists-border-color);
-  border-bottom: 1px solid var(--lists-border-color);
-}
-.lists-div .lists-table.is-border > tr > td {
-  border-bottom: 1px solid var(--lists-border-color);
-  border-left: 1px solid var(--lists-border-color);
+  min-height: 100px;
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #eee;
 }
-.lists-div .lists-table.is-border > tr > td:last-child {
-  border-right: 1px solid var(--lists-border-color);
+.lists-list {
+  padding: 0 var(--lists-interval);
 }
-.lists-div .lists-table.is-border > tr > th {
-  border-left: 1px solid var(--lists-border-color);
-  border-bottom: 1px solid var(--lists-border-color);
+.lists-list.is-absolute {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
 }
-.lists-div .lists-table.is-border > tr > th:last-child {
-  border-right: 1px solid var(--lists-border-color);
+.lists-list--column .lists-list-item {
+  display: inline-block;
 }
-.lists-div .lists-table.is-border > tr:last-child > td {
-  border-bottom: 0;
+.lists-list-item {
+  background-color: #fff;
+  margin: 0 var(--lists-interval);
+  margin-top: calc(var(--lists-interval) * 2);
 }
-.lists-div .lists-table.is-border > tr:last-child > th {
-  border-bottom: 0;
+.lists-list-item:last-child {
+  margin-bottom: calc(var(--lists-interval) * 2);
 }
-.lists-div .lists-table.is-border.top > tr > th {
-  border-bottom: 0;
+.lists-list-item.is-active {
+  background-color: rgb(250, 235, 215);
 }
-.lists-div .lists-table .lists-com {
-  display: flex;
-  align-items: center;
+.lists-list-item.is-selected {
+  background-color: rgb(215, 250, 224);
 }
-.lists-div .lists-table .lists-com-img {
-  width: 50px;
-  height: 50px;
+.lists-list-item .el-card {
+  background-color: transparent;
 }

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

@@ -2,96 +2,127 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const dataProps = {
   /**
-   * @props { Object } options={}
-   * 选择数据集合
+   * @props { Object } defaultSort 排序
    */
-  options: {
+  defaultSort: {
     type: Object,
     default() {
       return {};
     }
   },
-  /**
-   * @props { Object } compons={}
-   * 外部组件集合
-   */
-  compons: {
-    type: Object,
+  height: {
+    type: [String, Number],
     default() {
-      return {};
+      return "auto";
     }
   },
   /**
-   * @props { Object } labelPosition='auto' ('left' | 'top' | 'right' | 'center' | 'auto')
-   * 标签位置
+   * 加载中
    */
-  labelPosition: {
-    type: String,
-    default: "auto"
+  loading: {
+    type: Boolean,
+    default: false
   },
+  // 高度自适应
+  adaptive: Boolean,
   /**
-   * @props { Array<ListObj> } list=[]
-   * 列数据
+   * @props { Array<Object> } list table展示的列
+   * @props { String } list.class table展示的列class
+   * @props { String } list.label table展示的列头名称
+   * @props { Array<Object> } list.children 用来展示多级头
+   * @props { boolean } list.hide=false 当前列是否隐藏
+   * @props { function } list.sethide 当前列是否隐藏方法模式
+   * @props { function } list.formatter (row, column, cellValue, index) 用来格式化内容
+   * @props { String } list.align=left (left , center , right) 对齐方式
+   * @props { string , number } list.width table展示的宽度
+   * @props { string , number } list.minWidth table展示的最小宽度
+   * @props { string , boolean } list.fixed (true , 'left' , 'right') 列是否固定在左侧或者右侧。 true 表示固定在左侧
+   * @props { String } list.compon (component, color, list, but) table的扩展组件配置
+   * @props { Object } list.config table的扩展组件的配置对象
    */
   list: {
     type: Array,
-    default: () => {
+    default() {
       return [];
     }
   },
+  /**
+   * @props { Array } value table列表数据
+   */
   value: {
-    type: Object,
-    default: () => {
-      return {};
+    type: Array,
+    default() {
+      return [];
     }
   },
   /**
-   * @props { Number } column=2
-   * 一行展示多少列
+   * 行高度
    */
-  column: {
-    type: Number,
+  lineHeight: {
+    type: [String, Number]
+  },
+  /**
+   * @props { Object } options 选择数据集合
+   */
+  options: {
+    type: Object,
     default() {
-      return 2;
+      return {};
     }
   },
   /**
-   * @props { Boolean, String } colon
-   * 标签后面是否加内容 true 是 ：
+   * @props { Object } compons 外部组件集合
    */
-  colon: [Boolean, String],
+  compons: {
+    type: Object,
+    default() {
+      return {};
+    }
+  },
   /**
-   * @props {Number, String } labelWidth=[]
-   * 标签宽度
+   * @props { String } rowWidth
+   * 列的宽度
    */
-  labelWidth: {
-    type: [Number, String]
-    // default: '60px',
+  rowWidth: {
+    type: String
   },
   /**
-   * @props { Boolean, String } border=true ( )
-   * 是否需要边框，边框颜色
+   * @props { String } rowMinWidth
+   * 列的最小宽度
    */
-  border: {
-    type: [Boolean, String]
-    // default: true
+  rowMinWidth: {
+    type: String
   },
   /**
-   * @props { Boolean } aliquots=true ( )
-   * 是否等分
+   * @props { Number } rowColumn=1 一行几个
    */
-  aliquots: {
-    type: Boolean,
-    default: true
+  rowColumn: {
+    type: Number,
+    default: 1
   },
   /**
-   * @props { Boolean } componSelected
-   * 是否在选中时显示 compon 组件
+   * @props { String } interval='6px'
+   * 查询模式的上下间距
    */
-  componSelected: Boolean
+  interval: {
+    type: String,
+    default: "6px"
+  }
+};
+const dataEmits = [
+  "sort-change",
+  "scroll-bottom",
+  "scope-click",
+  "selection-list",
+  "list-events",
+  "row-click"
+];
+const dataExpose = {};
+const dataSlot = {
+  default: "default",
+  noData: "no-data"
 };
-const dataEmits = ["list-events"];
-const dataExpose = [];
 exports.dataEmits = dataEmits;
 exports.dataExpose = dataExpose;
 exports.dataProps = dataProps;
+exports.dataSlot = dataSlot;

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

@@ -1,34 +1,45 @@
 import { ExtractPropTypes, Component } from 'vue';
+export type DefaultSort = {
+    prop: string;
+    order: 'ascending' | 'descending';
+};
+/**
+ * @title Lists
+ */
 export declare const dataProps: {
     /**
-     * @props { Object } options={}
-     * 选择数据集合
+     * @props { Object } defaultSort 排序
      */
-    options: {
-        type: ObjectConstructor;
+    defaultSort: {
+        type: () => DefaultSort;
         default(): {};
     };
-    /**
-     * @props { Object } compons={}
-     * 外部组件集合
-     */
-    compons: {
-        type: () => {
-            [key: string]: Component;
-        };
-        default(): {};
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default(): string;
     };
     /**
-     * @props { Object } labelPosition='auto' ('left' | 'top' | 'right' | 'center' | 'auto')
-     * 标签位置
+     * 加载中
      */
-    labelPosition: {
-        type: () => "left" | "top" | "right" | "center" | "auto";
-        default: string;
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
     };
+    adaptive: BooleanConstructor;
     /**
-     * @props { Array<ListObj> } list=[]
-     * 列数据
+     * @props { Array<Object> } list table展示的列
+     * @props { String } list.class table展示的列class
+     * @props { String } list.label table展示的列头名称
+     * @props { Array<Object> } list.children 用来展示多级头
+     * @props { boolean } list.hide=false 当前列是否隐藏
+     * @props { function } list.sethide 当前列是否隐藏方法模式
+     * @props { function } list.formatter (row, column, cellValue, index) 用来格式化内容
+     * @props { String } list.align=left (left , center , right) 对齐方式
+     * @props { string , number } list.width table展示的宽度
+     * @props { string , number } list.minWidth table展示的最小宽度
+     * @props { string , boolean } list.fixed (true , 'left' , 'right') 列是否固定在左侧或者右侧。 true 表示固定在左侧
+     * @props { String } list.compon (component, color, list, but) table的扩展组件配置
+     * @props { Object } list.config table的扩展组件的配置对象
      */
     list: {
         type: {
@@ -47,54 +58,98 @@ export declare const dataProps: {
             fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
             readonly [Symbol.species]: ArrayConstructor;
         };
-        default: () => never[];
+        default(): never[];
     };
+    /**
+     * @props { Array } value table列表数据
+     */
     value: {
-        type: ObjectConstructor;
-        default: () => {};
+        type: {
+            (arrayLength: number): ObjAny[];
+            (...items: ObjAny[]): ObjAny[];
+            new (arrayLength: number): ObjAny[];
+            new (...items: ObjAny[]): ObjAny[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default(): never[];
     };
     /**
-     * @props { Number } column=2
-     * 一行展示多少列
+     * 行高度
      */
-    column: {
-        type: NumberConstructor;
-        default(): number;
+    lineHeight: {
+        type: (StringConstructor | NumberConstructor)[];
     };
     /**
-     * @props { Boolean, String } colon
-     * 标签后面是否加内容 true 是 ：
+     * @props { Object } options 选择数据集合
      */
-    colon: (BooleanConstructor | StringConstructor)[];
+    options: {
+        type: ObjectConstructor;
+        default(): {};
+    };
     /**
-     * @props {Number, String } labelWidth=[]
-     * 标签宽度
+     * @props { Object } compons 外部组件集合
      */
-    labelWidth: {
-        type: (StringConstructor | NumberConstructor)[];
+    compons: {
+        type: () => {
+            [key: string]: Component;
+        };
+        default(): {};
     };
     /**
-     * @props { Boolean, String } border=true ( )
-     * 是否需要边框，边框颜色
+     * @props { String } rowWidth
+     * 列的宽度
      */
-    border: {
-        type: (BooleanConstructor | StringConstructor)[];
+    rowWidth: {
+        type: StringConstructor;
     };
     /**
-     * @props { Boolean } aliquots=true ( )
-     * 是否等分
+     * @props { String } rowMinWidth
+     * 列的最小宽度
      */
-    aliquots: {
-        type: BooleanConstructor;
-        default: boolean;
+    rowMinWidth: {
+        type: StringConstructor;
+    };
+    /**
+     * @props { Number } rowColumn=1 一行几个
+     */
+    rowColumn: {
+        type: NumberConstructor;
+        default: number;
     };
     /**
-     * @props { Boolean } componSelected
-     * 是否在选中时显示 compon 组件
+     * @props { String } interval='6px'
+     * 查询模式的上下间距
      */
-    componSelected: BooleanConstructor;
+    interval: {
+        type: StringConstructor;
+        default: string;
+    };
 };
 export type DataProps = ExtractPropTypes<typeof dataProps>;
+/**
+ * @emits scroll-bottom 滚动到列表底部触发事件
+ */
 export declare const dataEmits: string[];
 export type DataEmits = typeof dataEmits;
-export declare const dataExpose: never[];
+/**
+ * @expose clearSelection ( ) 清除多选
+ * @expose toggleRowSelectionList (row, selected, key ) 切换选择
+ * @expose clearSelectionList ( ) 清空选中
+ * @expose { Object: {  value: 值,
+                    list: 当前列,
+                    key: key的名称,} } getRowSelectionsCheckList (row, key ) 获取选中的值
+ */
+export declare const dataExpose: {};
+export declare const dataSlot: {
+    default: string;
+    noData: string;
+};

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

@@ -1,97 +1,128 @@
 const dataProps = {
   /**
-   * @props { Object } options={}
-   * 选择数据集合
+   * @props { Object } defaultSort 排序
    */
-  options: {
+  defaultSort: {
     type: Object,
     default() {
       return {};
     }
   },
-  /**
-   * @props { Object } compons={}
-   * 外部组件集合
-   */
-  compons: {
-    type: Object,
+  height: {
+    type: [String, Number],
     default() {
-      return {};
+      return "auto";
     }
   },
   /**
-   * @props { Object } labelPosition='auto' ('left' | 'top' | 'right' | 'center' | 'auto')
-   * 标签位置
+   * 加载中
    */
-  labelPosition: {
-    type: String,
-    default: "auto"
+  loading: {
+    type: Boolean,
+    default: false
   },
+  // 高度自适应
+  adaptive: Boolean,
   /**
-   * @props { Array<ListObj> } list=[]
-   * 列数据
+   * @props { Array<Object> } list table展示的列
+   * @props { String } list.class table展示的列class
+   * @props { String } list.label table展示的列头名称
+   * @props { Array<Object> } list.children 用来展示多级头
+   * @props { boolean } list.hide=false 当前列是否隐藏
+   * @props { function } list.sethide 当前列是否隐藏方法模式
+   * @props { function } list.formatter (row, column, cellValue, index) 用来格式化内容
+   * @props { String } list.align=left (left , center , right) 对齐方式
+   * @props { string , number } list.width table展示的宽度
+   * @props { string , number } list.minWidth table展示的最小宽度
+   * @props { string , boolean } list.fixed (true , 'left' , 'right') 列是否固定在左侧或者右侧。 true 表示固定在左侧
+   * @props { String } list.compon (component, color, list, but) table的扩展组件配置
+   * @props { Object } list.config table的扩展组件的配置对象
    */
   list: {
     type: Array,
-    default: () => {
+    default() {
       return [];
     }
   },
+  /**
+   * @props { Array } value table列表数据
+   */
   value: {
-    type: Object,
-    default: () => {
-      return {};
+    type: Array,
+    default() {
+      return [];
     }
   },
   /**
-   * @props { Number } column=2
-   * 一行展示多少列
+   * 行高度
    */
-  column: {
-    type: Number,
+  lineHeight: {
+    type: [String, Number]
+  },
+  /**
+   * @props { Object } options 选择数据集合
+   */
+  options: {
+    type: Object,
     default() {
-      return 2;
+      return {};
     }
   },
   /**
-   * @props { Boolean, String } colon
-   * 标签后面是否加内容 true 是 ：
+   * @props { Object } compons 外部组件集合
    */
-  colon: [Boolean, String],
+  compons: {
+    type: Object,
+    default() {
+      return {};
+    }
+  },
   /**
-   * @props {Number, String } labelWidth=[]
-   * 标签宽度
+   * @props { String } rowWidth
+   * 列的宽度
    */
-  labelWidth: {
-    type: [Number, String]
-    // default: '60px',
+  rowWidth: {
+    type: String
   },
   /**
-   * @props { Boolean, String } border=true ( )
-   * 是否需要边框，边框颜色
+   * @props { String } rowMinWidth
+   * 列的最小宽度
    */
-  border: {
-    type: [Boolean, String]
-    // default: true
+  rowMinWidth: {
+    type: String
   },
   /**
-   * @props { Boolean } aliquots=true ( )
-   * 是否等分
+   * @props { Number } rowColumn=1 一行几个
    */
-  aliquots: {
-    type: Boolean,
-    default: true
+  rowColumn: {
+    type: Number,
+    default: 1
   },
   /**
-   * @props { Boolean } componSelected
-   * 是否在选中时显示 compon 组件
+   * @props { String } interval='6px'
+   * 查询模式的上下间距
    */
-  componSelected: Boolean
+  interval: {
+    type: String,
+    default: "6px"
+  }
+};
+const dataEmits = [
+  "sort-change",
+  "scroll-bottom",
+  "scope-click",
+  "selection-list",
+  "list-events",
+  "row-click"
+];
+const dataExpose = {};
+const dataSlot = {
+  default: "default",
+  noData: "no-data"
 };
-const dataEmits = ["list-events"];
-const dataExpose = [];
 export {
   dataEmits,
   dataExpose,
-  dataProps
+  dataProps,
+  dataSlot
 };

package/dist/components/lists/src/index.cjs

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const index_vue_vue_type_script_lang = require("./index2.cjs");
-exports.default = index_vue_vue_type_script_lang.default;
+const index_vue_vue_type_script_setup_true_lang = require("./index2.cjs");
+exports.default = index_vue_vue_type_script_setup_true_lang.default;