bkui-vue 0.0.1-beta.14 → 0.0.1-beta.140

package/lib/cascader/index.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../directives"),require("../icon"),require("../popover"),require("../checkbox"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../directives","../icon","../popover","../checkbox"],t);else{var r="object"==typeof exports?t(require("../shared"),require("vue"),require("../directives"),require("../icon"),require("../popover"),require("../checkbox")):t(e["../shared"],e.vue,e["../directives"],e["../icon"],e["../popover"],e["../checkbox"]);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,((e,t,r,n,o,i)=>(()=>{var a={7162:(e,t,r)=>{r(5047)},5047:e=>{var t=function(e){"use strict";var t,r=Object.prototype,n=r.hasOwnProperty,o="function"==typeof Symbol?Symbol:{},i=o.iterator||"@@iterator",a=o.asyncIterator||"@@asyncIterator",c=o.toStringTag||"@@toStringTag";function s(e,t,r){return Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{s({},"")}catch(e){s=function(e,t,r){return e[t]=r}}function l(e,t,r,n){var o=t&&t.prototype instanceof y?t:y,i=Object.create(o.prototype),a=new C(n||[]);return i._invoke=function(e,t,r){var n=d;return function(o,i){if(n===p)throw new Error("Generator is already running");if(n===f){if("throw"===o)throw i;return O()}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=L(a,r);if(c){if(c===v)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(n===d)throw n=f,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n=p;var s=u(e,t,r);if("normal"===s.type){if(n=r.done?f:h,s.arg===v)continue;return{value:s.arg,done:r.done}}"throw"===s.type&&(n=f,r.method="throw",r.arg=s.arg)}}}(e,r,a),i}function u(e,t,r){try{return{type:"normal",arg:e.call(t,r)}}catch(e){return{type:"throw",arg:e}}}e.wrap=l;var d="suspendedStart",h="suspendedYield",p="executing",f="completed",v={};function y(){}function g(){}function m(){}var b={};s(b,i,(function(){return this}));var k=Object.getPrototypeOf,w=k&&k(k(E([])));w&&w!==r&&n.call(w,i)&&(b=w);var N=m.prototype=y.prototype=Object.create(b);function x(e){["next","throw","return"].forEach((function(t){s(e,t,(function(e){return this._invoke(t,e)}))}))}function P(e,t){function r(o,i,a,c){var s=u(e[o],e,i);if("throw"!==s.type){var l=s.arg,d=l.value;return d&&"object"==typeof d&&n.call(d,"__await")?t.resolve(d.__await).then((function(e){r("next",e,a,c)}),(function(e){r("throw",e,a,c)})):t.resolve(d).then((function(e){l.value=e,a(l)}),(function(e){return r("throw",e,a,c)}))}c(s.arg)}var o;this._invoke=function(e,n){function i(){return new t((function(t,o){r(e,n,t,o)}))}return o=o?o.then(i,i):i()}}function L(e,r){var n=e.iterator[r.method];if(n===t){if(r.delegate=null,"throw"===r.method){if(e.iterator.return&&(r.method="return",r.arg=t,L(e,r),"throw"===r.method))return v;r.method="throw",r.arg=new TypeError("The iterator does not provide a 'throw' method")}return v}var o=u(n,e.iterator,r.arg);if("throw"===o.type)return r.method="throw",r.arg=o.arg,r.delegate=null,v;var i=o.arg;return i?i.done?(r[e.resultName]=i.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,v):i:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,v)}function T(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function V(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function C(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(T,this),this.reset(!0)}function E(e){if(e){var r=e[i];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,a=function r(){for(;++o<e.length;)if(n.call(e,o))return r.value=e[o],r.done=!1,r;return r.value=t,r.done=!0,r};return a.next=a}}return{next:O}}function O(){return{value:t,done:!0}}return g.prototype=m,s(N,"constructor",m),s(m,"constructor",g),g.displayName=s(m,c,"GeneratorFunction"),e.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===g||"GeneratorFunction"===(t.displayName||t.name))},e.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,m):(e.__proto__=m,s(e,c,"GeneratorFunction")),e.prototype=Object.create(N),e},e.awrap=function(e){return{__await:e}},x(P.prototype),s(P.prototype,a,(function(){return this})),e.AsyncIterator=P,e.async=function(t,r,n,o,i){void 0===i&&(i=Promise);var a=new P(l(t,r,n,o),i);return e.isGeneratorFunction(r)?a:a.next().then((function(e){return e.done?e.value:a.next()}))},x(N),s(N,c,"Generator"),s(N,i,(function(){return this})),s(N,"toString",(function(){return"[object Generator]"})),e.keys=function(e){var t=[];for(var r in e)t.push(r);return t.reverse(),function r(){for(;t.length;){var n=t.pop();if(n in e)return r.value=n,r.done=!1,r}return r.done=!0,r}},e.values=E,C.prototype={constructor:C,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(V),!e)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=t)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var r=this;function o(n,o){return c.type="throw",c.arg=e,r.next=n,o&&(r.method="next",r.arg=t),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],c=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var s=n.call(a,"catchLoc"),l=n.call(a,"finallyLoc");if(s&&l){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(s){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!l)throw new Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(e,t){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===e||"continue"===e)&&i.tryLoc<=t&&t<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=e,a.arg=t,i?(this.method="next",this.next=i.finallyLoc,v):this.complete(a)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),v},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.finallyLoc===e)return this.complete(r.completion,r.afterLoc),V(r),v}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.tryLoc===e){var n=r.completion;if("throw"===n.type){var o=n.arg;V(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:E(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),v}},e}(e.exports);try{regeneratorRuntime=t}catch(e){"object"==typeof globalThis?globalThis.regeneratorRuntime=t:Function("r","regeneratorRuntime = r")(t)}},5800:e=>{"use strict";e.exports=i},4061:e=>{"use strict";e.exports=r},6870:e=>{"use strict";e.exports=n},5537:e=>{"use strict";e.exports=o},4212:t=>{"use strict";t.exports=e},748:e=>{"use strict";e.exports=t}},c={};function s(e){var t=c[e];if(void 0!==t)return t.exports;var r=c[e]={exports:{}};return a[e](r,r.exports,s),r.exports}s.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return s.d(t,{a:t}),t},s.d=(e,t)=>{for(var r in t)s.o(t,r)&&!s.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l={};return(()=>{"use strict";s.r(l),s.d(l,{BkCascader:()=>m,BkCascaderPanel:()=>u,default:()=>b});var e=s(4212),t=s(748),r=s(4061),n=s(6870),o=s(5537),i=s.n(o);s(7162),Symbol("BkSelect"),Symbol("BkOptionGroup");var a=s(5800),c=s.n(a);const u=(0,t.defineComponent)({name:"CascaderPanel",props:{store:e.PropTypes.object.def({})},emits:["input"],setup:function(r,n){var o=n.emit,i=r.store,a=(0,t.reactive)({list:[r.store.getNodes()]}),c=(0,t.ref)([]),s=(0,t.ref)([]),l=function(e){e.config.multiple?s.value=i.getCheckedNodes().map((function(e){return e.path})):s.value=e.path,o("input",s.value)},u=function(e){var t;e.isDisabled||(a.list=a.list.slice(0,e.level),c.value=c.value.slice(0,e.level-1),(null===(t=e.children)||void 0===t?void 0:t.length)&&(a.list.push(e.children),c.value.push(e)))};return{menus:a,activePath:c,nodeExpandHandler:u,isNodeInPath:function(e){return(c.value[e.level-1]||{}).id===e.id},nodeEvent:function(e){var t=e.config,r=t.trigger,n=t.checkAnyLevel,o=t.multiple;return{onClick:function(t){e.isLeaf&&!o||t.stopPropagation(),"click"===r&&u(e),n&&!o&&l(e),e.isLeaf&&!o&&l(e)},onMouseenter:function(){"hover"===r&&u(e)}}},isCheckedNode:function(t,r){return!t.config.multiple&&(0,e.arrayEqual)(r,t.path)},checkValue:s,nodeClear:function(){o("input",[])},checkNode:function(e,t){e.setNodeCheck(t),l(e)}}},render:function(){var e=this;return(0,t.createVNode)("div",{class:"bk-cascader-panel-wrapper"},[this.menus.list.map((function(r){return(0,t.createVNode)("ul",{class:"bk-cascader-panel"},[r.map((function(r){return(0,t.createVNode)("li",(0,t.mergeProps)({class:["bk-cascader-node",{"is-selected":e.isNodeInPath(r)},{"is-disabled":r.isDisabled},{"is-checked":e.isCheckedNode(r,e.checkValue)}]},e.nodeEvent(r)),[r.config.multiple&&(0,t.createVNode)(c(),{disabled:r.isDisabled,modelValue:r.checked,"onUpdate:modelValue":function(e){return r.checked=e},onChange:function(t){return e.checkNode(r,t)}},null),(0,t.createVNode)("span",{class:"bk-cascader-node-name"},[r.name]),r.isLeaf?"":(0,t.createVNode)(n.AngleRight,{class:"icon-angle-right"},null)])}))])}))])}});function d(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function h(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function p(e,t,r){return t&&h(e.prototype,t),r&&h(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e}const f=function(){function e(t,r,n){d(this,e),this.data=t,this.config=r,this.parent=n||null,this.level=this.parent?this.parent.level+1:1,this.initState()}return p(e,[{key:"initState",value:function(){var t,r=this,n=this.config,o=n.idKey,i=n.nameKey,a=n.childrenKey;this.id=this.data[o],this.name=this.data[i],this.loading=!1,this.checked=!1;var c=this.data[a];this.children=(c||[]).map((function(t){return new e(t,r.config,r)})),this.hasChildren=0!==(null===(t=this.children)||void 0===t?void 0:t.length),this.pathNodes=this.calculateNodesPath(),this.path=this.pathNodes.map((function(e){return e.id})),this.pathNames=this.pathNodes.map((function(e){return e.name}))}},{key:"isLeaf",get:function(){return!this.hasChildren}},{key:"isDisabled",get:function(){return this.data.disabled}},{key:"setNodeCheck",value:function(e){this.checked=e}},{key:"calculateNodesPath",value:function(){for(var e=[this],t=this.parent;t;)e.unshift(t),t=t.parent;return e}}]),e}();var v=function e(t,r){return t.reduce((function(t,n){return n.isLeaf?t.push(n):(!r&&t.push(n),t=t.concat(e(n.children,r))),t}),[])};const y=function(){function t(r){var n=this;d(this,t);var o=r.list;this.data=o,this.config=(0,e.filterProperty)(r,["list"]),this.nodes=this.data.map((function(e){return new f(e,n.config)}))}return p(t,[{key:"getNodes",value:function(){return this.nodes}},{key:"getFlattedNodes",value:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return v(this.nodes,e)}},{key:"getCheckedNodes",value:function(){return this.getFlattedNodes().filter((function(e){return e.checked}))}},{key:"getNodeByValue",value:function(t){var r;return null!==(r=this.getFlattedNodes().filter((function(r){return(0,e.arrayEqual)(r.path,t)}))[0])&&void 0!==r?r:null}}]),t}(),g=(0,t.defineComponent)({name:"Cascader",directives:{clickoutside:r.clickoutside},components:{CascaderPanel:u,BkPopover:i()},props:{modelValue:e.PropTypes.array.def([]),list:e.PropTypes.array.def([]),placeholder:e.PropTypes.string.def("请选择"),filterable:e.PropTypes.bool.def(!1),multiple:e.PropTypes.bool.def(!1),disabled:e.PropTypes.bool.def(!1),clearable:e.PropTypes.bool.def(!0),trigger:e.PropTypes.string.def("click"),checkAnyLevel:e.PropTypes.bool.def(!1),isRemote:e.PropTypes.bool.def(!1),remoteMethod:e.PropTypes.func,showCompleteName:e.PropTypes.bool.def(!1),idKey:e.PropTypes.string.def("id"),nameKey:e.PropTypes.string.def("name"),childrenKey:e.PropTypes.string.def("children"),separator:e.PropTypes.string.def("/"),limitOneLine:e.PropTypes.bool.def(!1),extCls:e.PropTypes.string.def("")},emits:["update:modelValue","change","clear","toggle"],setup:function(e,r){var n=r.emit,o=e.separator,i=e.multiple,a=function(){var e=(0,t.ref)(!1);return{isHover:e,setHover:function(){e.value=!0},cancelHover:function(){e.value=!1}}}(),c=a.isHover,s=a.setHover,l=a.cancelHover,u=(0,t.reactive)(new y(e)),d=(0,t.ref)(!1),h=(0,t.ref)(""),p=(0,t.ref)([]),f=function(e){if(i)p.value=u.getCheckedNodes().map((function(e){return{text:e.pathNames.join(o),key:e.id}}));else{if(0===e.length)h.value="";else{var t=u.getNodeByValue(e);h.value=t.pathNames.join(o)}n("update:modelValue",e),n("change",e)}};return{store:u,updateValue:f,hidePopover:function(){d.value=!1},inputClickHandler:function(e){e.stopPropagation(),d.value=!d.value,n("toggle",d.value)},selectedText:h,panelShow:d,handleClear:function(t){t.stopPropagation(),f([]),n("clear",JSON.parse(JSON.stringify(e.modelValue)))},isHover:c,setHover:s,cancelHover:l,selectedTags:p,removeTag:function(e,t,r){r.stopPropagation();var n=JSON.parse(JSON.stringify(e));n.splice(t,1),f(n)}}},render:function(){var e=this;return(0,t.createVNode)("div",{class:["bk-cascader","bk-cascader-wrapper",this.extCls,{"bk-is-show-panel":this.panelShow,"is-unselected":0===this.modelValue.length}],tabindex:"0","data-placeholder":this.placeholder,onMouseenter:this.setHover,onMouseleave:this.cancelHover},[e.clearable&&e.isHover?(0,t.createVNode)(n.Close,{class:"bk-icon-clear-icon",onClick:e.handleClear},null):(0,t.createVNode)(n.AngleUp,{class:"bk-icon-angle-up"},null),(0,t.createVNode)(i(),{placement:"bottom-start",theme:"light bk-cascader-popover",trigger:"click",arrow:!1,class:"bk-cascader-popover-wrapper",isShow:e.panelShow,"onUpdate:isShow":function(t){return e.panelShow=t},boundary:"body"},{default:function(){return(0,t.createVNode)("div",{class:"bk-cascader-name",onClick:e.inputClickHandler},[e.multiple&&(e.limitOneLine?(0,t.createVNode)("span",null,[e.selectedText]):(0,t.createVNode)("div",{class:"cascader-tag-list"},[e.selectedTags.map((function(r,o){return(0,t.createVNode)("span",{class:"cascader-tag-item"},[(0,t.createVNode)("span",{class:"cascader-tag-item-name"},[r.text]),(0,t.createVNode)(n.Error,{class:"bk-icon-clear-icon",onClick:function(t){return e.removeTag(e.modelValue,o,t)}},null)])}))])),e.filterable?(0,t.createVNode)("input",{class:"bk-cascader-search-input",type:"text",placeholder:e.placeholder},null):(0,t.createVNode)("span",null,[e.selectedText])])},content:function(){return(0,t.createVNode)("div",{class:"bk-cascader-popover"},[(0,t.createVNode)(u,{store:e.store,onInput:function(t){return e.updateValue(t)}},null)])}})])}});var m=(0,e.withInstallProps)(g,{CascaderPanel:u});const b=m})(),l})()));

