@varlet/cli 1.27.20 → 2.0.0-alpha.1663742071515

package/site/components/button/Button.vue

@@ -1,17 +1,19 @@
 <template>
   <button
     v-ripple="{ disabled: disabled || !ripple }"
-    class="var-site-button var-site--box"
-    :class="[
-      `var-site-button--${size}`,
-      block ? 'var-site--flex var-site-button--block' : 'var-site--inline-flex',
-      disabled ? 'var-site-button--disabled' : null,
-      text ? `var-site-button--text-${type}` : `var-site-button--${type}`,
-      text ? 'var-site-button--text' : 'var-site-elevation--1',
-      text && disabled ? 'var-site-button--text-disabled' : null,
-      round ? 'var-site-button--round' : null,
-      outline ? 'var-site-button--outline' : null,
-    ]"
+    :class="
+      classes(
+        n(),
+        'var-site--box',
+        n(`--${size}`),
+        [block, `var-site--flex ${n('--block')}`, 'var-site--inline-flex'],
+        [disabled, n('--disabled')],
+        [text, `${n(`--text-${type}`)} ${n('--text')}`, `${n(`--${type}`)} var-site-elevation--2`],
+        [text && disabled, n('--text-disabled')],
+        [round, n('--round')],
+        [outline, n('--outline')]
+      )
+    "
     :style="{
       color: textColor,
       background: color,
@@ -20,14 +22,16 @@
     @click="handleClick"
     @touchstart="handleTouchstart"
   >
-    <var-site-loading
-      class="var-site-button__loading"
+    <var-loading
+      :class="n('loading')"
+      var-site-button-cover
+      :color="loadingColor"
       :type="loadingType"
       :size="loadingSize"
       :radius="loadingRadius"
-      v-if="loading"
+      v-if="loading || pending"
     />
-    <div class="var-site-button__content" :class="[loading ? 'var-site-button--hidden' : null]">
+    <div :class="classes(n('content'), [loading || pending, n('--hidden')])">
       <slot />
     </div>
   </button>
@@ -35,39 +39,57 @@
 
 <script lang="ts">
 import Ripple from '../ripple'
-import Loading from '../loading'
-import { defineComponent } from 'vue'
+import VarLoading from '../loading'
+import { defineComponent, ref } from 'vue'
 import { props } from './props'
