@varlet/cli 1.23.11 → 1.24.2-alpha.1640861757955

package/site/components/snackbar/index.tsx

@@ -0,0 +1,270 @@
+import VarSiteSnackbarCore from './core.vue'
+import VarSiteSnackbar from './Snackbar.vue'
+import context from '../context'
+import { reactive, TransitionGroup } from 'vue'
+import { mountInstance } from '../utils/components'
+import { isPlainObject, toNumber } from '../utils/shared'
+import type { LoadingType, LoadingSize } from '../loading/props'
+import type { App, Component, TeleportProps } from 'vue'
+
+export type SnackbarType = 'success' | 'warning' | 'info' | 'error' | 'loading'
+
+export const SNACKBAR_TYPE: Array<SnackbarType> = ['loading', 'success', 'warning', 'info', 'error']
+
+interface SnackbarHandel {
+  clear: () => void
+}
+
+interface SnackbarOptions {
+  type?: SnackbarType
+  content?: string
+  position?: 'top' | 'center' | 'bottom'
+  loadingType?: LoadingType
+  loadingSize?: LoadingSize
+  lockScroll?: boolean
+  contentClass?: string
+  duration?: number
+  vertical?: boolean
+  show?: boolean
+  forbidClick?: boolean
+  onOpen?: () => void
+  onClose?: () => void
+  onOpened?: () => void
+  onClosed?: () => void
+  // internal
+  teleport?: TeleportProps['to']
+}
+
+interface UniqSnackbarOptions {
+  id: number
+  reactiveSnackOptions: SnackbarOptions
+  _update?: string
+  animationEnd?: boolean
+}
+
+interface Snackbar {
+  (options: SnackbarOptions | string): SnackbarHandel
+
+  install(app: App): void
+
+  allowMultiple(bool: boolean): void
+
+  success(options: SnackbarOptions | string): SnackbarHandel
+
+  warning(options: SnackbarOptions | string): SnackbarHandel
+
+  info(options: SnackbarOptions | string): SnackbarHandel
+
+  error(options: SnackbarOptions | string): SnackbarHandel
+
+  loading(options: SnackbarOptions | string): SnackbarHandel
+
+  clear(): void
+
+  Component: Component
+}
+
+let sid = 0
+let isMount = false
+let unmount: () => void
+let isAllowMultiple = false
+let uniqSnackbarOptions: Array<UniqSnackbarOptions> = reactive<UniqSnackbarOptions[]>([])
+
+const defaultOption: Partial<Record<keyof SnackbarOptions, any>> = {
+  type: undefined,
+  content: '',
+  position: 'top',
+  duration: 3000,
+  vertical: false,
+  contentClass: undefined,
+  loadingType: 'circle',
+  loadingSize: 'normal',
+  lockScroll: false,
+  teleport: 'body',
+  forbidClick: false,
+  onOpen: () => {},
+  onOpened: () => {},
+  onClose: () => {},
+  onClosed: () => {},
+}
+
+const transitionGroupProps: any = {
+  name: 'var-site-snackbar-fade',
+  tag: 'div',
+  class: 'var-site-transition-group',
+}
+
+const TransitionGroupHost = {
+  setup: function() {
+    return () => {
+      const snackbarList = uniqSnackbarOptions.map(({ id, reactiveSnackOptions, _update }: UniqSnackbarOptions) => {
+        const transitionGroupEl = document.querySelector('.var-site-transition-group')
+        if (reactiveSnackOptions.forbidClick || reactiveSnackOptions.type === 'loading') {
+          ;(transitionGroupEl as HTMLElement).classList.add('var-site-pointer-auto')
+        } else {
+          ;(transitionGroupEl as HTMLElement).classList.remove('var-site-pointer-auto')
+        }
+
+        if (isAllowMultiple) reactiveSnackOptions.position = 'top'
+
+        const position = isAllowMultiple ? 'relative' : 'absolute' // avoid stylelint value-keyword-case error
+
+        const style = {
+          position,
+          ...getTop(reactiveSnackOptions.position)
+        }
+
+        return (
+          <VarSiteSnackbarCore
+            {...reactiveSnackOptions}
+            key={id}
+            style={style}
+            data-id={id}
+            _update={_update}
+            v-model={[reactiveSnackOptions.show, 'show']}
+          />
+        )
+      })
+
+      const zindex = context.zIndex // avoid stylelint value-keyword-case error
+
+      return (
+        <TransitionGroup
+          {...transitionGroupProps}
+          style={{ zIndex: zindex }}
+          onAfterEnter={opened}
+          onAfterLeave={removeUniqOption}
+        >
+          {snackbarList}
+        </TransitionGroup>
+      )
+    }
+  }
+}
+
+const Snackbar: Snackbar = function (options: SnackbarOptions | string): SnackbarHandel {
+  const snackOptions: SnackbarOptions = isPlainObject(options) ? options : { content: options }
+  const reactiveSnackOptions: SnackbarOptions = reactive<SnackbarOptions>({
+    ...defaultOption,
+    ...snackOptions,
+  })
+  reactiveSnackOptions.show = true
+
+  if (!isMount) {
+    isMount = true
+    unmount = mountInstance(TransitionGroupHost).unmountInstance
+  }
+
+  const { length } = uniqSnackbarOptions
+  const uniqSnackbarOptionItem: UniqSnackbarOptions = {
+    id: sid++,
+    reactiveSnackOptions,
+  }
+
+  if (length === 0 || isAllowMultiple) {
+    addUniqOption(uniqSnackbarOptionItem)
+  } else {
+    const _update = `update-${sid}`
+    updateUniqOption(reactiveSnackOptions, _update)
+  }
+
+  return {
+    clear() {
+      if (!isAllowMultiple && uniqSnackbarOptions.length) {
+        uniqSnackbarOptions[0].reactiveSnackOptions.show = false
+      } else {
+        reactiveSnackOptions.show = false
+      }
+    },
+  }
+} as Snackbar
+
+SNACKBAR_TYPE.forEach((type) => {
+  Snackbar[type] = (options: SnackbarOptions | string): SnackbarHandel => {
+    if (isPlainObject(options)) {
+      options.type = type
+    } else {
+      options = {
+        content: options,
+        type,
+      }
+    }
+    return Snackbar(options)
+  }
+})
+
+Snackbar.install = function (app: App) {
+  app.component(VarSiteSnackbar.name, VarSiteSnackbar)
+}
+
+Snackbar.allowMultiple = function (bool = false) {
+  if (bool !== isAllowMultiple) {
+    uniqSnackbarOptions.forEach((option: UniqSnackbarOptions) => {
+      option.reactiveSnackOptions.show = false
+    })
+
+    isAllowMultiple = bool
+  }
+}
+
+Snackbar.clear = function () {
+  uniqSnackbarOptions.forEach((option: UniqSnackbarOptions) => {
+    option.reactiveSnackOptions.show = false
+  })
+}
+
+Snackbar.Component = VarSiteSnackbar
+
+function opened(element: HTMLElement): void {
+  const id = element.getAttribute('data-id')
+  const option = uniqSnackbarOptions.find((option) => option.id === toNumber(id))
+  if (option) option.reactiveSnackOptions.onOpened?.()
+}
+
+function removeUniqOption(element: HTMLElement): void {
+  element.parentElement && element.parentElement.classList.remove('var-site-pointer-auto')
+  const id = element.getAttribute('data-id')
+
+  const option = uniqSnackbarOptions.find((option) => option.id === toNumber(id))
+  if (option) {
+    option.animationEnd = true
+    option.reactiveSnackOptions.onClosed?.()
+  }
+
+  const isAllAnimationEnd = uniqSnackbarOptions.every((option) => option.animationEnd)
+
+  if (isAllAnimationEnd) {
+    unmount?.()
+    uniqSnackbarOptions = reactive<UniqSnackbarOptions[]>([])
+    isMount = false
+  }
+}
+
+function addUniqOption(uniqSnackbarOptionItem: UniqSnackbarOptions) {
+  uniqSnackbarOptions.push(uniqSnackbarOptionItem)
+}
+
+function updateUniqOption(reactiveSnackOptions: SnackbarOptions, _update: string) {
+  const [firstOption] = uniqSnackbarOptions
+
+  firstOption.reactiveSnackOptions = {
+    ...firstOption.reactiveSnackOptions,
+    ...reactiveSnackOptions,
+  }
+
+  firstOption._update = _update
+}
+
+function getTop(position = 'top') {
+  if (position === 'bottom') return { [position]: '5%' }
+
+  return { top: position === 'top' ? '5%' : '45%' }
+}
+
+VarSiteSnackbar.install = function (app: App) {
+  app.component(VarSiteSnackbar.name, VarSiteSnackbar)
+}
+
+export const _SnackbarComponent = VarSiteSnackbar
+
+export default Snackbar

