fix(ui): button原型制作中 已完成基本type size color基本交互

affects: @varlet/cli, @varlet/ui

packages/varlet-cli/src/commands/dev.ts

@@ -10,6 +10,7 @@ import { VARLET_CONFIG } from '../shared/constant'
 
 export function runDevServer(port: number, config: any) {
 	const { host } = config.devServer
+  config.devServer.port = port
 	const server = new WebpackDevServer(webpack(config), config.devServer)
 
 	;(server as any).showStatus = function () {}

packages/varlet-ui/src/button/Button.vue

@@ -0,0 +1,38 @@
+<template>
+  <button
+    v-ripple="{ disabled }"
+    class="varlet-button varlet-elevation--3"
+    :class="[
+      `varlet-button--${type}`,
+      `varlet-button--${size}`,
+      block ? 'varlet--block' : 'varlet--inline',
+      round ? 'varlet-button--round': null,
+      disabled ? 'varlet-button--disabled': null
+    ]"
+    :style="{
+      'color': color,
+      'background': background
+    }"
+    :disabled="disabled"
+    @click="$emit('click')"
+  >
+    <slot/>
+  </button>
+</template>
+
+<script lang="ts">
+import Ripple from '../ripple'
+import { defineComponent } from 'vue'
+import { props, emits } from './propsEmits'
+
+export default defineComponent({
+  name: 'VarletButton',
+  directives: { Ripple },
+  props,
+  emits
+})
+</script>
+
+<style lang="less">
+@import "./button";
+</style>

packages/varlet-ui/src/button/__tests__/index.spec.js

@@ -0,0 +1,7 @@
+const Button = require('../../../cjs/button').default
+const { render } = require('@testing-library/vue')
+
+test('test button', async () => {
+  const wrapper = render(Button)
+  console.log(wrapper)
+})

packages/varlet-ui/src/button/button.less

@@ -0,0 +1,114 @@
+@import "../styles/var";
+@import "../styles/elevation";
+@import "../styles/common";
+
+@button-border-radius: 4px;
+
+@button-normal-width: 64px;
+@button-normal-height: 36px;
+@button-normal-padding: 3px 16px;
+
+@button-large-width: 78px;
+@button-large-height: 44px;
+@button-large-padding: 6px 20px;
+
+@button-small-width: 50px;
+@button-small-height: 28px;
+@button-small-padding: 2px 12px;
+
+@button-mini-width: 36px;
+@button-mini-height: 22px;
+@button-mini-padding: 1px 8px;
+
+@button-round-size: auto;
+@button-round-padding: 7px;
+
+@button-disabled-color: rgba(0,0,0,.26);
+@button-disabled-background-color: rgba(0,0,0,.12);
+
+.varlet-button {
+  justify-content: center;
+  align-items: center;
+  outline: none;
+  border: none;
+  line-height: 1.2;
+  border-radius: @button-border-radius;
+  user-select: none;
+  transition: box-shadow .2s;
+
+  &:active {
+    box-shadow:
+      0 3px 3px -2px @shadow-key-umbra-opacity,
+      0 3px 4px 0 @shadow-key-penumbra-opacity,
+      0 6px 8px 0 rgba(0, 0, 0, 0.24);
+  }
+
+  &--plain {
+    background-color: @color-background-base;
+  }
+
+  &--primary {
+    color: #fff;
+    background-color: @color-primary;
+  }
+
+  &--info {
+    color: #fff;
+    background-color: @color-info;
+  }
+
+  &--success {
+    color: #fff;
+    background-color: @color-success;
+  }
+
+  &--warning {
+    color: #fff;
+    background-color: @color-warning;
+  }
+
+  &--danger {
+    color: #fff;
+    background-color: @color-danger;
+  }
+
+  &--normal {
+    min-width: @button-normal-width;
+    min-height: @button-normal-height;
+    padding: @button-normal-padding;
+    font-size: @font-size-md;
+  }
+
+  &--large {
+    min-width: @button-large-width;
+    min-height: @button-large-height;
+    padding: @button-large-padding;
+    font-size: @font-size-lg;
+  }
+
+  &--small {
+    min-width: @button-small-width;
+    min-height: @button-small-height;
+    padding: @button-small-padding;
+    font-size: @font-size-sm;
+  }
+
+  &--mini {
+    min-width: @button-mini-width;
+    min-height: @button-mini-height;
+    padding: @button-mini-padding;
+    font-size: @font-size-xs;
+  }
+
+  &--round {
+    min-width: @button-round-size;
+    min-height: @button-round-size;
+    padding: @button-round-padding;
+    border-radius: 50%;
+  }
+
+  &--disabled {
+    background-color: @button-disabled-background-color;
+    color: @button-disabled-color;
+  }
+}

