devcloudfe / ng-devui Goto Github PK
View Code? Open in Web Editor NEWAngular UI Component Library based on DevUI Design
Home Page: https://devui.design
License: MIT License
Angular UI Component Library based on DevUI Design
Home Page: https://devui.design
License: MIT License
Describe the bug
DataTable error when enabled both "resizeable" and "fixHeader"
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
this is the output from chrome
environments (please complete the following information):
Additional context
NONE
可以支持新的组件嘛(JSON FROM) 动态表单
基于json-schema
主要是button按钮在点击或划过时,一些动画或过渡效果,不是很缓和。(参照效果https://material.angular.cn/components/button/examples)
抽屉组件,那个平滑打开的效果,第一次打开的时候,过度的效果感觉不出来,第二次有感觉了,其实,过渡时间可以稍微延长一点点。
(参照效果:https://material.angular.cn/components/sidenav/examples)
增加时间轴UI组件
-增加顶部全局提示(参照功能:https://ng.ant.design/components/message/zh)
以上是我的一些建议,希望能够有所帮助。加油!!!!
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
checkboxGroup 值 可以是这样
[
{name: 'name1', value: 'value1', checked: false},
{name: 'name2', value: 'value3', checked: false}
]
也可以这样, 当用到了 valueKey时, valueKey可以是字符串也可以是回调函数
[
'value1',
'value3',
]
Screenshots
If applicable, add screenshots to help explain your problem.
environments (please complete the following information):
Additional context
Add any other context about the problem here.
背景:
将官方文档中上传控件的Demo复制到本地运行
问题:
1、选择上传的文件后需重新点击一下,才会出现文件名
2、显示出文件名后没有显示删除图标[x]
代码:
<d-form-item>
<d-form-label>PrdSN</d-form-label>
<d-form-control>
<d-single-upload
#singleuploadDrag
[enableDrop]="true"
[fileOptions]="fileOptions2"
[uploadedFiles]="uploadedFiles"
[uploadOptions]="uploadOptions"
[placeholderText]="'请拖动文件上传'"
[withoutBtn]="true"
[filePath]="'name'"
[beforeUpload]="beforeUploadFn"
(successEvent)="onSuccess($event)"
(deleteUploadedFileEvent)="deleteUploadedFile($event)"
(errorEvent)="onError($event)"
(fileDrop)="fileDrop($event)"
(fileOver)="fileOver($event)"
>
</d-single-upload>
</d-form-control>
</d-form-item>
@ViewChild('singleuploadDrag', { static: true })
singleuploadDrag: SingleUploadComponent;
public beforeUploadFn: Function;
additionalParameter = {
name: 'tom',
age: 11,
};
// accept all file types
fileOptions: IFileOptions = {
multiple: false,
};
fileOptions2: IFileOptions = {
multiple: false,
accept: '.png,.zip',
};
fileOptions3: IFileOptions = {
multiple: false,
accept: 'application/json,image/*,.csv',
};
uploadedFiles: Array<Object> = [];
uploadOptions: IUploadOptions = {
uri: '/upload',
headers: {},
additionalParameter: this.additionalParameter,
maximumSize: 0.5,
method: 'POST',
fileFieldName: 'dFile',
};
constructor(
private conditionService: ConditionService,
private dialogService: DialogService,
private http: HttpClient
) {
this.beforeUploadFn = this.beforeUpload2.bind(this);
}
onSuccess(result) {
console.log(result);
}
beforeUpload(file) {
console.log(this); // this指向SingleUploadComponent
console.log(file);
return false;
}
beforeUpload2(file) {
console.log(this); // this指向BasicComponent
console.log(file);
return true;
}
onError(error) {
console.log(error);
}
deleteUploadedFile(filePath: string) {
this.http.delete(`/files/${filePath}`).subscribe(() => {
console.log(`delete ${filePath}`);
});
}
fileDrop(files) {
console.log(files);
}
fileOver(event) {
console.log(event);
}
customUploadEvent() {
this.singleuploadDrag.upload();
}
可以加个流程图组件吗
Error: node_modules/ng-devui/form/validator-directive/validate.type.d.ts:14:5 - error TS2411: Property 'id' of type 'string | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.
14 id?: string;
~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:15:5 - error TS2411: Property 'validator' of type 'ValidatorFn | DValidatorFn | undefined' is not assignable to string index type 'string | number |
boolean | RegExp | ValidatorFn | DValidatorFn'.
15 validator?: DValidatorFn | ValidatorFn;
~~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:16:5 - error TS2411: Property 'message' of type 'string | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.
16 message?: string;
~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:17:5 - error TS2411: Property 'errorStrategy' of type '"pristine" | "dirty" | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.
17 errorStrategy?: DValidationErrorStrategy;
~~~~~~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:18:5 - error TS2411: Property 'priority' of type 'number | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.
18 priority?: number;
~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:19:5 - error TS2411: Property 'isNgValidator' of type 'boolean | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.
19 isNgValidator?: boolean;
~~~~~~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:20:5 - error TS2411: Property 'validateLevel' of type '"error" | "warning" | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.
20 validateLevel?: 'error' | 'warning';
~~~~~~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:24:5 - error TS2411: Property 'id' of type 'string | undefined' is not assignable to string index type 'string | number | boolean | RegExp | AsyncValidatorFn | DAsyncValidatorFn'.
24 id?: string;
~~
number | boolean | RegExp | AsyncValidatorFn | DAsyncValidatorFn'.
25 validator?: DAsyncValidatorFn | AsyncValidatorFn;
~~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:26:5 - error TS2411: Property 'message' of type 'string | undefined' is not assignable to string index type 'string | number | boolean | RegExp | AsyncValidatorFn | DAsyncValidatorFn'.
26 message?: string;
~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:27:5 - error TS2411: Property 'errorStrategy' of type '"pristine" | "dirty" | undefined' is not assignable to string index type 'string | number | boolean | RegExp | AsyncValidatorFn | DAsyncValidatorFn'.
27 errorStrategy?: DValidationErrorStrategy;
~~~~~~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:28:5 - error TS2411: Property 'priority' of type 'number | undefined' is not assignable to string index type 'string | number | boolean | RegExp | AsyncValidatorFn | DAsyncValidatorFn'.
28 priority?: number;
~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:29:5 - error TS2411: Property 'isNgValidator' of type 'boolean | undefined' is not assignable to string index type 'string | number | boolean | RegExp | AsyncValidatorFn | DAsyncValidatorFn'.
29 isNgValidator?: boolean;
~~~~~~~~~~~~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:30:5 - error TS2411: Property 'validateLevel' of type '"error" | "warning" | undefined' is not assignable to string index type 'string | number | boolean | RegExp | AsyncValidatorFn | DAsyncValidatorFn'.
30 validateLevel?: 'error' | 'warning';
~~~~~~~~~~~~~
请问是否考虑实现后台管理的示例项目,还有请问有官方的交流群么。qq wt dd也行啊
每次打开DevUI官网首页https://devui.design都要花5-6秒时间,有时甚至要20-30秒,建议优化
datatable设置[virtualScroll]="true"后,console显示如下错误,并且不加载数据
ERROR TypeError: table.rows[0] is undefined
buildFakeTable ng-devui-data-table.js:4650
renderFixFakeTableEl ng-devui-data-table.js:4637
ngOnChanges ng-devui-data-table.js:4381
Angular 40
RxJS 5
Angular 9
core.js:6228:19
组件 绑定对象时,最好能可以指定对象结构。像treeselect树形选择框的treeNodeIdKey、treeNodeTitleKey属性这样。
如果组件库不做单元测试,后期维护如何保障应用不会出问题. 如: table, form, tree,date,...这些比较大型的组件. Angular 对 tslint的支持后期可能会过渡到 eslint上
空项目,加载DevUIModule后,编译的时候过不去,不知道别人有遇到没
Error: node_modules/ng-devui/form/validator-directive/validate.type.d.ts:15:5 - error TS2411: Property 'id' of type 'string | undefined' is not assignable to string index type 'string
| number | boolean | RegExp | ValidatorFn | DValidatorFn'.
15 id?: string;
~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:16:5 - error TS2411: Property 'validator' of type 'ValidatorFn | DValidatorFn | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.
16 validator?: DValidatorFn | ValidatorFn;
键盘方向键 导航不起作用,按TAB不能关闭已经弹窗的
另外,打包后的体积有点大哦,空项目,只引入依赖devui,什么都没写,打包后的体积就有30多M哦
通过回调判断是否可以正常切换(boolean, false: 表示不能切换),默认是可以正常切换.
有计划提供一个通用的后台模板吗
疑似问题GIF已更新
I configure the Upload component exactly as in the example configuration, but reported the following error in the file MultipleUploadComponent.html
:
ERROR TypeError: Cannot read property 'multiple' of undefined
The following is related information:
"@angular/cli": "~7.0.2",
"@angular/core": "~7.0.0",
"typescript": "~3.1.1"
"ng-devui": "^7.0.0-rc.1",
component.html:
<ave-multiple-upload
#multipleupload
[fileOptions]="fileOptions2"
[uploadedFiles]="uploadedFiles2"
[filePath]="'name'"
[uploadOptions]="uploadOptions2"
(onSuccess)="onSuccess2($event)"
(onDeleteUploadedFile)="deleteUploadedFile2($event)"
(onError)="onError2($event)">
</ave-multiple-upload>
component.ts:
import { IFileOptions, IUploadOptions } from 'ng-devui/upload/file-uploader.types';
additionalParameter2 = {
name: 'tom',
age: 11
};
uploadOptions2: IUploadOptions = {
uri: 'http://localhost:3000/upload',
method: 'post',
additionalParameter: this.additionalParameter2,
maximumSize: 20,
checkSameName: true
};
fileOptions2: IFileOptions = {
multiple: true,
accept: '.xls,.xlsx,.pages,.mp3,.png',
};
uploadedFiles2: Array<Object> = [];
onSuccess2(result) {
console.log(result);
}
onError2(error) {
console.log(error);
}
deleteUploadedFile2(filePath: string) {
console.log(`delete ${filePath}`);
}
fileDrop(files) {
console.log(files);
}
fileOver(event) {
console.log(event);
}
没有react vue版的计划吗?
ImagePreview 图片预览组件点击放大不显示图片
正常点击图片放大后这样,官网例子
html代码
app.module.ts 部分相关代码
import { AppComponent } from './app.component';
import { DevUIModule } from 'ng-devui';
@NgModule({
declarations: [
AppComponent
],
imports: [
DevUIModule
],
目前Tooltip的实现缺少hover延时,每次鼠标不小心经过目标元素就会显示出Tooltip的内容(然后又很快消失),有点打断用户,影响用户体验,希望能增加适当的延时。
Could you explain how to import styles?
1.当表格 [fixHeader]="true" 同时[colDraggable]="true"时 拖动列报错
core.js:6228 ERROR TypeError: Cannot read property 'parentNode' of undefined at HTMLHtmlElement.DataTableHeadComponent.startBecauseMouseMoved (ng-devui-data-table.js:3479) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:41632) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480) at invokeTask (zone-evergreen.js:1621) at HTMLHtmlElement.globalZoneAwareCallback (zone-evergreen.js:1647) defaultErrorLogger @ core.js:6228 handleError @ core.js:6281 next @ core.js:42614 schedulerFn.__isAsync @ core.js:37119 __tryOrUnsub @ Subscriber.js:183 next @ Subscriber.js:122 _next @ Subscriber.js:72 next @ Subscriber.js:49 next @ Subject.js:39 emit @ core.js:37079 zone.runOutsideAngular @ core.js:41694 invoke @ zone-evergreen.js:364 run @ zone-evergreen.js:123 runOutsideAngular @ core.js:41488 onHandleError @ core.js:41691 handleError @ zone-evergreen.js:368 runTask @ zone-evergreen.js:170 invokeTask @ zone-evergreen.js:480 invokeTask @ zone-evergreen.js:1621 globalZoneAwareCallback @ zone-evergreen.js:1647 core.js:6228 ERROR TypeError: Cannot read property 'style' of undefined at HTMLHtmlElement.DataTableHeadComponent.release (ng-devui-data-table.js:3498) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:41632) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480) at invokeTask (zone-evergreen.js:1621) at HTMLHtmlElement.globalZoneAwareCallback (zone-evergreen.js:1658)
2. 能否增加表格的边框功能(单元格显示边框)而非只有行显示边框
我看了一下官网的组件,有一些基础组件,我觉得有必要扩充一下。
按钮组件
状态:基于红橙黄绿青蓝紫常见七色,来表示按钮的状态,这样会比较丰富
类型:实心、空心、虚线边框按钮、无边框等按钮
内容:纯文本、icon、icon + 文本
形状:长方形、圆形等
尺寸:大、中、小(官网已经有了)
布局,是否考虑加入栅格布局,现在栅格布局还是应用很广泛的
在DragDrop拖拽组件的第4个demo中:
https://devui.design/components/dragdrop/demo#cross-edge-switching
switchWhileCrossEdge
这个参数不管设置成true
还是false
,或者不设置,都有越边交换的效果,请问这是怎么回事呢?
一旦我把dSortable
指令去掉,就没有越边交换的效果,感觉越边交换不是由switchWhileCrossEdge
决定,而是由dSortable
指令决定的。
recurrent link: recurrent link
Describe the bug
A clear and concise description of what the bug is.
<d-checkbox name="rememberme" [label]="记住我" >
typescript 编译报错
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
environments (please complete the following information):
Additional context
Add any other context about the problem here.
ts文件:
fg:FormGroup;
types:[{name:"菜单",value:1},{name:"方法",value:2}]
constructor(private fd: FormBuilder) {
this.fg = this.fd.group({
mod_name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(20)]],
action_name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(20)]],
command_name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(20)]],
show_name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(20)]],
type: ['', Validators.required],
});
}
get fgControl() {
return this.fg.controls;
}
angular version : 9.1.12
Describe the bug
按照说明 @devui-design/icons已安装,angular.json 中 "node_modules/ng-devui/devui.min.css" 已引用。但 icon 属性引用的字体图标不显示,也不报错。请问下应该怎么使用。
<d-button icon="icon-add" bsStyle="primary"> 新建 </d-button>
类似样例中这样。
样例:<span _ngcontent-rnn-c74="" class="devui-icon-fix icon icon-add clear-right-5 ng-star-inserted"></span>
我的 <span _ngcontent-sco-c66="" class="devui-icon-fix icon icon-add clear-right-5" ng-reflect-ng-class="[object Object]"></span>
class 少了 ng-star-inserted。
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
environments (please complete the following information):
Additional context
Add any other context about the problem here.
当Angular CLI创建项目时,会出现如下提示:
Would you like to add Angular routing?
如果选择Y时,按官网引入DevUI后,ng build会报错。
Error: node_modules/ng-devui/form/validator-directive/validate.type.d.ts:14:5 - error TS2411: Property 'id' of type 'string | undefined' is not assignable to string index type 'string | number | boolean | RegExp | ValidatorFn | DValidatorFn'.
14 id?: string;
~~
node_modules/ng-devui/form/validator-directive/validate.type.d.ts:15:5 - error TS2411: Property 'validator' of type 'ValidatorFn | DValidatorFn | undefined' is not assignable to string index type 'string | number |
boolean | RegExp | ValidatorFn | DValidatorFn'.
15 validator?: DValidatorFn | ValidatorFn;
如果选择N时,按官网引入DevUI后,ng build会警告。
Warning: D:\WorkDir\ISource\Web\WebBSPortal\node_modules\ng-devui_ivy_ngcc_\fesm2015\ng-devui-theme.js depends on 'enquire.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Warning: D:\WorkDir\ISource\Web\WebBSPortal\node_modules\ng-devui_ivy_ngcc_\fesm2015\ng-devui-utils.js depends on 'date-fns/format'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Warning: D:\WorkDir\ISource\Web\WebBSPortal\node_modules\ng-devui_ivy_ngcc_\fesm2015\ng-devui-utils.js depends on 'date-fns/parse'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
不知道是否有解决办法?
Describe the bug
测试用orientation=vertical,三个splitter-pan,每个都 [collapsible]="true"。
spliterTest = [
{
size: '30%',
collapsed: false,
text: '上',
min: '5%',
},
{
size: '30%',
collapsed: true,
text: '中',
min: '5%',
},
{
size: '40%',
collapsed: true,
text: '下',
min: '5%',
},
];
<d-splitter style="height: 900px; border: 1px solid #e3e5e9;" orientation="vertical">
<d-splitter-pane
*ngFor="let pane of spliterTest"
[size]="pane.size"
[minSize]="pane.min"
[collapsible]="true"
[collapsed]="pane.collapsed"
>
<div class="pane-content">
<h2>{{ pane.text }}</h2>
</div>
</d-splitter-pane>
</d-splitter>
3.接问题2,无法拖拽。有时候拖拽过程中
Expected behavior
Additional context
辛苦了。。加油
另外,打包后的体积有点大哦,什么都没写,添加依赖后直接打包,居然有30多M
DatePicker 日期选择器使用时将dateFormat设置为“YYYY-MM-DD”,获取到的时间显示为YYYY-04-DD。也就是说只有月份显示正常。
复现步骤和demo就不写了,我这边只需将dateFormated = 'YYYY-MM-DD';就会出现
[email protected]
windows 10
chrome 80.0.3987.149(正式版本) (64 位)
解决方案 dataFormat设为 yyyy-MM-dd就正常了
d-select 中没有value属性,我的数据源是一个对象数组,有 name 和 id 属性。设想是显示name属性, value是id.
假定绑定的controllerName是 parent_id, 是数据源的id值,因为是编辑操作,现在parent_id是有一个值,这要怎么操作???
简单试用了几天,小结下:
总体来说,此框架轻量简洁美观,很适合做基础库来封装。下面是一点点建议。
(有些问题可能是本人api没了解全面所致,如有请忽略)
关于Select
只有fileterKey, 有valueKey么?
说明:
实际场景, 绑定源是 字典, 显示是字典的name, 选中后把字典的id或code传出去。
如果没有valueKey,这一步将很困难。
另外,就算选中项是对象,没有comparer,怎么标记选中呢?select如何支持async数据源?
Loading
loading的指示变量过于智能,比如支持promise, subscription...然而我现在有一个场景就是自已用bool类型管理的,然后?
关于导航
缺失导航控件。现在的手风琴并不能做菜单使用,没有配置icon的地方,除非自已封装。
关于MessageService之类的
缺少全局的AlertService和ToastService。
缺少全局ToastService,在http-intercepter中拦截到错误要报,会相当麻烦;
现在前两者我在AppComponent的模板中放了Container,然后通过一个全局单例的Service与之交互的;
可参见NgZorro
Table
Table是使用频率最高之一,个人感觉常用功能都具备了。
现在基于此封装的可以支持不同显示类型和格式化的新table用起来挺方便的。
Table建议添加format功能,不用每次显示number或日期,都要单独重载模板吧。
关于主题
现在似乎没法修改主题配色,也没法在项目中引用 颜色变量。
主题系统很多,个人觉得使用scss变量没有使用style variable好,后者不用import, 编译,最重要的是可以在模块中使用,也方便修改,ionic就是这样的。
(事实上,就是因为ngAlain的9的主题编译实在太无语了(巨慢巨费内存),我才决定重新寻求一个轻量级的框架的。)
因@devui-design/[email protected]中增加了display: inline-block
,导致时间选择器显示错位
文件路径:node_modules/@devui-design/icons/icommon/devui-icon.css
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'devui-icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
**display: inline-block;**
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
希望能开源或者增加github.io发布,方便本地部署,查看组件介绍;
例如:/devui/modal/movable.directive.ts
文件中的event.clientY以及event.clientX 是没办法保证一定能够得到期望值
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.