Add custom select option

tailwindcomponents · Nov 3, 2022 · 0c33df7 · 0c33df7
1 parent 1272c64
commit 0c33df7
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 18 deletions.
diff --git a/src/components/ColorPalette.vue b/src/components/ColorPalette.vue
@@ -22,7 +22,7 @@
                     <div v-for="(number, index) in values" :key="index" >
                         <div>
                             <button
-                                class="w-full h-16 md:h-10 2xl:h-12 rounded-lg focus:outline-none" 
+                                class="w-full h-16 rounded-lg md:h-10 2xl:h-12 focus:outline-none" 
                                 @click="updateColor(select + '-' + color + '-' + number)" 
                                 :class="'bg-' + color + '-' + number + ' ' + (selectedColor(select + '-' + color + '-' + number) ? 'ring ring-[#0FD3CF]' :  '')"
                             >
@@ -91,7 +91,7 @@ export default {
                 return true;
             }
 
-            if (this.select == 'via' && this.via == color) {
+            if (this.select == 'via' && this.via == color && this.viaActive) {
                 return true;
             }
 

diff --git a/src/components/CustomSelect.vue b/src/components/CustomSelect.vue
@@ -0,0 +1,98 @@
+<template>
+    <div class="relative w-full h-12 px-4 mt-2 font-medium text-gray-700 bg-white border border-gray-200 rounded-md focus:border-indigo-500 focus:outline-none focus:ring focus:ring-indigo-600 focus:ring-opacity-20 " 
+        :tabindex="tabindex" 
+        @blur="open = false"
+      >
+        <button @click="open = !open" class="flex items-center justify-between w-full h-full">
+            <div class="flex items-center w-full h-full " :class="{ open: open }" >
+                {{ selectedTitle }}
+            </div>
+
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-gray-700">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+
+
+        <div 
+          class="absolute left-0 z-20 w-full py-2 mt-2 bg-white border border-gray-100 rounded-lg shadow-xl top-12 dark:border-gray-700 lg:left-auto lg:right-0 dark:bg-gray-800" 
+          v-show="open"
+        >
+            <div
+                class="px-4 py-3 cursor-pointer hover:bg-gray-50"
+                v-for="(option, i) of options"
+                :key="i"
+                @click="
+                  selectedTitle = option.title;
+                  open = false;
+                  $emit('input', option.value);
+                "
+
+                :class="selectedTitle == option.title ? ' bg-gray-100' : ''"
+            >
+                {{ option.title }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        options: {
+            type: Array,
+            required: true,
+        },
+
+        default: {
+            type: String,
+            required: false,
+            default: null,
+        },
+
+        defaultTitle: {
+            type: String,
+            required: false,
+            default: null,
+        },
+
+        tabindex: {
+            type: Number,
+            required: false,
+            default: 0,
+        },
+    },
+
+    mounted() {
+        this.$emit("input", this.selected);
+    },
+
+    data() {
+        return {
+            selected: this.default
+                ? this.default
+                : this.options.length > 0
+                ? this.options[0].value
+                : null,
+            selectedTitle: this.defaultTitle
+                ? this.defaultTitle
+                : this.options.length > 0
+                ? this.options[0].title
+                : null,
+            open: false,
+        };
+    },
+
+    watch: {
+        default(newValue) {
+            this.selected = newValue;
+
+            let newOption = this.options.filter(option => {
+                return option.value == newValue;
+            });
+
+            this.selectedTitle = newOption[0].title;
+        }
+    }
+};
+</script>
diff --git a/src/components/Generator.vue b/src/components/Generator.vue
@@ -40,7 +40,7 @@
                         </div>
 
                         <div v-show="active == 'text'" class="w-full p-6 bg-gray-50 rounded-xl h-72 md:h-96 xl:h-[28rem]">
-                            <h2 v-text="text" class="text-2xl font-bold mx-auto sm:text-3xl md:text-4xl break-words" :class="classes()"> </h2>
+                            <h2 v-text="text" class="mx-auto text-2xl font-bold break-words sm:text-3xl md:text-4xl" :class="classes()"> </h2>
                         </div>
 
                         <button @click="randomGradient" class="flex items-center mx-auto mt-4 space-x-3 font-semibold text-gray-500 transition-colors duration-300 hover:text-indigo-500 focus:outline-none">
@@ -77,25 +77,34 @@
                             <div class="md:w-1/2">
                                 <label class="font-medium text-gray-500">Via</label>
 
-                                <select v-model="viaActive" class="w-full h-12 px-4 mt-2 font-medium text-gray-700 bg-white border border-gray-200 rounded-md focus:border-indigo-500 focus:outline-none focus:ring focus:ring-indigo-600 focus:ring-opacity-20">
-                                    <option :value="false">InActive</option>
-                                    <option :value="true">Active</option>
-                                </select>
+                                <custom-select 
+                                    :options="[
+                                        { title: 'isActive', value: false },
+                                        { title: 'Active', value: true },
+                                    ]"
+                                    :default="viaActive"
+                                    @input="updateViaActive"
+                                />
                             </div>
 
                              <div class="mt-4 md:w-1/2 md:mt-0">
                                 <label class="font-medium text-gray-500">Direction</label>
 
-                                <select v-model="direction" class="w-full h-12 px-4 mt-2 font-medium text-gray-700 bg-white border border-gray-200 rounded-md focus:border-indigo-500 focus:outline-none focus:ring focus:ring-indigo-600 focus:ring-opacity-20">
-                                    <option value="bg-gradient-to-t">To Top</option>
-                                    <option value="bg-gradient-to-tr">To Top Right</option>
-                                    <option value="bg-gradient-to-r">To Right</option>
-                                    <option value="bg-gradient-to-br">To Bottom Right</option>
-                                    <option value="bg-gradient-to-b">To Bottom</option>
-                                    <option value="bg-gradient-to-bl">To Bottom Left</option>
-                                    <option value="bg-gradient-to-l">To Left</option>
-                                    <option value="bg-gradient-to-tl">To Top Left</option>
-                                </select>
+                                <custom-select 
+                                    :options="[
+                                        { title: 'To Top', value: 'bg-gradient-to-t' },
+                                        { title: 'To Top Right', value: 'bg-gradient-to-tr' },
+                                        { title: 'To Right', value: 'bg-gradient-to-r' },
+                                        { title: 'To Bottom Right', value: 'bg-gradient-to-br' },
+                                        { title: 'To Bottom', value: 'bg-gradient-to-b' },
+                                        { title: 'To Bottom Left', value: 'bg-gradient-to-bl' },
+                                        { title: 'To Left', value: 'bg-gradient-to-l' },
+                                        { title: 'To Top Left', value: 'bg-gradient-to-tl' },
+                                    ]"
+                                    :default="direction"
+                                    :defaultTitle="'To Right'"
+                                    @input="updateDirection"
+                                />
                             </div>
                         </div>
 
@@ -128,11 +137,12 @@
 <script>
 import ToggleActive from "./ToggleActive.vue";
 import ColorPalette from "./ColorPalette.vue";
+import CustomSelect from "./CustomSelect.vue";
 
 export default {
     props: ['gradients'],
     
-    components: { ToggleActive, ColorPalette },
+    components: { ToggleActive, ColorPalette, CustomSelect },
 
     data() {
         return {
@@ -164,6 +174,14 @@ export default {
             this.from = newColor;
         },
 
+        updateViaActive(newValue) {
+            this.viaActive = newValue
+        },
+
+        updateDirection(newValue) {
+            this.direction = newValue
+        },
+
         updateViaColor(newColor) {
             this.via = newColor;
         },