@varlet/cli 1.23.11 → 1.23.12-alpha.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.23.11",
+  "version": "1.23.12-alpha.25+4a1d7746",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -31,7 +31,7 @@
     "dev": "tsc --watch",
     "build": "tsc"
   },
-  "gitHead": "449df88f0ff65a2ad89fa48a5d443ab864bd0bb3",
+  "gitHead": "4a1d774686bd66a53827bfb64a8495be97f9cf33",
   "dependencies": {
     "@babel/core": "^7.14.8",
     "@babel/preset-env": "^7.14.8",

package/site/components/code-example/CodeExample.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="var-site-code-example">
+    <div class="var-site-code-example__toolbar">
+      <var-site-button text round @click="toggle" v-if="fold">
+        <var-site-icon name="xml" size="18" />
+      </var-site-button>
+
+      <var-site-button
+        :id="`clip-trigger-${cid}`"
+        :data-clipboard-target="`#clip-target-${cid}`"
+        text
+        round
+        v-if="clipboard"
+      >
+        <var-site-icon name="content-copy" size="18" />
+      </var-site-button>
+    </div>
+    <div
+      :id="`clip-target-${cid}`"
+      class="var-site-code-example__code"
+      ref="code"
+      :style="{
+        height: height >= 0 ? `${height}px` : undefined,
+      }"
+      >
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Icon from '../icon'
+import Button from '../button'
+import Snackbar from '../snackbar'
+import Clipboard from 'clipboard'
+import config from '@config'
+import { defineComponent, nextTick, ref, onMounted } from 'vue'
+import { doubleRaf } from '../utils/elements'
+import { get } from 'lodash-es'
+import { getPCLocationInfo } from '../../utils'
+import type { Ref } from 'vue'
+
+let clipId = 0
+const offset = 10
+
+export default defineComponent({
+  name: 'VarSiteCodeExample',
+  components: {
+    [Button.name]: Button,
+    [Icon.name]: Icon
+  },
+  setup() {
+    const code: Ref<HTMLElement | null> = ref(null)
+    const cid: Ref<number> = ref(clipId++)
+    const fold: Ref = ref(get(config, 'pc.fold'))
+    const clipboard: Ref = ref(get(config, 'pc.clipboard', {}))
+    const height: Ref<number> = ref(fold.value?.defaultFold ? fold.value?.foldHeight : -1)
+
+    const toggle = async () => {
+      const foldHeight = fold.value.foldHeight
+
+      if (height.value === foldHeight) {
+        height.value = -1
+        await nextTick()
+        const { offsetHeight } = code.value as HTMLElement
+
+        height.value = foldHeight
+        await doubleRaf()
+
+        if (offsetHeight - foldHeight < offset) {
+          Snackbar(get(config, `pc.fold.message.${getPCLocationInfo().language}`))
+          height.value = foldHeight
+        } else {
+          height.value = offsetHeight
+        }
+      } else {
+        const { offsetHeight } = code.value as HTMLElement
+
+        height.value = offsetHeight
+        await doubleRaf()
+        height.value = foldHeight
+      }
+    }
+
+    onMounted(() => {
+      const trigger = new Clipboard(`#clip-trigger-${cid.value}`)
+
+      trigger.on('success', () => {
+        Snackbar.success(clipboard.value[getPCLocationInfo().language])
+      })
+    })
+
+    return {
+      code,
+      height,
+      cid,
+      fold,
+      clipboard,
+      toggle
+    }
+  }
+})
+</script>
+
+<style lang="less">
+@import "./codeExample";
+</style>

package/site/components/code-example/codeExample.less

@@ -0,0 +1,23 @@
+.var-site-code-example {
+  margin-top: 12px;
+  position: relative;
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    z-index: 1;
+    right: 10px;
+    top: 20px;
+
+    button {
+      color: white !important;
+    }
+  }
+
+  &__code {
+    transition: all .25s;
+    overflow: hidden;
+    border-radius: 4px;
+  }
+}

package/site/components/code-example/index.ts

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

package/site/components/icon/icon.less

@@ -12,6 +12,7 @@
   align-items: center;
   font-size: var(--site-icon-size);
   color: inherit;
