Merge branch 'main' of https://github.com/JhumanJ/OpnForm
This commit is contained in:
commit
a81aa6a9e7
|
@ -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
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -18,6 +18,10 @@ body.dark * {
|
|||
|
||||
@layer base {
|
||||
|
||||
:root {
|
||||
--bg-form-color: #2563eb;
|
||||
}
|
||||
|
||||
p, div {
|
||||
@apply text-gray-900 dark:text-white;
|
||||
}
|
||||
|
|
|
@ -68,7 +68,8 @@ module.exports = {
|
|||
backgroundDark: '#272B2C',
|
||||
help: '#37352f99',
|
||||
helpDark: '#fff9'
|
||||
}
|
||||
},
|
||||
'form-color': 'var(--bg-form-color)'
|
||||
},
|
||||
transitionProperty: {
|
||||
height: 'height',
|
||||
|
|
Loading…
Reference in New Issue