@varlet/cli 1.22.0-alpha.3 → 1.22.0-alpha.64

package/site/useProgress.ts

@@ -1,12 +1,16 @@
+import Progress from './components/progress'
 import { reactive } from 'vue'
-import { Progress } from '@varlet/ui'
 // @ts-ignore
 import config from '@config'
 // @ts-ignore
-import { mountInstance } from '@varlet/ui/es/utils/components'
-import { get } from 'lodash'
+import { mountInstance } from './utils'
+import { get } from 'lodash-es'
 
 export function useProgress() {
+  let timer: number
+  const trackColor = get(config, 'themes.color-progress-track')
+  const color = get(config, 'themes.color-progress')
+
   const props = reactive({
     style: {
       position: 'fixed',
@@ -15,14 +19,12 @@ export function useProgress() {
       top: 0,
       zIndex: 10086,
     },
-    trackColor: '#fff',
-    color: get(config, 'themes.color-progress'),
+    trackColor,
+    color,
     lineWidth: 3,
     value: 0,
   })
 
-  let timer: number
-
   const changeValue = () => {
     timer = window.setTimeout(() => {
       if (props.value >= 95) return
@@ -37,13 +39,13 @@ export function useProgress() {
 
   const start = () => {
     props.value = 0
-    setTimeout(() => (props.color = '#3594d9'), 200)
+    setTimeout(() => (props.color = color), 200)
     changeValue()
   }
 
   const end = () => {
     props.value = 100
-    setTimeout(() => (props.color = '#fff'), 300)
+    setTimeout(() => (props.color = trackColor), 300)
     window.clearTimeout(timer)
   }
 

package/site/utils.ts

@@ -1,6 +1,17 @@
 import { onMounted, onUnmounted } from 'vue'
-import { get } from 'lodash'
-import { StyleProvider } from '@varlet/ui'
+import { get } from 'lodash-es'
+import { formatStyleVars } from './components/utils/elements'
+
+export * from './components/utils/components'
+export * from './components/utils/elements'
+export * from './components/utils/shared'
+
+export type StyleVars = Record<string, string>
+
+function StyleProvider(styleVars: StyleVars = {}) {
+  const styles: StyleVars = formatStyleVars(styleVars)
+  Object.entries(styles).forEach(([key, value]) => document.documentElement.style.setProperty(key, value))
+}
 
 export function camelize(str: string): string {
   return str.replace(/-(\w)/g, (_: any, p: string) => p.toUpperCase())
@@ -94,7 +105,7 @@ export function setThemes(config: Record<string, any>) {
   Object.keys(themes).forEach((key) => {
     const theme = themes[key]
     StyleProvider({
-      [`--site-${key}`]: theme
+      [`--site-config-${key}`]: theme
     })
   })
 }

package/varlet.default.config.js

@@ -49,13 +49,14 @@ module.exports = {
     'color-link': '#00c48f',
     'color-type': '#00c48f',
     'color-progress': '#1d92e9',
-    'color-pc-language-active': '#3a7afe',
-    'color-pc-language-active-background': '#edf5ff',
+    'color-progress-track': '#fff',
     'color-side-bar': '#3a7afe',
     'color-side-bar-active-background': '#3a7afe1a',
     'color-app-bar': '#3a7afe',
     'color-mobile-cell-hover': '#3a7afe',
     'color-mobile-cell-hover-background': '#3a7afe1a',
+    'color-pc-language-active': '#3a7afe',
+    'color-pc-language-active-background': '#edf5ff',
     'color-mobile-language-active': '#3a7afe',
     'color-mobile-language-active-background': '#edf5ff',
   },