优化z-index数值; 调整drawer动画机制以适配最新版core

src/color/index.js

@@ -256,7 +256,7 @@ class Color extends Component {
 
           .thumb {
             position: absolute;
-            z-index: 99;
+            z-index: 1;
             width: 0;
             height: 0;
 
@@ -358,7 +358,7 @@ class Color extends Component {
 
         .alpha {
           position: relative;
-          z-index: 9;
+          z-index: 1;
           display: block;
           width: 100%;
           height: 12px;

src/drawer/index.js

@@ -57,7 +57,7 @@ class Drawer extends Component {
         position: fixed;
         left: 0;
         top: 0;
-        z-index: 99;
+        z-index: 9;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.3);
@@ -100,6 +100,7 @@ class Drawer extends Component {
       :host([from='left']),
       :host([from='right']) {
         .drawer {
+          top: 0;
           width: 50%;
           height: 100%;
         }
@@ -107,29 +108,22 @@ class Drawer extends Component {
       :host([from='top']),
       :host([from='bottom']) {
         .drawer {
+          left: 0;
           width: 100%;
           height: 50%;
         }
       }
       :host([from='left']) .drawer {
         left: 0;
-        top: 0;
-        transform: translateX(-100%);
-      }
-      :host([from='top']) .drawer {
-        left: 0;
-        top: 0;
-        transform: translateY(-100%);
       }
       :host([from='right']) .drawer {
         right: 0;
+      }
+      :host([from='top']) .drawer {
         top: 0;
-        transform: translateX(100%);
       }
       :host([from='bottom']) .drawer {
-        left: 0;
         bottom: 0;
-        transform: translateY(100%);
       }
     `
   ]

src/layer/index.js

@@ -23,12 +23,21 @@ const LANG_TITLE = '提示'
 const LANG_BTNS = ['取消', '确定']
 // 要保证弹层唯一的类型
 const UNIQUE_TYPES = ['alert', 'confirm', 'prompt']
+const BUILDIN_TYPES = UNIQUE_TYPES.concat(['notify', 'toast'])
 
 class Layer extends Component {
   static props = {
-    type: '',
+    type: {
+      type: String,
+      default: null,
+      observer(v) {
+        this.#wrapped = !BUILDIN_TYPES.includes(v)
+      }
+    },
+    fixed: false,
     mask: false,
-    title: { type: String, default: LANG_TITLE, attribute: false },
+    'mask-close': false,
+    title: { type: String, default: '', attribute: false },
     content: { type: String, default: '', attribute: false },
     btns: []
   }
@@ -44,6 +53,7 @@ class Layer extends Component {
         left: 0;
         top: 0;
         width: 100%;
+        height: 0;
       }
       :host([type]) {
         display: flex;
@@ -76,9 +86,6 @@ class Layer extends Component {
           transform: scale(1.01);
           transition: transform 0.1s linear;
         }
-        &.blur {
-          backdrop-filter: blur(5px);
-        }
 
         &:active {
           z-index: 65536;
@@ -255,10 +262,16 @@ class Layer extends Component {
           }
         }
       }
+
+      :host([blurry]) {
+        .layer {
+          backdrop-filter: blur(5px);
+        }
+      }
     `
   ]
 
-  #wrapped = null
+  #wrapped = false
   #dragIns = null
 
   #resolve = null
@@ -275,6 +288,27 @@ class Layer extends Component {
     this.promise.host = this
   }
 
+  #toggleDrag() {
+    // 这3类弹层不允许拖拽
+    if (UNIQUE_TYPES.includes(this.type)) {
+      return
+    }
+
+    if (this.fixed) {
+      // 如之前有拖拽实例, 先销毁
+      if (this.#dragIns) {
+        this.#dragIns.destroy()
+        this.#dragIns = null
+      }
+      return
+    }
+    let $title = this.$refs.box.firstElementChild
+
+    this.#dragIns = new Drag(this.$refs.box).by($title, {
+      overflow: !!this.overflow
+    })
+  }
+
   #intercept(value) {
     if (this.intercept) {
       this.intercept(value, _ => {
@@ -296,6 +330,33 @@ class Layer extends Component {
       })
     }
 
+    // 有遮罩层时
+    if (this.mask) {
+      this.$on('click', ev => {
+        let path = ev.composedPath()
+
+        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']) {
+            if (this.#wrapped === false) {
+              this.#reject()
+            }
+            this.close()
+          }
+        }
+      })
+
+      if (this['mask-color']) {
+        this.style.backgroundColor = this['mask-color']
+      }
+    }
+
+    this.#toggleDrag()
+
     this.$refs.box.$animate()
   }
 
@@ -303,6 +364,12 @@ class Layer extends Component {
     this.$refs.box.$animate()
   }
 
+  show() {
+    if (this.#wrapped) {
+      this.type = 'common'
+    }
+  }
+
   /**
    * 关闭实例
    * @param force {Boolean} 是否强制关闭
@@ -311,7 +378,7 @@ class Layer extends Component {
     //
 
     if (this.#wrapped) {
-      this.removeAttribute('common')
+      this.type = null
       this.$emit('close')
     } else {
       // 有拖拽实例, 先销毁
@@ -344,8 +411,11 @@ class Layer extends Component {
 
   // 按钮的点击事件
   handleBtnClick(ev) {
-    if (ev.target.tagName === 'BUTTON') {
-      let idx = +ev.target.dataset.idx
+    if (
+      ev.target.tagName === 'BUTTON' ||
+      ev.target.className === 'notify-button'
+    ) {
+      let idx = +ev.target.dataset.idx || 0
 
       switch (this.type) {
         case 'alert':
@@ -378,14 +448,23 @@ class Layer extends Component {
           class="layer__title noselect"
           style=${styleMap({ display: !!this.title ? '' : 'none' })}
         >
-          ${this.title}${this.type === 'notify'
-            ? html`<wc-icon name="close"></wc-icon>`
+          ${this.title}
+          ${this.type === 'notify'
+            ? html`<wc-icon
+                name="close"
+                class="notify-button"
+                @click=${this.handleBtnClick}
+              ></wc-icon>`
             : ''}
         </div>
         <div class="layer__content">
           <slot></slot>
         </div>
-        <div class="layer__ctrl noselect" @click=${this.handleBtnClick}>
+        <div
+          class="layer__ctrl noselect"
+          style=${styleMap({ display: this.btns.length ? '' : 'none' })}
+          @click=${this.handleBtnClick}
+        >
           ${this.btns.map((s, i) => html`<button data-idx=${i}>${s}</button>`)}
         </div>
       </div>
@@ -463,12 +542,10 @@ function layer(opt = {}) {
 
   layDom.type = opt.type
   layDom.title = opt.title
-  if (opt.hasOwnProperty('fixed')) {
-    layDom.fixed = opt.fixed
-  }
+
+  layDom.fixed = !!opt.fixed
 
   layDom.innerHTML = content
-  layDom.wrapped = false // 用于区分是API创建的还是包裹现有的节点
   document.body.appendChild(layDom)
 
   return layDom.promise

src/scroll/index.js

@@ -55,7 +55,6 @@ class Scroll extends Component {
         position: absolute;
         display: flex;
         justify-content: flex-end;
-        z-index: 10240;
         opacity: 0;
         user-select: none;
         transition: opacity 0.3s linear, visibility 0.3s linear;