+  vertical-align: bottom;
 
   &--shrinking {
     transform: scale(0);

package/site/components/loading/props.ts

@@ -1,8 +1,8 @@
 import type { PropType } from 'vue'
 
-type LoadingType = 'circle' | 'wave' | 'cube' | 'rect' | 'disappear'
+export type LoadingType = 'circle' | 'wave' | 'cube' | 'rect' | 'disappear'
 
-type LoadingSize = 'normal' | 'mini' | 'small' | 'large'
+export type LoadingSize = 'normal' | 'mini' | 'small' | 'large'
 
 export function typeValidator(type: string): boolean {
   return ['circle', 'wave', 'cube', 'rect', 'disappear'].includes(type)

package/site/components/snackbar/Snackbar.vue

@@ -0,0 +1,38 @@
+<template>
+  <teleport :to="teleport" :disabled="disabled">
+    <transition name="var-site-snackbar-fade" @after-enter="onOpened" @after-leave="onClosed">
+      <var-site-snackbar-core v-bind="$props" class="var-site-snackbar-transition">
+        <slot>{{ content }}</slot>
+        <template #action>
+          <slot name="action" />
+        </template>
+      </var-site-snackbar-core>
+    </transition>
+  </teleport>
+</template>
+
+<script>
+import VarSiteSnackbarCore from './core'
+import { defineComponent } from 'vue'
+import { useTeleport } from '../utils/components'
+import { props } from './props'
+
+export default defineComponent({
+  name: 'VarSiteSnackbar',
+  components: {
+    VarSiteSnackbarCore,
+  },
+  props,
+  setup() {
+    const { disabled } = useTeleport()
+
+    return {
+      disabled,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+</style>

package/site/components/snackbar/core.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="var-site-snackbar" :style="{ pointerEvents: isForbidClick ? 'auto' : 'none', zIndex }" v-show="show">
+    <div :class="snackbarClass" :style="{ zIndex }">
+      <div class="var-site-snackbar__content" :class="[contentClass]">
+        <slot>{{ content }}</slot>
+      </div>
+      <div class="var-site-snackbar__action">
+        <var-site-icon v-if="iconName" :name="iconName" />
+        <var-site-loading v-if="type === 'loading'" :type="loadingType" :size="loadingSize" />
+        <slot name="action" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, ref, onMounted, computed } from 'vue'
+import VarSiteLoading from '../loading'
+import VarSiteIcon from '../icon'
+import { useZIndex } from '../context/zIndex'
+import { props } from './props'
+import { useLock } from '../context/lock'
+import { SNACKBAR_TYPE } from './index'
+import type { Ref, ComputedRef } from 'vue'
+import type { SnackbarType } from './index'
+
+const ICON_TYPE_DICT: Record<SnackbarType, string> = {
+  success: 'checkbox-marked-circle',
+  warning: 'warning',
+  info: 'information',
+  error: 'error',
+  loading: '',
+}
+
+export default defineComponent({
+  name: 'VarSiteSnackbarCore',
+  components: {
+    VarSiteLoading,
+    VarSiteIcon,
+  },
+  props,
+  setup(props) {
+    const timer: Ref = ref(null)
+    const { zIndex } = useZIndex(() => props.show, 1)
+
+    useLock(props, 'show', 'lockScroll')
+
+    const snackbarClass: ComputedRef<string> = computed(() => {
+      const { position, vertical, type } = props
+
+      const baseClass = `var-site-snackbar__wrapper var-site-snackbar__wrapper-${position} var-site-elevation--4`
+      const verticalClass = vertical ? ' var-site-snackbar__vertical' : ''
+      const typeClass = type && SNACKBAR_TYPE.includes(type) ? ` var-site-snackbar__wrapper-${type}` : ''
+
+      return `${baseClass}${verticalClass}${typeClass}`
+    })
+
+    const isForbidClick: ComputedRef<boolean> = computed(() => props.type === 'loading' || props.forbidClick)
+
+    const iconName: ComputedRef<string> = computed(() => {
+      if (!props.type) return ''
+
+      return ICON_TYPE_DICT[props.type]
+    })
+
+    const updateAfterDuration = () => {
+      timer.value = setTimeout(() => {
+        props.type !== 'loading' && props['onUpdate:show']?.(false)
+      }, props.duration)
+    }
+
+    watch(
+      () => props.show,
+      (show) => {
+        if (show) {
+          props.onOpen?.()
+          updateAfterDuration()
+        } else if (show === false) {
+          clearTimeout(timer.value)
+          props.onClose?.()
+        }
+      }
+    )
+
+    watch(
+      () => props._update,
+      () => {
+        clearTimeout(timer.value)
+        updateAfterDuration()
+      }
+    )
+
+    onMounted(() => {
+      if (props.show) {
+        props.onOpen?.()
+        updateAfterDuration()
+      }
+    })
+
+    return {
+      zIndex,
+      snackbarClass,
+      iconName,
+      isForbidClick,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import '../styles/elevation';
+@import '../loading/loading';
+@import '../button/button';
+@import '../icon/icon';
+@import './snackbar';
+</style>

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

@@ -1,5 +1,6 @@
 import { isNumber, isString, toNumber, kebabCase } from './shared'
 import type { StyleVars } from '../../utils'
+import { requestAnimationFrame } from '@varlet/ui/src/utils/elements'
 
 export function getLeft(element: HTMLElement): number {
   const { left } = element.getBoundingClientRect()
@@ -81,3 +82,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">

package/site/pc/components/AppSidebar.vue

@@ -27,12 +27,12 @@
 // @ts-ignore
 import config from '@config'
 import { MenuTypes } from '../../utils'
-import { reactive, ref } from 'vue'
+import { reactive, ref, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import type { Menu } from '../App'
+import type { Menu } from '../App.vue'
 import { get } from 'lodash-es'
 
-export default {
+export default defineComponent({
   name: 'AppSidebar',
   props: {
     menu: {
@@ -50,7 +50,7 @@ export default {
     const menuTypes = reactive(MenuTypes)
     const themes = ref(get(config, 'themes'))
 
-    const changeRoute = (item) => {
+    const changeRoute = (item: Menu) => {
       if (item.type === MenuTypes.TITLE || props.menuName === item.doc) {
         return
       }
@@ -64,7 +64,7 @@ export default {
       changeRoute
     }
   }
-}
+})
 </script>
 
 <style scoped lang="less">

package/site/pc/main.ts

@@ -1,13 +1,14 @@
 import App from './App.vue'
 import '@varlet/touch-emulator'
-// @ts-ignore
 import routes from '@pc-routes'
-// @ts-ignore
 import config from '@config'
 
 import Icon from '../components/icon'
 import Cell from '../components/cell'
 import Ripple from '../components/ripple'
+import CodeExample from '../components/code-example'
+import Snackbar from '../components/snackbar'
+
 import '../components/styles/common.less'
 import '../components/styles/elevation.less'
 
@@ -20,6 +21,8 @@ const defaultLanguage = get(config, 'defaultLanguage')
 const redirect = get(config, 'pc.redirect')
 const mobileRedirect = get(config, 'mobile.redirect')
 
+Snackbar.allowMultiple(true)
+
 redirect &&
   routes.push({
     path: '/:pathMatch(.*)*',
@@ -85,4 +88,7 @@ createApp(App)
   .use(Ripple)
   // @ts-ignore
   .use(Icon)
+  // @ts-ignore
+  .use(CodeExample)
+  .use(Snackbar)
   .mount('#app')

package/site/tsconfig.json

@@ -1,16 +1,11 @@
 {
   "compilerOptions": {
-    "outDir": "./lib",
     "target": "es5",
-    "module": "commonjs",
-    "sourceMap": false,
     "strict": true,
     "downlevelIteration": true,
-    "declaration": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "jsx": "preserve",
     "lib": ["esnext", "dom"]
-  },
-  "include": ["*"]
+  }
 }

package/site/useProgress.ts

@@ -7,11 +7,15 @@ import { getBrowserThemes, mountInstance, watchThemes } from './utils'
 import { get } from 'lodash-es'
 
 function getColor(themes?: 'themes' | 'darkThemes') {
-  return get(config, `${themes ?? getBrowserThemes()}.color-progress`)
+  const themesKey = get(config, 'themesKey')
+
+  return get(config, `${themes ?? getBrowserThemes(themesKey)}.color-progress`)
 }
 
 function getTrackColor(themes?: 'themes' | 'darkThemes') {
-  return get(config, `${themes ?? getBrowserThemes()}.color-progress-track`)
+  const themesKey = get(config, 'themesKey')
+
+  return get(config, `${themes ?? getBrowserThemes(themesKey)}.color-progress-track`)
 }
 
 export function useProgress() {

package/site/utils.ts

@@ -1,6 +1,7 @@
 import { onMounted, onUnmounted } from 'vue'
 import { get } from 'lodash-es'
 import { formatStyleVars } from './components/utils/elements'
+import config from '@config'
 
 export * from './components/utils/components'
 export * from './components/utils/elements'
@@ -138,12 +139,12 @@ export function setThemes(config: Record<string, any>, name: 'themes' | 'darkThe
   StyleProvider(styleVars)
 }
 
-export function getBrowserThemes(): 'darkThemes' | 'themes' {
-  let currentThemes = window.localStorage.getItem('currentThemes') as 'darkThemes' | 'themes'
+export function getBrowserThemes(themes = 'VARLET_THEMES'): 'darkThemes' | 'themes' {
+  let currentThemes = window.localStorage.getItem(themes) as 'darkThemes' | 'themes'
 
   if (!currentThemes) {
     currentThemes = window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'darkThemes' : 'themes'
-    window.localStorage.setItem('currentThemes', currentThemes)
+    window.localStorage.setItem(themes, currentThemes)
   }
 
   return currentThemes

package/tsconfig.json

@@ -2,8 +2,6 @@
   "compilerOptions": {
     "outDir": "./lib",
     "target": "es5",
-    "module": "commonjs",
-    "sourceMap": false,
     "strict": true,
     "downlevelIteration": true,
     "declaration": true,

package/varlet.default.config.js

@@ -4,6 +4,7 @@ module.exports = {
   host: 'localhost',
   port: 8080,
   title: 'VARLET',
+  themesKey: 'VARLET_THEMES',
   logo: 'https://varlet.gitee.io/varlet-ui/varlet_icon.png',
   defaultLanguage: 'zh-CN',
   highlight: {
@@ -31,6 +32,18 @@ module.exports = {
       github: 'https://github.com/haoziqaq/varlet',
       darkMode: true,
     },
+    clipboard: {
+      'zh-CN': '代码已复制到剪切板',
+      'en-US': 'The code has been copied to the clipboard',
+    },
+    fold: {
+      message: {
+        'zh-CN': '已显示完整代码',
+        'en-US': 'Complete code displayed',
+      },
+      defaultFold: true,
+      foldHeight: 60,
+    },
   },
   mobile: {
     redirect: '/home',