merge branch 'main' of github.com:bitinflow/ui

src/runtime/components/BitinflowButton.vue

@@ -4,7 +4,10 @@
     :class="computedClass"
     @click="click"
   >
-    <slot />
+    <slot v-if="!loading" />
+    <template v-else>
+      <i class="fas fa-spinner fa-spin" />
+    </template>
   </button>
 </template>
 
@@ -17,6 +20,10 @@ export default {
       type: String,
       default: 'md'
     },
+    loading: {
+      type: Boolean,
+      default: false
+    },
     color: {
       type: String,
       default: 'base'
@@ -35,59 +42,87 @@ export default {
 
   computed: {
     computedClass: function () {
-      return `button-text-${this.size} ${this.color}-${this.variant}`
+      return `button-text-${this.size} ${this.color}-${this.variant} ${this.disabled ? 'disabled' : ''} ${this.loading ? 'loading' : ''}`
+    },
   },
 
   methods: {
     click() {
+      if (this.disabled || this.loading) return;
       this.$emit('click');
     }
   }
-  }
 }
 </script>
 
 <style scoped>
+.disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+.loading {
+  @apply opacity-50 cursor-not-allowed;
+}
 .button-text-sm {
   @apply text-sm;
 }
+
 .button-text-lg {
   @apply text-lg;
 }
+
 .button-text-xl {
   @apply text-xl;
 }
+
 .button-text-2xl {
   @apply text-2xl;
 }
+
 .button-text-3xl {
   @apply text-3xl;
 }
+
 .button-text-4xl {
   @apply text-4xl;
 }
+
 .button-text-5xl {
   @apply text-5xl;
 }
+
 .button-text-6xl {
   @apply text-6xl;
 }
+
 .primary-solid {
-  @apply bg-primary-500 hover:bg-primary-400 dark:bg-primary-700 dark:hover:bg-primary-600 text-black dark:text-white;
+  @apply bg-primary-600 hover:bg-primary-400 dark:bg-primary-500 dark:hover:bg-primary-400 text-black dark:text-white;
 }
+
 .base-solid {
-  @apply hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 text-black dark:text-white;
+  @apply bg-white hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 text-black dark:text-white;
 }
+
 .danger-solid {
-  @apply bg-rose-600 hover:bg-rose-400 dark:bg-rose-700 dark:hover:bg-rose-600 text-black dark:text-white;
+  @apply bg-rose-600 hover:bg-rose-400 dark:bg-rose-500 dark:hover:bg-rose-400 text-black dark:text-white;
 }
+
+.warning-solid {
+  @apply bg-amber-600 hover:bg-amber-400 dark:bg-amber-500 dark:hover:bg-amber-400 text-black dark:text-white;
+}
+
 .primary-outline {
-  @apply border-primary-500 hover:bg-primary-500 dark:hover:bg-primary-600 dark:border-primary-700 dark:hover:border-primary-600 text-black dark:text-white;
+  @apply border-primary-500 hover:bg-primary-500 dark:hover:bg-primary-500 dark:border-primary-500 dark:hover:border-primary-500 text-primary-500 hover:text-white;
 }
+
+.warning-outline {
+  @apply border-amber-500 hover:bg-amber-500 dark:hover:bg-amber-500 dark:border-amber-500 dark:hover:border-amber-500 text-amber-500 hover:text-white;
+}
+
 .base-outline {
-  @apply border-zinc-100 hover:bg-zinc-100 dark:hover:bg-base-600 dark:border-base-500 dark:hover:border-base-600 text-black dark:text-white;
+  @apply border-zinc-200 hover:bg-zinc-200 dark:hover:bg-base-700 dark:border-base-500 dark:hover:border-base-500 text-black dark:text-white;
 }
+
 .danger-outline {
-  @apply border-rose-500 hover:bg-rose-500 dark:hover:bg-rose-600 dark:border-rose-700 dark:hover:border-rose-600 text-black dark:text-white;
+  @apply border-rose-500 hover:bg-rose-500 dark:hover:bg-rose-500 dark:border-rose-500 dark:hover:border-rose-500 text-rose-500 hover:text-white;
 }
 </style>

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/BitinflowScreenScrollContainer.vue

@@ -1,11 +1,36 @@
 <template>
-  <div class="overflow-y-auto h-screen">
+  <div
+    class="overflow-y-auto h-screen"
+    :class="`${variant}`"
+  >
     <slot />
   </div>
 </template>
 
 <script>
 export default {
-  name: "BitinflowScreenScrollContainer"
+  name: "BitinflowScreenScrollContainer",
+
+  props: {
+    variant: {
+      type: String,
+      default: 'light'
+    }
+  }
 }
 </script>
+
+<style>
+.light::-webkit-scrollbar-thumb {
+  @apply bg-gray-200;
+}
+.light::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-200;
+}
+.dark .light::-webkit-scrollbar-thumb {
+  @apply bg-base-800;
+}
+.dark .light::-webkit-scrollbar-thumb:hover {
+  @apply bg-base-800;
+}
+</style>

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-2 md:grid-cols-3 xl:grid-cols-5 gap-4 text-center">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BitinflowSelectBox"
+}
+</script>