From 682eb1343f05bbce79806c8efe46bc764555cdc7 Mon Sep 17 00:00:00 2001 From: lishiyao Date: Sun, 21 Nov 2021 11:44:21 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E6=96=B0=E5=BB=BA=E6=9C=AC?= =?UTF-8?q?=E5=9C=B0comment=E7=BB=84=E4=BB=B6=E5=88=86=E6=94=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/comment/__tests__/comment.spec.ts | 8 +++ packages/devui-vue/devui/comment/index.ts | 17 ++++++ .../devui/comment/src/comment-types.ts | 9 +++ .../devui-vue/devui/comment/src/comment.scss | 3 + .../devui-vue/devui/comment/src/comment.tsx | 14 +++++ .../docs/components/comment/index.md | 55 +++++++++++++++++++ 6 files changed, 106 insertions(+) create mode 100644 packages/devui-vue/devui/comment/__tests__/comment.spec.ts create mode 100644 packages/devui-vue/devui/comment/index.ts create mode 100644 packages/devui-vue/devui/comment/src/comment-types.ts create mode 100644 packages/devui-vue/devui/comment/src/comment.scss create mode 100644 packages/devui-vue/devui/comment/src/comment.tsx create mode 100644 packages/devui-vue/docs/components/comment/index.md diff --git a/packages/devui-vue/devui/comment/__tests__/comment.spec.ts b/packages/devui-vue/devui/comment/__tests__/comment.spec.ts new file mode 100644 index 00000000..1d2277d4 --- /dev/null +++ b/packages/devui-vue/devui/comment/__tests__/comment.spec.ts @@ -0,0 +1,8 @@ +import { mount } from '@vue/test-utils'; +import { Comment } from '../index'; + +describe('comment test', () => { + it('comment init render', async () => { + // todo + }) +}) diff --git a/packages/devui-vue/devui/comment/index.ts b/packages/devui-vue/devui/comment/index.ts new file mode 100644 index 00000000..713b09d6 --- /dev/null +++ b/packages/devui-vue/devui/comment/index.ts @@ -0,0 +1,17 @@ +import type { App } from 'vue' +import Comment from './src/comment' + +Comment.install = function(app: App): void { + app.component(Comment.name, Comment) +} + +export { Comment } + +export default { + title: 'Comment 评论', + category: '通用', + status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + app.use(Comment as any) + } +} diff --git a/packages/devui-vue/devui/comment/src/comment-types.ts b/packages/devui-vue/devui/comment/src/comment-types.ts new file mode 100644 index 00000000..cc3a5072 --- /dev/null +++ b/packages/devui-vue/devui/comment/src/comment-types.ts @@ -0,0 +1,9 @@ +import type { PropType, ExtractPropTypes } from 'vue' + +export const commentProps = { + /* test: { + type: Object as PropType<{ xxx: xxx }> + } */ +} as const + +export type CommentProps = ExtractPropTypes diff --git a/packages/devui-vue/devui/comment/src/comment.scss b/packages/devui-vue/devui/comment/src/comment.scss new file mode 100644 index 00000000..2afc4caa --- /dev/null +++ b/packages/devui-vue/devui/comment/src/comment.scss @@ -0,0 +1,3 @@ +.devui-comment { + // +} diff --git a/packages/devui-vue/devui/comment/src/comment.tsx b/packages/devui-vue/devui/comment/src/comment.tsx new file mode 100644 index 00000000..ddb4fd6d --- /dev/null +++ b/packages/devui-vue/devui/comment/src/comment.tsx @@ -0,0 +1,14 @@ +import { defineComponent } from 'vue' +import { commentProps, CommentProps } from './comment-types' +import './comment.scss' + +export default defineComponent({ + name: 'DComment', + props: commentProps, + emits: [], + setup(props: CommentProps, ctx) { + return () => { + return (
) + } + } +}) diff --git a/packages/devui-vue/docs/components/comment/index.md b/packages/devui-vue/docs/components/comment/index.md new file mode 100644 index 00000000..b6f63f19 --- /dev/null +++ b/packages/devui-vue/docs/components/comment/index.md @@ -0,0 +1,55 @@ +# Comment 评论 + +// todo 组件描述 + +### 何时使用 + +// todo 使用时机描述 + + +### 基本用法 +// todo 用法描述 +:::demo // todo 展开代码的内部描述 + +```vue + + + + + +``` + +::: + +### d-comment + +d-comment 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| ---- | ---- | ---- | ---- | --------- | --------- | +| | | | | | | +| | | | | | | +| | | | | | | + +d-comment 事件 + +| 事件 | 类型 | 说明 | 跳转 Demo | +| ---- | ---- | ---- | --------- | +| | | | | +| | | | | +| | | | | + -- Gitee From 4a3a471b2c281e7f885533f6f9eabf9182768d66 Mon Sep 17 00:00:00 2001 From: lishiyao Date: Sun, 21 Nov 2021 19:25:39 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/comment/index.ts | 4 +- .../devui/comment/src/comment-types.ts | 21 +++++++-- .../devui-vue/devui/comment/src/comment.scss | 27 ++++++++++- .../devui-vue/devui/comment/src/comment.tsx | 47 ++++++++++++++++++- .../devui-vue/devui/comment/src/getSlot.ts | 0 packages/devui-vue/src/app.vue | 19 +++++++- packages/devui-vue/src/main.ts | 7 ++- 7 files changed, 113 insertions(+), 12 deletions(-) create mode 100644 packages/devui-vue/devui/comment/src/getSlot.ts diff --git a/packages/devui-vue/devui/comment/index.ts b/packages/devui-vue/devui/comment/index.ts index 713b09d6..78efe3af 100644 --- a/packages/devui-vue/devui/comment/index.ts +++ b/packages/devui-vue/devui/comment/index.ts @@ -9,8 +9,8 @@ export { Comment } export default { title: 'Comment 评论', - category: '通用', - status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + category: '其他', + status: '5%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 install(app: App): void { app.use(Comment as any) } diff --git a/packages/devui-vue/devui/comment/src/comment-types.ts b/packages/devui-vue/devui/comment/src/comment-types.ts index cc3a5072..520f1e16 100644 --- a/packages/devui-vue/devui/comment/src/comment-types.ts +++ b/packages/devui-vue/devui/comment/src/comment-types.ts @@ -1,9 +1,24 @@ import type { PropType, ExtractPropTypes } from 'vue' export const commentProps = { - /* test: { - type: Object as PropType<{ xxx: xxx }> - } */ + actions: { + + }, + author: { + + }, + avatar: {}, + + content: { + + } , + prefixCls: { + + }, + datetime: { + + } + } as const export type CommentProps = ExtractPropTypes diff --git a/packages/devui-vue/devui/comment/src/comment.scss b/packages/devui-vue/devui/comment/src/comment.scss index 2afc4caa..8fb9aebf 100644 --- a/packages/devui-vue/devui/comment/src/comment.scss +++ b/packages/devui-vue/devui/comment/src/comment.scss @@ -1,3 +1,28 @@ +@import '../../style/theme/color'; +@import '../../styles-var/devui-var.scss'; .devui-comment { - // + display: flex; + align-items: flex-start; + &-avatar{ + margin: 0 16px 0 0; + } + &-right{ + + } + &-head{ + display: flex; + align-items: center; + } + &-author{ + padding: 0 8px 0 0; + font-size: $devui-font-size; + color: $devui-text-weak; + } + &-datetime{ + font-size: $devui-font-size; + color: $devui-aide-text; + } + &-content{ + font-size: $devui-text; + } } diff --git a/packages/devui-vue/devui/comment/src/comment.tsx b/packages/devui-vue/devui/comment/src/comment.tsx index ddb4fd6d..ac382d66 100644 --- a/packages/devui-vue/devui/comment/src/comment.tsx +++ b/packages/devui-vue/devui/comment/src/comment.tsx @@ -6,9 +6,52 @@ export default defineComponent({ name: 'DComment', props: commentProps, emits: [], - setup(props: CommentProps, ctx) { + slots: ['actions', 'author', 'avatar', 'content', 'datetime'], + setup(props, { slots }) { return () => { - return (
) + const getSlots = function (className: string) { + return ( +
+ {slots[className]?.()} +
+ ) + } + const setSlot = function (vnode: any) { + let vnodeEnum = Object.keys(vnode) + vnodeEnum.forEach((item: any) => { + getSlots(item) + }) + } + const actions = props.actions ?? slots.actions?.(); + const author = props.author ?? slots.author?.(); + const avatar = props.avatar ?? slots.avatar?.(); + const content = props.content ?? slots.content?.(); + const datetime = props.datetime ?? slots.datetime?.(); + + return ( +
+
+ {avatar} +
+
+
+
+ {author} +
+
+ {datetime} +
+
+
+ {content} +
+
+ {actions} +
+
+ +
+ ) } } }) diff --git a/packages/devui-vue/devui/comment/src/getSlot.ts b/packages/devui-vue/devui/comment/src/getSlot.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/devui-vue/src/app.vue b/packages/devui-vue/src/app.vue index 76ccddf5..06669572 100644 --- a/packages/devui-vue/src/app.vue +++ b/packages/devui-vue/src/app.vue @@ -1,12 +1,27 @@ diff --git a/packages/devui-vue/src/main.ts b/packages/devui-vue/src/main.ts index 01433bca..1068d5a8 100644 --- a/packages/devui-vue/src/main.ts +++ b/packages/devui-vue/src/main.ts @@ -1,4 +1,7 @@ import { createApp } from 'vue' import App from './App.vue' - -createApp(App).mount('#app') +import { Comment } from '../devui/comment/index' +import { Avatar } from '../devui/avatar/index' +import { Tooltip } from '../devui/tooltip/index' +import '../devui/comment/src/comment.scss' +createApp(App).use(Comment).use(Avatar).use(Tooltip).mount('#app') -- Gitee From 369a55a03e0747ab4ca81f500cc7824c5e46688a Mon Sep 17 00:00:00 2001 From: lishiyao Date: Sun, 21 Nov 2021 19:52:19 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E6=9C=80=E6=96=B0=E6=9B=B4?= =?UTF-8?q?=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/comment/index.ts | 2 +- packages/devui-vue/devui/comment/src/comment.scss | 3 +++ packages/devui-vue/devui/comment/src/comment.tsx | 1 - packages/devui-vue/src/app.vue | 9 +++++++-- packages/devui-vue/src/main.ts | 3 ++- 5 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/devui-vue/devui/comment/index.ts b/packages/devui-vue/devui/comment/index.ts index 78efe3af..b4037ca1 100644 --- a/packages/devui-vue/devui/comment/index.ts +++ b/packages/devui-vue/devui/comment/index.ts @@ -10,7 +10,7 @@ export { Comment } export default { title: 'Comment 评论', category: '其他', - status: '5%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '50%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 install(app: App): void { app.use(Comment as any) } diff --git a/packages/devui-vue/devui/comment/src/comment.scss b/packages/devui-vue/devui/comment/src/comment.scss index 8fb9aebf..3c7cebc5 100644 --- a/packages/devui-vue/devui/comment/src/comment.scss +++ b/packages/devui-vue/devui/comment/src/comment.scss @@ -25,4 +25,7 @@ &-content{ font-size: $devui-text; } + &-actions{ + margin: 12px 0 0; + } } diff --git a/packages/devui-vue/devui/comment/src/comment.tsx b/packages/devui-vue/devui/comment/src/comment.tsx index ac382d66..0c6e8d0c 100644 --- a/packages/devui-vue/devui/comment/src/comment.tsx +++ b/packages/devui-vue/devui/comment/src/comment.tsx @@ -49,7 +49,6 @@ export default defineComponent({ {actions} - ) } diff --git a/packages/devui-vue/src/app.vue b/packages/devui-vue/src/app.vue index 06669572..247419ea 100644 --- a/packages/devui-vue/src/app.vue +++ b/packages/devui-vue/src/app.vue @@ -9,10 +9,15 @@ 时间 + diff --git a/packages/devui-vue/src/main.ts b/packages/devui-vue/src/main.ts index 1068d5a8..39262a6e 100644 --- a/packages/devui-vue/src/main.ts +++ b/packages/devui-vue/src/main.ts @@ -3,5 +3,6 @@ import App from './App.vue' import { Comment } from '../devui/comment/index' import { Avatar } from '../devui/avatar/index' import { Tooltip } from '../devui/tooltip/index' +import { Icon } from '../devui/icon/index' import '../devui/comment/src/comment.scss' -createApp(App).use(Comment).use(Avatar).use(Tooltip).mount('#app') +createApp(App).use(Comment).use(Avatar).use(Tooltip).use(Icon).mount('#app') -- Gitee From f1b37d9236b640344f51d9b491c09b1a06ff01f2 Mon Sep 17 00:00:00 2001 From: lishiyao Date: Sun, 21 Nov 2021 20:23:40 +0800 Subject: [PATCH 4/4] no message --- packages/devui-vue/src/app.vue | 21 --------------------- packages/devui-vue/src/main.ts | 7 +------ 2 files changed, 1 insertion(+), 27 deletions(-) diff --git a/packages/devui-vue/src/app.vue b/packages/devui-vue/src/app.vue index 247419ea..f51801d3 100644 --- a/packages/devui-vue/src/app.vue +++ b/packages/devui-vue/src/app.vue @@ -1,25 +1,4 @@