fix: 兼容了tailwindcss的flex定义，给flex、row、column类加上vc-前缀，避免全局引入的时候影响到其他地方flex、row、column类的定义

Author: WHULS

packages/components/ui/btn/index.ts

@@ -336,7 +336,7 @@ export default defineComponent({
                       'span',
                       {
                         key: 'loading',
-                        class: 'absolute-full flex flex-center'
+                        class: 'absolute-full vc-flex vc-flex-center'
                       },
                       slots.loading !== void 0 ? slots.loading() : [h(VcSpinner)]
                     )

packages/components/ui/fab/fab.ts

@@ -34,14 +34,14 @@ export default defineComponent({
 
     const classes = computed(
       () =>
-        'vc-fab z-fab row inline justify-center' +
+        'vc-fab z-fab vc-row inline justify-center' +
         ` vc-fab--align-${props.verticalActionsAlign} ${formClass.value}` +
         (showing.value === true ? ' vc-fab--opened' : ' vc-fab--closed')
     )
 
     const actionClass = computed(
       () =>
-        'vc-fab__actions flex no-wrap inline' +
+        'vc-fab__actions vc-flex no-wrap inline' +
         ` vc-fab__actions--${props.direction}` +
         ` vc-fab__actions--${showing.value === true ? 'opened' : 'closed'}`
     )

packages/components/ui/slider/use-slider.ts

@@ -322,7 +322,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
     const filterFn = ({ value }) => value >= props.min && value <= props.max
 
     if (Array.isArray(def) === true) {
-      return def.map(item => (isObject(item) === true ? item : { value: item })).filter(filterFn)
+      return def.map(item => (isObject(item) === true ? item : { value: item })).filter((item: any) => filterFn(item))
     }
 
     return Object.keys(def)

packages/theme-default/gulpfile.ts

@@ -11,6 +11,7 @@
 import path from 'path'
 import chalk from 'chalk'
 import { src, dest, series, parallel } from 'gulp'
+import type { TaskFunction } from 'gulp'
 import gulpSass from 'gulp-sass'
 import dartSass from 'sass'
 import autoprefixer from 'gulp-autoprefixer'
@@ -70,7 +71,7 @@ export function copyThemeChalkSource() {
   )
 }
 
-export const build = parallel(
+export const build: TaskFunction = parallel(
   copyThemeChalkSource,
   series(buildThemeChalk, copyThemeChalkBundle)
 )

packages/theme-default/src/core/flex.scss

@@ -2,6 +2,8 @@
 
 @import '../helpers/string.scss';
 
+$flex-prefix: 'vc' !default;
+
 @mixin fg($name, $size) {
   $noProcNotZero: $size > 0;
 
@@ -11,15 +13,15 @@
       &-auto,
       &-grow,
       &-shrink {
-        .row > &,
-        .flex > & {
+        .#{$flex-prefix}-row > &,
+        .#{$flex-prefix}-flex > & {
           width: auto;
           min-width: 0;
           max-width: 100%;
         }
 
-        .column > &,
-        .flex > & {
+        .#{$flex-prefix}-column > &,
+        .#{$flex-prefix}-flex > & {
           height: auto;
           min-height: 0;
           max-height: 100%;
@@ -50,7 +52,7 @@
         @extend .col#{$name}-auto;
       }
 
-      .row {
+      .#{$flex-prefix}-row {
         #{str-fe("> .col<name>-<i>", $name, $noProcNotZero, $ic)} {
           height: auto;
           width: toFixed(percentage(math.div($i, $flex-cols)), 10000);
@@ -63,15 +65,15 @@
         }
       }
 
-      .column {
+      .#{$flex-prefix}-column {
         #{str-fe("> .col<name>-<i>", $name, $noProcNotZero, $ic)} {
           height: toFixed(percentage(math.div($i, $flex-cols)), 10000);
           width: auto;
         }
       }
 
       @if $size == 0 and $i == $flex-cols {
-        .row > .col-all {
+        .#{$flex-prefix}-row > .col-all {
           height: auto;
           flex: 0 0 100%;
         }
@@ -80,9 +82,9 @@
   }
 }
 
-.row,
-.column,
-.flex {
+.#{$flex-prefix}-row,
+.#{$flex-prefix}-column,
+.#{$flex-prefix}-flex {
   display: flex;
   flex-wrap: wrap;
 
@@ -91,11 +93,11 @@
   }
 }
 
-.row.reverse {
+.#{$flex-prefix}-row.reverse {
   flex-direction: row-reverse;
 }
 
-.column {
+.#{$flex-prefix}-column {
   flex-direction: column;
 
   &.reverse {
@@ -225,7 +227,7 @@
   }
 }
 
-.flex-center {
+.#{$flex-prefix}-flex-center {
   @extend .items-center;
 
   @extend .justify-center;