bkui-vue 0.0.1-beta.160 → 0.0.1-beta.161

package/lib/icon/left-turn-line.d.ts

@@ -0,0 +1,4 @@
+import { FunctionalComponent } from 'vue';
+import { IIconBaseProps } from './icon';
+declare const leftTurnLine: FunctionalComponent<IIconBaseProps>;
+export default leftTurnLine;

package/lib/icon/left-turn-line.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"));else if("function"==typeof define&&define.amd)define(["vue"],t);else{var r="object"==typeof exports?t(require("vue")):t(e.vue);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,(e=>(()=>{"use strict";var t={9430:(e,t,r)=>{r.d(t,{Z:()=>i});var n=r(748);function o(e,t,r){return(0,n.h)(e.name,Object.assign(Object.assign({key:t},e.attributes),{style:"".concat(e.attributes.style," ").concat(r||"")}),(e.elements||[]).map((function(r,n){return o(r,"".concat(t,"-").concat(e.name,"-").concat(n))})))}Object.create,Object.create;var a=function(e,t){var r=Object.assign(Object.assign({},t.attrs),e),a=r.data,i=r.name,c=r.width,s=r.height,l=r.fill,u=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}(r,["data","name","width","height","fill"]),f="width: ".concat(c,"; height: ").concat(s,"; fill: ").concat(l);return(0,n.createVNode)("span",u,[o(a,i,f)])};a.inheritAttrs=!1,a.displayName="bkIcon";const i=a},748:t=>{t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o),n.d(o,{default:()=>i});var e=n(748),t=n(9430),r=JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M192 512a320 320 0 1 0 76.96-208H352v64H160V176h64v82.08A384 384 0 1 1 128 512Z"}}]}'),a=function(n,o){var a=Object.assign(Object.assign({},n),o.attrs);return(0,e.createVNode)(t.Z,(0,e.mergeProps)(a,{data:r,name:"leftTurnLine"}),null)};a.displayName="leftTurnLine",a.inheritAttrs=!1;const i=a})(),o})()));

package/lib/icon/narrow-line.d.ts

@@ -0,0 +1,4 @@
+import { FunctionalComponent } from 'vue';
+import { IIconBaseProps } from './icon';
+declare const narrowLine: FunctionalComponent<IIconBaseProps>;
+export default narrowLine;

package/lib/icon/narrow-line.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"));else if("function"==typeof define&&define.amd)define(["vue"],t);else{var r="object"==typeof exports?t(require("vue")):t(e.vue);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,(e=>(()=>{"use strict";var t={9430:(e,t,r)=>{r.d(t,{Z:()=>i});var n=r(748);function a(e,t,r){return(0,n.h)(e.name,Object.assign(Object.assign({key:t},e.attributes),{style:"".concat(e.attributes.style," ").concat(r||"")}),(e.elements||[]).map((function(r,n){return a(r,"".concat(t,"-").concat(e.name,"-").concat(n))})))}Object.create,Object.create;var o=function(e,t){var r=Object.assign(Object.assign({},t.attrs),e),o=r.data,i=r.name,c=r.width,s=r.height,l=r.fill,u=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r}(r,["data","name","width","height","fill"]),p="width: ".concat(c,"; height: ").concat(s,"; fill: ").concat(l);return(0,n.createVNode)("span",u,[a(o,i,p)])};o.inheritAttrs=!1,o.displayName="bkIcon";const i=o},748:t=>{t.exports=e}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var o=r[e]={exports:{}};return t[e](o,o.exports,n),o.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{n.r(a),n.d(a,{default:()=>i});var e=n(748),t=n(9430),r=JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M886.56 841.28l-149.12-149.12a344.64 344.64 0 1 0-45.28 45.28l149.12 149.12A32 32 0 0 0 864 896a32 32 0 0 0 22.56-54.72ZM472.32 752A280.32 280.32 0 1 1 752 472.32 280.64 280.64 0 0 1 472.32 752Z"}},{"type":"element","name":"path","attributes":{"d":"M576 448H352a32 32 0 0 0 0 64H576a32 32 0 0 0 0-64Z"}}]}'),o=function(n,a){var o=Object.assign(Object.assign({},n),a.attrs);return(0,e.createVNode)(t.Z,(0,e.mergeProps)(o,{data:r,name:"narrowLine"}),null)};o.displayName="narrowLine",o.inheritAttrs=!1;const i=o})(),a})()));

