@varlet/cli 1.20.0 → 1.21.1-alpha.64

package/site/pc/components/AppSidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="varlet-site-sidebar var-elevation--3">
-    <var-cell
+    <var-site-cell
       class="varlet-site-sidebar__item"
       :class="{
         'varlet-site-sidebar__item--active': item.doc === menuName,
@@ -17,20 +17,19 @@
       @click="changeRoute(item)"
     >
       <span class="varlet-site-sidebar__item--title" v-if="item.type === menuTypes.TITLE">{{ item.text[language] }}</span>
-      <span class="varlet-site-sidebar__item--link" v-else>{{ item.text[language] }}</span>
-    </var-cell>
+      <span v-else>{{ item.text[language] }}</span>
+    </var-site-cell>
   </div>
 </template>
 
 <script lang="ts">
 // @ts-ignore
 import config from '@config'
-import '@varlet/ui/es/styles/elevation.less'
 import { MenuTypes } from '../../utils'
 import { reactive, ref } from 'vue'
 import type { PropType } from 'vue'
 import type { Menu } from '../App'
-import { get } from 'lodash'
+import { get } from 'lodash-es'
 
 export default {
   name: 'AppSidebar',
@@ -68,13 +67,11 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import '~@varlet/ui/es/styles/var';
-
 .varlet-site-sidebar {
   padding: 0 0 15px;
-  position: sticky;
-  flex: 0 0 220px;
-  top: 0;
+  position: fixed;
+  width: 220px;
+  top: 60px;
   bottom: 0;
   left: 0;
   z-index: 1;
@@ -99,28 +96,18 @@ export default {
       padding: 8px 0 8px;
     }
 
-    &--link {
-      font-size: 14px;
-      color: #455a64;
-      transition: color 0.2s;
-
-      &:hover {
-        color: var(--site-color-side-bar);
-      }
-    }
-
     &--active {
       position: relative;
-      background: var(--site-color-side-bar-active-background);
+      background: var(--site-config-color-side-bar-active-background);
 
       span {
-        color: var(--site-color-side-bar);
+        color: var(--site-config-color-side-bar);
       }
 
       &::before {
         display: block;
         content: '';
-        background: var(--site-color-side-bar);
+        background: var(--site-config-color-side-bar);
         width: 4px;
         height: 40px;
         position: absolute;
@@ -131,6 +118,13 @@ export default {
 
   &__link {
     cursor: pointer;
+    font-size: 14px;
+    color: #455a64;
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--site-config-color-side-bar);
+    }
   }
 
   &__title {

package/site/pc/main.ts

@@ -4,10 +4,16 @@ import '@varlet/touch-emulator'
 import routes from '@pc-routes'
 // @ts-ignore
 import config from '@config'
-import { Cell, Ripple, Icon } from '@varlet/ui'
+
+import Icon from '../components/icon'
+import Cell from '../components/cell'
+import Ripple from '../components/ripple'
+import '../components/styles/common.less'
+import '../components/styles/elevation.less'
+
 import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
-import { get } from 'lodash'
+import { get } from 'lodash-es'
 import { useProgress } from '../useProgress'
 
 const defaultLanguage = get(config, 'defaultLanguage')
@@ -63,7 +69,9 @@ Object.defineProperty(window, 'onMobileRouteChange', {
 
 createApp(App)
   .use(router)
+  // @ts-ignore
   .use(Cell)
   .use(Ripple)
+  // @ts-ignore
   .use(Icon)
   .mount('#app')

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',
   },