feat(tag): add tag size

Author: lj1990111

packages/devui-vue/devui/tag/__tests__/tag.spec.ts

@@ -1,42 +1,52 @@
 import { mount } from '@vue/test-utils';
 import { Tag } from '../index';
 import { ref } from 'vue';
+import { useNamespace } from '../../shared/hooks/use-namespace';
+
+const ns = useNamespace('tag', true);
+const baseClass = ns.b();
+const itemClass = ns.e('item');
+
+const nsNoDot = useNamespace('tag', false);
+const primaryClass = nsNoDot.m('primary');
+const lgClass = nsNoDot.m('lg');
 
 describe('tag test', () => {
  it('init render', async () => {
  const wrapper = mount(Tag);
- expect(wrapper.find('.devui-tag').exists()).toBeTruthy();
+ expect(wrapper.find(baseClass).exists()).toBeTruthy();
  });
  it('props type', () => {
  const wrapper = mount(Tag, {
  propsData: {
  type: 'primary',
  },
  });
- expect(wrapper.find('.devui-tag .devui-tag-item').classes()).toContain('devui-tag-primary');
+ const itemTag = wrapper.find(itemClass);
+ expect(itemTag.classes()).toContain(primaryClass);
  });
  it('props color', () => {
  const wrapper = mount(Tag, {
  propsData: {
  color: 'red-w98', // #f66f6a rgb(246, 111, 106)
  },
  });
- expect(wrapper.find('.devui-tag .devui-tag-item').attributes('style')).toContain('rgb(246, 111, 106)');
+ expect(wrapper.find(itemClass).attributes('style')).toContain('rgb(246, 111, 106)');
  });
  it('props color custom', () => {
  const wrapper = mount(Tag, {
  propsData: {
  color: '#aa2116', // rgb(170, 33, 22)
  },
  });
- expect(wrapper.find('.devui-tag .devui-tag-item').attributes('style')).toContain('rgb(170, 33, 22)');
+ expect(wrapper.find(itemClass).attributes('style')).toContain('rgb(170, 33, 22)');
  });
  it('props titleContent', () => {
  const titleContent = 'tagTitle test';
  const wrapper = mount(Tag, {
  props: { titleContent },
  });
- expect(wrapper.get('.devui-tag .devui-tag-item').attributes('title')).toBe(titleContent);
+ expect(wrapper.get(itemClass).attributes('title')).toBe(titleContent);
  });
  it('props deletable show', async () => {
  const wrapper = mount(Tag, {
@@ -77,9 +87,9 @@ describe('tag test', () => {
  color: 'red-w98', // 对应颜色：rgb(246, 111, 106)
  },
  });
- expect(wrapper.find('.devui-tag .devui-tag-item').attributes('style')).toContain('color: rgb(246, 111, 106);');
+ expect(wrapper.find(itemClass).attributes('style')).toContain('color: rgb(246, 111, 106);');
  await wrapper.setProps({ checked: true });
- expect(wrapper.find('.devui-tag .devui-tag-item').attributes('style')).toContain('background-color: rgb(246, 111, 106);');
+ expect(wrapper.find(itemClass).attributes('style')).toContain('background-color: rgb(246, 111, 106);');
  expect(wrapper.emitted('checkedChange').length).toBeGreaterThan(0);
  });
  it('event checkedChange', async () => {
@@ -113,4 +123,14 @@ describe('tag test', () => {
  });
  expect(wrapper.find('i').classes()).toContain('icon-like');
  });
+
+ it('Tag size work', () => {
+ const wrapper = mount(Tag, {
+ propsData: {
+ size: 'lg',
+ },
+ });
+ const itemTag = wrapper.find(itemClass);
+ expect(itemTag.classes()).toContain(lgClass);
+ });
 });

packages/devui-vue/devui/tag/src/composables/use-class.ts

@@ -7,6 +7,8 @@ export default function (props: TagProps): ComputedRef<string> {
  const ns = useNamespace('tag');
  return computed(() => {
  const { type, color, deletable } = props;
- return `${ns.e('item')} ${ns.m(type || (color ? 'colorful' : '') || 'default')} ${deletable ? ns.m('deletable') : ''}`;
+ return `${ns.e('item')} ${ns.m(type || (color ? 'colorful' : '') || 'default')} ${deletable ? ns.m('deletable') : ''} ${ns.m(
+ props.size
+ )}`;
  });
 }

packages/devui-vue/devui/tag/src/tag-types.ts

@@ -1,28 +1,33 @@
 import type { PropType, ExtractPropTypes } from 'vue';
 
 export type TagType = 'primary' | 'success' | 'warning' | 'danger';
+export type SizeType = 'lg' | 'md' | 'sm' | 'xs';
 
 export const tagProps = {
  type: {
  type: String as PropType<TagType>,
- default: ''
+ default: '',
  },
  color: {
  type: String as PropType<string>,
- default: ''
+ default: '',
  },
  titleContent: {
  type: String as PropType<string>,
- default: ''
+ default: '',
  },
  checked: {
  type: Boolean as PropType<boolean>,
- default: false
+ default: false,
  },
  deletable: {
  type: Boolean as PropType<boolean>,
- default: false
- }
+ default: false,
+ },
+ size: {
+ type: String as PropType<SizeType>,
+ default: 'xs',
+ },
 } as const;
 
 export type TagProps = ExtractPropTypes<typeof tagProps>;