package/lib/icon/original .d.ts

@@ -0,0 +1,4 @@
+import { FunctionalComponent } from 'vue';
+import { IIconBaseProps } from './icon';
+declare const original: FunctionalComponent<IIconBaseProps>;
+export default original;

package/lib/icon/original .js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"));else if("function"==typeof define&&define.amd)define(["vue"],t);else{var r="object"==typeof exports?t(require("vue")):t(e.vue);for(var a in r)("object"==typeof exports?exports:e)[a]=r[a]}}(self,(e=>(()=>{"use strict";var t={9430:(e,t,r)=>{r.d(t,{Z:()=>i});var a=r(748);function n(e,t,r){return(0,a.h)(e.name,Object.assign(Object.assign({key:t},e.attributes),{style:"".concat(e.attributes.style," ").concat(r||"")}),(e.elements||[]).map((function(r,a){return n(r,"".concat(t,"-").concat(e.name,"-").concat(a))})))}Object.create,Object.create;var o=function(e,t){var r=Object.assign(Object.assign({},t.attrs),e),o=r.data,i=r.name,s=r.width,l=r.height,c=r.fill,p=function(e,t){var r={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(r[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(a=Object.getOwnPropertySymbols(e);n<a.length;n++)t.indexOf(a[n])<0&&Object.prototype.propertyIsEnumerable.call(e,a[n])&&(r[a[n]]=e[a[n]])}return r}(r,["data","name","width","height","fill"]),u="width: ".concat(s,"; height: ").concat(l,"; fill: ").concat(c);return(0,a.createVNode)("span",p,[n(o,i,u)])};o.inheritAttrs=!1,o.displayName="bkIcon";const i=o},748:t=>{t.exports=e}},r={};function a(e){var n=r[e];if(void 0!==n)return n.exports;var o=r[e]={exports:{}};return t[e](o,o.exports,a),o.exports}a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{a.r(n),a.d(n,{default:()=>i});var e=a(748),t=a(9430),r=JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M896 176H128a64 64 0 0 0-64 64V784a64 64 0 0 0 64 64H896a64 64 0 0 0 64-64V240A64 64 0 0 0 896 176Zm0 608H128V240H896Z"}},{"type":"element","name":"path","attributes":{"d":"M327.84 649.28h52.64V373.28H337.76A97.12 97.12 0 0 1 304 417.28a150.56 150.56 0 0 1-44.8 25.6v48a182.56 182.56 0 0 0 68.16-40Z"}},{"type":"element","name":"path","attributes":{"d":"M480.64 450.24H533.28V502.88H480.64V450.24z"}},{"type":"element","name":"path","attributes":{"d":"M480.64 596.64H533.28V649.28H480.64V596.64z"}},{"type":"element","name":"path","attributes":{"d":"M669.28 649.28h52.64V373.28H679.2a97.12 97.12 0 0 1-33.28 44 150.56 150.56 0 0 1-44.8 25.6v48a182.56 182.56 0 0 0 68.16-40Z"}}]}'),o=function(a,n){var o=Object.assign(Object.assign({},a),n.attrs);return(0,e.createVNode)(t.Z,(0,e.mergeProps)(o,{data:r,name:"original "}),null)};o.displayName="original ",o.inheritAttrs=!1;const i=o})(),n})()));

package/lib/icon/right-turn-line.d.ts

@@ -0,0 +1,4 @@
+import { FunctionalComponent } from 'vue';
+import { IIconBaseProps } from './icon';
+declare const rightTurnLine: FunctionalComponent<IIconBaseProps>;
+export default rightTurnLine;

package/lib/icon/{help.js → right-turn-line.js}

