Merge branch 'master' of ssh://github.com/bd-js/wcui

src/drawer/index.js

@@ -42,8 +42,8 @@ class Drawer extends Component {
       type: Boolean,
       default: false,
       observer(v) {
-        this.$anim.start(!v)
+        this.$animate(!v)
-        this.$refs.drawer.$anim.start(!v)
+        this.$refs.drawer.$animate(!v)
       }
     },
     width: '',

src/layer/index.js

@@ -4,7 +4,15 @@
  * @date 2023/03/06 15:17:25
  */
 
-import { css, html, Component, nextTick, styleMap } from '@bd/core'
+import {
+  css,
+  html,
+  Component,
+  bind,
+  unbind,
+  nextTick,
+  styleMap
+} from '@bd/core'
 import '../form/input.js'
 import Drag from '../drag/core.js'
 
@@ -22,7 +30,7 @@ class Layer extends Component {
     mask: false,
     title: { type: String, default: LANG_TITLE, attribute: false },
     content: { type: String, default: '', attribute: false },
-    btns: ['取消', '确定']
+    btns: []
   }
 
   static styles = [
@@ -54,7 +62,7 @@ class Layer extends Component {
       .layer {
         overflow: hidden;
         flex: 0 auto;
-        position: absolute;
+        position: relative;
         z-index: 65535;
         border-radius: 3px;
         color: #666;
@@ -111,7 +119,6 @@ class Layer extends Component {
 
           ::slotted(&__input) {
             flex: 1;
-            height: 36px;
           }
 
           ::slotted(&__toast) {
@@ -149,7 +156,7 @@ class Layer extends Component {
         }
 
         &__ctrl {
-          display: none;
+          display: flex;
           justify-content: flex-end;
           width: 100%;
           height: 60px;
@@ -165,7 +172,7 @@ class Layer extends Component {
             padding: 0 10px;
             margin: 0 5px;
             border: 1px solid var(--color-plain-3);
-            border-radius: 2px;
+            border-radius: 3px;
             white-space: nowrap;
             background: #fff;
             font-size: inherit;
@@ -251,17 +258,122 @@ class Layer extends Component {
     `
   ]
 
+  #wrapped = null
+  #dragIns = null
+
+  #resolve = null
+  #reject = null
+
+  constructor() {
+    super()
+
+    this.promise = new Promise((resolve, reject) => {
+      this.#resolve = resolve
+      this.#reject = reject
+    })
+
+    this.promise.host = this
+  }
+
+  #intercept(value) {
+    if (this.intercept) {
+      this.intercept(value, _ => {
+        delete this.intercept
+        this.#resolve(value)
+        this.$refs.box.$animate(true).then(_ => this.close())
+      })
+    } else {
+      this.#resolve(value)
+      this.$refs.box.$animate(true).then(_ => this.close())
+    }
+  }
+
   mounted() {
-    this.$refs.box.$anim.start()
+    if (this.type === 'prompt') {
+      this.$refs.input = this.firstElementChild
+      bind(this.$refs.input, 'submit', ev => {
+        this.#intercept(ev.target.value)
+      })
+    }
+
+    this.$refs.box.$animate()
   }
 
   updated() {
-    this.$refs.box.$anim.start()
+    this.$refs.box.$animate()
+  }
+
+  /**
+   * 关闭实例
+   * @param force {Boolean} 是否强制关闭
+   */
+  close(force) {
+    //
+
+    if (this.#wrapped) {
+      this.removeAttribute('common')
+      this.$emit('close')
+    } else {
+      // 有拖拽实例, 先销毁
+      if (this.#dragIns) {
+        this.#dragIns.destroy()
+      }
+      // 不允许多开的类型, 需要清除
+      if (UNIQUE_TYPES.includes(this.type)) {
+        uniqueInstance = null
+      }
+
+      // 离场动画
+      if (this.from && !force) {
+        let _style = 'opacity:0;'
+        for (let k in this.from) {
+          _style += `${k}:${this.from[k]};`
+        }
+        this.$refs.box.style.cssText += _style
+        this.timer = setTimeout(() => {
+          this.$emit('close')
+          this.remove()
+        }, 200)
+      } else {
+        clearTimeout(this.timer)
+        this.$emit('close')
+        this.remove()
+      }
+    }
+  }
+
+  // 按钮的点击事件
+  handleBtnClick(ev) {
+    if (ev.target.tagName === 'BUTTON') {
+      let idx = +ev.target.dataset.idx
+
+      switch (this.type) {
+        case 'alert':
+          this.#intercept(null)
+          break
+
+        case 'confirm':
+        case 'prompt':
+          if (idx === 0) {
+            this.#reject()
+            this.$refs.box.$animate(true).then(_ => this.close())
+          } else {
+            let value = this.type === 'prompt' ? this.$refs.input.value : null
+            this.#intercept(value)
+          }
+          break
+
+        default:
+          // 其他类型, 如有按钮, 直接交给拦截器处理
+          this.#intercept(idx)
+          break
+      }
+    }
   }
 
   render() {
     return html`
-      <div ref="box" #animation=${{ type: 'fade' }} class="layer">
+      <div ref="box" #animation=${{ type: 'micro-bounce' }} class="layer">
         <div
           class="layer__title noselect"
           style=${styleMap({ display: !!this.title ? '' : 'none' })}
@@ -273,7 +385,7 @@ class Layer extends Component {
         <div class="layer__content">
           <slot></slot>
         </div>
-        <div class="layer__ctrl noselect">
+        <div class="layer__ctrl noselect" @click=${this.handleBtnClick}>
           ${this.btns.map((s, i) => html`<button data-idx=${i}>${s}</button>`)}
         </div>
       </div>
@@ -362,7 +474,11 @@ function layer(opt = {}) {
   return layDom.promise
 }
 
-layer.alert = function (content, title = LANG_TITLE, btns) {
+layer.alert = function (
+  content,
+  title = LANG_TITLE,
+  btns = LANG_BTNS.slice(1)
+) {
   if (typeof title === 'object') {
     btns = title
     title = LANG_TITLE
@@ -376,7 +492,11 @@ layer.alert = function (content, title = LANG_TITLE, btns) {
   })
 }
 
-layer.confirm = function (content, title = LANG_TITLE, btns) {
+layer.confirm = function (
+  content,
+  title = LANG_TITLE,
+  btns = LANG_BTNS.concat()
+) {
   if (typeof title === 'object') {
     btns = title
     title = LANG_TITLE
@@ -408,7 +528,8 @@ layer.prompt = function (title = LANG_TITLE, defaultValue = '', intercept) {
     title,
     content: `<wc-input autofocus class="layer__content__input" value="${defaultValue}"></wc-input>`,
     mask: true,
-    intercept
+    intercept,
+    btns: LANG_BTNS.concat()
   })
 }
 

src/markd/index.js

@@ -88,7 +88,10 @@ const Decoder = {
   // 内联样式
   inline(str) {
     return str
-      .replace(INLINE.code, '<code class="inline">$1</code>')
+      .replace(INLINE.code, (m, str) => {
+        str = str.replace(/([_*~])/g, '\\$1')
+        return `<code class="inline">${str}</code>`
+      })
       .replace(INLINE.strong[0], '<strong>$1</strong>')
       .replace(INLINE.strong[1], '<strong>$1</strong>')
       .replace(INLINE.em[0], '<em>$1</em>')