@fangzhongya/fang-ui 0.1.19 → 0.1.20

package/dist/components/tables/common/pagin.js

@@ -50,7 +50,7 @@ const dataProps = {
     }
   }
 };
-const dataEmit = ["list-events", "selection"];
+const dataEmit = ["list-events", "selection", "drag", "update:value"];
 const useInit = (props2, emit, refTable, getLocale, isEl) => {
   var _a, _b;
   const loading = ref(false);
@@ -73,8 +73,11 @@ const useInit = (props2, emit, refTable, getLocale, isEl) => {
   const pagconfig = ref(mpagconfig);
   const paginat = reactive({
     is: false,
+    // 跨页多选
     cross: false,
+    // 前端分页
     front: false,
+    // 滚动加载
     scroll: false,
     current: 1,
     pageSize: mpagconfig.pageSize,
@@ -220,24 +223,26 @@ const useInit = (props2, emit, refTable, getLocale, isEl) => {
     console.log("crossPageData", crossPageData);
   }
   function getCrossPageValue(sarr, index) {
+    var _a2;
     const cross = paginat.cross;
     if (cross) {
-      if (typeof cross === "string") {
+      const rowKey = typeof cross === "string" ? cross : (_a2 = tableConfig.value.config) == null ? void 0 : _a2.rowKey;
+      if (rowKey) {
         const sv = /* @__PURE__ */ new Set();
         const is = [];
         if (sarr && index) {
           crossPageData.value.forEach((arr, i) => {
             if (i === index) {
               sarr.forEach((v) => {
-                if (!is.includes(v[cross])) {
-                  is.push(v[cross]);
+                if (!is.includes(v[rowKey])) {
+                  is.push(v[rowKey]);
                   sv.add(v);
                 }
               });
             } else {
               arr.forEach((v) => {
-                if (!is.includes(v[cross])) {
-                  is.push(v[cross]);
+                if (!is.includes(v[rowKey])) {
+                  is.push(v[rowKey]);
                   sv.add(v);
                 }
               });
@@ -245,8 +250,8 @@ const useInit = (props2, emit, refTable, getLocale, isEl) => {
           });
           if (!crossPageData.value[index]) {
             sarr.forEach((v) => {
-              if (!is.includes(v[cross])) {
-                is.push(v[cross]);
+              if (!is.includes(v[rowKey])) {
+                is.push(v[rowKey]);
                 sv.add(v);
               }
             });
@@ -254,8 +259,8 @@ const useInit = (props2, emit, refTable, getLocale, isEl) => {
         } else {
           crossPageData.value.forEach((arr) => {
             arr.forEach((v) => {
-              if (!is.includes(v[cross])) {
-                is.push(v[cross]);
+              if (!is.includes(v[rowKey])) {
+                is.push(v[rowKey]);
                 sv.add(v);
               }
             });
@@ -295,14 +300,16 @@ const useInit = (props2, emit, refTable, getLocale, isEl) => {
     }
   }
   function toggleCrossPage() {
+    var _a2;
     const cross = paginat.cross;
     if (paginat.is && cross && !paginat.scroll) {
       const datas = data.list;
       const vs = getCrossPageValue();
-      if (typeof cross == "string") {
-        const iss = vs.map((o) => o[cross]);
+      const rowKey = typeof cross === "string" ? cross : (_a2 = tableConfig.value.config) == null ? void 0 : _a2.rowKey;
+      if (rowKey) {
+        const iss = vs.map((o) => o[rowKey]);
         const ts = datas.filter((v) => {
-          return iss.includes(v[cross]);
+          return iss.includes(v[rowKey]);
         });
         nextTick(() => {
           ts.forEach((v) => {
@@ -483,7 +490,7 @@ const useInit = (props2, emit, refTable, getLocale, isEl) => {
       const total = list.length;
       const c = paginat.current;
       const z = paginat.pageSize;
-      const data2 = list.slice((c - 1) * z, c * z);
+      const v = list.slice((c - 1) * z, c * z);
       const value = {};
       let ajaxData = {};
       if (typeof tableConfig.value.ajax === "object") {
@@ -491,7 +498,7 @@ const useInit = (props2, emit, refTable, getLocale, isEl) => {
       }
       const l = (ajaxData == null ? void 0 : ajaxData.list) ?? mpagconfig.data.list;
       const t = (ajaxData == null ? void 0 : ajaxData.total) ?? mpagconfig.data.total;
-      setObjValue(value, l, data2);
+      setObjValue(value, l, v);
       setObjValue(value, t, total);
       obj.value = value;
     }
@@ -635,6 +642,41 @@ const useInit = (props2, emit, refTable, getLocale, isEl) => {
       onChange: onScroll
     };
   });
+  function onSortable({
+    oldIndex,
+    newIndex
+  }) {
+    if (oldIndex === newIndex) return;
+    const movedItem = data.list.splice(oldIndex, 1)[0];
+    data.list.splice(newIndex, 0, movedItem);
+    if (paginat.is && paginat.front) {
+      const q = (paginat.current - 1) * paginat.pageSize;
+      const movedItem2 = props2.value.splice(q + oldIndex, 1)[0];
+      props2.value.splice(q + newIndex, 0, movedItem2);
+      if (props2.isValue) {
+        emit("update:value", props2.value);
+      }
+    } else {
+      if (props2.isValue) {
+        emit("update:value", data.list);
+      }
+    }
+    emit("drag", data.list, newIndex, oldIndex);
+  }
+  const sortable = computed(() => {
+    var _a2;
+    let is = false;
+    if ((_a2 = tableConfig.value.config) == null ? void 0 : _a2.isdrag) {
+      is = true;
+    }
+    return {
+      is,
+      onEnd: onSortable
+    };
+  });
+  const datavalue = computed(() => {
+    return data.list;
+  });
   setValue();
   return {
     height,
@@ -648,6 +690,7 @@ const useInit = (props2, emit, refTable, getLocale, isEl) => {
     empty,
     loading,
     scroll,
+    sortable,
     onSortChange,
     onListEvents,
     onSelect,
@@ -658,7 +701,8 @@ const useInit = (props2, emit, refTable, getLocale, isEl) => {
     onSizeChange,
     onCurrentChange,
     paginat,
-    data
+    data,
+    datavalue
   };
 };
 export {

package/dist/components/tables/common/tooltip.cjs

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const index = require("../../tooltip/index.cjs");
+const mergeObject = require("@fangzhongya/utils/basic/object/mergeObject");
+exports.removePopper = null;
+const getCell = function(event) {
+  var _a;
+  return (_a = event.target) == null ? void 0 : _a.closest("td");
+};
+const getContent = function(event) {
+  const target = event.target;
+  return target.innerText || target.textContent;
+};
+function isGreaterThan(a, b, epsilon = 0.03) {
+  return a - b > epsilon;
+}
+const getPadding = (el) => {
+  const style = window.getComputedStyle(el, null);
+  const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
+  const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
+  const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
+  const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
+  return {
+    left: paddingLeft,
+    right: paddingRight,
+    top: paddingTop,
+    bottom: paddingBottom
+  };
+};
+function hideTooltip(event) {
+  const cellChild = event.target;
+  cellChild.title = "";
+}
+function isExceed(cellChild, lineClamp = 1) {
+  const range = document.createRange();
+  range.setStart(cellChild, 0);
+  range.setEnd(cellChild, cellChild.childNodes.length);
+  const { width: rangeWidth, height: rangeHeight } = range.getBoundingClientRect();
+  const { width: cellChildWidth, height: cellChildHeight } = cellChild.getBoundingClientRect();
+  const { top, left, right, bottom } = getPadding(cellChild);
+  const verticalPadding = top + bottom;
+  const horizontalPadding = left + right;
+  if (lineClamp > 1) {
+    if (isGreaterThan(rangeWidth + horizontalPadding, cellChildWidth) || isGreaterThan(rangeHeight + verticalPadding, cellChildHeight) || isGreaterThan(cellChild.scrollWidth, cellChildWidth)) {
+      return true;
+    }
+  } else {
+    if (isGreaterThan(rangeHeight + verticalPadding, cellChildHeight)) {
+      return true;
+    }
+  }
+  return false;
+}
+function showTooltip(event, parentNode, showOverflow, lineClamp = 1, props = {}) {
+  const cellChild = event.target;
+  if (isExceed(cellChild, lineClamp)) {
+    if (showOverflow == "title") {
+      cellChild.title = getContent(event);
+    } else {
+      const trigger = event.target;
+      createTablePopper(
+        trigger,
+        { ...props, content: getContent(event) },
+        parentNode
+      );
+    }
+  }
+}
+function createTablePopper(trigger, mergedProps, parentNode) {
+  var _a, _b;
+  if (((_a = exports.removePopper) == null ? void 0 : _a.trigger) === trigger) {
+    const comp = exports.removePopper.vm.component;
+    mergeObject.mergeObject(comp.props, mergedProps);
+    return;
+  }
+  (_b = exports.removePopper) == null ? void 0 : _b.call(exports);
+  const vm = vue.createVNode(index.Tooltip, {
+    virtualTriggering: true,
+    virtualRef: trigger,
+    appendTo: parentNode,
+    placement: "top",
+    transition: "none",
+    hideAfter: 0,
+    ...mergedProps
+  });
+  const container = document.createElement("div");
+  vue.render(vm, container);
+  vm.component.exposed.onOpen();
+  exports.removePopper = () => {
+    vue.render(null, container);
+    exports.removePopper = null;
+  };
+  exports.removePopper.trigger = trigger;
+  exports.removePopper.vm = vm;
+}
+exports.createTablePopper = createTablePopper;
+exports.getCell = getCell;
+exports.getContent = getContent;
+exports.hideTooltip = hideTooltip;
+exports.showTooltip = showTooltip;

package/dist/components/tables/common/tooltip.d.ts

@@ -0,0 +1,6 @@
+export declare let removePopper: any | null;
+export declare const getCell: (event: Event) => HTMLTableCellElement | null;
+export declare const getContent: (event: Event) => string;
+export declare function hideTooltip(event: MouseEvent): void;
+export declare function showTooltip(event: MouseEvent, parentNode: HTMLElement, showOverflow: string | boolean, lineClamp?: number, props?: ObjAny): void;
+export declare function createTablePopper(trigger: HTMLElement, mergedProps: ObjAny, parentNode: HTMLElement): void;

package/dist/components/tables/common/tooltip.js

@@ -0,0 +1,101 @@
+import { createVNode, render } from "vue";
+import { Tooltip } from "../../tooltip/index.js";
+import { mergeObject } from "@fangzhongya/utils/basic/object/mergeObject";
+let removePopper = null;
+const getCell = function(event) {
+  var _a;
+  return (_a = event.target) == null ? void 0 : _a.closest("td");
+};
+const getContent = function(event) {
+  const target = event.target;
+  return target.innerText || target.textContent;
+};
+function isGreaterThan(a, b, epsilon = 0.03) {
+  return a - b > epsilon;
+}
+const getPadding = (el) => {
+  const style = window.getComputedStyle(el, null);
+  const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
+  const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
+  const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
+  const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
+  return {
+    left: paddingLeft,
+    right: paddingRight,
+    top: paddingTop,
+    bottom: paddingBottom
+  };
+};
+function hideTooltip(event) {
+  const cellChild = event.target;
+  cellChild.title = "";
+}
+function isExceed(cellChild, lineClamp = 1) {
+  const range = document.createRange();
+  range.setStart(cellChild, 0);
+  range.setEnd(cellChild, cellChild.childNodes.length);
+  const { width: rangeWidth, height: rangeHeight } = range.getBoundingClientRect();
+  const { width: cellChildWidth, height: cellChildHeight } = cellChild.getBoundingClientRect();
+  const { top, left, right, bottom } = getPadding(cellChild);
+  const verticalPadding = top + bottom;
+  const horizontalPadding = left + right;
+  if (lineClamp > 1) {
+    if (isGreaterThan(rangeWidth + horizontalPadding, cellChildWidth) || isGreaterThan(rangeHeight + verticalPadding, cellChildHeight) || isGreaterThan(cellChild.scrollWidth, cellChildWidth)) {
+      return true;
+    }
+  } else {
+    if (isGreaterThan(rangeHeight + verticalPadding, cellChildHeight)) {
+      return true;
+    }
+  }
+  return false;
+}
+function showTooltip(event, parentNode, showOverflow, lineClamp = 1, props = {}) {
+  const cellChild = event.target;
+  if (isExceed(cellChild, lineClamp)) {
+    if (showOverflow == "title") {
+      cellChild.title = getContent(event);
+    } else {
+      const trigger = event.target;
+      createTablePopper(
+        trigger,
+        { ...props, content: getContent(event) },
+        parentNode
+      );
+    }
+  }
+}
+function createTablePopper(trigger, mergedProps, parentNode) {
+  if ((removePopper == null ? void 0 : removePopper.trigger) === trigger) {
+    const comp = removePopper.vm.component;
+    mergeObject(comp.props, mergedProps);
+    return;
+  }
+  removePopper == null ? void 0 : removePopper();
+  const vm = createVNode(Tooltip, {
+    virtualTriggering: true,
+    virtualRef: trigger,
+    appendTo: parentNode,
+    placement: "top",
+    transition: "none",
+    hideAfter: 0,
+    ...mergedProps
+  });
+  const container = document.createElement("div");
+  render(vm, container);
+  vm.component.exposed.onOpen();
+  removePopper = () => {
+    render(null, container);
+    removePopper = null;
+  };
+  removePopper.trigger = trigger;
+  removePopper.vm = vm;
+}
+export {
+  createTablePopper,
+  getCell,
+  getContent,
+  hideTooltip,
+  removePopper,
+  showTooltip
+};

package/dist/components/tables/common/util.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 require("../../../utils/index.cjs");
-const index = require("../../../hooks/inherit/index.cjs");
+const getAttrValue = require("../../../utils/vues/getAttrValue.cjs");
 const firstUpper = require("@fangzhongya/utils/basic/string/firstUpper");
 const splitUpper = require("@fangzhongya/utils/basic/string/splitUpper");
 const isArray = require("@fangzhongya/utils/basic/array/isArray");
@@ -11,7 +11,7 @@ function setMinWidth(obj, props) {
   if (obj.width) {
     return;
   }
-  const minWidth = index.useAttrValue(obj, "minWidth");
+  const minWidth = getAttrValue.getAttrValue(obj, "minWidth");
   if (minWidth) {
     if (typeof minWidth == "function") {
       return minWidth(obj, config);
@@ -21,7 +21,7 @@ function setMinWidth(obj, props) {
       return minWidth;
     }
   } else {
-    const minWidth2 = index.useAttrValue(config, "minWidth");
+    const minWidth2 = getAttrValue.getAttrValue(config, "minWidth");
     if (minWidth2) {
       return minWidth2;
     } else {

package/dist/components/tables/common/util.js

@@ -1,6 +1,6 @@
 import { withModifiers } from "vue";
 import "../../../utils/index.js";
-import { useAttrValue } from "../../../hooks/inherit/index.js";
+import { getAttrValue } from "../../../utils/vues/getAttrValue.js";
 import { firstUpper } from "@fangzhongya/utils/basic/string/firstUpper";
 import { splitUpper } from "@fangzhongya/utils/basic/string/splitUpper";
 import { isArray } from "@fangzhongya/utils/basic/array/isArray";
@@ -9,7 +9,7 @@ function setMinWidth(obj, props) {
   if (obj.width) {
     return;
   }
-  const minWidth = useAttrValue(obj, "minWidth");
+  const minWidth = getAttrValue(obj, "minWidth");
   if (minWidth) {
     if (typeof minWidth == "function") {
       return minWidth(obj, config);
@@ -19,7 +19,7 @@ function setMinWidth(obj, props) {
       return minWidth;
     }
   } else {
-    const minWidth2 = useAttrValue(config, "minWidth");
+    const minWidth2 = getAttrValue(config, "minWidth");
     if (minWidth2) {
       return minWidth2;
     } else {

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 const util = require("../common/util.cjs");
-const index$1 = require("../../table-column/index.cjs");
+const index = require("../../table-column/index.cjs");
 const use = require("../../common/use.cjs");
-const index = require("../../../hooks/inherit/index.cjs");
+const getAttrValue = require("../../../utils/vues/getAttrValue.cjs");
 const compons = require("../../common/compons.cjs");
 const config = require("../common/config.cjs");
 const noProps = ["children", "class", "minWidth", "label"];
@@ -12,9 +12,9 @@ function setProps(obj, props) {
   const table = props.table;
   const robj = {};
   const issort = table["sort"];
-  robj["showOverflowTooltip"] = table["showOverflowTooltip"];
+  robj["showOverflowTooltip"] = Boolean(getAttrValue.getAttrValue(obj, "showOverflow")) || getAttrValue.getAttrValue(table, "showOverflowTooltip") || Boolean(getAttrValue.getAttrValue(table, "showOverflow"));
   robj["header-align"] = table["align"];
-  robj["align"] = index.useAttrValue(obj, "headerAlign") || table["align"];
+  robj["align"] = getAttrValue.getAttrValue(obj, "headerAlign") || table["align"];
   Object.keys(obj).forEach((key) => {
     if (!noProps.includes(key)) {
       if (obj[key] !== "") {
@@ -99,28 +99,32 @@ function setHeader(obj, scope, slots, emit, props, index2) {
     index2
   );
 }
-function getDom(obj, emit, propss, slots, index2) {
-  const props = setProps(obj, propss);
+function getTableColumn(obj, emit, props, slots, index$1, def) {
+  if (obj.type == "selection") {
+    def = void 0;
+  }
   return vue.h(
-    index$1.TableColumn,
+    index.TableColumn,
     {
-      ...props,
+      ...setProps(obj, props),
       className: obj.class,
-      minWidth: util.setMinWidth(obj, propss)
+      minWidth: util.setMinWidth(obj, props)
     },
     {
-      default: (scope) => {
-        return setSslot(obj, scope, emit, slots, propss, index2);
-      },
+      default: def,
       header: (scope) => {
-        return setHeader(obj, scope, slots, emit, propss, index2);
+        return setHeader(obj, scope, slots, emit, props, index$1);
       }
     }
   );
 }
+function getDom(obj, emit, props, slots, index2) {
+  return getTableColumn(obj, emit, props, slots, index2, (scope) => {
+    return setSslot(obj, scope, emit, slots, props, index2);
+  });
+}
 function columnRender(obj, emit, props, slots, index2) {
   return getDom(obj, emit, props, slots, index2);
 }
 exports.columnRender = columnRender;
-exports.setHeader = setHeader;
-exports.setProps = setProps;
+exports.getTableColumn = getTableColumn;

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

@@ -1,6 +1,7 @@
 import { VNode, RendererNode, RendererElement } from 'vue';
-export declare function setProps(obj: ListObj, props: ObjAny): ObjAny;
-export declare function setHeader(obj: ListObj, scope: ObjAny, slots: ObjAny, emit: Function, props: ObjAny, index: number): any;
+export declare function getTableColumn(obj: ListObj, emit: Function, props: ObjAny, slots: ObjAny, index: number, def?: Function): VNode<RendererNode, RendererElement, {
+    [key: string]: any;
+}>;
 export declare function columnRender(obj: ListObj, emit: Function, props: ObjAny, slots: ObjAny, index: number): VNode<RendererNode, RendererElement, {
     [key: string]: any;
 }>;

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

@@ -2,7 +2,7 @@ import { h } from "vue";
 import { setMinWidth } from "../common/util.js";
 import { TableColumn } from "../../table-column/index.js";
 import { useSetSlot, useSetCompon, useGetDomValue, useGetDomLabel } from "../../common/use.js";
-import { useAttrValue } from "../../../hooks/inherit/index.js";
+import { getAttrValue } from "../../../utils/vues/getAttrValue.js";
 import { useGetCompons } from "../../common/compons.js";
 import { provides } from "../common/config.js";
 const noProps = ["children", "class", "minWidth", "label"];
@@ -10,9 +10,9 @@ function setProps(obj, props) {
   const table = props.table;
   const robj = {};
   const issort = table["sort"];
-  robj["showOverflowTooltip"] = table["showOverflowTooltip"];
+  robj["showOverflowTooltip"] = Boolean(getAttrValue(obj, "showOverflow")) || getAttrValue(table, "showOverflowTooltip") || Boolean(getAttrValue(table, "showOverflow"));
   robj["header-align"] = table["align"];
-  robj["align"] = useAttrValue(obj, "headerAlign") || table["align"];
+  robj["align"] = getAttrValue(obj, "headerAlign") || table["align"];
   Object.keys(obj).forEach((key) => {
     if (!noProps.includes(key)) {
       if (obj[key] !== "") {
@@ -97,30 +97,34 @@ function setHeader(obj, scope, slots, emit, props, index) {
     index
   );
 }
-function getDom(obj, emit, propss, slots, index) {
-  const props = setProps(obj, propss);
+function getTableColumn(obj, emit, props, slots, index, def) {
+  if (obj.type == "selection") {
+    def = void 0;
+  }
   return h(
     TableColumn,
     {
-      ...props,
+      ...setProps(obj, props),
       className: obj.class,
-      minWidth: setMinWidth(obj, propss)
+      minWidth: setMinWidth(obj, props)
     },
     {
-      default: (scope) => {
-        return setSslot(obj, scope, emit, slots, propss, index);
-      },
+      default: def,
       header: (scope) => {
-        return setHeader(obj, scope, slots, emit, propss, index);
+        return setHeader(obj, scope, slots, emit, props, index);
       }
     }
   );
 }
+function getDom(obj, emit, props, slots, index) {
+  return getTableColumn(obj, emit, props, slots, index, (scope) => {
+    return setSslot(obj, scope, emit, slots, props, index);
+  });
+}
 function columnRender(obj, emit, props, slots, index) {
   return getDom(obj, emit, props, slots, index);
 }
 export {
   columnRender,
-  setHeader,
-  setProps
+  getTableColumn
 };

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

@@ -1,13 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const vue = require("vue");
-const util = require("../common/util.cjs");
 const use = require("../../common/use.cjs");
-const index = require("../../table-column/index.cjs");
 const column = require("./column.cjs");
 function getLists(arrs, emit, props, slots, listobj) {
   let arr = [];
-  arrs == null ? void 0 : arrs.forEach((obj, index$1) => {
+  arrs == null ? void 0 : arrs.forEach((obj, index) => {
     if (listobj) {
       obj.father = obj.father ?? listobj;
     }
@@ -25,39 +22,26 @@ function getLists(arrs, emit, props, slots, listobj) {
           );
         } else {
           arr.push(
-            vue.h(
-              index.TableColumn,
-              {
-                ...column.setProps(obj, props),
-                className: obj.class,
-                minWidth: util.setMinWidth(obj, props)
-              },
-              {
-                default: (scope) => {
-                  return getLists(
-                    obj.children,
-                    emit,
-                    props,
-                    slots,
-                    obj
-                  );
-                },
-                header: (scope) => {
-                  return column.setHeader(
-                    obj,
-                    scope,
-                    slots,
-                    emit,
-                    props,
-                    index$1
-                  );
-                }
+            column.getTableColumn(
+              obj,
+              emit,
+              props,
+              slots,
+              index,
+              (scope) => {
+                return getLists(
+                  obj.children,
+                  emit,
+                  props,
+                  slots,
+                  obj
+                );
               }
             )
           );
         }
       } else {
-        const dom = column.columnRender(obj, emit, props, slots, index$1);
+        const dom = column.columnRender(obj, emit, props, slots, index);
         if (dom) {
           arr.push(dom);
         }