package/lib/cascader/interface.d.ts

@@ -0,0 +1,44 @@
+export interface IPanel {
+    id: string;
+    name: string;
+    disabled?: boolean;
+    children?: IPanel;
+}
+export interface INodeConfig {
+    multiple: boolean;
+}
+export interface INode {
+    checked: boolean;
+    children?: (null)[] | null;
+    config: IConfig;
+    data: IData;
+    hasChildren: boolean;
+    id: string;
+    level: number;
+    loading: boolean;
+    name: string;
+    parent?: INode;
+    isDisabled: boolean;
+    isLeaf: boolean;
+    pathNames: string[];
+    path: string[];
+    setNodeCheck(status: boolean): void;
+}
+export interface IData {
+    id: string;
+    name: string;
+    disabled?: boolean;
+    children?: IData[];
+}
+export interface IConfig {
+    checkAnyLevel: boolean;
+    childrenKey: string;
+    clearable: boolean;
+    disabled: boolean;
+    idKey: string;
+    isRemote: boolean;
+    multiple: boolean;
+    nameKey: string;
+    showCompleteName: boolean;
+    trigger: string;
+}

package/lib/cascader/node.d.ts

@@ -0,0 +1,24 @@
+import { IConfig, IData, INode } from './interface';
+declare class Node implements INode {
+    data: IData;
+    config: IConfig;
+    parent: INode;
+    level: number;
+    id: string;
+    name: string;
+    loading: boolean;
+    checked: boolean;
+    children?: null[];
+    hasChildren: boolean;
+    pathNodes: INode[];
+    path: string[];
+    pathNames: string[];
+    nodes: INode[];
+    constructor(node: IData, config: any, parent?: any);
+    initState(): void;
+    get isLeaf(): boolean;
+    get isDisabled(): boolean;
+    setNodeCheck(status: boolean): void;
+    calculateNodesPath(): INode[];
+}
+export default Node;

