devcloudfe / vue-devui Goto Github PK
View Code? Open in Web Editor NEWUI components based on Vue3 and DevUI Design
Home Page: https://vue-devui.github.io
License: MIT License
UI components based on Vue3 and DevUI Design
Home Page: https://vue-devui.github.io
License: MIT License
latest
latest
https://vue-devui.github.io/components/tabs/#options-%E7%B1%BB%E5%9E%8B
Options类型的右上角和右下角应该是圆角。
No response
No response
https://vue-devui.github.io/components/fullscreen/
主要测试 Fullscreen组件的以下功能:
设置是否启动全屏 v-model
设置全屏模式为普通和沉浸式 mode
设置全屏层级 z-index
测试功能和api
您好,看文档暂时没有 CDN 的方式引入。
请问会提供静态引入的方式吗?
想在 AppCube 中使用 vue-devui,
不知道可不可行。
多个组件都需要做虚拟滚动,比如Table、Tree、Select等,建议封装成通用组件,
针对点击页面空白区域关闭弹出层,目前发现不同组件的实现方式:
popover
组件中,通过指令clickoutsideDirective
的方式实现。select
组件中,通过钩子useSelectOutsideClick
的方式实现。建议将此能力提取为钩子,组件间共用。
v1.0.0-beta.12
3.1.1
https://vue-devui.github.io/components/button/
API列表中,没有showLoading
的说明。
修正文档中存在的问题
No response
No response
2022.4.8 更新
1.0版本范围内40个组件的ESLint
问题已全部修复,L0单元测试已全部补齐!🎉🥳
2022.3.31 更新
ESLint
和单元测试最新进展如下:
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}"
执行以下命令可以检测存在的eslint
和stylelint
问题,并修复能修复的问题:
pnpm eslint
pnpm stylelint
请大家通过执行以上命令,发现自己负责的组件的问题,并进行修复,修复经验可通过直接回复此issue
进行经验的沉淀,供其他田主参考。
v1.0.0-beta.12
3.1.1
https://vue-devui.github.io/components/grid/
文案应修改为:Justify start
。
No response
No response
在dev分支合入main分支的时候,根据commit message,自动生成changelog,内容放到子包的CHANGELOG.md
文件中
https://vue-devui.github.io/components/button/
主要测试 Button 组件的以下功能:
@click
2022.4.8 更新
1.0版本范围内40个组件的ESLint问题已全部修复,L0单元测试已全部补齐!🎉🥳
2022.3.31 更新
eslint
和单元测试最新进展如下:
为了保障组件质量,核心功能不出问题,每个组件都应该有完善的单元测试,对每一个组件的功能和涉及的api进行测试。
主要涉及以下部分:
执行以下命令:
pnpm test --filter vue-devui
输出结果概览:
Test Suites: 10 failed, 43 passed, 53 total
Tests: 28 failed, 213 passed, 241 total
目前还有28个单元测试未通过,需要田主修改和完善这部分单元测试
执行以下命令:
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个单元测试未通过,需要田主修改和完善这部分单元测试
0.0.1
3.1.1
https://vue-devui.github.io/components/anchor/
在看源码的时候发现的,不知道是不是这样设计的,后来去看了下angular版本确实是没有销毁,从Anchor生成的时候用了window.onscroll,组件销毁的时候没做任何处理
window.onscroll = null
No response
No response
latest
latest
https://vue-devui.github.io/components/overlay/
遮罩层 =》Overlay 遮罩层
No response
No response
latest
latest
组件地址:
https://vue-devui.github.io/components/search
由于maxLength默认值设置为0,直接如下使用将无法在输入框输入字符:
<d-search v-model="searchText"></d-search>
No response
No response
No response
Vue DevUI 组件库采取认领机制进行组件的贡献,如果你想成为某个组件的田主,请在评论区评论认领 xx 组件
,比如:
认领 DatePickerPro 组件
这样你就是这个组件的田主啦,然后你可以添加微信devui-official
,让DevUI小助手把你拉到DevUI田主交流群
,成为田主俱乐部的一员,一起愉快地交流技术、共同成长🎉🎉
期待你的加入!🤝
2022.8.14 update
还有以下组件未完成:
latest
latest
在以下Button组件的警示按钮demo中可以看到:
https://vue-devui.github.io/components/button/#警示按钮
No response
No response
No response
v1.0.0-beta.12
3.1.1
https://vue-devui.github.io/components/modal/
复现步骤
No response
No response
No response
为了增加组件的用户体验,建议增加无障碍设计,比如WAI-ARIA、语义化标签、焦点管理、键盘方向键等
参考:
https://www.w3.org/WAI/fundamentals/accessibility-intro/
latest
latest
https://vue-devui.github.io/components/tree/
Tree组件缺少API说明文档
No response
No response
No response
v1.0.0-beta.12
3.1.1
https://vue-devui.github.io/components/cascader/
No response
No response
No response
多个组件都有动画效果,建议统一封装成组件
参考:
https://devui.design/components/zh-cn/design-animation/demo
latest
latest
上传一个文件,点击文件列表中的删除按钮,删除失败,报以下错误:
No response
No response
No response
v1.0.0-beta.12
3.1.1
https://vue-devui.github.io/components/toast/
import { Message } from '../toast-types';
toast
都能顺利关闭。css
写法。No response
No response
latest
latest
重复上述步骤后, 右侧图标不显示了
最近使用devui来尝试开发的时候发现的一个问题。
<a-side>
a-side组件感觉缺少了很多东西,比如断点和收缩功能。如果开发者还需要从头开始写响应式,那为什么还要选择我们的库。
<d-aside>
目前已经有packages/devui-cli
子包了,但实际上还使用了很多packages/devui-vue/devui-cli
中的代码,需要将packages/devui-vue/devui-cli
中的代码迁移到packages/devui-cli
中,并最终将packages/devui-vue/devui-cli
代码彻底移除
将packages/devui-vue/devui-cli
中的代码迁移到packages/devui-cli
中,并最终将packages/devui-vue/devui-cli
代码彻底移除
latest
latest
https://vue-devui.github.io/components/panel/
info
和primary
类型的 demo 相关联,success
和warning
类型的 demo 相关联。beforeToggle
参数类型建议改成(done: () => void) => void
,业务在执行完同步或者异步操作之后,根据执行结果选择是否调用done
函数,调用done
则表示改变折叠状态,不调用则不改变。toggle
事件应该通过 Emit
触发,不应该通过 props
传入。No response
No response
No response
latest
latest
https://github.com/DevCloudFE/vue-devui
按照文档运行项目
首次运行项目打开http://localhost:3000/正常访问,
白屏需要刷新才能正常显示
可能是 vite的pre-bundle 的问题
v1.0.0-beta.12
3.1.1
https://vue-devui.github.io/components/button/
success
和warning
类型的按钮,文字颜色应该是白色。No response
No response
latest
latest
比如Checkbox组件的api使用的是小驼峰命令风格,应该改成烤串风格:
https://vue-devui.github.io/components/checkbox/#api
其他组件同理,比如:
https://vue-devui.github.io/components/editable-select/#d-editable-select
期望组件的api、demo中的属性和事件统一用烤串命名风格
No response
No response
latest
latest
暂无
使用pnpm eslint
命令时出现typescript
版本错误
项目工作区的typescript
版本为4.5.5
比eslint
规定的版本高
SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.5.0
eslint
运行不报错
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.
No response
latest
3
http://localhost:3000/components/overlay/#%E5%BC%B9%E6%80%A7%E9%81%AE%E7%BD%A9%E5%B1%82
点击显示按钮, 然后再点击背景控制台报错
No response
No response
No response
latest
latest
https://vue-devui.github.io/components/tree/
// tree/src/composables/use-draggable.ts
// ... other code
import { cloneDeep } from 'lodash';
// ... other code
这一行引用引起 node12/14下,业务方vite构建报错,需要改为 import cloneDeep from 'lodash/cloneDeep';
node16版本未出现报错。具体原理目前还不清楚。
No response
No response
No response
latest
latest
在项目中定义单行对象即可出现错误提示
const data = {item:1}
No response
No response
eslint中·@typescript-eslint/member-delimiter-style
这个中配置为
singleline: {
delimiter: 'semi',
requireLast: true
}
要求在对象在单行模式下以分号结尾,但是prettier会自动删除对象结尾的分号,导致eslint
产生警告
期望删除相关配置,单行不需要以分号结尾
封装通用的响应式组件,这样其他组件可以直接使用,在不同分辨率下都能友好地显示
待讨论
latest
latest
https://vue-devui.github.io/components/ripple/
delay-time
参数建议重命名为delay
。No response
No response
No response
latest
latest
https://vue-devui.github.io/components/rate/#%E5%8D%8A%E9%80%89%E6%A8%A1%E5%BC%8F
点击以下链接报错:
https://vue-devui.github.io/components/rate/#%E5%8D%8A%E9%80%89%E6%A8%A1%E5%BC%8F
No response
No response
No response
latest
latest
在devui/tree/src/core/utils.ts
文件的第一行,从Anchor
组件中引入了工具函数,应该把通用的工具函数放入shared
中。
No response
No response
No response
@1.0.0-rc.1
3.2.25
https://github.com/GaoNeng-wWw/bug-repository/
在开发过程中应该由相应的代码提示
使用vscode + volar开发时没有相应的代码提示
参考:https://juejin.cn/post/7043723576121229342
可能是打包时没有生成global.d.ts文件?
目前还有部分组件没有相应的英文文档,会导致英文页面404
补充以下组件的英文文档
Form组件中使用了popover组件,其中遇到一个问题是校验时机为change的情况下,popover显示之后又关闭了的情况。
我这边排查到的原因是popover组件使用了clickoutside指令,导致先显示了popover组件,然后点击popover组件之外的区域,把popover组件给关闭了。
设置自定义样式的类名,Input
、Panel
、Search
、Alert
组件API命名用的cssClass
。
Overlay
用的是backgroundClass
,Toast
用的是styleClass
。
除自定义样式类名所使用的API命名外,其他API命名同理,是不是各组件相同功能的API采用统一的命名更合适呢?比如设置大小、设置自定义样式、设置动画时长、设置自动消失时长等。
latest
latest
https://vue-devui.github.io/components/input/#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95
input密码框输入内容,图标重叠在一起
No response
No response
No response
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.