支持多框架的組件庫 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示例：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用法