From d3eb76baef64b4e649a68a399c4311751f477d25 Mon Sep 17 00:00:00 2001 From: yutent Date: Mon, 3 Apr 2023 19:07:49 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E6=9B=B4=E6=96=B0layer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layer/index.js | 39 +++++++++++++++++++++++++++++++-------- 1 file changed, 31 insertions(+), 8 deletions(-) diff --git a/src/layer/index.js b/src/layer/index.js index 5a911cf..a0e42eb 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -22,7 +22,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 +54,7 @@ class Layer extends Component { .layer { overflow: hidden; flex: 0 auto; - position: absolute; + position: relative; z-index: 65535; border-radius: 3px; color: #666; @@ -149,7 +149,7 @@ class Layer extends Component { } &__ctrl { - display: none; + display: flex; justify-content: flex-end; width: 100%; height: 60px; @@ -165,7 +165,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; @@ -259,6 +259,15 @@ class Layer extends Component { this.$refs.box.$anim.start() } + close() { + // + } + + handleBtnClick(ev) { + // + let idx = +ev.target.dataset.idx + } + render() { return html`
@@ -274,7 +283,12 @@ class Layer extends Component {
- ${this.btns.map((s, i) => html``)} + ${this.btns.map( + (s, i) => + html`` + )}
` @@ -362,7 +376,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 +394,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 +430,8 @@ layer.prompt = function (title = LANG_TITLE, defaultValue = '', intercept) { title, content: ``, mask: true, - intercept + intercept, + btns: LANG_BTNS.concat() }) } From 64f2637c939150e8346dfcf384951b89e76d6802 Mon Sep 17 00:00:00 2001 From: yutent Date: Tue, 4 Apr 2023 12:10:40 +0800 Subject: [PATCH 2/5] =?UTF-8?q?drawer=E7=BB=84=E4=BB=B6=E9=80=82=E9=85=8D?= =?UTF-8?q?=E6=9C=80=E6=96=B0=E7=89=88core?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/drawer/index.js | 4 ++-- src/layer/index.js | 57 ++++++++++++++++++++++++++++++++++++++------- 2 files changed, 50 insertions(+), 11 deletions(-) diff --git a/src/drawer/index.js b/src/drawer/index.js index 45f5b5c..e75a6b6 100644 --- a/src/drawer/index.js +++ b/src/drawer/index.js @@ -42,8 +42,8 @@ class Drawer extends Component { type: Boolean, default: false, observer(v) { - this.$anim.start(!v) - this.$refs.drawer.$anim.start(!v) + this.$animate(!v) + this.$refs.drawer.$animate(!v) } }, width: '', diff --git a/src/layer/index.js b/src/layer/index.js index a0e42eb..c4014f7 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -251,6 +251,9 @@ class Layer extends Component { ` ] + #wrapped = null + #dragIns = null + mounted() { this.$refs.box.$anim.start() } @@ -259,13 +262,54 @@ class Layer extends Component { this.$refs.box.$anim.start() } - close() { + /** + * 关闭实例 + * @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) { // - let idx = +ev.target.dataset.idx + if (ev.target.tagName === 'BUTTON') { + let idx = +ev.target.dataset.idx + + this.$refs.box.$anim.start(true) + + this.close() + } } render() { @@ -282,13 +326,8 @@ class Layer extends Component {
-
- ${this.btns.map( - (s, i) => - html`` - )} +
+ ${this.btns.map((s, i) => html``)}
` From cccedf032185191c26b3b04a20789e55bdd30d4b Mon Sep 17 00:00:00 2001 From: yutent Date: Tue, 4 Apr 2023 15:52:12 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dmarkd=E8=A7=A3=E6=9E=90?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=B8=AD=E6=9C=89=5F=E5=92=8C*=E6=97=B6?= =?UTF-8?q?=E4=B8=8D=E6=AD=A3=E5=B8=B8=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layer/index.js | 11 ++++------- src/markd/index.js | 5 ++++- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/layer/index.js b/src/layer/index.js index c4014f7..6afb69a 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -111,7 +111,6 @@ class Layer extends Component { ::slotted(&__input) { flex: 1; - height: 36px; } ::slotted(&__toast) { @@ -255,11 +254,11 @@ class Layer extends Component { #dragIns = null mounted() { - this.$refs.box.$anim.start() + this.$refs.box.$animate() } updated() { - this.$refs.box.$anim.start() + this.$refs.box.$animate() } /** @@ -306,15 +305,13 @@ class Layer extends Component { if (ev.target.tagName === 'BUTTON') { let idx = +ev.target.dataset.idx - this.$refs.box.$anim.start(true) - - this.close() + this.$refs.box.$animate(true).then(_ => this.close()) } } render() { return html` -
+
$1') + .replace(INLINE.code, (m, str) => { + str = str.replace(/([_*~])/g, '\\$1') + return `${str}` + }) .replace(INLINE.strong[0], '$1') .replace(INLINE.strong[1], '$1') .replace(INLINE.em[0], '$1') From f033131798869e632fb810b9a1b727654fb0d9b7 Mon Sep 17 00:00:00 2001 From: yutent Date: Tue, 4 Apr 2023 18:33:03 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E6=9B=B4=E6=96=B0layer=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layer/index.js | 68 ++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 65 insertions(+), 3 deletions(-) diff --git a/src/layer/index.js b/src/layer/index.js index 6afb69a..9e41a82 100644 --- a/src/layer/index.js +++ b/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' @@ -253,7 +261,41 @@ 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() { + if (this.type === 'prompt') { + this.$refs.input = this.firstElementChild + bind(this.$refs.input, 'submit', ev => { + this.#intercept(ev.target.value) + }) + } + this.$refs.box.$animate() } @@ -300,12 +342,32 @@ class Layer extends Component { } } + // 按钮的点击事件 handleBtnClick(ev) { - // if (ev.target.tagName === 'BUTTON') { let idx = +ev.target.dataset.idx - this.$refs.box.$animate(true).then(_ => this.close()) + switch (this.type) { + case 'alert': + this.$refs.box.$animate(true).then(_ => this.close()) + 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 + } } } From f0e83b3ec0a5c394f1d548ff6233279f579504c3 Mon Sep 17 00:00:00 2001 From: yutent Date: Thu, 6 Apr 2023 11:18:28 +0800 Subject: [PATCH 5/5] =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E9=BB=98=E8=AE=A4=E6=9C=80=E5=B0=8F=E5=AE=BD=E5=BA=A6?= =?UTF-8?q?=E4=B8=BA100%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layer/index.js | 2 +- src/scroll/index.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/layer/index.js b/src/layer/index.js index 9e41a82..665bd2e 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -349,7 +349,7 @@ class Layer extends Component { switch (this.type) { case 'alert': - this.$refs.box.$animate(true).then(_ => this.close()) + this.#intercept(null) break case 'confirm': diff --git a/src/scroll/index.js b/src/scroll/index.js index 8b486c1..5956b9f 100644 --- a/src/scroll/index.js +++ b/src/scroll/index.js @@ -40,6 +40,7 @@ class Scroll extends Component { } } .content { + min-width: 100%; width: fit-content; height: fit-content; }