From bd3b24f2deff3071046e0aa79a50c2436a373c18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Preu=C3=9F?= <rene@preuss.io>
Date: Sun, 19 Feb 2023 21:46:28 +0100
Subject: [PATCH] Add new components

---
 src/runtime/components/BitinflowInput.vue     | 14 ++++++
 src/runtime/components/BitinflowSelectBox.vue | 44 +++++++++++++++++++
 .../components/BitinflowSelectBoxGroup.vue    | 11 +++++
 3 files changed, 69 insertions(+)
 create mode 100644 src/runtime/components/BitinflowSelectBox.vue
 create mode 100644 src/runtime/components/BitinflowSelectBoxGroup.vue

diff --git a/src/runtime/components/BitinflowInput.vue b/src/runtime/components/BitinflowInput.vue
index 68d7f0d..bec2505 100644
--- a/src/runtime/components/BitinflowInput.vue
+++ b/src/runtime/components/BitinflowInput.vue
@@ -5,6 +5,7 @@
     </div>
     <input
       class="block w-full text-black dark:text-white border-2 border-zinc-200 dark:border-base-500 dark:border-base-500 focus:outline-none dark:bg-base-700 dark:text-white rounded-lg px-4 py-2"
+      :class="calculatedClass"
       :type="type"
       :value="modelValue"
       :placeholder="placeholder"
@@ -33,11 +34,24 @@ export default {
     type: {
       type: String,
       default: 'text'
+    },
+    size: {
+      type: String,
+      default: 'normal'
     }
   },
 
   emits: ['update:modelValue'],
 
+  computed: {
+    calculatedClass() {
+      if (this.size !== 'normal') {
+        return `text-${this.size}`;
+      }
+      return '';
+    }
+  },
+
   methods: {
     change(e) {
       this.$emit('update:modelValue', e.target.value);
diff --git a/src/runtime/components/BitinflowSelectBox.vue b/src/runtime/components/BitinflowSelectBox.vue
new file mode 100644
index 0000000..3108e5b
--- /dev/null
+++ b/src/runtime/components/BitinflowSelectBox.vue
@@ -0,0 +1,44 @@
+<template>
+  <div
+    class="bg-white dark:bg-base-700 border-2 rounded p-4 relative"
+    :class="[selected ? 'border-primary-500' : 'dark:border-base-600']"
+  >
+    <div class="absolute top-[-.6rem] left-[-.6rem] flex bg-primary-500 rounded">
+      <div
+        v-if="selected"
+        class="w-4 h-4 flex justify-center"
+      >
+        <i class="fas fa-check text-white text-xs text-primary-500 self-center" />
+      </div>
+    </div>
+    <a
+      class="after:absolute after:inset-0"
+      href="#"
+      @click.prevent="click"
+    />
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BitinflowSelectBox",
+
+  props: {
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  emits: ['update:selected'],
+
+  methods: {
+    click() {
+      this.$emit('update:selected', !this.selected);
+    }
+  }
+}
+</script>
diff --git a/src/runtime/components/BitinflowSelectBoxGroup.vue b/src/runtime/components/BitinflowSelectBoxGroup.vue
new file mode 100644
index 0000000..77a0fd1
--- /dev/null
+++ b/src/runtime/components/BitinflowSelectBoxGroup.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="grid grid-cols-5 gap-4 text-center">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BitinflowSelectBox"
+}
+</script>