@@ -1 +1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"));else if("function"==typeof define&&define.amd)define(["vue"],t);else{var r="object"==typeof exports?t(require("vue")):t(e.vue);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,(e=>(()=>{"use strict";var t={9430:(e,t,r)=>{r.d(t,{Z:()=>i});var n=r(748);function o(e,t,r){return(0,n.h)(e.name,Object.assign(Object.assign({key:t},e.attributes),{style:"".concat(e.attributes.style," ").concat(r||"")}),(e.elements||[]).map((function(r,n){return o(r,"".concat(t,"-").concat(e.name,"-").concat(n))})))}Object.create,Object.create;var a=function(e,t){var r=Object.assign(Object.assign({},t.attrs),e),a=r.data,i=r.name,c=r.width,s=r.height,l=r.fill,p=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}(r,["data","name","width","height","fill"]),u="width: ".concat(c,"; height: ").concat(s,"; fill: ").concat(l);return(0,n.createVNode)("span",p,[o(a,i,u)])};a.inheritAttrs=!1,a.displayName="bkIcon";const i=a},748:t=>{t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o),n.d(o,{default:()=>i});var e=n(748),t=n(9430),r=JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","class":"bk-icon","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;","overflow":"hidden","viewBox":"0 0 1024 1024"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 128c212.8 0 384 171.2 384 384S724.8 896 512 896 128 724.8 128 512 299.2 128 512 128M512 64C264 64 64 264 64 512s200 448 448 448 448-200 448-448S760 64 512 64z"}},{"type":"element","name":"path","attributes":{"d":"M548.8 673.6A48 48 0 0 1 500.8 721.6 48 48 0 0 1 452.8 673.6 48 48 0 0 1 548.8 673.6z"}},{"type":"element","name":"path","attributes":{"d":"M513.6 302.4c80 0 132.8 44.8 132.8 110.4 0 41.6-20.8 72-60.8 96-40 24-48 35.2-48 62.4v14.4H464v-16c-3.2-44.8 11.2-70.4 51.2-92.8 36.8-22.4 48-35.2 48-60.8s-20.8-44.8-52.8-44.8c-28.8-1.6-52.8 19.2-56 48 0 1.6 0 1.6 0 3.2h-76.8C377.6 352 427.2 302.4 513.6 302.4z"}}]}'),a=function(n,o){var a=Object.assign(Object.assign({},n),o.attrs);return(0,e.createVNode)(t.Z,(0,e.mergeProps)(a,{data:r,name:"help"}),null)};a.displayName="help",a.inheritAttrs=!1;const i=a})(),o})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"));else if("function"==typeof define&&define.amd)define(["vue"],t);else{var r="object"==typeof exports?t(require("vue")):t(e.vue);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,(e=>(()=>{"use strict";var t={9430:(e,t,r)=>{r.d(t,{Z:()=>i});var n=r(748);function o(e,t,r){return(0,n.h)(e.name,Object.assign(Object.assign({key:t},e.attributes),{style:"".concat(e.attributes.style," ").concat(r||"")}),(e.elements||[]).map((function(r,n){return o(r,"".concat(t,"-").concat(e.name,"-").concat(n))})))}Object.create,Object.create;var a=function(e,t){var r=Object.assign(Object.assign({},t.attrs),e),a=r.data,i=r.name,c=r.width,s=r.height,l=r.fill,u=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}(r,["data","name","width","height","fill"]),p="width: ".concat(c,"; height: ").concat(s,"; fill: ").concat(l);return(0,n.createVNode)("span",u,[o(a,i,p)])};a.inheritAttrs=!1,a.displayName="bkIcon";const i=a},748:t=>{t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o),n.d(o,{default:()=>i});var e=n(748),t=n(9430),r=JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M832 512a320 320 0 1 1-76.96-208H672v64H864V176H800v82.08A384 384 0 1 0 896 512Z"}}]}'),a=function(n,o){var a=Object.assign(Object.assign({},n),o.attrs);return(0,e.createVNode)(t.Z,(0,e.mergeProps)(a,{data:r,name:"rightTurnLine"}),null)};a.displayName="rightTurnLine",a.inheritAttrs=!1;const i=a})(),o})()));

package/lib/icon/unfull-screen.d.ts

@@ -0,0 +1,4 @@
+import { FunctionalComponent } from 'vue';
+import { IIconBaseProps } from './icon';
+declare const unfullScreen: FunctionalComponent<IIconBaseProps>;
+export default unfullScreen;

package/lib/icon/unfull-screen.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"));else if("function"==typeof define&&define.amd)define(["vue"],t);else{var r="object"==typeof exports?t(require("vue")):t(e.vue);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,(e=>(()=>{"use strict";var t={9430:(e,t,r)=>{r.d(t,{Z:()=>i});var n=r(748);function a(e,t,r){return(0,n.h)(e.name,Object.assign(Object.assign({key:t},e.attributes),{style:"".concat(e.attributes.style," ").concat(r||"")}),(e.elements||[]).map((function(r,n){return a(r,"".concat(t,"-").concat(e.name,"-").concat(n))})))}Object.create,Object.create;var o=function(e,t){var r=Object.assign(Object.assign({},t.attrs),e),o=r.data,i=r.name,c=r.width,l=r.height,s=r.fill,u=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r}(r,["data","name","width","height","fill"]),p="width: ".concat(c,"; height: ").concat(l,"; fill: ").concat(s);return(0,n.createVNode)("span",u,[a(o,i,p)])};o.inheritAttrs=!1,o.displayName="bkIcon";const i=o},748:t=>{t.exports=e}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var o=r[e]={exports:{}};return t[e](o,o.exports,n),o.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{n.r(a),n.d(a,{default:()=>i});var e=n(748),t=n(9430),r=JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M384 896L320 896 320 704 128 704 128 640 384 640 384 896Z"}},{"type":"element","name":"path","attributes":{"d":"M896 640L896 704 704 704 704 896 640 896 640 640 896 640Z"}},{"type":"element","name":"path","attributes":{"d":"M320 128L384 128 384 384 128 384 128 320 320 320 320 128Z"}},{"type":"element","name":"path","attributes":{"d":"M704 320L896 320 896 384 640 384 640 128 704 128 704 320Z"}}]}'),o=function(n,a){var o=Object.assign(Object.assign({},n),a.attrs);return(0,e.createVNode)(t.Z,(0,e.mergeProps)(o,{data:r,name:"unfullScreen"}),null)};o.displayName="unfullScreen",o.inheritAttrs=!1;const i=o})(),a})()));

