@varlet/cli 1.27.20 → 2.0.0-alpha.1663499244572

package/site/components/button/Button.vue

@@ -1,84 +1,106 @@
-<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,
-    ]"
-    :style="{
-      color: textColor,
-      background: color,
-    }"
-    :disabled="disabled"
-    @click="handleClick"
-    @touchstart="handleTouchstart"
-  >
-    <var-site-loading
-      class="var-site-button__loading"
-      :type="loadingType"
-      :size="loadingSize"
-      :radius="loadingRadius"
-      v-if="loading"
-    />
-    <div class="var-site-button__content" :class="[loading ? 'var-site-button--hidden' : null]">
-      <slot />
-    </div>
-  </button>
-</template>
-
-<script lang="ts">
-import Ripple from '../ripple'
-import Loading from '../loading'
-import { defineComponent } from 'vue'
-import { props } from './props'
-
-export default defineComponent({
-  name: 'VarSiteButton',
-  components: {
-    [Loading.name]: Loading,
-  },
-  directives: { Ripple },
-  props,
-  setup(props) {
-    const handleClick = (e: Event) => {
-      const { loading, disabled, onClick } = props
-
-      if (loading || disabled) {
-        return
-      }
-
-      onClick?.(e)
-    }
-
-    const handleTouchstart = (e: Event) => {
-      const { loading, disabled, onTouchstart } = props
-
-      if (loading || disabled) {
-        return
-      }
-
-      onTouchstart?.(e)
-    }
-
-    return {
-      handleClick,
-      handleTouchstart,
-    }
-  },
-})
-</script>
-
-<style lang="less">
-@import '../styles/common';
-@import '../styles/elevation';
-@import '../ripple/ripple';
-@import '../loading/loading';
-@import './button';
-</style>
+<template>
+  <button
+    v-ripple="{ disabled: disabled || !ripple }"
+    :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,
+    }"
+    :disabled="disabled"
+    @click="handleClick"
+    @touchstart="handleTouchstart"
+  >
+    <var-loading
+      :class="n('loading')"
+      var-site-button-cover
+      :color="loadingColor"
+      :type="loadingType"
+      :size="loadingSize"
+      :radius="loadingRadius"
+      v-if="loading || pending"
+    />
+    <div :class="classes(n('content'), [loading || pending, n('--hidden')])">
+      <slot />
+    </div>
+  </button>
+</template>
+
+<script lang="ts">
+import Ripple from '../ripple'
+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: 'VarButton',
+  components: {
+    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 (!onClick || loading || disabled || pending.value) {
+        return
+      }
+
+      attemptAutoLoading(onClick(e))
+    }
+
+    const handleTouchstart = (e: Event) => {
+      const { loading, disabled, onTouchstart } = props
+
+      if (!onTouchstart || loading || disabled || pending.value) {
+        return
+      }
+
+      attemptAutoLoading(onTouchstart(e))
+    }
+
+    return {
+      n,
+      classes,
+      pending,
+      handleClick,
+      handleTouchstart,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import '../styles/elevation';
+@import '../ripple/ripple';
+@import '../loading/loading';
+@import './button';
+</style>

package/site/components/button/button.less

@@ -1,183 +1,183 @@
-@site-button-default-color: #f5f5f5;
-@site-button-primary-color: var(--site-color-primary);
-@site-button-danger-color: var(--site-color-danger);
-@site-button-success-color: var(--site-color-success);
-@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-border-radius: 4px;
-@site-button-mini-padding: 0 9px;
-@site-button-small-padding: 0 11px;
-@site-button-normal-padding: 0 15px;
-@site-button-large-padding: 0 22px;
-@site-button-round-padding: 6px;
-@site-button-mini-height: 20px;
-@site-button-small-height: 28px;
-@site-button-normal-height: 36px;
-@site-button-large-height: 44px;
-
-:root {
-  --site-button-default-color: @site-button-default-color;
-  --site-button-primary-color: @site-button-primary-color;
-  --site-button-danger-color: @site-button-danger-color;
-  --site-button-success-color: @site-button-success-color;
-  --site-button-warning-color: @site-button-warning-color;
-  --site-button-info-color: @site-button-info-color;
-  --site-button-disabled-color: @site-button-disabled-color;
-  --site-button-disabled-text-color: @site-button-disabled-text-color;
-  --site-button-border-radius: @site-button-border-radius;
-  --site-button-mini-padding: @site-button-mini-padding;
-  --site-button-small-padding: @site-button-small-padding;
-  --site-button-normal-padding: @site-button-normal-padding;
-  --site-button-large-padding: @site-button-large-padding;
-  --site-button-round-padding: @site-button-round-padding;
-  --site-button-mini-height: @site-button-mini-height;
-  --site-button-small-height: @site-button-small-height;
-  --site-button-normal-height: @site-button-normal-height;
-  --site-button-large-height: @site-button-large-height;
-}
-
-.var-site-button {
-  position: relative;
-  justify-content: center;
-  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;
-  will-change: box-shadow;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  white-space: nowrap;
-
-  &: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);
-  }
-
-  &__loading {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  &--default {
-    color: inherit;
-    background-color: var(--site-button-default-color);
-  }
-
-  &--primary {
-    color: #fff;
-    background-color: var(--site-button-primary-color);
-  }
-
-  &--info {
-    color: #fff;
-    background-color: var(--site-button-info-color);
-  }
-
-  &--success {
-    color: #fff;
-    background-color: var(--site-button-success-color);
-  }
-
-  &--warning {
-    color: #fff;
-    background-color: var(--site-button-warning-color);
-  }
-
-  &--danger {
-    color: #fff;
-    background-color: var(--site-button-danger-color);
-  }
-
-  &--disabled {
-    background-color: var(--site-button-disabled-color);
-    color: var(--site-button-disabled-text-color);
-    cursor: not-allowed;
-    box-shadow: none !important;
-  }
-
-  &--block {
-    width: 100%;
-  }
-
-  &--text {
-    background-color: transparent;
-
-    &:active {
-      box-shadow: none;
-    }
-  }
-
-  &--text-default {
-    color: inherit;
-  }
-
-  &--text-primary {
-    color: var(--site-button-primary-color);
-  }
-
-  &--text-info {
-    color: var(--site-button-info-color);
-  }
-
-  &--text-success {
-    color: var(--site-button-success-color);
-  }
-
-  &--text-warning {
-    color: var(--site-button-warning-color);
-  }
-
-  &--text-danger {
-    color: var(--site-button-danger-color);
-  }
-
-  &--text-disabled {
-    color: var(--site-button-disabled-text-color);
-  }
-
-  &--normal {
-    height: var(--site-button-normal-height);
-    padding: var(--site-button-normal-padding);
-    font-size: var(--site-font-size-md);
-  }
-
-  &--large {
-    height: var(--site-button-large-height);
-    padding: var(--site-button-large-padding);
-    font-size: var(--site-font-size-lg);
-  }
-
-  &--small {
-    height: var(--site-button-small-height);
-    padding: var(--site-button-small-padding);
-    font-size: var(--site-font-size-sm);
-  }
-
-  &--mini {
-    height: var(--site-button-mini-height);
-    padding: var(--site-button-mini-padding);
-    font-size: var(--site-font-size-xs);
-  }
-
-  &--round {
-    padding: var(--site-button-round-padding);
-    border-radius: 50%;
-    height: auto;
-  }
-
-  &--outline {
-    border: thin solid currentColor;
-  }
-
-  &--hidden {
-    opacity: 0;
-  }
-}
+@site-button-default-color: #f5f5f5;
+@site-button-primary-color: var(--site-color-primary);
+@site-button-danger-color: var(--site-color-danger);
+@site-button-success-color: var(--site-color-success);
+@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: var(--site-color-text-disabled);
+@site-button-border-radius: 4px;
+@site-button-mini-padding: 0 9px;
+@site-button-small-padding: 0 11px;
+@site-button-normal-padding: 0 15px;
+@site-button-large-padding: 0 22px;
+@site-button-round-padding: 6px;
+@site-button-mini-height: 20px;
+@site-button-small-height: 28px;
+@site-button-normal-height: 36px;
+@site-button-large-height: 44px;
+
+:root {
+  --site-button-default-color: @site-button-default-color;
+  --site-button-primary-color: @site-button-primary-color;
+  --site-button-danger-color: @site-button-danger-color;
+  --site-button-success-color: @site-button-success-color;
+  --site-button-warning-color: @site-button-warning-color;
+  --site-button-info-color: @site-button-info-color;
+  --site-button-disabled-color: @site-button-disabled-color;
+  --site-button-disabled-text-color: @site-button-disabled-text-color;
+  --site-button-border-radius: @site-button-border-radius;
+  --site-button-mini-padding: @site-button-mini-padding;
+  --site-button-small-padding: @site-button-small-padding;
+  --site-button-normal-padding: @site-button-normal-padding;
+  --site-button-large-padding: @site-button-large-padding;
+  --site-button-round-padding: @site-button-round-padding;
+  --site-button-mini-height: @site-button-mini-height;
+  --site-button-small-height: @site-button-small-height;
+  --site-button-normal-height: @site-button-normal-height;
+  --site-button-large-height: @site-button-large-height;
+}
+
+.var-site-button {
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  outline: none;
+  border: none;
+  border-radius: var(--site-button-border-radius);
+  user-select: none;
+  cursor: pointer;
+  font-family: inherit;
+  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(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity),
+      0 1px 14px 0 var(--shadow-key-ambient-opacity);
+  }
+
+  &__loading[var-site-button-cover] {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &--default {
+    color: inherit;
+    background-color: var(--site-button-default-color);
+  }
+
+  &--primary {
+    color: #fff;
+    background-color: var(--site-button-primary-color);
+  }
+
+  &--info {
+    color: #fff;
+    background-color: var(--site-button-info-color);
+  }
+
+  &--success {
+    color: #fff;
+    background-color: var(--site-button-success-color);
+  }
+
+  &--warning {
+    color: #fff;
+    background-color: var(--site-button-warning-color);
+  }
+
+  &--danger {
+    color: #fff;
+    background-color: var(--site-button-danger-color);
+  }
+
+  &--disabled {
+    background-color: var(--site-button-disabled-color);
+    color: var(--site-button-disabled-text-color);
+    cursor: not-allowed;
+    box-shadow: none !important;
+  }
+
+  &--block {
+    width: 100%;
+  }
+
+  &--text {
+    background-color: transparent;
+
+    &:active {
+      box-shadow: none;
+    }
+  }
+
+  &--text-default {
+    color: inherit;
+  }
+
+  &--text-primary {
+    color: var(--site-button-primary-color);
+  }
+
+  &--text-info {
+    color: var(--site-button-info-color);
+  }
+
+  &--text-success {
+    color: var(--site-button-success-color);
+  }
+
+  &--text-warning {
+    color: var(--site-button-warning-color);
+  }
+
+  &--text-danger {
+    color: var(--site-button-danger-color);
+  }
+
+  &--text-disabled {
+    color: var(--site-button-disabled-text-color);
+  }
+
+  &--normal {
+    height: var(--site-button-normal-height);
+    padding: var(--site-button-normal-padding);
+    font-size: var(--site-font-size-md);
+  }
+
+  &--large {
+    height: var(--site-button-large-height);
+    padding: var(--site-button-large-padding);
+    font-size: var(--site-font-size-lg);
+  }
+
+  &--small {
+    height: var(--site-button-small-height);
+    padding: var(--site-button-small-padding);
+    font-size: var(--site-font-size-sm);
+  }
+
+  &--mini {
+    height: var(--site-button-mini-height);
+    padding: var(--site-button-mini-padding);
+    font-size: var(--site-font-size-xs);
+  }
+
+  &--round {
+    padding: var(--site-button-round-padding);
+    border-radius: 50%;
+    height: auto;
+  }
+
+  &--outline {
+    border: thin solid currentColor;
+  }
+
+  &--hidden {
+    opacity: 0;
+  }
+}

package/site/components/button/index.ts

@@ -1,10 +1,10 @@
-import type { App } from 'vue'
-import Button from './Button.vue'
-
-Button.install = function (app: App) {
-  app.component(Button.name, Button)
-}
-
-export const _ButtonComponent = Button
-
-export default Button
+import type { App } from 'vue'
+import Button from './Button.vue'
+
+Button.install = function (app: App) {
+  app.component(Button.name, Button)
+}
+
+export const _ButtonComponent = Button
+
+export default Button