@varlet/cli 2.15.1 → 2.16.0-alpha.1693852004525

package/site/pc/Layout.vue

@@ -3,20 +3,20 @@ import config from '@config'
 import AppMobile from './components/AppMobile.vue'
 import AppHeader from './components/AppHeader.vue'
 import AppSidebar from './components/AppSidebar.vue'
-import context from '../components/context'
-import { nextTick, onMounted, ref, watch } from 'vue'
+import { Context } from '@varlet/ui'
+import { nextTick, onMounted, ref, watch, type Ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { get } from 'lodash-es'
 import { getPCLocationInfo } from '@varlet/cli/client'
 import { MenuTypes, type Menu } from '../utils'
-import type { Ref } from 'vue'
+import { type SiteContext } from '../types'
 
+const context = Context as SiteContext
 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 componentName: Ref<string | undefined> = ref()
 const menuName: Ref<string> = ref('')
 const hash: Ref<string> = ref('')
 const doc: Ref<HTMLElement | null> = ref(null)
@@ -33,7 +33,7 @@ const init = () => {
   nextTick(() => {
     const children = document
       .querySelector('.varlet-site-sidebar')!
-      .getElementsByClassName('var-site-cell')
+      .getElementsByClassName('var-cell')
     const index = menu.value.findIndex((item) => item.doc === menuName)
 
     if (index !== -1) {
@@ -133,28 +133,13 @@ watch(
     @click-overlay="confirmClose"
   >
     <div class="varlet-site-playground-container">
-      <iframe id="playground" class="varlet-site-playground-iframe" :src="context.playgroundURL" allow="clipboard-write">
+      <iframe v-if="context.showPlayground" id="playground" class="varlet-site-playground-iframe" :src="context.playgroundURL" allow="clipboard-write">
       </iframe>
     </div>
   </var-popup>
 </template>
 
-<style>
-.varlet-site-playground-container {
-  width: calc(100vw - 256px);
-  max-width: 1660px;
-  height: 100vh;
-}
-
-.varlet-site-playground-iframe {
-  width: 100%;
-  height: 100%;
-}
-
-.var-site-popup__content {
-  background-color: rgba(0, 0, 0, 0)
-}
-
+<style lang="less">
 .hljs {
   background: var(--site-config-color-hl-background) !important;
   padding: 0 !important;
@@ -200,6 +185,10 @@ watch(
 .hljs-deletion, .hljs-number {
   color: var(--site-config-color-hl-group-i)
 }
+
+.var-popup__content {
+  background-color: rgba(0, 0, 0, 0)
+}
 </style>
 
 <style lang="less">
@@ -210,10 +199,6 @@ watch(
   white-space: pre-wrap;
 }
 
-* {
-  transition: background-color .25s, box-shadow .25s;
-}
-
 iframe {
   display: block;
   width: 100%;
@@ -266,7 +251,7 @@ iframe {
     &-content {
       display: flex;
       background: var(--site-config-color-body);
-      margin-left: 240px;
+      margin-left: 246px;
       min-height: calc(100vh - 60px);
     }
 
@@ -454,6 +439,17 @@ iframe {
         }
       }
     }
+
+    &-playground-container {
+      width: calc(100vw - 256px);
+      max-width: 1660px;
+      height: 100vh;
+    }
+
+    &-playground-iframe {
+      width: 100%;
+      height: 100%;
+    }
   }
 }
 </style>

package/site/pc/components/AppHeader.vue

@@ -1,6 +1,85 @@
+<template>
+  <div class="varlet-site-header">
+    <div class="varlet-site-header__lead">
+      <img class="varlet-site-header__logo" :src="config.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="nonEmptyVersions && Object.keys(nonEmptyVersions).length"
+      >
+        <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-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="26"/>
+        <var-icon name="chevron-down"/>
+        <transition name="fade">
+          <div
+            class="varlet-site-header__animation-list var-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>
+
 <script lang="ts">
 import config from '@config'
-import AnimationBox from './AnimationBox.vue'
 import { ref, computed, defineComponent } from 'vue'
 import { get } from 'lodash-es'
 import { getBrowserTheme, getPCLocationInfo, Theme, watchTheme } from '@varlet/cli/client'
@@ -11,7 +90,6 @@ import type { Ref, ComputedRef } from 'vue'
 
 export default defineComponent({
   name: 'AppHeader',
-  components: { AnimationBox },
   props: {
     language: {
       type: String,
@@ -89,6 +167,7 @@ export default defineComponent({
 
     return {
       logo,
+      config,
       title,
       currentVersion,
       languages,
@@ -110,119 +189,7 @@ 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="nonEmptyVersions && Object.keys(nonEmptyVersions).length"
-      >
-        <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;
-  animation-duration: 0.3s;
-}
-
-.fade-leave-active {
-  animation-name: fade-leave;
-  animation-duration: 0.3s;
-}
-
-@keyframes fade-in {
-  0% {
-    top: 30px;
-    opacity: 0;
-  }
-  100% {
-    top: 40px;
-    opacity: 1;
-  }
-}
-
-@keyframes fade-leave {
-  0% {
-    top: 40px;
-    opacity: 1;
-  }
-  100% {
-    top: 30px;
-    opacity: 0;
-  }
-}
-
+<style lang="less">
 .varlet-site-header {
   position: fixed;
   top: 0;
@@ -348,18 +315,18 @@ export default defineComponent({
     top: 40px;
     left: -20px;
 
-    .var-site-cell {
-      width: 100px;
+    .var-cell {
+      width: 100px !important;
+      color: var(--site-config-color-text);
 
-      &:hover {
-        background: var(--site-config-color-pc-language-active-background);
-        color: var(--site-config-color-pc-language-active);
+      &__content {
+        color: inherit !important;
       }
     }
 
     &--active {
-      background: var(--site-config-color-pc-language-active-background);
-      color: var(--site-config-color-pc-language-active);
+      background: var(--site-config-color-pc-language-active-background) !important;
+      color: var(--site-config-color-pc-language-active) !important;
     }
   }
 
@@ -368,3 +335,37 @@ export default defineComponent({
   }
 }
 </style>
+
+<style lang="less" scoped>
+.fade-enter-active {
+  animation-name: fade-in;
+  animation-duration: 0.3s;
+}
+
+.fade-leave-active {
+  animation-name: fade-leave;
+  animation-duration: 0.3s;
+}
+
+@keyframes fade-in {
+  0% {
+    top: 30px;
+    opacity: 0;
+  }
+  100% {
+    top: 40px;
+    opacity: 1;
+  }
+}
+
+@keyframes fade-leave {
+  0% {
+    top: 40px;
+    opacity: 1;
+  }
+  100% {
+    top: 30px;
+    opacity: 0;
+  }
+}
+</style>

package/site/pc/components/AppMobile.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'AppMobile',
   props: {
@@ -26,7 +26,7 @@ export default {
 }
 </script>
 
-<style scoped lang="less">
+<style lang="less">
 .varlet-site-mobile {
   position: sticky;
   flex: 0 0 330px;
@@ -59,5 +59,12 @@ export default {
       height: 100%;
     }
   }
+
+  iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
 }
 </style>

package/site/pc/components/AppSidebar.vue

@@ -38,7 +38,8 @@ export default defineComponent({
       type: String
     },
     language: {
-      type: String
+      type: String,
+      default: ''
     }
   },
   emits: ['change'],
@@ -61,7 +62,7 @@ export default defineComponent({
 })
 </script>
 
-<style scoped lang="less">
+<style lang="less">
 @keyframes indicator-fade-in {
   from {
     transform: scaleY(0);
@@ -77,7 +78,7 @@ export default defineComponent({
 .varlet-site-sidebar {
   padding: 0 0 15px;
   position: fixed;
-  width: 240px;
+  width: 246px;
   top: 60px;
   bottom: 0;
   left: 0;
@@ -91,16 +92,16 @@ export default defineComponent({
   }
 
   &__item {
-    margin: 0;
-    user-select: none;
-    padding: 10px 28px;
+    margin: 0 !important;
+    user-select: none !important;
+    padding: 10px 28px !important;
 
     &--title {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--site-config-color-text);
-      line-height: 28px;
-      padding: 8px 0 8px;
+      font-size: 16px !important;
+      font-weight: 600 !important;
+      color: var(--site-config-color-text) !important;
+      line-height: 28px !important;
+      padding: 8px 0 8px !important;
     }
 
     &--active {
@@ -125,18 +126,18 @@ export default defineComponent({
   }
 
   &__link {
-    cursor: pointer;
-    font-size: 14px;
-    color: var(--site-config-color-text);
-    transition: color 0.2s;
+    cursor: pointer !important;
+    font-size: 14px !important;
+    color: var(--site-config-color-text) !important;
+    transition: color 0.2s !important;
 
     &:hover {
-      color: var(--site-config-color-side-bar);
+      color: var(--site-config-color-side-bar) !important;
     }
   }
 
   &__title {
-    margin-top: 10px;
+    margin-top: 10px !important;
   }
 }
 </style>

package/site/{components → pc/components}/code-example/CodeExample.vue

@@ -34,28 +34,23 @@
 </template>
 
 <script lang="ts">
-import Icon from '../icon'
-import Button from '../button'
-import Snackbar from '../snackbar'
-import Clipboard from 'clipboard'
-import context from '../context'
 import config from '@config'
-import { defineComponent, nextTick, ref, onMounted } from 'vue'
-import { doubleRaf } from '../utils/elements'
+import Clipboard from 'clipboard'
+import { Context, Snackbar } from '@varlet/ui'
+import { defineComponent, nextTick, ref, onMounted, type Ref } from 'vue'
+import { doubleRaf } from '@varlet/shared'
 import { get } from 'lodash-es'
 import { getBrowserTheme, getPCLocationInfo } from '@varlet/cli/client'
-import { utoa } from '../../utils'
-import type { Ref } from 'vue'
+import { utoa } from '../../../utils'
+import { type SiteContext } from '../../../types'
+
+const context = Context as SiteContext
 
 let clipId = 0
 const offset = 10
 
 export default defineComponent({
   name: 'VarSiteCodeExample',
-  components: {
-    [Button.name]: Button,
-    [Icon.name]: Icon
-  },
   props: {
     playgroundIgnore: {
       type: Boolean,
@@ -97,9 +92,7 @@ export default defineComponent({
 
     const toPlayground = () => {
       const codeText = code.value?.innerText ?? ''
-
       const file = { 'App.vue': codeText }
-
       const initialTheme = getBrowserTheme().replace('Theme', '')
 
       context.showPlayground = true

package/site/pc/main.ts

@@ -1,23 +1,15 @@
 import App from './App.vue'
-import '@varlet/touch-emulator'
 import routes from '@pc-routes'
 import config from '@config'
-
-import Icon from '../components/icon'
-import Cell from '../components/cell'
-import Ripple from '../components/ripple'
-import Button from '../components/button'
-import Popup from '../components/popup'
-import CodeExample from '../components/code-example'
-import Snackbar from '../components/snackbar'
-
-import '../components/styles/common.less'
-import '../components/styles/elevation.less'
-
+import Varlet, { Snackbar } from '@varlet/ui'
+import CodeExample from './components/code-example'
 import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { get } from 'lodash-es'
 
+import '@varlet/ui/es/style'
+import '@varlet/touch-emulator'
+
 const defaultLanguage = get(config, 'defaultLanguage')
 const redirect = get(config, 'pc.redirect')
 const mobileRedirect = get(config, 'mobile.redirect')
@@ -83,17 +75,8 @@ Object.defineProperty(window, 'scrollToMenu', {
 })
 
 createApp(App)
+  .use(Varlet)
   .use(router)
   // @ts-ignore
-  .use(Cell)
-  .use(Ripple)
-  // @ts-ignore
-  .use(Icon)
-  // @ts-ignore
   .use(CodeExample)
-  .use(Snackbar)
-  // @ts-ignore
-  .use(Popup)
-  // @ts-ignore
-  .use(Button)
   .mount('#app')