bkui-vue 0.0.1-beta.1 → 0.0.1-beta.101

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 j()}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:j}}function j(){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:"content"},[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"],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(n("update:modelValue",e),i)p.value=u.getCheckedNodes().map((function(e){return{text:e.pathNames.join(o),key:e.id}}));else if(0!==e.length){var t=u.getNodeByValue(e);h.value=t.pathNames.join(o)}else h.value=""};return{store:u,updateValue:f,hidePopover:function(){d.value=!1},inputClickHandler:function(e){e.stopPropagation(),d.value=!d.value},selectedText:h,panelShow:d,handleClear:function(e){e.stopPropagation(),f([])},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

@@ -0,0 +1,48 @@
+import type { ExtractPropTypes } from 'vue';
+declare const checkboxGroupProps: {
+    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;
+    };
+};
+export declare type CheckboxGroupProps = Readonly<ExtractPropTypes<typeof checkboxGroupProps>>;
+declare const _default: import("vue").DefineComponent<{
+    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;
+    };
+}, {}, 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;
+}, {
+    name: string;
+    disabled: boolean;
+    modelValue: unknown[];
+}>;
+export default _default;

package/lib/checkbox/checkbox.css

@@ -1,135 +1,77 @@
-:root {
-  --primary-color: #3a84ff;
-  --success-color: #2dcb56;
-  --warning-color: #ff9c01;
-  --danger-color: #ea3636;
-  --default-color: #63656e;
-  --font-size-base: 12px;
-  --font-size-medium: 14px;
-  --font-size-large: 16px;
-  --line-height-base: 16px;
-  --line-height-medium: 16px;
-  --line-height-large: 18px;
-  --component-size-small: 26px;
-  --component-size-base: 32px;
-  --component-size-large: 38px;
-  --border-color-base: #dcdee5;
-  --border-color-disable: #dcdee5;
-  --border-width-base: 1px;
-  --border-style-base: solid;
-  --border-radius-base: 2px;
-  --input-disabled-bg: #fafbfd;
-  --input-disabled-border: #dcdee5;
-  --input-height-base: var(--component-size-base);
-  --input-color: var(--default-color);
-  --input-bg: white;
-  --input-border-color: var(--border-color-base);
-}
-/* 存放常用变量 */
-/********************** 字体 **********************/
-/********************** 主题色 **********************/
-/* 重点表示、强调、链接以及带有明确指示性 */
-/* 描边使用 */
-/* 背景色 */
-/********************** 辅助色 **********************/
-/* 退出、删除、错误、严重警告等否定类标识 */
-/* 描边使用 */
-/* 背景色 */
-/* 警示灯引起注意类标识 */
-/* 描边使用 */
-/* 背景色 */
-/* 成功、完成、进行等肯定类标识 */
-/* 描边使用 */
-/* 背景色 */
-/********************** 中性色 **********************/
-/* 重要级文字信息、内容标题信息 */
-/* 次级标题、内容文字 主要文字使用颜色 */
-/* 三级文字标题、内容文字 */
-/* 边框内说明文字 */
-/* 按钮、表单边框颜色、禁用时文本颜色 */
-/* 表格线颜色区别表单，大描边颜色、线性色 */
-/* 表格头部背景色、禁用底色 */
-/* 大面积背景色 */
-/********************** 基础颜色 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 基础颜色-鼠标移上 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 基础颜色-激活 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 基础颜色-相应谈色 **********************/
-/* 默认 */
-/* 主要 */
-/* 信息 */
-/* 成功 */
-/* 警告 */
-/* 危险 */
-/********************** 图标大小 **********************/
-/* 最小尺寸图标 */
-/* 更小尺寸图标 */
-/* 小尺寸图标 */
-/* 正常尺寸图标 */
-/* 大尺寸图标 */
-/* 最大尺寸图标 */
-/********************** 文案 **********************/
-/* 字体 */
-/* 正常尺寸 */
-/* 小尺寸 */
-/* 大尺寸 */
-/* 主要颜色 */
-/* 次要颜色 用于 plaeholder 等 */
-/********************** 边框 **********************/
-/* 边框色 */
-/* 表单输入框色 */
-/* 表单输入框激活色 */
-/********************** 其它 **********************/
-/* 滚动条背景色 */
-/********************** 层级管理 **********************/
-/* 下拉菜单层 */
-/* @dropdownMenuZIndex: 50; */
-/* 下拉选框层 */
-/* @selectorZIndex: 100; */
-/* 日期选框层 */
-/* @dateZIndex: 200; */
-/* 文字提示层 */
-/* @tooltipZIndex: 500; */
-/* 确认提示层 */
-/* @toolboxZIndex: 700; */
-/* 加载层 */
-/* @loadingZIndex: 1000; */
-/* 消息提示层 */
-/* @messageZIndex: 2000; */
-/* 侧弹层 */
-/* @sideSliderZIndex: 1500; */
-/* 对话框层 */
-/* @dialogZIndex: 2000; */
 .bk-checkbox {
+  display: inline-flex;
+  justify-self: center;
   margin-right: 30px;
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: normal;
+  color: #63656e;
+  cursor: pointer;
+  user-select: none;
+}
+.bk-checkbox.is-checked .bk-checkbox-input {
+  background: #3a84ff;
+  border-color: #3a84ff;
+  transition: all 0.1s;
+}
+.bk-checkbox.is-checked .bk-checkbox-input::after {
+  position: absolute;
+  top: 1px;
+  left: 5px;
+  width: 4px;
+  height: 8px;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
+  content: '';
+  transform: scaleY(1) rotate(45deg);
+  transform-origin: center;
+}
+.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;
 }
