替换 node-sass 为 dart-sass

2025-12-13 17:58:24 +08:00 · 2021-12-25 19:19:27 +08:00
parent 64a9a498e1
commit 6996fcadc1
12 changed files with 72 additions and 51 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vxe-table",
-  "version": "4.1.18-beta.0",
+  "version": "4.1.18-beta.3",
  "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
  "scripts": {
    "serve": "vue-cli-service serve",
@@ -58,7 +58,7 @@
    "gulp-sourcemaps": "^2.6.5",
    "gulp-typescript": "^5.0.1",
    "gulp-uglify": "^3.0.2",
-    "node-sass": "^6.0.1",
+    "sass": "^1.45.1",
    "sass-loader": "^10.0.5",
    "typescript": "~4.3.5",
    "vue": "^3.2.22",
--- a/packages/footer/src/footer.ts
+++ b/packages/footer/src/footer.ts
@@ -1,4 +1,4 @@
-import { createCommentVNode, defineComponent, h, ref, Ref, PropType, inject, nextTick } from 'vue'
+import { createCommentVNode, defineComponent, h, ref, Ref, PropType, inject, nextTick, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
 import { getPropClass } from '../../table/src/util'
 import { updateCellTitle } from '../../tools/dom'
@@ -76,6 +76,7 @@ export default defineComponent({
      $xetable.dispatchEvent('scroll', { type: renderType, fixed: fixedType, scrollTop: bodyElem.scrollTop, scrollLeft, isX, isY: false }, evnt)
    }

+    onMounted(() => {
      nextTick(() => {
        const { fixedType } = props
        const { elemStore } = tableInternalData
@@ -86,6 +87,7 @@ export default defineComponent({
        elemStore[`${prefix}list`] = refFooterTFoot.value
        elemStore[`${prefix}xSpace`] = refFooterXSpace.value
      })
+    })

    const renderVN = () => {
      let { fixedType, fixedColumn, tableColumn, footerTableData } = props
--- a/packages/grid/src/grid.ts
+++ b/packages/grid/src/grid.ts
@@ -13,7 +13,7 @@ import { TableMethods, VxeGridConstructor, VxeGridEmits, GridReactData, VxeGridP

 const tableComponentPropKeys = Object.keys(tableComponentProps as any)

-const tableComponentMethodKeys: (keyof TableMethods)[] = ['clearAll', 'syncData', 'updateData', 'loadData', 'reloadData', 'reloadRow', 'loadColumn', 'reloadColumn', 'getRowNode', 'getColumnNode', 'getRowIndex', 'getVTRowIndex', 'getVMRowIndex', 'getColumnIndex', 'getVTColumnIndex', 'getVMColumnIndex', 'createData', 'createRow', 'revertData', 'clearData', 'isInsertByRow', 'isUpdateByRow', 'getColumns', 'getColumnById', 'getColumnByField', 'getTableColumn', 'getData', 'getCheckboxRecords', 'getRowById', 'getRowid', 'getTableData', 'hideColumn', 'showColumn', 'resetColumn', 'refreshColumn', 'refreshScroll', 'recalculate', 'closeTooltip', 'isAllCheckboxChecked', 'isAllCheckboxIndeterminate', 'getCheckboxIndeterminateRecords', 'setCheckboxRow', 'isCheckedByCheckboxRow', 'isIndeterminateByCheckboxRow', 'toggleCheckboxRow', 'setAllCheckboxRow', 'getRadioReserveRecord', 'clearRadioReserve', 'getCheckboxReserveRecords', 'clearCheckboxReserve', 'toggleAllCheckboxRow', 'clearCheckboxRow', 'setCurrentRow', 'isCheckedByRadioRow', 'setRadioRow', 'clearCurrentRow', 'clearRadioRow', 'getCurrentRecord', 'getRadioRecord', 'getCurrentColumn', 'setCurrentColumn', 'clearCurrentColumn', 'sort', 'clearSort', 'isSort', 'getSortColumns', 'closeFilter', 'isFilter', 'isRowExpandLoaded', 'clearRowExpandLoaded', 'reloadRowExpand', 'reloadRowExpand', 'toggleRowExpand', 'setAllRowExpand', 'setRowExpand', 'isExpandByRow', 'clearRowExpand', 'clearRowExpandReserve', 'getRowExpandRecords', 'getTreeExpandRecords', 'isTreeExpandLoaded', 'clearTreeExpandLoaded', 'reloadTreeExpand', 'reloadTreeChilds', 'toggleTreeExpand', 'setAllTreeExpand', 'setTreeExpand', 'isTreeExpandByRow', 'clearTreeExpand', 'clearTreeExpandReserve', 'getScroll', 'scrollTo', 'scrollToRow', 'scrollToColumn', 'clearScroll', 'updateFooter', 'updateStatus', 'setMergeCells', 'removeMergeCells', 'getMergeCells', 'clearMergeCells', 'setMergeFooterItems', 'removeMergeFooterItems', 'getMergeFooterItems', 'clearMergeFooterItems', 'focus', 'blur', 'connect']
+const tableComponentMethodKeys: (keyof TableMethods)[] = ['clearAll', 'syncData', 'updateData', 'loadData', 'reloadData', 'reloadRow', 'loadColumn', 'reloadColumn', 'getRowNode', 'getColumnNode', 'getRowIndex', 'getVTRowIndex', 'getVMRowIndex', 'getColumnIndex', 'getVTColumnIndex', 'getVMColumnIndex', 'createData', 'createRow', 'revertData', 'clearData', 'isInsertByRow', 'isUpdateByRow', 'getColumns', 'getColumnById', 'getColumnByField', 'getTableColumn', 'getData', 'getCheckboxRecords', 'getParentRow', 'getRowSeq', 'getRowById', 'getRowid', 'getTableData', 'hideColumn', 'showColumn', 'resetColumn', 'refreshColumn', 'refreshScroll', 'recalculate', 'closeTooltip', 'isAllCheckboxChecked', 'isAllCheckboxIndeterminate', 'getCheckboxIndeterminateRecords', 'setCheckboxRow', 'isCheckedByCheckboxRow', 'isIndeterminateByCheckboxRow', 'toggleCheckboxRow', 'setAllCheckboxRow', 'getRadioReserveRecord', 'clearRadioReserve', 'getCheckboxReserveRecords', 'clearCheckboxReserve', 'toggleAllCheckboxRow', 'clearCheckboxRow', 'setCurrentRow', 'isCheckedByRadioRow', 'setRadioRow', 'clearCurrentRow', 'clearRadioRow', 'getCurrentRecord', 'getRadioRecord', 'getCurrentColumn', 'setCurrentColumn', 'clearCurrentColumn', 'sort', 'clearSort', 'isSort', 'getSortColumns', 'closeFilter', 'isFilter', 'isRowExpandLoaded', 'clearRowExpandLoaded', 'reloadRowExpand', 'reloadRowExpand', 'toggleRowExpand', 'setAllRowExpand', 'setRowExpand', 'isExpandByRow', 'clearRowExpand', 'clearRowExpandReserve', 'getRowExpandRecords', 'getTreeExpandRecords', 'isTreeExpandLoaded', 'clearTreeExpandLoaded', 'reloadTreeExpand', 'reloadTreeChilds', 'toggleTreeExpand', 'setAllTreeExpand', 'setTreeExpand', 'isTreeExpandByRow', 'clearTreeExpand', 'clearTreeExpandReserve', 'getScroll', 'scrollTo', 'scrollToRow', 'scrollToColumn', 'clearScroll', 'updateFooter', 'updateStatus', 'setMergeCells', 'removeInsertRow', 'removeMergeCells', 'getMergeCells', 'clearMergeCells', 'setMergeFooterItems', 'removeMergeFooterItems', 'getMergeFooterItems', 'clearMergeFooterItems', 'openTooltip', 'focus', 'blur', 'connect']

 const gridComponentEmits: VxeGridEmits = [
  ...tableComponentEmits,
@@ -733,6 +733,7 @@ export default defineComponent({
                  }
                  sortList = defaultSort.map((item) => {
                    return {
+                      field: item.field,
                      property: item.field,
                      order: item.order
                    }
--- a/packages/header/src/header.ts
+++ b/packages/header/src/header.ts
@@ -1,4 +1,4 @@
-import { createCommentVNode, defineComponent, h, ref, Ref, PropType, inject, nextTick, watch } from 'vue'
+import { createCommentVNode, defineComponent, h, ref, Ref, PropType, inject, nextTick, watch, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
 import { convertToRows } from './util'
 import { getColMinWidth } from '../../table/src/util'
@@ -130,6 +130,7 @@ export default defineComponent({

    watch(() => props.tableColumn, uploadColumn)

+    onMounted(() => {
      nextTick(() => {
        const { fixedType } = props
        const { internalData } = $xetable
@@ -143,6 +144,7 @@ export default defineComponent({
        elemStore[`${prefix}repair`] = refHeaderBorderRepair.value
        uploadColumn()
      })
+    })

    const renderVN = () => {
      let { fixedType, fixedColumn, tableColumn } = props
--- a/packages/table/src/columnInfo.ts
+++ b/packages/table/src/columnInfo.ts
@@ -59,6 +59,7 @@ export class ColumnInfo {
      // 基本属性
      type: _vm.type,
      property: _vm.field,
+      field: _vm.field,
      title: _vm.title,
      width: _vm.width,
      minWidth: _vm.minWidth,
--- a/packages/table/src/table.ts
+++ b/packages/table/src/table.ts
@@ -1222,11 +1222,12 @@ export default defineComponent({
        }[] = []
        const orderColumns: {
          column: VxeTableDefines.ColumnInfo
+          field: string
          property: string
          order: VxeTablePropTypes.SortOrder
        }[] = []
        tableFullColumn.forEach((column) => {
-          const { sortable, order, filters } = column
+          const { property, sortable, order, filters } = column
          if (!allRemoteFilter && filters && filters.length) {
            const valueList: any[] = []
            const itemList: VxeTableDefines.FilterOption[] = []
@@ -1241,7 +1242,7 @@ export default defineComponent({
            }
          }
          if (!allRemoteSort && sortable && order) {
-            orderColumns.push({ column, property: column.property, order })
+            orderColumns.push({ column, field: property, property, order })
          }
        })

@@ -3438,9 +3439,9 @@ export default defineComponent({
        const sortList: VxeTableDefines.SortCheckedParams[] = []
        const { tableFullColumn } = internalData
        tableFullColumn.forEach((column) => {
-          const { order } = column
+          const { property, order } = column
          if (column.sortable && order) {
-            sortList.push({ column, property: column.property, order })
+            sortList.push({ column, field: property, property, order })
          }
        })
        return sortList
--- a/styles/button.scss
+++ b/styles/button.scss
@@ -124,7 +124,7 @@ $btnThemeList: (
    line-height: 1;
    border: 1px solid $vxe-input-border-color;
    &.is--round {
-      border-radius: $vxe-button-height-default * 0.5;
+      border-radius: $vxe-button-round-border-radius-default;
    }
    &:not(.is--round) {
      border-radius: $vxe-border-radius;
@@ -223,7 +223,7 @@ $btnThemeList: (
        min-width: $vxe-button-height-medium;
      }
      &.is--round {
-        border-radius: $vxe-button-height-medium * 0.5;
+        border-radius: $vxe-button-round-border-radius-medium;
      }
    }
    .vxe-button--loading-icon,
@@ -239,7 +239,7 @@ $btnThemeList: (
        min-width: $vxe-button-height-small;
      }
      &.is--round {
-        border-radius: $vxe-button-height-small * 0.5;
+        border-radius: $vxe-button-round-border-radius-small;
      }
    }
    .vxe-button--loading-icon,
@@ -255,7 +255,7 @@ $btnThemeList: (
        min-width: $vxe-button-height-mini;
      }
      &.is--round {
-        border-radius: $vxe-button-height-mini * 0.5;
+        border-radius: $vxe-button-round-border-radius-mini;
      }
    }
    .vxe-button--loading-icon,
--- a/styles/modal.scss
+++ b/styles/modal.scss
@@ -294,7 +294,8 @@
    }
  }
  .vxe-modal--resize {
-    $SpaceSize: 8;
+    $SpaceSize: 8px;
+    $SpaceWidth: 5px;
    .wl-resize,
    .wr-resize,
    .swst-resize,
@@ -308,32 +309,32 @@
    }
    .wl-resize,
    .wr-resize {
-      width: #{$SpaceSize}px;
+      width: $SpaceSize;
      height: 100%;
      top: 0;
      cursor: w-resize;
    }
    .wl-resize {
-      left: -#{$SpaceSize * 0.5 + 1}px;
+      left: -$SpaceWidth;
    }
    .wr-resize {
-      right: -#{$SpaceSize * 0.5 + 1}px;
+      right: -$SpaceWidth;
    }
    .swst-resize,
    .sest-resize,
    .swlb-resize,
    .selb-resize {
-      width: #{$SpaceSize + 2}px;
-      height: #{$SpaceSize + 2}px;
+      width: $SpaceSize + 2;
+      height: $SpaceSize + 2;
      z-index: 101;
    }
    .swst-resize,
    .sest-resize {
-      top: -#{$SpaceSize}px;
+      top: -$SpaceSize;
    }
    .swlb-resize,
    .selb-resize {
-      bottom: -#{$SpaceSize}px;
+      bottom: -$SpaceSize;
    }
    .sest-resize,
    .swlb-resize {
@@ -345,24 +346,24 @@
    }
    .swst-resize,
    .swlb-resize {
-      left: -#{$SpaceSize}px;
+      left: -$SpaceSize;
    }
    .sest-resize,
    .selb-resize {
-      right: -#{$SpaceSize}px;
+      right: -$SpaceSize;
    }
    .st-resize,
    .sb-resize {
      width: 100%;
-      height: #{$SpaceSize}px;
+      height: $SpaceSize;
      left: 0;
      cursor: s-resize;
    }
    .st-resize {
-      top: -#{$SpaceSize * 0.5 + 1}px;
+      top: -$SpaceWidth;
    }
    .sb-resize {
-      bottom: -#{$SpaceSize * 0.5 + 1}px;
+      bottom: -$SpaceWidth;
    }
  }
 }
--- a/styles/table.scss
+++ b/styles/table.scss
@@ -474,7 +474,7 @@
    line-height: $vxe-table-row-line-height;
    text-align: left;
    &:not(.col--ellipsis) {
-      padding: #{floor(($vxe-table-row-height-default - $vxe-table-row-line-height) * 0.5)} 0;
+      padding: $vxe-table-column-padding-default;
    }
    &.col--current {
      background-color: $vxe-table-column-current-background-color;
@@ -609,7 +609,7 @@
    .vxe-body--column,
    .vxe-footer--column {
      &:not(.col--ellipsis) {
-        padding: #{floor(($vxe-table-row-height-medium - $vxe-table-row-line-height) * 0.5)} 0;
+        padding: $vxe-table-column-padding-medium;
      }
    }
    .vxe-cell {
@@ -635,7 +635,7 @@
    .vxe-body--column,
    .vxe-footer--column {
      &:not(.col--ellipsis) {
-        padding: #{floor(($vxe-table-row-height-small - $vxe-table-row-line-height) * 0.5)} 0;
+        padding: $vxe-table-column-padding-small;
      }
    }
    .vxe-cell {
@@ -661,7 +661,7 @@
    .vxe-body--column,
    .vxe-footer--column {
      &:not(.col--ellipsis) {
-        padding: #{floor(($vxe-table-row-height-mini - $vxe-table-row-line-height) * 0.5)} 0;
+        padding: $vxe-table-column-padding-mini;
      }
    }
    .vxe-cell {
--- a/styles/variable.scss
+++ b/styles/variable.scss
@@ -62,6 +62,10 @@ $vxe-table-row-hover-checkbox-checked-background-color: #ffebbc !default;
 $vxe-table-row-current-background-color: #e6f7ff !default;
 $vxe-table-row-hover-current-background-color: #d7effb !default;

+$vxe-table-column-padding-default: 13px 0 !default;
+$vxe-table-column-padding-medium: 11px 0 !default;
+$vxe-table-column-padding-small: 9px 0 !default;
+$vxe-table-column-padding-mini: 7px 0 !default;
 $vxe-table-column-hover-background-color: #d7effb !default;
 $vxe-table-column-current-background-color: #e6f7ff !default;
 $vxe-table-column-icon-border-color: #c0c4cc !default;
@@ -175,6 +179,10 @@ $vxe-button-height-default: 34px !default;
 $vxe-button-height-medium: 32px !default;
 $vxe-button-height-small: 30px !default;
 $vxe-button-height-mini: 28px !default;
+$vxe-button-round-border-radius-default: 17px !default;
+$vxe-button-round-border-radius-medium: 16px !default;
+$vxe-button-round-border-radius-small: 15px !default;
+$vxe-button-round-border-radius-mini: 14px !default;

 /*input*/
 $vxe-input-background-color: #fff !default;
--- a/types/grid.d.ts
+++ b/types/grid.d.ts
@@ -158,6 +158,7 @@ export namespace VxeGridPropTypes {
    column: VxeTableDefines.ColumnInfo;
    order: string;
    sortBy: string;
+    field: string;
    property: string;
  }

--- a/types/table.d.ts
+++ b/types/table.d.ts
@@ -2094,6 +2094,7 @@ export namespace VxeTableDefines {
    property: string;

    type: VxeColumnPropTypes.Type;
+    field: VxeColumnPropTypes.Type;
    title: VxeColumnPropTypes.Title;
    width: VxeColumnPropTypes.Width;
    minWidth: VxeColumnPropTypes.MinWidth;
@@ -2327,6 +2328,7 @@ export namespace VxeTableDefines {

  export interface SortCheckedParams {
    column: VxeTableDefines.ColumnInfo;
+    field: VxeColumnPropTypes.Field;
    property: VxeColumnPropTypes.Field;
    order: VxeTablePropTypes.SortOrder;
  }
@@ -2337,6 +2339,7 @@ export namespace VxeTableDefines {

  export interface FilterCheckedParams {
    column: VxeTableDefines.ColumnInfo;
+    field: VxeColumnPropTypes.Field;
    property: VxeColumnPropTypes.Field;
    values: any[];
    datas: any[];
@@ -2348,6 +2351,7 @@ export namespace VxeTableDefines {

  export interface FilterVisibleParams {
    column: VxeTableDefines.ColumnInfo;
+    field: VxeColumnPropTypes.Field;
    property: VxeColumnPropTypes.Field;
    filterList: FilterCheckedParams[];
    visible: boolean;