package/site/components/snackbar/props.ts

@@ -0,0 +1,94 @@
+import { pickProps } from '../utils/components'
+import { props as loadingProps } from '../loading/props'
+import { SNACKBAR_TYPE, SnackbarType } from './index'
+import type { PropType, TeleportProps } from 'vue'
+
+export function positionValidator(position: string): boolean {
+  const validPositions = ['top', 'center', 'bottom']
+  return validPositions.includes(position)
+}
+
+export function typeValidator(type: SnackbarType): boolean {
+  return SNACKBAR_TYPE.includes(type)
+}
+
+export const props = {
+  type: {
+    type: String as PropType<SnackbarType>,
+    validator: typeValidator,
+  },
+  // snackbar显示的位置
+  position: {
+    type: String,
+    default: 'top',
+    validator: positionValidator,
+  },
+  // content内容
+  content: {
+    type: String,
+  },
+  // 为snackbar content添加自定义类名
+  contentClass: {
+    type: String,
+  },
+  // snackbar 持续时间
+  duration: {
+    type: Number,
+    default: 3000,
+  },
+  // 是否将消息条内容堆叠在操作（按钮）之上
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+  // 加载动画类型
+  loadingType: pickProps(loadingProps, 'type'),
+  // 加载动画尺寸
+  loadingSize: pickProps(loadingProps, 'size'),
+  // 是否禁止滚动穿透
+  lockScroll: {
+    type: Boolean,
+    default: false,
+  },
+  // 控制组件可见还是隐藏
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  // teleport
+  teleport: {
+    type: String as PropType<TeleportProps['to']>,
+    default: 'body',
+  },
+  // 是否禁止点击背景
+  forbidClick: {
+    type: Boolean,
+    default: false,
+  },
+  // 打开时的回调函数
+  onOpen: {
+    type: Function,
+    default: () => {},
+  },
+  // 打开动画结束时的回调
+  onOpened: {
+    type: Function,
+    default: () => {},
+  },
+  // 关闭时的回调函数
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+  // 关闭动画结束时的回调
+  onClosed: {
+    type: Function,
+    default: () => {},
+  },
+  'onUpdate:show': {
+    type: Function,
+  },
+  _update: {
+    type: String,
+  },
+}

