@fangzhongya/fang-ui 0.1.19 → 0.1.21

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

@@ -2,8 +2,10 @@ import { defineComponent, ref, computed, h, onMounted } from "vue";
 import { setLabel, setSslot } from "./util.js";
 import { setStyles } from "../../common/css.js";
 import { useObjComponSelected, useHide } from "../../common/use.js";
-import { getCompons } from "../../common/compons.js";
+import { useCompons } from "../../common/compons.js";
 import { useCssName } from "../../../hooks/cssname/index.js";
+import { hideTooltip, showTooltip } from "../../tables/common/tooltip.js";
+import "../../tables/common/config.js";
 import { usePropsDefault, viewProps, getProps } from "../../../hooks/props-default/index.js";
 import { name, dataProps, dataExpose, dataEmits } from "./data.js";
 import "../../tables/common/img.js";
@@ -20,8 +22,9 @@ const _sfc_main = defineComponent({
   setup(prs, { emit, slots }) {
     const props = usePropsDefault(name, prs, dataProps);
     viewProps(props, name);
-    const compons = getCompons(props.compons);
+    const compons = useCompons("list-compons", props.compons);
     const cs = useCssName(name);
+    const refDom = ref();
     const isfocus = ref(false);
     const rowObj = ref();
     const borderColor = computed(() => {
@@ -59,9 +62,9 @@ const _sfc_main = defineComponent({
             lin = props.column;
             is = true;
           } else {
-            let k = (obj.column || 1) + lin;
+            let k = (obj.colspan || 1) + lin;
             if (k > props.column) {
-              lin = obj.column || 1;
+              lin = obj.colspan || 1;
               is = true;
             } else {
               lin = k;
@@ -97,9 +100,9 @@ const _sfc_main = defineComponent({
             lin = props.column;
             is = true;
           } else {
-            let k = (obj.column || 1) + lin;
+            let k = (obj.colspan || 1) + lin;
             if (k > props.column) {
-              lin = obj.column || 1;
+              lin = obj.colspan || 1;
               is = true;
             } else {
               lin = k;
@@ -154,12 +157,13 @@ const _sfc_main = defineComponent({
             obj.class ?? ""
           ].join(" "),
           colspan: props.labelPosition == "top" ? setColspan(obj) : void 0,
-          onClick: (event) => {
-            isfocus.value = true;
-            rowObj.value = obj;
-            event.stopPropagation();
-            return false;
-          }
+          rowspan: props.labelPosition == "top" ? void 0 : setRowspan(obj)
+          // onClick: (event: Event) => {
+          // 	isfocus.value = true;
+          // 	rowObj.value = obj;
+          // 	event.stopPropagation();
+          // 	return false;
+          // },
         },
         [
           h(
@@ -185,6 +189,20 @@ const _sfc_main = defineComponent({
         ]
       );
     };
+    const handleCellMouseLeave = ($event) => {
+      hideTooltip($event);
+    };
+    const handleCellMouseEnter = ($event, obj) => {
+      const showOverflow = obj.showOverflow ?? props.showOverflow;
+      if (showOverflow) {
+        showTooltip(
+          $event,
+          refDom.value,
+          showOverflow,
+          props.lineClamp
+        );
+      }
+    };
     const getChildrenValue = (obj, index) => {
       if (obj.children) {
         return [
@@ -206,7 +224,10 @@ const _sfc_main = defineComponent({
               class: cs.z("table-value"),
               style: {
                 textAlign: obj.align || props.align
-              }
+              },
+              title: obj.title,
+              onMouseenter: ($event) => handleCellMouseEnter($event, obj),
+              onMouseleave: handleCellMouseLeave
             },
             [
               setSslot(
@@ -237,13 +258,13 @@ const _sfc_main = defineComponent({
             obj.class ?? ""
           ].join(" "),
           colspan: setColspan(obj),
-          rowspan: isRow ? 2 : void 0,
-          onClick: (event) => {
-            isfocus.value = true;
-            rowObj.value = obj;
-            event.stopPropagation();
-            return false;
-          }
+          rowspan: setRowspan(obj, isRow)
+          // onClick: (event: Event) => {
+          // 	isfocus.value = true;
+          // 	rowObj.value = obj;
+          // 	event.stopPropagation();
+          // 	return false;
+          // },
         },
         [...getChildrenValue(obj, index)]
       );
@@ -259,6 +280,7 @@ const _sfc_main = defineComponent({
             "td",
             {
               colspan: setColspan(obj),
+              rowspan: setRowspan(obj),
               class: cs.is("whole", obj.whole)
             },
             [
@@ -285,8 +307,8 @@ const _sfc_main = defineComponent({
       if (["auto", "top"].includes(props.labelPosition)) {
         if (obj.whole) {
           return props.column;
-        } else if (obj.column) {
-          return obj.column;
+        } else if (obj.colspan) {
+          return obj.colspan;
         } else {
           return "";
         }
@@ -294,21 +316,51 @@ const _sfc_main = defineComponent({
         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 if (obj.colspan) {
+          return (obj.colspan - 1) * 2 + 1 + j;
         } else {
           return 1 + j;
         }
       }
     };
+    const setRowspan = (obj, isRow) => {
+      if (props.labelPosition == "top") {
+        const j = !obj.isdiv ? 0 : 1;
+        if (obj.rowspan) {
+          return (obj.rowspan - 1) * 2 + 1 + j;
+        } else if (isRow) {
+          return 2;
+        }
+      } else if (props.labelPosition == "auto") {
+        if (obj.rowspan) {
+          return obj.rowspan;
+        } else if (isRow) {
+          return 2;
+        }
+      } else {
+        if (obj.rowspan) {
+          return obj.rowspan;
+        } else if (isRow) {
+          return 2;
+        } else {
+          return 1;
+        }
+      }
+      return;
+    };
     const renderValue = () => {
       if (props.list && props.list.length > 0) {
         return h(
           "div",
           {
+            ref: (el) => {
+              refDom.value = el;
+            },
             class: cs.z("div"),
             style: cs.vdo({
               borderColor: borderColor.value,
+              rowMaxHeight: props.rowMaxHeight,
+              lineClamp: props.lineClamp,
               interval: props.interval
             })
             // onClick(event: Event) {

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

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

package/dist/components/lists/index.css

@@ -22,7 +22,7 @@
   background-color: #eee;
 }
 .lists-list {
-  padding: 0 var(--lists-interval);
+  padding: 0 var(--lists-interval-horizon, var(--lists-interval));
 }
 .lists-list.is-absolute {
   position: absolute;
@@ -37,7 +37,7 @@
 }
 .lists-list-item {
   background-color: #fff;
-  margin: 0 var(--lists-interval);
+  margin: 0 var(--lists-interval-horizon, var(--lists-interval));
   margin-bottom: calc(var(--lists-interval) * 2);
 }
 .lists-list-item.is-active {

package/dist/components/lists/index.scss

@@ -10,7 +10,8 @@ $lists: 'lists';
 	flex-direction: column;
 	background-color: #eee;
 	&-list {
-		padding: 0 var(vdm('interval', $lists));
+		padding: 0
+			var(vdm('interval-horizon', $lists), var(vdm('interval', $lists)));
 		&.#{is('absolute')} {
 			position: absolute;
 			inset: 0;
@@ -26,7 +27,11 @@ $lists: 'lists';
 				margin-top: calc(var(vdm('interval', $lists)) * 2);
 			}
 			background-color: #fff;
-			margin: 0 var(vdm('interval', $lists));
+			margin: 0
+				var(
+					vdm('interval-horizon', $lists),
+					var(vdm('interval', $lists))
+				);
 			margin-bottom: calc(var(vdm('interval', $lists)) * 2);
 			&.#{is('active')} {
 				background-color: rgb(250, 235, 215);

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

@@ -109,18 +109,29 @@ const dataProps = {
     type: Number,
     default: 1
   },
+  rowKey: {
+    type: String
+  },
   /**
    * @props { String } interval='6px'
    * 查询模式的上下间距
    */
   interval: {
     type: String,
-    default: "6px"
+    default: "8px"
+  },
+  /**
+   * @props { String } intervalHorizon
+   * 查询模式的左右间距
+   */
+  intervalHorizon: {
+    type: String
   }
 };
 const dataEmits = [
   "sort-change",
   "scroll-bottom",
+  "selection-change",
   "scope-click",
   "selection-list",
   "list-events",

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

@@ -135,6 +135,9 @@ export declare const dataProps: {
         type: NumberConstructor;
         default: number;
     };
+    rowKey: {
+        type: StringConstructor;
+    };
     /**
      * @props { String } interval='6px'
      * 查询模式的上下间距
@@ -143,6 +146,13 @@ export declare const dataProps: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * @props { String } intervalHorizon
+     * 查询模式的左右间距
+     */
+    intervalHorizon: {
+        type: StringConstructor;
+    };
 };
 export type DataProps = ExtractPropTypes<typeof dataProps>;
 /**

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

@@ -107,18 +107,29 @@ const dataProps = {
     type: Number,
     default: 1
   },
+  rowKey: {
+    type: String
+  },
   /**
    * @props { String } interval='6px'
    * 查询模式的上下间距
    */
   interval: {
     type: String,
-    default: "6px"
+    default: "8px"
+  },
+  /**
+   * @props { String } intervalHorizon
+   * 查询模式的左右间距
+   */
+  intervalHorizon: {
+    type: String
   }
 };
 const dataEmits = [
   "sort-change",
   "scroll-bottom",
+  "selection-change",
   "scope-click",
   "selection-list",
   "list-events",

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

@@ -152,7 +152,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         class: vue.unref(cs).z(),
         style: vue.unref(cs).vdo({
-          interval: vue.unref(props).interval
+          interval: vue.unref(props).interval,
+          intervalHorizon: vue.unref(props).intervalHorizon
         })
       }, vue.unref(attrs).root), [
         vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
@@ -172,6 +173,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.unref(cs).is("active", rows.value === item),
                 vue.unref(cs).is("selected", selections.value.includes(item))
               ]),
+              key: vue.unref(props).rowKey ? item[vue.unref(props).rowKey] : index2,
               style: vue.normalizeStyle(setStyles(item)),
               onClick: ($event) => onClick(item, index2)
             }, [
@@ -199,7 +201,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         return {
                           name: k,
                           fn: vue.withCtx((scope) => [
-                            vue.renderSlot(_ctx.$slots, k, vue.mergeProps({ ref_for: true }, scope))
+                            vue.renderSlot(_ctx.$slots, k, vue.mergeProps({ ref_for: true }, scope || {}))
                           ])
                         };
                       })
@@ -222,7 +224,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                           return {
                             name: k,
                             fn: vue.withCtx((scope) => [
-                              vue.renderSlot(_ctx.$slots, k, vue.mergeProps({ ref_for: true }, scope))
+                              vue.renderSlot(_ctx.$slots, k, vue.mergeProps({ ref_for: true }, scope || {}))
                             ])
                           };
                         })
@@ -245,7 +247,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                           return {
                             name: k,
                             fn: vue.withCtx((scope) => [
-                              vue.renderSlot(_ctx.$slots, k, vue.mergeProps({ ref_for: true }, scope))
+                              vue.renderSlot(_ctx.$slots, k, vue.mergeProps({ ref_for: true }, scope || {}))
                             ])
                           };
                         })
@@ -256,7 +258,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 ]), 1024)
               ])
             ], 14, _hoisted_1);
-          }), 256)) : vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).noData, { key: 1 }, () => [
+          }), 128)) : vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).noData, { key: 1 }, () => [
             vue.createVNode(vue.unref(index$6.NoData))
           ])
         ], 6)), [

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

@@ -150,7 +150,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", mergeProps({
         class: unref(cs).z(),
         style: unref(cs).vdo({
-          interval: unref(props).interval
+          interval: unref(props).interval,
+          intervalHorizon: unref(props).intervalHorizon
         })
       }, unref(attrs).root), [
         withDirectives((openBlock(), createElementBlock("div", {
@@ -170,6 +171,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 unref(cs).is("active", rows.value === item),
                 unref(cs).is("selected", selections.value.includes(item))
               ]),
+              key: unref(props).rowKey ? item[unref(props).rowKey] : index,
               style: normalizeStyle(setStyles(item)),
               onClick: ($event) => onClick(item, index)
             }, [
@@ -197,7 +199,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         return {
                           name: k,
                           fn: withCtx((scope) => [
-                            renderSlot(_ctx.$slots, k, mergeProps({ ref_for: true }, scope))
+                            renderSlot(_ctx.$slots, k, mergeProps({ ref_for: true }, scope || {}))
                           ])
                         };
                       })
@@ -220,7 +222,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           return {
                             name: k,
                             fn: withCtx((scope) => [
-                              renderSlot(_ctx.$slots, k, mergeProps({ ref_for: true }, scope))
+                              renderSlot(_ctx.$slots, k, mergeProps({ ref_for: true }, scope || {}))
                             ])
                           };
                         })
