bkui-vue 0.0.1-beta.19 → 0.0.1-beta.21

package/lib/button/button.d.ts

@@ -36,12 +36,19 @@ declare const buttonProps: {
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    icon: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    iconRight: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
     disabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
     loading: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
+    laodingMode: import("vue-types").VueTypeDef<string>;
     outline: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
@@ -64,12 +71,19 @@ declare const _default: import("vue").DefineComponent<{
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    icon: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    iconRight: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
     disabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
     loading: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
+    laodingMode: import("vue-types").VueTypeDef<string>;
     outline: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
@@ -79,7 +93,7 @@ declare const _default: import("vue").DefineComponent<{
     nativeType: {
         type: IButtonNativeType;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseover")[], "click" | "mouseover", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     theme: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
@@ -90,12 +104,19 @@ declare const _default: import("vue").DefineComponent<{
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    icon: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    iconRight: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
     disabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
     loading: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
+    laodingMode: import("vue-types").VueTypeDef<string>;
     outline: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
@@ -107,13 +128,16 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     onClick?: (...args: any[]) => any;
+    onMouseover?: (...args: any[]) => any;
 }, {
     title: string;
     text: boolean;
     theme: string;
+    icon: string;
     outline: boolean;
     disabled: boolean;
     loading: boolean;
     hoverTheme: string;
+    iconRight: string;
 }>;
 export default _default;

package/lib/button/button.less

@@ -16,7 +16,7 @@
 @themeSelectors: primary, warning, success, danger;
 @sizeSelectors: small, large;
 
-.bk-button {
+.@{bk-prefix}-button {
   display: inline-block;
   height: @btnHeight;
   min-width: @btnMinWidth;
@@ -35,13 +35,12 @@
   box-sizing: border-box;
   transition: background-color ease .3s;
   appearance: none;
-
   
   each(@themeSelectors, {
     @color: '@{value}-color';
     @hoverColor: 'button-@{value}-hover-color';
     @activeColor: 'button-@{value}-active-color';
-    &.bk-button-@{value} {
+    &.@{bk-prefix}-button-@{value} {
       background-color: @@color;
       color: @white-color;
       border-color: @@color;
@@ -54,6 +53,7 @@
       &:active {
         background-color: @@activeColor;
         border-color: @@activeColor;
+        color: @white-color;
       }
 
       &.is-disabled {
@@ -82,7 +82,7 @@
       }
     }
 
-    &.bk-button-hover-@{value} {
+    &.@{bk-prefix}-button-hover-@{value} {
       &:hover {
         background-color: @@hoverColor;
         border-color: @@hoverColor;
@@ -96,14 +96,21 @@
     @sizeBtnMinWidth: '@{value}BtnMinWidth';
     @sizeBtnHeight: '@{value}BtnHeight';
     @sizeBtnPadding: '@{value}BtnPadding';
-    &.bk-button-@{value} {
+    &.@{bk-prefix}-button-@{value} {
       min-width: @@sizeBtnMinWidth;
       height: @@sizeBtnHeight;
+      line-height: @@sizeBtnHeight;
       padding: 0 @@sizeBtnPadding;
     }
   })
 ;
 
+  .@{bk-prefix}-button-loading {
+    &:not(:last-child) {
+      margin-right: @smallBtnPadding;
+    }
+  }
+
   &:hover {
     border-color: @button-default-hover-border-color;
   }
@@ -129,7 +136,7 @@
     outline: none;
   }}
 
-.bk-button-group {
+.@{bk-prefix}-button-group {
   display: inline-block;
   font-size: 0;
 
@@ -137,8 +144,8 @@
     @sizeBtnMinWidth: '@{value}BtnMinWidth';
     @sizeBtnHeight: '@{value}BtnHeight';
     @sizeBtnPadding: '@{value}BtnPadding';
-    &.bk-button-group-@{value} {
-      .bk-button {
+    &.@{bk-prefix}-button-group-@{value} {
+      .@{bk-prefix}-button {
         min-width: @@sizeBtnMinWidth;
         height: @@sizeBtnHeight;
         padding: 0 @@sizeBtnPadding;
@@ -147,7 +154,7 @@
   })
 ;
 
-  .bk-button {
+  .@{bk-prefix}-button {
     height: @btnHeight;
     min-width: @btnMinWidth;
     margin: 0 0 0 -1px;
@@ -181,4 +188,5 @@
       border-color: @primary-color;
     }
 
-  }}
+  }
+}

package/lib/button/button.variable.css

@@ -123,6 +123,7 @@
 .bk-button.bk-button-primary:active {
   background-color: var(--button-primary-active-color);
   border-color: var(--button-primary-active-color);
+  color: var(--white-color);
 }
 .bk-button.bk-button-primary.is-disabled {
   background-color: var(--disable-color);
@@ -163,6 +164,7 @@
 .bk-button.bk-button-warning:active {
   background-color: var(--button-warning-active-color);
   border-color: var(--button-warning-active-color);
+  color: var(--white-color);
 }
 .bk-button.bk-button-warning.is-disabled {
   background-color: var(--disable-color);
@@ -203,6 +205,7 @@
 .bk-button.bk-button-success:active {
   background-color: var(--button-success-active-color);
   border-color: var(--button-success-active-color);
+  color: var(--white-color);
 }
 .bk-button.bk-button-success.is-disabled {
   background-color: var(--disable-color);
@@ -243,6 +246,7 @@
 .bk-button.bk-button-danger:active {
   background-color: var(--button-danger-active-color);
   border-color: var(--button-danger-active-color);
+  color: var(--white-color);
 }
 .bk-button.bk-button-danger.is-disabled {
   background-color: var(--disable-color);
@@ -274,13 +278,18 @@
 .bk-button.bk-button-small {
   min-width: 48px;
   height: 26px;
+  line-height: 26px;
   padding: 0 12px;
 }
 .bk-button.bk-button-large {
   min-width: 74px;
   height: 38px;
+  line-height: 38px;
   padding: 0 20px;
 }
+.bk-button .bk-button-loading:not(:last-child) {
+  margin-right: 12px;
+}
 .bk-button:hover {
   border-color: var(--button-default-hover-border-color);
 }

package/lib/button/index.d.ts

@@ -7,10 +7,12 @@ declare const BkButton: {
             title: string;
             text: boolean;
             theme: string;
+            icon: string;
             outline: boolean;
             disabled: boolean;
             loading: boolean;
             hoverTheme: string;
+            iconRight: string;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             theme: import("vue-types").VueTypeDef<string> & {
                 default: string;
@@ -22,12 +24,19 @@ declare const BkButton: {
             title: import("vue-types").VueTypeValidableDef<string> & {
                 default: string;
             };
+            icon: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            };
+            iconRight: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            };
             disabled: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
             };
             loading: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
             };
+            laodingMode: import("vue-types").VueTypeDef<string>;
             outline: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
             };
@@ -39,7 +48,8 @@ declare const BkButton: {
             };
         }>> & {
             onClick?: (...args: any[]) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "text" | "theme" | "outline" | "disabled" | "loading" | "hoverTheme">;
+            onMouseover?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "text" | "theme" | "icon" | "outline" | "disabled" | "loading" | "hoverTheme" | "iconRight">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -51,7 +61,7 @@ declare const BkButton: {
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
-        $emit: (event: "click", ...args: any[]) => void;
+        $emit: (event: "click" | "mouseover", ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             theme: import("vue-types").VueTypeDef<string> & {
@@ -64,12 +74,19 @@ declare const BkButton: {
             title: import("vue-types").VueTypeValidableDef<string> & {
                 default: string;
             };
+            icon: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            };
+            iconRight: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            };
             disabled: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
             };
             loading: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
             };
+            laodingMode: import("vue-types").VueTypeDef<string>;
             outline: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
             };
@@ -81,14 +98,17 @@ declare const BkButton: {
             };
         }>> & {
             onClick?: (...args: any[]) => any;
-        }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], string, {
+            onMouseover?: (...args: any[]) => any;
+        }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseover")[], string, {
             title: string;
             text: boolean;
             theme: string;
+            icon: string;
             outline: boolean;
             disabled: boolean;
             loading: boolean;
             hoverTheme: string;
+            iconRight: string;
         }> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -120,12 +140,19 @@ declare const BkButton: {
         title: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
+        icon: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        };
+        iconRight: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        };
         disabled: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         };
         loading: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         };
+        laodingMode: import("vue-types").VueTypeDef<string>;
         outline: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         };
@@ -137,6 +164,7 @@ declare const BkButton: {
         };
     }>> & {
         onClick?: (...args: any[]) => any;
+        onMouseover?: (...args: any[]) => any;
     } & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & {} & import("vue").ComponentCustomProperties;
     __isFragment?: never;
     __isTeleport?: never;
@@ -152,12 +180,19 @@ declare const BkButton: {
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    icon: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    iconRight: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
     disabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
     loading: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
+    laodingMode: import("vue-types").VueTypeDef<string>;
     outline: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
@@ -169,14 +204,17 @@ declare const BkButton: {
     };
 }>> & {
     onClick?: (...args: any[]) => any;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", {
+    onMouseover?: (...args: any[]) => any;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseover")[], "click" | "mouseover", {
     title: string;
     text: boolean;
     theme: string;
+    icon: string;
     outline: boolean;
     disabled: boolean;
     loading: boolean;
     hoverTheme: string;
+    iconRight: string;
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin & Readonly<{
     ButtonGroup: import("vue").DefineComponent<{
         size: import("vue-types").VueTypeDef<string>;

package/lib/button/index.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../shared"),require("../loading")):"function"==typeof define&&define.amd?define(["exports","vue","../shared","../loading"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared,e.Loading)}(this,(function(e,t,o,n){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(n);function u(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var a={exports:{}};!function(e){e.exports=function(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e},e.exports.__esModule=!0,e.exports.default=e.exports}(a);var l=u(a.exports),s={theme:o.PropTypes.theme().def(""),hoverTheme:o.PropTypes.theme(["primary","warning","success","danger"]).def(""),size:o.PropTypes.size(),title:o.PropTypes.string,disabled:o.PropTypes.bool,loading:o.PropTypes.bool,outline:o.PropTypes.bool,text:o.PropTypes.bool,nativeType:{type:String}},d=t.defineComponent({name:"Button",emits:["click"],props:s,setup:function(e,r){var u,a=r.slots,s=r.attrs,d=r.emit,c=null!==(u=a.default)&&void 0!==u&&u,p="bk-button",f=t.computed((function(){var t,n=e.hoverTheme?"".concat(p,"-hover-").concat(e.hoverTheme):"",r=e.theme?"".concat(p,"-").concat(e.theme):"",i=e.hoverTheme?"":r;return o.classes((t={"is-disabled":e.disabled,"is-outline":e.outline,"is-text":e.text&&!e.hoverTheme},l(t,"".concat(p,"-").concat(e.size),""!==e.size),l(t,"no-slot",!c),t),"".concat(i," ").concat(p," ").concat(n))})),v="".concat(p,"-loading"),b=["","default"].includes(e.theme)?"default":"white",h=function(){d("click")};return function(){var o,r;return t.createVNode("button",t.mergeProps({title:e.title,disabled:e.disabled,class:f.value,type:e.nativeType},s,{onClick:h}),[e.loading?t.createVNode("div",{class:v},[t.createVNode(i.default,{theme:b,size:n.BkLoadingSize.Small},null)]):t.createVNode("div",{class:"bk-button-content-wrapper"},[t.createVNode("span",null,[null!==(r=null===(o=a.default)||void 0===o?void 0:o.call(a))&&void 0!==r?r:"default"])])])}}}),c=t.defineComponent({name:"ButtonGroup",props:{size:o.PropTypes.size()},setup:function(e,n){var r=t.computed((function(){return o.classes(l({},"bk-button-group-".concat(e.size),!!e.size),"bk-button-group")}));return function(){var e,o;return t.createVNode("div",{class:r.value},[null===(o=(e=n.slots).default)||void 0===o?void 0:o.call(e)])}}}),p=o.withInstallProps(d,{ButtonGroup:c});e.BkButton=p,e.BkButtonGroup=c,e.default=p,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../shared"),require("../loading")):"function"==typeof define&&define.amd?define(["exports","vue","../shared","../loading"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared,e.Loading)}(this,(function(e,t,o,n){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(n);function u(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var a={exports:{}};!function(e){e.exports=function(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e},e.exports.__esModule=!0,e.exports.default=e.exports}(a);var s=u(a.exports),l={theme:o.PropTypes.theme().def(""),hoverTheme:o.PropTypes.theme(["primary","warning","success","danger"]).def(""),size:o.PropTypes.size(),title:o.PropTypes.string,icon:o.PropTypes.string,iconRight:o.PropTypes.string,disabled:o.PropTypes.bool,loading:o.PropTypes.bool,laodingMode:o.PropTypes.commonType(Object.values(n.BkLoadingMode)),outline:o.PropTypes.bool,text:o.PropTypes.bool,nativeType:{type:String}},c=t.defineComponent({name:"Button",props:l,emits:["click","mouseover"],setup:function(e,i){var u,a=i.slots,l=i.attrs,c=i.emit,d=t.ref(!1),p=null!==(u=a.default)&&void 0!==u&&u,f="bk-button",v=t.computed((function(){var t,n=e.hoverTheme?"".concat(f,"-hover-").concat(e.hoverTheme):"",i=e.theme?"".concat(f,"-").concat(e.theme):"",r=e.hoverTheme?"":i;return o.classes((t={"is-disabled":e.disabled,"is-outline":e.outline,"is-text":e.text&&!e.hoverTheme},s(t,"".concat(f,"-").concat(e.size),""!==e.size),s(t,"no-slot",!p),t),"".concat(r," ").concat(f," ").concat(n))})),m=t.computed((function(){return e.text||e.outline||e.hoverTheme?d.value&&!e.text?"white":e.hoverTheme||e.theme:["","default"].includes(e.theme)?"":"white"})),h=t.computed((function(){return e.size===n.BkLoadingSize.Small?n.BkLoadingSize.Mini:n.BkLoadingSize.Small})),b=function(){c("click")},y=function(){d.value=!0,c("mouseover")},g=function(){d.value=!1};return function(){var o;return t.createVNode("button",t.mergeProps({title:e.title,disabled:e.disabled,class:v.value,type:e.nativeType},l,{onClick:b,onMouseover:y,onMouseleave:g}),[e.loading&&t.createVNode(r.default,{class:"".concat(f,"-loading"),mode:e.laodingMode,theme:m.value,size:h.value},null),a.default&&t.createVNode("span",{class:"".concat(f,"-text")},[null===(o=a.default)||void 0===o?void 0:o.call(a)])])}}}),d=t.defineComponent({name:"ButtonGroup",props:{size:o.PropTypes.size()},setup:function(e,n){var i=t.computed((function(){return o.classes(s({},"bk-button-group-".concat(e.size),!!e.size),"bk-button-group")}));return function(){var e,o;return t.createVNode("div",{class:i.value},[null===(o=(e=n.slots).default)||void 0===o?void 0:o.call(e)])}}}),p=o.withInstallProps(c,{ButtonGroup:d});e.BkButton=p,e.BkButtonGroup=d,e.default=p,Object.defineProperty(e,"__esModule",{value:!0})}));

package/lib/code-diff/code-diff.css

@@ -0,0 +1,114 @@
+@import 'highlight.js/styles/googlecode.css';
+/* stylelint-disable declaration-no-important */
+.bk-code-diff {
+  position: relative;
+}
+.bk-code-diff .d2h-file-header {
+  display: none;
+}
+.bk-code-diff.dark {
+  color: #abb2bf !important;
+  background: #282c34;
+}
+.bk-code-diff.dark .hljs {
+  color: #abb2bf !important;
+  background: #282c34;
+}
+.bk-code-diff.dark .d2h-file-side-diff:nth-child(n + 2) .d2h-code-wrapper {
+  border-left-color: #313238;
+}
+.bk-code-diff.dark pre code.hljs {
+  display: block;
+  padding: 1em;
+  overflow-x: auto;
+}
+.bk-code-diff.dark code.hljs {
+  padding: 3px 5px;
+}
+.bk-code-diff.dark .hljs-comment,
+.bk-code-diff.dark .hljs-quote {
+  font-style: italic;
+  color: #5c6370;
+}
+.bk-code-diff.dark .hljs-doctag,
+.bk-code-diff.dark .hljs-formula,
+.bk-code-diff.dark .hljs-keyword,
+.bk-code-diff.dark .hljs-params {
+  color: #c678dd;
+}
+.bk-code-diff.dark .hljs-deletion,
+.bk-code-diff.dark .hljs-name,
+.bk-code-diff.dark .hljs-section,
+.bk-code-diff.dark .hljs-selector-tag,
+.bk-code-diff.dark .hljs-subst {
+  color: #e06c75;
+}
+.bk-code-diff.dark .hljs-literal {
+  color: #56b6c2;
+}
+.bk-code-diff.dark .hljs-addition,
+.bk-code-diff.dark .hljs-attribute,
+.bk-code-diff.dark .hljs-meta .hljs-string,
+.bk-code-diff.dark .hljs-regexp,
+.bk-code-diff.dark .hljs-string {
+  color: #98c379;
+}
+.bk-code-diff.dark .hljs-attr,
+.bk-code-diff.dark .hljs-number,
+.bk-code-diff.dark .hljs-selector-attr,
+.bk-code-diff.dark .hljs-selector-class,
+.bk-code-diff.dark .hljs-selector-pseudo,
+.bk-code-diff.dark .hljs-template-variable,
+.bk-code-diff.dark .hljs-type,
+.bk-code-diff.dark .hljs-variable {
+  color: #d19a66;
+}
+.bk-code-diff.dark .hljs-bullet,
+.bk-code-diff.dark .hljs-link,
+.bk-code-diff.dark .hljs-meta,
+.bk-code-diff.dark .hljs-selector-id,
+.bk-code-diff.dark .hljs-symbol,
+.bk-code-diff.dark .hljs-title {
+  color: #61aeee;
+}
+.bk-code-diff.dark .hljs-built_in,
+.bk-code-diff.dark .hljs-class .hljs-title,
+.bk-code-diff.dark .hljs-title.class_ {
+  color: #e6c07b;
+}
+.bk-code-diff.dark .hljs-emphasis {
+  font-style: italic;
+}
+.bk-code-diff.dark .hljs-strong {
+  font-weight: 700;
+}
+.bk-code-diff.dark .hljs-link {
+  text-decoration: underline;
+}
+.bk-code-diff.dark .d2h-code-linenumber,
+.bk-code-diff.dark .d2h-code-side-linenumber {
+  font-size: 12px;
+  color: #8f8f89;
+  background: #282c34;
+  border: none;
+}
+.bk-code-diff.dark .d2h-info {
+  color: inherit;
+  background-color: transparent;
+}
+.bk-code-diff.dark .d2h-del {
+  background-color: #422321 !important;
+}
+.bk-code-diff.dark .d2h-del .hljs {
+  background: transparent;
+}
+.bk-code-diff.dark .d2h-ins {
+  background: #2d3324 !important;
+}
+.bk-code-diff.dark .d2h-ins .hljs {
+  background: transparent;
+}
+.bk-code-diff.dark .d2h-code-side-emptyplaceholder,
+.bk-code-diff.dark .d2h-emptyplaceholder {
+  background-color: #292929 !important;
+}

package/lib/code-diff/code-diff.d.ts

@@ -0,0 +1,71 @@
+import { ExtractPropTypes } from 'vue';
+import { ElementType } from '@bkui-vue/shared';
+declare const diffFormats: readonly ["side-by-side", "line-by-line"];
+export declare type DiffFormatType = ElementType<typeof diffFormats>;
+export declare const LANGUAGES: readonly ["css", "java", "javascript", "json", "scss", "less", "stylus", "shell", "bash", "cpp", "go", "xml", "python", "typescript", "sql", "ruby", "vim", "php", "perl", "powershell", "makefile"];
+export declare type LanguagesUnion = ElementType<typeof LANGUAGES>;
+declare const themes: readonly ["dark", "light"];
+export declare type ThemesUnion = ElementType<typeof themes>;
+export declare const codeDiffProps: {
+    oldContent: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    newContent: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    diffFormat: import("vue-types").VueTypeValidableDef<"side-by-side" | "line-by-line"> & {
+        default: "side-by-side" | "line-by-line";
+    };
+    diffContext: import("vue-types").VueTypeValidableDef<number>;
+    theme: import("vue-types").VueTypeValidableDef<"dark" | "light"> & {
+        default: "dark" | "light";
+    };
+    language: import("vue-types").VueTypeValidableDef<"ruby" | "css" | "java" | "javascript" | "json" | "scss" | "less" | "stylus" | "shell" | "bash" | "cpp" | "go" | "xml" | "python" | "typescript" | "sql" | "vim" | "php" | "perl" | "powershell" | "makefile"> & {
+        default: "ruby" | "css" | "java" | "javascript" | "json" | "scss" | "less" | "stylus" | "shell" | "bash" | "cpp" | "go" | "xml" | "python" | "typescript" | "sql" | "vim" | "php" | "perl" | "powershell" | "makefile";
+    };
+};
+export declare type CodeDiffPropsType = ExtractPropTypes<typeof codeDiffProps>;
+declare const _default: import("vue").DefineComponent<{
+    oldContent: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    newContent: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    diffFormat: import("vue-types").VueTypeValidableDef<"side-by-side" | "line-by-line"> & {
+        default: "side-by-side" | "line-by-line";
+    };
+    diffContext: import("vue-types").VueTypeValidableDef<number>;
+    theme: import("vue-types").VueTypeValidableDef<"dark" | "light"> & {
+        default: "dark" | "light";
+    };
+    language: import("vue-types").VueTypeValidableDef<"ruby" | "css" | "java" | "javascript" | "json" | "scss" | "less" | "stylus" | "shell" | "bash" | "cpp" | "go" | "xml" | "python" | "typescript" | "sql" | "vim" | "php" | "perl" | "powershell" | "makefile"> & {
+        default: "ruby" | "css" | "java" | "javascript" | "json" | "scss" | "less" | "stylus" | "shell" | "bash" | "cpp" | "go" | "xml" | "python" | "typescript" | "sql" | "vim" | "php" | "perl" | "powershell" | "makefile";
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any[], any, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    oldContent: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    newContent: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    diffFormat: import("vue-types").VueTypeValidableDef<"side-by-side" | "line-by-line"> & {
+        default: "side-by-side" | "line-by-line";
+    };
+    diffContext: import("vue-types").VueTypeValidableDef<number>;
+    theme: import("vue-types").VueTypeValidableDef<"dark" | "light"> & {
+        default: "dark" | "light";
+    };
+    language: import("vue-types").VueTypeValidableDef<"ruby" | "css" | "java" | "javascript" | "json" | "scss" | "less" | "stylus" | "shell" | "bash" | "cpp" | "go" | "xml" | "python" | "typescript" | "sql" | "vim" | "php" | "perl" | "powershell" | "makefile"> & {
+        default: "ruby" | "css" | "java" | "javascript" | "json" | "scss" | "less" | "stylus" | "shell" | "bash" | "cpp" | "go" | "xml" | "python" | "typescript" | "sql" | "vim" | "php" | "perl" | "powershell" | "makefile";
+    };
+}>> & {
+    [x: string & `on${any}`]: (...args: any[]) => any;
+}, {
+    theme: "dark" | "light";
+    oldContent: string;
+    newContent: string;
+    diffFormat: "side-by-side" | "line-by-line";
+    language: "ruby" | "css" | "java" | "javascript" | "json" | "scss" | "less" | "stylus" | "shell" | "bash" | "cpp" | "go" | "xml" | "python" | "typescript" | "sql" | "vim" | "php" | "perl" | "powershell" | "makefile";
+}>;
+export default _default;