Giter Club home page Giter Club logo

vue-devui's Introduction

DevUI Logo

Vue DevUI

Vue3 component library based on DevUI Design

English | 简体中文

🌈 Features:

  • 📦 55 high-quality components that are simple, easy to use, and flexible.
  • 🔑 Support for TypeScript.
  • ⛰️ Support for Nuxt3.
  • ⚡ Support for on-demand import.
  • 🌍 Support internationalization.
  • 🎨 Support theme customization, and built-in seven beautiful themes such as Galaxy, Sweet and Provence.

🔧 Usage

First install vue-devui with npm, yarn or pnpm.

Install with npm

npm install vue-devui --save

Install with yarn

yarn add vue-devui

Install with pnpm

pnpm add vue-devui

Then import DevUI in the main.ts file:

import { createApp } from 'vue';
import App from './App.vue';

// Import Vue DevUI component and style
import DevUI from 'vue-devui';
import 'vue-devui/style.css';

createApp(App).use(DevUI).mount('#app');

Then you can use the vue devui component(such as <d-button>) in the App.vue file:

<template>
  <d-button>Button</d-button>
</template>

🖥️ Development

git clone [email protected]:DevCloudFE/vue-devui.git
cd vue-devui
pnpm install
pnpm dev

Open your browser and visit: http://localhost:3000/.

Or you can run other command

pnpm scripts

🤝 Contributing

Welcome to join our Vue DevUI open source project!🎉

By participating in the Vue DevUI project, we can together:

  • 🔥 Learn the latest cool Vite + Vue3 + TypeScript + JSX technology.
  • 🎁 Learn how to design and develop UI components.
  • ⭐ Hone programming skills and learn excellent programming practice.
  • 🎊 Meet a group of friends who love learning and open source.

If you don't know how to start, please read our contributing guide

✨ Maintainers

Maintainers are community members who have made outstanding contributions and have been active in the DevUI community for a long time.

Outstanding contributions include, but are not limited to, the following:

  • 10 or more PRs are merged
  • Put forward more than 10 review opinions approved by PR authors
  • Provide constructive optimization advice and promote the project to become better

✨ Contributors

Contributors are community members who have 1 or more PR merged in DevUI.

Thanks goes to these wonderful people (emoji key):


Kagol

🚧 💻 📖

TinsFox

🚧 🚇

nif

💻

Zcating

🚧 💻

王凯

💻

iel

🚧 💻

chenxi24

💻

小九九

💻

AlanLee

💻

Echo

💻

GaoNeng

💻

行言

💻 🐛

devin

💻

无声

💻

sleep_fish

💻

迷心whylost

💻

X.Q. Chen

🚇 💻

葉家男孩

💻

lihai

💻

纳撸多

💻

ElsaOOo

🚧 🚇 💻

刘小迪

💻

unfound

💻

Roading

💻

Chestnut

💻

c0dedance

💻

杜庆愉

💻

linxiang

💻

掘墓忍者

💻

一个大胖子

💻 📖

Ikko Ashimine

📖

Bob

💻

populus

💻

tohalf

💻

Miliky

💻 ⚠️

MICD

💻 🐛

mingBin

💻 🐛

陈剑术

💻

Merlin218

🐛

Johnny.Liu

🐛

Yangxfeng

🐛

jCodeLife

🐛

宋小日

🐛

daviForevel

💻

lj1990111

💻

newer2333

💻

哈士奇-黄

💻


💻

Anthonio OuYang

💻

FlingYP

💻

xzxldl55

💻

79

💻

wailen

💻

jenson

💻

dbsdaicheng

⚠️

qinwencheng

💻

Angelanana

💻

joo1es

💻

handsomezyw

💻

Yoki

💻

luopei

💻

Mr.Cheng

💻

Bbbtt04

💻

Zz-ZzzZ

💻

buaalkn

💻

hxj9102

💻

Whbbit1999

💻

zhaoShijuan

💻

XiaoRIGE

💻

xiaogonggong-w

💻

hqchqc

💻

Lucky-Ya-Q

💻

xGuangsPBD

💻

cnvoid

💻

sakanaovo

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

Partner project

License

