diff --git a/packages/check-tag/__tests__/check-tag.spec.ts b/packages/check-tag/__tests__/check-tag.spec.ts new file mode 100644 index 0000000000..ecb44ead7e --- /dev/null +++ b/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: ` + ${AXIOM} + `, + 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) + + }) + + +}) diff --git a/packages/check-tag/index.ts b/packages/check-tag/index.ts new file mode 100644 index 0000000000..19615b6e4d --- /dev/null +++ b/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 = CheckTag + +export default _CheckTag diff --git a/packages/check-tag/package.json b/packages/check-tag/package.json new file mode 100644 index 0000000000..233284faba --- /dev/null +++ b/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" + } +} diff --git a/packages/check-tag/src/index.vue b/packages/check-tag/src/index.vue new file mode 100644 index 0000000000..34642ad61c --- /dev/null +++ b/packages/check-tag/src/index.vue @@ -0,0 +1,33 @@ + + + diff --git a/packages/element-plus/index.ts b/packages/element-plus/index.ts index 72b7dbe883..fa192b6e51 100644 --- a/packages/element-plus/index.ts +++ b/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, diff --git a/packages/theme-chalk/src/check-tag.scss b/packages/theme-chalk/src/check-tag.scss new file mode 100644 index 0000000000..dadef43777 --- /dev/null +++ b/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; + } + } +} diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss index 64c04fb839..c2cb77ae84 100644 --- a/packages/theme-chalk/src/index.scss +++ b/packages/theme-chalk/src/index.scss @@ -86,3 +86,4 @@ @import "./skeleton-item.scss"; @import "./empty.scss"; @import "./affix.scss"; +@import "./check-tag.scss"; diff --git a/vetur/tags.json b/vetur/tags.json index 8d83f674bc..bcf64cbdc5 100644 --- a/vetur/tags.json +++ b/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"], diff --git a/vetur/web-types.json b/vetur/web-types.json index e973792289..c1aac374ca 100644 --- a/vetur/web-types.json +++ b/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.", diff --git a/website/docs/en-US/tag.md b/website/docs/en-US/tag.md index e477029650..580986b04a 100644 --- a/website/docs/en-US/tag.md +++ b/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 + +
+ Checked + Toggle me +
+ + + +``` +::: + ### 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 | diff --git a/website/docs/es/tag.md b/website/docs/es/tag.md index f87faa25a0..44cfda0065 100644 --- a/website/docs/es/tag.md +++ b/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 + Checked + Toggle me + + + + +``` +::: + ### 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 | diff --git a/website/docs/fr-FR/tag.md b/website/docs/fr-FR/tag.md index 0047c2311c..f4417f7dfa 100644 --- a/website/docs/fr-FR/tag.md +++ b/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 + +
+ Checked + Toggle me +
+ + + +``` +::: + + ### 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 | diff --git a/website/docs/jp/tag.md b/website/docs/jp/tag.md index 26a22d601a..f06c852c57 100644 --- a/website/docs/jp/tag.md +++ b/website/docs/jp/tag.md @@ -185,6 +185,36 @@ ``` ::: +### 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 + +
+ Checked + Toggle me +
+ + + +``` +::: + ### 属性 | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | @@ -202,3 +232,14 @@ |---------- |-------- |---------- | | click | タグがクリックされたときにトリガーされます。 | — | | close | タグが削除されたときにトリガーされます。 | — | + + +### CheckTag 属性 +| Attribute | Description | Type | Accepted | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| checked | is checked | boolean | true/false | — | + +### CheckTag イベント +| Event Name | Description | Parameters | +|---------- |-------- |---------- | +| change | triggers when Check Tag is clicked | checked | diff --git a/website/docs/zh-CN/tag.md b/website/docs/zh-CN/tag.md index ebc565d2cc..7e0504d778 100644 --- a/website/docs/zh-CN/tag.md +++ b/website/docs/zh-CN/tag.md @@ -184,6 +184,36 @@ Tag 组件提供了三个不同的主题：`dark`、`light` 和 `plain` ``` ::: +### 类似复选框的标签 + +有时候因为业务需求，我们可能会需要用到类似复选框的标签，但是按钮式的复选框的样式又不满足需求，此时我们就可以用到 `check-tag` + +:::demo check-tag 的基础使用方法，check-tag 提供的 API 非常简单 +```html + +
+ 选中 + 点我切换 +
+ + + +``` +::: + ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | @@ -201,3 +231,13 @@ Tag 组件提供了三个不同的主题：`dark`、`light` 和 `plain` |---------- |-------- |---------- | | click | 点击 Tag 时触发的事件 | — | | close | 关闭 Tag 时触发的事件 | — | + +### CheckTag Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| checked | 是否选中 | boolean | true/false | — | + +### CheckTag Events +| 事件名称 | 说明 | 回调参数 | +|---------- |-------- |---------- | +| change | 点击 Check Tag 时触发的事件 | checked |