@varlet/cli 1.27.20 → 2.0.0-alpha.1663742071515

package/site/components/snackbar/index.tsx

@@ -1,9 +1,9 @@
-import VarSiteSnackbarCore from './core.vue'
-import VarSiteSnackbar from './Snackbar.vue'
+import VarSnackbarCore from './core.vue'
+import VarSnackbar from './Snackbar.vue'
 import context from '../context'
 import { reactive, TransitionGroup } from 'vue'
 import { mountInstance } from '../utils/components'
-import { isPlainObject, toNumber } from '@varlet/shared'
+import { isNumber, isPlainObject, isString, toNumber } from '@varlet/shared'
 import type { LoadingType, LoadingSize } from '../loading/props'
 import type { App, Component, TeleportProps } from 'vue'
 
@@ -95,7 +95,7 @@ const transitionGroupProps: any = {
 }
 
 const TransitionGroupHost = {
-  setup: function() {
+  setup() {
     return () => {
       const snackbarList = uniqSnackbarOptions.map(({ id, reactiveSnackOptions, _update }: UniqSnackbarOptions) => {
         const transitionGroupEl = document.querySelector('.var-site-transition-group')
@@ -111,11 +111,11 @@ const TransitionGroupHost = {
 
         const style = {
           position,
-          ...getTop(reactiveSnackOptions.position)
+          ...getTop(reactiveSnackOptions.position),
         }
 
         return (
-          <VarSiteSnackbarCore
+          <VarSnackbarCore
             {...reactiveSnackOptions}
             key={id}
             style={style}
@@ -139,11 +139,11 @@ const TransitionGroupHost = {
         </TransitionGroup>
       )
     }
-  }
+  },
 }
 
-const Snackbar: Snackbar = function (options: SnackbarOptions | string): SnackbarHandel {
-  const snackOptions: SnackbarOptions = isPlainObject(options) ? options : { content: options }
+const Snackbar: Snackbar = function (options: SnackbarOptions | string | number): SnackbarHandel {
+  const snackOptions: SnackbarOptions = isString(options) || isNumber(options) ? { content: String(options) } : options
   const reactiveSnackOptions: SnackbarOptions = reactive<SnackbarOptions>({
     ...defaultOption,
     ...snackOptions,
@@ -194,7 +194,7 @@ SNACKBAR_TYPE.forEach((type) => {
 })
 
 Snackbar.install = function (app: App) {
-  app.component(VarSiteSnackbar.name, VarSiteSnackbar)
+  app.component(VarSnackbar.name, VarSnackbar)
 }
 
 Snackbar.allowMultiple = function (bool = false) {
@@ -213,7 +213,7 @@ Snackbar.clear = function () {
   })
 }
 
-Snackbar.Component = VarSiteSnackbar
+Snackbar.Component = VarSnackbar
 
 function opened(element: HTMLElement): void {
   const id = element.getAttribute('data-id')
@@ -261,10 +261,10 @@ function getTop(position = 'top') {
   return { top: position === 'top' ? '5%' : '45%' }
 }
 
-VarSiteSnackbar.install = function (app: App) {
-  app.component(VarSiteSnackbar.name, VarSiteSnackbar)
+VarSnackbar.install = function (app: App) {
+  app.component(VarSnackbar.name, VarSnackbar)
 }
 
-export const _SnackbarComponent = VarSiteSnackbar
+export const _SnackbarComponent = VarSnackbar
 
 export default Snackbar

package/site/components/snackbar/props.ts

@@ -41,10 +41,13 @@ export const props = {
     type: Boolean,
     default: false,
   },
-  // 加载动画类型
   loadingType: pickProps(loadingProps, 'type'),
-  // 加载动画尺寸
   loadingSize: pickProps(loadingProps, 'size'),
+  loadingRadius: pickProps(loadingProps, 'radius'),
+  loadingColor: {
+    ...pickProps(loadingProps, 'color'),
+    default: 'currentColor',
+  },
   // 是否禁止滚动穿透
   lockScroll: {
     type: Boolean,
@@ -67,26 +70,26 @@ export const props = {
   },
   // 打开时的回调函数
   onOpen: {
-    type: Function,
+    type: Function as PropType<() => void>,
     default: () => {},
   },
   // 打开动画结束时的回调
   onOpened: {
-    type: Function,
+    type: Function as PropType<() => void>,
     default: () => {},
   },
   // 关闭时的回调函数
   onClose: {
-    type: Function,
+    type: Function as PropType<() => void>,
     default: () => {},
   },
   // 关闭动画结束时的回调
   onClosed: {
-    type: Function,
+    type: Function as PropType<() => void>,
     default: () => {},
   },
   'onUpdate:show': {
-    type: Function,
+    type: Function as PropType<(show: boolean) => void>,
   },
   _update: {
     type: String,

package/site/components/utils/components.ts

@@ -1,5 +1,6 @@
-import { createApp, h, onActivated, onDeactivated, ref, Ref } from 'vue'
+import { createApp, h, onActivated, onDeactivated, onMounted, onUnmounted, ref, Ref } from "vue";
 import type { Component } from 'vue'
+import { isArray } from "@varlet/shared";
 
 export interface MountInstance {
   instance: any
@@ -67,3 +68,50 @@ export function useTeleport() {
     disabled,
   }
 }
+
+type ClassName = string | undefined | null
+type Classes = (ClassName | [any, ClassName, ClassName?])[]
+
+export function createNamespace(name: string) {
+  const namespace = `var-site-${name}`
+
+  const createBEM = (suffix?: string): string => {
+    if (!suffix) return namespace
+
+    return suffix.startsWith('--') ? `${namespace}${suffix}` : `${namespace}__${suffix}`
+  }
+
+  const classes = (...classes: Classes): any[] => {
+    return classes.map((className) => {
+      if (isArray(className)) {
+        const [condition, truthy, falsy = null] = className
+        return condition ? truthy : falsy
+      }
+
+      return className
+    })
+  }
+
+  return {
+    n: createBEM,
+    classes,
+  }
+}
+
+export function call<F extends (...arg: any) => any, P extends Parameters<F>>(
+  fn?: F | null,
+  ...arg: P
+): ReturnType<F> | undefined {
+  if (fn) return fn(...arg)
+}
+
+export function useRouteListener(cb: () => void) {
+  onMounted(() => {
+    window.addEventListener('hashchange', cb)
+    window.addEventListener('popstate', cb)
+  })
+  onUnmounted(() => {
+    window.removeEventListener('hashchange', cb)
+    window.removeEventListener('popstate', cb)
+  })
+}

package/site/components/utils/elements.ts

@@ -83,3 +83,20 @@ export function doubleRaf() {
     })
   })
 }
+
+export function supportTouch() {
+  const inBrowser = typeof window !== 'undefined'
+  return inBrowser && 'ontouchstart' in window
+}
+
+export const multiplySizeUnit = (value: unknown, quantity = 1) => {
+  if (value == null) {
+    return undefined
+  }
+
+  const legalSize = toSizeUnit(value) as string
+
+  const unit = legalSize.match(/(vh|%|rem|px|vw)$/)![0]
+
+  return `${parseFloat(legalSize) * quantity}${unit}`
+}

package/site/mobile/App.vue

@@ -1,12 +1,12 @@
 <template>
   <div style="position: relative">
     <header>
-      <var-site-app-bar class="app-bar" title-position="left" :title="bigCamelizeComponentName">
+      <var-app-bar class="app-bar" title-position="left" :title="bigCamelizeComponentName">
         <template #left>
-          <var-site-button v-if="showBackIcon" text round @click="back" color="transparent" text-color="#fff">
-            <var-site-icon name="chevron-left" class="arrow-left" style="margin-top: 1px" />
-          </var-site-button>
-          <var-site-button
+          <var-button v-if="showBackIcon" text round @click="back" color="transparent" text-color="#fff">
+            <var-icon name="chevron-left" class="arrow-left" style="margin-top: 1px" />
+          </var-button>
+          <var-button
             v-if="!showBackIcon && github"
             style="margin-left: 2px"
             text
@@ -15,11 +15,11 @@
             color="transparent"
             text-color="#fff"
           >
-            <var-site-icon name="github" class="github" style="margin-top: 1px" />
-          </var-site-button>
+            <var-icon name="github" class="github" style="margin-top: 1px" />
+          </var-button>
         </template>
         <template #right>
-          <var-site-button
+          <var-button
             text
             round
             color="transparent"
@@ -30,13 +30,13 @@
             v-if="darkMode"
             @click="toggleTheme"
           >
-            <var-site-icon
+            <var-icon
               class="theme"
               color="#fff"
-              :name="currentThemes === 'themes' ? 'white-balance-sunny' : 'weather-night'"
+              :name="currentTheme === 'lightTheme' ? 'white-balance-sunny' : 'weather-night'"
             />
-          </var-site-button>
-          <var-site-button
+          </var-button>
+          <var-button
             class="i18n-button"
             text
             color="transparent"
@@ -44,11 +44,11 @@
             @click.stop="showMenu = true"
             v-if="languages"
           >
-            <var-site-icon name="translate" class="i18n" />
-            <var-site-icon name="chevron-down" class="arrow-down" />
-          </var-site-button>
+            <var-icon name="translate" class="i18n" />
+            <var-icon name="chevron-down" class="arrow-down" />
+          </var-button>
         </template>
-      </var-site-app-bar>
+      </var-app-bar>
     </header>
     <div class="router-view__block">
       <router-view />
@@ -56,7 +56,7 @@
 
     <transition name="site-menu">
       <div class="settings var-site-elevation--3" v-if="showMenu">
-        <var-site-cell
+        <var-cell
           v-for="(value, key) in nonEmptyLanguages"
           :key="key"
           class="mobile-language-cell"
@@ -65,7 +65,7 @@
           @click="changeLanguage(key)"
         >
           {{ value }}
-        </var-site-cell>
+        </var-cell>
       </div>
     </transition>
   </div>
@@ -76,19 +76,20 @@ import config from '@config'
 import { computed, ComputedRef, defineComponent, ref, Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import {
-  getBrowserThemes,
+  getBrowserTheme,
   inIframe,
   isPhone,
   removeEmpty,
-  setThemes,
+  setTheme,
+  Theme,
   watchLang,
-  watchThemes,
-} from '../utils'
+  watchTheme
+} from "../utils";
 import { bigCamelize } from '@varlet/shared'
 import { get } from 'lodash-es'
 
 export default defineComponent({
-  setup: function () {
+  setup() {
     const bigCamelizeComponentName: Ref<string> = ref('')
     const route = useRoute()
     const showBackIcon: Ref<boolean> = ref(false)
@@ -97,10 +98,9 @@ export default defineComponent({
     const languages: Ref<Record<string, string>> = ref(get(config, 'mobile.header.i18n'))
     const nonEmptyLanguages: ComputedRef<Record<string, string>> = computed(() => removeEmpty(languages.value))
     const redirect = get(config, 'mobile.redirect', '')
-    const themesKey = get(config, 'themesKey')
     const github: Ref<string> = ref(get(config, 'mobile.header.github'))
     const darkMode: Ref<string> = ref(get(config, 'mobile.header.darkMode'))
-    const currentThemes = ref(getBrowserThemes(themesKey))
+    const currentTheme = ref(getBrowserTheme())
 
     const changeLanguage = (lang: string) => {
       language.value = lang
@@ -142,34 +142,34 @@ export default defineComponent({
       }
     )
 
-    const getThemesMessage = () => ({ action: 'themesChange', from: 'mobile', data: currentThemes.value })
+    const getThemeMessage = () => ({ action: 'theme-change', from: 'mobile', data: currentTheme.value })
 
-    const setCurrentThemes = (themes: 'themes' | 'darkThemes') => {
-      currentThemes.value = themes
-      setThemes(config, currentThemes.value)
-      window.localStorage.setItem(themesKey, currentThemes.value)
+    const setCurrentTheme = (theme: Theme) => {
+      currentTheme.value = theme
+      setTheme(config, currentTheme.value)
+      window.localStorage.setItem(get(config, 'themeKey'), currentTheme.value)
     }
 
     const toggleTheme = () => {
-      setCurrentThemes(currentThemes.value === 'darkThemes' ? 'themes' : 'darkThemes')
-      window.postMessage(getThemesMessage(), '*')
+      setCurrentTheme(currentTheme.value === 'darkTheme' ? 'lightTheme' : 'darkTheme')
+      window.postMessage(getThemeMessage(), '*')
 
       if (!isPhone() && inIframe()) {
-        ;(window.top as any).postMessage(getThemesMessage(), '*')
+        ;(window.top as any).postMessage(getThemeMessage(), '*')
       }
     }
 
     ;(window as any).toggleTheme = toggleTheme
 
-    setThemes(config, currentThemes.value)
-    window.postMessage(getThemesMessage(), '*')
+    setTheme(config, currentTheme.value)
+    window.postMessage(getThemeMessage(), '*')
 
     document.body.addEventListener('click', () => {
       showMenu.value = false
     })
 
-    watchThemes((themes, from) => {
-      from === 'pc' && setCurrentThemes(themes)
+    watchTheme((theme, from) => {
+      from === 'pc' && setCurrentTheme(theme)
     })
 
     return {
@@ -180,7 +180,7 @@ export default defineComponent({
       languages,
       language,
       nonEmptyLanguages,
-      currentThemes,
+      currentTheme,
       darkMode,
       toGithub,
       back,
@@ -255,13 +255,13 @@ header {
 }
 
 .mobile-language-cell {
-  color: var(--site-config-color-text);
-  background: var(--site-config-color-bar);
+  color: var(--site-config-color-text) !important;
+  background: var(--site-config-color-bar) !important;
   cursor: pointer;
 
   &--active {
-    color: var(--site-config-color-mobile-language-active);
-    background: var(--site-config-color-mobile-language-active-background);
+    color: var(--site-config-color-mobile-language-active) !important;
+    background: var(--site-config-color-mobile-language-active-background) !important;
   }
 }
 

package/site/mobile/components/AppHome.vue

@@ -15,7 +15,7 @@
     @click="toComponent(component)"
   >
     <span>{{ component.text[lang] }}</span>
-    <var-site-icon name="chevron-right" size="14" />
+    <var-icon name="chevron-right" size="14" />
   </div>
 </template>
 

package/site/mobile/components/app-bar/AppBar.vue

@@ -1,33 +1,24 @@
 <template>
   <div
-    class="var-site-app-bar"
-    :class="{ 'var-site-elevation--3': elevation }"
+    :class="classes(n(), [elevation, 'var-site-elevation--3'])"
     :style="{
       background: color,
       color: textColor,
     }"
   >
-    <div class="var-site-app-bar__left">
+    <div :class="n('left')">
       <slot name="left" />
-      <div
-        class="var-site-app-bar__title"
-        :style="{ paddingLeft }"
-        v-if="titlePosition === 'left'"
-      >
+      <div :class="n('title')" :style="{ paddingLeft }" v-if="titlePosition === 'left'">
         <slot>{{ title }}</slot>
       </div>
     </div>
 
-    <div class="var-site-app-bar__title" v-if="titlePosition === 'center'">
+    <div :class="n('title')" v-if="titlePosition === 'center'">
       <slot>{{ title }}</slot>
     </div>
 
-    <div class="var-site-app-bar__right">
-      <div
-        class="var-site-app-bar__title"
-        :style="{ paddingRight }"
-        v-if="titlePosition === 'right'"
-      >
+    <div :class="n('right')">
+      <div :class="n('title')" :style="{ paddingRight }" v-if="titlePosition === 'right'">
         <slot>{{ title }}</slot>
       </div>
       <slot name="right" />
@@ -36,11 +27,14 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, onMounted, onUpdated, ref, Ref} from 'vue'
+import { defineComponent, ref, Ref, onMounted, onUpdated } from 'vue'
 import { props } from './props'
+import { createNamespace } from '../../../components/utils/components'
+
+const { n, classes } = createNamespace('app-bar')
 
 export default defineComponent({
-  name: 'VarSiteAppBar',
+  name: 'VarAppBar',
   props,
   setup(props, { slots }) {
     const paddingLeft: Ref<number | undefined> = ref()
@@ -55,15 +49,17 @@ export default defineComponent({
     onUpdated(computePadding)
 
     return {
+      n,
+      classes,
       paddingLeft,
-      paddingRight
+      paddingRight,
     }
-  }
+  },
 })
 </script>
 
 <style lang="less">
-@import '../styles/common';
-@import '../styles/elevation';
+@import '../../../components/styles/common';
+@import '../../../components/styles/elevation';
 @import './appBar';
 </style>

package/site/mobile/components/app-bar/appBar.less

@@ -17,12 +17,13 @@
 .var-site-app-bar {
   position: relative;
   display: flex;
+  width: 100%;
   justify-content: center;
   align-items: center;
   height: var(--site-app-bar-height);
   background: var(--site-app-bar-color);
   color: var(--site-app-bar-text-color);
-  transition: background-color .25s;
+  transition: background-color 0.25s;
 
   &__title {
     flex: 1;

package/site/mobile/main.ts

@@ -46,8 +46,12 @@ router.beforeEach((to: any) => {
   }
 
   if (!isPhone() && inIframe()) {
-    // @ts-ignore
-    window.top.onMobileRouteChange(path, language, replace)
+    try {
+      // @ts-ignore
+      window.top.onMobileRouteChange(path, language, replace)
+    } catch (e) {
+      console.log(e)
+    }
   }
 
   // @ts-ignore