@@ -243,7 +245,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           return {
                             name: k,
                             fn: withCtx((scope) => [
-                              renderSlot(_ctx.$slots, k, mergeProps({ ref_for: true }, scope))
+                              renderSlot(_ctx.$slots, k, mergeProps({ ref_for: true }, scope || {}))
                             ])
                           };
                         })
@@ -254,7 +256,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]), 1024)
               ])
             ], 14, _hoisted_1);
-          }), 256)) : renderSlot(_ctx.$slots, unref(dataSlot).noData, { key: 1 }, () => [
+          }), 128)) : renderSlot(_ctx.$slots, unref(dataSlot).noData, { key: 1 }, () => [
             createVNode(unref(NoData))
           ])
         ], 6)), [

package/dist/components/listsp/index.css

@@ -22,7 +22,7 @@
   background-color: #eee;
 }
 .lists-list {
-  padding: 0 var(--lists-interval);
+  padding: 0 var(--lists-interval-horizon, var(--lists-interval));
 }
 .lists-list.is-absolute {
   position: absolute;
@@ -37,7 +37,7 @@
 }
 .lists-list-item {
   background-color: #fff;
-  margin: 0 var(--lists-interval);
+  margin: 0 var(--lists-interval-horizon, var(--lists-interval));
   margin-bottom: calc(var(--lists-interval) * 2);
 }
 .lists-list-item.is-active {

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

@@ -1,10 +1,6 @@
 import { ExtractPublicPropTypes } from 'vue';
 /**
- * @title {h2} TablesPagin 输入框
- * @text 目前完全继承 element-plus 中 el-tables-pagin
- */
-/**
- * @title {h3}
+ * @title {h3} listsp
  */
 export declare const name = "listsp";
 export declare const dataProps: {};

package/dist/components/listspd/index.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+;/* empty css                   */
+require("./src/index.cjs");
+const withInstall = require("../../utils/vues/withInstall.cjs");
+const index_vue_vue_type_script_setup_true_lang = require("./src/index2.cjs");
+const Listspd = withInstall.withInstall(index_vue_vue_type_script_setup_true_lang.default, "Listspd");
+exports.Listspd = Listspd;
+exports.default = Listspd;

package/dist/components/listspd/index.css

@@ -0,0 +1,99 @@
+:root {
+  --on: rgb(91, 189, 246);
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
+  );
+  --g-main-bg: var(--bg-color-page);
+}
+
+.lists {
+  width: 100%;
+  min-height: 100px;
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #eee;
+}
+.lists-list {
+  padding: 0 var(--lists-interval-horizon, var(--lists-interval));
+}
+.lists-list.is-absolute {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+}
+.lists-list--column .lists-list-item {
+  display: inline-block;
+}
+.lists-list-item:first-child {
+  margin-top: calc(var(--lists-interval) * 2);
+}
+.lists-list-item {
+  background-color: #fff;
+  margin: 0 var(--lists-interval-horizon, var(--lists-interval));
+  margin-bottom: calc(var(--lists-interval) * 2);
+}
+.lists-list-item.is-active {
+  background-color: rgb(250, 235, 215);
+}
+.lists-list-item.is-selected {
+  background-color: rgb(215, 250, 224);
+}
+.lists-list-item .el-card {
+  background-color: transparent;
+}
+
+.paging {
+  width: 100%;
+  padding: 10px;
+}
+.paging-pagination {
+  width: 100%;
+}
+.paging-slot {
+  padding-left: 10px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #9b9b9b;
+  white-space: pre-wrap;
+}
+.paging-slot > span {
+  margin-right: 10px;
+  white-space: nowrap;
+}
+.paging .el-pagination__total {
+  font-size: 14px;
+  font-weight: 400;
+  color: #9b9b9b;
+}
+
+.listspd {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.listspd-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+}
+.listspd-main.is-scroll .v-scroll-add {
+  text-align: center;
+  padding: 10px;
+  color: #999;
+}
+.listspd-paginat {
+  overflow: hidden;
+}
+.listspd-paginat .el-pagination {
+  justify-content: flex-end;
+}

