Implement Input Components

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>

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>

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>

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; }
+.flex-row { flex-direction: row; }
+.scroll { overflow-y:auto; }

client/src/global-styles/mlfe.css

@@ -12,6 +12,7 @@
   user-select: inherit;
   color: inherit;
   overflow: hidden;
+  flex-shrink: 0;
 }
 
 div, ul, ol, nav {