From c72259ce40b5d29e5d25c43df048b9a87dc4a016 Mon Sep 17 00:00:00 2001 From: codedance Date: Sat, 6 Nov 2021 18:14:09 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(tags):=20=E5=88=9B=E5=BB=BATags?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90?= =?UTF-8?q?=E7=AE=80=E5=8D=95=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/tags/__tests__/tags.spec.ts | 8 ++ packages/devui-vue/devui/tags/index.ts | 17 +++++ .../devui-vue/devui/tags/src/hooks/index.ts | 3 + .../devui/tags/src/hooks/useStyle.ts | 11 +++ .../devui-vue/devui/tags/src/tags-types.ts | 19 +++++ packages/devui-vue/devui/tags/src/tags.scss | 74 +++++++++++++++++++ packages/devui-vue/devui/tags/src/tags.tsx | 31 ++++++++ .../devui-vue/docs/components/tags/index.md | 53 +++++++++++++ 8 files changed, 216 insertions(+) create mode 100644 packages/devui-vue/devui/tags/__tests__/tags.spec.ts create mode 100644 packages/devui-vue/devui/tags/index.ts create mode 100644 packages/devui-vue/devui/tags/src/hooks/index.ts create mode 100644 packages/devui-vue/devui/tags/src/hooks/useStyle.ts create mode 100644 packages/devui-vue/devui/tags/src/tags-types.ts create mode 100644 packages/devui-vue/devui/tags/src/tags.scss create mode 100644 packages/devui-vue/devui/tags/src/tags.tsx create mode 100644 packages/devui-vue/docs/components/tags/index.md diff --git a/packages/devui-vue/devui/tags/__tests__/tags.spec.ts b/packages/devui-vue/devui/tags/__tests__/tags.spec.ts new file mode 100644 index 00000000..cb291e37 --- /dev/null +++ b/packages/devui-vue/devui/tags/__tests__/tags.spec.ts @@ -0,0 +1,8 @@ +import { mount } from '@vue/test-utils'; +import { Tags } from '../index'; + +describe('tags test', () => { + it('tags init render', async () => { + // todo + }) +}) diff --git a/packages/devui-vue/devui/tags/index.ts b/packages/devui-vue/devui/tags/index.ts new file mode 100644 index 00000000..5b728441 --- /dev/null +++ b/packages/devui-vue/devui/tags/index.ts @@ -0,0 +1,17 @@ +import type { App } from 'vue' +import Tags from './src/tags' + +Tags.install = function(app: App): void { + app.component(Tags.name, Tags) +} + +export { Tags } + +export default { + title: 'Tags 标签', + category: '数据展示', + status: undefined, // TODO: 组件若开发完成则填入"已完成",并删除该注释 + install(app: App): void { + app.use(Tags as any) + } +} diff --git a/packages/devui-vue/devui/tags/src/hooks/index.ts b/packages/devui-vue/devui/tags/src/hooks/index.ts new file mode 100644 index 00000000..8931ccc4 --- /dev/null +++ b/packages/devui-vue/devui/tags/src/hooks/index.ts @@ -0,0 +1,3 @@ +import useStyle from './useStyle' + +export { useStyle } diff --git a/packages/devui-vue/devui/tags/src/hooks/useStyle.ts b/packages/devui-vue/devui/tags/src/hooks/useStyle.ts new file mode 100644 index 00000000..44df8343 --- /dev/null +++ b/packages/devui-vue/devui/tags/src/hooks/useStyle.ts @@ -0,0 +1,11 @@ +import { computed } from 'vue' +import { tagsProps, TagsProps } from '../tags-types' + +export default function (props: TagsProps) { + return computed(() => { + const { type } = props + console.log(type, 'type') + + return `devui-tag devui-tag-${type || 'default'}` + }) +} diff --git a/packages/devui-vue/devui/tags/src/tags-types.ts b/packages/devui-vue/devui/tags/src/tags-types.ts new file mode 100644 index 00000000..81795c2e --- /dev/null +++ b/packages/devui-vue/devui/tags/src/tags-types.ts @@ -0,0 +1,19 @@ +import type { PropType, ExtractPropTypes } from 'vue' + +export type tagType = 'primary' | 'success' | 'warning' | 'danger' + +export const tagsProps = { + /* test: { + type: Object as PropType<{ xxx: xxx }> + } */ + type: { + type: String as PropType, + default: '' + }, + color: { + type: String as PropType, + default: '' + } +} as const + +export type TagsProps = ExtractPropTypes diff --git a/packages/devui-vue/devui/tags/src/tags.scss b/packages/devui-vue/devui/tags/src/tags.scss new file mode 100644 index 00000000..7d69624f --- /dev/null +++ b/packages/devui-vue/devui/tags/src/tags.scss @@ -0,0 +1,74 @@ +@import '../../style/mixins/index'; +@import '../../style/theme/color'; +@import '../../style/theme/variables'; +@import '../../style/theme/font'; +@import '../../style/theme/corner'; + +$devui-tag-normal-config: ( + // text: ( + // color: $devui-brand-active + // ), + // text-dark: ( + // color: $devui-brand-active + // ), + default: + ( + border: 0, + color: $devui-text, + background-color: $devui-default-bg // background-color: $devui-label-bg + ), + primary: ( + color: $devui-primary, + background-color: $devui-primary-bg, + border-color: $devui-primary-line + ), + success: ( + color: $devui-success, + background-color: $devui-success-bg, + border-color: $devui-success-line + ), + // info: ( + // color: $devui-info, + // background-color: $devui-info-bg, + // border-color: $devui-info-line + // ), + warning: + ( + color: $devui-warning, + background-color: $devui-warning-bg, + border-color: $devui-warning-line + ), + danger: ( + color: $devui-danger, + background-color: $devui-danger-bg, + border-color: $devui-danger-line + ) +); + +.devui-tags { + display: inline-block; + margin: 4px; + + .devui-tag { + padding: 0 8px; + min-height: 20px; + font-size: 12px; + font-size: var(--devui-font-size, 12px); + line-height: 20px; + border: 1px solid; + border-radius: $devui-border-radius; + // border-color: inherit; + display: block; + align-items: center; + position: relative; + cursor: default; + + @each $type in default, primary, success, warning, danger { + &.devui-tag-#{$type} { + @each $key, $value in map-get($devui-tag-normal-config, $type) { + #{$key}: $value; + } + } + } + } +} diff --git a/packages/devui-vue/devui/tags/src/tags.tsx b/packages/devui-vue/devui/tags/src/tags.tsx new file mode 100644 index 00000000..caa04616 --- /dev/null +++ b/packages/devui-vue/devui/tags/src/tags.tsx @@ -0,0 +1,31 @@ +import { defineComponent, ref, toRefs, computed } from 'vue' +import { tagsProps, TagsProps } from './tags-types' +import { useStyle } from './hooks' +import './tags.scss' +// 类型声明 + +export default defineComponent({ + name: 'DTags', + props: tagsProps, + emits: [], + setup(props: TagsProps, { slots }) { + //获取type对应样式 + const tagClass = useStyle(props) + + return () => ( +
+ + {slots.default?.()} + +
+ ) + } +}) +/* + + +
+default color +
+
+*/ diff --git a/packages/devui-vue/docs/components/tags/index.md b/packages/devui-vue/docs/components/tags/index.md new file mode 100644 index 00000000..330549eb --- /dev/null +++ b/packages/devui-vue/docs/components/tags/index.md @@ -0,0 +1,53 @@ +# Tags 标签 + +标签展示组件。 + +## 何时使用 + +用户需要展示多个标签时。 + +## 基本用法 + +:::demo 由`type`属性来选择 tag 的类型,也可以通过`color`属性来自定义背景色 + +```vue + + + + + +``` + +::: + +## API + +### Props + +| 参数 | 类型 | 默认值 | 说明 | 可选值 | 跳转至 Demo | +| :---: | :------: | :-----: | :----------------: | :------------------------------: | :---------------: | +| type | `string` | defalut | 可选,标签的类型 | `success\|info\|warning\|danger` | [示例](#基本用法) | +| color | `string` | '' | 可选,标签的主题色 | | | + +### Event + +| 名称 | 说明 | +| :------------ | --------------------------------- | +| tagDelete | 删除 tag 的时候触发的事件 | +| checkedChange | tag 的 check 状态改变时触发的事件 | -- Gitee From fb384bd5001bc4260ddceb0826959ed758301ee1 Mon Sep 17 00:00:00 2001 From: c0dedance <2627702283@qq.com> Date: Sun, 7 Nov 2021 09:00:11 +0000 Subject: [PATCH 2/3] update packages/devui-vue/devui/tags/src/tags-types.ts. --- packages/devui-vue/devui/tags/src/tags-types.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/devui-vue/devui/tags/src/tags-types.ts b/packages/devui-vue/devui/tags/src/tags-types.ts index 81795c2e..61874240 100644 --- a/packages/devui-vue/devui/tags/src/tags-types.ts +++ b/packages/devui-vue/devui/tags/src/tags-types.ts @@ -3,9 +3,6 @@ import type { PropType, ExtractPropTypes } from 'vue' export type tagType = 'primary' | 'success' | 'warning' | 'danger' export const tagsProps = { - /* test: { - type: Object as PropType<{ xxx: xxx }> - } */ type: { type: String as PropType, default: '' -- Gitee From 74868fcd5ecabb103d1c1848305847afc6417064 Mon Sep 17 00:00:00 2001 From: codedance Date: Sun, 7 Nov 2021 20:51:44 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat(tag):=20=E5=88=9B=E5=BB=BATag=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90=E7=AE=80?= =?UTF-8?q?=E5=8D=95=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/tag/__tests__/tag.spec.ts | 8 ++++ .../devui-vue/devui/{tags => tag}/index.ts | 14 +++---- .../devui/{tags => tag}/src/hooks/index.ts | 0 .../devui/{tags => tag}/src/hooks/useStyle.ts | 5 +-- .../tags-types.ts => tag/src/tag-types.ts} | 7 +--- .../{tags/src/tags.scss => tag/src/tag.scss} | 42 ++++++------------- .../{tags/src/tags.tsx => tag/src/tag.tsx} | 20 +++------ .../devui/tags/__tests__/tags.spec.ts | 8 ---- .../docs/components/{tags => tag}/index.md | 14 +++---- 9 files changed, 44 insertions(+), 74 deletions(-) create mode 100644 packages/devui-vue/devui/tag/__tests__/tag.spec.ts rename packages/devui-vue/devui/{tags => tag}/index.ts (30%) rename packages/devui-vue/devui/{tags => tag}/src/hooks/index.ts (100%) rename packages/devui-vue/devui/{tags => tag}/src/hooks/useStyle.ts (53%) rename packages/devui-vue/devui/{tags/src/tags-types.ts => tag/src/tag-types.ts} (64%) rename packages/devui-vue/devui/{tags/src/tags.scss => tag/src/tag.scss} (56%) rename packages/devui-vue/devui/{tags/src/tags.tsx => tag/src/tag.tsx} (50%) delete mode 100644 packages/devui-vue/devui/tags/__tests__/tags.spec.ts rename packages/devui-vue/docs/components/{tags => tag}/index.md (81%) diff --git a/packages/devui-vue/devui/tag/__tests__/tag.spec.ts b/packages/devui-vue/devui/tag/__tests__/tag.spec.ts new file mode 100644 index 00000000..9db389e4 --- /dev/null +++ b/packages/devui-vue/devui/tag/__tests__/tag.spec.ts @@ -0,0 +1,8 @@ +import { mount } from '@vue/test-utils' +import { Tag } from '../index' + +describe('tag test', () => { + it('tag init render', async () => { + // todo + }) +}) diff --git a/packages/devui-vue/devui/tags/index.ts b/packages/devui-vue/devui/tag/index.ts similarity index 30% rename from packages/devui-vue/devui/tags/index.ts rename to packages/devui-vue/devui/tag/index.ts index 5b728441..43310285 100644 --- a/packages/devui-vue/devui/tags/index.ts +++ b/packages/devui-vue/devui/tag/index.ts @@ -1,17 +1,17 @@ import type { App } from 'vue' -import Tags from './src/tags' +import Tag from './src/tag' -Tags.install = function(app: App): void { - app.component(Tags.name, Tags) +Tag.install = function (app: App): void { + app.component(Tag.name, Tag) } -export { Tags } +export { Tag } export default { - title: 'Tags 标签', + title: 'Tag 标签', category: '数据展示', - status: undefined, // TODO: 组件若开发完成则填入"已完成",并删除该注释 + status: '20%', // TODO: 组件若开发完成则填入"已完成",并删除该注释 install(app: App): void { - app.use(Tags as any) + app.use(Tag as any) } } diff --git a/packages/devui-vue/devui/tags/src/hooks/index.ts b/packages/devui-vue/devui/tag/src/hooks/index.ts similarity index 100% rename from packages/devui-vue/devui/tags/src/hooks/index.ts rename to packages/devui-vue/devui/tag/src/hooks/index.ts diff --git a/packages/devui-vue/devui/tags/src/hooks/useStyle.ts b/packages/devui-vue/devui/tag/src/hooks/useStyle.ts similarity index 53% rename from packages/devui-vue/devui/tags/src/hooks/useStyle.ts rename to packages/devui-vue/devui/tag/src/hooks/useStyle.ts index 44df8343..2dbb29d7 100644 --- a/packages/devui-vue/devui/tags/src/hooks/useStyle.ts +++ b/packages/devui-vue/devui/tag/src/hooks/useStyle.ts @@ -1,10 +1,9 @@ import { computed } from 'vue' -import { tagsProps, TagsProps } from '../tags-types' +import { tagProps, TagProps } from '../tag-types' -export default function (props: TagsProps) { +export default function (props: TagProps) { return computed(() => { const { type } = props - console.log(type, 'type') return `devui-tag devui-tag-${type || 'default'}` }) diff --git a/packages/devui-vue/devui/tags/src/tags-types.ts b/packages/devui-vue/devui/tag/src/tag-types.ts similarity index 64% rename from packages/devui-vue/devui/tags/src/tags-types.ts rename to packages/devui-vue/devui/tag/src/tag-types.ts index 81795c2e..f8fd95a5 100644 --- a/packages/devui-vue/devui/tags/src/tags-types.ts +++ b/packages/devui-vue/devui/tag/src/tag-types.ts @@ -2,10 +2,7 @@ import type { PropType, ExtractPropTypes } from 'vue' export type tagType = 'primary' | 'success' | 'warning' | 'danger' -export const tagsProps = { - /* test: { - type: Object as PropType<{ xxx: xxx }> - } */ +export const tagProps = { type: { type: String as PropType, default: '' @@ -16,4 +13,4 @@ export const tagsProps = { } } as const -export type TagsProps = ExtractPropTypes +export type TagProps = ExtractPropTypes diff --git a/packages/devui-vue/devui/tags/src/tags.scss b/packages/devui-vue/devui/tag/src/tag.scss similarity index 56% rename from packages/devui-vue/devui/tags/src/tags.scss rename to packages/devui-vue/devui/tag/src/tag.scss index 7d69624f..bd3e3c7a 100644 --- a/packages/devui-vue/devui/tags/src/tags.scss +++ b/packages/devui-vue/devui/tag/src/tag.scss @@ -1,22 +1,11 @@ -@import '../../style/mixins/index'; -@import '../../style/theme/color'; -@import '../../style/theme/variables'; -@import '../../style/theme/font'; -@import '../../style/theme/corner'; +@import '@devui/styles-var/devui-var'; $devui-tag-normal-config: ( - // text: ( - // color: $devui-brand-active - // ), - // text-dark: ( - // color: $devui-brand-active - // ), - default: - ( - border: 0, - color: $devui-text, - background-color: $devui-default-bg // background-color: $devui-label-bg - ), + default: ( + border: 0, + color: $devui-text, + background-color: $devui-default-bg + ), primary: ( color: $devui-primary, background-color: $devui-primary-bg, @@ -27,17 +16,11 @@ $devui-tag-normal-config: ( background-color: $devui-success-bg, border-color: $devui-success-line ), - // info: ( - // color: $devui-info, - // background-color: $devui-info-bg, - // border-color: $devui-info-line - // ), - warning: - ( - color: $devui-warning, - background-color: $devui-warning-bg, - border-color: $devui-warning-line - ), + warning: ( + color: $devui-warning, + background-color: $devui-warning-bg, + border-color: $devui-warning-line + ), danger: ( color: $devui-danger, background-color: $devui-danger-bg, @@ -45,7 +28,7 @@ $devui-tag-normal-config: ( ) ); -.devui-tags { +.devui-tag { display: inline-block; margin: 4px; @@ -57,7 +40,6 @@ $devui-tag-normal-config: ( line-height: 20px; border: 1px solid; border-radius: $devui-border-radius; - // border-color: inherit; display: block; align-items: center; position: relative; diff --git a/packages/devui-vue/devui/tags/src/tags.tsx b/packages/devui-vue/devui/tag/src/tag.tsx similarity index 50% rename from packages/devui-vue/devui/tags/src/tags.tsx rename to packages/devui-vue/devui/tag/src/tag.tsx index caa04616..a04ac737 100644 --- a/packages/devui-vue/devui/tags/src/tags.tsx +++ b/packages/devui-vue/devui/tag/src/tag.tsx @@ -1,19 +1,19 @@ import { defineComponent, ref, toRefs, computed } from 'vue' -import { tagsProps, TagsProps } from './tags-types' +import { tagProps, TagProps } from './tag-types' import { useStyle } from './hooks' -import './tags.scss' +import './tag.scss' // 类型声明 export default defineComponent({ - name: 'DTags', - props: tagsProps, + name: 'DTag', + props: tagProps, emits: [], - setup(props: TagsProps, { slots }) { + setup(props: TagProps, { slots }) { //获取type对应样式 const tagClass = useStyle(props) return () => ( -
+
{slots.default?.()} @@ -21,11 +21,3 @@ export default defineComponent({ ) } }) -/* - - -
-default color -
-
-*/ diff --git a/packages/devui-vue/devui/tags/__tests__/tags.spec.ts b/packages/devui-vue/devui/tags/__tests__/tags.spec.ts deleted file mode 100644 index cb291e37..00000000 --- a/packages/devui-vue/devui/tags/__tests__/tags.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { mount } from '@vue/test-utils'; -import { Tags } from '../index'; - -describe('tags test', () => { - it('tags init render', async () => { - // todo - }) -}) diff --git a/packages/devui-vue/docs/components/tags/index.md b/packages/devui-vue/docs/components/tag/index.md similarity index 81% rename from packages/devui-vue/docs/components/tags/index.md rename to packages/devui-vue/docs/components/tag/index.md index 330549eb..c96b6238 100644 --- a/packages/devui-vue/docs/components/tags/index.md +++ b/packages/devui-vue/docs/components/tag/index.md @@ -1,4 +1,4 @@ -# Tags 标签 +# Tag 标签 标签展示组件。 @@ -12,11 +12,11 @@ ```vue