MIT

vue-devui's People

Contributors

alanlee97 avatar allcontributors[bot] avatar asdlml6 avatar c0dedance avatar chenxi24 avatar daviforevel avatar elsaooo avatar erkelost avatar fengjiancai avatar gaoneng-www avatar greatzpp avatar hxj9102 avatar imnull avatar ivestszheng avatar jensonmiao avatar jxhhdx avatar kagol avatar liuxdi avatar lj1990111 avatar lnzhangsong avatar lonely-shang avatar micd0704 avatar newer2333 avatar panyongxu avatar qinwencheng avatar situc avatar tmac2015 avatar vaebe avatar xingyan95 avatar zcating avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-devui's Issues

🐛 [Bug]: Toast组件问题

Version

v1.0.0-beta.12

Vue Version

3.1.1

Link to minimal reproduction

https://vue-devui.github.io/components/toast/

Step to reproduce

  1. use-toast-helper.ts文件中类型文件的引入路径错误。
    image

  2. 【每个消息使用单独的超时时间】demo中,successwarning类型的toast关闭的过程中,会出现如图的情况,卡一会儿之后才会完全关闭。
    image

image

  1. 依赖的vitepress-theme-demoblock库目前不支持css预处理器,所以【自定义样式】demo的演示效果失效。
    image

image

What is expected

  1. 正确路径应该为import { Message } from '../toast-types';
  2. 任何类型的toast都能顺利关闭。
  3. 移除预处理器的写法,采用普通css写法。

What is actually happening

No response

Any additional comments (optional)

No response

🐛 [Bug]: ESLint & StyleLint 问题清零

2022.4.8 更新

1.0版本范围内40个组件的ESLint问题已全部修复,L0单元测试已全部补齐!🎉🥳


2022.3.31 更新

ESLint和单元测试最新进展如下:

#211 (comment)


2022.3.28 更新

增加 cli 命令进行 eslint 和单元测试自检脚本:code-check

默认检查所有已完成组件的 eslint 和 单元测试:

pnpm cli --filter vue-devui -- code-check

只检查 eslint:

pnpm cli --filter vue-devui -- code-check -t eslint

只检查单元测试:

pnpm cli --filter vue-devui -- code-check -t unit-test

只检查部分组件的 eslint 和 单元测试:

pnpm cli --filter vue-devui -- code-check -c loading,modal

只检查部分组件的 eslint:

pnpm cli --filter vue-devui -- code-check -t eslint -c loading,modal

只检查部分组件的单元测试:

pnpm cli --filter vue-devui -- code-check -t unit-test -c loading,modal

2022.3.15 更新

  • stylelint已全部修复
  • eslint已自动修复部分问题

请田主使用以下命令进行自检,并修复自己组件存在的问题,欢迎在评论区分享修复经验:

./node_modules/.bin/eslint "packages/**/fullscreen/**/{*.ts,*.tsx}"

执行以下命令可以检测存在的eslintstylelint问题,并修复能修复的问题:

pnpm eslint
pnpm stylelint

请大家通过执行以上命令,发现自己负责的组件的问题,并进行修复,修复经验可通过直接回复此issue进行经验的沉淀,供其他田主参考。

抽取`click-outside`钩子

What problem does this feature solve

针对点击页面空白区域关闭弹出层,目前发现不同组件的实现方式:

  • popover组件中,通过指令clickoutsideDirective的方式实现。
  • select组件中,通过钩子useSelectOutsideClick的方式实现。

What does the proposed API look like

建议将此能力提取为钩子,组件间共用。

🥳 欢迎在评论区认领组件

Vue DevUI 组件库采取认领机制进行组件的贡献,如果你想成为某个组件的田主,请在评论区评论认领 xx 组件,比如:

认领 DatePickerPro 组件

这样你就是这个组件的田主啦,然后你可以添加微信devui-official,让DevUI小助手把你拉到DevUI田主交流群,成为田主俱乐部的一员,一起愉快地交流技术、共同成长🎉🎉

期待你的加入!🤝


2022.8.14 update