package/dist/components/listspd/index.d.ts

@@ -0,0 +1,4 @@
+import { SFCWithInstall } from '../../utils/vues';
+import { DefineComponent } from 'vue';
+declare const Listspd: SFCWithInstall<DefineComponent<{}, {}, any>>;
+export { Listspd, Listspd as default };

package/dist/components/listspd/index.js

@@ -0,0 +1,9 @@
+/* empty css                 */
+import "./src/index.js";
+import { withInstall } from "../../utils/vues/withInstall.js";
+import _sfc_main from "./src/index2.js";
+const Listspd = withInstall(_sfc_main, "Listspd");
+export {
+  Listspd,
+  Listspd as default
+};

package/dist/components/listspd/index.scss

@@ -0,0 +1,30 @@
+@use '../scss/common.scss' as *;
+@use '../lists/index.scss' as *;
+@use '../paging/index.scss' as *;
+$listspd: 'listspd';
+@include b($listspd) {
+	width: 100%;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+
+	&-main {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		width: 100%;
+		&.#{is('scroll')} {
+			.v-scroll-add {
+				text-align: center;
+				padding: 10px;
+				color: #999;
+			}
+		}
+	}
+	&-paginat {
+		overflow: hidden;
+		.#{e()}pagination {
+			justify-content: flex-end;
+		}
+	}
+}

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const buildProps = require("../../../utils/vues/buildProps.cjs");
+const name = "listspd";
+const dataProps = buildProps.buildProps({});
+const dataEmits = [];
+const dataSlot = {};
+const dataExpose = {};
+exports.dataEmits = dataEmits;
+exports.dataExpose = dataExpose;
+exports.dataProps = dataProps;
+exports.dataSlot = dataSlot;
+exports.name = name;

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

@@ -0,0 +1,14 @@
+import { ExtractPublicPropTypes } from 'vue';
+/**
+ * @title {h3} listspd
+ */
+export declare const name = "listspd";
+export declare const dataProps: {};
+export type DataProps = ExtractPublicPropTypes<typeof dataProps>;
+export declare const dataEmits: never[];
+export type DataEmits = typeof dataEmits;
+export declare const dataSlot: {};
+/**
+ * @expose refEl 获取当前组件在element-plus中暴露的方法
+ */
+export declare const dataExpose: {};

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

@@ -0,0 +1,13 @@
+import { buildProps } from "../../../utils/vues/buildProps.js";
+const name = "listspd";
+const dataProps = buildProps({});
+const dataEmits = [];
+const dataSlot = {};
+const dataExpose = {};
+export {
+  dataEmits,
+  dataExpose,
+  dataProps,
+  dataSlot,
+  name
+};

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

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

package/dist/components/listspd/src/index.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./index2.js";
+export {
+  _sfc_main as default
+};