From c683dd5981c131a01fdef229c07607b8545a14be Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Tue, 28 Mar 2023 23:46:55 +0200
Subject: [PATCH] Implement Input Components

---
 client/src/components/inputs/CheckBox.vue     | 21 +++++++++++++++++++
 .../components/inputs/MultilineTextBox.vue    | 18 ++++++++++++++++
 client/src/components/inputs/TextBox.vue      | 15 +++++++++++++
 client/src/global-styles/atomic.css           |  3 ++-
 client/src/global-styles/mlfe.css             |  1 +
 5 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/inputs/CheckBox.vue
 create mode 100644 client/src/components/inputs/MultilineTextBox.vue
 create mode 100644 client/src/components/inputs/TextBox.vue

diff --git a/client/src/components/inputs/CheckBox.vue b/client/src/components/inputs/CheckBox.vue
new file mode 100644
index 0000000..e756b61
--- /dev/null
+++ b/client/src/components/inputs/CheckBox.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+const props = defineModel<{
+  modelValue: boolean,
+}>();
+let { modelValue } = $(props);
+
+</script>
+
+<template>
+  <div @click="() => modelValue = !modelValue">
+    <i-material-symbols-check-box-outline v-if="modelValue"/>
+    <i-material-symbols-check-box-outline-blank v-else/>
+  </div>
+</template>
+
+<style scoped>
+div {
+  cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/client/src/components/inputs/MultilineTextBox.vue b/client/src/components/inputs/MultilineTextBox.vue
new file mode 100644
index 0000000..7fba52a
--- /dev/null
+++ b/client/src/components/inputs/MultilineTextBox.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+const props = defineModel<{
+  modelValue: string,
+}>();
+let { modelValue } = $(props);
+
+</script>
+
+<template>
+  <textarea v-model="modelValue" rows="5"/>
+</template>
+
+<style scoped>
+textarea {
+  resize: vertical;
+}
+</style>
\ No newline at end of file
diff --git a/client/src/components/inputs/TextBox.vue b/client/src/components/inputs/TextBox.vue
new file mode 100644
index 0000000..6cf2973
--- /dev/null
+++ b/client/src/components/inputs/TextBox.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+const props = defineModel<{
+  modelValue: string,
+}>();
+let { modelValue } = $(props);
+
+</script>
+
+<template>
+  <input v-model="modelValue">
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/client/src/global-styles/atomic.css b/client/src/global-styles/atomic.css
index 555c454..e14120f 100644
--- a/client/src/global-styles/atomic.css
+++ b/client/src/global-styles/atomic.css
@@ -3,4 +3,5 @@
 .pad { padding: 0.5rem; }
 .gap { gap: 0.5rem; }
 .flex-grow { flex-grow: 1; }
-.flex-row { flex-direction: row; }
\ No newline at end of file
+.flex-row { flex-direction: row; }
+.scroll { overflow-y:auto; }
\ No newline at end of file
diff --git a/client/src/global-styles/mlfe.css b/client/src/global-styles/mlfe.css
index 079a263..cefc80c 100644
--- a/client/src/global-styles/mlfe.css
+++ b/client/src/global-styles/mlfe.css
@@ -12,6 +12,7 @@
   user-select: inherit;
   color: inherit;
   overflow: hidden;
+  flex-shrink: 0;
 }
 
 div, ul, ol, nav {