@varlet/cli 2.4.0-alpha.1670569085974 → 2.4.0-alpha.1670766368590

package/lib/node/config/varlet.default.config.js

@@ -194,8 +194,7 @@ export default defineConfig({
         'color-primary': '#2196f3',
         'color-link': '#00c48f',
         'color-type': '#00c48f',
-        'color-progress': '#1d92e9',
-        'color-progress-track': 'transparent',
+        'color-loading-bar': '#1d92e9',
         'color-side-bar': '#3a7afe',
         'color-side-bar-active-background': '#3a7afe1a',
         'color-app-bar': '#3a7afe',
@@ -236,8 +235,7 @@ export default defineConfig({
         'color-primary': '#96cbfe',
         'color-link': '#A8FFC4',
         'color-type': '#A8FFC4',
-        'color-progress': '#5580f8',
-        'color-progress-track': 'transparent',
+        'color-loading-bar': '#5580f8',
         'color-side-bar': '#4a7afe',
         'color-side-bar-active-background': '#4a7afe1a',
         'color-app-bar': '#272727',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "2.4.0-alpha.1670569085974",
+  "version": "2.4.0-alpha.1670766368590",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -40,8 +40,6 @@
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-typescript": "^7.14.5",
     "@types/inquirer": "^9.0.2",
-    "@varlet/markdown-vite-plugin": "2.4.0-alpha.1670569085974",
-    "@varlet/shared": "2.4.0-alpha.1670569085974",
     "@vitejs/plugin-vue": "3.0.1",
     "@vitejs/plugin-vue-jsx": "2.0.0",
     "@vue/babel-plugin-jsx": "1.1.1",
@@ -69,7 +67,9 @@
     "vite": "3.0.4",
     "vite-plugin-html": "^2.1.0",
     "vue": "3.2.25",
-    "vue-jest": "^5.0.0-alpha.8"
+    "vue-jest": "^5.0.0-alpha.8",
+    "@varlet/markdown-vite-plugin": "2.4.0-alpha.1670766368590",
+    "@varlet/shared": "2.4.0-alpha.1670766368590"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.12",
@@ -80,19 +80,19 @@
     "@types/lodash-es": "^4.17.5",
     "@types/node": "^18.7.20",
     "@types/semver": "^7.3.9",
-    "@varlet/icons": "2.4.0-alpha.1670569085974",
-    "@varlet/touch-emulator": "2.4.0-alpha.1670569085974"
+    "@varlet/icons": "2.4.0-alpha.1670766368590",
+    "@varlet/touch-emulator": "2.4.0-alpha.1670766368590"
   },
   "peerDependencies": {
-    "@varlet/icons": "2.4.0-alpha.1670569085974",
-    "@varlet/touch-emulator": "2.4.0-alpha.1670569085974",
     "@vue/runtime-core": "3.2.16",
     "@vue/test-utils": "^2.0.2",
     "clipboard": "^2.0.6",
     "live-server": "^1.2.1",
     "lodash-es": "^4.17.21",
     "vue": "3.2.25",
-    "vue-router": "4.0.12"
+    "vue-router": "4.0.12",
+    "@varlet/icons": "2.4.0-alpha.1670766368590",
+    "@varlet/touch-emulator": "2.4.0-alpha.1670766368590"
   },
   "scripts": {
     "dev": "tsc --watch",

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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,92 @@
+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 = () => {
+  console.log(isMount)
+  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

@@ -0,0 +1,18 @@
+: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

@@ -0,0 +1,23 @@
+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],
+  },
+}

package/site/components/utils/elements.ts

@@ -7,19 +7,21 @@ export function getLeft(element: HTMLElement): number {
   return left + (document.body.scrollLeft || document.documentElement.scrollLeft)
 }
 
-export const isRem = (value: unknown) => isString(value) && value.endsWith('rem')
+// example 1rem
+export const isRem = (value: unknown): value is string => isString(value) && value.endsWith('rem')
 
 // example 1 || 1px
-export const isPx = (value: unknown) => (isString(value) && value.endsWith('px')) || isNumber(value)
+export const isPx = (value: unknown): value is string | number =>
+  (isString(value) && value.endsWith('px')) || isNumber(value)
 
 // example 1%
-export const isPercent = (value: unknown) => isString(value) && value.endsWith('%')
+export const isPercent = (value: unknown): value is string => isString(value) && value.endsWith('%')
 
 // example 1vw
-export const isVw = (value: unknown) => isString(value) && value.endsWith('vw')
+export const isVw = (value: unknown): value is string => isString(value) && value.endsWith('vw')
 
 // example 1vh
-export const isVh = (value: unknown) => isString(value) && value.endsWith('vh')
+export const isVh = (value: unknown): value is string => isString(value) && value.endsWith('vh')
 
 // example return 1
 export const toPxNum = (value: unknown): number => {
@@ -57,7 +59,7 @@ export const toPxNum = (value: unknown): number => {
 // example return 1px 1% 1vw 1vh 1rem null
 export const toSizeUnit = (value: unknown) => {
   if (value == null) {
-    return null
+    return undefined
   }
 
   if (isPercent(value) || isVw(value) || isVh(value) || isRem(value)) {

package/site/pc/main.ts

@@ -10,14 +10,15 @@ 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'
-import { useProgress } from '../useProgress'
 
 const defaultLanguage = get(config, 'defaultLanguage')
 const redirect = get(config, 'pc.redirect')
@@ -25,6 +26,8 @@ const mobileRedirect = get(config, 'mobile.redirect')
 
 Snackbar.allowMultiple(true)
 
+setLoadingBar()
+
 redirect &&
   routes.push({
     path: '/:pathMatch(.*)*',
@@ -38,7 +41,6 @@ const router = createRouter({
 })
 
 let isEnd = true
-const { start, end } = useProgress()
 
 router.beforeEach((to: any, from: any) => {
   if (to.path === from.path) {
@@ -46,7 +48,7 @@ router.beforeEach((to: any, from: any) => {
   }
 
   isEnd = false
-  setTimeout(() => !isEnd && start(), 200)
+  setTimeout(() => !isEnd && LoadingBar.start(), 200)
 
   // @ts-ignore
   if (window._hmt) {
@@ -59,7 +61,7 @@ router.beforeEach((to: any, from: any) => {
 
 router.afterEach(() => {
   isEnd = true
-  end()
+  LoadingBar.finish()
 })
 
 Object.defineProperty(window, 'onMobileRouteChange', {
@@ -83,6 +85,14 @@ 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/components/progress/Progress.vue

@@ -1,111 +0,0 @@
-<template>
-  <div :class="n()">
-    <div :class="n('linear')" v-if="mode === 'linear'">
-      <div :class="n('linear-block')" :style="{ height: toSizeUnit(lineWidth) }">
-        <div :class="n('linear-background')" v-if="track" :style="{ background: trackColor }"></div>
-        <div
-          :class="classes(n('linear-certain'), [ripple, n('linear-ripple')])"
-          :style="{ background: color, width: linearProps.width }"
-        ></div>
-      </div>
-      <div :class="classes(n('linear-label'), [labelClass, labelClass])" v-if="label">
-        <slot>
-          {{ linearProps.roundValue }}
-        </slot>
-      </div>
-    </div>
-
-    <div :class="n('circle')" v-if="mode === 'circle'" :style="{ width: toSizeUnit(size), height: toSizeUnit(size) }">
-      <svg :class="n('circle-svg')" :style="{ transform: `rotate(${rotate - 90}deg)` }" :viewBox="circleProps.viewBox">
-        <circle
-          v-if="track"
-          :class="n('circle-background')"
-          :cx="multiplySizeUnit(size, 0.5)"
-          :cy="multiplySizeUnit(size, 0.5)"
-          :r="circleProps.radius"
-          fill="transparent"
-          :stroke-width="toSizeUnit(lineWidth)"
-          :style="{
-            strokeDasharray: circleProps.perimeter,
-            stroke: trackColor,
-          }"
-        ></circle>
-        <circle
-          :class="n('circle-certain')"
-          :cx="multiplySizeUnit(size, 0.5)"
-          :cy="multiplySizeUnit(size, 0.5)"
-          :r="circleProps.radius"
-          fill="transparent"
-          :stroke-width="toSizeUnit(lineWidth)"
-          :style="{
-            strokeDasharray: circleProps.strokeDasharray,
-            stroke: color,
-          }"
-        ></circle>
-      </svg>
-
-      <div :class="classes(n('circle-label'), [labelClass, labelClass])" v-if="label">
-        <slot>
-          {{ circleProps.roundValue }}
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed } from 'vue'
-import { props } from './props'
-import { toNumber } from '@varlet/shared'
-import { toSizeUnit, multiplySizeUnit, toPxNum } from '../utils/elements'
-import { createNamespace } from '../utils/components'
-
-const { n, classes } = createNamespace('progress')
-
-export default defineComponent({
-  name: 'VarProgress',
-  props,
-  setup(props) {
-    const linearProps = computed(() => {
-      const value = toNumber(props.value)
-      const width = value > 100 ? 100 : value
-      const roundValue = value > 100 ? 100 : Math.round(value)
-
-      return {
-        width: `${width}%`,
-        roundValue: `${roundValue}%`,
-      }
-    })
-
-    const circleProps = computed(() => {
-      const { size, lineWidth, value } = props
-      const viewBox = `0 0 ${toPxNum(size)} ${toPxNum(size)}`
-      const roundValue = toNumber(value) > 100 ? 100 : Math.round(toNumber(value))
-      const radius = (toPxNum(size) - toPxNum(lineWidth)) / 2
-      const perimeter = 2 * Math.PI * radius
-      const strokeDasharray = `${(roundValue / 100) * perimeter}, ${perimeter}`
-
-      return {
-        viewBox,
-        radius,
-        strokeDasharray,
-        perimeter,
-        roundValue: `${roundValue}%`,
-      }
-    })
-    return {
-      n,
-      classes,
-      toSizeUnit,
-      multiplySizeUnit,
-      linearProps,
-      circleProps,
-    }
-  },
-})
-</script>
-
-<style lang="less">
-@import '../styles/common';
-@import './progress';
-</style>

package/site/components/progress/index.ts

@@ -1,10 +0,0 @@
-import type { App } from 'vue'
-import Progress from './Progress.vue'
-
-Progress.install = function (app: App) {
-  app.component(Progress.name, Progress)
-}
-
-export const _ProgressComponent = Progress
-
-export default Progress

package/site/components/progress/progress.less

@@ -1,101 +0,0 @@
-@site-progress-font-size: var(--site-font-size-sm);
-@site-progress-ripple-color: #fff;
-@site-progress-track-color: #d8d8d8;
-@site-progress-background: var(--color-primary);
-
-:root {
-  --site-progress-font-size: @site-progress-font-size;
-  --site-progress-ripple-color: @site-progress-ripple-color;
-  --site-progress-track-color: @site-progress-track-color;
-  --site-progress-background: @site-progress-background;
-}
-
-.var-site-progress {
-  position: relative;
-  font-size: var(--site-progress-font-size);
-
-  &__linear {
-    display: flex;
-    align-items: center;
-
-    &-block {
-      flex: 1;
-      position: relative;
-      overflow: hidden;
-      height: 4px;
-    }
-
-    &-background,
-    &-certain {
-      width: 100%;
-      height: 100%;
-    }
-
-    &-ripple {
-      &::after {
-        position: absolute;
-        width: 0;
-        background-color: var(--site-progress-ripple-color);
-        height: 100%;
-        opacity: 0;
-        animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-        content: '';
-      }
-    }
-
-    &-background {
-      background-color: var(--site-progress-track-color);
-    }
-
-    &-certain {
-      position: absolute;
-      background-color: var(--site-progress-background);
-      top: 0;
-      left: 0;
-      transition: all 0.2s, background-color 0.8s;
-    }
-
-    &-label {
-      margin-left: 8px;
-      flex: 0;
-    }
-
-    @keyframes ripple {
-      0% {
-        width: 0;
-        opacity: 0.1;
-      }
-      20% {
-        width: 0;
-        opacity: 0.5;
-      }
-      80% {
-        width: 100%;
-        opacity: 0;
-      }
-    }
-  }
-
-  &__circle {
-    position: relative;
-    width: 40px;
-    height: 40px;
-
-    &-background {
-      stroke: var(--site-progress-track-color);
-    }
-
-    &-certain {
-      transition: all 0.2s;
-      stroke: var(--site-progress-background);
-      position: absolute;
-    }
-
-    &-label {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-}

package/site/components/progress/props.ts

@@ -1,52 +0,0 @@
-import { type PropType } from 'vue'
-
-function modeValidator(mode: string): boolean {
-  return ['linear', 'circle'].includes(mode)
-}
-
-type ProgressMode = 'linear' | 'circle'
-
-export const props = {
-  mode: {
-    type: String as PropType<ProgressMode>,
-    default: 'linear',
-    validator: modeValidator,
-  },
-  lineWidth: {
-    type: [Number, String],
-    default: 4,
-  },
-  color: {
-    type: String,
-  },
-  trackColor: {
-    type: String,
-  },
-  ripple: {
-    type: Boolean,
-    default: false,
-  },
-  value: {
-    type: [Number, String],
-    default: 0,
-  },
-  label: {
-    type: Boolean,
-    default: false,
-  },
-  labelClass: {
-    type: String,
-  },
-  size: {
-    type: [Number, String],
-    default: 40,
-  },
-  rotate: {
-    type: Number,
-    default: 0,
-  },
-  track: {
-    type: Boolean,
-    default: true,
-  }
-}

package/site/useProgress.ts

@@ -1,73 +0,0 @@
-import Progress from './components/progress'
-import config from '@config'
-import { reactive } from 'vue'
-import { getBrowserTheme, Theme, watchTheme } from '@varlet/cli/client'
-import { mountInstance } from './components/utils/components'
-import { get } from 'lodash-es'
-
-function getColor(theme?: Theme) {
-  return get(config, `${theme ?? getBrowserTheme()}.color-progress`)
-}
-
-function getTrackColor(theme?: Theme) {
-  return get(config, `${theme ?? getBrowserTheme()}.color-progress-track`)
-}
-
-export function useProgress() {
-  let timer: number
-  let currentTheme: Theme
-
-  const trackColor = getTrackColor()
-  const color = getColor()
-
-  const props = reactive({
-    style: {
-      position: 'fixed',
-      width: '100%',
-      left: 0,
-      top: 0,
-      zIndex: 10086,
-    },
-    trackColor,
-    color,
-    lineWidth: 3,
-    value: 0,
-  })
-
-  watchTheme((theme) => {
-    currentTheme = theme
-    props.trackColor = getTrackColor(theme)
-    props.color = props.value === 100 ? getTrackColor(theme) : getColor(theme)
-  }, false)
-
-  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)
-  }
-
-  const start = () => {
-    props.value = 0
-    setTimeout(() => (props.color = getColor(currentTheme)), 200)
-    changeValue()
-  }
-
-  const end = () => {
-    props.value = 100
-    setTimeout(() => (props.color = getTrackColor(currentTheme)), 300)
-    window.clearTimeout(timer)
-  }
-
-  mountInstance(Progress, props)
-
-  return {
-    start,
-    end,
-  }
-}