更新layer

src/layer/index.js

@@ -34,6 +34,10 @@ class Layer extends Component {
         this.#wrapped = !BUILDIN_TYPES.includes(v)
       }
     },
+    left: { type: String, attribute: false },
+    right: { type: String, attribute: false },
+    top: { type: String, attribute: false },
+    bottom: { type: String, attribute: false },
     fixed: false,
     mask: false,
     'mask-close': false,
@@ -58,6 +62,14 @@ class Layer extends Component {
       :host([type]) {
         display: flex;
       }
+      :host([type='toast']),
+      :host([type='notify']),
+      :host([type='common']) {
+        .layer {
+          position: absolute;
+        }
+      }
+
       .noselect {
         -webkit-touch-callout: none;
         user-select: none;
@@ -70,7 +82,6 @@ class Layer extends Component {
 
     css`
       .layer {
-        overflow: hidden;
         flex: 0 auto;
         position: relative;
         z-index: 65535;
@@ -82,11 +93,6 @@ class Layer extends Component {
         transition: opacity 0.2s ease-in-out, left 0.2s ease-in-out,
           right 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
 
-        &.scale {
-          transform: scale(1.01);
-          transition: transform 0.1s linear;
-        }
-
         &:active {
           z-index: 65536;
         }
@@ -129,9 +135,13 @@ class Layer extends Component {
           }
 
           ::slotted(&__toast) {
+            flex-shrink: 0;
+            flex: 1;
             display: flex;
             align-items: center;
             width: 300px;
+            min-height: 40px;
+            margin-bottom: 15px !important;
             padding: 0 10px !important;
             border-radius: 3px;
             font-weight: normal;
@@ -139,6 +149,9 @@ class Layer extends Component {
             --size: 16px;
             color: var(--color-dark-1);
           }
+          ::slotted(&__toast + &__toast) {
+            margin-top: 30px;
+          }
 
           ::slotted(&__toast.style-info) {
             border: 1px solid #ebeef5;
@@ -226,8 +239,7 @@ class Layer extends Component {
     css`
       :host([mask]) {
         height: 100%;
-        background: rgba(255, 255, 255, 0.15);
-        backdrop-filter: blur(5px);
+        background: rgba(0, 0, 0, 0.2);
       }
 
       :host([type='alert']),
@@ -258,6 +270,7 @@ class Layer extends Component {
           box-shadow: none;
 
           &__content {
+            flex-direction: column;
             min-height: 40px;
           }
         }
@@ -322,6 +335,40 @@ class Layer extends Component {
     }
   }
 
+  #play() {
+    switch (this.type) {
+      case 'toast':
+        let elem = this.lastElementChild
+        elem._anim = elem.animate(
+          [
+            { marginTop: '-30px', opacity: 0 },
+            { marginTop: '0', opacity: 1 }
+          ],
+          {
+            duration: 200,
+            fill: 'forwards'
+          }
+        )
+        setTimeout(() => {
+          elem._anim.reverse()
+          elem._anim.onfinish = _ => {
+            elem.remove()
+          }
+          if (this.children.length === 0) {
+            this.close()
+            toastInstance = null
+          }
+        }, 3000)
+        break
+      case 'notify':
+        break
+
+      default:
+        this.$refs.box.$animate()
+        break
+    }
+  }
+
   mounted() {
     if (this.type === 'prompt') {
       this.$refs.input = this.firstElementChild
@@ -337,15 +384,14 @@ class Layer extends Component {
 
         if (path[0] === ev.currentTarget) {
           if (UNIQUE_TYPES.includes(this.type)) {
-            this.$refs.box.classList.toggle('scale', true)
-            setTimeout(_ => {
-              this.$refs.box.classList.remove('scale')
-            }, 100)
-          } else if (this['mask-close']) {
+            return
+          }
+
+          if (this['mask-close']) {
             if (this.#wrapped === false) {
               this.#reject()
             }
-            this.close()
+            this.$refs.box.$animate(true).then(_ => this.close())
           }
         }
       })
@@ -357,11 +403,19 @@ class Layer extends Component {
 
     this.#toggleDrag()
 
-    this.$refs.box.$animate()
+    this.#play()
   }
 
   updated() {
-    this.$refs.box.$animate()
+    this.#play()
+  }
+
+  moveTo(obj = {}) {
+    var css = ''
+    for (var k in obj) {
+      css += `${k}:${obj[k]};`
+    }
+    this.$refs.box.style.cssText += css
   }
 
   show() {
@@ -442,8 +496,22 @@ class Layer extends Component {
   }
 
   render() {
+    let { type, mask, left, right, top, bottom } = this
+    let styles = ''
+
+    if (type === 'common' && mask === false) {
+      top = top || 0
+    }
+
+    styles = styleMap({ left, right, top, bottom })
+
     return html`
-      <div ref="box" #animation=${{ type: 'micro-bounce' }} class="layer">
+      <div
+        ref="box"
+        class="layer"
+        #animation=${{ type: 'micro-bounce' }}
+        style=${styles}
+      >
         <div
           class="layer__title noselect"
           style=${styleMap({ display: !!this.title ? '' : 'none' })}
@@ -475,6 +543,7 @@ class Layer extends Component {
 function layer(opt = {}) {
   let layDom = document.createElement('wc-layer')
   let { type = 'common', content = '' } = opt
+  let alreadyInTree = false
 
   if (type === 'toast') {
     opt = {
@@ -485,18 +554,18 @@ function layer(opt = {}) {
     }
 
     if (toastInstance) {
-      toastInstance.close(true)
+      // toastInstance.close(true)
+      layDom = toastInstance
+      alreadyInTree = true
+    } else {
+      toastInstance = layDom
     }
-    toastInstance = layDom
+    layDom.top = '20px'
   } else {
     layDom.mask = opt.mask
 
-    if (opt.btns === false) {
-      layDom.btns = []
-    } else if (opt.btns && opt.btns.length) {
+    if (opt.btns && opt.btns.length) {
       layDom.btns = opt.btns
-    } else {
-      layDom.btns = LANG_BTNS.concat()
     }
 
     if (opt.intercept && typeof opt.intercept === 'function') {
@@ -511,9 +580,6 @@ function layer(opt = {}) {
     }
 
     /* 额外样式 */
-    layDom['mask-color'] = opt['mask-color']
-
-    layDom.blur = opt.blur
 
     layDom.radius = opt.radius
     layDom.background = opt.background
@@ -545,8 +611,17 @@ function layer(opt = {}) {
 
   layDom.fixed = !!opt.fixed
 
-  layDom.innerHTML = content
-  document.body.appendChild(layDom)
+  if (alreadyInTree) {
+    let tmp = document.createElement('template')
+    tmp.innerHTML = opt.content
+
+    layDom.appendChild(tmp.content.cloneNode(true))
+
+    layDom.updated()
+  } else {
+    layDom.innerHTML = content
+    document.body.appendChild(layDom)
+  }
 
   return layDom.promise
 }
@@ -615,7 +690,10 @@ layer.notify = function (content) {
     type: 'notify',
     title: '通知',
     content,
-    blur: true,
+    fixed: true,
+    mask: false,
+    top: 0,
+    right: 0,
     from: { right: '-300px', top: 0 },
     to: { right: 0 }
   })
@@ -640,7 +718,7 @@ layer.toast = function (txt, type = 'info') {
   return this({
     content: `
       <div class="layer__content__toast style-${type}">
-        <wc-icon is="${ico}"></wc-icon>
+        <wc-icon name="${ico}"></wc-icon>
         <span class="toast-txt">${txt}</span>
       </div>`,
     type: 'toast'