From f247c2c0e22ee17ab87393f4b817894ce842f042 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Fri, 21 Jan 2022 15:29:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8D=A1=E7=89=87=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/base/card.wc | 91 ++++++++++++++++++++++++++++++++++++++++++++++++
 src/base/col.wc  |  3 +-
 src/index.js     |  2 +-
 3 files changed, 93 insertions(+), 3 deletions(-)
 create mode 100644 src/base/card.wc

diff --git a/src/base/card.wc b/src/base/card.wc
new file mode 100644
index 0000000..971acb6
--- /dev/null
+++ b/src/base/card.wc
@@ -0,0 +1,91 @@
+<template>
+  <div class="card">
+    <header class="header"><slot name="header" /></header>
+    <main class="body"><slot /></main>
+  </div>
+</template>
+
+<style lang="scss">
+:host {
+  display: flex;
+  width: 100%;
+  border-radius: 3px;
+}
+
+.header {
+  display: none;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--color-plain-2);
+  font-size: 16px;
+
+  &.show {
+    display: block;
+  }
+}
+.card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid var(--color-plain-2);
+  border-radius: inherit;
+  font-size: 14px;
+  background: #fff;
+  box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.3s ease-in-out;
+}
+
+:host([shadow='hover']) {
+  .card {
+    box-shadow: none;
+
+    &:hover {
+      box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+
+:host([shadow='never']) {
+  .card {
+    box-shadow: none;
+  }
+}
+
+.body {
+  padding: 16px;
+}
+</style>
+
+<script>
+export default class Card {
+  props = {
+    shadow: 'always',
+    padding: 16
+  }
+
+  __init__() {
+    /* render */
+
+    var elem = this.root.children[1]
+    this.__HEADER__ = elem.children[0]
+    this.__BODY__ = elem.children[1]
+  }
+
+  mounted() {
+    var elems = this.__HEADER__.firstChild.assignedNodes()
+
+    if (elems.length) {
+      this.__HEADER__.classList.toggle('show', true)
+    }
+  }
+
+  watch() {
+    switch (name) {
+      case 'padding':
+        val = +val
+        this.props.padding = val > 0 ? val : 0
+        this.__BODY__.style.padding = `${this.props.padding}px`
+        break
+    }
+  }
+}
+</script>
diff --git a/src/base/col.wc b/src/base/col.wc
index c25fea1..b3e8e9d 100644
--- a/src/base/col.wc
+++ b/src/base/col.wc
@@ -23,8 +23,7 @@
 export default class Col {
   props = {
     span: 24,
-    offset: 0,
-    push: 0
+    offset: 0
   }
 
   __init__() {
diff --git a/src/index.js b/src/index.js
index 97738ca..dfded9f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,7 @@
 import './avatar/index'
 import './badge/index'
 import './base/row'
-// import './badge/index'
+import './base/card'
 import './code/index'
 import './color/index'
 import './drag/index'