qidian-vue-ui 2.0.27 → 2.0.28

package/dist/components/service/table/edit-cell.d.ts

@@ -1,4 +1,4 @@
-import type { TableEditableCellPropsParams, TableRowData, TableRowValue } from 'tdesign-vue-next';
+import type { AllValidateResult, TableEditableCellPropsParams, TableRowData, TableRowValue } from 'tdesign-vue-next';
 import type { PropType } from 'vue';
 import type { QdFormBeforeSubmitQueueItem } from '../../form';
 import type { QdServiceTableFormItem } from './types';
@@ -23,6 +23,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     label: PropType<unknown>;
     lazy: BooleanConstructor;
     active: BooleanConstructor;
+    autofocus: BooleanConstructor;
+    validationErrors: PropType<AllValidateResult[]>;
     renderCell: {
         type: PropType<() => unknown>;
         required: true;
@@ -31,6 +33,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<() => void>;
         required: true;
     };
+    consumeAutofocus: {
+        type: PropType<() => void>;
+        required: true;
+    };
     registerBeforeSubmit: {
         type: PropType<RegisterBeforeSubmit>;
         required: true;
@@ -75,6 +81,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     label: PropType<unknown>;
     lazy: BooleanConstructor;
     active: BooleanConstructor;
+    autofocus: BooleanConstructor;
+    validationErrors: PropType<AllValidateResult[]>;
     renderCell: {
         type: PropType<() => unknown>;
         required: true;
@@ -83,6 +91,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<() => void>;
         required: true;
     };
+    consumeAutofocus: {
+        type: PropType<() => void>;
+        required: true;
+    };
     registerBeforeSubmit: {
         type: PropType<RegisterBeforeSubmit>;
         required: true;
@@ -109,6 +121,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     lazy: boolean;
+    autofocus: boolean;
     active: boolean;
     sourceRow: TableRowData;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/service/table/edit-cell.mjs

@@ -1,5 +1,5 @@
 import { isEmpty } from "qidian-shared";
-import { defineComponent, computed, provide, onBeforeUnmount, h } from "vue";
+import { defineComponent, computed, onBeforeUnmount, provide, h } from "vue";
 import { useConfig } from "../../config-provider/useConfig.mjs";
 import { qdUseComputeValue } from "../../config-renderer/compute.mjs";
 import { resolveQdFormItemOptions } from "../../form/utils.mjs";
@@ -94,6 +94,8 @@ const QdServiceTableEditCell = /* @__PURE__ */ defineComponent({
     label: [String, Function, Object],
     lazy: Boolean,
     active: Boolean,
+    autofocus: Boolean,
+    validationErrors: Array,
     renderCell: {
       type: Function,
       required: true
@@ -102,6 +104,10 @@ const QdServiceTableEditCell = /* @__PURE__ */ defineComponent({
       type: Function,
       required: true
     },
+    consumeAutofocus: {
+      type: Function,
+      required: true
+    },
     registerBeforeSubmit: {
       type: Function,
       required: true
@@ -131,18 +137,26 @@ const QdServiceTableEditCell = /* @__PURE__ */ defineComponent({
     attrs
   }) {
     const horizontalScroll = props.getHorizontalScroll();
+    const restoreHorizontalScrollOnFocus = props.autofocus;
     let autofocusScrollRestored = false;
+    let unmounting = false;
     const currentContext = computed(() => createRowEditContext(props.sourceRow ?? props.row, () => props.row, props.colKey, props.updateEditedCellValue, props.notifyDataChange, (value) => {
       if (typeof attrs.onChange === "function") attrs.onChange(value);
     }));
     const {
       t
     } = useConfig("form");
+    const validationError = computed(() => props.validationErrors?.[0]);
     const validationStatus = computed(() => {
-      const status = attrs.status;
+      const status = attrs.status ?? validationError.value?.type;
       if (status === "error" || status === "warning" || status === "success") return status;
+      if (validationError.value) return "error";
       return void 0;
     });
+    const validationTips = computed(() => {
+      const tips = attrs.tips ?? validationError.value?.message;
+      return typeof tips === "string" ? tips : void 0;
+    });
     const reIfRender = computed(() => {
       const ifRender = props.formItem.ifRender;
       if (isEmpty(ifRender)) return true;
@@ -164,7 +178,7 @@ const QdServiceTableEditCell = /* @__PURE__ */ defineComponent({
       if (!resolved) return;
       return {
         ...resolved,
-        ...props.lazy && props.active ? {
+        ...props.autofocus ? {
           autofocus: true
         } : {},
         ...validationStatus.value ? {
@@ -174,13 +188,27 @@ const QdServiceTableEditCell = /* @__PURE__ */ defineComponent({
     });
     function handleFocusin() {
       props.activate();
-      if (!props.lazy || !props.active || autofocusScrollRestored || horizontalScroll === void 0) {
+      if (!props.lazy || !props.active || !restoreHorizontalScrollOnFocus || autofocusScrollRestored || horizontalScroll === void 0) {
         return;
       }
       autofocusScrollRestored = true;
       props.setHorizontalScroll(horizontalScroll);
       queueMicrotask(() => props.setHorizontalScroll(horizontalScroll));
     }
+    function handleFocusout(event) {
+      const currentTarget = event.currentTarget;
+      const nextTarget = event.relatedTarget;
+      if (nextTarget instanceof Node && currentTarget.contains(nextTarget)) return;
+      requestAnimationFrame(() => {
+        if (unmounting || !currentTarget.isConnected || currentTarget.contains(document.activeElement)) {
+          return;
+        }
+        props.consumeAutofocus();
+      });
+    }
+    onBeforeUnmount(() => {
+      unmounting = true;
+    });
     provide(PROVIDE_FORM_ADD_BEFORE_SUBMIT_QUEUE, (item) => {
       const cleanup = props.registerBeforeSubmit(props.rowValue, item);
       onBeforeUnmount(cleanup);
@@ -199,16 +227,17 @@ const QdServiceTableEditCell = /* @__PURE__ */ defineComponent({
       return h("div", {
         ...rendererAttrs,
         class: ["qd-service-table__cell-editor", "t-form__controls", status ? `t-is-${status}` : void 0, status === "success" ? "t-form--success-border" : void 0],
-        onFocusin: handleFocusin
+        onFocusin: handleFocusin,
+        onFocusout: handleFocusout
       }, [h("div", {
         class: "t-form__controls-content"
       }, [h(_sfc_main, {
         config: component.value,
         context: currentContext.value,
         crudMode: props.formItem.crudMode
-      })]), attrs.tips ? h("div", {
+      })]), validationTips.value ? h("div", {
         class: ["t-tips", status ? `t-is-${status}` : "t-is-default"]
-      }, attrs.tips) : void 0]);
+      }, validationTips.value) : void 0]);
     };
   }
 });

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

@@ -1,88 +1,88 @@
-.qd-service-table[data-v-688a9d88] {
+.qd-service-table[data-v-ffc43b16] {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
-.qd-service-table[data-v-688a9d88] >  .t-table__content {
+.qd-service-table[data-v-ffc43b16] >  .t-table__content {
   flex: 1;
 }
-.qd-service-table--mini[data-v-688a9d88] {
+.qd-service-table--mini[data-v-ffc43b16] {
   font: var(--td-font-body-small);
 }
-.qd-service-table--mini[data-v-688a9d88] th,
-.qd-service-table--mini[data-v-688a9d88] tr:not(.t-table__expanded-row) > td {
+.qd-service-table--mini[data-v-ffc43b16] th,
+.qd-service-table--mini[data-v-ffc43b16] tr:not(.t-table__expanded-row) > td {
   padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs);
   line-height: var(--td-line-height-body-small);
 }
-.qd-service-table--mini[data-v-688a9d88] .t-table__row-full-element {
+.qd-service-table--mini[data-v-ffc43b16] .t-table__row-full-element {
   padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s);
 }
-.qd-service-table--hide-empty-image[data-v-688a9d88] .t-table__empty {
+.qd-service-table--hide-empty-image[data-v-ffc43b16] .t-table__empty {
   min-height: auto;
 }
-.qd-service-table--hide-empty-image[data-v-688a9d88] .t-table__empty .t-empty {
+.qd-service-table--hide-empty-image[data-v-ffc43b16] .t-table__empty .t-empty {
   padding: 0 !important;
 }
-.qd-service-table--hide-empty-image[data-v-688a9d88] .t-table__empty .t-empty__image {
+.qd-service-table--hide-empty-image[data-v-ffc43b16] .t-table__empty .t-empty__image {
   display: none;
 }
-.qd-service-table--hide-empty-image[data-v-688a9d88] .t-table__empty .t-empty__title {
+.qd-service-table--hide-empty-image[data-v-ffc43b16] .t-table__empty .t-empty__title {
   margin-top: 0;
 }
-.qd-service-table[data-v-688a9d88] .t-table__tree-col:not(:has(.t-table__tree-op-icon)) {
+.qd-service-table[data-v-ffc43b16] .t-table__tree-col:not(:has(.t-table__tree-op-icon)) {
   margin-left: calc(var(--td-font-size-body-large) + var(--td-comp-margin-s));
 }
-.qd-service-table[data-v-688a9d88] .t-table__tree-leaf-node .t-table__tree-op-icon:empty {
+.qd-service-table[data-v-ffc43b16] .t-table__tree-leaf-node .t-table__tree-op-icon:empty {
   width: calc(var(--td-font-size-body-large) + var(--td-comp-margin-s));
 }
-.qd-service-table[data-v-688a9d88] .t-affix > .t-table__affixed-header-elm-wrap,
-.qd-service-table[data-v-688a9d88] .t-affix > .t-table__scrollbar--obvious {
-  transform: var(--f7d11548);
+.qd-service-table[data-v-ffc43b16] .t-affix > .t-table__affixed-header-elm-wrap,
+.qd-service-table[data-v-ffc43b16] .t-affix > .t-table__scrollbar--obvious {
+  transform: var(--v366f53ea);
 }
-.qd-service-table--horizontal-bar-static[data-v-688a9d88] .t-table__scrollbar--obvious {
+.qd-service-table--horizontal-bar-static[data-v-ffc43b16] .t-table__scrollbar--obvious {
   visibility: hidden;
   pointer-events: none;
 }
-.qd-service-table[data-v-688a9d88]  .t-table__expanded-row .qd-service-table--horizontal-bar-static > div:has(> div > .t-table__scrollbar--obvious) {
+.qd-service-table[data-v-ffc43b16]  .t-table__expanded-row .qd-service-table--horizontal-bar-static > div:has(> div > .t-table__scrollbar--obvious) {
   display: none;
 }
-.qd-service-table[data-v-688a9d88] .t-table__expanded-row > td {
+.qd-service-table[data-v-ffc43b16] .t-table__expanded-row > td {
   height: 0;
 }
-.qd-service-table[data-v-688a9d88] .t-table__affixed-header-elm-wrap {
+.qd-service-table[data-v-ffc43b16] .t-table__affixed-header-elm-wrap {
   height: auto !important;
 }
-.qd-service-table[data-v-688a9d88] .t-table__affixed-header-elm {
+.qd-service-table[data-v-ffc43b16] .t-table__affixed-header-elm {
   position: relative;
   scrollbar-width: none;
 }
-.qd-service-table[data-v-688a9d88] .t-table__affixed-header-elm::-webkit-scrollbar {
+.qd-service-table[data-v-ffc43b16] .t-table__affixed-header-elm::-webkit-scrollbar {
   display: none;
   width: 0;
   height: 0;
 }
-.qd-service-table[data-v-688a9d88] .t-table__virtual-scroll-cursor + table {
+.qd-service-table[data-v-ffc43b16] .t-table__virtual-scroll-cursor + table {
   border-collapse: separate;
 }
-.qd-service-table[data-v-688a9d88] .t-table__expanded-row-inner {
+.qd-service-table[data-v-ffc43b16] .t-table__expanded-row-inner {
   display: block;
   position: sticky;
   left: 0;
-  width: var(--v265fe151) !important;
+  width: var(--v12b6b140) !important;
 }
-.qd-service-table[data-v-688a9d88] .t-table__cell-wrap > .t-form__controls > .t-form__controls-content > *:not(.t-switch):not(.t-tag):not(.t-icon):not(.qd-file-icon) {
+.qd-service-table[data-v-ffc43b16] .t-table__cell-wrap > .t-form__controls > .t-form__controls-content > *:not(.t-switch):not(.t-tag):not(.t-icon):not(.qd-file-icon) {
   width: 100%;
 }
-.qd-service-table[data-v-688a9d88] .qd-service-table__non-editable-col {
+.qd-service-table[data-v-ffc43b16] .qd-service-table__non-editable-col {
   background-color: color-mix(in srgb, var(--td-bg-color-component) 50%, transparent);
 }
-.qd-service-table[data-v-688a9d88]  .qd-service-table__non-editable-col:is(
+.qd-service-table[data-v-ffc43b16]  .qd-service-table__non-editable-col:is(
         .t-table__cell--fixed-left,
         .t-table__cell--fixed-right
       ) {
   background-color: inherit;
   background-image: linear-gradient(color-mix(in srgb, var(--td-bg-color-secondarycontainer) 50%, transparent), color-mix(in srgb, var(--td-bg-color-secondarycontainer) 50%, transparent));
 }
-.qd-service-table--disable-horizontal-scroll[data-v-688a9d88] colgroup > col {
+.qd-service-table--disable-horizontal-scroll[data-v-ffc43b16] colgroup > col {
   width: auto !important;
 }

package/dist/components/service/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 QdServiceTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-688a9d88"]]);
+const QdServiceTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ffc43b16"]]);
 export {
   QdServiceTable as default
 };

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

@@ -324,8 +324,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     emit: __emit
   }) {
     useCssVars((_ctx) => ({
-      "f7d11548": affixedHeaderTransform.value,
-      "v265fe151": expandedRowWidth.value
+      "v366f53ea": affixedHeaderTransform.value,
+      "v12b6b140": expandedRowWidth.value
     }));
     const props = __props;
     const emit = __emit;
@@ -379,6 +379,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const treeLoadIds = ref([]);
     const editingCells = shallowRef([]);
     const activeEditingCell = shallowRef();
+    const autofocusEditingCell = shallowRef();
+    const editingCellValidationErrors = shallowRef(/* @__PURE__ */ new Map());
     const expandedRowProxyMap = /* @__PURE__ */ new WeakMap();
     let dataChangePending = false;
     const {
@@ -577,6 +579,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ...scrollOptions
       } : scroll;
       const reTableOptions = tableOptions;
+      const onValidate = reTableOptions.onValidate;
+      const onRowValidate = reTableOptions.onRowValidate;
+      reTableOptions.onValidate = (context) => {
+        replaceTableValidationErrors(context.result);
+        onValidate?.(context);
+      };
+      reTableOptions.onRowValidate = (context) => {
+        syncCellValidationErrors(context.result);
+        onRowValidate?.(context);
+      };
       const expandedRow = reTableOptions.expandedRow;
       if (expandedRow) {
         reTableOptions.expandedRow = (h2, context) => expandedRow(h2, {
@@ -1012,6 +1024,74 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function getCellKey(row, colKey) {
       return `${String(getRowValue(row))}__${String(colKey)}`;
     }
+    function syncCellValidationErrors(results) {
+      if (!results.length) return;
+      const nextErrors = new Map(editingCellValidationErrors.value);
+      for (const result of results) {
+        const rowValue = getRowValue(result.row);
+        const colKey = String(result.col.colKey);
+        const rowErrors = new Map(nextErrors.get(rowValue));
+        if (result.errorList.length) rowErrors.set(colKey, result.errorList);
+        else rowErrors.delete(colKey);
+        if (rowErrors.size) nextErrors.set(rowValue, rowErrors);
+        else nextErrors.delete(rowValue);
+      }
+      editingCellValidationErrors.value = nextErrors;
+    }
+    function replaceTableValidationErrors(result) {
+      const nextErrors = /* @__PURE__ */ new Map();
+      for (const row of data.value) {
+        const rowValue = getRowValue(row);
+        const rowErrors = /* @__PURE__ */ new Map();
+        for (const {
+          column
+        } of editableColumns.value) {
+          const colKey = String(column.colKey);
+          const errors = result[getCellKey(row, colKey)] ?? result[`${String(rowValue)}_${colKey}`];
+          if (errors?.length) rowErrors.set(colKey, errors);
+        }
+        if (rowErrors.size) nextErrors.set(rowValue, rowErrors);
+      }
+      editingCellValidationErrors.value = nextErrors;
+    }
+    function replaceRowValidationErrors(rowValue, results) {
+      const nextErrors = new Map(editingCellValidationErrors.value);
+      const rowErrors = /* @__PURE__ */ new Map();
+      for (const result of results) {
+        if (!result.errorList.length) continue;
+        rowErrors.set(String(result.col.colKey), result.errorList);
+      }
+      if (rowErrors.size) nextErrors.set(rowValue, rowErrors);
+      else nextErrors.delete(rowValue);
+      editingCellValidationErrors.value = nextErrors;
+    }
+    function pruneCellValidationErrors(rows) {
+      const currentErrors = editingCellValidationErrors.value;
+      if (!currentErrors.size) return;
+      const validColKeys = new Set(editableColumns.value.map(({
+        column
+      }) => String(column.colKey)));
+      const validErrorRows = /* @__PURE__ */ new Set();
+      for (const row of rows) {
+        const rowValue = getRowValue(row);
+        if (!currentErrors.has(rowValue)) continue;
+        validErrorRows.add(rowValue);
+        if (validErrorRows.size === currentErrors.size) break;
+      }
+      let changed = false;
+      const nextErrors = /* @__PURE__ */ new Map();
+      for (const [rowValue, rowErrors] of currentErrors) {
+        if (!validErrorRows.has(rowValue)) {
+          changed = true;
+          continue;
+        }
+        const validRowErrors = new Map([...rowErrors].filter(([colKey]) => validColKeys.has(colKey)));
+        if (validRowErrors.size !== rowErrors.size) changed = true;
+        if (validRowErrors.size) nextErrors.set(rowValue, validRowErrors);
+      }
+      if (!changed) return;
+      editingCellValidationErrors.value = nextErrors;
+    }
     function isSameEditingCell(first, second) {
       return getRowValue(first.row) === getRowValue(second.row) && first.colKey === second.colKey;
     }
@@ -1060,9 +1140,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function removeEditingCell(target) {
       editingCells.value = editingCells.value.filter((item) => !isSameEditingCell(item, target));
+      clearAutofocusEditingCell(target);
       if (!activeEditingCell.value || !isSameEditingCell(activeEditingCell.value, target)) return;
       activeEditingCell.value = editingCells.value.at(-1);
     }
+    function clearAutofocusEditingCell(target) {
+      if (!autofocusEditingCell.value || !isSameEditingCell(autofocusEditingCell.value, target)) {
+        return;
+      }
+      autofocusEditingCell.value = void 0;
+    }
     let suppressEnterCellKey = null;
     async function exitEditingCell(target) {
       const cellKey = getCellKey(target.row, target.colKey);
@@ -1081,14 +1168,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (suppressEnterCellKey === cellKey) suppressEnterCellKey = null;
       }, 0);
     }
-    function enterEditingCell(target) {
+    function enterEditingCell(target, autofocus = true) {
       const currentActiveCell = activeEditingCell.value;
       if (currentActiveCell && !isSameEditingCell(currentActiveCell, target)) {
+        clearAutofocusEditingCell(currentActiveCell);
         void exitEditingCell(currentActiveCell);
       }
       const editingCell = findEditingCell(target.row, target.colKey);
       if (!editingCell) editingCells.value = [...editingCells.value, target];
       activeEditingCell.value = editingCell ?? target;
+      if (autofocus) autofocusEditingCell.value = activeEditingCell.value;
     }
     async function exitAllEditingCells() {
       for (const editingCell of [...editingCells.value]) {
@@ -1103,7 +1192,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const column = context.col;
       if (column.formItem) {
         const editingCell = findEditingCell(context.row, column.colKey);
-        if (editingCell) activeEditingCell.value = editingCell;
+        if (editingCell) enterEditingCell(editingCell, false);
         else exitActiveEditingCell();
         return;
       }
@@ -1429,9 +1518,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     async function validateTableData(params) {
       const result = isVirtualScroll.value ? await serializeOffscreen(() => validateTableViaOffscreenForm()) : (await tableRef.value?.validateTableData())?.result ?? {};
-      if (isVirtualScroll.value) props.onValidate?.({
-        result
-      });
+      if (isVirtualScroll.value) {
+        replaceTableValidationErrors(result);
+        props.onValidate?.({
+          result
+        });
+      }
       const cellResults = resolveValidationResults(result);
       const context = {
         result,
@@ -1444,10 +1536,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     async function validateRowData(rowValue, params) {
       const result = isVirtualScroll.value ? await serializeOffscreen(() => validateSingleRowViaOffscreenForm(rowValue)) : (await tableRef.value?.validateRowData(rowValue))?.result ?? [];
-      if (isVirtualScroll.value) props.onRowValidate?.({
-        result,
-        trigger: "parent"
-      });
+      if (isVirtualScroll.value) {
+        replaceRowValidationErrors(rowValue, result);
+        props.onRowValidate?.({
+          result,
+          trigger: "parent"
+        });
+      }
       const context = {
         result,
         trigger: "parent",
@@ -1623,6 +1718,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 row,
                 colKey
               }),
+              autofocus: !!autofocusEditingCell.value && isSameEditingCell(autofocusEditingCell.value, {
+                row,
+                colKey
+              }),
+              validationErrors: editingCellValidationErrors.value.get(getRowValue(row))?.get(String(colKey)),
               renderCell: () => renderDisplayCell(h, column, cellContext),
               activate: () => {
                 if (suppressEnterCellKey === getCellKey(row, colKey)) return;
@@ -1631,6 +1731,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   colKey
                 });
               },
+              consumeAutofocus: () => clearAutofocusEditingCell({
+                row,
+                colKey
+              }),
               registerBeforeSubmit: registerBeforeSubmitQueue
             };
           }
@@ -1878,6 +1982,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(expandedTreeNodes, adjustScrollWhenTreeExpanded, {
       flush: "post"
     });
+    watch(data, pruneCellValidationErrors);
     watch(tableContentVisible, (visible) => {
       if (!visible) return;
       watchAnimatingTransformAncestor();

package/package.json

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