fix: 兼容了tailwindcss的flex定义

docs/.vitepress/vitepress/components/globals/parallax-home.vue

@@ -6,8 +6,8 @@ import { computed, onMounted, reactive, ref } from 'vue'
 import { isDark } from '~/composables/dark'
 import homeLocale from '../../../i18n/pages/home.json'
 import { useLang } from '../../composables/lang'
-import HomeCards from '../home/home-cards.vue'
 import VPLink from '../common/vp-link.vue'
+import HomeCards from '../home/home-cards.vue'
 import HomeSponsors from '../home/home-sponsors.vue'
 
 import HomeFooter from './vp-footer.vue'
@@ -55,7 +55,7 @@ const screenLayer = computed(() => ({
   width: '80%',
   height: '80%',
   transform: `translateX(${parallax.tilt * 10 + 80}px) translateY(${parallax.roll * 10 + 50
-    }px)`
+  }px)`
 }))
 
 const peopleLayer = computed(() => ({
@@ -65,7 +65,7 @@ const peopleLayer = computed(() => ({
   right: 0,
   bottom: 0,
   transform: `translateX(${parallax.tilt * 25 + 25}px) translateY(${parallax.roll * 25
-    }px) scale(1)`
+  }px) scale(1)`
 }))
 
 // center layer
