优化toast样式;优化button自动聚焦

src/base/drawer.wc

@@ -217,6 +217,7 @@ export default class Drawer {
   mounted() {
     this._closeFn = $.bind(this.__CLOSE__, 'click', _ => {
       this.visible = false
+      this.dispatchEvent(new CustomEvent('closed'))
     })
   }
 

src/form/button.wc

@@ -269,8 +269,6 @@
 import '../icon/index'
 import $ from '../utils'
 
-const IS_FIREFOX = !!window.sidebar
-
 export default class Button {
   props = {
     icon: '',
@@ -380,13 +378,9 @@ export default class Button {
         break
 
       case 'autofocus':
+        // 部分浏览器需要执行一下 focus()才能聚焦成功
         this.__BTN__.setAttribute('autofocus', '')
-        // 辣鸡火狐, 要触发一下focus, 才能聚焦
+        setTimeout(_ => this.__BTN__.focus(), 10)
-        if (IS_FIREFOX) {
-          setTimeout(_ => {
-            this.__BTN__.focus()
-          }, 10)
-        }
         break
 
       //

src/form/link.wc

@@ -191,8 +191,6 @@
 import '../icon/index'
 import $ from '../utils'
 
-const IS_FIREFOX = !!window.sidebar
-
 export default class Link {
   props = {
     to: null, // 跳转的地址
@@ -258,13 +256,9 @@ export default class Link {
   watch() {
     switch (name) {
       case 'autofocus':
+        // 部分浏览器需要执行一下 focus()才能聚焦成功
         this.__LINK__.setAttribute('autofocus', '')
-        // 辣鸡火狐, 要触发一下focus, 才能聚焦
+        setTimeout(_ => this.__LINK__.focus(), 10)
-        if (IS_FIREFOX) {
-          setTimeout(_ => {
-            this.__LINK__.focus()
-          }, 10)
-        }
         break
 
       case 'to':

src/icon/svg.js

@@ -99,8 +99,7 @@ const SVG_PATH = {
   load:
     'M587.6 587.9c25.3-25.3 202.5 88.6 234.2 120.2 31.7 31.6 38 88.5 6.4 120.1-31.6 31.6-82.2 31.6-113.9-0.1-31.7-31.6-152-215-126.7-240.2zM436 434.8c-25.3 25.3-202.5-88.6-234.2-120.2-31.7-31.6-38-88.5-6.4-120.1 31.6-31.6 82.2-31.6 113.9 0.1 31.7 31.6 152 214.9 126.7 240.2z m-31.8 77.7c0 35.7-205.9 80.4-250.7 80.4-44.8 0-89.5-35.7-89.5-80.4s35.8-80.4 80.6-80.4c44.7 0 259.6 44.7 259.6 80.4z m31.9 76.8c25.3 25.3-88.7 202.3-120.3 233.9-31.7 31.6-88.6 38-120.2 6.4-31.6-31.6-31.6-82.2 0-113.8 31.7-31.6 215.2-151.8 240.5-126.5z m75.9 30.9c35.8 0 80.5 205.7 80.5 250.4 0 44.7-35.8 89.4-80.5 89.4s-80.5-35.8-80.5-80.5 44.7-259.3 80.5-259.3z m107.8-107.7c0-35.7 205.9-80.4 250.7-80.4 44.8 0 89.5 35.7 89.5 80.4s-35.8 80.4-80.6 80.4c-44.7 0-259.6-44.7-259.6-80.4z m-33.6-75.9c-25.3-25.3 88.7-202.3 120.3-233.9 31.7-31.6 88.6-38 120.2-6.4 31.6 31.6 31.6 82.1-0.1 113.8-31.6 31.6-215.1 151.8-240.4 126.5zM512 403.8c-35.8 0-80.5-205.7-80.5-250.4 0-44.7 35.8-89.4 80.5-89.4s80.5 35.8 80.5 80.5-44.7 259.3-80.5 259.3z',
   // 这个会做动画
-  loading:
+  loading: '<circle class="circle" cx="512" cy="512" r="384" fill="none" stroke-width="80" />',
-    '<circle class="circle" cx="512" cy="512" r="384" fill="none" stroke-width="80" />',
   location:
     'M511.9 960h-0.1c-16.2-0.1-31.7-8.2-42.3-22.3-7.7-10-78-101.2-147.4-212.6C230 577.4 183.3 465.5 183.3 392.7 183.3 211.5 330.8 64 512 64s328.7 147.5 328.7 328.7c0 72.9-46.8 185-139.1 333.1-69.2 111-139.1 201.8-147.1 212.1-10.6 14.1-26 22.2-42.3 22.2l-0.3-0.1z m0.1-845.4c-153.3 0-278.1 124.8-278.1 278.1 0 63.9 47.2 172.4 136.4 313.9C439.9 816.9 508.9 906 509.6 906.8l0.2 0.3c1.1 1.4 1.9 2 2.3 2.2 0.4-0.2 1.1-0.8 2.1-2.1l0.1-0.1c2.8-3.6 275.8-357.8 275.8-514.4 0-153.3-124.8-278.1-278.1-278.1z m0.2 346.2c-55.1 0-99.9-44.8-99.9-99.9 0-55.1 44.8-99.9 99.9-99.9 55.1 0 99.9 44.8 99.9 99.9-0.1 55.1-44.9 99.9-99.9 99.9z m0-149.1c-27.2 0-49.3 22.1-49.3 49.3 0 27.2 22.1 49.3 49.3 49.3 27.2 0 49.3-22.1 49.3-49.3-0.1-27.2-22.2-49.3-49.3-49.3z',
   lock:
@@ -187,7 +186,7 @@ const SVG_PATH = {
     'M929.2 960c-13.7 0-25.5-8.9-29.5-22-12.6-41.6-31.5-80.7-56.4-116.4-24.5-35.2-54.2-66.2-88.2-92-70.6-53.7-154.7-82.1-243.2-82.1-88.4 0-172.5 28.4-243 82-34 25.8-63.6 56.7-88.2 91.9-24.9 35.6-43.8 74.7-56.4 116.2-2.4 8-7.8 14.5-15.1 18.4-7.3 3.9-15.6 4.6-23.5 2.2-16.2-5-25.3-22.4-20.4-38.8 14.5-47.8 36.4-92.8 65-133.8 28.2-40.4 62.4-76 101.5-105.7 39.6-30.1 83.3-53.5 129.9-69.5 48.3-16.6 98.8-25 150.2-25 51.5 0 102 8.4 150.3 25.1 46.7 16.1 90.4 39.5 130 69.6 39.1 29.8 73.2 65.4 101.5 105.9 28.6 41 50.4 86.1 64.9 134 4.9 16.3-4.2 33.7-20.4 38.7-2.9 0.8-6 1.3-9 1.3zM512 569c-67.4 0-130.9-26.3-178.6-74-47.7-47.7-74-111.1-74-178.6s26.3-130.9 74-178.6C381.1 90.3 444.5 64 512 64c67.4 0 130.9 26.3 178.6 74 47.7 47.7 74 111.1 74 178.5s-26.3 130.9-74 178.6C642.9 542.8 579.4 569 512 569z m0-443.4c-51 0-98.9 19.9-135 55.9-36.1 36.1-55.9 84-55.9 135s19.9 98.9 55.9 135c36.1 36.1 84 55.9 135 55.9s99-19.9 135-55.9c36.1-36.1 55.9-84 55.9-135s-19.9-98.9-55.9-135c-36.1-36.1-84-55.9-135-55.9z',
   vip:
     'M511.9 946.7c-8.5 0-16.6-4-21.8-10.8L165 511.8c-6.1-7.7-7.6-18.2-3.9-27.3 3.7-9.2 12.1-15.6 22-16.9 8.2-1 16.3 1.7 22.2 7.2h0.5l306.1 399.3 222.7-290.6c4.5-5.8 10.9-9.5 18.2-10.5 7.3-1 14.5 1 20.3 5.4 12 9.2 14.3 26.5 5.1 38.5l-244.5 319c-5.1 6.7-13.3 10.8-21.8 10.8z m75.6-332h-1.7a16 16 0 0 1-3.9-0.5l-2.7-0.5-3.9-1.4-0.6-0.3c-7.5-4-11.7-11.4-11.7-20.7V432c0-19.9 12-31.3 32.8-31.3h57.5c21.6 0 38.3 5.4 49.6 16 11.5 10.8 17.3 26.7 17.3 47.3 0 21.6-7.5 38.4-22.3 49.9-12.1 9.2-27.2 13.9-45.1 13.9h-42.6v63.5c0 9.3-4.1 16.7-11.7 20.7l-0.6 0.3-3.9 1.4-2.7 0.5c-1.1 0.4-2.4 0.5-3.8 0.5z m22.8-118.2h33.8c5.9 0 10.7-1.2 14.4-3.5l0.1-0.1c3.2-1.9 5.6-4.5 7.4-8l0.1-0.2c1.8-3.2 3.1-6.9 3.9-11 0.6-3.4 0.8-6.9 0.8-10.4 0-1.5-0.1-3-0.2-4.6v-0.8c0-1.6-0.1-3.1-0.4-4.6-0.7-4.3-1.8-7.8-3.2-10.7-1.8-3.3-4-5.9-6.9-7.6-3.7-2.2-8.6-3.3-14.3-3.3h-35.5v64.8zM488 600c-0.6-137.8-0.9-183.2 0-187 2-8.1 10.6-19.4 24-19 11.6 0.3 21.5 9.3 23 21 0.1 61.8 0.1 123.6 0.2 185.3-1.6 11.7-11.6 20.5-23.2 20.7-12 0.2-22.5-8.9-24-21z m-100.9 14.7c-14 0-24.4-7.3-29.3-20.6l-60.2-169-0.1-0.7c-0.3-1.4-0.4-2.8-0.4-4.2 0-14.6 9.3-23.3 25-23.3 8.5 0 13.6 3.6 16.4 6.6l0.3 0.4c1.3 1.5 2.4 3.2 3.3 5.2l0.4 0.8 0.4 0.6 50.6 145.8L444.4 408c2.7-7 8.4-11 15.6-11 10.1 0 16.7 6.6 16.7 16.7v2.7l-61 177.5c-1.6 4.7-4.2 9-7.8 12.6l-0.1 0.1c-5.7 5.4-12.6 8.1-20.7 8.1z m422.5-56.2c-5.8 0-11.7-1.9-16.7-5.7-11.7-9-14.2-25.5-5.7-37.6l0.2-0.3L910.7 354c9.2-12 26.4-14.3 38.4-5.1 12 9.2 14.3 26.4 5.1 38.5l-123.4 161-0.1 0.1c-5.5 6.6-13.3 10-21.1 10z m-669-96.1c-7.9 0-15.7-3.4-21.1-9.9l-0.2-0.3-49.7-64.8c-4.5-5.8-6.4-13-5.4-20.3 1-7.3 4.7-13.7 10.5-18.2 12-9.2 29.3-6.9 38.5 5.1l49.8 65c8.5 12.1 6 28.6-5.7 37.6-5 3.9-10.8 5.8-16.7 5.8z m643.6-88.6h-545c-13.4 0-24.4-10.9-24.4-24.4 0-13.4 10.9-24.4 24.4-24.4h545c13.4 0 24.4 10.9 24.4 24.4-0.1 13.5-11 24.4-24.4 24.4z m148.4-48.6c-8.8 0-17.2-4.3-22.4-11.6l-45.6-62.8c-4.3-5.9-6.1-13.2-4.9-20.4 1.1-7.2 5-13.6 11-17.9 12.2-8.9 29.4-6.2 38.3 6.1l45.7 62.9c5.8 7.8 7 18.3 3 27.4-4 9-12.5 15.2-22.4 16.2-0.9 0.1-1.8 0.1-2.7 0.1zM91.4 315c-5.6 0-11.2-1.7-16.1-5.2-12.2-8.9-15-26.1-6.1-38.3L202 88.6c5.1-7.1 13.4-11.3 22.2-11.3h575.4c8.7 0 17 4.2 22.2 11.3l51.6 71c4.3 5.9 6 13.2 4.9 20.4-1.1 7.2-5.1 13.6-11 17.9-5.9 4.3-13.2 6-20.4 4.9-7.2-1.1-13.6-5.1-17.9-11l-43.4-59.7H238.2L113.6 303.7c-5.3 7.4-13.7 11.3-22.2 11.3z',
-  warn:
+  warning:
     'M907.3 931H116.7c-20.2 0-36.9-8.4-46-23.2-9-14.7-8.9-33.5 0.3-51.5l363.3-711.7c13.5-26.4 45.6-48 76.2-51.3l2.7-0.3 2.7 0.3c30.7 3.3 62.7 24.9 76.2 51.4l361.2 711.5c9.1 18 9.2 36.8 0.2 51.6-9.3 14.7-26 23.2-46.2 23.2z m-791.8-50.7h793.1c-0.2-0.4-0.3-0.8-0.6-1.2l-0.9-1.7-360.3-709.8c-5.4-10.7-20.4-21.1-33.7-23.6-13.4 2.5-28.4 12.9-33.8 23.6L116 879.3c-0.2 0.3-0.3 0.7-0.5 1zM512 812c-24.3 0-44-19.7-44-44s19.7-44 44-44 44 19.7 44 44-19.7 44-44 44z m0-108c-16.5 0-30-13.5-30-30V330c0-16.5 13.5-30 30-30s30 13.5 30 30v344c0 16.5-13.5 30-30 30z',
   wallet:
     'M384.5 682.6V341.4c0-47 39.4-85.4 88.5-85.4h408.1v-42.6c0-47-39.2-85.4-87.6-85.4H155.2c-49.1 0-91.2 37-91.2 84v600c0 47 42.1 84 91.2 84h638.1c48.7 0 87.6-38.4 87.6-85.4V768H472.7c-48.9 0-88.2-38.4-88.2-85.4zM448 355.7v312.6c0 19.6 16.8 35.7 37.4 35.7h437.2c20.6 0 37.4-16.1 37.4-35.7V355.7c0-19.6-16.8-35.7-37.4-35.7H485.4c-20.6 0-37.4 16.1-37.4 35.7z m195.9 227.4c-43 2.7-78.4-32.8-75.8-75.8 2.2-35.4 31-64.2 66.6-66.7 43-2.7 78.4 32.8 75.8 75.8-2.5 35.7-31.2 64.5-66.6 66.7z',

src/layer/index.wc

@@ -48,8 +48,8 @@
   font-size: 14px;
   background: rgba(255, 255, 255, 0.8);
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
-  transition: opacity 0.2s ease-in-out, left 0.2s ease-in-out,
+  transition: opacity 0.2s ease-in-out, left 0.2s ease-in-out, right 0.2s ease-in-out,
-    right 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
+    top 0.2s ease-in-out, bottom 0.2s ease-in-out;
   opacity: 0;
 
   &.scale {
@@ -123,24 +123,24 @@
     }
 
     ::slotted(&__toast.style-info) {
-      // border: 1px solid var(--color-plain-3);
+      border: 1px solid #ebeef5;
-      background: var(--color-plain-a);
+      background: #edf2fc;
-      // color: var(--color-grey-3);
+      color: var(--color-grey-3);
     }
     ::slotted(&__toast.style-success) {
-      // border: 1px solid #b3e19d;
+      border: 1px solid #e1f3d8;
-      background: var(--color-green-a);
+      background: #f0f9eb;
-      // color: var(--color-green-3);
+      color: var(--color-green-3);
     }
-    ::slotted(&__toast.style-warn) {
+    ::slotted(&__toast.style-warning) {
-      // border: 1px solid #faebb4;
+      border: 1px solid #faebb4;
-      background: var(--color-orange-a);
+      background: #faecd8;
-      // color: var(--color-orange-3);
+      color: var(--color-red-1);
     }
     ::slotted(&__toast.style-error) {
-      // border: 1px solid #f5c4c4;
+      border: 1px solid #f5c4c4;
-      background: var(--color-red-a);
+      background: #fde2e2;
-      // color: var(--color-red-3);
+      color: var(--color-red-1);
     }
   }
 
@@ -178,7 +178,7 @@
       }
 
       &:focus {
-        // @include focus1;
+        box-shadow: 0 0 0 2px var(--color-plain-a);
       }
 
       &:last-child {
@@ -192,6 +192,9 @@
         &:active {
           background: var(--color-teal-3);
         }
+        &:focus {
+          box-shadow: 0 0 0 2px var(--color-teal-a);
+        }
       }
 
       &::-moz-focus-inner {
@@ -258,8 +261,7 @@ const LANGUAGES = {
   }
 }
 LANGUAGES['zh-CN'] = LANGUAGES.cn
-const lang =
+const lang = LANGUAGES[window.__ENV_LANG__ || navigator.language] || LANGUAGES.cn
-  LANGUAGES[window.__ENV_LANG__ || navigator.language] || LANGUAGES.cn
 
 let uniqueInstance = null // 缓存当前打开的alert/confirm/prompt类型的弹窗
 let toastInstance = null // 缓存toast的实例
@@ -270,7 +272,7 @@ const UNIQUE_TYPES = ['alert', 'confirm', 'prompt']
 function renderBtns(list) {
   var html = ''
   list.forEach((t, i) => {
-    html += `<button data-idx="${i}"">${t || lang.BTNS[i]}</button>`
+    html += `<button data-idx="${i}">${t || lang.BTNS[i]}</button>`
   })
 
   return html
@@ -313,10 +315,7 @@ export default class Layer {
     this.props.title = val
     if (val) {
       if (this.__TITLE__.firstElementChild) {
-        this.__TITLE__.insertBefore(
+        this.__TITLE__.insertBefore(document.createTextNode(val), this.__TITLE__.firstElementChild)
-          document.createTextNode(val),
-          this.__TITLE__.firstElementChild
-        )
       } else {
         this.__TITLE__.textContent = val
       }
@@ -389,9 +388,7 @@ export default class Layer {
       }
     } else {
       this._dragIns = new Drag(this.root.children[1]).by(this.__TITLE__, {
-        overflow: this.props.hasOwnProperty('overflow')
+        overflow: this.props.hasOwnProperty('overflow') ? this.props.overflow : false
-          ? this.props.overflow
-          : false
       })
       this.removeAttribute('fixed')
     }
@@ -574,6 +571,13 @@ export default class Layer {
       this.root.children[1].style.cssText += _style
     }
 
+    // 自动聚焦最后一个按钮
+    if (this.props.btns.length) {
+      // 部分浏览器需要执行一下 focus()才能聚焦成功
+      this.__CTRL__.lastElementChild.setAttribute('autofocus', '')
+      setTimeout(_ => this.__CTRL__.lastElementChild.focus(), 10)
+    }
+
     if (this.props.type === 'toast') {
       this.timer = setTimeout(() => {
         toastInstance = null
@@ -602,7 +606,6 @@ export default class Layer {
       case 'title':
       case 'type':
         this[name] = val
-        this.removeAttribute(name)
         break
       case 'mask-color':
       case 'background':
@@ -751,7 +754,7 @@ Object.assign(_layer, {
     }
 
     if (!intercept) {
-      intercept = function (val, done) {
+      intercept = function(val, done) {
         if (val) {
           done()
         }
@@ -788,7 +791,7 @@ Object.assign(_layer, {
     var ico = type
     switch (type) {
       case 'info':
-      case 'warn':
+      case 'warning':
         break
       case 'error':
         ico = 'deny'