+import { createNamespace } from '../utils/components'
+import type { Ref } from 'vue'
+
+const { n, classes } = createNamespace('button')
 
 export default defineComponent({
-  name: 'VarSiteButton',
+  name: 'VarButton',
   components: {
-    [Loading.name]: Loading,
+    VarLoading,
   },
   directives: { Ripple },
   props,
   setup(props) {
+    const pending: Ref<boolean> = ref(false)
+
+    const attemptAutoLoading = (result: any) => {
+      if (props.autoLoading) {
+        pending.value = true
+        Promise.resolve(result).finally(() => {
+          pending.value = false
+        })
+      }
+    }
+
     const handleClick = (e: Event) => {
       const { loading, disabled, onClick } = props
 
-      if (loading || disabled) {
+      if (!onClick || loading || disabled || pending.value) {
         return
       }
 
-      onClick?.(e)
+      attemptAutoLoading(onClick(e))
     }
 
     const handleTouchstart = (e: Event) => {
       const { loading, disabled, onTouchstart } = props
 
-      if (loading || disabled) {
+      if (!onTouchstart || loading || disabled || pending.value) {
         return
       }
 
-      onTouchstart?.(e)
+      attemptAutoLoading(onTouchstart(e))
     }
 
     return {
+      n,
+      classes,
+      pending,
       handleClick,
       handleTouchstart,
     }

package/site/components/button/button.less

@@ -5,7 +5,7 @@
 @site-button-warning-color: var(--site-color-warning);
 @site-button-info-color: var(--site-color-info);
 @site-button-disabled-color: var(--site-color-disabled);
-@site-button-disabled-text-color: #bdbdbd;
+@site-button-disabled-text-color: var(--site-color-text-disabled);
 @site-button-border-radius: 4px;
 @site-button-mini-padding: 0 9px;
 @site-button-small-padding: 0 11px;
@@ -44,22 +44,22 @@
   align-items: center;
   outline: none;
   border: none;
-  line-height: 1.2;
   border-radius: var(--site-button-border-radius);
   user-select: none;
   cursor: pointer;
   font-family: inherit;
-  transition: box-shadow 0.2s;
+  transition: box-shadow 0.2s, background-color 0.25s;
   will-change: box-shadow;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   white-space: nowrap;
+  line-height: 1;
 
   &:active {
-    box-shadow: 0 3px 5px -1px var(--site-shadow-key-umbra-opacity), 0 5px 8px 0 var(--site-shadow-key-penumbra-opacity),
-      0 1px 14px 0 var(--site-shadow-key-ambient-opacity);
+    box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity),
+      0 1px 14px 0 var(--shadow-key-ambient-opacity);
   }
 
-  &__loading {
+  &__loading[var-site-button-cover] {
     position: absolute;
     top: 50%;
     left: 50%;

package/site/components/button/props.ts

@@ -55,16 +55,24 @@ export const props = {
   textColor: {
     type: String,
   },
+  autoLoading: {
+    type: Boolean,
+    default: false,
+  },
   loadingRadius: {
     type: [Number, String],
     default: 12,
   },
   loadingType: pickProps(loadingProps, 'type'),
   loadingSize: pickProps(loadingProps, 'size'),
+  loadingColor: {
+    ...pickProps(loadingProps, 'color'),
+    default: 'currentColor',
+  },
   onClick: {
-    type: Function as PropType<(e: Event) => void>,
+    type: Function as PropType<(e: Event) => void | Promise<any>>,
   },
   onTouchstart: {
-    type: Function as PropType<(e: Event) => void>,
+    type: Function as PropType<(e: Event) => void | Promise<any>>,
   },
 }

package/site/components/cell/Cell.vue

@@ -1,37 +1,49 @@
 <template>
-  <div class="var-site-cell" :class="[border ? 'var-site-cell--border' : null]">
-    <div class="var-site-cell__icon" :class="[iconClass ? iconClass : null]" v-if="$slots.icon || icon">
+  <div :class="classes(n(), [border, n('--border')])">
+    <div :class="classes(n('icon'), [iconClass, iconClass])" v-if="$slots.icon || icon">
       <slot name="icon">
-        <var-site-icon class="var-site--flex" :name="icon" />
+        <var-icon class="var--flex" :name="icon" />
       </slot>
     </div>
-    <div class="var-site-cell__content">
-      <div class="var-site-cell__title" :class="[titleClass ? titleClass : null]">
+    <div :class="n('content')">
+      <div :class="classes(n('title'), [titleClass, titleClass])">
         <slot>{{ title }}</slot>
       </div>
-      <div class="var-site-cell__desc" :class="[descClass ? descClass : null]" v-if="$slots.desc || desc">
-        <slot name="desc">
-          {{ desc }}
+      <div
+        :class="classes(n('description'), [descriptionClass, descriptionClass])"
+        v-if="$slots.description || description"
+      >
+        <slot name="description">
+          {{ description }}
         </slot>
       </div>
     </div>
-    <div class="var-site-cell__extra" :class="[extraClass ? extraClass : null]" v-if="$slots.extra">
+    <div :class="classes(n('extra'), [extraClass, extraClass])" v-if="$slots.extra">
       <slot name="extra" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
+import VarIcon from '../icon'
 import { defineComponent } from 'vue'
 import { props } from './props'
-import Icon from '../icon'
+import { createNamespace } from '../utils/components'
+
+const { n, classes } = createNamespace('cell')
 
 export default defineComponent({
-  name: 'VarSiteCell',
+  name: 'VarCell',
   components: {
-    [Icon.name]: Icon,
+    VarIcon,
   },
   props,
+  setup() {
+    return {
+      n,
+      classes,
+    }
+  },
 })
 </script>
 

package/site/components/cell/cell.less

@@ -1,6 +1,7 @@
+@site-cell-color: var(--site-color-text);
 @site-cell-font-size: var(--site-font-size-md);
-@site-cell-desc-font-size: var(--site-font-size-sm);
-@site-cell-desc-color: rgba(0, 0, 0, 0.6);
+@site-cell-description-font-size: var(--site-font-size-sm);
+@site-cell-description-color: rgba(0, 0, 0, 0.6);
 @site-cell-padding: 10px 12px;
 @site-cell-min-height: 40px;
 @site-cell-border-color: #bcc2cb;
@@ -10,9 +11,10 @@
 @site-cell-extra-left: 8px;
 
 :root {
+  --site-cell-color: @site-cell-color;
   --site-cell-font-size: @site-cell-font-size;
-  --site-cell-desc-font-size: @site-cell-desc-font-size;
-  --site-cell-desc-color: @site-cell-desc-color;
+  --site-cell-description-font-size: @site-cell-description-font-size;
+  --site-cell-description-color: @site-cell-description-color;
   --site-cell-padding: @site-cell-padding;
   --site-cell-min-height: @site-cell-min-height;
   --site-cell-border-color: @site-cell-border-color;
@@ -27,10 +29,12 @@
   display: flex;
   min-height: var(--site-cell-min-height);
   outline: none;
+  width: 100%;
   padding: var(--site-cell-padding);
   position: relative;
   box-sizing: border-box;
   font-size: var(--site-cell-font-size);
+  color: var(--site-cell-color);
 
   &--border {
     &::after {
@@ -62,9 +66,9 @@
     white-space: nowrap;
   }
 
-  &__desc {
-    font-size: var(--site-cell-desc-font-size);
-    color: var(--site-cell-desc-color);
+  &__description {
+    font-size: var(--site-cell-description-font-size);
+    color: var(--site-cell-description-color);
   }
 
   &__extra {

package/site/components/cell/props.ts

@@ -5,7 +5,7 @@ export const props = {
   icon: {
     type: String,
   },
-  desc: {
+  description: {
     type: String,
   },
   border: {
@@ -18,7 +18,7 @@ export const props = {
   titleClass: {
     type: String,
   },
-  descClass: {
+  descriptionClass: {
     type: String,
   },
   extraClass: {

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

@@ -1,23 +1,23 @@
 <template>
   <div class="var-site-code-example">
     <div class="var-site-code-example__toolbar">
-      <var-site-button text round @click="toggle" v-if="fold && !disabledFold">
-        <var-site-icon name="xml" size="18" />
-      </var-site-button>
+      <var-button text round @click="toggle" v-if="fold && !disabledFold">
+        <var-icon name="xml" size="18" />
+      </var-button>
 
-      <var-site-button
+      <var-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>
+        <var-icon name="content-copy" size="18" />
+      </var-button>
 
-      <var-site-button text round @click="toPlayground" v-if="playground">
-        <var-site-icon name="code-json" size="18" />
-      </var-site-button>
+      <var-button text round @click="toPlayground" v-if="playground">
+        <var-icon name="code-json" size="18" />
+      </var-button>
     </div>
     <div
       :id="`clip-target-${cid}`"
@@ -38,11 +38,12 @@ 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 { get } from 'lodash-es'
-import { getPCLocationInfo, utoa } from '../../utils'
+import { getBrowserTheme, getPCLocationInfo, utoa } from "../../utils";
 import type { Ref } from 'vue'
 
 let clipId = 0
@@ -94,21 +95,14 @@ export default defineComponent({
     }
 
     const toPlayground = () => {
-      const scriptStart = '<script setup>\n'
-      const scriptEnd = '<\/script>'
-      const injectImport = 'import { installVarletUI } from \'./varlet-repl-plugin.js\'\n'
-      const injectCall = '\ninstallVarletUI()\n'
-      let codeText = code.value?.innerText ?? ''
-
-      if (codeText.includes(scriptStart)) {
-        codeText = codeText.replace(scriptStart, `${scriptStart}${injectImport}`)
-        codeText = codeText.replace(scriptEnd, `${injectCall}${scriptEnd}`)
-      } else {
-        codeText = `${scriptStart}${injectImport}${injectCall}<\/script>\n\n${codeText}`
-      }
+      const codeText = code.value?.innerText ?? ''
 
       const file = { 'App.vue': codeText }
-      window.open(`${playground.value}/#${utoa(JSON.stringify(file))}`)
+
+      const initialTheme = getBrowserTheme().replace('Theme', '')
+
+      context.showPlayground = true
+      context.playgroundURL = `${playground.value}/?initialTheme=${initialTheme}#${utoa(JSON.stringify(file))}`
     }
 
     onMounted(() => {

package/site/components/context/index.ts

@@ -4,12 +4,16 @@ interface Context {
   locks: Record<any, number>
   zIndex: number
   touchmoveForbid: boolean
+  showPlayground: boolean,
+  playgroundURL: string
 }
 
 const context: Context = {
   locks: {},
   zIndex: 2000,
   touchmoveForbid: true,
+  showPlayground: false,
+  playgroundURL: ''
 }
 
 export const _ContextComponent = reactive<Context>(context)

package/site/components/context/lock.ts

@@ -17,85 +17,74 @@ export function releaseLock(uid: number) {
   resolveLock()
 }
 
-/**
- * 组件锁操作
- * @param props 组件props
- * @param state 组件props中控制组件加锁的开关对应的key值
- * @param use 组件props中控制组件加锁的开关是否可用对应的key值
- */
-export function useLock(props: any, state: string, use?: string) {
+export function useLock(source: any, useSource?: any) {
   const { uid } = getCurrentInstance() as ComponentInternalInstance
-  if (use) {
-    watch(
-      () => props[use],
-      (newValue: boolean) => {
-        if (newValue === false) {
-          // 改变为禁用状态 组件解锁
-          releaseLock(uid)
-        } else if (newValue === true && props[state] === true) {
-          // 改变为启用状态 并且popup处于开启状态 组件加锁
-          addLock(uid)
-        }
+
+  if (useSource) {
+    watch(useSource, (newValue: boolean) => {
+      if (newValue === false) {
+        // 改变为禁用状态 组件解锁
+        releaseLock(uid)
+      } else if (newValue === true && source() === true) {
+        // 改变为启用状态 并且popup处于开启状态 组件加锁
+        addLock(uid)
       }
-    )
+    })
   }
 
-  watch(
-    () => props[state],
-    (newValue: boolean) => {
-      if (use && props[use] === false) {
-        return
-      }
+  watch(source, (newValue: boolean) => {
+    if (useSource && useSource() === false) {
+      return
+    }
 
-      if (newValue === true) {
-        // popup开启 组件加锁
-        addLock(uid)
-      } else {
-        // popup关闭 组件解锁
-        releaseLock(uid)
-      }
+    if (newValue === true) {
+      // popup开启 组件加锁
+      addLock(uid)
+    } else {
+      // popup关闭 组件解锁
+      releaseLock(uid)
     }
-  )
+  })
 
   onBeforeMount(() => {
-    if (use && props[use] === false) {
+    if (useSource && useSource() === false) {
       return
     }
 
-    if (props[state] === true) {
+    if (source() === true) {
       // popup处于开启状态 组件挂载 组件加锁
       addLock(uid)
     }
   })
 
   onUnmounted(() => {
-    if (use && props[use] === false) {
+    if (useSource && useSource() === false) {
       return
     }
 
-    if (props[state] === true) {
+    if (source() === true) {
       // popup处于开启状态 组件卸载 组件解锁
       releaseLock(uid)
     }
   })
 
   onActivated(() => {
-    if (use && props[use] === false) {
+    if (useSource && useSource() === false) {
       return
     }
 
-    if (props[state] === true) {
+    if (source() === true) {
       // popup处于开启状态 组件处于keepalive前台 组件加锁
       addLock(uid)
     }
   })
 
   onDeactivated(() => {
-    if (use && props[use] === false) {
+    if (useSource && useSource() === false) {
       return
     }
 
-    if (props[state] === true) {
+    if (source() === true) {
       // popup处于开启状态 组件处于keepalive后台 组件解锁
       releaseLock(uid)
     }

package/site/components/icon/Icon.vue

@@ -1,15 +1,17 @@
 <template>
   <component
-    class="var-site-icon"
     :is="isURL(name) ? 'img' : 'i'"
-    :class="[
-      `${namespace}--set`,
-      isURL(name) ? 'var-site-icon__image' : `${namespace}-${nextName}`,
-      shrinking ? 'var-site-icon--shrinking' : null,
-    ]"
+    :class="
+      classes(
+        n(),
+        `${namespace}--set`,
+        [isURL(name), n('image'), `${namespace}-${nextName}`],
+        [shrinking, n('--shrinking')]
+      )
+    "
     :style="{
       color,
-      transition: `all ${toNumber(transition)}ms`,
+      transition: `transform ${toNumber(transition)}ms`,
       width: isURL(name) ? toSizeUnit(size) : null,
       height: isURL(name) ? toSizeUnit(size) : null,
       fontSize: toSizeUnit(size),
@@ -22,12 +24,15 @@
 <script lang="ts">
 import { defineComponent, watch, ref, nextTick } from 'vue'
 import { isURL, toNumber } from '@varlet/shared'
-import { toSizeUnit } from '../utils/elements'
 import { props } from './props'
+import { toSizeUnit } from '../utils/elements'
 import type { Ref } from 'vue'
+import { createNamespace } from '../utils/components'
+
+const { n, classes } = createNamespace('icon')
 
 export default defineComponent({
-  name: 'VarSiteIcon',
+  name: 'VarIcon',
   props,
   setup(props) {
     const nextName: Ref<string | undefined> = ref('')
@@ -52,6 +57,8 @@ export default defineComponent({
     watch(() => props.name, handleNameChange, { immediate: true })
 
     return {
+      n,
+      classes,
       nextName,
       shrinking,
       isURL,