@fangzhongya/fang-ui 0.0.54 → 0.0.56

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

@@ -0,0 +1,337 @@
+import { defineComponent, ref, computed, h, onMounted } from "vue";
+import { setLabel, setSslot } from "./util.js";
+import { setStyles } from "../../common/css.js";
+import { uesObjComponSelected, useHide } from "../../common/use.js";
+import { getCompons } from "../../common/compons.js";
+import { useCssName } from "../../../hooks/cssname/index.js";
+import { dataProps, dataExpose, dataEmits } from "./data.js";
+import "../../tables/common/img.js";
+import _sfc_main$1 from "../../tables/common/img2.js";
+const Components = {
+  Img: _sfc_main$1
+};
+const _sfc_main = defineComponent({
+  emits: dataEmits,
+  components: Components,
+  expose: dataExpose,
+  props: dataProps,
+  setup(props, { emit, slots }) {
+    const compons = getCompons(props.compons);
+    const cs = useCssName("list");
+    const isfocus = ref(false);
+    const rowObj = ref();
+    const borderColor = computed(() => {
+      const d = "#ccc";
+      if (typeof props.border === "boolean") {
+        return d;
+      } else {
+        return props.border ?? d;
+      }
+    });
+    function isComponSelected(obj) {
+      if (uesObjComponSelected(obj, props)) {
+        if (rowObj.value == obj) {
+          if (isfocus.value) {
+            return true;
+          } else {
+            return false;
+          }
+        } else {
+          return false;
+        }
+      } else {
+        return true;
+      }
+    }
+    const getLists = (arrs, listobj) => {
+      let arr = [], trs = [], lin = 0;
+      arrs.forEach((obj, index) => {
+        if (listobj) {
+          obj.father = obj.father ?? listobj;
+        }
+        if (!useHide(obj, props.value)) {
+          let is = false;
+          if (obj.whole) {
+            lin = props.column;
+            is = true;
+          } else {
+            let k = (obj.column || 1) + lin;
+            if (k > props.column) {
+              lin = obj.column || 1;
+              is = true;
+            } else {
+              lin = k;
+              is = false;
+            }
+          }
+          if (is) {
+            arr.push(h("tr", {}, trs));
+            trs = [];
+          }
+          trs.push(...getTd(obj, index));
+          if (lin >= props.column) {
+            arr.push(h("tr", {}, trs));
+            trs = [];
+            lin = 0;
+          }
+        }
+      });
+      if (trs.length > 0) {
+        arr.push(h("tr", {}, trs));
+      }
+      return arr;
+    };
+    const getListTops = (arrs, listobj) => {
+      let arr = [], trvs = [], trls = [], lin = 0;
+      arrs.forEach((obj, index) => {
+        if (listobj) {
+          obj.father = obj.father ?? listobj;
+        }
+        if (!useHide(obj, props.value)) {
+          let is = false;
+          if (obj.whole) {
+            lin = props.column;
+            is = true;
+          } else {
+            let k = (obj.column || 1) + lin;
+            if (k > props.column) {
+              lin = obj.column || 1;
+              is = true;
+            } else {
+              lin = k;
+              is = false;
+            }
+          }
+          if (is) {
+            arr.push(h("tr", {}, trls));
+            trls = [];
+            arr.push(h("tr", {}, trvs));
+            trvs = [];
+          }
+          if (obj.isdiv) {
+            trls.push(getValue(obj, index, true));
+          } else {
+            trls.push(getlabel(obj, index));
+            trvs.push(getValue(obj, index));
+          }
+          if (lin >= props.column) {
+            arr.push(h("tr", {}, trls));
+            arr.push(h("tr", {}, trvs));
+            trls = [];
+            trvs = [];
+            lin = 0;
+          }
+        }
+      });
+      if (trls.length > 0) {
+        arr.push(h("tr", {}, trls));
+        arr.push(h("tr", {}, trvs));
+      }
+      return arr;
+    };
+    const getlabel = (obj, index) => {
+      return h(
+        "th",
+        {
+          style: {
+            width: obj.labelWidth ?? props.labelWidth
+          },
+          class: [
+            cs.z("table-th"),
+            cs.is("whole", obj.whole),
+            obj.class ?? ""
+          ].join(" "),
+          colspan: props.labelPosition == "top" ? setColspan(obj) : void 0,
+          onClick: (event) => {
+            isfocus.value = true;
+            rowObj.value = obj;
+            event.stopPropagation();
+            return false;
+          }
+        },
+        [
+          h(
+            "span",
+            {
+              class: cs.z("table-label")
+            },
+            [
+              setLabel(
+                obj,
+                props,
+                compons,
+                emit,
+                slots,
+                isComponSelected,
+                index
+              )
+            ]
+          )
+        ]
+      );
+    };
+    const getChildrenValue = (obj, index) => {
+      if (obj.children) {
+        return [
+          h(
+            "div",
+            {
+              class: cs.z("table-children")
+            },
+            [
+              props.labelPosition == "top" ? getListTops(obj.children, obj) : getLists(obj.children, obj)
+            ]
+          )
+        ];
+      } else {
+        return [
+          h(
+            "span",
+            {
+              class: cs.z("table-value")
+            },
+            [
+              setSslot(
+                obj,
+                props.value,
+                props,
+                compons,
+                emit,
+                slots,
+                isComponSelected,
+                index
+              )
+            ]
+          )
+        ];
+      }
+    };
+    const getValue = (obj, index, isRow) => {
+      return h(
+        "td",
+        {
+          style: setStyles(obj, props.value, props),
+          class: [
+            cs.z("table-td"),
+            cs.is("whole", obj.whole),
+            obj.class ?? ""
+          ].join(" "),
+          colspan: setColspan(obj),
+          rowspan: isRow ? 2 : void 0,
+          onClick: (event) => {
+            isfocus.value = true;
+            rowObj.value = obj;
+            event.stopPropagation();
+            return false;
+          }
+        },
+        [...getChildrenValue(obj, index)]
+      );
+    };
+    const getTd = (obj, index) => {
+      const arr = [getValue(obj, index)];
+      if (!obj.isdiv) {
+        arr.unshift(getlabel(obj, index));
+      }
+      if (props.labelPosition == "auto") {
+        return [
+          h(
+            "td",
+            {
+              colspan: setColspan(obj),
+              class: cs.is("whole", obj.whole)
+            },
+            [
+              h(
+                "div",
+                {
+                  class: cs.z("table-auto")
+                },
+                arr
+              )
+            ]
+          )
+        ];
+      } else {
+        return arr;
+      }
+    };
+    const setColspan = (obj) => {
+      if (["auto", "top"].includes(props.labelPosition)) {
+        if (obj.whole) {
+          return props.column;
+        } else if (obj.column) {
+          return obj.column;
+        } else {
+          return "";
+        }
+      } else {
+        const j = !obj.isdiv ? 0 : 1;
+        if (obj.whole) {
+          return (props.column - 1) * 2 + 1 + j;
+        } else if (obj.column) {
+          return (obj.column - 1) * 2 + 1 + j;
+        } else {
+          return 1 + j;
+        }
+      }
+    };
+    const renderValue = () => {
+      if (props.list && props.list.length > 0) {
+        return h(
+          "div",
+          {
+            class: cs.z("div"),
+            style: cs.vdo({
+              borderColor: borderColor.value
+            })
+            // onClick(event: Event) {
+            // 	isfocus.value = true;
+            // 	event.stopPropagation();
+            // 	return false;
+            // },
+          },
+          [
+            h(
+              "table",
+              {
+                class: [
+                  cs.z("table"),
+                  props.labelPosition ?? "",
+                  cs.is(
+                    "border",
+                    props.border ? true : false
+                  ),
+                  cs.is("aliquots", props.aliquots)
+                ].join(" "),
+                cellspacing: "0",
+                cellpadding: "0",
+                border: "0"
+              },
+              props.labelPosition == "top" ? getListTops(props.list) : getLists(props.list)
+            )
+          ]
+        );
+      } else {
+        return "";
+      }
+    };
+    onMounted(() => {
+      if (window) {
+        window.addEventListener("click", () => {
+          isfocus.value = false;
+        });
+      }
+    });
+    return {
+      renderValue,
+      borderColor
+    };
+  },
+  render(props) {
+    return props.renderValue();
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/lists/index.cjs

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 ;/* empty css                   */
 const withInstall = require("../../utils/vues/withInstall.cjs");
 require("./src/index.cjs");
-const index_vue_vue_type_script_lang = require("./src/index2.cjs");
-const Lists = withInstall.withInstall(index_vue_vue_type_script_lang.default, "Lists");
+const index_vue_vue_type_script_setup_true_lang = require("./src/index2.cjs");
+const Lists = withInstall.withInstall(index_vue_vue_type_script_setup_true_lang.default, "Lists");
 exports.Lists = Lists;
 exports.default = Lists;

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;