@varlet/cli 1.20.0 → 1.21.1-alpha.64

package/site/components/utils/components.ts

@@ -0,0 +1,53 @@
+import { createApp, h } from 'vue'
+import type { Component } from 'vue'
+
+export interface MountInstance {
+  instance: any
+  unmount: () => void
+}
+
+export function pickProps(props: any, propsKey: string): any
+export function pickProps(props: any, propsKey: string[]): any
+export function pickProps(props: any, propsKey: any): any {
+  return Array.isArray(propsKey)
+    ? propsKey.reduce((pickedProps: any, key) => {
+      pickedProps[key] = props[key]
+      return pickedProps
+    }, {})
+    : props[propsKey]
+}
+
+export function mount(component: Component): MountInstance {
+  const app = createApp(component)
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  return {
+    instance: app.mount(host),
+    unmount() {
+      app.unmount()
+      document.body.removeChild(host)
+    }
+  }
+}
+
+export function mountInstance(
+  component: any,
+  props: Record<string, any> = {},
+  eventListener: Record<string, any> = {}
+): {
+  unmountInstance: () => void
+} {
+  const Host = {
+    setup() {
+      return () =>
+        h(component, {
+          ...props,
+          ...eventListener
+        })
+    }
+  }
+
+  const { unmount } = mount(Host)
+  return { unmountInstance: unmount }
+}

package/site/components/utils/elements.ts

@@ -0,0 +1,83 @@
+import { isNumber, isString, toNumber, kebabCase } from './shared'
+import type { StyleVars } from '../../utils'
+
+export function getLeft(element: HTMLElement): number {
+  const { left } = element.getBoundingClientRect()
+
+  return left + (document.body.scrollLeft || document.documentElement.scrollLeft)
+}
+
+export function getTop(element: HTMLElement): number {
+  const { top } = element.getBoundingClientRect()
+
+  return top + (document.body.scrollTop || document.documentElement.scrollTop)
+}
+
+export const isRem = (value: unknown) => isString(value) && value.endsWith('rem')
+
+// example 1 || 1px
+export const isPx = (value: unknown) => (isString(value) && value.endsWith('px')) || isNumber(value)
+
+// example 1%
+export const isPercent = (value: unknown) => isString(value) && value.endsWith('%')
+
+// example 1vw
+export const isVw = (value: unknown) => isString(value) && value.endsWith('vw')
+
+// example 1vh
+export const isVh = (value: unknown) => isString(value) && value.endsWith('vh')
+
+// example return 1
+export const toPxNum = (value: unknown): number => {
+  if (isNumber(value)) {
+    return value
+  }
+
+  if (isPx(value)) {
+    return +(value as string).replace('px', '')
+  }
+
+  if (isVw(value)) {
+    return (+(value as string).replace('vw', '') * window.innerWidth) / 100
+  }
+
+  if (isVh(value)) {
+    return (+(value as string).replace('vh', '') * window.innerHeight) / 100
+  }
+
+  if (isRem(value)) {
+    const num = +(value as string).replace('rem', '')
+    const rootFontSize = window.getComputedStyle(document.documentElement).fontSize
+
+    return num * parseFloat(rootFontSize)
+  }
+
+  if (isString(value)) {
+    return toNumber(value)
+  }
+
+  // % and other
+  return 0
+}
+
+// example return 1px 1% 1vw 1vh 1rem null
+export const toSizeUnit = (value: unknown) => {
+  if (value == null) {
+    return null
+  }
+
+  if (isPercent(value) || isVw(value) || isVh(value) || isRem(value)) {
+    return value
+  }
+
+  return `${toPxNum(value)}px`
+}
+
+export function formatStyleVars(styleVars: StyleVars) {
+  return Object.entries(styleVars).reduce((styles, [key, value]) => {
+    const cssVar = key.startsWith('--') ? key : `--${kebabCase(key)}`
+    styles[cssVar] = value
+
+    return styles
+  }, {} as StyleVars)
+}

package/site/components/utils/shared.ts

@@ -0,0 +1,27 @@
+export const toNumber = (val: number | string | boolean | undefined | null): number => {
+  if (val == null) return 0
+
+  if (isString(val)) {
+    val = parseFloat(val)
+    val = Number.isNaN(val) ? 0 : val
+    return val
+  }
+
+  if (isBool(val)) return Number(val)
+
+  return val
+}
+
+export function kebabCase(str: string): string {
+  const reg = /([^-])([A-Z])/g
+
+  return str.replace(reg, '$1-$2').replace(reg, '$1-$2').toLowerCase()
+}
+
+export const isString = (val: unknown): val is string => typeof val === 'string'
+
+export const isBool = (val: unknown): val is boolean => typeof val === 'boolean'
+
+export const isNumber = (val: unknown): val is number => typeof val === 'number'
+
+export const isURL = (val: string) => /^(http)|(\.*\/)/.test(val)

