@varlet/cli 1.27.20 → 2.0.0-alpha.1663742071515

package/site/pc/Layout.vue

@@ -1,12 +1,13 @@
-<script lang="ts">
+<script lang="ts" setup>
 import config from '@config'
 import AppMobile from './components/AppMobile.vue'
 import AppHeader from './components/AppHeader.vue'
 import AppSidebar from './components/AppSidebar.vue'
-import { defineComponent, nextTick, onMounted, ref, watch } from 'vue'
+import context from '../components/context'
+import { nextTick, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { get } from 'lodash-es'
-import { getPCLocationInfo, MenuTypes } from '../utils'
+import { getPCLocationInfo, MenuTypes } from "../utils";
 import type { Ref } from 'vue'
 
 export interface Menu {
@@ -15,81 +16,80 @@ export interface Menu {
   type: MenuTypes
 }
 
-export default defineComponent({
-  components: {
-    AppMobile,
-    AppHeader,
-    AppSidebar
-  },
-  setup() {
-    const menu: Ref<Menu[]> = ref(get(config, 'pc.menu', []))
-    const useMobile = ref(get(config, 'useMobile'))
-    const mobileRedirect = get(config, 'mobile.redirect')
-
-    const language: Ref<string> = ref('')
-    const componentName: Ref<null | string> = ref(null)
-    const menuName: Ref<string> = ref('')
-    const doc: Ref<HTMLElement | null> = ref(null)
-    const route = useRoute()
-
-    const getComponentNameByMenuName = (menuName: string) => {
-      const currentMenu = menu.value.find(menu => menu.doc === menuName)
-      return currentMenu?.type === MenuTypes.COMPONENT ? menuName : mobileRedirect.slice(1)
-    }
+const menu: Ref<Menu[]> = ref(get(config, 'pc.menu', []))
+const useMobile = ref(get(config, 'useMobile'))
+const mobileRedirect = get(config, 'mobile.redirect')
 
-    const init = () => {
-      const { menuName } = getPCLocationInfo()
+const language: Ref<string> = ref('')
+const componentName: Ref<null | string> = ref(null)
+const menuName: Ref<string> = ref('')
+const doc: Ref<HTMLElement | null> = ref(null)
+const route = useRoute()
 
-      nextTick(() => {
-        const children = document
-          .querySelector('.varlet-site-sidebar')!
-          .getElementsByClassName('var-site-cell')
-        const index = menu.value.findIndex((item) => item.doc === menuName)
+const getComponentNameByMenuName = (menuName: string) => {
+  const currentMenu = menu.value.find(menu => menu.doc === menuName)
+  return currentMenu?.type === MenuTypes.COMPONENT ? menuName : mobileRedirect.slice(1)
+}
 
-        if (index !== -1) {
-          children[index].scrollIntoView({
-            block: 'center',
-            inline: 'start',
-          })
-        }
+const init = () => {
+  const { menuName } = getPCLocationInfo()
+
+  nextTick(() => {
+    const children = document
+      .querySelector('.varlet-site-sidebar')!
+      .getElementsByClassName('var-site-cell')
+    const index = menu.value.findIndex((item) => item.doc === menuName)
+
+    if (index !== -1) {
+      children[index].scrollIntoView({
+        block: 'center',
+        inline: 'start',
       })
     }
+  })
+}
 
-    const handleSidebarChange = (menu: Menu) => {
-      doc.value!.scrollTop = 0
-      componentName.value = getComponentNameByMenuName(menu.doc)
-      menuName.value = menu.doc
-    }
+const handleSidebarChange = (menu: Menu) => {
+  doc.value!.scrollTop = 0
+  componentName.value = getComponentNameByMenuName(menu.doc)
+  menuName.value = menu.doc
+}
 
-    onMounted(init)
+const confirmClose = () => {
+  if (!window.confirm('The code will no longer be saved after closing. Are you sure you want to close?')) {
+    return
+  }
 
-    watch(
-      () => route.path,
-      () => {
-        const { language: lang, menuName: _menuName } = getPCLocationInfo()
-        if (!lang || !_menuName) {
-          return
-        }
+  context.showPlayground = false
+}
 
-        componentName.value = getComponentNameByMenuName(_menuName)
-        menuName.value = _menuName
-        language.value = lang
-        document.title = get(config, 'pc.title')[lang] as string
-      },
-      { immediate: true }
-    )
-
-    return {
-      menu,
-      language,
-      componentName,
-      menuName,
-      doc,
-      useMobile,
-      handleSidebarChange,
+onMounted(() => {
+  init()
+
+  window.addEventListener('message', (event) => {
+    const { data } = event
+
+    if (data.action === 'playground-close') {
+      confirmClose()
     }
-  },
+  })
 })
+
+watch(
+  () => route.path,
+  () => {
+    const { language: lang, menuName: _menuName } = getPCLocationInfo()
+    if (!lang || !_menuName) {
+      return
+    }
+
+    componentName.value = getComponentNameByMenuName(_menuName)
+    menuName.value = _menuName
+    language.value = lang
+    document.title = get(config, 'pc.title')[lang] as string
+  },
+  { immediate: true }
+)
 </script>
 
 <template>
@@ -120,9 +120,34 @@ export default defineComponent({
       />
     </div>
   </div>
+
+  <var-popup
+    position="right"
+    :show="context.showPlayground"
+    @click-overlay="confirmClose"
+  >
+    <div class="varlet-site-playground-container">
+      <iframe id="playground" class="varlet-site-playground-iframe" :src="context.playgroundURL" frameborder="0"></iframe>
+    </div>
+  </var-popup>
 </template>
 
 <style>
+.varlet-site-playground-container {
+  width: calc(100vw - 256px);
+  max-width: 1360px;
+  height: 100vh;
+}
+
+.varlet-site-playground-iframe {
+  width: 100%;
+  height: 100%;
+}
+
+.var-site-popup__content {
+  background-color: rgba(0, 0, 0, 0)
+}
+
 .hljs {
   background: var(--site-config-color-hl-background) !important;
   padding: 0 !important;
@@ -230,6 +255,7 @@ iframe {
   &-site {
     min-width: 1200px;
     padding: 60px 0 0;
+
     &-content {
       display: flex;
       background: var(--site-config-color-body);

package/site/pc/components/AnimationBox.vue

@@ -1,30 +1,18 @@
 <script lang="ts">
-import { defineComponent, onMounted, onBeforeUnmount, onUnmounted, ref, useAttrs } from 'vue'
-import { animationBoxData, animationEl, animationElClientRect } from '../floating'
+import { defineComponent, onMounted, onUnmounted, ref, useAttrs } from 'vue'
+import { animationBoxData, animationEl, animationElClientRect, isMountedCount } from '../floating'
 
 export default defineComponent({
   name: 'AnimationBox',
   setup() {
-    const mutationObserver = ref<MutationObserver>()
     const varletLogoAnimationRef = ref<HTMLElement>()
     animationBoxData.attrs = useAttrs()
 
     onMounted(() => {
       animationEl.value = varletLogoAnimationRef.value
       animationElClientRect.value = varletLogoAnimationRef?.value?.getBoundingClientRect();
-      mutationObserver.value = new MutationObserver(() => {
-        animationElClientRect.value = varletLogoAnimationRef?.value?.getBoundingClientRect();
-      });
-      const logoContainer = varletLogoAnimationRef.value?.parentNode?.parentNode
-      mutationObserver.value.observe(logoContainer || document.body, {
-        attributes: true, 
-        subtree: true, 
-        childList:true 
-      });
-    })
 
-    onBeforeUnmount(() => {
-      mutationObserver.value?.disconnect();
+      isMountedCount.value <= 2 && (isMountedCount.value += 1)
     })
 
     onUnmounted(() => {

package/site/pc/components/AppHeader.vue

@@ -1,88 +1,8 @@
-<template>
-  <div class="varlet-site-header">
-    <div class="varlet-site-header__lead">
-      <animation-box class="varlet-site-header__logo"  @click="backRoot" />
-      <div class="varlet-site-header__title" v-if="title"  @click="backRoot">{{ title }}</div>
-    </div>
-
-    <div class="varlet-site-header__tail">
-      <div
-        class="varlet-site-header__versions"
-        @mouseenter="isOpenVersionsMenu = true"
-        @mouseleave="isOpenVersionsMenu = false"
-        v-if="versionItems"
-      >
-        <span style="font-size: 14px;">{{ currentVersion }}</span>
-        <var-site-icon name="chevron-down" />
-        <transition name="fade">
-          <div
-            class="varlet-site-header__animation-list varlet-site-header__animation-versions var-site-elevation--5"
-            v-show="isOpenVersionsMenu"
-            :style="{ pointerEvents: isOpenVersionsMenu ? 'auto' : 'none' }"
-          >
-            <var-site-cell
-              v-for="(value, key) in nonEmptyVersions"
-              v-ripple
-              :key="key"
-              :class="{ 'varlet-site-header__animation-list--active': currentVersion === key }"
-              @click="open(value)"
-            >{{ key }}
-            </var-site-cell>
-          </div>
-        </transition>
-      </div>
-
-      <a class="varlet-site-header__link" target="_blank" :href="playground" v-ripple v-if="playground">
-        <var-site-icon name="code-json" :size="24" />
-      </a>
-      <a class="varlet-site-header__link" target="_blank" :href="github" v-ripple v-if="github">
-        <var-site-icon name="github" :size="28" />
-      </a>
-      <div class="varlet-site-header__theme" v-ripple v-if="darkMode" @click="toggleTheme">
-        <var-site-icon
-          size="26px"
-          :name="currentThemes === 'themes' ? 'white-balance-sunny' : 'weather-night'"
-          :style="{
-            marginBottom: currentThemes === 'darkThemes' && '2px',
-            marginTop: currentThemes === 'themes' && '2px',
-          }"
-        />
-      </div>
-      <div
-        class="varlet-site-header__language"
-        @mouseenter="isOpenLanguageMenu = true"
-        @mouseleave="isOpenLanguageMenu = false"
-        v-if="languages"
-      >
-        <var-site-icon name="translate" size="26px" />
-        <var-site-icon name="chevron-down" />
-        <transition name="fade">
-          <div
-            class="varlet-site-header__animation-list var-site-elevation--5"
-            v-show="isOpenLanguageMenu"
-            :style="{ pointerEvents: isOpenLanguageMenu ? 'auto' : 'none' }"
-          >
-            <var-site-cell
-              v-for="(value, key) in nonEmptyLanguages"
-              v-ripple
-              :key="key"
-              :class="{ 'varlet-site-header__animation-list--active': language === key }"
-              @click="handleLanguageChange(key)"
-              >{{ value }}
-            </var-site-cell>
-          </div>
-        </transition>
-      </div>
-
-    </div>
-  </div>
-</template>
-
 <script lang="ts">
 import config from '@config'
 import { ref, computed, defineComponent } from 'vue'
 import { get } from 'lodash-es'
-import { getBrowserThemes, getPCLocationInfo, removeEmpty, setThemes, watchThemes } from '../../utils'
+import { getBrowserTheme, getPCLocationInfo, removeEmpty, setTheme, Theme, watchTheme } from "../../utils";
 import { useRouter } from 'vue-router'
 import AnimationBox from './AnimationBox.vue'
 import type { Ref, ComputedRef } from 'vue'
@@ -98,7 +18,6 @@ export default defineComponent({
   setup() {
     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 currentVersion: Ref<string> = ref(get(config, 'pc.header.version.current'))
     const versionItems: Ref<Record<string, string>> = ref(get(config, 'pc.header.version.items'))
@@ -106,7 +25,7 @@ export default defineComponent({
     const github: Ref<string> = ref(get(config, 'pc.header.github'))
     const redirect = get(config, 'pc.redirect')
     const darkMode: Ref<boolean> = ref(get(config, 'pc.header.darkMode'))
-    const currentThemes = ref(getBrowserThemes(themesKey))
+    const currentTheme = ref(getBrowserTheme())
 
     const isOpenLanguageMenu: Ref<boolean> = ref(false)
     const isOpenVersionsMenu: Ref<boolean> = ref(false)
@@ -125,18 +44,25 @@ export default defineComponent({
       isOpenLanguageMenu.value = false
     }
 
-    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 getThemesMessage = () => ({ action: 'themesChange', from: 'pc', data: currentThemes.value })
+    const getThemeMessage = () => ({ action: 'theme-change', from: 'pc', data: currentTheme.value })
 
     const toggleTheme = () => {
-      setCurrentThemes(currentThemes.value === 'darkThemes' ? 'themes' : 'darkThemes')
-      window.postMessage(getThemesMessage(), '*')
-      ;(document.getElementById('mobile') as HTMLIFrameElement).contentWindow!.postMessage(getThemesMessage(), '*')
+      setCurrentTheme(currentTheme.value === 'darkTheme' ? 'lightTheme' : 'darkTheme')
+
+      window.postMessage(getThemeMessage(), '*')
+      notifyThemeChange('mobile')
+    }
+
+    const notifyThemeChange = (target: 'mobile' | 'window') => {
+      const contentWindow = target === 'window' ? window : (document.getElementById(target) as HTMLIFrameElement).contentWindow!
+
+      contentWindow.postMessage(getThemeMessage(), '*')
     }
 
     const open = (value: string) => {
@@ -145,12 +71,19 @@ export default defineComponent({
       }, 350);
     }
 
-    watchThemes((themes, from) => {
-      from === 'mobile' && setCurrentThemes(themes)
+    watchTheme((theme, from) => {
+      if (from === 'mobile') {
+        setCurrentTheme(theme)
+      }
+
+      if (from === 'playground') {
+        setCurrentTheme(theme)
+        notifyThemeChange('mobile')
+      }
     })
 
-    setThemes(config, currentThemes.value)
-    window.postMessage(getThemesMessage(), '*')
+    setTheme(config, currentTheme.value)
+    notifyThemeChange('window')
 
     return {
       logo,
@@ -165,7 +98,7 @@ export default defineComponent({
       isOpenLanguageMenu,
       isOpenVersionsMenu,
       darkMode,
-      currentThemes,
+      currentTheme,
       open,
       backRoot,
       handleLanguageChange,
@@ -175,6 +108,86 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <div class="varlet-site-header">
+    <div class="varlet-site-header__lead">
+      <animation-box class="varlet-site-header__logo"  @click="backRoot" />
+      <div class="varlet-site-header__title" v-if="title"  @click="backRoot">{{ title }}</div>
+    </div>
+
+    <div class="varlet-site-header__tail">
+      <div
+        class="varlet-site-header__versions"
+        @mouseenter="isOpenVersionsMenu = true"
+        @mouseleave="isOpenVersionsMenu = false"
+        v-if="versionItems"
+      >
+        <span style="font-size: 14px;">{{ currentVersion }}</span>
+        <var-icon name="chevron-down" />
+        <transition name="fade">
+          <div
+            class="varlet-site-header__animation-list varlet-site-header__animation-versions var-site-elevation--5"
+            v-show="isOpenVersionsMenu"
+            :style="{ pointerEvents: isOpenVersionsMenu ? 'auto' : 'none' }"
+          >
+            <var-cell
+              v-for="(value, key) in nonEmptyVersions"
+              v-ripple
+              :key="key"
+              :class="{ 'varlet-site-header__animation-list--active': currentVersion === key }"
+              @click="open(value)"
+            >{{ key }}
+            </var-cell>
+          </div>
+        </transition>
+      </div>
+
+      <a class="varlet-site-header__link" target="_blank" :href="playground" v-ripple v-if="playground">
+        <var-icon name="code-json" :size="24" />
+      </a>
+      <a class="varlet-site-header__link" target="_blank" :href="github" v-ripple v-if="github">
+        <var-icon name="github" :size="28" />
+      </a>
+      <div class="varlet-site-header__theme" v-ripple v-if="darkMode" @click="toggleTheme">
+        <var-icon
+          size="26px"
+          :name="currentTheme === 'lightTheme' ? 'white-balance-sunny' : 'weather-night'"
+          :style="{
+            marginBottom: currentTheme === 'darkTheme' && '2px',
+            marginTop: currentTheme === 'lightTheme' && '2px',
+          }"
+        />
+      </div>
+      <div
+        class="varlet-site-header__language"
+        @mouseenter="isOpenLanguageMenu = true"
+        @mouseleave="isOpenLanguageMenu = false"
+        v-if="languages"
+      >
+        <var-icon name="translate" size="26px" />
+        <var-icon name="chevron-down" />
+        <transition name="fade">
+          <div
+            class="varlet-site-header__animation-list var-site-elevation--5"
+            v-show="isOpenLanguageMenu"
+            :style="{ pointerEvents: isOpenLanguageMenu ? 'auto' : 'none' }"
+          >
+            <var-cell
+              v-for="(value, key) in nonEmptyLanguages"
+              v-ripple
+              :key="key"
+              :class="{ 'varlet-site-header__animation-list--active': language === key }"
+              @click="handleLanguageChange(key)"
+              >{{ value }}
+            </var-cell>
+          </div>
+        </transition>
+      </div>
+
+    </div>
+  </div>
+</template>
+
 <style scoped lang="less">
 .fade-enter-active {
   animation-name: fade-in;
@@ -248,7 +261,7 @@ export default defineComponent({
     align-items: center;
   }
 
-  @media screen and (max-width: 400px) {
+  @media screen and (max-width: 562px) {
     &__tail {
       display: none;
     }

package/site/pc/components/AppMobile.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="varlet-site-mobile">
+  <div class="varlet-site-mobile varlet-site-mobile--375">
     <div class="varlet-site-mobile-content">
       <iframe id="mobile" :src="`./mobile.html#/${componentName}?language=${language}&platform=pc&replace=${replace}`"></iframe>
     </div>
@@ -26,7 +26,7 @@ export default {
 <style scoped lang="less">
 .varlet-site-mobile {
   position: sticky;
-  flex: 0 0 325px;
+  flex: 0 0 330px;
   top: 80px;
   height: calc(100vh - 100px);
   margin-right: 38px;
@@ -34,6 +34,12 @@ export default {
   box-shadow: 0 0 14px 6px var(--site-config-color-shadow);
   border-radius: 2px;
 
+  @media screen and (min-width: 1600px) {
+    &--375 {
+      flex: 0 0 375px;
+    }
+  }
+
   &-content {
     width: 100%;
     height: 100%;

package/site/pc/components/AppSidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="varlet-site-sidebar var-elevation--3">
-    <var-site-cell
+    <var-cell
       class="varlet-site-sidebar__item"
       :id="item.doc"
       :class="{
@@ -11,25 +11,23 @@
       :key="index"
       v-for="(item, index) in menu"
       v-ripple="{
-        touchmoveForbid: false,
         disabled: item.type === menuTypes.TITLE,
-        color: themes['color-side-bar']
       }"
       @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__indicator"></span>
+      <span class="varlet-site-sidebar__item--title" v-if="item.type === menuTypes.TITLE">{{ item.text[language]
+        }}</span>
       <span v-else>{{ item.text[language] }}</span>
-    </var-site-cell>
+    </var-cell>
   </div>
 </template>
 
 <script lang="ts">
-import config from '@config'
 import { MenuTypes } from '../../utils'
-import { reactive, ref, defineComponent } from 'vue'
+import { reactive, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import type { Menu } from '../Layout.vue'
-import { get } from 'lodash-es'
 
 export default defineComponent({
   name: 'AppSidebar',
@@ -47,7 +45,6 @@ export default defineComponent({
   emits: ['change'],
   setup(props, { emit }) {
     const menuTypes = reactive(MenuTypes)
-    const themes = ref(get(config, 'themes'))
 
     const changeRoute = (item: Menu) => {
       if (item.type === MenuTypes.TITLE || props.menuName === item.doc) {
@@ -59,7 +56,6 @@ export default defineComponent({
 
     return {
       menuTypes,
-      themes,
       changeRoute
     }
   }
@@ -67,6 +63,18 @@ export default defineComponent({
 </script>
 
 <style scoped lang="less">
+@keyframes indicator-fade-in {
+  from {
+    transform: scaleY(0);
+    opacity: .3;
+  }
+
+  to {
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+
 .varlet-site-sidebar {
   padding: 0 0 15px;
   position: fixed;
@@ -112,6 +120,7 @@ export default defineComponent({
         height: 40px;
         position: absolute;
         left: 0;
+        animation: indicator-fade-in .25s;
       }
     }
   }