@@ -74,7 +74,7 @@ const leftLayer = computed(() => ({
   width: '20%',
   height: '20%',
   transform: `translateX(${parallax.tilt * 12 + 205}px) translateY(${parallax.roll * 12 + 210
-    }px)`
+  }px)`
 }))
 
 const leftBottomLayer = computed(() => ({
@@ -84,7 +84,7 @@ const leftBottomLayer = computed(() => ({
   left: 0,
   bottom: 0,
   transform: `translateX(${parallax.tilt * 30 - 10}px) translateY(${parallax.roll * 30
-    }px)`
+  }px)`
 }))
 
 const rightLayer = computed(() => ({
@@ -94,7 +94,7 @@ const rightLayer = computed(() => ({
   top: 0,
   right: 0,
   transform: `translateX(${parallax.tilt * 25 + 5}px) translateY(${parallax.roll * 25
-    }px)`
+  }px)`
 }))
 
 const handleScroll = useThrottleFn(() => {

docs/.vitepress/vitepress/components/vp-navbar.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { version as vcVersion } from 'vue-cesium'
 import { inBrowser, useData, withBase } from 'vitepress'
 import { computed } from 'vue'
 import { useLang } from '~/composables/lang'
@@ -48,27 +47,27 @@ const currentLink = computed(() => {
         <div class="badges">
           <h1>
             <a href="https://www.npmjs.com/package/vue-cesium" target="_blank">
-              <img src="https://img.shields.io/npm/v/vue-cesium?style=plastic" />
+              <img src="https://img.shields.io/npm/v/vue-cesium?style=plastic">
             </a>
           </h1>
           <h1>
             <a href="https://npmcharts.com/compare/vue-cesium?minimal=true" target="_blank">
-              <img src="https://img.shields.io/npm/dm/vue-cesium?style=plastic" />
+              <img src="https://img.shields.io/npm/dm/vue-cesium?style=plastic">
             </a>
           </h1>
           <h1>
             <a href="https://github.com/zouyaoji/vue-cesium/stargazers" target="_blank">
-              <img src="https://img.shields.io/github/stars/zouyaoji/vue-cesium?style=plastic" />
+              <img src="https://img.shields.io/github/stars/zouyaoji/vue-cesium?style=plastic">
             </a>
           </h1>
           <h1>
             <a href="https://github.com/zouyaoji/vue-cesium/issues" target="_blank">
-              <img src="https://img.shields.io/github/issues/zouyaoji/vue-cesium?style=plastic" />
+              <img src="https://img.shields.io/github/issues/zouyaoji/vue-cesium?style=plastic">
             </a>
           </h1>
           <h1>
             <a href="https://github.com/zouyaoji/vue-cesium/issues" target="_blank">
-              <img src="https://img.shields.io/github/license/zouyaoji/vue-cesium?style=plastic" />
+              <img src="https://img.shields.io/github/license/zouyaoji/vue-cesium?style=plastic">
             </a>
           </h1>
         </div>
@@ -124,7 +123,7 @@ const currentLink = computed(() => {
     }
   }
 
-  >a {
+  > a {
     // height: 28px;
     width: 128px;
   }

packages/components/ui/btn/index.ts

@@ -317,7 +317,7 @@ export default defineComponent({
         h(
           'span',
           {
-            class: `vc-btn__content text-center col items-center vc-anchor--skip ${innerClasses.value}`
+            class: `vc-btn__content text-center vc-col items-center vc-anchor--skip ${innerClasses.value}`
           },
           inner
         )
@@ -337,7 +337,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/btn/use-btn.ts

@@ -163,7 +163,7 @@ export default function (props) {
   const innerClasses = computed(
     () =>
       alignClass.value
-      + (props.stack === true ? ' column' : ' row')
+      + (props.stack === true ? ' vc-column' : ' vc-row')
       + (props.noWrap === true ? ' no-wrap text-no-wrap' : '')
       + (props.loading === true ? ' vc-btn__content--hidden' : '')
   )

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

@@ -160,7 +160,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
   const classes = computed(
     () =>
       `vc-slider vc-slider${axis.value} vc-slider--${active.value === true ? '' : 'in'}active inline no-wrap ${
-        props.vertical === true ? 'row' : 'column'
+        props.vertical === true ? 'vc-row' : 'vc-column'
       }${props.disable === true ? ' disabled' : ` vc-slider--enabled${editable.value === true ? ' vc-slider--editable' : ''}`
       }${(focus.value as any) === 'both' ? ' vc-slider--focus' : ''
       }${props.label || props.labelAlways === true ? ' vc-slider--label' : ''
@@ -324,7 +324,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
     const filterFn = (entry: any) => entry.value >= props.min && entry.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

@@ -6,6 +6,7 @@
  * @Description:
  * @FilePath: \vue-cesium@next\packages\theme-default\gulpfile.ts
  */
+import type { TaskFunction } from 'gulp'
 import path from 'node:path'
 import { Transform } from 'node:stream'
 import { vcOutput } from '@vue-cesium/build/utils/paths'
@@ -103,6 +104,6 @@ export function copyThemeChalkSource() {
   return src(path.resolve(__dirname, 'src/**')).pipe(dest(path.resolve(distBundle, 'src')))
 }
 
-export const build = parallel(copyThemeChalkSource, series(buildThemeChalk, copyThemeChalkBundle))
+export const build: TaskFunction = parallel(copyThemeChalkSource, series(buildThemeChalk, copyThemeChalkBundle))
 
 export default build

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

@@ -2,24 +2,26 @@
 
 @import '../helpers/string.scss';
 
+$flex-prefix: 'vc' !default;
+
 @mixin fg($name, $size) {
   $noProcNotZero: $size > 0;
 
   @media (min-width: $size) {
-    #{str-fe(".col<name>", $name, $noProcNotZero)} {
+    #{str-fe(".#{$flex-prefix}-col<name>", $name, $noProcNotZero)} {
       &,
       &-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%;
@@ -46,12 +48,12 @@
     @for $i from 0 through $flex-cols {
       $ic: quote('' + $i);
 
-      #{str-fe(".col<name>-<i>", $name, $noProcNotZero, $ic)} {
-        @extend .col#{$name}-auto;
+      #{str-fe(".#{$flex-prefix}-col<name>-<i>", $name, $noProcNotZero, $ic)} {
+        @extend .#{$flex-prefix}-col#{$name}-auto;
       }
 
-      .row {
-        #{str-fe("> .col<name>-<i>", $name, $noProcNotZero, $ic)} {
+      .#{$flex-prefix}-row {
+        #{str-fe("> .#{$flex-prefix}-col<name>-<i>", $name, $noProcNotZero, $ic)} {
           height: auto;
           width: toFixed(percentage(math.div($i, $flex-cols)), 10000);
         }
@@ -63,15 +65,15 @@
         }
       }
 
-      .column {
-        #{str-fe("> .col<name>-<i>", $name, $noProcNotZero, $ic)} {
+      .#{$flex-prefix}-column {
+        #{str-fe("> .#{$flex-prefix}-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;