Merge branch 'main' of https://github.com/JhumanJ/OpnForm

resources/js/components/forms/components/VSelect.vue

@@ -57,8 +57,8 @@
             <loader class="h-6 w-6 text-nt-blue mx-auto" />
           </div>
           <template v-if="filteredOptions.length>0">
-            <li v-for="item in filteredOptions" :key="item[optionKey]" role="option"
-                class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9  cursor-pointer group hover:text-white hover:bg-nt-blue focus:outline-none focus:text-white focus:bg-nt-blue"
+            <li v-for="item in filteredOptions" :key="item[optionKey]" role="option" :style="optionStyle"
+                class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9  cursor-pointer group hover:text-white hover:bg-form-color focus:outline-none focus:text-white focus:bg-nt-blue"
                 :dusk="dusk+'_option'" @click="select(item)"
             >
               <slot name="option" :option="item" :selected="isSelected(item)" />
@@ -67,8 +67,8 @@
           <p v-else-if="!loading && !(allowCreation && searchTerm)" class="w-full text-gray-500 text-center py-2">
             {{ (allowCreation ? 'Type something to add an option': 'No option available') }}.
           </p>
-          <li v-if="allowCreation && searchTerm" role="option"
-              class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9  cursor-pointer group hover:text-white hover:bg-nt-blue focus:outline-none focus:text-white focus:bg-nt-blue"
+          <li v-if="allowCreation && searchTerm" role="option" :style="optionStyle"
+              class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9  cursor-pointer group hover:text-white hover:bg-form-color focus:outline-none focus:text-white focus:bg-nt-blue"
               @click="createOption(searchTerm)"
           >
             Create <b class="px-1 bg-gray-300 rounded group-hover:text-black">{{ searchTerm }}</b>
@@ -127,6 +127,11 @@ export default {
     }
   },
   computed: {
+    optionStyle () {
+      return {
+        '--bg-form-color': this.color
+      }
+    },
     inputStyle () {
       return {
         '--tw-ring-color': this.color

resources/js/components/open/forms/components/FormFieldsEditor.vue

@@ -294,10 +294,10 @@ export default {
       this.$store.commit('open/working_form/openSettingsForField', this.formFields.length-1)
     },
     removeBlock(blockIndex) {
-      this.closeSidebar()
       const newFields = clonedeep(this.formFields)
       newFields.splice(blockIndex, 1)
       this.$set(this, 'formFields', newFields)
+      this.closeSidebar()
     },
     closeSidebar() {
       this.$store.commit('open/working_form/closeEditFieldSidebar')

resources/js/components/open/forms/fields/FormFieldEditSidebar.vue

@@ -121,18 +121,18 @@ export default {
       this.$set(this.field, 'type', newType)
     },
     removeBlock() {
-      this.closeSidebar()
       const newFields = clonedeep(this.form.properties)
       newFields.splice(this.selectedFieldIndex, 1)
       this.$set(this.form, 'properties', newFields)
+      this.closeSidebar()
     },
     duplicateBlock() {
-      this.closeSidebar()
       const newFields = clonedeep(this.form.properties)
       const newField = clonedeep(this.form.properties[this.selectedFieldIndex])
       newField.id = this.generateUUID()
       newFields.push(newField)
       this.$set(this.form, 'properties', newFields)
+      this.closeSidebar()
     },
     closeSidebar() {
       this.$store.commit('open/working_form/closeEditFieldSidebar')

resources/sass/app.scss

@@ -18,6 +18,10 @@ body.dark * {
 
 @layer base {
 
+  :root {
+    --bg-form-color: #2563eb;
+  }
+
   p, div {
     @apply text-gray-900 dark:text-white;
   }

tailwind.config.js

@@ -68,7 +68,8 @@ module.exports = {
           backgroundDark: '#272B2C',
           help: '#37352f99',
           helpDark: '#fff9'
-        }
+        },
+        'form-color': 'var(--bg-form-color)'
       },
       transitionProperty: {
         height: 'height',