From 95727082ab0bd3052adbec391fe74956a0b70856 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Tue, 28 Feb 2023 19:27:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0layout=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/column.wc | 55 ++++++++++++++++++++++++++
 src/layout/index.wc  | 75 +++++++++++++++++++++++++++++++++++
 src/space/index.wc   | 94 +++++++++++++++++++-------------------------
 3 files changed, 170 insertions(+), 54 deletions(-)
 create mode 100644 src/layout/column.wc
 create mode 100644 src/layout/index.wc

diff --git a/src/layout/column.wc b/src/layout/column.wc
new file mode 100644
index 0000000..c6b89c7
--- /dev/null
+++ b/src/layout/column.wc
@@ -0,0 +1,55 @@
+<template>
+  <div class="col"><slot /></div>
+</template>
+
+<script>
+export default class Col {
+  props = {
+    gap: ''
+  }
+
+  __init__() {
+    /* render */
+  }
+
+  mounted() {}
+
+  unmounted() {}
+
+  watch() {}
+}
+</script>
+
+<style lang="scss">
+:host {
+  // display: flex;
+  max-width: 100%;
+}
+.col {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+@for $i from 1 through 24 {
+  :host([span='#{$i}']) {
+    max-width: math.percentage(math.div($i, 24));
+    flex: 0 0 math.percentage(math.div($i, 24));
+  }
+}
+
+$gaps: (
+  's': 4px,
+  'm': 8px,
+  'l': 12px,
+  'xl': 16px,
+  'xxl': 20px,
+  'xxxl': 24px,
+  'xxxxl': 28px
+);
+@each $k, $v in $gaps {
+  :host([gap='#{$k}']) .col {
+    padding: 0 math.div($v, 2);
+  }
+}
+</style>
diff --git a/src/layout/index.wc b/src/layout/index.wc
new file mode 100644
index 0000000..5686a3d
--- /dev/null
+++ b/src/layout/index.wc
@@ -0,0 +1,75 @@
+<template>
+  <div class="row"><slot /></div>
+</template>
+
+<script>
+import './column'
+
+export default class Row {
+  props = {
+    gap: null
+  }
+
+  __init__() {
+    /* render */
+  }
+
+  _updateChildrenStat() {
+    Array.from(this.children).forEach(it => {
+      if (it.tagName === 'WC-COL') {
+        it.setAttribute('gap', this.props.gap)
+      } else {
+        it.remove()
+      }
+    })
+  }
+
+  mounted() {
+    this.__observer = new MutationObserver(_ => {
+      this._updateChildrenStat()
+    })
+
+    this.__observer.observe(this, {
+      childList: true,
+      subtree: true
+    })
+  }
+
+  unmounted() {
+    this.__observer.disconnect()
+  }
+
+  watch() {
+    switch (name) {
+      case 'gap':
+        this.props.gap = val || ''
+        this._updateChildrenStat()
+        break
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+:host {
+  display: block;
+}
+.row {
+  display: flex;
+  flex-wrap: wrap;
+}
+$gaps: (
+  's': 4px,
+  'm': 8px,
+  'l': 12px,
+  'xl': 16px,
+  'xxl': 20px,
+  'xxxl': 24px,
+  'xxxxl': 28px
+);
+@each $k, $v in $gaps {
+  :host([gap='#{$k}']) .row {
+    margin: 0 math.div(-$v, 2);
+  }
+}
+</style>
diff --git a/src/space/index.wc b/src/space/index.wc
index 490aa36..dd98db8 100644
--- a/src/space/index.wc
+++ b/src/space/index.wc
@@ -2,60 +2,6 @@
   <div class="container"><slot /></div>
 </template>
 
-<style lang="scss">
-:host {
-  display: block;
-}
-.container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  width: 100%;
-  gap: 12px;
-}
-:host([vertical]) {
-  .container {
-    flex-direction: column;
-  }
-}
-
-:host([gap='s']) {
-  .container {
-    gap: 4px;
-  }
-}
-:host([gap='m']) {
-  .container {
-    gap: 8px;
-  }
-}
-:host([gap='l']) {
-  .container {
-    gap: 12px;
-  }
-}
-:host([gap='xl']) {
-  .container {
-    gap: 16px;
-  }
-}
-:host([gap='xxl']) {
-  .container {
-    gap: 20px;
-  }
-}
-:host([gap='xxxl']) {
-  .container {
-    gap: 24px;
-  }
-}
-:host([gap='xxxxl']) {
-  .container {
-    gap: 28px;
-  }
-}
-</style>
-
 <script>
 export default class Space {
   props = {
@@ -77,3 +23,43 @@ export default class Space {
   watch() {}
 }
 </script>
+
+<style lang="scss">
+:host {
+  display: block;
+}
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  gap: 12px;
+}
+:host([vertical]) {
+  .container {
+    flex-direction: column;
+  }
+}
+:host([justify]) {
+  .container {
+    justify-content: space-between;
+  }
+}
+
+$gaps: (
+  's': 4px,
+  'm': 8px,
+  'l': 12px,
+  'xl': 16px,
+  'xxl': 20px,
+  'xxxl': 24px,
+  'xxxxl': 28px
+);
+@each $k, $v in $gaps {
+  :host([gap='#{$k}']) {
+    .container {
+      gap: $v;
+    }
+  }
+}
+</style>