package/lib/cascader/store.d.ts

@@ -0,0 +1,15 @@
+import { IConfig, IData, INode } from './interface';
+declare class Store {
+    data: IData[];
+    config: IConfig;
+    nodes: INode[];
+    constructor(props: any);
+    getNodes(): INode[];
+    /** 拍平节点，方便筛选 */
+    getFlattedNodes(leafOnly?: boolean): any;
+    /** 获取多选下，被选中(checked)的节点 */
+    getCheckedNodes(): any;
+    /** 根据值获得node实例 */
+    getNodeByValue(value: string[]): INode;
+}
+export default Store;

package/lib/checkbox/checkbox-group.d.ts

@@ -25,15 +25,19 @@ declare const _default: import("vue").DefineComponent<{
     disabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    name?: unknown;
-    modelValue?: unknown;
-    disabled?: unknown;
-} & {
-    name: string;
-    disabled: boolean;
-    modelValue: unknown[];
-} & {}> & {
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    name: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    modelValue: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+}>> & {
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {

package/lib/checkbox/checkbox.css

@@ -1,30 +1,54 @@
 .bk-checkbox {
-  display: inline-block;
-  margin-right: 30px;
+  display: inline-flex;
+  justify-self: center;
   font-size: 14px;
+  line-height: 18px;
   letter-spacing: normal;
   color: #63656e;
   cursor: pointer;
   user-select: none;
 }
+.bk-checkbox ~ .bk-checkbox {
+  margin-left: 30px;
+}
 .bk-checkbox.is-checked .bk-checkbox-input {
   background: #3a84ff;
   border-color: #3a84ff;
   transition: all 0.1s;
 }
+.bk-checkbox.is-checked .bk-checkbox-input.small::after {
+  width: 3px;
+  height: 6px;
+}
 .bk-checkbox.is-checked .bk-checkbox-input::after {
   position: absolute;
-  top: 1px;
-  left: 5px;
+  top: 50%;
+  left: 50%;
   width: 4px;
   height: 8px;
   border: 2px solid #fff;
   border-top: 0;
   border-left: 0;
   content: '';
-  transform: scaleY(1) rotate(45deg);
+  transform: translate(-50%, -60%) scaleY(1) rotate(45deg);
   transform-origin: center;
 }
+.bk-checkbox.is-indeterminated .bk-checkbox-input.small::after {
+  width: 6px;
+  height: 2px;
+}
+.bk-checkbox.is-indeterminated .bk-checkbox-input::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 2px;
+  background: #fff;
+  border: none;
+  border-radius: 2px;
+  content: '';
+  transform: translate(-50%, -50%);
+}
 .bk-checkbox.is-disabled {
   color: #c4c6cc;
   cursor: not-allowed;
@@ -49,6 +73,10 @@
   border: 1px solid #979ba5;
   border-radius: 2px;
 }
+.bk-checkbox .bk-checkbox-input.small {
+  width: 14px;
+  height: 14px;
+}
 .bk-checkbox .bk-checkbox-original {
   position: absolute;
   top: 0;
@@ -59,6 +87,5 @@
 }
 .bk-checkbox .bk-checkbox-label {
   display: inline-block;
-  line-height: 18px;
   vertical-align: middle;
 }

package/lib/checkbox/checkbox.d.ts

@@ -3,9 +3,7 @@ export declare const checkboxProps: {
     modelValue: import("vue-types").VueTypeDef<string | number | boolean> & {
         default: string | number | boolean;
     };
-    label: import("vue-types").VueTypeDef<string | number | boolean> & {
-        required: true;
-    };
+    label: import("vue-types").VueTypeDef<string | number | boolean>;
     trueLabel: import("vue-types").VueTypeDef<string | number | boolean> & {
         default: string | number | boolean;
     };
@@ -28,16 +26,16 @@ export declare const checkboxProps: {
     beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     };
-    size: import("vue-types").VueTypeDef<string>;
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
 };
 export declare type CheckboxProps = Readonly<ExtractPropTypes<typeof checkboxProps>>;
 declare const _default: import("vue").DefineComponent<{
     modelValue: import("vue-types").VueTypeDef<string | number | boolean> & {
         default: string | number | boolean;
     };
-    label: import("vue-types").VueTypeDef<string | number | boolean> & {
-        required: true;
-    };
+    label: import("vue-types").VueTypeDef<string | number | boolean>;
     trueLabel: import("vue-types").VueTypeDef<string | number | boolean> & {
         default: string | number | boolean;
     };
@@ -60,41 +58,54 @@ declare const _default: import("vue").DefineComponent<{
     beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     };
-    size: import("vue-types").VueTypeDef<string>;
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
 }, {
-    currentValue: import("vue").ComputedRef<string | number | boolean>;
     isFocus: import("vue").Ref<boolean>;
-    isChecked: import("vue").ComputedRef<boolean>;
+    isChecked: import("vue").Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
+    setChecked: (value?: boolean) => void;
     handleBlur: () => void;
     handleFocus: () => void;
     handleChange: (event: Event) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    modelValue?: unknown;
-    label?: unknown;
-    trueLabel?: unknown;
-    falseLabel?: unknown;
-    disabled?: unknown;
-    checked?: unknown;
-    indeterminate?: unknown;
-    beforeChange?: unknown;
-    size?: unknown;
-} & {
-    label: string | number | boolean;
-    disabled: boolean;
-    modelValue: string | number | boolean;
-    trueLabel: string | number | boolean;
-    falseLabel: string | number | boolean;
-    checked: boolean;
-    indeterminate: boolean;
-} & {
-    size?: string;
-    beforeChange?: (...args: any[]) => any;
-}> & {
+    size: string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    modelValue: import("vue-types").VueTypeDef<string | number | boolean> & {
+        default: string | number | boolean;
+    };
+    label: import("vue-types").VueTypeDef<string | number | boolean>;
+    trueLabel: import("vue-types").VueTypeDef<string | number | boolean> & {
+        default: string | number | boolean;
+    };
+    falseLabel: import("vue-types").VueTypeDef<string | number | boolean> & {
+        default: string | number | boolean;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    checked: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    indeterminate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+}>> & {
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
     disabled: boolean;
+    size: string;
     modelValue: string | number | boolean;
     trueLabel: string | number | boolean;
     falseLabel: string | number | boolean;

package/lib/checkbox/checkbox.less

@@ -1,13 +1,17 @@
 @import '../styles/themes/themes.less';
 
 .@{bk-prefix}-checkbox {
-  display: inline-block;
-  margin-right: 30px;
+  display: inline-flex;
+  justify-self: center;
   font-size: 14px;
+  line-height: 18px;
   letter-spacing: normal;
   color: #63656e;
   cursor: pointer;
   user-select: none;
+  &~.@{bk-prefix}-checkbox {
+    margin-left: 30px;
+  }
 
   &.is-checked {
     .bk-checkbox-input {
@@ -15,22 +19,53 @@
       border-color: @primary-color;
       transition: all .1s;
 
+      &.small {
+        &::after {
+          width: 3px;
+          height: 6px;
+        }
+      }
+
       &::after {
         position: absolute;
-        top: 1px;
-        left: 5px;
+        top: 50%;
+        left: 50%;
         width: 4px;
         height: 8px;
         border: 2px solid #fff;
         border-top: 0;
         border-left: 0;
         content: '';
-        transform: scaleY(1) rotate(45deg);
+        transform: translate(-50%, -60%) scaleY(1) rotate(45deg);
         transform-origin: center;
       }
     }
   }
 
+  &.is-indeterminated {
+    .bk-checkbox-input {
+      &.small {
+        &::after {
+          width: 6px;
+          height: 2px;
+        }
+      }
+
+      &::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 8px;
+        height: 2px;
+        background: #fff;
+        border: none;
+        border-radius: 2px;
+        content: '';
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+
   &.is-disabled {
     color: #c4c6cc;
     cursor: not-allowed;
@@ -61,6 +96,10 @@
     border: 1px solid #979ba5;
     border-radius: 2px;
     
+    &.small {
+      width: 14px;
+      height: 14px;
+    }
   }
 
   .bk-checkbox-original {
@@ -74,7 +113,6 @@
 
   .bk-checkbox-label {
     display: inline-block;
-    line-height: 18px;
     vertical-align: middle;
   }
 }

package/lib/checkbox/checkbox.variable.css

@@ -1,5 +1,6 @@
 :root {
   --bk-prefix: bk;
+  --popover-max-height: 216px;
   --primary-color: #3a84ff;
   --success-color: #2dcb56;
   --warning-color: #ff9c01;
@@ -8,6 +9,7 @@
   --gray-color: #979ba5;
   --light-gray: #c4c6cc;
   --white-color: white;
+  --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
@@ -17,7 +19,7 @@
   --line-height-large: 18px;
   --component-size-small: 26px;
   --component-size-base: 32px;
-  --component-size-large: 38px;
+  --component-size-large: 40px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -30,8 +32,9 @@
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
   --input-horizontal-padding: 10px;
-  --input-block-color: #f4f6fa;
-  --input-icon-size: var(--font-size-large);
+  --input-block-color: #f5f7fa;
+  --input-block-hover-color: #eaebf0;
+  --input-icon-size: var(--font-size-medium);
   --input-maxlength-color: #979ba5;
   --button-primary-hover-color: #5594fa;
   --button-danger-hover-color: #ff5656;
@@ -42,6 +45,15 @@
   --button-danger-active-color: #db2626;
   --button-success-active-color: #1ab943;
   --button-warning-active-color: #eb9000;
+  --button-selected-bg-color: #e1ecff;
+  --button-disabled-selected-bg-color: #f0f1f5;
+  --radio-font-color: #63656e;
+  --radio-active-color: #5594fa;
+  --radio-hover-border-color: #979ba5;
+  --radio-disabled-border: #dcdee5;
+  --radio-disabled-font-color: #c4c6c;
+  --radio-distable-checked-bg: #fafbfd;
+  --radio-button-checked-bg: #e1ecff;
   --fixed-navbar-background: #fff;
   --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
   --switch-default-color: #fff;
@@ -62,12 +74,16 @@
   --message-color: var(--default-color);
   --message-primary-bg-color: #f0f8ff;
   --message-primary-border-color: #e1ecff;
+  --message-primary-shadow-color: #e1e8f4;
   --message-warning-bg-color: #fff4e2;
   --message-warning-border-color: #ffe8c3;
+  --message-warning-shadow-color: #ede6db;
   --message-success-bg-color: #f2fff4;
   --message-success-border-color: #dcffe2;
+  --message-success-shadow-color: #cef0d7;
   --message-danger-bg-color: #ffeded;
   --message-danger-border-color: #ffdddd;
+  --message-danger-shadow-color: #f6dada;
   --slider-default-bg: #dcdee5;
   --slider-disable-bar-bg: #979ba5;
   --menu-bg-color: #182132;
@@ -83,34 +99,69 @@
   --date-picker-disabled-bg: #fafbfd;
   --date-picker-dropdown-mb: 4px;
   --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #575961;
+  --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
+  --cascader-panel-border-color: #dcdee5;
+  --cascader-panel-hover: #eaf3ff;
+  --cascader-panel-active: #f4f6fa;
+  --cascader-panel-disabled-bg: #fff;
 }
 .bk-checkbox {
-  display: inline-block;
-  margin-right: 30px;
+  display: inline-flex;
+  justify-self: center;
   font-size: 14px;
+  line-height: 18px;
   letter-spacing: normal;
   color: #63656e;
   cursor: pointer;
   user-select: none;
 }
+.bk-checkbox ~ .bk-checkbox {
+  margin-left: 30px;
+}
 .bk-checkbox.is-checked .bk-checkbox-input {
   background: var(--primary-color);
   border-color: var(--primary-color);
   transition: all 0.1s;
 }
+.bk-checkbox.is-checked .bk-checkbox-input.small::after {
+  width: 3px;
+  height: 6px;
+}
 .bk-checkbox.is-checked .bk-checkbox-input::after {
   position: absolute;
-  top: 1px;
-  left: 5px;
+  top: 50%;
+  left: 50%;
   width: 4px;
   height: 8px;
   border: 2px solid #fff;
   border-top: 0;
   border-left: 0;
   content: '';
-  transform: scaleY(1) rotate(45deg);
+  transform: translate(-50%, -60%) scaleY(1) rotate(45deg);
   transform-origin: center;
 }
+.bk-checkbox.is-indeterminated .bk-checkbox-input.small::after {
+  width: 6px;
+  height: 2px;
+}
+.bk-checkbox.is-indeterminated .bk-checkbox-input::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 2px;
+  background: #fff;
+  border: none;
+  border-radius: 2px;
+  content: '';
+  transform: translate(-50%, -50%);
+}
 .bk-checkbox.is-disabled {
   color: #c4c6cc;
   cursor: not-allowed;
@@ -135,6 +186,10 @@
   border: 1px solid #979ba5;
   border-radius: 2px;
 }
+.bk-checkbox .bk-checkbox-input.small {
+  width: 14px;
+  height: 14px;
+}
 .bk-checkbox .bk-checkbox-original {
   position: absolute;
   top: 0;
@@ -145,6 +200,5 @@
 }
 .bk-checkbox .bk-checkbox-label {
   display: inline-block;
-  line-height: 18px;
   vertical-align: middle;
 }

package/lib/checkbox/common.d.ts

@@ -1,4 +1,4 @@
-import type { Ref, InjectionKey } from 'vue';
+import { type InjectionKey, type Ref } from 'vue';
 import type { ICheckboxGroupContext } from './type';
 export declare const checkboxGroupKey: InjectionKey<ICheckboxGroupContext>;
 export declare function useFocus(): [Ref<boolean>, {
@@ -6,8 +6,8 @@ export declare function useFocus(): [Ref<boolean>, {
     focus: () => void;
 }];
 export declare const useCheckbox: () => {
-    value: import("vue").ComputedRef<string | number | boolean>;
-    isChecked: import("vue").ComputedRef<boolean>;
+    isChecked: Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
+    setChecked: (value?: boolean) => void;
     handleChange: (event: Event) => void;
 };