feat(tag): add new feature check-tag (element-plus#1696)

* feat(tag): add new feature check-tag

- Add new component `check-tag`

* feat(tag): - add check tag vetur support

Author: jw-foss

packages/check-tag/__tests__/check-tag.spec.ts

@@ -0,0 +1,50 @@
+import { mount } from '@vue/test-utils'
+import CheckTag from '../src/index.vue'
+
+const AXIOM = 'Rem is the best girl'
+
+describe('CheckTag.vue', () => {
+  test('render test', async () => {
+    const wrapper = mount(CheckTag, {
+      slots: {
+        default: AXIOM,
+      },
+    })
+    expect(wrapper.text()).toEqual(AXIOM)
+
+    expect(wrapper.classes()).toContain('el-check-tag')
+  })
+
+
+  test('functionality', async () => {
+    const wrapper = mount({
+      template: `<el-check-tag @change="checked = !checked" :checked="checked">
+        ${AXIOM}
+      </el-check-tag>`,
+      components: {
+        'el-check-tag': CheckTag,
+      },
+      data() {
+        return {
+          checked: false,
+        }
+      },
+    }, {
+      slots: {
+        default: AXIOM,
+      },
+    })
+    expect(wrapper.text()).toEqual(AXIOM)
+
+    await wrapper.find('.el-check-tag').trigger('click')
+
+    expect(wrapper.vm.checked).toBe(true)
+
+    await wrapper.find('.el-check-tag').trigger('click')
+
+    expect(wrapper.vm.checked).toBe(false)
+
+  })
+
+
+})

packages/check-tag/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import CheckTag from './src/index.vue'
+import type { SFCWithInstall } from '@element-plus/utils/types'
+
+CheckTag.install = (app: App): void => {
+  app.component(CheckTag.name, CheckTag)
+}
+
+const _CheckTag: SFCWithInstall<typeof CheckTag> = CheckTag
+
+export default _CheckTag

packages/check-tag/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/check-tag",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.7"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}

packages/check-tag/src/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <span
+    :class="{
+      'el-check-tag': true,
+      'is-checked': checked,
+    }"
+    @click="onChange"
+  >
+    <slot></slot>
+  </span>
+</template>
+<script lang='ts'>
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'ElCheckTag',
+  props: {
+    checked: Boolean,
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+
+    const onChange = () => {
+      emit('change', !props.checked)
+    }
+
+    return {
+      onChange,
+    }
+  },
+})
+</script>
+<style scoped>
+</style>

packages/element-plus/index.ts

@@ -89,6 +89,8 @@ import ElVirtualList from '@element-plus/virtual-list'
 import ElSpace from '@element-plus/space'
 import ElSkeleton from '@element-plus/skeleton'
 import ElSkeletonItem from '@element-plus/skeleton-item'
+import ElCheckTag from '@element-plus/check-tag'
+
 import { use, i18n } from '@element-plus/locale'
 // if you encountered problems alike "Can't resolve './version'"
 // please run `yarn bootstrap` first
@@ -141,6 +143,7 @@ const components = [
   ElCheckbox,
   ElCheckboxButton,
   ElCheckboxGroup,
+  ElCheckTag,
   ElCol,
   ElCollapse,
   ElCollapseItem,
@@ -255,6 +258,7 @@ export {
   ElCheckbox,
   ElCheckboxButton,
   ElCheckboxGroup,
+  ElCheckTag,
   ElCol,
   ElCollapse,
   ElCollapseItem,

packages/theme-chalk/src/check-tag.scss

@@ -0,0 +1,26 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(check-tag) {
+  background-color: $--background-color-base;
+  border-radius: $--border-radius-base;
+  color: $--color-info;
+  cursor: pointer;
+  display: inline-block;
+  font-size: $--font-size-base;
+  line-height: $--font-size-base;
+  padding: 7px 15px;
+  transition: $--all-transition;
+  font-weight: bold;
+  &:hover {
+    background-color: rgb(220, 223, 230);
+  }
+
+  @include when(checked) {
+    background-color: #DEEDFC;
+    color: $--color-primary-light-1;
+    &:hover {
+      background-color: $--color-primary-light-7;
+    }
+  }
+}

packages/theme-chalk/src/index.scss

@@ -86,3 +86,4 @@
 @import "./skeleton-item.scss";
 @import "./empty.scss";
 @import "./affix.scss";
+@import "./check-tag.scss";

vetur/tags.json

@@ -185,6 +185,10 @@
     "defaults": ["type"],
     "description": "Used for marking and selection."
   },
+  "el-check-tag": {
+    "attributes": ["checked"],
+    "description": "Light weighted checkbox with tag appearance"
+  },
   "el-progress": {
     "attributes": ["percentage", "type", "stroke-width", "text-inside", "status", "color", "width", "show-text", "stroke-linecap", "format"],
     "defaults": ["percentage"],

vetur/web-types.json

@@ -4334,6 +4334,28 @@
             }
           ]
         },
+        {
+          "name": "el-check-tag",
+          "description": "Light weighted checkbox with tag appearance",
+          "doc-url": "https://element-plus.org/#/en-US/component/tag",
+          "attributes": [
+            {
+              "name": "checked",
+              "default": "-",
+              "description": "whether the tag is selected",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "description": "triggers when check tag checked state change"
+            }
+          ]
+        },
         {
           "name": "el-progress",
           "description": "Progress is used to show the progress of current operation, and inform the user the current status.",

website/docs/en-US/tag.md

@@ -185,6 +185,36 @@ Tag provide three different themes: `dark`、`light` and `plain`
 ```
 :::
 
+### Checkable tag
+
+Sometimes because of the business needs, we might need checkbox like tag, but **button like checkbox** cannot meet our needs, here comes `check-tag`
+
+:::demo basic check-tag usage, the API is rather simple.
+```html
+
+<div>
+  <el-check-tag checked style="margin-right: 8px;">Checked</el-check-tag>
+  <el-check-tag @change="onChange" :checked="checked">Toggle me</el-check-tag>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        checked: false,
+      }
+    },
+    methods: {
+      onChange(checked) {
+        this.checked = checked;
+      }
+    }
+  }
+</script>
+
+```
+:::
+
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
@@ -202,3 +232,13 @@ Tag provide three different themes: `dark`、`light` and `plain`
 |---------- |-------- |---------- |
 | click | triggers when Tag is clicked | — |
 | close | triggers when Tag is removed | — |
+
+### CheckTag Attributes
+| Attribute      | Description          | Type      | Accepted                           | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| checked | is checked | boolean | true/false | — |
+
+### CheckTag Events
+| Event Name | Description | Parameters |
+|---------- |-------- |---------- |
+| change | triggers when Check Tag is clicked | checked |