feat(tag): add new feature check-tag

- Add new component `check-tag`

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";

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 |

website/docs/es/tag.md

@@ -17,7 +17,7 @@ Se utiliza para marcar y seleccionar.
 
 ### Etiqueta removible
 
-:::demo el atributo `closable` puede usarse para definir una etiqueta removible. Acepta un `Boolean`. De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo `disable-transitions` , que acepta `Boolean`, como `true`. Se dispara el evento `close` cuando la etiqueta es removida. 
+:::demo el atributo `closable` puede usarse para definir una etiqueta removible. Acepta un `Boolean`. De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo `disable-transitions` , que acepta `Boolean`, como `true`. Se dispara el evento `close` cuando la etiqueta es removida.
 
 ```html
 <el-tag
@@ -184,6 +184,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>
+
+```
+:::
+
 ### Atributos
 | Atributo            | Descripción                         | Tipo    | Valores aceptados           | Por defecto |
 | ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- |
@@ -201,3 +231,13 @@ Tag provide three different themes: `dark`、`light` and `plain`
 | ------ | ------------------------------------ | ---------- |
 | click  | se dispara cuando el Tag es clic     | —          |
 | close  | se dispara cuando el Tag es removido | —          |
+
+### CheckTag Atributos
+| Attribute      | Description          | Type      | Accepted                           | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| checked | is checked | boolean | true/false | — |
+
+### CheckTag Eventos
+| Event Name | Description | Parameters |
+|---------- |-------- |---------- |
+| change | triggers when Check Tag is clicked | checked |

website/docs/fr-FR/tag.md

@@ -184,6 +184,37 @@ Les balises utilisent trois thèmes différents: `dark`, `light` et `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>
+
+```
+:::
+
+
 ### Attributs
 
 | Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
@@ -202,3 +233,13 @@ Les balises utilisent trois thèmes différents: `dark`, `light` et `plain`
 |---------- |-------- |---------- |
 | click | Se déclenche quand le tag est cliqué. | — |
 | close | Se déclenche quand le tag est supprimé. | — |
+
+### CheckTag Attributs
+| Attribute      | Description          | Type      | Accepted                           | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| checked | is checked | boolean | true/false | — |
+
+### CheckTag Évènements
+| Event Name | Description | Parameters |
+|---------- |-------- |---------- |
+| change | triggers when Check Tag is clicked | checked |