-.bk-checkbox-input {
+.bk-checkbox.is-disabled .bk-checkbox-input {
+  background: #fafbfd;
+  border-color: #dcdee5;
+}
+.bk-checkbox.is-disabled .bk-checkbox-input::after {
+  background: #dcdee5;
+}
+.bk-checkbox.is-disabled.is-checked .bk-checkbox-input {
+  background: #dcdee5;
+}
+.bk-checkbox .bk-checkbox-input {
   position: relative;
   display: inline-block;
   width: 16px;
   height: 16px;
-  border-radius: 50%;
+  margin-right: 5px;
+  vertical-align: middle;
   border: 1px solid #979ba5;
-  background-color: #fff;
-  bottom: -2px;
+  border-radius: 2px;
 }
-.bk-checkbox-text {
-  padding-left: 5px;
+.bk-checkbox .bk-checkbox-original {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 0;
+  height: 0;
+}
+.bk-checkbox .bk-checkbox-label {
+  display: inline-block;
+  vertical-align: middle;
 }

package/lib/checkbox/checkbox.d.ts

@@ -0,0 +1,108 @@
+import type { ExtractPropTypes } from 'vue';
+export declare const checkboxProps: {
+    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>;
+};
+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>;
+    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>;
+}, {
+    isFocus: import("vue").Ref<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<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>;
+}>> & {
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    disabled: boolean;
+    modelValue: string | number | boolean;
+    trueLabel: string | number | boolean;
+    falseLabel: string | number | boolean;
+    checked: boolean;
+    indeterminate: boolean;
+    beforeChange: (...args: any[]) => any;
+}>;
+export default _default;

package/lib/checkbox/checkbox.less

@@ -1,20 +1,98 @@
 @import '../styles/themes/themes.less';
 
 .@{bk-prefix}-checkbox {
+  display: inline-flex;
+  justify-self: center;
   margin-right: 30px;
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: normal;
+  color: #63656e;
+  cursor: pointer;
+  user-select: none;
 
-  &-input {
+  &.is-checked {
+    .bk-checkbox-input {
+      background: @primary-color;
+      border-color: @primary-color;
+      transition: all .1s;
+
+      &::after {
+        position: absolute;
+        top: 1px;
+        left: 5px;
+        width: 4px;
+        height: 8px;
+        border: 2px solid #fff;
+        border-top: 0;
+        border-left: 0;
+        content: '';
+        transform: scaleY(1) rotate(45deg);
+        transform-origin: center;
+      }
+    }
+  }
+
+  &.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%);
+      }
+    }
+  }
+
+  &.is-disabled {
+    color: #c4c6cc;
+    cursor: not-allowed;
+
+    .bk-checkbox-input {
+      background: #fafbfd;
+      border-color: @disable-color;
+
+      &::after {
+        background: @disable-color;
+      }
+    }
+
+    &.is-checked {
+      .bk-checkbox-input {
+        background: @disable-color;
+      }
+    }
+  }
+
+  .bk-checkbox-input {
     position: relative;
     display: inline-block;
     width: 16px;
     height: 16px;
-    border-radius: 50%;
+    margin-right: 5px;
+    vertical-align: middle;
     border: 1px solid #979ba5;
-    background-color: #fff;
-    bottom: -2px;
+    border-radius: 2px;
+    
   }
 
-  &-text {
-    padding-left: 5px;
+  .bk-checkbox-original {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 0;
+    height: 0;
+  }
+
+  .bk-checkbox-label {
+    display: inline-block;
+    vertical-align: middle;
   }
 }