@varlet/cli 2.13.2 → 2.13.3

package/lib/client/index.d.ts

@@ -14,5 +14,6 @@ export declare function withSiteConfigNamespace(styleVars: Record<string, any>):
 export declare function watchPlatform(cb: (platform: string) => void): void;
 export declare function useRouteListener(cb: () => void): void;
 export declare function watchDarkMode(dark: StyleVars, cb?: (theme: Theme) => void): void;
+export declare function setColorScheme(theme: Theme): void;
 export declare function watchTheme(cb: (theme: Theme, from: 'pc' | 'mobile' | 'default' | 'playground') => void, shouldUnmount?: boolean): void;
 export { AppType };

package/lib/client/index.js

@@ -87,10 +87,15 @@ export function useRouteListener(cb) {
 export function watchDarkMode(dark, cb) {
     watchTheme((theme) => {
         const siteStyleVars = withSiteConfigNamespace(get(config, theme, {}));
-        StyleProvider(theme === 'darkTheme' ? Object.assign(Object.assign({}, siteStyleVars), dark) : siteStyleVars);
+        const darkStyleVars = Object.assign(Object.assign({}, siteStyleVars), dark);
+        StyleProvider(theme === 'darkTheme' ? darkStyleVars : siteStyleVars);
+        setColorScheme(theme);
         cb === null || cb === void 0 ? void 0 : cb(theme);
     });
 }
+export function setColorScheme(theme) {
+    document.documentElement.style.setProperty('color-scheme', theme === 'darkTheme' ? 'dark' : 'light');
+}
 export function watchTheme(cb, shouldUnmount = true) {
     const handleThemeChange = (event) => {
         const { data } = event;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "2.13.2",
+  "version": "2.13.3",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -70,8 +70,8 @@
     "vite": "4.3.5",
     "vue": "3.3.4",
     "webfont": "^9.0.0",
-    "@varlet/shared": "2.13.2",
-    "@varlet/vite-plugins": "2.13.2"
+    "@varlet/shared": "2.13.3",
+    "@varlet/vite-plugins": "2.13.3"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.1",
@@ -86,8 +86,8 @@
     "@types/semver": "^7.3.9",
     "@types/sharp": "0.31.1",
     "rimraf": "^5.0.1",
-    "@varlet/icons": "2.13.2",
-    "@varlet/touch-emulator": "2.13.2"
+    "@varlet/touch-emulator": "2.13.3",
+    "@varlet/icons": "2.13.3"
   },
   "peerDependencies": {
     "@vue/runtime-core": "3.3.4",
@@ -97,8 +97,8 @@
     "lodash-es": "^4.17.21",
     "vue": "3.3.4",
     "vue-router": "4.2.0",
-    "@varlet/icons": "2.13.2",
-    "@varlet/touch-emulator": "2.13.2"
+    "@varlet/touch-emulator": "2.13.3",
+    "@varlet/icons": "2.13.3"
   },
   "scripts": {
     "dev": "tsc --watch",

package/site/pc/main.ts

@@ -10,13 +10,11 @@ import Button from '../components/button'
 import Popup from '../components/popup'
 import CodeExample from '../components/code-example'
 import Snackbar from '../components/snackbar'
-import LoadingBar from '../components/loading-bar'
 
 import '../components/styles/common.less'
 import '../components/styles/elevation.less'
 
 import { createApp } from 'vue'
-import { getBrowserTheme, Theme, watchTheme } from '@varlet/cli/client'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { get } from 'lodash-es'
 
@@ -26,8 +24,6 @@ const mobileRedirect = get(config, 'mobile.redirect')
 
 Snackbar.allowMultiple(true)
 
-setLoadingBar()
-
 redirect &&
   routes.push({
     path: '/:pathMatch(.*)*',
@@ -50,16 +46,11 @@ const router = createRouter({
   },
 })
 
-let isEnd = true
-
 router.beforeEach((to: any, from: any) => {
   if (to.fullPath === from.fullPath) {
     return false
   }
 
-  isEnd = false
-  setTimeout(() => !isEnd && LoadingBar.start(), 200)
-
   // @ts-ignore
   if (window._hmt) {
     if (to.path) {
@@ -69,10 +60,6 @@ router.beforeEach((to: any, from: any) => {
   }
 })
 
-router.afterEach(() => {
-  isEnd = true
-  LoadingBar.finish()
-})
 
 Object.defineProperty(window, 'onMobileRouteChange', {
   value: (path: string, language: string, replace: string, hash: string) => {
@@ -95,14 +82,6 @@ Object.defineProperty(window, 'scrollToMenu', {
   }
 })
 
-function setLoadingBar() {
-  const getColor = (theme?: Theme) =>  get(config, `${theme ?? getBrowserTheme()}.color-loading-bar`)
-
-  watchTheme((theme) => {
-    LoadingBar({ color: getColor(theme) })
-  }, false)
-}
-
 createApp(App)
   .use(router)
   // @ts-ignore

package/site/pc/pages/index/index.less

@@ -158,6 +158,34 @@
     width: 100%;
   }
 
+  &__sponsors {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 80px;
+  }
+
+  &__sponsors-title {
+    padding-top: 30px;
+    line-height: 32px;
+    font-size: 22px;
+    border-top: thin solid var(--site-config-color-index-page-divider-color);
+    color: var(--site-config-color-index-page-second-text-color);
+    letter-spacing: 1px;
+    transition: all .2s;
+  }
+
+  &__sponsors-link {
+    display: block;
+    margin-top: 50px;
+    width: 1100px;
+  }
+
+  &__sponsors-image {
+    display: block;
+    width: 100%;
+  }
+
   &__footer {
     position: absolute;
     bottom: 0;

package/site/pc/pages/index/index.vue

@@ -115,11 +115,11 @@ watch(() => route.path, setLocale, { immediate: true })
         </a>
       </div>
 
-      <div class="varlet-doc-index__contributors" v-if="indexPage.sponsors">
-        <div class="varlet-doc-index__contributors-title">{{ indexPage.sponsors.label[language] }}</div>
+      <div class="varlet-doc-index__sponsors" v-if="indexPage.sponsors">
+        <div class="varlet-doc-index__sponsors-title">{{ indexPage.sponsors.label[language] }}</div>
 
-        <a class="varlet-doc-index__contributors-link" :href="indexPage.sponsors.link">
-          <img class="varlet-doc-index__contributors-image" :src="indexPage.sponsors.image">
+        <a class="varlet-doc-index__sponsors-link" :href="indexPage.sponsors.link">
+          <img class="varlet-doc-index__sponsors-image" :src="indexPage.sponsors.image">
         </a>
       </div>
 

package/site/utils.ts

@@ -1,5 +1,5 @@
 import { get } from 'lodash-es'
-import { StyleProvider, type Theme, withSiteConfigNamespace } from '@varlet/cli/client'
+import { StyleProvider, type Theme, withSiteConfigNamespace, setColorScheme } from '@varlet/cli/client'
 
 export interface Menu {
   doc: string
@@ -30,10 +30,11 @@ export function inIframe() {
   return window.self !== window.top
 }
 
-export function setTheme(config: Record<string, any>, name: Theme) {
-  const styleVars = withSiteConfigNamespace(get(config, name, {}))
+export function setTheme(config: Record<string, any>, theme: Theme) {
+  const styleVars = withSiteConfigNamespace(get(config, theme, {}))
 
   StyleProvider(styleVars)
+  setColorScheme(theme)
 }
 
 export function utoa(data: string): string {

package/site/components/loading-bar/LoadingBar.tsx

@@ -1,30 +0,0 @@
-import { defineComponent } from 'vue'
-import context from '../context'
-import { createNamespace } from '../utils/components'
-import { toSizeUnit } from '../utils/elements'
-import { props } from './props'
-import '../styles/common.less'
-import './loadingBar.less'
-
-const { classes, n } = createNamespace('loading-bar')
-
-export default defineComponent({
-  name: 'VarLoadingBar',
-  props,
-  setup(props) {
-    return () => {
-      return (
-        <div
-          class={classes(n(), [props.error, n('--error')])}
-          style={{
-            zIndex: context.zIndex + 10,
-            width: `${props.value}%`,
-            opacity: props.opacity,
-            height: toSizeUnit(props.height),
-            backgroundColor: props.error ? props.errorColor : props.color,
-          }}
-        ></div>
-      )
-    }
-  },
-})

package/site/components/loading-bar/index.ts

@@ -1,91 +0,0 @@
-import LoadingBarComponent from './LoadingBar'
-import { reactive } from 'vue'
-import { mountInstance } from '../utils/components'
-
-interface LoadingBarOptions {
-  color?: string
-  errorColor?: string
-  height?: string | number
-}
-
-interface InternalProps {
-  value: number
-  opacity: number
-  error: boolean
-}
-
-interface LoadingBar {
-  (options: LoadingBarOptions): void
-
-  start(): void
-
-  finish(): void
-
-  error(): void
-}
-
-let timer: number
-let isMount: boolean
-const props: LoadingBarOptions & InternalProps = reactive({
-  value: 0,
-  opacity: 0,
-  error: false,
-})
-
-const LoadingBar: LoadingBar = (options: LoadingBarOptions) => {
-  Object.assign(props, options)
-}
-
-const changeValue = () => {
-  timer = window.setTimeout(() => {
-    if (props.value >= 95) return
-    let num = Math.random()
-
-    if (props.value < 70) num = Math.round(5 * Math.random())
-
-    props.value += num
-    changeValue()
-  }, 200)
-}
-
-LoadingBar.start = () => {
-  if (!isMount) {
-    isMount = true
-    mountInstance(LoadingBarComponent, props)
-  }
-
-  if (!props.error || props.value === 100) {
-    props.value = 0
-  }
-
-  setTimeout(() => {
-    props.opacity = 1
-  }, 200)
-  changeValue()
-}
-
-LoadingBar.finish = () => {
-  props.value = 100
-
-  setTimeout(() => {
-    props.opacity = 0
-
-    setTimeout(() => {
-      props.error = false
-    }, 250)
-  }, 300)
-
-  window.clearTimeout(timer)
-}
-
-LoadingBar.error = () => {
-  props.error = true
-
-  LoadingBar.start()
-
-  setTimeout(LoadingBar.finish, 300)
-}
-
-export const _LoadingBarComponent = LoadingBarComponent
-
-export default LoadingBar

package/site/components/loading-bar/loadingBar.less

@@ -1,18 +0,0 @@
-:root {
-  --loading-bar-color: var(--color-primary);
-  --loading-bar-error-color: var(--color-danger);
-  --loading-bar-height: 3px;
-}
-
-.var-site-loading-bar {
-  position: fixed;
-  left: 0;
-  top: 0;
-  transition: all 0.25s;
-  height: var(--loading-bar-height);
-  background-color: var(--loading-bar-color);
-
-  &--error {
-    background-color: var(--loading-bar-error-color);
-  }
-}

package/site/components/loading-bar/props.ts

@@ -1,23 +0,0 @@
-export const props = {
-  value: {
-    type: Number,
-    default: 0,
-  },
-  opacity: {
-    type: Number,
-    default: 0,
-  },
-  error: {
-    type: Boolean,
-    default: false,
-  },
-  color: {
-    type: String,
-  },
-  errorColor: {
-    type: String,
-  },
-  height: {
-    type: [Number, String],
-  },
-}