Merge branch 'master' of ssh://github.com/bd-js/wcui
commit
624f275cee
|
|
@ -241,7 +241,6 @@ class Color extends Component {
|
|||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
|
|
@ -256,7 +255,6 @@ class Color extends Component {
|
|||
|
||||
.thumb {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
|
|
@ -293,7 +291,6 @@ class Color extends Component {
|
|||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
width: 12px;
|
||||
height: 0;
|
||||
|
||||
|
|
@ -310,7 +307,6 @@ class Color extends Component {
|
|||
}
|
||||
.hue {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 180px;
|
||||
|
|
@ -330,7 +326,6 @@ class Color extends Component {
|
|||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
background: linear-gradient(to right, transparent, #f00);
|
||||
|
|
@ -340,7 +335,6 @@ class Color extends Component {
|
|||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
width: 0;
|
||||
height: 12px;
|
||||
|
||||
|
|
@ -358,7 +352,6 @@ class Color extends Component {
|
|||
|
||||
.alpha {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
`
|
||||
]
|
||||
|
|
|
|||
|
|
@ -75,7 +75,6 @@ class TextArea extends Component {
|
|||
position: absolute;
|
||||
right: 4px;
|
||||
bottom: 2px;
|
||||
z-index: 1;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
color: var(--color-grey-2);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue