10 lines
2.0 KiB
JavaScript
10 lines
2.0 KiB
JavaScript
|
import{css as r,html as e,Component as a}from"wkit";import"../base/icon.js";const o={left:{custom:[{transform:" translateX(-100%)"},{transform:" translateX(0)"}]},right:{custom:[{transform:" translateX(100%)"},{transform:" translateX(0)"}]},top:{custom:[{transform:" translateY(-100%)"},{transform:" translateY(0)"}]},bottom:{custom:[{transform:" translateY(100%)"},{transform:" translateY(0)"}]}};class s extends a{static animation={};static props={title:"str!",from:"right",value:{type:Boolean,default:!1,observer(t){this.$animate(!t),this.$refs.drawer.$animate(!t)}},maskClose:!1};static styles=[r`:host{position:fixed;left:0;top:0;z-index:9;width:100%;height:100%;background:rgba(0,0,0,.3)}.drawer{display:flex;flex-direction:column;position:absolute;width:var(--wc-drawer-width, 50%);height:100%;font-size:14px;background:#fff;box-shadow:0 0 24px rgba(0,0,0,.2)}.header{display:flex;align-items:center;justify-content:space-between;padding:16px;font-size:16px;color:var(--color-dark-2);user-select:none}.header wc-icon{--wc-icon-size: 16px;margin-right:8px;color:var(--color-grey-3);cursor:pointer}.wrapper{flex:1;padding:16px}`,r`:host([from=left]) .drawer,:host([from=right]) .drawer{top:0;width:var(--wc-drawer-width, 50%);height:100%}:host([from=top]) .drawer,:host([from=bottom]) .drawer{left:0;width:100%;height:var(--wc-drawer-width, 50%)}:host([from=left]) .drawer{left:0}:host([from=right]) .drawer{right:0}:host([from=top]) .drawer{top:0}:host([from=bottom]) .drawer{bottom:0}`];#t(){this.value=!1,this.$emit("input",{value:!1}),this.$emit("close",{value:!1})}mounted(){this.$on("click",t=>{t.composedPath()[0]===t.currentTarget&&this.maskClose&&this.#t()})}render(){return e`
|
||
|
|
<div class="drawer" ref="drawer" #animation=${o[this.from]}>
|
||
|
|
<header class="header">
|
||
|
|
<span class="title"><slot name="title">${this.title}</slot></span>
|
||
|
|
<wc-icon name="close" @click=${this.#t}></wc-icon>
|
||
|
|
</header>
|
||
|
|
<main class="wrapper"><slot></slot></main>
|
||
|
|
</div>
|
||
|
|
`}}s.reg("drawer");
|