还有以下组件未完成:

  1. DragDrop #1035
  2. Dropdown #1041
  3. Modal #1042
  4. DatePickerPro #1045
  5. Form 更新验证规则 #1046
  6. Select #1051
  7. TreeSelect #1054
  8. Table #1058

  1. Anchor #1036
  2. NavSprite - 未启动 #1039
  3. Cascader #1043
  4. CategorySearch - 未启动 #1044
  5. MultiAutoComplete - 未启动 #1050
  6. TimePicker 自定义模板 #1052
  7. Transfer 虚拟滚动 #1053
  8. Dashboard - 未启动 #1055
  9. Gantt - 未启动 #1056
  10. QuadrantDiagram - 未启动 #1057

使用yorkie替换husky管理工程git提交

What problem does this feature solve

  1. 目前工程是使用husky进行git规范控制的,但由于现在是使用了monorepo的形式改造工程,所以我认为husky放在packages/devui-vue是不合理的
  2. 尤雨溪开源的工具yorkie,使用脚本的方式来对git钩子进行控制,并且能够移除现有的husky目录,使工程看起来更简洁

image

What does the proposed API look like

  1. 移除husky相关内容
  2. 使用yorkie进行管理

🐛 [Bug]: [d-panel]API和参数问题

Version

latest

Vue Version

latest

Link to minimal reproduction

https://vue-devui.github.io/components/panel/

Step to reproduce

  1. 【基本用法】的第二个demo和第三个展开收起状态相关联。
  2. 【多种类型】的infoprimary类型的 demo 相关联,successwarning类型的 demo 相关联。
  3. beforeToggle 参数类型建议改成(done: () => void) => void,业务在执行完同步或者异步操作之后,根据执行结果选择是否调用done函数,调用done则表示改变折叠状态,不调用则不改变。
  4. toggle 事件应该通过 Emit 触发,不应该通过 props 传入。

What is expected

No response

What is actually happening

No response

Any additional comments (optional)

No response

✨ [Feature]: Layout 是否需要更多的功能

What problem does this feature solve

最近使用devui来尝试开发的时候发现的一个问题。

<a-side>

a-side组件感觉缺少了很多东西,比如断点和收缩功能。如果开发者还需要从头开始写响应式,那为什么还要选择我们的库。

What does the proposed API look like

<d-aside>

  • collapsed
    • boolean
    • 默认收起
  • breakpoint
    • object
    • 断点
  • @Collapsed
    • Function
    • 收缩时回调

✨ [Feature]: 封装通用的响应式组件

What problem does this feature solve

封装通用的响应式组件,这样其他组件可以直接使用,在不同分辨率下都能友好地显示

What does the proposed API look like

待讨论

🐛 [Bug]: 开发过程中缺少代码提示

Version

@1.0.0-rc.1

Vue Version

3.2.25

Link to minimal reproduction

https://github.com/GaoNeng-wWw/bug-repository/

Step to reproduce

  1. clone repository
  2. yarn install / npm install
  3. 使用vscode打开clone下来的本地仓库

What is expected

在开发过程中应该由相应的代码提示

What is actually happening

使用vscode + volar开发时没有相应的代码提示

Any additional comments (optional)

参考:https://juejin.cn/post/7043723576121229342
可能是打包时没有生成global.d.ts文件?

🐛 [Bug]: 密码框切换明暗文切换后, 右侧icon图标不显示

Version

latest

Vue Version

latest

Link to minimal reproduction

API文档地址

Step to reproduce

  1. 在密码框输入任意文字
  2. 点击右侧图标, 讲暗文密码切换成明文密码
  3. 删除密码框内的文字
  4. 再次输入任意密码

What is expected

  • 密码框开启明暗文切换的功能下, 任意时刻输入文字, 右侧图标显示正常

What is actually happening

  1. 在密码框输入任意文字
  2. 点击右侧图标, 讲暗文密码切换成明文密码
  3. 删除密码框内的文字
  4. 再次输入任意密码

重复上述步骤后, 右侧图标不显示了

Any additional comments (optional)

image

🐛 [Bug]: pnpm eslint 报错

Version

latest

Vue Version

latest

Link to minimal reproduction

暂无

Step to reproduce

使用pnpm eslint命令时出现typescript版本错误
image

image

项目工作区的typescript版本为4.5.5eslint规定的版本高

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.5.0

node_modulestypescript版本
image

What is expected

eslint运行不报错

What is actually happening


WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.5.0

YOUR TYPESCRIPT VERSION: 4.5.5

Please only submit bug reports when using the officially supported version.

Any additional comments (optional)

No response

✨ [Feature]: popover组件未实现controlled属性

What problem does this feature solve

问题描述

Form组件中使用了popover组件,其中遇到一个问题是校验时机为change的情况下,popover显示之后又关闭了的情况。

我这边排查到的原因是popover组件使用了clickoutside指令,导致先显示了popover组件,然后点击popover组件之外的区域,把popover组件给关闭了。
image

解决点

  • Popover应实现controlled属性
    controlled属性,用于手动控制popover显示方式(ng版有该API
    image
    Popover组件实现controlled属性之后,Form组件中可以手动控制popover是否需要点击外部区域关闭popover

What does the proposed API look like

期望API

  • 增加controlled属性
  • 通过controlled属性控制是否执行clickoutside指令,实现手动控制是否关闭popover组件

✨ [Feature]: input组件增加聚焦,输入改变等事件

What problem does this feature solve

image
input组件没有事件API。当用户聚焦时,希望可以做一些聚焦后的动作

What does the proposed API look like

当鼠标聚焦时,可以触发onFocus事件,用户输入时,可以触发onChange事件

✨ [Feature]: 完善组件的单元测试

2022.4.8 更新

1.0版本范围内40个组件的ESLint问题已全部修复,L0单元测试已全部补齐!🎉🥳


2022.3.31 更新

eslint和单元测试最新进展如下:

#211 (comment)


What problem does this feature solve

为了保障组件质量,核心功能不出问题,每个组件都应该有完善的单元测试,对每一个组件的功能和涉及的api进行测试。
主要涉及以下部分:

  1. 没有单元测试的组件应该将单元测试补齐
  2. 已经有单元测试但不完整的,需要完善
  3. 已经有单元测试,但单元测试失败的,需要修改单元测试

执行以下命令:

pnpm test --filter vue-devui

输出结果概览:

Test Suites: 10 failed, 43 passed, 53 total
Tests:       28 failed, 213 passed, 241 total

目前还有28个单元测试未通过,需要田主修改和完善这部分单元测试

What does the proposed API look like

执行以下命令:

pnpm test --filter vue-devui

或者执行单个组件的单元测试:

pnpm test --filter vue-devui -- --testMatch **/button.spec.ts

输出结果概览:

Test Suites: 10 failed, 43 passed, 53 total
Tests:       28 failed, 213 passed, 241 total

目前还有28个单元测试未通过,需要田主修改和完善这部分单元测试

🐛 [Bug]: Tree组件引入lodash不准确,导致业务方vite构建报错

Version

latest

Vue Version

latest

Link to minimal reproduction

https://vue-devui.github.io/components/tree/

Step to reproduce

//  tree/src/composables/use-draggable.ts

// ... other code

import { cloneDeep } from 'lodash';

// ... other code

这一行引用引起 node12/14下,业务方vite构建报错,需要改为 import cloneDeep from 'lodash/cloneDeep';

node16版本未出现报错。具体原理目前还不清楚。

What is expected

No response

What is actually happening

No response

Any additional comments (optional)

No response

将packages/devui-vue/devui-cli中的代码迁移到packages/devui-cli中

What problem does this feature solve

目前已经有packages/devui-cli子包了,但实际上还使用了很多packages/devui-vue/devui-cli中的代码,需要将packages/devui-vue/devui-cli中的代码迁移到packages/devui-cli中,并最终将packages/devui-vue/devui-cli代码彻底移除

What does the proposed API look like

packages/devui-vue/devui-cli中的代码迁移到packages/devui-cli中,并最终将packages/devui-vue/devui-cli代码彻底移除

🐛 [Bug]: Button组件问题

Version

v1.0.0-beta.12

Vue Version

3.1.1

Link to minimal reproduction

https://vue-devui.github.io/components/button/

Step to reproduce

  1. button组件鼠标移上显示"手势",好像没有在组件内部设置,而是通过网站的button标签设置后生效的。
    image

  2. successwarning类型的按钮,文字颜色是黑色。
    image

  3. 事件应该是通过emit触发的吧?通过props传入回调函数有点奇怪呢? 而且,事件名字是不是叫click更好些呢?
    image

What is expected

  1. 鼠标移上显示“手势”,在组件内部设置。
  2. successwarning类型的按钮,文字颜色应该是白色。

What is actually happening

No response

Any additional comments (optional)

No response

✨ [Feature]: 不同组件的相同功能API命名尽可能统一

What problem does this feature solve

设置自定义样式的类名,InputPanelSearchAlert组件API命名用的cssClass
Overlay用的是backgroundClassToast用的是styleClass

What does the proposed API look like

除自定义样式类名所使用的API命名外,其他API命名同理,是不是各组件相同功能的API采用统一的命名更合适呢?比如设置大小、设置自定义样式、设置动画时长、设置自动消失时长等。

🐛 [Bug]: 组件api/demo文档中的属性和事件名称应该统一使用中划线分隔的烤串命名风格

Version

latest

Vue Version

latest

Link to minimal reproduction

比如Checkbox组件的api使用的是小驼峰命令风格,应该改成烤串风格:
https://vue-devui.github.io/components/checkbox/#api

Step to reproduce

其他组件同理,比如:
https://vue-devui.github.io/components/editable-select/#d-editable-select

What is expected

期望组件的api、demo中的属性和事件统一用烤串命名风格

What is actually happening

No response

Any additional comments (optional)

No response

🐛 [Bug]: Upload组件点击删除按钮报错

Version

latest

Vue Version

latest

Link to minimal reproduction

复现链接:
https://vue-devui.github.io/components/upload/#%E4%BB%BB%E6%84%8F%E5%8C%BA%E5%9F%9F%E4%B8%8A%E4%BC%A0

Step to reproduce

点击以下链接:
https://vue-devui.github.io/components/upload/#%E4%BB%BB%E6%84%8F%E5%8C%BA%E5%9F%9F%E4%B8%8A%E4%BC%A0

上传一个文件,点击文件列表中的删除按钮,删除失败,报以下错误:

image

What is expected

No response

What is actually happening

No response

Any additional comments (optional)

No response

🐛 [Bug]: Anchor组件滚动事件没有销毁

Version

0.0.1

Vue Version

3.1.1

Link to minimal reproduction

https://vue-devui.github.io/components/anchor/

Step to reproduce

在看源码的时候发现的,不知道是不是这样设计的,后来去看了下angular版本确实是没有销毁,从Anchor生成的时候用了window.onscroll,组件销毁的时候没做任何处理

What is expected

window.onscroll = null

What is actually happening

No response

Any additional comments (optional)

No response

eslint的规则配置与prettier格式化冲突

Version

latest

Vue Version

latest

Link to minimal reproduction

6918a74cf00562e4564f9330c8a17d1

Step to reproduce

在项目中定义单行对象即可出现错误提示

const data = {item:1}

What is expected

No response

What is actually happening

No response

Any additional comments (optional)

eslint中·@typescript-eslint/member-delimiter-style这个中配置为

  singleline: {
          delimiter: 'semi',
          requireLast: true
        }

要求在对象在单行模式下以分号结尾,但是prettier会自动删除对象结尾的分号,导致eslint产生警告

期望删除相关配置,单行不需要以分号结尾

✨ [Feature]: 完善组件的英文文档

What problem does this feature solve

目前还有部分组件没有相应的英文文档,会导致英文页面404

What does the proposed API look like

补充以下组件的英文文档

  1. Button
  2. Fullscreen
  3. Icon
  4. Overlay
  5. Pagination
  6. Loading
  7. Modal
  8. Notification
  9. AutoComplete
  10. Checkbox
  11. EditableSelect
  12. Switch
  13. TagInput
  14. Textarea
  15. Upload
  16. Avatar
  17. Badge
  18. Card
  19. Countdown
  20. ImagePreview
  21. Timeline
  22. Grid
  23. Layout

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.