package/site/components/snackbar/snackbar.less

@@ -0,0 +1,135 @@
+@site-snackbar-width: 256px;
+@site-snackbar-color: rgba(255, 255, 255, 0.87);
+@site-snackbar-border-radius: 4px;
+@site-snackbar-background: #333;
+@site-snackbar-font-size: var(--site-font-size-md);
+@site-snackbar-margin: 6px 24px;
+@site-snackbar-border-color: currentColor;
+@site-snackbar-success-background: var(--site-color-success);
+@site-snackbar-info-background: var(--site-color-info);
+@site-snackbar-error-background: var(--site-color-danger);
+@site-snackbar-warning-background: var(--site-color-warning);
+@site-snackbar-content-padding: 14px 16px;
+@site-snackbar-action-margin: 0 16px 0 0;
+
+:root {
+  --site-snackbar-width: @site-snackbar-width;
+  --site-snackbar-color: @site-snackbar-color;
+  --site-snackbar-border-radius: @site-snackbar-border-radius;
+  --site-snackbar-background: @site-snackbar-background;
+  --site-snackbar-font-size: @site-snackbar-font-size;
+  --site-snackbar-margin: @site-snackbar-margin;
+  --site-snackbar-border-color: @site-snackbar-border-color;
+  --site-snackbar-success-background: @site-snackbar-success-background;
+  --site-snackbar-info-background: @site-snackbar-info-background;
+  --site-snackbar-error-background: @site-snackbar-error-background;
+  --site-snackbar-warning-background: @site-snackbar-warning-background;
+  --site-snackbar-content-padding: @site-snackbar-content-padding;
+  --site-snackbar-action-margin: @site-snackbar-action-margin;
+}
+
+.var-site-transition-group {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.var-site-pointer-auto {
+  pointer-events: auto;
+}
+
+.var-site {
+  &-snackbar {
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transition: all 0.15s var(--site-cubic-bezier);
+
+    &__wrapper {
+      width: var(--site-snackbar-width);
+      display: flex;
+      border-radius: var(--site-snackbar-border-radius);
+      color: var(--site-snackbar-color);
+      background: var(--site-snackbar-background);
+      font-size: var(--site-snackbar-font-size);
+      margin: var(--site-snackbar-margin);
+      align-items: center;
+      border-color: var(--site-snackbar-border-color);
+      pointer-events: auto;
+      transition: 0.3s var(--site-cubic-bezier);
+
+      &-success {
+        background: var(--site-snackbar-success-background);
+      }
+
+      &-info {
+        background: var(--site-snackbar-info-background);
+      }
+
+      &-warning {
+        background: var(--site-snackbar-warning-background);
+      }
+
+      &-error {
+        background: var(--site-snackbar-error-background);
+      }
+    }
+
+    &__content {
+      flex-grow: 1;
+      padding: var(--site-snackbar-content-padding);
+    }
+
+    &__action {
+      margin: var(--site-snackbar-action-margin);
+      display: flex;
+    }
+
+    &__vertical {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .var-site-snackbar__action {
+        align-self: flex-end;
+        margin-bottom: 8px;
+      }
+    }
+
+    &-fade-leave-active {
+      position: absolute;
+    }
+
+    &-fade-enter-from,
+    &-fade-leave-to {
+      opacity: 0;
+      transform: translateY(-30px);
+    }
+  }
+
+  &-snackbar-transition {
+    top: 0;
+    position: fixed;
+
+    .var-site-snackbar__wrapper {
+      position: absolute;
+
+      &-top {
+        top: 5%;
+      }
+
+      &-center {
+        top: 45%;
+      }
+
+      &-bottom {
+        bottom: 5%;
+      }
+    }
+  }
+}

package/site/components/utils/elements.ts

@@ -81,3 +81,11 @@ export function formatStyleVars(styleVars: StyleVars | null) {
     return styles
   }, {} as StyleVars)
 }
