@varlet/cli 1.22.0-alpha.6 → 1.22.0-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/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 />
@@ -107,6 +107,10 @@ export default defineComponent({
 </script>
 
 <style lang="less">
+* {
+  -webkit-font-smoothing: antialiased;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -130,7 +134,7 @@ header {
 }
 
 .app-bar {
-  background: var(--site-color-app-bar) !important;
+  background: var(--site-config-color-app-bar) !important;
 }
 
 .router-view__block {
@@ -146,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>
@@ -112,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

@@ -7,13 +7,14 @@ 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 '@varlet/ui/es/icon/style'
-import '@varlet/ui/es/app-bar/style'
-import '@varlet/ui/es/button/style'
-import '@varlet/ui/es/menu/style'
-import '@varlet/ui/es/cell/style'
-import '@varlet/ui/es/ripple/style'
+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'
@@ -61,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/pc/App.vue

@@ -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>
@@ -124,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;
 
@@ -200,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;

package/site/pc/components/AppSidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="varlet-site-sidebar var-elevation--3">
-    <var-cell
+    <var-site-cell
       class="varlet-site-sidebar__item"
       :class="{
         'varlet-site-sidebar__item--active': item.doc === menuName,
@@ -17,15 +17,14 @@
       @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__item--link" v-else>{{ item.text[language] }}</span>
-    </var-cell>
+      <span v-else>{{ item.text[language] }}</span>
+    </var-site-cell>
   </div>
 </template>
 
 <script lang="ts">
 // @ts-ignore
 import config from '@config'
-import '@varlet/ui/es/styles/elevation.less'
 import { MenuTypes } from '../../utils'
 import { reactive, ref } from 'vue'
 import type { PropType } from 'vue'
@@ -70,9 +69,9 @@ export default {
 <style scoped lang="less">
 .varlet-site-sidebar {
   padding: 0 0 15px;
-  position: sticky;
-  flex: 0 0 220px;
-  top: 0;
+  position: fixed;
+  width: 220px;
+  top: 60px;
   bottom: 0;
   left: 0;
   z-index: 1;
@@ -97,28 +96,18 @@ export default {
       padding: 8px 0 8px;
     }
 
-    &--link {
-      font-size: 14px;
-      color: #455a64;
-      transition: color 0.2s;
-
-      &:hover {
-        color: var(--site-color-side-bar);
-      }
-    }
-
     &--active {
       position: relative;
-      background: var(--site-color-side-bar-active-background);
+      background: var(--site-config-color-side-bar-active-background);
 
       span {
-        color: var(--site-color-side-bar);
+        color: var(--site-config-color-side-bar);
       }
 
       &::before {
         display: block;
         content: '';
-        background: var(--site-color-side-bar);
+        background: var(--site-config-color-side-bar);
         width: 4px;
         height: 40px;
         position: absolute;
@@ -129,6 +118,13 @@ export default {
 
   &__link {
     cursor: pointer;
+    font-size: 14px;
+    color: #455a64;
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--site-config-color-side-bar);
+    }
   }
 
   &__title {

package/site/pc/main.ts

@@ -5,10 +5,11 @@ import routes from '@pc-routes'
 // @ts-ignore
 import config from '@config'
 
-import { Cell, Ripple, Icon } from '@varlet/ui'
-import '@varlet/ui/es/cell/style'
-import '@varlet/ui/es/ripple/style'
-import '@varlet/ui/es/icon/style'
+import Icon from '../components/icon'
+import Cell from '../components/cell'
+import Ripple from '../components/ripple'
+import '../components/styles/common.less'
+import '../components/styles/elevation.less'
 
 import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
@@ -68,7 +69,9 @@ Object.defineProperty(window, 'onMobileRouteChange', {
 
 createApp(App)
   .use(router)
+  // @ts-ignore
   .use(Cell)
   .use(Ripple)
+  // @ts-ignore
   .use(Icon)
   .mount('#app')

package/site/useProgress.ts

@@ -1,12 +1,16 @@
+import Progress from './components/progress'
 import { reactive } from 'vue'
-import { Progress } from '@varlet/ui'
 // @ts-ignore
 import config from '@config'
 // @ts-ignore
-import { mountInstance } from '@varlet/ui/es/utils/components'
+import { mountInstance } from './utils'
 import { get } from 'lodash-es'
 
 export function useProgress() {
+  let timer: number
+  const trackColor = get(config, 'themes.color-progress-track')
+  const color = get(config, 'themes.color-progress')
+
   const props = reactive({
     style: {
       position: 'fixed',
@@ -15,14 +19,12 @@ export function useProgress() {
       top: 0,
       zIndex: 10086,
     },
-    trackColor: '#fff',
-    color: get(config, 'themes.color-progress'),
+    trackColor,
+    color,
     lineWidth: 3,
     value: 0,
   })
 
-  let timer: number
-
   const changeValue = () => {
     timer = window.setTimeout(() => {
       if (props.value >= 95) return
@@ -37,13 +39,13 @@ export function useProgress() {
 
   const start = () => {
     props.value = 0
-    setTimeout(() => (props.color = '#3594d9'), 200)
+    setTimeout(() => (props.color = color), 200)
     changeValue()
   }
 
   const end = () => {
     props.value = 100
-    setTimeout(() => (props.color = '#fff'), 300)
+    setTimeout(() => (props.color = trackColor), 300)
     window.clearTimeout(timer)
   }