package/lib/image/image-viewer.css

@@ -0,0 +1,142 @@
+.bk-image-viewer-wrapper {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  background: rgba(0, 0, 0, 0.6);
+  flex-direction: column;
+}
+.bk-image-viewer-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.bk-image-viewer-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  display: flex;
+  width: 100%;
+  height: 52px;
+  color: #c4c6cc;
+  background: rgba(0, 0, 0, 0.7);
+  justify-content: space-between;
+  align-items: center;
+}
+.bk-image-viewer-header > div {
+  padding: 0 25px;
+  overflow: hidden;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+.bk-image-viewer-header .quit-box {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.bk-image-viewer-header .quit-tips {
+  font-size: 14px;
+  color: #979ba5;
+}
+.bk-image-viewer-btn {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  color: #dcdee5;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  opacity: 0.8;
+  box-sizing: border-box;
+  user-select: none;
+  align-items: center;
+  justify-content: center;
+}
+.bk-image-viewer-btn:hover {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.bk-image-viewer-close {
+  height: 52px;
+  font-size: 32px;
+  line-height: 48px;
+  color: #c4c6cc;
+  text-align: center;
+  cursor: pointer;
+}
+.bk-image-viewer-close:hover {
+  color: #fff;
+}
+.bk-image-viewer-canvas {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.bk-image-viewer-has-header {
+  padding-top: 52px;
+}
+.bk-image-viewer-error {
+  font-size: 14px;
+  color: #313238;
+  text-align: center;
+}
+.bk-image-viewer-error .bk-icon {
+  margin-bottom: 15px;
+  font-size: 85px;
+  line-height: 1;
+}
+.bk-image-viewer-actions {
+  bottom: 30px;
+  left: 50%;
+  width: 282px;
+  height: 44px;
+  padding: 0 23px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-color: #fff;
+  border-radius: 22px;
+  transform: translateX(-50%);
+}
+.bk-image-viewer-actions:hover {
+  background: rgba(0, 0, 0, 0.5);
+}
+.bk-image-viewer-actions-inner {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  font-size: 23px;
+  color: #c4c6cc;
+  text-align: justify;
+  align-items: center;
+  justify-content: space-around;
+}
+.bk-image-viewer-actions-inner .bk-icon {
+  cursor: pointer;
+}
+.bk-image-viewer-actions-inner .bk-icon:hover {
+  color: #fff;
+}
+.bk-image-viewer-next,
+.bk-image-viewer-prev {
+  top: 50%;
+  width: 80px;
+  height: 80px;
+  font-size: 40px;
+  cursor: pointer;
+}
+.bk-image-viewer-prev {
+  left: 40px;
+  transform: translateY(-50%);
+}
+.bk-image-viewer-next {
+  right: 40px;
+  text-indent: 2px;
+  transform: translateY(-50%);
+}

package/lib/image/image-viewer.d.ts

@@ -0,0 +1,73 @@
+export declare type ViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise';
+declare const _default: import("vue").DefineComponent<{
+    urlList: {
+        type: import("vue").PropType<string[]>;
+        default: () => any[];
+    };
+    zIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    initialIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    isShowTitle: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loops: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    maskClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close")[], "change" | "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    urlList: {
+        type: import("vue").PropType<string[]>;
+        default: () => any[];
+    };
+    zIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    initialIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    isShowTitle: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loops: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    maskClose: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    onClose?: (...args: any[]) => any;
+}, {
+    zIndex: number;
+    urlList: string[];
+    initialIndex: number;
+    isShowTitle: boolean;
+    loops: boolean;
+    maskClose: boolean;
+}>;
+export default _default;

package/lib/image/image-viewer.less

@@ -0,0 +1,168 @@
+.bk-image-viewer {
+  &-wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    background: rgba(0, 0, 0, .6);
+    flex-direction: column;
+  }
+
+  &-mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9;
+    display: flex;
+    width: 100%;
+    height: 52px;
+    color: #c4c6cc;
+    background: rgba(0, 0, 0, .70);
+    justify-content: space-between;
+    align-items: center;
+
+    > div {
+      padding: 0 25px;
+      overflow: hidden;
+      font-size: 14px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+    }
+
+    .quit-box {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    .quit-tips {
+      font-size: 14px;
+      color: #979ba5;
+    }
+  }
+
+  &-btn {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    color: #dcdee5;
+    background-color: rgba(0, 0, 0, .3);
+    border-radius: 50%;
+    opacity: .8;
+    box-sizing: border-box;
+    user-select: none;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      color: #fff;
+      background-color: rgba(0, 0, 0, .4);
+    }
+  }
+
+  &-close {
+    height: 52px;
+    font-size: 32px;
+    line-height: 48px;
+    color: #c4c6cc;
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  &-canvas {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center
+  }
+
+  &-has-header {
+    padding-top: 52px;
+  }
+
+  &-error {
+    font-size: 14px;
+    color: #313238;
+    text-align: center;
+
+    .bk-icon {
+      margin-bottom: 15px;
+      font-size: 85px;
+      line-height: 1;
+    }
+  }
+
+  &-actions {
+    bottom: 30px;
+    left: 50%;
+    width: 282px;
+    height: 44px;
+    padding: 0 23px;
+    background-color: rgba(0, 0, 0, .4);;
+    border-color: #fff;
+    border-radius: 22px;
+    transform: translateX(-50%);
+
+    &:hover {
+      background: rgba(0, 0, 0, .5);
+    }
+
+    &-inner {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      font-size: 23px;
+      color: #c4c6cc;
+      text-align: justify;
+      align-items: center;
+      justify-content: space-around;
+
+      .bk-icon {
+        cursor: pointer;
+
+        &:hover {
+          color: #fff;
+        }
+      }
+
+    }
+  }
+
+  &-next,
+  &-prev {
+    top: 50%;
+    width: 80px;
+    height: 80px;
+    font-size: 40px;
+    cursor: pointer;
+  }
+
+  &-prev {
+    left: 40px;
+    transform: translateY(-50%);
+    transform: translateY(-50%)
+  }
+
+  &-next {
+    right: 40px;
+    text-indent: 2px;
+    transform: translateY(-50%);
+    transform: translateY(-50%)
+  }
+}

package/lib/image/image-viewer.variable.css

@@ -0,0 +1,142 @@
+.bk-image-viewer-wrapper {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  background: rgba(0, 0, 0, 0.6);
+  flex-direction: column;
+}
+.bk-image-viewer-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.bk-image-viewer-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  display: flex;
+  width: 100%;
+  height: 52px;
+  color: #c4c6cc;
+  background: rgba(0, 0, 0, 0.7);
+  justify-content: space-between;
+  align-items: center;
+}
+.bk-image-viewer-header > div {
+  padding: 0 25px;
+  overflow: hidden;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+.bk-image-viewer-header .quit-box {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.bk-image-viewer-header .quit-tips {
+  font-size: 14px;
+  color: #979ba5;
+}
+.bk-image-viewer-btn {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  color: #dcdee5;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  opacity: 0.8;
+  box-sizing: border-box;
+  user-select: none;
+  align-items: center;
+  justify-content: center;
+}
+.bk-image-viewer-btn:hover {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.bk-image-viewer-close {
+  height: 52px;
+  font-size: 32px;
+  line-height: 48px;
+  color: #c4c6cc;
+  text-align: center;
+  cursor: pointer;
+}
+.bk-image-viewer-close:hover {
+  color: #fff;
+}
+.bk-image-viewer-canvas {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.bk-image-viewer-has-header {
+  padding-top: 52px;
+}
+.bk-image-viewer-error {
+  font-size: 14px;
+  color: #313238;
+  text-align: center;
+}
+.bk-image-viewer-error .bk-icon {
+  margin-bottom: 15px;
+  font-size: 85px;
+  line-height: 1;
+}
+.bk-image-viewer-actions {
+  bottom: 30px;
+  left: 50%;
+  width: 282px;
+  height: 44px;
+  padding: 0 23px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-color: #fff;
+  border-radius: 22px;
+  transform: translateX(-50%);
+}
+.bk-image-viewer-actions:hover {
+  background: rgba(0, 0, 0, 0.5);
+}
+.bk-image-viewer-actions-inner {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  font-size: 23px;
+  color: #c4c6cc;
+  text-align: justify;
+  align-items: center;
+  justify-content: space-around;
+}
+.bk-image-viewer-actions-inner .bk-icon {
+  cursor: pointer;
+}
+.bk-image-viewer-actions-inner .bk-icon:hover {
+  color: #fff;
+}
+.bk-image-viewer-next,
+.bk-image-viewer-prev {
+  top: 50%;
+  width: 80px;
+  height: 80px;
+  font-size: 40px;
+  cursor: pointer;
+}
+.bk-image-viewer-prev {
+  left: 40px;
+  transform: translateY(-50%);
+}
+.bk-image-viewer-next {
+  right: 40px;
+  text-indent: 2px;
+  transform: translateY(-50%);
+}

package/lib/image/image.css

@@ -0,0 +1,37 @@
+.bk-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+}
+.bk-image-inner {
+  width: 100%;
+  height: 100%;
+  vertical-align: top;
+}
+.bk-image-inner-center {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  display: block;
+  transform: translate(-50%, -50%);
+}
+.bk-image-placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  font-size: 24px;
+  color: #c4c6cc;
+  vertical-align: middle;
+  background: #f0f1f5;
+  justify-content: center;
+  align-items: center;
+}
+.bk-image-placeholder img {
+  width: 100%;
+}
+.bk-image-preview {
+  cursor: pointer;
+}