From ba112e19201f2caabdd17d1bbd94fdd6ed4d09a9 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Tue, 28 Feb 2023 16:24:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=97=B4=E8=B7=9D=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/space/index.wc | 78 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 src/space/index.wc

diff --git a/src/space/index.wc b/src/space/index.wc
new file mode 100644
index 0000000..396a6ac
--- /dev/null
+++ b/src/space/index.wc
@@ -0,0 +1,78 @@
+<template>
+  <div class="container"><slot /></div>
+</template>
+
+<style lang="scss">
+:host {
+  display: block;
+}
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+}
+: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 = {
+    gap: 'l'
+  }
+
+  state = {
+    content: ''
+  }
+
+  __init__() {
+    /* render */
+  }
+
+  mounted() {}
+
+  unmounted() {}
+
+  watch() {}
+}
+</script>