From 3d33539a4a61b1d311aa82a1d03682e7cfe9544b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent@doui.cc>
Date: Wed, 6 May 2020 21:10:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BC=96=E8=AF=91=E8=84=9A?=
 =?UTF-8?q?=E6=9C=AC;=E5=A2=9E=E5=8A=A0=E8=A1=A8=E6=A0=BC=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build.dev.js       |  8 +++-
 build.prod.js      |  8 +++-
 src/table/index.wc | 98 ++++++++++++++++++++++++++++++++++++++++++++++
 src/table/item.wc  | 21 ++++++++++
 4 files changed, 131 insertions(+), 4 deletions(-)
 create mode 100644 src/table/index.wc
 create mode 100644 src/table/item.wc

diff --git a/build.dev.js b/build.dev.js
index 54b7a6f..b388c32 100644
--- a/build.dev.js
+++ b/build.dev.js
@@ -45,6 +45,10 @@ $cd: #62778d #526273 #425064;
 ::after{box-sizing:border-box;}
 `
 
+function parseName(str) {
+  return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).replace(/^\-/, '')
+}
+
 function fixImport(str) {
   return str
     .replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
@@ -140,8 +144,8 @@ const log = console.log
 
 ${js}
 
-if(!customElements.get('wc-${name.toLowerCase()}')){
-  customElements.define('wc-${name.toLowerCase()}', ${name})
+if(!customElements.get('wc-${parseName(name)}')){
+  customElements.define('wc-${parseName(name)}', ${name})
 }
 `
 }
diff --git a/build.prod.js b/build.prod.js
index a59ad27..4bdfaa8 100644
--- a/build.prod.js
+++ b/build.prod.js
@@ -45,6 +45,10 @@ $cd: #62778d #526273 #425064;
 ::after{box-sizing:border-box;}
 `
 
+function parseName(str) {
+  return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).replace(/^\-/, '')
+}
+
 function fixImport(str) {
   return str
     .replace(/import '([\w-/_.]*)'/g, 'import "$1.js"')
@@ -149,8 +153,8 @@ function mkWCFile({ style, html, js }) {
 
 ${res.code}
 
-if(!customElements.get('wc-${name.toLowerCase()}')){
-  customElements.define('wc-${name.toLowerCase()}', ${name})
+if(!customElements.get('wc-${parseName(name)}')){
+  customElements.define('wc-${parseName(name)}', ${name})
 }
 `
 }
diff --git a/src/table/index.wc b/src/table/index.wc
new file mode 100644
index 0000000..3ce7af9
--- /dev/null
+++ b/src/table/index.wc
@@ -0,0 +1,98 @@
+<template>
+  <div class="table"></div>
+</template>
+
+<style lang="scss">
+.table {
+  display: flex;
+
+  li {
+    display: flex;
+  }
+  section {
+    margin: 0 2px;
+  }
+}
+ul,
+li {
+  list-style: none;
+}
+</style>
+
+<script>
+// import './item'
+
+export default class Table {
+  props = {
+    list: null
+  }
+
+  __init__() {
+    /* render */
+    this.__OUTER__ = this.root.children[1]
+  }
+
+  __updateTable__() {
+    if (this._clear) {
+      delete this._clear
+      return
+    }
+    log('-----------')
+    var { list } = this.props
+    var items = Array.from(this.children)
+      .filter(it => it.tagName === 'WC-TABLE-ITEM')
+      .map(it => {
+        return {
+          label: it.getAttribute('label'),
+          prop: it.getAttribute('prop')
+        }
+      })
+    this._clear = true
+    this.innerText = ''
+    if (list) {
+      this.__OUTER__.innerHTML =
+        '<ul>' +
+        list
+          .map((it, i) => {
+            return (
+              '<li>' +
+              items
+                .map(_ => {
+                  return `<section>${it[_.prop]}</section>`
+                })
+                .join('') +
+              '</li>'
+            )
+          })
+          .join('') +
+        '</ul>'
+    }
+  }
+
+  mounted() {
+    this.__observer = new MutationObserver(_ => this.__updateTable__())
+    this.__observer.observe(this, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    })
+  }
+
+  watch() {
+    switch (name) {
+      case 'list':
+        if (val) {
+          log('===========')
+          try {
+            this.props.list = JSON.parse(val)
+          } catch (err) {}
+          this.removeAttribute('options')
+        }
+        break
+
+      default:
+        break
+    }
+  }
+}
+</script>
diff --git a/src/table/item.wc b/src/table/item.wc
new file mode 100644
index 0000000..3edc94d
--- /dev/null
+++ b/src/table/item.wc
@@ -0,0 +1,21 @@
+<template>
+  <div><slot /></div>
+</template>
+
+<style lang="scss">
+div {
+  color: #f30;
+}
+</style>
+
+<script>
+export default class TableItem {
+  props = {
+    foo: ''
+  }
+
+  __init__() {
+    /* render */
+  }
+}
+</script>