From a9756f07461b3639c2f2ada285ad03c6237386e2 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Mon, 27 Mar 2023 19:34:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Readme.md           |   4 +-
 src/card/index.js   |   4 +-
 src/color/index.js  |   2 +-
 src/drawer/index.js | 199 ++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 205 insertions(+), 4 deletions(-)
 create mode 100644 src/drawer/index.js

diff --git a/Readme.md b/Readme.md
index 7232c27..1e3bd61 100644
--- a/Readme.md
+++ b/Readme.md
@@ -19,6 +19,8 @@
 - [x] `wc-space`间隔组件
 - [ ] `wc-avatar`头像组件
 - [x] `wc-badge`徽标组件
+- [ ] `wc-drawer`抽屉组件
+- [ ] `wc-collapse`折叠组件
 - [ ] `wc-counter`倒计时组件
 - [ ] `wc-drag`拖拽组件
 - [x] `wc-button`表单组件-按钮
@@ -39,7 +41,7 @@
 - [ ] `wc-meditor`md 文本编辑器
 - [ ] `wc-neditor`富文本编辑器
 - [ ] `wc-pager`分页组件
-- [ ] `wc-colorpicker`颜色选择器
+- [x] `wc-color`颜色选择器
 - [ ] `wc-datepicker`日期选择器
 - [ ] `wc-timepicker`时间选择器
 - [x] `wc-code`代码高亮插件
diff --git a/src/card/index.js b/src/card/index.js
index 4da0872..67afc03 100644
--- a/src/card/index.js
+++ b/src/card/index.js
@@ -61,8 +61,8 @@ class Card extends Component {
   render() {
     return html`
       <div class="card-box">
-        <div class="header">${this.header || html`<slot name="header" />`}</div>
-        <div class="content"><slot /></div>
+        <div class="header"><slot>${this.header}</slot></div>
+        <div class="content"><slot></slot></div>
       </div>
     `
   }
diff --git a/src/color/index.js b/src/color/index.js
index 8cb7071..152b564 100644
--- a/src/color/index.js
+++ b/src/color/index.js
@@ -1,5 +1,5 @@
 /**
- * {滚动条组件}
+ * {color组件}
  * @author chensbox <chensbox@foxmail.com>
  * @date 2023/03/20 15:17:25
  */
diff --git a/src/drawer/index.js b/src/drawer/index.js
new file mode 100644
index 0000000..fe90fd8
--- /dev/null
+++ b/src/drawer/index.js
@@ -0,0 +1,199 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/03/27 10:39:29
+ */
+
+import {
+  css,
+  html,
+  bind,
+  unbind,
+  Component,
+  outsideClick,
+  clearOutsideClick,
+  nextTick,
+  classMap,
+  styleMap
+} from '@bd/core'
+
+const DIRECTION = {
+  left: 'l2r-in',
+  right: 'r2l-in',
+  top: 't2b-in',
+  bottom: 'b2t-in'
+}
+
+class Drawer extends Component {
+  static props = {
+    title: { type: String, default: '', attribute: false },
+    from: 'right',
+    visible: false
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: none;
+        position: fixed;
+        left: 0;
+        top: 0;
+        z-index: 99;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.3);
+        transition: opacity 0.3s linear;
+        opacity: 0;
+      }
+      .drawer {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        width: 50%;
+        height: 100%;
+        font-size: 14px;
+        background: #fff;
+        box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
+
+        &.l2r-in {
+          animation: l2r-in 0.3s ease-in-out forwards;
+        }
+        &.r2l-in {
+          animation: r2l-in 0.3s ease-in-out forwards;
+        }
+        &.t2b-in {
+          animation: t2b-in 0.3s ease-in-out forwards;
+        }
+        &.b2t-in {
+          animation: b2t-in 0.3s ease-in-out forwards;
+        }
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px;
+        font-size: 16px;
+        color: var(--color-dark-2);
+        user-select: none;
+
+        wc-icon {
+          --size: 16px;
+          margin-right: 8px;
+          color: var(--color-grey-3);
+          cursor: pointer;
+        }
+      }
+
+      .wrapper {
+        flex: 1;
+        padding: 16px;
+      }
+
+      :host([visible]) {
+        display: block;
+        opacity: 1;
+      }
+    `,
+    css`
+      :host([from='left']),
+      :host([from='right']) {
+        .drawer {
+          width: 50%;
+          height: 100%;
+        }
+      }
+      :host([from='top']),
+      :host([from='bottom']) {
+        .drawer {
+          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;
+        top: 0;
+        transform: translateX(100%);
+      }
+      :host([from='bottom']) .drawer {
+        left: 0;
+        bottom: 0;
+        transform: translateY(100%);
+      }
+    `,
+    css`
+      @keyframes r2l-in {
+        from {
+          transform: translateX(100%);
+        }
+        to {
+          transform: translateX(0);
+        }
+      }
+      @keyframes l2r-in {
+        from {
+          transform: translateX(-100%);
+        }
+        to {
+          transform: translateX(0);
+        }
+      }
+      @keyframes b2t-in {
+        from {
+          transform: translateY(100%);
+        }
+        to {
+          transform: translateY(0);
+        }
+      }
+      @keyframes t2b-in {
+        from {
+          transform: translateY(-100%);
+        }
+        to {
+          transform: translateY(0);
+        }
+      }
+    `
+  ]
+
+  closeDrawer() {
+    this.$emit('close')
+  }
+
+  mounted() {
+    console.log('mounted title: ', this.title)
+  }
+
+  render() {
+    let classes = classMap({
+      drawer: true,
+      [DIRECTION[this.from]]: this.visible
+    })
+
+    return html`
+      <div class=${classes}>
+        <header class="header">
+          <span class="title"><slot name="title">${this.title}</slot></span>
+          <wc-icon name="close" @click=${this.closeDrawer}></wc-icon>
+        </header>
+        <main class="wrapper">
+          <slot></slot>
+        </main>
+      </div>
+    `
+  }
+}
+
+Drawer.reg('drawer')