Add new components

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);

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>

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>