支持多框架的組件庫KPC 1.0正式發佈

自從17年11月份對外公佈以來，KPC已經通過了8個月的迭代，期間發佈了幾十個正式版本，但一直沒有到1.0，由於咱們以爲1.0是個里程碑版本，咱們必須作的足夠完善才敢稱之爲1.0。而現在咱們有信心對外宣佈：KPC 1.0終於來了！

其實距離0.0.1的發佈，到如今已經1年多了，可是KPC並無收貨太多的關注，伴隨着一個接一個的小版本迭代，github上星星的數量也不緊不慢地突破100大關。但咱們並無放棄對KPC的細心呵護，每一次star，每個issue，都使咱們備受鼓舞，促使咱們打磨每個細節，力爭作出本身的特點，作到精益求精。

關注KPC的用戶應該注意到了，KPC已經兩個月沒有發版了，是的，由於咱們這段時間一直在專一1.0的開發，下面便說說這兩個月的工做成果吧。

新增4個經常使用組件

1. 走馬燈（輪播圖）組件Carousel

除了支持最基本的走馬燈效果外，Carousel還支持同時展現多個內容塊

2. 基於Monaco Editor的代碼編輯器組件Code

Monaco Editor是VSCode的web版，功能很是強大

3. 圖釘組件Affix

圖釘組件，用於在滾動頁面時，固定一些內容

4. 卡片組件Card

除了經常使用的卡片外，還支持分欄卡片

新增大量特性

除了上述新增的組件外，對現有組件的功能也進行了大量優化和改進。

1. 表格組件Table支持表頭分組，合併單元格，保存列寬信息等功能

2. 彈窗組件Dialog支持靜態方法定義帶標題的樣式

3. 時間選擇組件Timepicker支持步長設置時不展現秒鐘

4. 提示彈層組件Tooltip，新增深色主題dark，而且默認爲深色

 

5. （級聯）選擇框組件Cascader/Select新增無數據提示

6. 新增Vue/React編譯包，減小配置項

以前須要配置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示例：codesandbox.io/embed/serve…

React示例：codesandbox.io/embed/pract…

結語

沒有什麼東西是完美的，但應該保持追求完美的赤子之心。一樣，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用法