Merge pull request #29 from element-plus/feat/badge

feat: add badge component

.gitignore

@@ -2,3 +2,4 @@ node_modules
 .DS_Store
 dist
 *.local
+lerna-debug.json

.storybook/preview.js

@@ -1,6 +1,8 @@
 import { addDecorator } from '@storybook/html';
 import { createApp } from 'vue';
 import '../src/style/element-ui@2.13.2.css';
+import install from '../packages/element-plus'
+
 /**
  * Wraps a story into a Vue Element
  * @param {JSX.Element} template - Story templates
@@ -22,10 +24,12 @@ 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)
+  install(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,7 @@
+import Basic from './basic.vue'
+
+export default {
+  title: "Badge",
+}
+
+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

@@ -1,12 +1,6 @@
-import ElButton from '../index';
-
 export default {
   title: 'Button',
 };
 
-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>'

packages/element-plus/README.md

@@ -0,0 +1,11 @@
+# `element-plus`
+
+> TODO: description
+
+## Usage
+
+```
+const elementPlus = require('element-plus');
+
+// TODO: DEMONSTRATE API
+```

packages/element-plus/index.ts

@@ -0,0 +1,12 @@
+import type { App } from 'vue'
+import ElButton from '@element-plus/button'
+import ElBadge from '@element-plus/badge'
+
+export {
+  ElButton, ElBadge,
+}
+
+export default function install(app: App) {
+  ElButton(app)
+  ElBadge(app)
+}

packages/element-plus/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "element-plus",
+  "version": "0.0.1",
+  "description": "> TODO: description",
+  "author": "Herrington Darkholme <2883231+HerringtonDarkholme@users.noreply.github.com>",
+  "homepage": "https://github.com/element-plus/element-plus#readme",
+  "license": "ISC",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/element-plus/element-plus.git"
+  },
+  "bugs": {
+    "url": "https://github.com/element-plus/element-plus/issues"
+  },
+  "dependencies": {
+    "@element-plus/badge": "^0.0.0",
+    "@element-plus/button": "^0.0.0"
+  }
+}