feat: add badge component

.storybook/preview.js

@@ -22,10 +22,18 @@ const Wrapper = (template) => {
  * @param {Story} content
  * @return {HTMLElement}
  */
-function CustomDecorator(content) {
-  const { template, installer } = content();
-  const app = createApp(Wrapper(template));
-  installer(app);
+function CustomDecorator(content, context) {
+  const templateOrComponent = content();
+  const app = typeof templateOrComponent === 'string'
+    ? createApp(Wrapper(templateOrComponent))
+    : createApp(templateOrComponent)
+
+  const installers = context?.parameters?.component
+  if (Array.isArray(installers)) {
+    installers.forEach(installer => installer(app))
+  } else {
+    installers?.(app)
+  }
   const entry = document.createElement('div');
   entry.className = 'element-plus-previewer';
   app.mount(entry);

packages/badge/__tests__/badge.spec.ts

@@ -0,0 +1,15 @@
+import {mount} from '@vue/test-utils'
+import Badge from '../src/index.vue'
+
+const AXIOM = 'Rem is the best girl'
+
+describe('Badge.vue', () => {
+  test('render test', () => {
+    const instance = mount(Badge, {
+      slots: {
+        default: AXIOM
+      },
+    })
+    expect(instance.text()).toEqual(AXIOM)
+  })
+})

packages/badge/doc/basic.vue

@@ -0,0 +1,21 @@
+<template>
+  <el-badge :value="12" class="item">
+    <el-button size="small">comments</el-button>
+  </el-badge>
+  <el-badge :value="3" class="item">
+    <el-button size="small">replies</el-button>
+  </el-badge>
+  <el-badge :value="1" class="item" type="primary">
+    <el-button size="small">comments</el-button>
+  </el-badge>
+  <el-badge :value="2" class="item" type="warning">
+    <el-button size="small">replies</el-button>
+  </el-badge>
+</template>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>

packages/badge/doc/index.stories.ts

@@ -0,0 +1,10 @@
+import Basic from './basic.vue'
+import ElBadge from '../index'
+import ElButton from '@element-plus/button'
+
+export default {
+  title: "Badge",
+  component: [ElButton, ElBadge]
+}
+
+export const BasicUsage = () => Basic

packages/badge/index.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue'
+import Badge from './src/index.vue'
+export default (app: App) => {
+  app.component(Badge.name, Badge)
+}

packages/badge/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@element-plus/badge",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@element-plus/button": "^0.0.0",
+    "@vue/test-utils": "^2.0.0-beta.0"
+  }
+}

packages/badge/src/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="el-badge">
+    <slot></slot>
+    <transition name="el-zoom-in-center">
+      <sup
+        v-show="!hidden && (content || content === 0 || isDot)"
+        v-text="content"
+        class="el-badge__content"
+        :class="[
+          'el-badge__content--' + type,
+          {
+            'is-fixed': $slots.default,
+            'is-dot': isDot
+          }
+        ]">
+      </sup>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import {computed} from 'vue'
+
+export default {
+  name: 'ElBadge',
+  props: {
+    value: [String, Number],
+    max: Number,
+    isDot: Boolean,
+    hidden: Boolean,
+    type: {
+      type: String,
+      validator(val) {
+        return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
+      }
+    }
+  },
+  setup(props) {
+    const content = computed(() => {
+      if (props.isDot) {
+        return
+      }
+      const {value, max} = props
+        if (typeof value === 'number' && typeof max === 'number') {
+          return max < value ? `${max}+` : value
+        }
+        return value
+    })
+    return {
+      content
+    }
+  }
+}
+</script>

packages/button/doc/index.stories.ts

@@ -2,11 +2,8 @@ import ElButton from '../index';
 
 export default {
   title: 'Button',
+  component: ElButton,
 };
 
-export const NormalButton = () => {
-  return { template: '<el-button>With Text</el-button>', installer: ElButton };
-};
-export const ButtonTwo = () => {
-  return { template: '<el-button>button two</el-button>', installer: ElButton };
-};
+export const NormalButton = () => '<el-button>With Text</el-button>'
+export const ButtonTwo = () => '<el-button>button two</el-button>'