packages/devui-vue/devui/tag/src/tag.scss

@@ -1,5 +1,26 @@
 @import '../../styles-var/devui-var.scss';
 
+$font-size-map: (
+ lg: $devui-font-size-lg,
+ md: $devui-font-size-lg,
+ sm: $devui-font-size-sm,
+ xs: $devui-font-size-sm,
+);
+
+$tag-height-map: (
+ lg: 32px,
+ md: 28px,
+ sm: 24px,
+ xs: 20px,
+);
+
+$tag-line-height-map: (
+ lg: 30px,
+ md: 26px,
+ sm: 22px,
+ xs: 18px,
+);
+
 $devui-tag-normal-config: (
  default: (
  border: 0,
@@ -38,7 +59,7 @@ $devui-tag-normal-config: (
  display: block;
  position: relative;
  padding: 0 8px;
- min-height: 20px;
+ height: 20px;
  border: 1px solid;
  border-radius: $devui-border-radius;
  font-size: $devui-font-size;
@@ -51,6 +72,13 @@ $devui-tag-normal-config: (
  }
  }
  }
+ @each $size in ('lg', 'md', 'sm', 'xs') {
+ &.#{$devui-prefix}-tag--#{$size} {
+ font-size: map-get($font-size-map, #{$size});
+ height: map-get($tag-height-map, #{$size});
+ line-height: map-get($tag-line-height-map, #{$size});
+ }
+ }
  }
 
  .remove-button {

packages/devui-vue/docs/components/tag/index.md

@@ -142,15 +142,50 @@ export default defineComponent({
 
 :::
 
+### 不同尺寸
+
+:::demo Tag 默认的是 xs 尺寸，还有 lg、md、sm 三种尺寸可选
+
+```vue
+<template>
+ <div>
+ <d-tag type="primary" size="lg">标签二</d-tag>
+ <d-tag type="success" size="md">标签三</d-tag>
+ <d-tag type="warning" size="sm">标签四</d-tag>
+ <d-tag type="danger">标签五</d-tag>
+ </div>
+ <div>
+ <d-tag type="primary" deletable size="lg">标签一</d-tag>
+ <d-tag type="primary" deletable size="md">标签二</d-tag>
+ <d-tag type="primary" deletable size="sm">标签三</d-tag>
+ <d-tag type="primary" deletable size="xs">标签四</d-tag>
+ </div>
+</template>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ setup() {
+ return {};
+ },
+});
+</script>
+
+<style></style>
+```
+
+:::
+
 ### Tag 参数
 
-| 参数 | 类型 | 默认值 | 说明 | 跳转至 Demo |
-| :------------ | :------------------ | :-------- | :------------------------------------------ | :-------------------- |
-| type | [TagType](#tagtype) | 'defalut' | 可选，标签的类型，指定类型后则 color 不生效 | [基本用法](#基本用法) |
-| color | `string` | '' | 可选，标签的主题色 | [基本用法](#基本用法) |
-| title-content | `string` | '' | 可选，设置鼠标悬浮时 title 的显示内容 | [基本用法](#基本用法) |
-| checked | `boolean` | false | 可选，标签选中的初始状态 | [可被选中](#可被选中) |
-| deletable | `boolean` | false | 可选，设置标签是否可删除 | [可移除的](#可移除的) |
+| 参数 | 类型 | 默认值 | 说明 | 跳转至 Demo |
+| :------------ | :-------------------- | :-------- | :------------------------------------------ | :-------------------- |
+| type | [TagType](#tagtype) | 'defalut' | 可选，标签的类型，指定类型后则 color 不生效 | [基本用法](#基本用法) |
+| color | `string` | '' | 可选，标签的主题色 | [基本用法](#基本用法) |
+| title-content | `string` | '' | 可选，设置鼠标悬浮时 title 的显示内容 | [基本用法](#基本用法) |
+| checked | `boolean` | false | 可选，标签选中的初始状态 | [可被选中](#可被选中) |
+| deletable | `boolean` | false | 可选，设置标签是否可删除 | [可移除的](#可移除的) |
+| size | [SizeType](#sizetype) | xs | 可选，标签尺寸 | [不同尺寸](#不同尺寸) |
 
 ### Tag 事件
 
@@ -167,3 +202,9 @@ export default defineComponent({
 ```ts
 type TagType = 'primary' | 'success' | 'warning' | 'danger';
 ```
+
+#### SizeType
+
+```ts
+type SizeType = 'lg' | 'md' | 'sm' | 'xs';
+```