bkui-vue 0.0.1-beta.98 → 0.0.1

package/lib/menu/submenu.variable.css

@@ -19,10 +19,11 @@
   --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;
+  --border-style-color: var(--light-gray);
   --input-disabled-bg: #fafbfd;
   --input-disabled-border: var(--disable-color);
   --input-height-base: var(--component-size-base);
@@ -32,8 +33,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;
@@ -44,6 +46,17 @@
   --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: #c4c6cc;
+  --radio-disabled-checked-bg: #a3c5fd;
+  --radio-button-checked-bg: #e1ecff;
+  --radio-button-disabled-checked-bg: #fafbfd;
+  --checkbox-disabled-checked-bg: #a3c5fd;
   --fixed-navbar-background: #fff;
   --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
   --switch-default-color: #fff;
@@ -64,12 +77,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;
@@ -89,13 +106,19 @@
   --table-border-color: #dcdee5;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
-  --table-body-font-color: #575961;
+  --table-body-font-color: #63656E;
   --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-hover: #f5f7fa;
+  --cascader-panel-active: #e1ecff;
   --cascader-panel-disabled-bg: #fff;
+  --search-select-focus-border-color: var(--primary-color);
+  --search-select-focus-color: #3c96ff;
+  --search-select-font-color: var(--default-color);
+  --search-select-placeholder-color: var(--light-gray);
+  --search-select-message-color: var(--danger-color);
+  --search-select-menu-border-color: var(--disable-color);
 }
 .bk-menu {
   display: block;

package/lib/menu/utils.d.ts

@@ -3,7 +3,7 @@ export interface IMenuInfo {
     key: string;
     parentKey: string;
 }
-export declare type MenuMode = 'vertical';
+export type MenuMode = 'vertical';
 export interface IMenuProvider {
     readonly activeKey: Ref<string>;
     readonly openedKeys: Ref<string[]>;

package/lib/message/index.js

@@ -1 +1,2 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"),require("../icon"),require("../shared"));else if("function"==typeof define&&define.amd)define(["vue","../icon","../shared"],t);else{var o="object"==typeof exports?t(require("vue"),require("../icon"),require("../shared")):t(e.vue,e["../icon"],e["../shared"]);for(var r in o)("object"==typeof exports?exports:e)[r]=o[r]}}(self,((e,t,o)=>(()=>{"use strict";var r={6870:e=>{e.exports=t},4212:e=>{e.exports=o},748:t=>{t.exports=e}},s={};function n(e){var t=s[e];if(void 0!==t)return t.exports;var o=s[e]={exports:{}};return r[e](o,o.exports,n),o.exports}n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},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 i={};return(()=>{n.r(i),n.d(i,{default:()=>l});var e=n(748),t={"top-left":[],"top-right":[],"bottom-left":[],"bottom-right":[]},o=1;var r=n(6870),s=n(4212),a={id:s.PropTypes.string.def(""),message:s.PropTypes.string.def(""),theme:s.PropTypes.theme(["primary","warning","success","error"]).def("primary"),delay:s.PropTypes.number.def(3e3),dismissable:s.PropTypes.bool.def(!0),offsetY:s.PropTypes.number.def(30),spacing:s.PropTypes.number.def(10),extCls:s.PropTypes.string.def(""),onClose:s.PropTypes.func};const c=(0,e.defineComponent)({name:"Message",props:a,emits:["destory"],setup:function(t,o){var r=o.emit,n=(0,e.computed)((function(){return["bk-message","bk-message-".concat(t.theme),"".concat(t.extCls)]})),i=s.bkZIndexManager.getMessageNextIndex(),a=(0,e.computed)((function(){return{top:"".concat(t.offsetY,"px"),zIndex:i}})),c=(0,e.ref)(!1),l=null;return(0,e.onMounted)((function(){t.delay&&(l=setTimeout((function(){c.value=!1}),t.delay)),c.value=!0})),(0,e.onUnmounted)((function(){clearTimeout(l)})),(0,e.watch)(c,(function(){c.value||r("destory",t.id)})),{classNames:n,styles:a,visible:c,close:function(){c.value=!1}}},render:function(){var t=this;return(0,e.createVNode)(e.Transition,{name:"bk-message-fade"},{default:function(){return[(0,e.withDirectives)((0,e.createVNode)("div",{class:t.classNames,style:t.styles},[(0,e.createVNode)("div",{class:"bk-message-content"},[(0,e.createVNode)("div",{class:"bk-message-icon"},[{primary:(0,e.createVNode)(r.Info,null,null),warning:(0,e.createVNode)(r.Warn,null,null),success:(0,e.createVNode)(r.Success,null,null),error:(0,e.createVNode)(r.Close,null,null)}[t.theme]]),t.message]),t.dismissable&&(0,e.createVNode)(r.Error,{class:"bk-message-icon bk-message-close",onClick:t.close},null)]),[[e.vShow,t.visible]])]}})}}),l=function(r){!function(r,s){var n=s,i=n.position||"top-right";"string"==typeof s&&(n={message:s});var a=s.onClose,c=n.offsetX||10,l=n.offsetY||30,u=n.spacing,f=void 0===u?10:u;t[i].forEach((function(e){l+=(e.el.offsetHeight||0)+f}));var d="message_".concat(o+=1);n=Object.assign(Object.assign({},n),{offsetX:c,offsetY:l,id:d});var p=document.createElement("div"),m=(0,e.createVNode)(r,n);m.props.onDestory=function(o){!function(e,o,r,s){null==s||s();var n=o.startsWith("top")?"top":"bottom",i=-1;t[o].forEach((function(t,o){t.props.id===e&&(i=o)}));for(var a=t[o][i].el.offsetHeight,c=t[o].length,l=i;l<c;l++){var u=parseInt(t[o][l].el.style[n],10)-a-r;t[o][l].component.props.offsetY=u}t[o].splice(i,1)}(o,i,f,a),(0,e.render)(null,p)},(0,e.render)(m,p),t[i].push(m),document.body.appendChild(p.firstElementChild)}(c,r)}})(),i})()));
+/*! For license information please see index.js.LICENSE.txt */
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"),require("../shared"),require("vue-types"),require("../config-provider"),require("../icon"));else if("function"==typeof define&&define.amd)define(["vue","../shared","vue-types","../config-provider","../icon"],t);else{var n="object"==typeof exports?t(require("vue"),require("../shared"),require("vue-types"),require("../config-provider"),require("../icon")):t(e.vue,e["../shared"],e["vue-types"],e["../config-provider"],e["../icon"]);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(self,((e,t,n,r,o)=>(()=>{var i={7647:function(e){var t;t=function(){return function(){var e={686:function(e,t,n){"use strict";n.d(t,{default:function(){return b}});var r=n(279),o=n.n(r),i=n(370),s=n.n(i),a=n(817),c=n.n(a);function l(e){try{return document.execCommand(e)}catch(e){return!1}}var u=function(e){var t=c()(e);return l("cut"),t},f=function(e,t){var n=function(e){var t="rtl"===document.documentElement.getAttribute("dir"),n=document.createElement("textarea");n.style.fontSize="12pt",n.style.border="0",n.style.padding="0",n.style.margin="0",n.style.position="absolute",n.style[t?"right":"left"]="-9999px";var r=window.pageYOffset||document.documentElement.scrollTop;return n.style.top="".concat(r,"px"),n.setAttribute("readonly",""),n.value=e,n}(e);t.container.appendChild(n);var r=c()(n);return l("copy"),n.remove(),r},p=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{container:document.body},n="";return"string"==typeof e?n=f(e,t):e instanceof HTMLInputElement&&!["text","search","url","tel","password"].includes(null==e?void 0:e.type)?n=f(e.value,t):(n=c()(e),l("copy")),n};function d(e){return d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},d(e)}function m(e){return m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},m(e)}function y(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function h(e,t){return h=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},h(e,t)}function v(e){return v=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},v(e)}function g(e,t){var n="data-clipboard-".concat(e);if(t.hasAttribute(n))return t.getAttribute(n)}var j=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&h(e,t)}(c,e);var t,n,r,o,i,a=(o=c,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=v(o);if(i){var n=v(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return function(e,t){return!t||"object"!==m(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}(this,e)});function c(e,t){var n;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,c),(n=a.call(this)).resolveOptions(t),n.listenClick(e),n}return t=c,n=[{key:"resolveOptions",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof e.action?e.action:this.defaultAction,this.target="function"==typeof e.target?e.target:this.defaultTarget,this.text="function"==typeof e.text?e.text:this.defaultText,this.container="object"===m(e.container)?e.container:document.body}},{key:"listenClick",value:function(e){var t=this;this.listener=s()(e,"click",(function(e){return t.onClick(e)}))}},{key:"onClick",value:function(e){var t=e.delegateTarget||e.currentTarget,n=this.action(t)||"copy",r=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.action,n=void 0===t?"copy":t,r=e.container,o=e.target,i=e.text;if("copy"!==n&&"cut"!==n)throw new Error('Invalid "action" value, use either "copy" or "cut"');if(void 0!==o){if(!o||"object"!==d(o)||1!==o.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===n&&o.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===n&&(o.hasAttribute("readonly")||o.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes')}return i?p(i,{container:r}):o?"cut"===n?u(o):p(o,{container:r}):void 0}({action:n,container:this.container,target:this.target(t),text:this.text(t)});this.emit(r?"success":"error",{action:n,text:r,trigger:t,clearSelection:function(){t&&t.focus(),window.getSelection().removeAllRanges()}})}},{key:"defaultAction",value:function(e){return g("action",e)}},{key:"defaultTarget",value:function(e){var t=g("target",e);if(t)return document.querySelector(t)}},{key:"defaultText",value:function(e){return g("text",e)}},{key:"destroy",value:function(){this.listener.destroy()}}],r=[{key:"copy",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{container:document.body};return p(e,t)}},{key:"cut",value:function(e){return u(e)}},{key:"isSupported",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:["copy","cut"],t="string"==typeof e?[e]:e,n=!!document.queryCommandSupported;return t.forEach((function(e){n=n&&!!document.queryCommandSupported(e)})),n}}],n&&y(t.prototype,n),r&&y(t,r),c}(o()),b=j},828:function(e){if("undefined"!=typeof Element&&!Element.prototype.matches){var t=Element.prototype;t.matches=t.matchesSelector||t.mozMatchesSelector||t.msMatchesSelector||t.oMatchesSelector||t.webkitMatchesSelector}e.exports=function(e,t){for(;e&&9!==e.nodeType;){if("function"==typeof e.matches&&e.matches(t))return e;e=e.parentNode}}},438:function(e,t,n){var r=n(828);function o(e,t,n,r,o){var s=i.apply(this,arguments);return e.addEventListener(n,s,o),{destroy:function(){e.removeEventListener(n,s,o)}}}function i(e,t,n,o){return function(n){n.delegateTarget=r(n.target,t),n.delegateTarget&&o.call(e,n)}}e.exports=function(e,t,n,r,i){return"function"==typeof e.addEventListener?o.apply(null,arguments):"function"==typeof n?o.bind(null,document).apply(null,arguments):("string"==typeof e&&(e=document.querySelectorAll(e)),Array.prototype.map.call(e,(function(e){return o(e,t,n,r,i)})))}},879:function(e,t){t.node=function(e){return void 0!==e&&e instanceof HTMLElement&&1===e.nodeType},t.nodeList=function(e){var n=Object.prototype.toString.call(e);return void 0!==e&&("[object NodeList]"===n||"[object HTMLCollection]"===n)&&"length"in e&&(0===e.length||t.node(e[0]))},t.string=function(e){return"string"==typeof e||e instanceof String},t.fn=function(e){return"[object Function]"===Object.prototype.toString.call(e)}},370:function(e,t,n){var r=n(879),o=n(438);e.exports=function(e,t,n){if(!e&&!t&&!n)throw new Error("Missing required arguments");if(!r.string(t))throw new TypeError("Second argument must be a String");if(!r.fn(n))throw new TypeError("Third argument must be a Function");if(r.node(e))return function(e,t,n){return e.addEventListener(t,n),{destroy:function(){e.removeEventListener(t,n)}}}(e,t,n);if(r.nodeList(e))return function(e,t,n){return Array.prototype.forEach.call(e,(function(e){e.addEventListener(t,n)})),{destroy:function(){Array.prototype.forEach.call(e,(function(e){e.removeEventListener(t,n)}))}}}(e,t,n);if(r.string(e))return function(e,t,n){return o(document.body,e,t,n)}(e,t,n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}},817:function(e){e.exports=function(e){var t;if("SELECT"===e.nodeName)e.focus(),t=e.value;else if("INPUT"===e.nodeName||"TEXTAREA"===e.nodeName){var n=e.hasAttribute("readonly");n||e.setAttribute("readonly",""),e.select(),e.setSelectionRange(0,e.value.length),n||e.removeAttribute("readonly"),t=e.value}else{e.hasAttribute("contenteditable")&&e.focus();var r=window.getSelection(),o=document.createRange();o.selectNodeContents(e),r.removeAllRanges(),r.addRange(o),t=r.toString()}return t}},279:function(e){function t(){}t.prototype={on:function(e,t,n){var r=this.e||(this.e={});return(r[e]||(r[e]=[])).push({fn:t,ctx:n}),this},once:function(e,t,n){var r=this;function o(){r.off(e,o),t.apply(n,arguments)}return o._=t,this.on(e,o,n)},emit:function(e){for(var t=[].slice.call(arguments,1),n=((this.e||(this.e={}))[e]||[]).slice(),r=0,o=n.length;r<o;r++)n[r].fn.apply(n[r].ctx,t);return this},off:function(e,t){var n=this.e||(this.e={}),r=n[e],o=[];if(r&&t)for(var i=0,s=r.length;i<s;i++)r[i].fn!==t&&r[i].fn._!==t&&o.push(r[i]);return o.length?n[e]=o:delete n[e],this}},e.exports=t,e.exports.TinyEmitter=t}},t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}return n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(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=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n(686)}().default},e.exports=t()},4346:function(e){e.exports=function(){"use strict";function e(e){return null===e?"null":typeof e}function t(e){return!!e&&"object"==typeof e}function n(e){if(void 0===e)return"";if(null===e)return"Object";if("object"==typeof e&&!e.constructor)return"Object";var t=/function ([^(]*)/.exec(e.constructor.toString());return t&&t.length>1?t[1]:""}function r(e,t,n){return"null"===e||"undefined"===e?e:("string"!==e&&"stringifiable"!==e||(n='"'+n.replace(/"/g,'\\"')+'"'),"function"===e?t.toString().replace(/[\r\n]/g,"").replace(/\{.*\}/,"")+"{…}":n)}function o(o){var i="";return t(o)?(i=n(o),Array.isArray(o)&&(i+="["+o.length+"]")):i=r(e(o),o,o),i}function i(e){return"json-formatter-"+e}function s(e,t,n){var r=document.createElement(e);return t&&r.classList.add(i(t)),void 0!==n&&(n instanceof Node?r.appendChild(n):r.appendChild(document.createTextNode(String(n)))),r}!function(e){if(e&&"undefined"!=typeof window){var t=document.createElement("style");t.setAttribute("media","screen"),t.innerHTML=e,document.head.appendChild(t)}}('.json-formatter-row {\n  font-family: monospace;\n}\n.json-formatter-row,\n.json-formatter-row a,\n.json-formatter-row a:hover {\n  color: black;\n  text-decoration: none;\n}\n.json-formatter-row .json-formatter-row {\n  margin-left: 1rem;\n}\n.json-formatter-row .json-formatter-children.json-formatter-empty {\n  opacity: 0.5;\n  margin-left: 1rem;\n}\n.json-formatter-row .json-formatter-children.json-formatter-empty:after {\n  display: none;\n}\n.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-object:after {\n  content: "No properties";\n}\n.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-array:after {\n  content: "[]";\n}\n.json-formatter-row .json-formatter-string,\n.json-formatter-row .json-formatter-stringifiable {\n  color: green;\n  white-space: pre;\n  word-wrap: break-word;\n}\n.json-formatter-row .json-formatter-number {\n  color: blue;\n}\n.json-formatter-row .json-formatter-boolean {\n  color: red;\n}\n.json-formatter-row .json-formatter-null {\n  color: #855A00;\n}\n.json-formatter-row .json-formatter-undefined {\n  color: #ca0b69;\n}\n.json-formatter-row .json-formatter-function {\n  color: #FF20ED;\n}\n.json-formatter-row .json-formatter-date {\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.json-formatter-row .json-formatter-url {\n  text-decoration: underline;\n  color: blue;\n  cursor: pointer;\n}\n.json-formatter-row .json-formatter-bracket {\n  color: blue;\n}\n.json-formatter-row .json-formatter-key {\n  color: #00008B;\n  padding-right: 0.2rem;\n}\n.json-formatter-row .json-formatter-toggler-link {\n  cursor: pointer;\n}\n.json-formatter-row .json-formatter-toggler {\n  line-height: 1.2rem;\n  font-size: 0.7rem;\n  vertical-align: middle;\n  opacity: 0.6;\n  cursor: pointer;\n  padding-right: 0.2rem;\n}\n.json-formatter-row .json-formatter-toggler:after {\n  display: inline-block;\n  transition: transform 100ms ease-in;\n  content: "►";\n}\n.json-formatter-row > a > .json-formatter-preview-text {\n  opacity: 0;\n  transition: opacity 0.15s ease-in;\n  font-style: italic;\n}\n.json-formatter-row:hover > a > .json-formatter-preview-text {\n  opacity: 0.6;\n}\n.json-formatter-row.json-formatter-open > .json-formatter-toggler-link .json-formatter-toggler:after {\n  transform: rotate(90deg);\n}\n.json-formatter-row.json-formatter-open > .json-formatter-children:after {\n  display: inline-block;\n}\n.json-formatter-row.json-formatter-open > a > .json-formatter-preview-text {\n  display: none;\n}\n.json-formatter-row.json-formatter-open.json-formatter-empty:after {\n  display: block;\n}\n.json-formatter-dark.json-formatter-row {\n  font-family: monospace;\n}\n.json-formatter-dark.json-formatter-row,\n.json-formatter-dark.json-formatter-row a,\n.json-formatter-dark.json-formatter-row a:hover {\n  color: white;\n  text-decoration: none;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-row {\n  margin-left: 1rem;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty {\n  opacity: 0.5;\n  margin-left: 1rem;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty:after {\n  display: none;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-object:after {\n  content: "No properties";\n}\n.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-array:after {\n  content: "[]";\n}\n.json-formatter-dark.json-formatter-row .json-formatter-string,\n.json-formatter-dark.json-formatter-row .json-formatter-stringifiable {\n  color: #31F031;\n  white-space: pre;\n  word-wrap: break-word;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-number {\n  color: #66C2FF;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-boolean {\n  color: #EC4242;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-null {\n  color: #EEC97D;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-undefined {\n  color: #ef8fbe;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-function {\n  color: #FD48CB;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-date {\n  background-color: rgba(255, 255, 255, 0.05);\n}\n.json-formatter-dark.json-formatter-row .json-formatter-url {\n  text-decoration: underline;\n  color: #027BFF;\n  cursor: pointer;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-bracket {\n  color: #9494FF;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-key {\n  color: #23A0DB;\n  padding-right: 0.2rem;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-toggler-link {\n  cursor: pointer;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-toggler {\n  line-height: 1.2rem;\n  font-size: 0.7rem;\n  vertical-align: middle;\n  opacity: 0.6;\n  cursor: pointer;\n  padding-right: 0.2rem;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-toggler:after {\n  display: inline-block;\n  transition: transform 100ms ease-in;\n  content: "►";\n}\n.json-formatter-dark.json-formatter-row > a > .json-formatter-preview-text {\n  opacity: 0;\n  transition: opacity 0.15s ease-in;\n  font-style: italic;\n}\n.json-formatter-dark.json-formatter-row:hover > a > .json-formatter-preview-text {\n  opacity: 0.6;\n}\n.json-formatter-dark.json-formatter-row.json-formatter-open > .json-formatter-toggler-link .json-formatter-toggler:after {\n  transform: rotate(90deg);\n}\n.json-formatter-dark.json-formatter-row.json-formatter-open > .json-formatter-children:after {\n  display: inline-block;\n}\n.json-formatter-dark.json-formatter-row.json-formatter-open > a > .json-formatter-preview-text {\n  display: none;\n}\n.json-formatter-dark.json-formatter-row.json-formatter-open.json-formatter-empty:after {\n  display: block;\n}\n');var a=/(^\d{1,4}[\.|\\/|-]\d{1,2}[\.|\\/|-]\d{1,4})(\s*(?:0?[1-9]:[0-5]|1(?=[012])\d:[0-5])\d\s*[ap]m)?$/,c=/\d{2}:\d{2}:\d{2} GMT-\d{4}/,l=/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/,u=window.requestAnimationFrame||function(e){return e(),0},f={hoverPreviewEnabled:!1,hoverPreviewArrayCount:100,hoverPreviewFieldCount:5,animateOpen:!0,animateClose:!0,theme:null,useToJSON:!0,sortPropertiesBy:null};return function(){function p(e,t,n,r){void 0===t&&(t=1),void 0===n&&(n=f),this.json=e,this.open=t,this.config=n,this.key=r,this._isOpen=null,void 0===this.config.hoverPreviewEnabled&&(this.config.hoverPreviewEnabled=f.hoverPreviewEnabled),void 0===this.config.hoverPreviewArrayCount&&(this.config.hoverPreviewArrayCount=f.hoverPreviewArrayCount),void 0===this.config.hoverPreviewFieldCount&&(this.config.hoverPreviewFieldCount=f.hoverPreviewFieldCount),void 0===this.config.useToJSON&&(this.config.useToJSON=f.useToJSON),""===this.key&&(this.key='""')}return Object.defineProperty(p.prototype,"isOpen",{get:function(){return null!==this._isOpen?this._isOpen:this.open>0},set:function(e){this._isOpen=e},enumerable:!0,configurable:!0}),Object.defineProperty(p.prototype,"isDate",{get:function(){return this.json instanceof Date||"string"===this.type&&(a.test(this.json)||l.test(this.json)||c.test(this.json))},enumerable:!0,configurable:!0}),Object.defineProperty(p.prototype,"isUrl",{get:function(){return"string"===this.type&&0===this.json.indexOf("http")},enumerable:!0,configurable:!0}),Object.defineProperty(p.prototype,"isArray",{get:function(){return Array.isArray(this.json)},enumerable:!0,configurable:!0}),Object.defineProperty(p.prototype,"isObject",{get:function(){return t(this.json)},enumerable:!0,configurable:!0}),Object.defineProperty(p.prototype,"isEmptyObject",{get:function(){return!this.keys.length&&!this.isArray},enumerable:!0,configurable:!0}),Object.defineProperty(p.prototype,"isEmpty",{get:function(){return this.isEmptyObject||this.keys&&!this.keys.length&&this.isArray},enumerable:!0,configurable:!0}),Object.defineProperty(p.prototype,"useToJSON",{get:function(){return this.config.useToJSON&&"stringifiable"===this.type},enumerable:!0,configurable:!0}),Object.defineProperty(p.prototype,"hasKey",{get:function(){return void 0!==this.key},enumerable:!0,configurable:!0}),Object.defineProperty(p.prototype,"constructorName",{get:function(){return n(this.json)},enumerable:!0,configurable:!0}),Object.defineProperty(p.prototype,"type",{get:function(){return this.config.useToJSON&&this.json&&this.json.toJSON?"stringifiable":e(this.json)},enumerable:!0,configurable:!0}),Object.defineProperty(p.prototype,"keys",{get:function(){if(this.isObject){var e=Object.keys(this.json);return!this.isArray&&this.config.sortPropertiesBy?e.sort(this.config.sortPropertiesBy):e}return[]},enumerable:!0,configurable:!0}),p.prototype.toggleOpen=function(){this.isOpen=!this.isOpen,this.element&&(this.isOpen?this.appendChildren(this.config.animateOpen):this.removeChildren(this.config.animateClose),this.element.classList.toggle(i("open")))},p.prototype.openAtDepth=function(e){void 0===e&&(e=1),e<0||(this.open=e,this.isOpen=0!==e,this.element&&(this.removeChildren(!1),0===e?this.element.classList.remove(i("open")):(this.appendChildren(this.config.animateOpen),this.element.classList.add(i("open")))))},p.prototype.getInlinepreview=function(){var e=this;if(this.isArray)return this.json.length>this.config.hoverPreviewArrayCount?"Array["+this.json.length+"]":"["+this.json.map(o).join(", ")+"]";var t=this.keys,n=t.slice(0,this.config.hoverPreviewFieldCount).map((function(t){return t+":"+o(e.json[t])})),r=t.length>=this.config.hoverPreviewFieldCount?"…":"";return"{"+n.join(", ")+r+"}"},p.prototype.render=function(){this.element=s("div","row");var e=this.isObject?s("a","toggler-link"):s("span");if(this.isObject&&!this.useToJSON&&e.appendChild(s("span","toggler")),this.hasKey&&e.appendChild(s("span","key",this.key+":")),this.isObject&&!this.useToJSON){var t=s("span","value"),n=s("span"),o=s("span","constructor-name",this.constructorName);if(n.appendChild(o),this.isArray){var a=s("span");a.appendChild(s("span","bracket","[")),a.appendChild(s("span","number",this.json.length)),a.appendChild(s("span","bracket","]")),n.appendChild(a)}t.appendChild(n),e.appendChild(t)}else{(t=this.isUrl?s("a"):s("span")).classList.add(i(this.type)),this.isDate&&t.classList.add(i("date")),this.isUrl&&(t.classList.add(i("url")),t.setAttribute("href",this.json));var c=r(this.type,this.json,this.useToJSON?this.json.toJSON():this.json);t.appendChild(document.createTextNode(c)),e.appendChild(t)}if(this.isObject&&this.config.hoverPreviewEnabled){var l=s("span","preview-text");l.appendChild(document.createTextNode(this.getInlinepreview())),e.appendChild(l)}var u=s("div","children");return this.isObject&&u.classList.add(i("object")),this.isArray&&u.classList.add(i("array")),this.isEmpty&&u.classList.add(i("empty")),this.config&&this.config.theme&&this.element.classList.add(i(this.config.theme)),this.isOpen&&this.element.classList.add(i("open")),this.element.appendChild(e),this.element.appendChild(u),this.isObject&&this.isOpen&&this.appendChildren(),this.isObject&&!this.useToJSON&&e.addEventListener("click",this.toggleOpen.bind(this)),this.element},p.prototype.appendChildren=function(e){var t=this;void 0===e&&(e=!1);var n=this.element.querySelector("div."+i("children"));if(n&&!this.isEmpty)if(e){var r=0,o=function(){var e=t.keys[r],i=new p(t.json[e],t.open-1,t.config,e);n.appendChild(i.render()),(r+=1)<t.keys.length&&(r>10?o():u(o))};u(o)}else this.keys.forEach((function(e){var r=new p(t.json[e],t.open-1,t.config,e);n.appendChild(r.render())}))},p.prototype.removeChildren=function(e){void 0===e&&(e=!1);var t=this.element.querySelector("div."+i("children"));if(e){var n=0,r=function(){t&&t.children.length&&(t.removeChild(t.children[0]),(n+=1)>10?r():u(r))};u(r)}else t&&(t.innerHTML="")},p}()}()},2717:e=>{"use strict";e.exports=r},6870:e=>{"use strict";e.exports=o},4212:e=>{"use strict";e.exports=t},748:t=>{"use strict";t.exports=e},210:e=>{"use strict";e.exports=n}},s={};function a(e){var t=s[e];if(void 0!==t)return t.exports;var n=s[e]={exports:{}};return i[e].call(n.exports,n,n.exports,a),n.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 n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},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 c={};return(()=>{"use strict";a.r(c),a.d(c,{default:()=>k});var e=a(748),t=a(4212),n={"top-left":[],"top-right":[],"bottom-left":[],"bottom-right":[]},r=1;function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function i(e){return function(e){if(Array.isArray(e))return o(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return o(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s(e)}function l(e,t,n){return(t=function(e){var t=function(e,t){if("object"!==s(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,"string");if("object"!==s(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===s(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var u,f,p,d=a(7647),m=a.n(d),y=a(4346),h=a.n(y),v=a(210),g=a(2717),j=a(6870);!function(e){e.PRIMARY="primary",e.WARNING="warning",e.SUCCESS="success",e.ERROR="error"}(u||(u={})),function(e){e.KEY_VALUE="key-value",e.JSON="json"}(f||(f={})),function(e){e.ASSISTANT="assistant",e.DETAILS="details",e.FIX="fix",e.CLOSE="close"}(p||(p={}));var b={code:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.number]),overview:t.PropTypes.string,suggestion:t.PropTypes.string,details:t.PropTypes.string,assistant:t.PropTypes.string,type:(0,v.toType)("MessageContentType",{})},w={id:t.PropTypes.string.def(""),message:t.PropTypes.oneOfType([t.PropTypes.shape(b).loose,t.PropTypes.string]),theme:(0,v.toType)("messageTheme",{}).def(u.PRIMARY),delay:t.PropTypes.number,dismissable:t.PropTypes.bool.def(!0),offsetY:t.PropTypes.number.def(30),spacing:t.PropTypes.number.def(10),extCls:t.PropTypes.string.def(""),onClose:t.PropTypes.func,getContainer:t.PropTypes.instanceOf(HTMLElement),width:t.PropTypes.oneOfType([t.PropTypes.number,t.PropTypes.string]),actions:t.PropTypes.shape([])};const S=(0,e.defineComponent)({name:"Message",props:w,emits:["destroy"],setup:function(n,r){var o,a=this,c=r.emit,u=r.slots,d=(0,g.useLocale)("message"),y=(0,e.computed)((function(){return["bk-message","bk-message-".concat(n.theme),"".concat(n.extCls)]})),v=t.bkZIndexManager.getMessageNextIndex(),b=(0,e.computed)((function(){return/^\d+\.?\d*$/.test("".concat(n.delay))?n.delay:"object"!==s(n.message)||(0,e.isVNode)(n.message)?3e3:8e3})),w=(0,e.computed)((function(){return/^\d+/.test("".concat(n.width))?/^\d+\.?\d*$/.test("".concat(n.width))?"".concat(n.width,"px"):n.width:"object"!==s(n.message)||(0,e.isVNode)(n.message)?"".concat(560,"px"):"".concat(800,"px")})),S=(0,e.computed)((function(){return n.getContainer&&(0,t.isElement)(n.getContainer)})),k=(0,e.computed)((function(){return{top:"".concat(n.offsetY,"px"),zIndex:v,position:S.value?"absolute":"fixed",width:w.value}})),C=(0,e.ref)(null),T=(0,e.ref)(null),O=(0,e.ref)(null),x=(0,e.ref)(!1),E=(0,e.reactive)({isFix:!1,isDetailShow:!1}),N=null,A=function(){N=setTimeout((function(){E.isFix||(x.value=!1)}),b.value)},P=function(e){e.preventDefault(),e.stopPropagation(),x.value=!1},L=(0,e.ref)(!1),M=(0,e.ref)(null),V=function(e){var t=e;if("string"==typeof e)try{t=JSON.parse(e)}catch(e){console.error("Format Json Error: ".concat(e))}return t},F=function(t,r){if(E.isDetailShow=null!=r?r:!E.isDetailShow,I(t,E.isDetailShow),E.isDetailShow&&"object"===s(n.message)&&!(0,e.isVNode)(n.message)&&(n.message.type===f.JSON||!n.message.type)){var o=V(n.message.details),i=new(h())(o);setTimeout((function(){C.value&&(C.value.innerHTML="",C.value.append(i.render()))}))}},I=function(e,t){E.isFix=null!=t?t:!E.isFix};(0,e.onMounted)((function(){b.value&&A(),x.value=!0})),(0,e.onUnmounted)((function(){clearTimeout(N)})),(0,e.watch)(x,(function(){x.value||c("destroy",n.id)}));var D=(0,e.computed)((function(){var t;return l(t={},p.ASSISTANT,{id:p.ASSISTANT,icon:function(){return(0,e.createVNode)(j.WeixinPro,null,null)},text:function(){return d.value.assistant},onClick:function(e){n.message.assistant&&window.open(n.message.assistant,"_blank")}}),l(t,p.DETAILS,{id:p.DETAILS,icon:function(){return E.isDetailShow?(0,e.createVNode)(j.AngleDoubleUpLine,null,null):(0,e.createVNode)(j.AngleDoubleDownLine,null,null)},text:function(){return d.value.details},onClick:function(e){return F(e)}}),l(t,p.FIX,{id:p.FIX,icon:function(){return E.isFix?(0,e.createVNode)(j.FixShape,null,null):(0,e.createVNode)(j.FixLine,null,null)},classList:E.isFix?"fixed":"",onClick:function(e){return I(e)}}),l(t,p.CLOSE,{id:p.CLOSE,classList:"normal-color",icon:function(){return n.dismissable&&(0,e.createVNode)(j.Error,{class:"bk-message-close",onClick:P},null)},onClick:P}),t})),R=[p.ASSISTANT,p.DETAILS,p.FIX,p.CLOSE],_=(0,e.computed)((function(){var e;if((null===(e=n.actions)||void 0===e?void 0:e.length)>0){var t=n.actions.map((function(e){var t=e.id.toLocaleLowerCase(),n=D.value[t],r=null==n?void 0:n.onClick,o=Object.assign({},D.value[t]||{},e);if(o.id=t,void 0!==e.classList){var c=Array.isArray(e.classList)?e.classList:[e.classList],l=[];void 0!==n.classList&&(l=Array.isArray(n.classList)?n.classList:[n.classList]),o.classList=[].concat(i(l),i(c))}return"function"==typeof e.onClick?(o.onClick=function(){var t=Reflect.apply(e.onClick,a,[]);void 0!==s(t)&&!t||"function"!=typeof r||Reflect.apply(r,a,[])},o):(o.onClick=r,o)})),r=R.filter((function(e){return!t.some((function(t){return t.id===e}))})).map((function(e){return D.value[e]}));return t.push.apply(t,i(r)),t}return R.map((function(e){return D.value[e]}))}));return{classNames:y,styles:k,visible:x,close:P,setDetailsShow:F,fixMesage:I,copyMessage:function(e){if(!L.value){var t=new(m())(O.value,{text:function(){return n.message.details}});["success","error"].forEach((function(e){t.on(e,(function(){var t,n,r=T.value;M.value=e,r&&((t=r.classList).remove.apply(t,["success","error","is-hidden"]),(n=r.classList).add.apply(n,[e,"is-show"]),o&&clearTimeout(o),o=setTimeout((function(){var e,t;(e=r.classList).remove.apply(e,["is-show"]),(t=r.classList).add.apply(t,["is-hidden"])}),2e3))})),L.value=!0,setTimeout((function(){O.value.click()}))}))}},parseJson:V,handleMouseenter:function(e){clearTimeout(N)},handleMouseleave:function(e){b.value&&A()},renderMessageActions:function(){var t,n,r=function(t){var n=t.text,r=void 0;if("function"==typeof n&&(r=Reflect.apply(n,a,[])),void 0!==r)return"string"==typeof r?(0,e.createVNode)("span",{class:"message-action-text"},[r]):r};return null!==(n=null===(t=u.action)||void 0===t?void 0:t.call(u))&&void 0!==n?n:_.value.map((function(t){if(t.disabled)return null;if("function"==typeof t.render)return Reflect.apply(t.render,a,[]);var n,o,i=Array.isArray(t.classList)?t.classList.join(" "):t.classList;return(0,e.createVNode)("span",{class:["tool",t.id,i],onClick:function(e){return function(e,t){t.readonly||t.disabled||"function"==typeof t.onClick&&Reflect.apply(t.onClick,a,[e,t])}(e,t)}},[(n=t,o=n.icon,"function"==typeof o?Reflect.apply(o,a,[]):(0,e.createVNode)("span",{class:o},null)),r(t)])}))},refJsonContent:C,refCopyStatus:T,refCopyMsgDiv:O,toolOperation:E,copyStatus:M,t:d}},render:function(){var t=this,n=function(n){return{primary:(0,e.createVNode)(j.Info,null,null),warning:(0,e.createVNode)(j.Warn,null,null),success:(0,e.createVNode)(j.Success,null,null),error:(0,e.createVNode)(j.Close,null,null)}[null!=n?n:t.theme]},r=function(n){if(n.type===f.KEY_VALUE){var r=t.parseJson(n.details||{});return Object.keys(r).map((function(t){return(0,e.createVNode)("div",{class:"message-row"},[(0,e.createVNode)("label",null,[t]),r[t]])}))}};return(0,e.createVNode)(e.Transition,{name:"bk-message-fade"},{default:function(){return[(0,e.withDirectives)((0,e.createVNode)("div",{class:t.classNames,style:t.styles,onMouseenter:t.handleMouseenter,onMouseleave:t.handleMouseleave},["object"!==s(t.message)||(0,e.isVNode)(t.message)?(0,e.createVNode)(e.Fragment,null,[(0,e.createVNode)("div",{class:"bk-message-content"},[(0,e.createVNode)("div",{class:"bk-message-icon"},[n()]),t.message]),t.dismissable&&(0,e.createVNode)(j.Error,{class:"bk-message-close",onClick:t.close},null)]):(0,e.createVNode)("div",{class:"bk-message-content multi"},[(0,e.createVNode)("div",{class:"overview"},[(0,e.createVNode)("div",{class:"left-content"},[(0,e.createVNode)("div",{class:"bk-message-icon"},[n()]),(0,e.createVNode)("div",{class:"describe"},[null!==(a=null===(i=(o=t.$slots).title)||void 0===i?void 0:i.call(o))&&void 0!==a?a:"【".concat(t.message.code,"】").concat(t.message.overview," ").concat(t.message.suggestion)])]),(0,e.createVNode)("div",{class:"tools"},[t.renderMessageActions()])]),t.toolOperation.isDetailShow&&(0,e.createVNode)("div",{class:"message-detail"},[(0,e.createVNode)("div",{class:"message-copy",ref:"refCopyMsgDiv",onClick:t.copyMessage},[(0,e.createVNode)(j.CopyShape,null,null),(0,e.createVNode)("div",{class:"copy-status",ref:"refCopyStatus"},[(0,e.createVNode)("div",{class:"inner"},[n(t.copyStatus),"success"===t.copyStatus?t.t.copySuccess:t.t.copyFailed])])]),(0,e.createVNode)("div",{ref:"refJsonContent",class:"message-tree"},[r(t.message)])])])]),[[e.vShow,t.visible]])];var o,i,a}})}}),k=function(o){!function(o,i){var s=i,a=s.position||"top-right";"string"==typeof i&&(s={message:i});var c=i.onClose,l=s.offsetX||10,u=s.offsetY||30,f=s.spacing,p=void 0===f?10:f;n[a].forEach((function(e){u+=(e.el.offsetHeight||0)+p}));var d="message_".concat(r+=1);s=Object.assign(Object.assign({},s),{offsetX:l,offsetY:u,id:d});var m=document.createElement("div"),y=(0,e.createVNode)(o,s);y.props.onDestroy=function(t){!function(e,t,r,o){null==o||o();var i=t.startsWith("top")?"top":"bottom",s=-1;n[t].forEach((function(t,n){t.props.id===e&&(s=n)}));for(var a=n[t][s].el.offsetHeight,c=n[t].length,l=s;l<c;l++){var u=parseInt(n[t][l].el.style[i],10)-a-r;n[t][l].component.props.offsetY=u}n[t].splice(s,1)}(t,a,p,c),(0,e.render)(null,m)},(0,e.render)(y,m),n[a].push(y),(y.props.getContainer&&(0,t.isElement)(y.props.getContainer)?y.props.getContainer:document.body).appendChild(m.firstElementChild)}(S,o)}})(),c})()));

package/lib/message/index.js.LICENSE.txt

@@ -0,0 +1,6 @@
+/*!
+ * clipboard.js v2.0.11
+ * https://clipboardjs.com/
+ *
+ * Licensed MIT © Zeno Rocha
+ */

package/lib/message/message.css

@@ -11,17 +11,22 @@
   border: 1px solid #e1ecff;
   border-radius: 2px;
   transform: translateX(-50%);
-  box-shadow: 0px 2px 4px 0px rgba(16, 37, 74, 0.1);
+  box-shadow: 0px 2px 4px 0px #e1e8f4;
   justify-content: space-between;
 }
 .bk-message .bk-message-close {
   padding-left: 20px;
   margin-right: 0;
-  font-size: 18px;
+  font-size: 14px;
+  color: #c4c6cc;
   cursor: pointer;
 }
+.bk-message .bk-message-close:hover {
+  color: #979ba5;
+}
 .bk-message-icon {
   display: inline-block;
+  height: 18px;
   margin-right: 10px;
   font-size: 18px;
   color: #3a84ff;
@@ -33,6 +38,7 @@
 .bk-message-warning {
   background: #fff4e2;
   border: 1px solid #ffe8c3;
+  box-shadow: 0px 2px 4px 0px #ede6db;
 }
 .bk-message-warning .bk-message-icon {
   color: #ff9c01;
@@ -40,6 +46,7 @@
 .bk-message-success {
   background: #f2fff4;
   border: 1px solid #dcffe2;
+  box-shadow: 0px 2px 4px 0px #cef0d7;
 }
 .bk-message-success .bk-message-icon {
   color: #2dcb56;
@@ -47,6 +54,7 @@
 .bk-message-error {
   background: #ffeded;
   border: 1px solid #ffdddd;
+  box-shadow: 0px 2px 4px 0px #f6dada;
 }
 .bk-message-error .bk-message-icon {
   color: #ea3636;
@@ -60,3 +68,159 @@
   margin-top: -50px;
   opacity: 0;
 }
+.bk-message-content {
+  display: flex;
+  width: 100%;
+  word-break: break-all;
+}
+.bk-message-content.multi {
+  flex-direction: column;
+  position: relative;
+}
+.bk-message-content.multi .overview {
+  display: flex;
+  justify-content: space-between;
+  align-items: self-start;
+}
+.bk-message-content.multi .overview .left-content {
+  display: flex;
+}
+.bk-message-content.multi .overview .left-content .describe {
+  display: box;
+  max-width: 560px;
+  max-height: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+.bk-message-content.multi .overview .tools {
+  display: flex;
+  align-items: center;
+}
+.bk-message-content.multi .overview .tools .tool {
+  display: flex;
+  padding: 0 5px;
+  font-size: 14px;
+  cursor: pointer;
+  align-items: center;
+}
+.bk-message-content.multi .overview .tools .tool .bk-message-close {
+  padding-left: 0;
+}
+.bk-message-content.multi .overview .tools .tool .message-action-text {
+  padding-left: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-message-content.multi .overview .tools .tool:not(.fix) span {
+  color: #3a84ff;
+}
+.bk-message-content.multi .overview .tools .tool.fix.fixed span {
+  color: #3a84ff;
+}
+.bk-message-content.multi .overview .tools .tool.fix span {
+  color: #979ba5;
+}
+.bk-message-content.multi .overview .tools .tool.fix:hover span {
+  color: #3a84ff;
+}
+.bk-message-content.multi .overview .tools .tool.close span {
+  color: #c4c6cc;
+}
+.bk-message-content.multi .overview .tools .tool.close span:hover {
+  color: #979ba5;
+}
+.bk-message-content.multi .message-detail {
+  position: relative;
+  margin-top: 10px;
+}
+.bk-message-content.multi .message-detail .message-tree {
+  max-height: 480px;
+  padding: 14px 24px;
+  overflow: auto;
+  background: #fff;
+  border-radius: 2px;
+}
+.bk-message-content.multi .message-detail .message-tree .message-row {
+  display: inline-flex;
+  font-size: 14px;
+  line-height: 34px;
+  color: #313238;
+}
+.bk-message-content.multi .message-detail .message-tree .message-row label {
+  display: inline-block;
+  width: 94px;
+  min-width: 94px;
+  margin-right: 8px;
+  overflow: hidden;
+  color: #63656e;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-message-content.multi .message-detail .message-tree .message-row label::after {
+  content: ':';
+}
+.bk-message-content.multi .message-detail .message-copy {
+  position: absolute;
+  top: 20px;
+  right: 40px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.bk-message-content.multi .message-detail .message-copy:hover span {
+  color: #3a84ff;
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status {
+  display: none;
+  padding-bottom: 4px;
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status .inner {
+  position: relative;
+  display: flex;
+  padding: 6px 8px;
+  font-size: 12px;
+  line-height: 20px;
+  color: #63656e;
+  background: #fff;
+  border: 1px solid #dcdee5;
+  box-shadow: 0 2px 6px 0 #0000001a;
+  align-items: center;
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status .inner span {
+  margin-right: 4px;
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status .inner::after {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  background: #fff;
+  border-color: #dcdee5;
+  border-style: solid;
+  border-width: 0px 1px 1px 0px;
+  content: '';
+  transform: translate(0, 4px) rotate(45deg);
+  box-shadow: 5px 3px 6px 0 #0000001a;
+  box-sizing: border-box;
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status.success .inner span {
+  color: #2dcb9d;
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status.error .inner span {
+  color: #ea3636;
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status.is-show {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  white-space: nowrap;
+  transform: translate(-50%, -100%);
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status.is-hidden {
+  display: none;
+}

package/lib/message/message.less

@@ -13,19 +13,25 @@
   border: 1px solid @message-primary-border-color;
   border-radius: 2px;
   transform: translateX(-50%);
-  box-shadow: 0px 2px 4px 0px rgba(16, 37, 74, .1);
+  box-shadow: 0px 2px 4px 0px @message-primary-shadow-color;
   justify-content: space-between;
 
   .bk-message-close {
     padding-left: 20px;
     margin-right: 0;
-    font-size: 18px;
+    font-size: 14px;
+    color: @light-gray;
     cursor: pointer;
+
+    &:hover {
+      color: @gray-color;
+    }
   }
 }
 
 .@{bk-prefix}-message-icon {
   display: inline-block;
+  height: 18px;
   margin-right: 10px;
   font-size: 18px;
   color: @primary-color;
@@ -39,6 +45,7 @@
 .@{bk-prefix}-message-warning {
   background: @message-warning-bg-color;
   border: 1px solid @message-warning-border-color;
+  box-shadow: 0px 2px 4px 0px @message-warning-shadow-color;
   .@{bk-prefix}-message-icon {
     color: @warning-color;
   }
@@ -47,6 +54,7 @@
 .@{bk-prefix}-message-success {
   background: @message-success-bg-color;
   border: 1px solid @message-success-border-color;
+  box-shadow: 0px 2px 4px 0px @message-success-shadow-color;
   .@{bk-prefix}-message-icon {
     color: @success-color;
   }
@@ -55,18 +63,225 @@
 .@{bk-prefix}-message-error {
   background: @message-danger-bg-color;
   border: 1px solid @message-danger-border-color;
+  box-shadow: 0px 2px 4px 0px @message-danger-shadow-color;
   .@{bk-prefix}-message-icon {
     color: @danger-color;
   }
 }
 
-.bk-message-fade-enter-active,
-.bk-message-fade-leave-active {
+.@{bk-prefix}-message-fade-enter-active,
+.@{bk-prefix}-message-fade-leave-active {
   transition: margin .2s linear;
 }
 
-.bk-message-fade-enter-from,
-.bk-message-fade-leave-to {
+.@{bk-prefix}-message-fade-enter-from,
+.@{bk-prefix}-message-fade-leave-to {
   margin-top: -50px;
   opacity: 0;
-}
+}
+
+.@{bk-prefix}-message-content {
+  display: flex;
+  width: 100%;
+  word-break: break-all;
+
+  &.multi {
+    flex-direction: column;
+    position: relative;
+
+    .overview {
+      display: flex;
+      justify-content: space-between;
+      align-items: self-start;
+
+      .left-content {
+        display: flex;
+
+        .describe {
+          display: box;
+          max-width: 560px;
+          max-height: 60px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
+        }
+      }
+
+      .tools {
+        display: flex;
+        align-items: center;
+
+        .tool {
+          display: flex;
+          padding: 0 5px;
+          font-size: 14px;
+          cursor: pointer;
+          align-items: center;
+
+          .@{bk-prefix}-message-close {
+            padding-left: 0;
+          }
+
+          .message-action-text {
+            padding-left: 4px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          &:not(.fix) {
+            span {
+              color: #3a84ff;
+            }
+          }
+        
+          &.fix {
+            &.fixed {
+              span {
+                color: #3a84ff;
+              }
+            }
+          
+            span {
+              color: #979ba5;
+            }
+
+            &:hover {
+              span {
+                color: #3a84ff;
+              }
+            }
+          }
+
+          &.close {
+            span {
+              color: #c4c6cc;
+
+              &:hover {
+                color: #979ba5;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .message-detail {
+      position: relative;
+      margin-top: 10px;
+
+      .message-tree {
+        max-height: 480px;
+        padding: 14px 24px;
+        overflow: auto;
+        background: #fff;
+        border-radius: 2px;
+
+        .message-row {
+          display: inline-flex;
+          font-size: 14px;
+          line-height: 34px;
+          color: #313238;
+
+          label {
+            display: inline-block;
+            width: 94px;
+            min-width: 94px;
+            margin-right: 8px;
+            overflow: hidden;
+            color: #63656e;
+            text-align: right;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            &::after {
+              content: ':';
+            }
+          }
+        }
+      }
+
+      .message-copy {
+        position: absolute;
+        top: 20px;
+        right: 40px;
+        font-size: 16px;
+        cursor: pointer;
+
+        &:hover {
+          span {
+            color: #3a84ff;
+          }
+        }
+
+        .copy-status {
+          display: none;
+          padding-bottom: 4px;
+
+          .inner {
+            position: relative;
+            display: flex;
+            padding: 6px 8px;
+            font-size: 12px;
+            line-height: 20px;
+            color: #63656e;
+            background: #fff;
+            border: 1px solid #dcdee5;
+            box-shadow: 0 2px 6px 0 #0000001a;
+            align-items: center;
+
+            span {
+              margin-right: 4px;
+            }
+
+            &::after {
+              position: absolute;
+              bottom: 0;
+              left: 50%;
+              width: 8px;
+              height: 8px;
+              background: #fff;
+              border-color: #dcdee5;
+              border-style: solid;
+              border-width: 0px 1px 1px 0px;
+              content: '';
+              transform: translate(0, 4px) rotate(45deg);
+              box-shadow: 5px 3px 6px 0 #0000001a;
+              box-sizing: border-box;
+            }
+          }
+
+          &.success {
+            .inner {
+              span {
+                color: #2dcb9d;
+              }
+            }
+          }
+
+          &.error {
+            .inner {
+              span {
+                color: #ea3636;
+              }
+            }
+          }
+
+          &.is-show {
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: inline-flex;
+            white-space: nowrap;
+            transform: translate(-50%, -100%);
+          }
+
+          &.is-hidden {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}