Support for multi-frame component library KPC 1.0 officially released

Since the 17 announced in November, KPC has undergone eight months of iteration, released the official version of dozens period, but has not been to a 1.0, because we feel that version 1.0 is a milestone, we must dare to do enough to improve referred 1.0. Now we are confident announced: KPC 1.0 is finally here!

In fact, from the 0.0.1 release, and now has more than 1 year, but no receipt KPC and too much attention, along with one by a small version of iterations, the number of stars on github too leisurely break 100 mark. But we did not give careful care of KPC, every star, every issue, so we are encouraged, prompted us to polish every detail, and strive to make their own characteristics, to achieve excellence.

Users should note that the concern of KPC, KPC has issued version two months, no, yes, because this time we have been focused on the development of 1.0, the following will talk about the results of two months of work.

Add four common components

1. The revolving door (FIG rotation) assemblyCarousel

In addition to supporting the basic effect of a revolving door, but Carouselalso simultaneously support multiple content display blocks

2. Monaco Editor based code editor componentCode

Monaco Editor is VSCode the web version, very powerful

3. pushpin componentsAffix

Pushpin component for when you scroll the page, fix some of the content

4. The card assembly ofCard

In addition to the usual card, the card also supports columns

A large number of new properties

In addition to the new components, but also the function of existing components optimized and improved a lot.

1. The table assembly Tablesupport packet header, merge cells, column width information stored functions

2. pop component Dialogsupports static methods defined with a title style

3. Select the time component Timepickerdoes not show seconds when the step size support

4. Tip bomb-tier components Tooltip, the new dark theme dark, and the default is dark

 

5. (cascade) selected frame assembly Cascader/Selectnew data suggest no

6. New Vue/Reactcompiler package, reducing configuration items

之前需要配置webpack alias才能是KPC在Vue/React下使用，现在不需要，直接引用相应的组件即可，例如：

• Vue: import Button from 'kpc/@vue/@css/components/button';
• React: import Button from 'kpc/@react/@css/components/button';

当然你也可以设置alias来简化引用路径

细节打磨

1.0中我们使用展示/隐藏(show/hide)动画来替代之前的创建/删除(create/remove)动画，同时打磨动画的细节，使动画更自然流畅。

例如：之前的版本中，如果快速点击，使一个展开的元素在收起和展开之间切换，则收起动画会立即跳至最终状态，然后再展开，这样会显得动画很突兀

而1.0中，对于上述情况，它不会跳至最终状态，而是从收起的中间状态回到展开状态，使动画更自然

文档

1.0中对部分文档进行了补充，使之更易上手。同时对文档中的示例代码，可以在CodeSandbox中打开进行预览和调试

Vue示例：https://codesandbox.io/embed/serverless-wood-n6ppy?fontsize=14

React示例：https://codesandbox.io/embed/practical-chatelet-3phlh?fontsize=14

结语

没有什么东西是完美的，但应该保持追求完美的赤子之心。同样，1.0也并非完美，还有大量工作亟待完成，它只是漫漫长征路上的第一个落脚点而已，至此，再出发，开启新的篇章...

KPC文档 github

更新日志

新增组件

1. Add 新增图钉组件Affix，用于滚动页面固定某些内容 #300
2. Add 新增走马灯（轮播图）组件Carousel #299
3. Add 新增代码编辑器组件Code，基于Monaco Editor(VSCode)封装而来 #288
4. Add 新增卡片组件Card #241

新增特性

1. Add 新增全局配置方法configure，使用configure({useWrapper: true})可以开启Dropdown/Tooltip兼容模式 #291
2. Add Tree如果初始化数据中包含children，当异步加载时，不会再次调用loadData函数去加载数据 #290
3. Add Table支持保存调整列宽后的列宽信息 #292
4. Add Table新增表头分组功能 #265
5. Add Table新增合并单元格功能 #265
6. Add Upload支持文件类型强检测，不合法是抛出error事件，因为浏览器accept属性仅仅只是建议类型，并不能限制类型 #271
7. Add Progress新增warning状态 #301
8. Add Tree支持父子Checkbox非关联模式，该模式下父子的选中状态单独控制，互不影响 #302
9. Add FormItem新增fluid属性，展示100%宽度的表单项 #303
10. Add 新增Vue/React编译包，减少webpack alias配置项 #308
11. Add Button组件新增secondary和link类型 #320
12. Add Dialog支持点击遮罩层关闭弹窗 #324
13. Add Dialog静态方法支持展示带标题title的弹窗 #324
14. Add Select和Cascader在无内容时，展示“无内容”的提示层 #321
15. Add Datepicker和Timepicker新增“确定”按钮，以方便用户关闭弹层 #322
16. Add Timepicker支持设置step时，隐藏“分钟”或/和“秒钟”的展示 #323
17. Add Tooltip新增主题支持，默认展示为dark主题 #326
18. Add Transfer新增list header扩展点，以及左右箭头按钮的控制，使之可以更灵活地定义穿梭框逻辑 #314
19. Add 当Table fixHeader设为true时，表格高度自动设为100%，然后根据父容器高度确定表格体的高度来展示滚动条 #310

组件优化

1. Refactor 优化Table hover以及滚动的性能 #310
2. Refactor 优化Slider滚动条热区，更容易点击 #307
3. Refactor 优化弹出元素动画，使用show/hide动画替代create/remove动画，使动画更流畅 #278

Bug修复

1. Fix 修复错误地引入babel-types导致可能不存在该模块而编译报错的问题 #283
2. Fix 修复Pagination当页码过长时溢出的问题 #286
3. Fix 修复Timepicker范围选择时，首次弹出如果先选择结束时间，时间取值不对的问题 #289
4. Fix 修复Table调整列宽后，如果表格容器宽度变大，会出现表格宽度小于容器宽度的情况 #293
5. Fix 修复Slider有Spinner输入框时，在设置了step的情况下，输入的过程中也会修正值，导致无法输入想要的值的问题 #294
6. Fix 修复webpack配置可能禁用了require.ensure（如：新版Create React App）导致有些异步加载的模块报错的问题 #304
7. Fix 修复Switch点击滑块，由于click事件被stopPropagation而在外部监听不到click事件的问题 #309
8. Fix 修复Table当表格高度固定时，data改变导致出现滚动条，固定表头和表格体没对齐的问题 #310
9. Fix 修复默认主题下Message icon颜色丢失的问题 #317

破坏性变更

1. Change Drawer由之前的点击抽屉外任何区域关闭抽屉，改为点击遮罩层才关闭
2. Change Datepicker在选择时间时，去掉无用的年月展示信息
3. Change 使用es6 module进行构建，例如代码编译优化 #297

文档

1. Add 支持Vue/React示例代码，在CodeSandbox中打开 #267
2. Vue/React开始文档补充CDN用法