qidian-vue-ui 2.0.66 → 2.1.0

package/dist/components/crud/table/index.css

@@ -1,40 +1,40 @@
-.qd-crud-table[data-v-cf0c0269] {
+.qd-crud-table[data-v-38df8d6e] {
   width: 100%;
   display: flex;
   flex-direction: column;
 }
-.qd-crud-table > .qd-crud-search:not(.qd-crud-search--hide) + .qd-crud-table__body[data-v-cf0c0269] {
+.qd-crud-table > .qd-crud-search:not(.qd-crud-search--hide) + .qd-crud-table__body[data-v-38df8d6e] {
   margin-top: var(--td-comp-margin-l);
 }
-.qd-crud-table__body[data-v-cf0c0269] >  .t-loading__parent > .t-card__body {
+.qd-crud-table__body[data-v-38df8d6e] >  .t-loading__parent > .t-card__body {
   display: flex;
   flex-direction: column;
 }
-.qd-crud-table__body[data-v-cf0c0269] >  .t-loading__parent > .t-card__body > .qd-service-table .t-table__pagination {
+.qd-crud-table__body[data-v-38df8d6e] >  .t-loading__parent > .t-card__body > .qd-service-table .t-table__pagination {
   padding-bottom: 0;
 }
-.qd-crud-table--fit-parent-height[data-v-cf0c0269] {
+.qd-crud-table--fit-parent-height[data-v-38df8d6e] {
   height: 100%;
 }
-.qd-crud-table--fit-parent-height > .qd-crud-table__body[data-v-cf0c0269] {
+.qd-crud-table--fit-parent-height > .qd-crud-table__body[data-v-38df8d6e] {
   flex: auto;
 }
-.qd-crud-table--fit-parent-height > .qd-crud-table__body[data-v-cf0c0269] >  .t-loading__parent > .t-card__body {
+.qd-crud-table--fit-parent-height > .qd-crud-table__body[data-v-38df8d6e] >  .t-loading__parent > .t-card__body {
   height: 100%;
   min-height: 443px;
 }
-.qd-crud-table--fit-parent-height > .qd-crud-table__body[data-v-cf0c0269] >  .t-loading__parent > .t-card__body > .qd-service-table {
+.qd-crud-table--fit-parent-height > .qd-crud-table__body[data-v-38df8d6e] >  .t-loading__parent > .t-card__body > .qd-service-table {
   flex: 1 1 0;
   overflow: hidden;
 }
-.qd-crud-table__toolbar[data-v-cf0c0269] {
+.qd-crud-table__toolbar[data-v-38df8d6e] {
   display: flex;
   justify-content: space-between;
 }
-.qd-crud-table__toolbar--has-space-item + .qd-service-table[data-v-cf0c0269] {
+.qd-crud-table__toolbar--has-space-item + .qd-service-table[data-v-38df8d6e] {
   margin-top: var(--td-comp-margin-l);
 }
-.qd-crud-table__toolbar-separator[data-v-cf0c0269] {
+.qd-crud-table__toolbar-separator[data-v-38df8d6e] {
   display: inline-block;
   padding-left: var(--td-comp-paddingLR-s);
 }

package/dist/components/crud/table/index.vue.mjs

@@ -2,7 +2,7 @@ import './index.css'
 import _sfc_main from "./index.vue2.mjs";
 /* empty css            */
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const QdCrudTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cf0c0269"]]);
+const QdCrudTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-38df8d6e"]]);
 export {
   QdCrudTable as default
 };

package/dist/components/crud/table/index.vue2.mjs

@@ -18,8 +18,8 @@ import { hasPermiDirective } from "../../../directive/hasPermi.mjs";
 import _sfc_main$2 from "../../dialog/form.vue.mjs";
 import QdColumnsController from "../../columns-controller/index.vue.mjs";
 import get from "../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/get.mjs";
-import QdServiceTable from "../../service/table/index.vue.mjs";
 import { hasPermiOr } from "../../../utils/auth.mjs";
+import QdServiceTable from "../../service/table/index.vue.mjs";
 const _hoisted_1 = {
   key: 0,
   class: "qd-crud-table__toolbar-separator"
@@ -412,12 +412,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const {
       t
     } = useConfig("crud");
+    const {
+      global: tableGlobalConfig
+    } = useConfig("table");
     const {
       msgError,
       msgSuccess,
       alertWarning,
       confirm
     } = useModal();
+    const SIZE_FONT_MAP = {
+      large: 16,
+      medium: 14,
+      small: 14,
+      mini: 12
+    };
+    const SIZE_PADDING_MAP = {
+      large: 40,
+      medium: 32,
+      small: 16,
+      mini: 12
+    };
     const treeIsExpand = computed(() => !!expandedTreeNodes.value?.length);
     const dialogFormMap = reactive({});
     const ifRenderMap = reactive({});
@@ -425,7 +440,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const shouldValidateInitialSearch = computed(() => !!props.service && props.manual !== true && !!props.search?.items?.length);
     const reProps = computed(() => {
       const {
-        data: data2,
+        data: propsData,
         searchData: inSearchData,
         selectedRowKeys: selectedRowKeys2,
         activeRowKeys: activeRowKeys2,
@@ -524,13 +539,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       const operationLength = reRowActions.length;
       if (operationLength) {
+        const operationSize = serviceTableOptions.size ?? tableGlobalConfig.value?.size ?? "medium";
         const operationIdx = reColumns.findIndex((item) => item.colKey === "operation");
         const defaultOperation = {
           title: t("operationText"),
           colKey: "operation",
           align: "center",
           fixed: "right",
-          width: 28 * operationLength + 25 * operationLength - 1 + 32
+          width: calcOperationWidth(reRowActions, data.value, operationSize)
         };
         if (operationIdx > -1) {
           reColumns[operationIdx] = {
@@ -579,7 +595,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         rowActions: reRowActions,
         tools: reTools,
         models: {
-          data: data2,
+          data: propsData,
           searchData: inSearchData,
           selectedRowKeys: selectedRowKeys2,
           activeRowKeys: activeRowKeys2,
@@ -740,6 +756,61 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!hasChanged) return;
       mergeColumns.value = newColumns;
     };
+    function calcTextWidth(text, fontSize) {
+      return [...text].reduce((width, char) => {
+        if (char.charCodeAt(0) > 255) return width + fontSize;
+        return width + Math.round(fontSize * (/[A-Z]/.test(char) ? 0.79 : 0.57));
+      }, 0);
+    }
+    function getActionWidth(action, row, fontSize = 14) {
+      if (action.component) return Math.round(fontSize * 2);
+      let iconWidth = 0;
+      if (action.prefixIcon) {
+        const icon = action.prefixIcon?.__qdCompute && row !== void 0 ? action.prefixIcon(getConfigRendererCtx(action, {
+          row
+        }), void 0) : action.prefixIcon;
+        iconWidth = icon ? Math.round(fontSize * 1.43) : 0;
+      }
+      const {
+        content
+      } = action;
+      if (typeof content === "string") return calcTextWidth(content, fontSize) + iconWidth;
+      if (row !== void 0 && content?.__qdCompute) {
+        const text = content(getConfigRendererCtx(action, {
+          row
+        }), void 0);
+        return typeof text === "string" ? calcTextWidth(text, fontSize) + iconWidth : Math.round(fontSize * 2) + iconWidth;
+      }
+      return content === void 0 && !iconWidth ? 0 : Math.round(fontSize * 1.14);
+    }
+    function isActionVisible(action, row) {
+      if (!hasPermiOr(action.permi, false)) return false;
+      const {
+        ifRender
+      } = action;
+      if (ifRender?.__qdCompute) {
+        return ifRender(getConfigRendererCtx(action, {
+          row
+        }), void 0) !== false;
+      }
+      return ifRender !== false;
+    }
+    function calcOperationWidth(rowActions, rows, size = "medium") {
+      const permittedActions = rowActions.filter((action) => hasPermiOr(action.permi, false));
+      if (!permittedActions.length) return 0;
+      const fontSize = SIZE_FONT_MAP[size] ?? 14;
+      const cellPadding = SIZE_PADDING_MAP[size] ?? 32;
+      const sumWidth = (actions, row) => actions.reduce((width, action) => width + getActionWidth(action, row, fontSize), 0) + (actions.length - 1) * 25 + cellPadding + 5;
+      if (!rows?.length) {
+        return sumWidth(permittedActions);
+      }
+      let maxWidth = 0;
+      for (const row of rows) {
+        const visibleActions = permittedActions.filter((action) => isActionVisible(action, row));
+        maxWidth = Math.max(maxWidth, sumWidth(visibleActions, row));
+      }
+      return maxWidth;
+    }
     function buildActions(actions, crudForm) {
       if (!actions) return [];
       return actions.map((item) => mergeAction({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qidian-vue-ui",
-  "version": "2.0.66",
+  "version": "2.1.0",
   "description": "基于 TDesign 的 QiDian Vue UI 组件库",
   "author": "qidian",
   "license": "MIT",