package/site/{pc/index.html → index.html}

@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <title><%= htmlWebpackPlugin.options.title %></title>
+  <title><%= pcTitle %></title>
   <meta http-equiv="Cache-Control" content="no-cache">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Expires" content="0">
-  <link href="<%= htmlWebpackPlugin.options.logo %>" rel="icon" type="image/png" />
+  <link href="<%= logo %>" rel="icon" type="image/png" />
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
         name="viewport" />
   <style>
@@ -19,11 +19,11 @@
     }
   </style>
   <script>
-    if ('<%= htmlWebpackPlugin.options.baidu %>') {
+    if ('<%= baidu %>') {
       var _hmt = _hmt || [];
       (function() {
         var hm = document.createElement('script')
-        hm.src = '<%= htmlWebpackPlugin.options.baidu %>'
+        hm.src = '<%= baidu %>'
         var s = document.getElementsByTagName('script')[0]
         s.parentNode.insertBefore(hm, s)
       })()
@@ -32,5 +32,7 @@
 </head>
 <body>
 <div id="app"></div>
+
+<script type="module" src="/pc/main.ts"></script>
 </body>
 </html>

package/site/mobile/App.vue

@@ -1,31 +1,31 @@
 <template>
   <div style="position: relative">
     <header>
-      <var-app-bar
+      <var-site-app-bar
         class="app-bar"
         :title="bigCamelizeComponentName"
         title-position="center"
       >
         <template #left v-if="showBackIcon">
-          <var-button round @click="back" color="transparent" text-color="#fff" text>
-            <var-icon name="chevron-left" :size="28" />
-          </var-button>
+          <var-site-button round @click="back" color="transparent" text-color="#fff" text>
+            <var-site-icon name="chevron-left" :size="28" />
+          </var-site-button>
         </template>
         <template #right>
-          <var-menu
+          <var-site-menu
             style="background: transparent"
             :offset-y="38"
             v-model:show="showMenu"
             v-if="languages"
           >
-            <var-button text color="transparent" text-color="#fff" @click="showMenu = true">
-              <var-icon name="translate" :size="24" />
-              <var-icon name="chevron-down" :size="24" />
-            </var-button>
+            <var-site-button text color="transparent" text-color="#fff" @click="showMenu = true">
+              <var-site-icon name="translate" :size="24" />
+              <var-site-icon name="chevron-down" :size="24" />
+            </var-site-button>
 
             <template #menu>
               <div style="background: #fff">
-                <var-cell
+                <var-site-cell
                   v-for="(value, key) in nonEmptyLanguages"
                   :key="key"
                   class="mobile-language-cell"
@@ -34,12 +34,12 @@
                   @click="changeLanguage(key)"
                 >
                   {{ value }}
-                </var-cell>
+                </var-site-cell>
               </div>
             </template>
-          </var-menu>
+          </var-site-menu>
         </template>
-      </var-app-bar>
+      </var-site-app-bar>
     </header>
     <div class="router-view__block">
       <router-view />
@@ -53,7 +53,7 @@ import config from '@config'
 import { computed, ComputedRef, defineComponent, ref, Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { bigCamelize, removeEmpty, setThemes, watchLang } from '../utils'
-import { get } from 'lodash'
+import { get } from 'lodash-es'
 
 type Language = Record<string, string>
 
@@ -107,7 +107,9 @@ export default defineComponent({
 </script>
 
 <style lang="less">
-@import '~@varlet/ui/es/styles/var';
+* {
+  -webkit-font-smoothing: antialiased;
+}
 
 body {
   margin: 0;
@@ -132,7 +134,7 @@ header {
 }
 
 .app-bar {
-  background: var(--site-color-app-bar);
+  background: var(--site-config-color-app-bar) !important;
 }
 
 .router-view__block {
@@ -148,8 +150,8 @@ header {
   cursor: pointer;
 
   &--active {
-    color: var(--site-color-mobile-language-active);
-    background: var(--site-color-mobile-language-active-background);
+    color: var(--site-config-color-mobile-language-active);
+    background: var(--site-config-color-mobile-language-active-background);
   }
 }
 </style>

package/site/mobile/components/AppHome.vue

@@ -6,19 +6,19 @@
     </h1>
     <h2 class="varlet-home__desc">{{ description[lang] }}</h2>
   </div>
-  <var-cell
+  <var-site-cell
     v-for="component in components"
     :key="component.text"
     @click="toComponent(component)"
     v-ripple
   >
     <template #extra>
-      <var-icon name="chevron-right" size="14" />
+      <var-site-icon name="chevron-right" size="14" />
     </template>
     <template #default>
       {{ component.text[lang] }}
     </template>
-  </var-cell>
+  </var-site-cell>
 </template>
 
 <script>
@@ -72,8 +72,6 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import '~@varlet/ui/es/styles/var';
-
 .logo {
   height: 100px;
   padding-top: 30px;
@@ -114,15 +112,15 @@ export default {
   margin-left: 16px;
 }
 
-.var-cell {
+.var-site-cell {
   cursor: pointer;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   transition: all 0.3s;
   color: #555;
 
   &:hover {
-    color: var(--site-color-mobile-cell-hover);
-    background: var(--site-color-mobile-cell-hover-background);
+    color: var(--site-config-color-mobile-cell-hover);
+    background: var(--site-config-color-mobile-cell-hover-background);
   }
 }
 </style>

package/site/mobile/main.ts

@@ -6,8 +6,17 @@ import App from './App.vue'
 import '@varlet/touch-emulator'
 import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
-import { Icon, AppBar, Button, Menu, Cell, Ripple } from '@varlet/ui'
-import { get } from 'lodash'
+
+import Icon from '../components/icon'
+import AppBar from '../components/app-bar'
+import Button from '../components/button'
+import Menu from '../components/menu'
+import Cell from '../components/cell'
+import Ripple from '../components/ripple'
+import '../components/styles/common.less'
+import '../components/styles/elevation.less'
+
+import { get } from 'lodash-es'
 import { inIframe, isPhone } from '../utils'
 
 const redirect = get(config, 'mobile.redirect')
@@ -53,12 +62,18 @@ router.beforeEach((to, from) => {
   }
 })
 
+// @ts-ignore
 createApp(App)
   .use(router)
+  // @ts-ignore
   .use(Icon)
+  // @ts-ignore
   .use(AppBar)
+  // @ts-ignore
   .use(Cell)
   .use(Ripple)
+  // @ts-ignore
   .use(Button)
+  // @ts-ignore
   .use(Menu)
   .mount('#app')

package/site/{mobile/mobile.html → mobile.html}

@@ -2,12 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <title><%= htmlWebpackPlugin.options.title %></title>
+  <title><%= mobileTitle %></title>
   <meta http-equiv="Cache-Control" content="no-cache">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Expires" content="0">
-  <meta content="<%= htmlWebpackPlugin.options.description %>" name="description" />
-  <link href="<%= htmlWebpackPlugin.options.logo %>" rel="icon" type="image/png" />
+  <link href="<%= logo %>" rel="icon" type="image/png" />
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
         name="viewport" />
   <style>
@@ -20,11 +19,11 @@
     }
   </style>
   <script>
-    if ('<%= htmlWebpackPlugin.options.baidu %>') {
+    if ('<%= baidu %>') {
       var _hmt = _hmt || [];
       (function() {
         var hm = document.createElement('script')
-        hm.src = '<%= htmlWebpackPlugin.options.baidu %>'
+        hm.src = '<%= baidu %>'
         var s = document.getElementsByTagName('script')[0]
         s.parentNode.insertBefore(hm, s)
       })()
@@ -33,5 +32,7 @@
 </head>
 <body>
 <div id="app"></div>
+
+<script type="module" src="/mobile/main.ts"></script>
 </body>
 </html>

package/site/pc/App.vue

@@ -36,7 +36,7 @@ import AppHeader from './components/AppHeader'
 import AppSidebar from './components/AppSidebar'
 import { defineComponent, nextTick, onMounted, ref, Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { get } from 'lodash'
+import { get } from 'lodash-es'
 import { getPCLocationInfo, isPhone, MenuTypes, setThemes } from '../utils'
 
 type Language = Record<string, string>
@@ -82,7 +82,7 @@ export default defineComponent({
       nextTick(() => {
         const children = document
           .querySelector('.varlet-site-sidebar')
-          .getElementsByClassName('var-cell')
+          .getElementsByClassName('var-site-cell')
         const index = menu.value.findIndex((item) => item.doc === menuName)
 
         if (index !== -1) {
@@ -142,13 +142,17 @@ export default defineComponent({
 </style>
 
 <style lang="less">
-@import '~@varlet/ui/es/progress/progress';
-
 @doc-active: {
   display: inline;
   font-family: inherit;
   padding: 0 4px;
-  white-space: nowrap;
+  white-space: pre-wrap;
+}
+
+::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  background: transparent;
 }
 
 body {
@@ -172,7 +176,7 @@ iframe {
     align-items: center;
     margin: 20px 4px 20px;
     padding: 40px;
-    border-top: 7px solid var(--site-color-primary);
+    border-top: 7px solid var(--site-config-color-primary);
     border-radius: 4px;
     box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
 
@@ -199,9 +203,10 @@ iframe {
 
   &-site {
     &-content {
-      height: calc(100vh - 60px);
       display: flex;
       background: #fff;
+      margin-top: 60px;
+      margin-left: 220px;
     }
 
     &-doc-container {
@@ -222,7 +227,7 @@ iframe {
 
     &-doc {
       a {
-        color: var(--site-color-link);
+        color: var(--site-config-color-link);
         -webkit-font-smoothing: antialiased;
         word-break: keep-all;
         font-size: 15px;
@@ -295,7 +300,7 @@ iframe {
       table code {
         -webkit-font-smoothing: antialiased;
         word-break: keep-all;
-        color: var(--site-color-primary);
+        color: var(--site-config-color-primary);
         font-size: 15px;
         @doc-active();
       }
@@ -327,14 +332,14 @@ iframe {
           font-family: Consolas, Monaco, monospace;
 
           code {
-            white-space: nowrap;
+            white-space: pre-wrap;
             padding: 0;
             font-size: 13px;
           }
         }
 
         em {
-          color: var(--site-color-type);
+          color: var(--site-config-color-type);
           font-style: normal;
           -webkit-font-smoothing: antialiased;
           font-size: 13px;

package/site/pc/components/AppHeader.vue

@@ -12,15 +12,15 @@
         @mouseleave="isOpenMenu = false"
         v-if="languages"
       >
-        <var-icon name="translate" size="26px" color="#666" />
-        <var-icon name="chevron-down" color="#666" />
+        <var-site-icon name="translate" size="26px" color="#666" />
+        <var-site-icon name="chevron-down" color="#666" />
         <transition name="fade">
           <div
             class="varlet-site-header__language-list var-elevation--5"
             v-show="isOpenMenu"
             :style="{ pointerEvents: isOpenMenu ? 'auto' : 'none' }"
           >
-            <var-cell
+            <var-site-cell
               v-for="(value, key) in nonEmptyLanguages"
               v-ripple
               :key="key"
@@ -28,7 +28,7 @@
               @click="handleLanguageChange(key)"
             >
               {{ value }}
-            </var-cell>
+            </var-site-cell>
           </div>
         </transition>
       </div>
@@ -38,7 +38,7 @@
         :href="github"
         v-if="github"
       >
-        <var-icon name="github" color="#666" :size="28" />
+        <var-site-icon name="github" color="#666" :size="28" />
       </a>
     </div>
   </div>
@@ -48,7 +48,7 @@
 // @ts-ignore
 import config from '@config'
 import { ref, computed } from 'vue'
-import { get } from 'lodash'
+import { get } from 'lodash-es'
 import { getPCLocationInfo, removeEmpty } from '../../utils'
 import { useRouter } from 'vue-router'
 import type { Ref, ComputedRef } from 'vue'
@@ -91,8 +91,6 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import '~@varlet/ui/es/styles/var';
-
 .fade-enter-active {
   animation-name: fade-in;
   animation-duration: 0.3s;
@@ -126,15 +124,19 @@ export default {
 }
 
 .varlet-site-header {
+  position: fixed;
+  top: 0;
+  left: 0;
   display: flex;
   align-items: center;
   color: #555;
+  width: 100%;
   height: 60px;
   padding: 0 30px;
   justify-content: space-between;
   user-select: none;
-  position: relative;
-  z-index: 2;
+  z-index: 996;
+  background: #fff;
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   box-sizing: border-box;
 
@@ -202,13 +204,13 @@ export default {
     top: 40px;
     left: -20px;
 
-    .var-cell {
+    .var-site-cell {
       width: 100px;
     }
 
     &--active {
-      background: var(--site-color-pc-language-active-background);
-      color: var(--site-color-pc-language-active);
+      background: var(--site-config-color-pc-language-active-background);
+      color: var(--site-config-color-pc-language-active);
     }
   }
 }

package/site/pc/components/AppMobile.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="varlet-site-mobile var-elevation--3">
+  <div class="varlet-site-mobile var-site-elevation--3">
     <div class="varlet-site-mobile-content">
       <iframe :src="`./mobile.html#/${componentName}?language=${language}&platform=pc&replace=${replace}`"></iframe>
     </div>
@@ -25,10 +25,10 @@ export default {
 
 <style scoped lang="less">
 .varlet-site-mobile {
+  position: sticky;
   flex: 0 0 325px;
-  position: relative;
+  top: 80px;
   height: calc(100vh - 100px);
-  align-self: center;
   margin-right: 38px;
   overflow: hidden;
   border-radius: 8px;