+
+export function doubleRaf() {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(resolve)
+    })
+  })
+}

package/site/components/utils/shared.ts

@@ -12,6 +12,9 @@ export const toNumber = (val: number | string | boolean | undefined | null): num
   return val
 }
 
+export const isPlainObject = (val: unknown): val is Record<string, any> =>
+  Object.prototype.toString.call(val) === '[object Object]'
+
 export function kebabCase(str: string): string {
   const reg = /([^-])([A-Z])/g
 

package/site/mobile/App.vue

@@ -86,7 +86,6 @@
 </template>
 
 <script lang="ts">
-// @ts-ignore
 import config from '@config'
 import { computed, ComputedRef, defineComponent, ref, Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
@@ -98,7 +97,7 @@ import {
   removeEmpty,
   setThemes,
   watchLang,
-  watchThemes
+  watchThemes,
 } from '../utils'
 import { get } from 'lodash-es'
 
@@ -112,11 +111,12 @@ 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())
+    const currentThemes = ref(getBrowserThemes(themesKey))
 
-    const changeLanguage = (lang) => {
+    const changeLanguage = (lang: string) => {
       language.value = lang
       showMenu.value = false
       window.location.href = `./mobile.html#${route.path}?language=${language.value}&replace=${route.query.replace}`
@@ -136,7 +136,7 @@ export default defineComponent({
 
     const toGithub = () => {
       if (inIframe() && !isPhone()) {
-        window.top.open(github.value)
+        window.top!.open(github.value)
       } else {
         window.location.href = github.value
       }
@@ -161,7 +161,7 @@ export default defineComponent({
     const setCurrentThemes = (themes: 'themes' | 'darkThemes') => {
       currentThemes.value = themes
       setThemes(config, currentThemes.value)
-      window.localStorage.setItem('currentThemes', currentThemes.value)
+      window.localStorage.setItem(themesKey, currentThemes.value)
     }
 
     const toggleTheme = () => {

package/site/module.d.ts

@@ -0,0 +1,4 @@
+declare module 'clipboard'
+declare module '@pc-routes'
+declare module '@mobile-routes'
+declare module '@config'

package/site/pc/App.vue

@@ -29,11 +29,10 @@
 </template>
 
 <script lang="ts">
-// @ts-ignore
 import config from '@config'
-import AppMobile from './components/AppMobile'
-import AppHeader from './components/AppHeader'
-import AppSidebar from './components/AppSidebar'
+import AppMobile from './components/AppMobile.vue'
+import AppHeader from './components/AppHeader.vue'
+import AppSidebar from './components/AppSidebar.vue'
 import { defineComponent, nextTick, onMounted, ref, Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { get } from 'lodash-es'
@@ -52,7 +51,6 @@ export default defineComponent({
     AppSidebar
   },
   setup() {
-    // config
     const defaultLanguage = get(config, 'defaultLanguage')
     const menu: Ref<Menu[]> = ref(get(config, 'pc.menu', []))
     const useMobile = ref(get(config, 'useMobile'))
@@ -79,7 +77,7 @@ export default defineComponent({
 
       nextTick(() => {
         const children = document
-          .querySelector('.varlet-site-sidebar')
+          .querySelector('.varlet-site-sidebar')!
           .getElementsByClassName('var-site-cell')
         const index = menu.value.findIndex((item) => item.doc === menuName)
 
@@ -93,7 +91,7 @@ export default defineComponent({
     }
 
     const handleSidebarChange = (menu: Menu) => {
-      doc.value.scrollTop = 0
+      doc.value!.scrollTop = 0
       componentName.value = getComponentNameByMenuName(menu.doc)
       menuName.value = menu.doc
     }
@@ -287,17 +285,17 @@ iframe {
       }
 
       pre {
-        margin: 20px 0 0;
+        margin: 10px 0 0;
       }
 
       code {
         position: relative;
         display: block;
-        padding: 16px;
+        padding: 10px 16px;
         overflow-x: auto;
         font-size: 13px;
         font-family: Consolas, Monaco, monospace;
-        line-height: 26px;
+        line-height: 31px;
         white-space: pre-wrap;
         word-wrap: break-word;
         color: #fff;

package/site/pc/components/AppHeader.vue

@@ -61,15 +61,14 @@
 </template>
 
 <script lang="ts">
-// @ts-ignore
 import config from '@config'
-import { ref, computed } from 'vue'
+import { ref, computed, defineComponent } from 'vue'
 import { get } from 'lodash-es'
 import { getBrowserThemes, getPCLocationInfo, removeEmpty, setThemes, watchThemes } from '../../utils'
 import { useRouter } from 'vue-router'
 import type { Ref, ComputedRef } from 'vue'
 
-export default {
+export default defineComponent({
   name: 'AppHeader',
   props: {
     language: {
@@ -77,19 +76,19 @@ export default {
     },
   },
   setup() {
-    // config
     const title: Ref<string> = ref(get(config, 'title'))
     const logo: Ref<string> = ref(get(config, 'logo'))
+    const themesKey = get(config, 'themesKey')
     const languages: Ref<Record<string, string>> = ref(get(config, 'pc.header.i18n'))
     const github: Ref<Record<string, string>> = ref(get(config, 'pc.header.github'))
     const darkMode: Ref<Record<string, string>> = ref(get(config, 'pc.header.darkMode'))
-    const currentThemes = ref(getBrowserThemes())
+    const currentThemes = ref(getBrowserThemes(themesKey))
 
     const isOpenMenu: Ref<boolean> = ref(false)
     const router = useRouter()
     const nonEmptyLanguages: ComputedRef<Record<string, string>> = computed(() => removeEmpty(languages.value))
 
-    const handleLanguageChange = (language) => {
+    const handleLanguageChange = (language: string) => {
       const { menuName } = getPCLocationInfo()
       router.replace(`/${language}/${menuName}`)
       isOpenMenu.value = false
@@ -98,7 +97,7 @@ export default {
     const setCurrentThemes = (themes: 'themes' | 'darkThemes') => {
       currentThemes.value = themes
       setThemes(config, currentThemes.value)
-      window.localStorage.setItem('currentThemes', currentThemes.value)
+      window.localStorage.setItem(themesKey, currentThemes.value)
     }
 
     const getThemesMessage = () => ({ action: 'themesChange', from: 'pc', data: currentThemes.value })
@@ -106,7 +105,7 @@ export default {
     const toggleTheme = () => {
       setCurrentThemes(currentThemes.value === 'darkThemes' ? 'themes' : 'darkThemes')
       window.postMessage(getThemesMessage(), '*')
-      ;(document.getElementById('mobile') as HTMLIFrameElement).contentWindow.postMessage(getThemesMessage(), '*')
+      ;(document.getElementById('mobile') as HTMLIFrameElement).contentWindow!.postMessage(getThemesMessage(), '*')
     }
 
     watchThemes((themes, from) => {
@@ -129,7 +128,7 @@ export default {
       toggleTheme,
     }
   },
-}
+})
 </script>
 
 <style scoped lang="less">