@ditari/bsui 1.0.68 → 1.0.69

package/dist/esm/components/table/Table.esm.js

@@ -1,11 +1,8 @@
-import { defineComponent as G, ref as m, computed as C, watchEffect as T, nextTick as M, watch as Y, createVNode as h, withDirectives as Z, vShow as ee, isVNode as te, Fragment as O } from "vue";
-import { Table as ne, Space as ae, Pagination as le } from "ant-design-vue";
+import { defineComponent as X, ref as r, computed as S, watchEffect as k, nextTick as _, watch as G, createVNode as f, withDirectives as M, vShow as Y, Fragment as z } from "vue";
+import { Table as Z, Space as ee, Pagination as te } from "ant-design-vue";
 import { useEleHeight as E } from "../../utils/html.esm.js";
-import { prefixName as oe } from "../theme/index.esm.js";
-function ie(t) {
-  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !te(t);
-}
-const ue = () => ({
+import { prefixName as ae } from "../theme/index.esm.js";
+const ne = () => ({
   data: {
     type: Object,
     required: !0
@@ -37,7 +34,7 @@ const ue = () => ({
   },
   defaultExpandAllRows: Boolean,
   default: () => !0
-}), p = {
+}), b = {
   defaultPageSize: 20,
   hideOnSinglePage: !1,
   pageSizeOptions: ["10", "20", "30", "40"],
@@ -45,136 +42,135 @@ const ue = () => ({
   showQuickJumper: !0,
   showLessItems: !0,
   showTotal: (t) => `总共 ${t} 条`
-}, K = `${oe}-pagination`, ge = /* @__PURE__ */ G({
+}, K = `${ae}-pagination`, ce = /* @__PURE__ */ X({
   name: "DTable",
-  props: ue(),
+  props: ne(),
   // emits: {  "update:keys": (keys: []) => void }
   // TODO 需要做调整
   emits: ["update:keys"],
   setup: function(t, {
     emit: R,
-    slots: r
+    slots: s
   }) {
-    const a = m(t.keys || []), j = C(() => t.data), B = C(() => {
-      var e, n;
-      return (n = (e = t.config) === null || e === void 0 ? void 0 : e.columns) !== null && n !== void 0 ? n : [];
-    }), y = C(() => {
-      var e, n;
-      return (n = (e = t.config) === null || e === void 0 ? void 0 : e.pagination) !== null && n !== void 0 ? n : {};
-    }), k = m(t.expandedRowKeys);
-    T(() => {
+    const a = r(t.keys || []), B = S(() => t.data), O = S(() => {
+      var e;
+      return ((e = t.config) == null ? void 0 : e.columns) ?? [];
+    }), v = S(() => {
+      var e;
+      return ((e = t.config) == null ? void 0 : e.pagination) ?? {};
+    }), C = r(t.expandedRowKeys);
+    k(() => {
       const {
         expandedRowKeys: e
       } = t;
-      k.value = e;
+      C.value = e;
     });
     const {
       tableRef: H,
-      tableRootRef: A,
-      tableHeight: D,
-      onPageChange: U,
-      onRowClassName: $
-    } = q();
-    function q() {
-      var e;
+      tableRootRef: j,
+      tableHeight: A,
+      onPageChange: D,
+      onRowClassName: U
+    } = $();
+    function $() {
       const {
-        rowClassName: n,
-        keepSelected: u,
+        rowClassName: e,
+        keepSelected: o,
         onPageChange: l
-      } = t.config, c = (e = t.config.selection) !== null && e !== void 0 ? e : "N", g = m(), i = m(null), o = m(), s = m(null), f = (w) => {
-        var v, x, N;
+      } = t.config, m = t.config.selection ?? "N", d = r(), i = r(null), n = r(), u = r(null), g = (c) => {
+        var h, T;
         try {
-          const b = (v = i == null ? void 0 : i.value) === null || v === void 0 ? void 0 : v.$el, W = E(b.getElementsByClassName("ant-table-header")[0]);
-          let _ = 0;
+          const p = (h = i == null ? void 0 : i.value) == null ? void 0 : h.$el, V = E(p.getElementsByClassName("ant-table-header")[0]);
+          let P = 0;
           if (t.config.pagination) {
-            const X = (x = g.value) === null || x === void 0 ? void 0 : x.getElementsByClassName(K)[0];
-            _ = (N = E(X)) !== null && N !== void 0 ? N : 0;
+            const W = (T = d.value) == null ? void 0 : T.getElementsByClassName(K)[0];
+            P = E(W) ?? 0;
           }
-          o.value = w - (W + _), b.getElementsByClassName("ant-table-body")[0].style.height = o.value + "px", s.value = b.getElementsByClassName("ant-table-body")[0];
-        } catch (b) {
-          console.warn(b);
+          n.value = c - (V + P), p.getElementsByClassName("ant-table-body")[0].style.height = n.value + "px", u.value = p.getElementsByClassName("ant-table-body")[0];
+        } catch (p) {
+          console.warn(p);
         }
       };
-      return T(() => {
-        t.height !== 0 && M(() => {
+      return k(() => {
+        t.height !== 0 && _(() => {
           setTimeout(() => {
-            f(t.height);
+            g(t.height);
           }, 10);
         });
       }), {
         tableRef: i,
-        tableRootRef: g,
-        tableHeight: o,
-        onPageChange: (w, v) => {
+        tableRootRef: d,
+        tableHeight: n,
+        onPageChange: (c, h) => {
           l && l({
-            page: w,
-            size: v
-          }), s.value.scrollTop = 0, (c === "S" || !u) && (a.value = [], R("update:keys", a.value));
+            page: c,
+            size: h
+          }), u.value.scrollTop = 0, (m === "S" || !o) && (a.value = [], R("update:keys", a.value));
         },
-        onRowClassName: (w, v) => n ? n(w, v) : void 0
+        onRowClassName: (c, h) => e ? e(c, h) : void 0
       };
     }
-    const F = J();
-    function J() {
-      var e;
+    const q = F();
+    function F() {
       const {
-        rowKey: n,
+        rowKey: e,
         config: {
-          getCheckboxProps: u
+          getCheckboxProps: o
         }
       } = t;
-      let l = (e = t.config.selection) !== null && e !== void 0 ? e : "N";
-      const c = (o, s) => {
-        l === "S" ? (a.value = [], a.value = s ? [o[n]] : []) : a.value = s ? a.value.concat(o[n]) : a.value.filter((f) => f !== o[n]), R("update:keys", a.value);
-      }, g = (o, s, f) => {
-        const S = f.map((d) => d[n]);
-        a.value = o ? a.value.concat(S) : a.value.filter((d) => !S.includes(d)), R("update:keys", a.value);
+      let l = t.config.selection ?? "N";
+      const m = (n, u) => {
+        l === "S" ? (a.value = [], a.value = u ? [n[e]] : []) : a.value = u ? a.value.concat(n[e]) : a.value.filter((g) => g !== n[e]), R("update:keys", a.value);
+      }, d = (n, u, g) => {
+        const w = g.map((y) => y[e]);
+        a.value = n ? a.value.concat(w) : a.value.filter((y) => !w.includes(y)), R("update:keys", a.value);
       };
-      Y(() => t.keys, (o) => {
-        a.value = o;
+      G(() => t.keys, (n) => {
+        a.value = n;
       });
-      const i = m(void 0);
-      return T(() => {
+      const i = r(void 0);
+      return k(() => {
         const {
-          selection: o
+          selection: n
         } = t.config;
-        l = o, l !== "N" ? i.value = {
+        l = n, l !== "N" ? i.value = {
           selectedRowKeys: a,
-          onSelect: c,
-          onSelectAll: g,
+          onSelect: m,
+          onSelectAll: d,
           fixed: !0,
           columnTitle: l === "S" ? "选择" : null,
           columnWidth: l === "S" ? 60 : 40,
-          getCheckboxProps: u
+          getCheckboxProps: o
         } : i.value = void 0;
       }), i;
     }
-    const Q = V();
-    function V() {
+    const J = Q();
+    function Q() {
       return (e) => {
-        let n;
+        let o;
         const {
-          rowKey: u,
+          rowKey: l,
           config: {
-            click: l,
-            dbClick: c,
-            selection: g,
-            getCheckboxProps: i
+            click: m,
+            dbClick: d,
+            selection: i,
+            getCheckboxProps: n
           }
-        } = t, o = e[u], s = () => {
-          const f = i === void 0 ? !1 : i(e).disabled;
-          if (g === "N" || f)
+        } = t, u = e[l], g = () => {
+          const w = n === void 0 ? !1 : n(e).disabled;
+          if (i === "N" || w)
             return;
-          a.value.some((d) => d === o) ? a.value = a.value.filter((d) => d !== o) : (g === "S" && (a.value = []), a.value.push(o)), R("update:keys", a.value);
+          a.value.some((c) => c === u) ? a.value = a.value.filter((c) => c !== u) : (i === "S" && (a.value = []), a.value.push(u)), R("update:keys", a.value);
         };
         return {
           onClick: () => {
-            clearTimeout(n), n = setTimeout(() => {
-              s(), l && l(e);
+            clearTimeout(o), o = setTimeout(() => {
+              g(), m && m(e);
             }, 200);
           },
+          // 点击行
           onDblclick: () => {
-            clearTimeout(n), c && c(e);
+            clearTimeout(o), d && d(e);
           }
           // onContextmenu: (event) => {
           //   //TODO
@@ -188,83 +184,80 @@ const ue = () => ({
         };
       };
     }
-    const P = (e) => {
+    const x = (e) => {
       e.stopPropagation();
-    }, I = C(() => {
+    }, I = S(() => {
       const {
         selection: e
       } = t.config;
       return e === "N";
-    }), z = {};
-    r.expandedRowRender && (z.expandedRowRender = (e) => h(O, null, [r.expandedRowRender && r.expandedRowRender(e)]));
-    const L = () => h(O, null, [r.summary && r.summary()]);
+    }), N = {};
+    s.expandedRowRender && (N.expandedRowRender = (e) => f(z, null, [s.expandedRowRender && s.expandedRowRender(e)]));
+    const L = () => f(z, null, [s.summary && s.summary()]);
     return () => {
-      let e;
-      var n, u;
-      return h("div", {
-        ref: A,
+      var e;
+      return f("div", {
+        ref: j,
         style: {
           height: "100%"
         }
-      }, [h(ne, {
+      }, [f(Z, {
         ref: H,
         "row-key": t.rowKey,
         bordered: t.config.bordered,
-        columns: B.value,
-        dataSource: j.value,
+        columns: O.value,
+        dataSource: B.value,
         loading: t.loading,
-        size: (u = (n = t.config) === null || n === void 0 ? void 0 : n.size) !== null && u !== void 0 ? u : "small",
+        size: ((e = t.config) == null ? void 0 : e.size) ?? "small",
         scroll: {
           scrollToFirstRowOnChange: !0,
           x: "100%",
-          y: D.value + "px"
+          y: A.value + "px"
         },
-        expandedRowKeys: k.value,
-        "onUpdate:expandedRowKeys": (l) => k.value = l,
+        expandedRowKeys: C.value,
+        "onUpdate:expandedRowKeys": (o) => C.value = o,
         expandRowByClick: I.value,
         defaultExpandAllRows: t.defaultExpandAllRows,
         pagination: !1,
-        customRow: Q,
-        rowSelection: F.value,
-        rowClassName: $
-      }, ie(e = Object.assign(Object.assign({
+        customRow: J,
+        rowSelection: q.value,
+        rowClassName: U
+      }, {
         bodyCell: ({
-          column: l,
-          record: c
+          column: o,
+          record: l
         }) => {
-          if (l.slot === "action")
-            return h("div", {
-              onClick: P,
-              onDblclick: P
-            }, [h(ae, null, {
-              default: () => [r.action && r.action(c)]
+          if (o.slot === "action")
+            return f("div", {
+              onClick: x,
+              onDblclick: x
+            }, [f(ee, null, {
+              default: () => [s.action && s.action(l)]
             })]);
-        }
-      }, z), {
+        },
+        ...N,
         // 总结栏插槽
         summary: L
-      })) ? e : {
-        default: () => [e]
-      }), Z(h(le, {
+      }), M(f(te, {
         class: [K],
-        current: y.value.current,
-        "onUpdate:current": (l) => y.value.current = l,
-        pageSize: y.value.pageSize,
-        "onUpdate:pageSize": (l) => y.value.pageSize = l,
+        current: v.value.current,
+        "onUpdate:current": (o) => v.value.current = o,
+        pageSize: v.value.pageSize,
+        "onUpdate:pageSize": (o) => v.value.pageSize = o,
         disabled: t.loading,
         "show-size-changer": !0,
         size: "default",
-        "hide-on-single-page": p.hideOnSinglePage,
-        "show-quick-jumper": p.showQuickJumper,
-        "default-page-size": p.defaultPageSize,
-        "page-size-options": p.pageSizeOptions,
-        "show-total": p.showTotal,
-        total: y.value.total,
-        onChange: U
-      }, null), [[ee, t.config.pagination]])]);
+        "hide-on-single-page": b.hideOnSinglePage,
+        "show-quick-jumper": b.showQuickJumper,
+        "default-page-size": b.defaultPageSize,
+        "page-size-options": b.pageSizeOptions,
+        "show-total": b.showTotal,
+        total: v.value.total,
+        onChange: D
+      }, null), [[Y, t.config.pagination]])]);
     };
   }
 });
 export {
-  ge as default
+  ce as default
 };

package/dist/esm/components/table/index.d.ts

@@ -0,0 +1,75 @@
+export declare const DTable: import("../../utils/install").SFCWithInstall<import("vue").DefineComponent<{
+    data: {
+        type: import("vue").PropType<any>;
+        required: boolean;
+    };
+    height: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    keys: import("vue").PropType<import("./interface/table").Key[] | undefined>;
+    rowKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    loading: {
+        type: import("vue").PropType<false | undefined>;
+        default: boolean;
+    };
+    pagination: {
+        type: import("vue").PropType<any>;
+        default: () => {};
+    };
+    config: {
+        type: import("vue").PropType<import("./interface/table").Config>;
+        default: () => {};
+    };
+    expandedRowKeys: {
+        type: import("vue").PropType<string[] | undefined>;
+        default: () => never[];
+    };
+    defaultExpandAllRows: import("vue").PropType<boolean | undefined>;
+    default: () => boolean;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:keys"[], "update:keys", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: import("vue").PropType<any>;
+        required: boolean;
+    };
+    height: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    keys: import("vue").PropType<import("./interface/table").Key[] | undefined>;
+    rowKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    loading: {
+        type: import("vue").PropType<false | undefined>;
+        default: boolean;
+    };
+    pagination: {
+        type: import("vue").PropType<any>;
+        default: () => {};
+    };
+    config: {
+        type: import("vue").PropType<import("./interface/table").Config>;
+        default: () => {};
+    };
+    expandedRowKeys: {
+        type: import("vue").PropType<string[] | undefined>;
+        default: () => never[];
+    };
+    defaultExpandAllRows: import("vue").PropType<boolean | undefined>;
+    default: () => boolean;
+}>> & {
+    "onUpdate:keys"?: ((...args: any[]) => any) | undefined;
+}, {
+    height: number;
+    loading: false | undefined;
+    rowKey: string;
+    pagination: any;
+    config: import("./interface/table").Config;
+    expandedRowKeys: string[] | undefined;
+}>>;
+export default DTable;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditari/bsui",
-  "version": "1.0.68",
+  "version": "1.0.69",
   "files": [
     "dist/**",
     "src"

package/src/components/layout/List.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useElementSize } from "@vueuse/core";
+
 import {
   useSlots,
   ref,
@@ -35,12 +37,12 @@ const height = ref(0);
 
 let stopHandleWatch: WatchStopHandle;
 
-nextTick(() => {
-  setTimeout(() => {
-    height.value = tableRef?.value?.offsetHeight;
-    show.value = true;
-  }, 1);
-});
+// nextTick(() => {
+//   setTimeout(() => {
+//     height.value = tableRef?.value?.offsetHeight;
+//     show.value = true;
+//   }, 1);
+// });
 
 watch(
   () => configProvider?.componentSize,
@@ -91,6 +93,21 @@ function useWatch() {
     }
   );
 }
+
+// 监听表单高度变化
+// 然后再获取表格高度
+const formRef = ref(null);
+const { height: formHeight } = useElementSize(formRef);
+watch(
+  () => formHeight.value,
+  (val) => {
+    show.value = false;
+    setTimeout(() => {
+      height.value = tableRef?.value?.offsetHeight;
+      show.value = true;
+    }, 10);
+  }
+);
 </script>
 <script lang="ts">
 export default {
@@ -119,7 +136,7 @@ export default {
           </a-space>
         </div>
         <div ref="tableRef" style="flex: 1">
-          <div style="height: 100%" v-show="show">
+          <div v-show="show" style="height: 100%">
             <slot name="table" :height="height" />
           </div>
         </div>

package/src/components/table/Table.tsx

@@ -1,19 +1,17 @@
 import {
   computed,
-  createVNode,
   defineComponent,
   nextTick,
   PropType,
-  reactive,
   ref,
   watch,
   watchEffect
 } from "vue";
-import { Pagination, Space, Table, Card } from "ant-design-vue";
+import { Pagination, Space, Table } from "ant-design-vue";
 import { useEleHeight } from "../../utils/html";
 import { prefixName } from "../theme";
 
-import type { TableProps, Key, Config } from "./interface/table";
+import type { TableProps, Key } from "./interface/table";
 /**
  * 表格组件 基于TSX封装ATable
  */
@@ -80,11 +78,6 @@ const paginationConfig = {
 //分页class名称
 const basePageClassName = `${prefixName}-pagination`;
 
-const configDefault: Config = {
-  selection: "N",
-  bordered: true
-};
-
 /**
  * 表格组件定义
  */
@@ -383,6 +376,7 @@ const DXTable = defineComponent({
     const summary = () => {
       return <>{slots.summary && slots.summary()}</>;
     };
+
     return () => (
       <div ref={tableRootRef} style={{ height: "100%" }}>
         <Table