releases 4.7.96

examples/style/index.scss

@@ -1,4 +1,4 @@
-@import './variable.scss';
+@use './variable.scss';
 
 body {
   padding: 0;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.7.95",
+  "version": "4.7.96",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -28,7 +28,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "vxe-pc-ui": "^4.2.31"
+    "vxe-pc-ui": "^4.2.32"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",
@@ -61,7 +61,7 @@
     "gulp-typescript": "^5.0.1",
     "gulp-uglify": "^3.0.2",
     "postcss": "^8.4.38",
-    "sass": "^1.79.3",
+    "sass": "^1.80.4",
     "sass-loader": "^14.2.0",
     "typescript": "~4.5.5",
     "vue": "3.5.5",

styles/all.scss

@@ -1,7 +1,7 @@
-@import './base.scss';
+@use './base.scss';
 
-@import './components/column.scss';
-@import './components/colgroup.scss';
-@import './components/table.scss';
-@import './components/grid.scss';
-@import './components/toolbar.scss';
+@use './components/column.scss';
+@use './components/colgroup.scss';
+@use './components/table.scss';
+@use './components/grid.scss';
+@use './components/toolbar.scss';

styles/base.scss

@@ -1,5 +1,5 @@
-@import './theme/light.scss';
-@import './theme/dark.scss';
+@use './theme/light.scss';
+@use './theme/dark.scss';
 
 %boxSizing {
   box-sizing: border-box;

styles/components/icon.scss

@@ -1,4 +1,6 @@
-@import './old-icon.scss';
+@use "sass:map";
+@use "sass:list";
+@use './old-icon.scss';
 
 @font-face {
   font-family: "vxetableiconfont";
@@ -69,10 +71,10 @@ $btnThemeList: (
   &.roll {
     animation: rollCircle 1s infinite linear;
   }
-  @for $index from 0 to length($btnThemeList) {
-    $item: nth($btnThemeList, $index + 1);
-    &.theme--#{map-get($item, name)} {
-      color: map-get($item, textColor);
+  @for $index from 0 to list.length($btnThemeList) {
+    $item: list.nth($btnThemeList, $index + 1);
+    &.theme--#{map.get($item, name)} {
+      color: map.get($item, textColor);
     }
   }
 }

styles/components/old-icon.scss

@@ -1,5 +1,3 @@
-@import '../helpers/mixin.scss';
-
 [class*="vxe-icon--"] {
   display: inline-block;
   vertical-align: middle;

styles/components/table-module/all.scss

@@ -1,7 +1,7 @@
-@import './custom.scss';
-@import './edit.scss';
-@import './export.scss';
-@import './filter.scss';
-@import './keyboard.scss';
-@import './menu.scss';
-@import './validator.scss';
+@use './custom.scss';
+@use './edit.scss';
+@use './export.scss';
+@use './filter.scss';
+@use './keyboard.scss';
+@use './menu.scss';
+@use './validator.scss';

styles/components/table-module/custom.scss

@@ -1,4 +1,4 @@
-@import '../../helpers/mixin.scss';
+@use '../../helpers/baseMixin.scss';
 
 .vxe-table-custom--option {
   position: relative;
@@ -148,7 +148,7 @@
 }
 
 .vxe-table-custom--checkbox-option {
-  @include createCheckboxIcon();
+  @include baseMixin.createCheckboxIcon();
 }
 .vxe-table-custom--checkbox-option,
 .vxe-table-custom--sort-option {

styles/components/table-module/export.scss

@@ -1,4 +1,4 @@
-@import '../../helpers/mixin.scss';
+@use '../../helpers/baseMixin.scss';
 
 .vxe-export--panel-column > ul {
   list-style-type: none;
@@ -123,5 +123,5 @@
 }
 
 .vxe-export--panel-column-option {
-  @include createCheckboxIcon();
+  @include baseMixin.createCheckboxIcon();
 }

styles/components/table-module/filter.scss

@@ -1,4 +1,4 @@
-@import '../../helpers/mixin.scss';
+@use '../../helpers/baseMixin.scss';
 
 .vxe-cell--filter {
   padding: 0 0.1em 0 0.2em;
@@ -108,5 +108,5 @@
 }
 
 .vxe-table--filter-option {
-  @include createCheckboxIcon();
+  @include baseMixin.createCheckboxIcon();
 }

styles/components/table.scss

@@ -1,6 +1,6 @@
-@import '../helpers/mixin.scss';
-@import './icon.scss';
-@import './table-module/all.scss';
+@use '../helpers/baseMixin.scss';
+@use './icon.scss';
+@use './table-module/all.scss';
 
 %DefaultColumnHeight {
   height: var(--vxe-ui-table-row-height-default);
@@ -427,7 +427,7 @@
 .vxe-filter--btn {
   &:before,
   &:after {
-    @include createAnimationTransition(border);
+    @include baseMixin.createAnimationTransition(border);
   }
 }
 
@@ -953,10 +953,10 @@
 
   // 单选框和复选框
   .vxe-cell--radio {
-    @include createRadioIcon();
+    @include baseMixin.createRadioIcon();
   }
   .vxe-cell--checkbox {
-    @include createCheckboxIcon();
+    @include baseMixin.createCheckboxIcon();
   }
 
   .fixed--hidden {
@@ -1111,7 +1111,7 @@
   .vxe-tree--node-btn {
     display: block;
     color: var(--vxe-ui-font-lighten-color);
-    @include createAnimationTransition(transform);
+    @include baseMixin.createAnimationTransition(transform);
     &:hover {
       color: var(--vxe-ui-font-color);
     }
@@ -1142,7 +1142,7 @@
       text-align: center;
       user-select: none;
       color: var(--vxe-ui-font-lighten-color);
-      @include createAnimationTransition(transform);
+      @include baseMixin.createAnimationTransition(transform);
       &:hover {
         color: var(--vxe-ui-font-color);
       }

styles/components/toolbar.scss

@@ -1,5 +1,3 @@
-@import '../helpers/mixin.scss';
-
 /*toolbar*/
 .vxe-toolbar {
   position: relative;

styles/cssvar.scss

@@ -1,3 +1,3 @@
 /*已废弃*/
 
-@import './base.scss';
+@use './base.scss';

styles/default.scss

@@ -1,3 +1,3 @@
 // 该文件已废弃，请使用 vxe-table/styles/all.scss
 
-@import './modules.scss';
+@use './modules.scss';

styles/index.scss

@@ -1,4 +1,4 @@
 // 该文件已废弃，请使用 vxe-table/style/all.scss
 
-@import './variable.scss';
-@import './default.scss';
+@use './variable.scss';
+@use './default.scss';

styles/modules.scss

@@ -1,7 +1,7 @@
 /*已废弃*/
 
-@import './components/column.scss';
-@import './components/colgroup.scss';
-@import './components/table.scss';
-@import './components/grid.scss';
-@import './components/toolbar.scss';
+@use './components/column.scss';
+@use './components/colgroup.scss';
+@use './components/table.scss';
+@use './components/grid.scss';
+@use './components/toolbar.scss';

styles/theme/dark.scss

@@ -1,4 +1,4 @@
-@import './base.scss';
+@use './base.scss';
 
 [data-vxe-ui-theme="dark"] {
   color-scheme: dark;

styles/theme/light.scss

@@ -1,4 +1,4 @@
-@import './base.scss';
+@use './base.scss';
 
 [data-vxe-ui-theme="light"] {
   /*font color*/

styles/variable.scss

@@ -1,3 +1,3 @@
 /*已废弃*/
 
-@import './base.scss';
+@use './base.scss';