packages/varlet-ui/src/button/example/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="example">
+    <varlet-button class="example__button" type="plain" size="large">测试</varlet-button>
+
+    <varlet-button class="example__button" type="primary" size="large">测试</varlet-button>
+    <varlet-button class="example__button" type="primary" size="normal">测试</varlet-button>
+    <varlet-button class="example__button" type="primary" size="small">测试</varlet-button>
+    <varlet-button class="example__button" type="primary" size="mini">测试</varlet-button>
+
+    <varlet-button class="example__button" type="danger" size="large">测试</varlet-button>
+    <varlet-button class="example__button" type="danger">测试</varlet-button>
+    <varlet-button class="example__button" type="danger" size="small">测试</varlet-button>
+    <varlet-button class="example__button" type="danger" size="mini">测试</varlet-button>
+
+    <varlet-button class="example__button" type="info" size="normal" block>测试测试测试测试测试测试测试测试</varlet-button>
+    <varlet-button class="example__button" type="warning" size="large" block>测试</varlet-button>
+
+    <varlet-button
+      class="example__button"
+      round
+    >
+      <img style="width: 40px; height: 40px" src="https://img.yzcdn.cn/vant/logo.png">
+    </varlet-button>
+
+    <varlet-button
+      class="example__button"
+      block
+      type="warning"
+      size="large"
+      background="rgb(114, 50, 221)"
+      color="rgb(255,192,0)"
+      @click="trigger"
+    >
+      修改颜色
+    </varlet-button>
+
+    <varlet-button class="example__button" type="primary"  @click="trigger">切换状态</varlet-button>
+    <varlet-button class="example__button" type="plain" size="large" :disabled="disabled">{{ disabled ? '禁用' : '启用' }}</varlet-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, Ref } from 'vue'
+import Button from '..'
+
+export default defineComponent({
+  name: 'ButtonExample',
+  components: {
+    [Button.name]: Button
+  },
+  setup() {
+    const disabled: Ref<boolean> = ref(true)
+    return {
+      disabled,
+      trigger() {
+        disabled.value = !disabled.value
+      }
+    }
+  }
+})
+</script>
+
+<style lang="less">
+.example {
+  padding: 20px;
+
+  &__button {
+    margin-bottom: 20px;
+    margin-right: 20px;
+  }
+}
+</style>

packages/varlet-ui/src/button/index.ts

@@ -0,0 +1,7 @@
+import Button from './Button.vue'
+
+Button.install = function(app: any) {
+  app.component(Button.name, Button)
+}
+
+export default Button

packages/varlet-ui/src/button/propsEmits.ts

@@ -0,0 +1,51 @@
+function typeValidator(type: string): boolean {
+  const validTypes = ['plain', 'primary', 'info', 'success', 'warning', 'danger']
+
+  return validTypes.includes(type)
+}
+
+function sizeValidator(size: string): boolean {
+  const validSizes = ['normal', 'mini', 'small', 'large']
+
+  return validSizes.includes(size)
+}
+
+export const props = {
+  // 按钮类型
+  type: {
+    type: String,
+    default: 'plain',
+    validator: typeValidator
+  },
+  // 按钮尺寸
+  size: {
+    type: String,
+    default: 'normal',
+    validator: sizeValidator
+  },
+  // 原型按钮
+  round: {
+    type: Boolean,
+    default: false
+  },
+  // 块级元素
+  block: {
+    type: Boolean,
+    default: false
+  },
+  // 禁用按钮
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 按钮文字颜色
+  color: {
+    type: String
+  },
+  // 按钮背景颜色
+  background: {
+    type: String
+  }
+}
+
+export const emits = ['click']

packages/varlet-ui/src/ripple/index.ts

@@ -12,7 +12,8 @@ interface RippleStyles {
 }
 
 interface RippleOptions {
-  color?: string
+  color?: string,
+  disabled?: string
 }
 
 interface RippleHTMLElement extends HTMLElement {
@@ -39,6 +40,10 @@ function computeRippleStyles(element: RippleHTMLElement, event: TouchEvent): Rip
 }
 
 function createRipple(this: RippleHTMLElement, event: TouchEvent) {
+  if (this._ripple?.disabled) {
+    return
+  }
+
   const { x, y, centerX, centerY, size }: RippleStyles = computeRippleStyles(this, event)
 
   const ripple: RippleHTMLElement = document.createElement('div')
@@ -100,10 +105,6 @@ function unmounted(el: RippleHTMLElement) {
 }
 
 function updated(el: RippleHTMLElement, binding: DirectiveBinding<RippleOptions>) {
-  if (binding.value === binding.oldValue) {
-    return
-  }
-
   el._ripple = binding.value
 }
 
@@ -112,7 +113,7 @@ const Ripple: Directive & Plugin = {
   unmounted,
   updated,
   install(app: any) {
-    app.directive('VarletRipple', this)
+    app.directive('ripple', this)
   }
 }
 

packages/varlet-ui/src/styles/common.less

@@ -3,4 +3,12 @@
   &--hidden {
     overflow: hidden;
   }
+
+  &--block {
+    display: flex;
+  }
+
+  &--inline {
+    display: inline-flex;
+  }
 }