0351d front end linting (#377)
* feat: disable custom script for trial users * after lint fix * frontend linting --------- Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Favour Olayinka
GitHub
@@ -1,19 +1,44 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="p-4 border-b sticky top-0 z-10 bg-white">
|
||||
<button v-if="!field" class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="closeSidebar">
|
||||
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
<button
|
||||
v-if="!field"
|
||||
class="text-gray-500 hover:text-gray-900 cursor-pointer"
|
||||
@click.prevent="closeSidebar"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M18 6L6 18M6 6L18 18"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<template v-else>
|
||||
<div class="flex">
|
||||
<button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="closeSidebar">
|
||||
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
<button
|
||||
class="text-gray-500 hover:text-gray-900 cursor-pointer"
|
||||
@click.prevent="closeSidebar"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M18 6L6 18M6 6L18 18"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
@@ -22,120 +47,162 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mt-2">
|
||||
<v-button color="light-gray" class="border-r-0 rounded-r-none text-xs hover:bg-red-50" size="small"
|
||||
@click="removeBlock"
|
||||
<v-button
|
||||
color="light-gray"
|
||||
class="border-r-0 rounded-r-none text-xs hover:bg-red-50"
|
||||
size="small"
|
||||
@click="removeBlock"
|
||||
>
|
||||
<svg class="h-4 w-4 text-red-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<svg
|
||||
class="h-4 w-4 text-red-600 inline mr-1 -mt-1"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Remove
|
||||
</v-button>
|
||||
<v-button size="small" class="text-xs" :class="{
|
||||
'rounded-none border-r-0':!isBlockField && typeCanBeChanged,
|
||||
'rounded-l-none':isBlockField || !typeCanBeChanged
|
||||
}" color="light-gray" @click="duplicateBlock"
|
||||
<v-button
|
||||
size="small"
|
||||
class="text-xs"
|
||||
:class="{
|
||||
'rounded-none border-r-0': !isBlockField && typeCanBeChanged,
|
||||
'rounded-l-none': isBlockField || !typeCanBeChanged,
|
||||
}"
|
||||
color="light-gray"
|
||||
@click="duplicateBlock"
|
||||
>
|
||||
<svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<svg
|
||||
class="h-4 w-4 text-blue-600 inline mr-1 -mt-1"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Duplicate
|
||||
</v-button>
|
||||
<change-field-type v-if="!isBlockField" btn-classes="rounded-l-none text-xs" :field="field"
|
||||
@changeType="onChangeType"
|
||||
<change-field-type
|
||||
v-if="!isBlockField"
|
||||
btn-classes="rounded-l-none text-xs"
|
||||
:field="field"
|
||||
@change-type="onChangeType"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template v-if="field">
|
||||
<field-options v-if="!isBlockField" :form="form" :field="field" />
|
||||
<block-options v-if="isBlockField" :form="form" :field="field" />
|
||||
<field-options
|
||||
v-if="!isBlockField"
|
||||
:form="form"
|
||||
:field="field"
|
||||
/>
|
||||
<block-options
|
||||
v-if="isBlockField"
|
||||
:form="form"
|
||||
:field="field"
|
||||
/>
|
||||
</template>
|
||||
<div v-else class="text-center p-10">
|
||||
<div
|
||||
v-else
|
||||
class="text-center p-10"
|
||||
>
|
||||
Click on field's setting icon in your form to modify it
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed } from 'vue'
|
||||
import clonedeep from 'clone-deep'
|
||||
import { useWorkingFormStore } from '../../../../stores/working_form'
|
||||
import ChangeFieldType from './components/ChangeFieldType.vue'
|
||||
import FieldOptions from './components/FieldOptions.vue'
|
||||
import BlockOptions from './components/BlockOptions.vue'
|
||||
import { computed } from "vue"
|
||||
import clonedeep from "clone-deep"
|
||||
import { useWorkingFormStore } from "../../../../stores/working_form"
|
||||
import ChangeFieldType from "./components/ChangeFieldType.vue"
|
||||
import FieldOptions from "./components/FieldOptions.vue"
|
||||
import BlockOptions from "./components/BlockOptions.vue"
|
||||
|
||||
export default {
|
||||
name: 'FormFieldEdit',
|
||||
name: "FormFieldEdit",
|
||||
components: { ChangeFieldType, FieldOptions, BlockOptions },
|
||||
props: {},
|
||||
setup () {
|
||||
setup() {
|
||||
const workingFormStore = useWorkingFormStore()
|
||||
return {
|
||||
workingFormStore,
|
||||
selectedFieldIndex : computed(() => workingFormStore.selectedFieldIndex)
|
||||
selectedFieldIndex: computed(() => workingFormStore.selectedFieldIndex),
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {
|
||||
form: {
|
||||
get () {
|
||||
get() {
|
||||
return this.workingFormStore.content
|
||||
},
|
||||
/* We add a setter */
|
||||
set (value) {
|
||||
set(value) {
|
||||
this.workingFormStore.set(value)
|
||||
}
|
||||
},
|
||||
},
|
||||
field () {
|
||||
return (this.form && this.selectedFieldIndex !== null) ? this.form.properties[this.selectedFieldIndex] : null
|
||||
field() {
|
||||
return this.form && this.selectedFieldIndex !== null
|
||||
? this.form.properties[this.selectedFieldIndex]
|
||||
: null
|
||||
},
|
||||
isBlockField () {
|
||||
return this.field && this.field.type.startsWith('nf')
|
||||
isBlockField() {
|
||||
return this.field && this.field.type.startsWith("nf")
|
||||
},
|
||||
typeCanBeChanged() {
|
||||
return [
|
||||
"text",
|
||||
"email",
|
||||
"phone_number",
|
||||
"number",
|
||||
"select",
|
||||
"multi_select",
|
||||
"rating",
|
||||
"scale",
|
||||
"slider",
|
||||
].includes(this.field.type)
|
||||
},
|
||||
typeCanBeChanged () {
|
||||
return ['text', 'email', 'phone_number', 'number', 'select', 'multi_select', 'rating', 'scale', 'slider'].includes(this.field.type)
|
||||
}
|
||||
},
|
||||
|
||||
watch: {},
|
||||
|
||||
created () {
|
||||
},
|
||||
created() {},
|
||||
|
||||
mounted () {
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
onChangeType (newType) {
|
||||
if (['select', 'multi_select'].includes(this.field.type)) {
|
||||
onChangeType(newType) {
|
||||
if (["select", "multi_select"].includes(this.field.type)) {
|
||||
this.field[newType] = this.field[this.field.type] // Set new options with new type
|
||||
delete this.field[this.field.type] // remove old type options
|
||||
}
|
||||
this.field.type = newType
|
||||
},
|
||||
removeBlock () {
|
||||
removeBlock() {
|
||||
const newFields = clonedeep(this.form.properties)
|
||||
newFields.splice(this.selectedFieldIndex, 1)
|
||||
this.form.properties = newFields
|
||||
this.closeSidebar()
|
||||
},
|
||||
duplicateBlock () {
|
||||
duplicateBlock() {
|
||||
const newFields = clonedeep(this.form.properties)
|
||||
const newField = clonedeep(this.form.properties[this.selectedFieldIndex])
|
||||
newField.id = this.generateUUID()
|
||||
@@ -143,24 +210,33 @@ export default {
|
||||
this.form.properties = newFields
|
||||
this.closeSidebar()
|
||||
},
|
||||
closeSidebar () {
|
||||
closeSidebar() {
|
||||
this.workingFormStore.closeEditFieldSidebar()
|
||||
},
|
||||
generateUUID () {
|
||||
let d = new Date().getTime()// Timestamp
|
||||
let d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now() * 1000)) || 0// Time in microseconds since page-load or 0 if unsupported
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
||||
let r = Math.random() * 16// random number between 0 and 16
|
||||
if (d > 0) { // Use timestamp until depleted
|
||||
r = (d + r) % 16 | 0
|
||||
d = Math.floor(d / 16)
|
||||
} else { // Use microseconds since page-load if supported
|
||||
r = (d2 + r) % 16 | 0
|
||||
d2 = Math.floor(d2 / 16)
|
||||
}
|
||||
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
|
||||
})
|
||||
}
|
||||
}
|
||||
generateUUID() {
|
||||
let d = new Date().getTime() // Timestamp
|
||||
let d2 =
|
||||
(typeof performance !== "undefined" &&
|
||||
performance.now &&
|
||||
performance.now() * 1000) ||
|
||||
0 // Time in microseconds since page-load or 0 if unsupported
|
||||
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
|
||||
/[xy]/g,
|
||||
function (c) {
|
||||
let r = Math.random() * 16 // random number between 0 and 16
|
||||
if (d > 0) {
|
||||
// Use timestamp until depleted
|
||||
r = (d + r) % 16 | 0
|
||||
d = Math.floor(d / 16)
|
||||
} else {
|
||||
// Use microseconds since page-load if supported
|
||||
r = (d2 + r) % 16 | 0
|
||||
d2 = Math.floor(d2 / 16)
|
||||
}
|
||||
return (c === "x" ? r : (r & 0x3) | 0x8).toString(16)
|
||||
},
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -8,153 +8,196 @@
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
Exclude this field or make it required.
|
||||
</p>
|
||||
<v-checkbox v-model="field.hidden" class="mb-3"
|
||||
:name="field.id+'_hidden'"
|
||||
@update:model-value="onFieldHiddenChange"
|
||||
<v-checkbox
|
||||
v-model="field.hidden"
|
||||
class="mb-3"
|
||||
:name="field.id + '_hidden'"
|
||||
@update:model-value="onFieldHiddenChange"
|
||||
>
|
||||
Hidden
|
||||
</v-checkbox>
|
||||
<select-input name="width" class="mt-3"
|
||||
:options="[
|
||||
{name:'Full',value:'full'},
|
||||
{name:'1/2 (half width)',value:'1/2'},
|
||||
{name:'1/3 (a third of the width)',value:'1/3'},
|
||||
{name:'2/3 (two thirds of the width)',value:'2/3'},
|
||||
{name:'1/4 (a quarter of the width)',value:'1/4'},
|
||||
{name:'3/4 (three quarters of the width)',value:'3/4'}
|
||||
]"
|
||||
:form="field" label="Field Width"
|
||||
<select-input
|
||||
name="width"
|
||||
class="mt-3"
|
||||
:options="[
|
||||
{ name: 'Full', value: 'full' },
|
||||
{ name: '1/2 (half width)', value: '1/2' },
|
||||
{ name: '1/3 (a third of the width)', value: '1/3' },
|
||||
{ name: '2/3 (two thirds of the width)', value: '2/3' },
|
||||
{ name: '1/4 (a quarter of the width)', value: '1/4' },
|
||||
{ name: '3/4 (three quarters of the width)', value: '3/4' },
|
||||
]"
|
||||
:form="field"
|
||||
label="Field Width"
|
||||
/>
|
||||
<select-input v-if="['nf-text','nf-image'].includes(field.type)" name="align" class="mt-3"
|
||||
:options="[
|
||||
{name:'Left',value:'left'},
|
||||
{name:'Center',value:'center'},
|
||||
{name:'Right',value:'right'},
|
||||
{name:'Justify',value:'justify'}
|
||||
]"
|
||||
:form="field" label="Field Alignment"
|
||||
<select-input
|
||||
v-if="['nf-text', 'nf-image'].includes(field.type)"
|
||||
name="align"
|
||||
class="mt-3"
|
||||
:options="[
|
||||
{ name: 'Left', value: 'left' },
|
||||
{ name: 'Center', value: 'center' },
|
||||
{ name: 'Right', value: 'right' },
|
||||
{ name: 'Justify', value: 'justify' },
|
||||
]"
|
||||
:form="field"
|
||||
label="Field Alignment"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="field.type == 'nf-text'" class="border-b py-2 px-4">
|
||||
<rich-text-area-input name="content"
|
||||
:form="field"
|
||||
label="Content"
|
||||
:required="false"
|
||||
<div
|
||||
v-if="field.type == 'nf-text'"
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<rich-text-area-input
|
||||
name="content"
|
||||
:form="field"
|
||||
label="Content"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="field.type == 'nf-page-break'" class="border-b py-2 px-4">
|
||||
<text-input name="next_btn_text"
|
||||
:form="field"
|
||||
label="Text of next button"
|
||||
:required="true"
|
||||
<div
|
||||
v-else-if="field.type == 'nf-page-break'"
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<text-input
|
||||
name="next_btn_text"
|
||||
:form="field"
|
||||
label="Text of next button"
|
||||
:required="true"
|
||||
/>
|
||||
<text-input name="previous_btn_text"
|
||||
:form="field"
|
||||
label="Text of previous button"
|
||||
help="Shown on the next page"
|
||||
:required="true"
|
||||
<text-input
|
||||
name="previous_btn_text"
|
||||
:form="field"
|
||||
label="Text of previous button"
|
||||
help="Shown on the next page"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="field.type == 'nf-divider'" class="border-b py-2 px-4">
|
||||
<text-input name="name"
|
||||
:form="field" :required="true"
|
||||
label="Field Name"
|
||||
<div
|
||||
v-else-if="field.type == 'nf-divider'"
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<text-input
|
||||
name="name"
|
||||
:form="field"
|
||||
:required="true"
|
||||
label="Field Name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="field.type == 'nf-image'" class="border-b py-2 px-4">
|
||||
<text-input name="name"
|
||||
:form="field" :required="true"
|
||||
label="Field Name"
|
||||
<div
|
||||
v-else-if="field.type == 'nf-image'"
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<text-input
|
||||
name="name"
|
||||
:form="field"
|
||||
:required="true"
|
||||
label="Field Name"
|
||||
/>
|
||||
<image-input name="image_block" class="mt-3"
|
||||
:form="field" label="Upload Image" :required="false"
|
||||
<image-input
|
||||
name="image_block"
|
||||
class="mt-3"
|
||||
:form="field"
|
||||
label="Upload Image"
|
||||
:required="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="field.type == 'nf-code'" class="border-b py-2 px-4">
|
||||
<code-input name="content" :form="field" label="Content"
|
||||
help="You can add any html code, including iframes"
|
||||
<div
|
||||
v-else-if="field.type == 'nf-code'"
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<code-input
|
||||
name="content"
|
||||
:form="field"
|
||||
label="Content"
|
||||
help="You can add any html code, including iframes"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="border-b py-2 px-4">
|
||||
<div
|
||||
v-else
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<p>No settings found.</p>
|
||||
</div>
|
||||
|
||||
<!-- Logic Block -->
|
||||
<form-block-logic-editor class="py-2 px-4 border-b" :form="form" :field="field" />
|
||||
<form-block-logic-editor
|
||||
class="py-2 px-4 border-b"
|
||||
:form="form"
|
||||
:field="field"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormBlockLogicEditor from '../../components/form-logic-components/FormBlockLogicEditor.vue'
|
||||
import FormBlockLogicEditor from "../../components/form-logic-components/FormBlockLogicEditor.vue"
|
||||
|
||||
export default {
|
||||
name: 'BlockOptions',
|
||||
components: {FormBlockLogicEditor},
|
||||
name: "BlockOptions",
|
||||
components: { FormBlockLogicEditor },
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
required: false
|
||||
required: false,
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
required: false
|
||||
}
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
editorToolbarCustom: [
|
||||
['bold', 'italic', 'underline', 'link']
|
||||
]
|
||||
editorToolbarCustom: [["bold", "italic", "underline", "link"]],
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {
|
||||
'field.width': {
|
||||
handler (val) {
|
||||
"field.width": {
|
||||
handler(val) {
|
||||
if (val === undefined || val === null) {
|
||||
this.field.width = 'full'
|
||||
this.field.width = "full"
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
immediate: true,
|
||||
},
|
||||
'field.align': {
|
||||
handler (val) {
|
||||
"field.align": {
|
||||
handler(val) {
|
||||
if (val === undefined || val === null) {
|
||||
this.field.align = 'left'
|
||||
this.field.align = "left"
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
|
||||
created () {
|
||||
created() {
|
||||
if (this.field?.width === undefined || this.field?.width === null) {
|
||||
this.field.width = 'full'
|
||||
this.field.width = "full"
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {},
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
onFieldHiddenChange (val) {
|
||||
onFieldHiddenChange(val) {
|
||||
this.field.hidden = val
|
||||
if (this.field.hidden) {
|
||||
this.field.required = false
|
||||
}
|
||||
},
|
||||
onFieldHelpPositionChange (val) {
|
||||
onFieldHelpPositionChange(val) {
|
||||
if (!val) {
|
||||
this.field.help_position = 'below_input'
|
||||
this.field.help_position = "below_input"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,17 +1,41 @@
|
||||
<template>
|
||||
<dropdown ref="newTypeDropdown" v-if="changeTypeOptions.length > 0" dusk="nav-dropdown">
|
||||
<template #trigger="{toggle}">
|
||||
<v-button class="relative" :class="btnClasses" size="small" color="light-gray" @click.stop="toggle">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-4 w-4 text-blue-600 inline mr-1 -mt-1">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
|
||||
<dropdown
|
||||
v-if="changeTypeOptions.length > 0"
|
||||
ref="newTypeDropdown"
|
||||
dusk="nav-dropdown"
|
||||
>
|
||||
<template #trigger="{ toggle }">
|
||||
<v-button
|
||||
class="relative"
|
||||
:class="btnClasses"
|
||||
size="small"
|
||||
color="light-gray"
|
||||
@click.stop="toggle"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
class="h-4 w-4 text-blue-600 inline mr-1 -mt-1"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
|
||||
/>
|
||||
</svg>
|
||||
<span class="whitespace-nowrap">Change Type</span>
|
||||
</v-button>
|
||||
</template>
|
||||
|
||||
<a v-for="(op, index) in changeTypeOptions" :key="index" href="#"
|
||||
class="block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
|
||||
@click.prevent="changeType(op.value)"
|
||||
<a
|
||||
v-for="(op, index) in changeTypeOptions"
|
||||
:key="index"
|
||||
href="#"
|
||||
class="block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
|
||||
@click.prevent="changeType(op.value)"
|
||||
>
|
||||
{{ op.name }}
|
||||
</a>
|
||||
@@ -19,68 +43,80 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Dropdown from '~/components/global/Dropdown.vue'
|
||||
import Dropdown from "~/components/global/Dropdown.vue"
|
||||
|
||||
export default {
|
||||
name: 'ChangeFieldType',
|
||||
name: "ChangeFieldType",
|
||||
components: { Dropdown },
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
btnClasses: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
emits: ['changeType'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {
|
||||
changeTypeOptions () {
|
||||
changeTypeOptions() {
|
||||
let newTypes = []
|
||||
if (['text', 'email', 'phone_number', 'number','slider','rating','scale'].includes(this.field.type)) {
|
||||
if (
|
||||
[
|
||||
"text",
|
||||
"email",
|
||||
"phone_number",
|
||||
"number",
|
||||
"slider",
|
||||
"rating",
|
||||
"scale",
|
||||
].includes(this.field.type)
|
||||
) {
|
||||
newTypes = [
|
||||
{ name: 'Text Input', value: 'text' },
|
||||
{ name: 'Email Input', value: 'email' },
|
||||
{ name: 'Phone Input', value: 'phone_number' },
|
||||
{ name: 'Number Input', value: 'number' },
|
||||
{ name: 'Slider Input', value: 'slider' },
|
||||
{ name: 'Rating Input', value: 'rating' },
|
||||
{ name: 'Scale Input', value: 'scale' },
|
||||
{ name: "Text Input", value: "text" },
|
||||
{ name: "Email Input", value: "email" },
|
||||
{ name: "Phone Input", value: "phone_number" },
|
||||
{ name: "Number Input", value: "number" },
|
||||
{ name: "Slider Input", value: "slider" },
|
||||
{ name: "Rating Input", value: "rating" },
|
||||
{ name: "Scale Input", value: "scale" },
|
||||
]
|
||||
}
|
||||
if (['select', 'multi_select'].includes(this.field.type)) {
|
||||
if (["select", "multi_select"].includes(this.field.type)) {
|
||||
newTypes = [
|
||||
{ name: 'Select Input', value: 'select' },
|
||||
{ name: 'Multi-Select Input', value: 'multi_select' }
|
||||
{ name: "Select Input", value: "select" },
|
||||
{ name: "Multi-Select Input", value: "multi_select" },
|
||||
]
|
||||
}
|
||||
return newTypes.filter((item) => {
|
||||
return item.value !== this.field.type
|
||||
}).map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
value: item.value
|
||||
}
|
||||
})
|
||||
}
|
||||
return newTypes
|
||||
.filter((item) => {
|
||||
return item.value !== this.field.type
|
||||
})
|
||||
.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
watch: {},
|
||||
|
||||
mounted () {
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
changeType (newType) {
|
||||
changeType(newType) {
|
||||
if (newType) {
|
||||
this.$emit('changeType', newType)
|
||||
this.$emit("changeType", newType)
|
||||
this.$refs.newTypeDropdown.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div v-if="field" class="py-2">
|
||||
<div
|
||||
v-if="field"
|
||||
class="py-2"
|
||||
>
|
||||
<!-- General -->
|
||||
<div class="border-b px-4">
|
||||
<h3 class="font-semibold block text-lg">
|
||||
@@ -8,23 +11,43 @@
|
||||
<p class="text-gray-400 mb-2 text-xs">
|
||||
Exclude this field or make it required.
|
||||
</p>
|
||||
<toggle-switch-input :form="field" name="required" label="Required"
|
||||
@update:model-value="onFieldRequiredChange"/>
|
||||
<toggle-switch-input :form="field" name="hidden" label="Hidden"
|
||||
@update:model-value="onFieldHiddenChange"/>
|
||||
<toggle-switch-input :form="field" name="disabled" label="Disabled"
|
||||
@update:model-value="onFieldDisabledChange"/>
|
||||
<toggle-switch-input
|
||||
:form="field"
|
||||
name="required"
|
||||
label="Required"
|
||||
@update:model-value="onFieldRequiredChange"
|
||||
/>
|
||||
<toggle-switch-input
|
||||
:form="field"
|
||||
name="hidden"
|
||||
label="Hidden"
|
||||
@update:model-value="onFieldHiddenChange"
|
||||
/>
|
||||
<toggle-switch-input
|
||||
:form="field"
|
||||
name="disabled"
|
||||
label="Disabled"
|
||||
@update:model-value="onFieldDisabledChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Checkbox -->
|
||||
<div v-if="field.type === 'checkbox'" class="border-b py-2 px-4">
|
||||
<div
|
||||
v-if="field.type === 'checkbox'"
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<h3 class="font-semibold block text-lg">
|
||||
Checkbox
|
||||
</h3>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
Advanced options for checkbox.
|
||||
</p>
|
||||
<v-checkbox v-model="field.use_toggle_switch" class="mt-3" name="use_toggle_switch" help="">
|
||||
<v-checkbox
|
||||
v-model="field.use_toggle_switch"
|
||||
class="mt-3"
|
||||
name="use_toggle_switch"
|
||||
help=""
|
||||
>
|
||||
Use toggle switch
|
||||
</v-checkbox>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
@@ -33,83 +56,172 @@
|
||||
</div>
|
||||
|
||||
<!-- File Uploads -->
|
||||
<div v-if="field.type === 'files'" class="border-b py-2 px-4">
|
||||
<div
|
||||
v-if="field.type === 'files'"
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<h3 class="font-semibold block text-lg">
|
||||
File uploads
|
||||
</h3>
|
||||
<v-checkbox v-model="field.multiple" class="mt-3" :name="field.id + '_multiple'">
|
||||
<v-checkbox
|
||||
v-model="field.multiple"
|
||||
class="mt-3"
|
||||
:name="field.id + '_multiple'"
|
||||
>
|
||||
Allow multiple files
|
||||
</v-checkbox>
|
||||
<v-checkbox v-model="field.camera_upload" class="mt-3"
|
||||
:name="field.id+'_camera_upload'"
|
||||
<v-checkbox
|
||||
v-model="field.camera_upload"
|
||||
class="mt-3"
|
||||
:name="field.id+'_camera_upload'"
|
||||
>
|
||||
Allow Camera uploads
|
||||
</v-checkbox>
|
||||
<text-input name="allowed_file_types" class="mt-3" :form="field" label="Allowed file types"
|
||||
placeholder="jpg,jpeg,png,gif" help="Comma separated values, leave blank to allow all file types" />
|
||||
<text-input
|
||||
name="allowed_file_types"
|
||||
class="mt-3"
|
||||
:form="field"
|
||||
label="Allowed file types"
|
||||
placeholder="jpg,jpeg,png,gif"
|
||||
help="Comma separated values, leave blank to allow all file types"
|
||||
/>
|
||||
|
||||
<text-input name="max_file_size" class="mt-3" :form="field" native-type="number" :min="1" :max="mbLimit"
|
||||
label="Maximum file size (in MB)" :placeholder="`1MB - ${mbLimit}MB`"
|
||||
help="Set the maximum file size that can be uploaded" />
|
||||
<text-input
|
||||
name="max_file_size"
|
||||
class="mt-3"
|
||||
:form="field"
|
||||
native-type="number"
|
||||
:min="1"
|
||||
:max="mbLimit"
|
||||
label="Maximum file size (in MB)"
|
||||
:placeholder="`1MB - ${mbLimit}MB`"
|
||||
help="Set the maximum file size that can be uploaded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="field.type === 'rating'" class="border-b py-2 px-4">
|
||||
<div
|
||||
v-if="field.type === 'rating'"
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<h3 class="font-semibold block text-lg">
|
||||
Rating
|
||||
</h3>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
Advanced options for rating.
|
||||
</p>
|
||||
<text-input name="rating_max_value" native-type="number" :min="1" class="mt-3" :form="field" required
|
||||
label="Max rating value" />
|
||||
<text-input
|
||||
name="rating_max_value"
|
||||
native-type="number"
|
||||
:min="1"
|
||||
class="mt-3"
|
||||
:form="field"
|
||||
required
|
||||
label="Max rating value"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="field.type === 'scale'" class="border-b py-2 px-4">
|
||||
<div
|
||||
v-if="field.type === 'scale'"
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<h3 class="font-semibold block text-lg">
|
||||
Scale
|
||||
</h3>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
Advanced options for scale.
|
||||
</p>
|
||||
<text-input name="scale_min_value" native-type="number" class="mt-4" :form="field" required
|
||||
label="Min scale value" />
|
||||
<text-input name="scale_max_value" native-type="number" :min="1" class="mt-4" :form="field" required
|
||||
label="Max scale value" />
|
||||
<text-input name="scale_step_value" native-type="number" :min="1" class="mt-4" :form="field" required
|
||||
label="Scale steps value" />
|
||||
<text-input
|
||||
name="scale_min_value"
|
||||
native-type="number"
|
||||
class="mt-4"
|
||||
:form="field"
|
||||
required
|
||||
label="Min scale value"
|
||||
/>
|
||||
<text-input
|
||||
name="scale_max_value"
|
||||
native-type="number"
|
||||
:min="1"
|
||||
class="mt-4"
|
||||
:form="field"
|
||||
required
|
||||
label="Max scale value"
|
||||
/>
|
||||
<text-input
|
||||
name="scale_step_value"
|
||||
native-type="number"
|
||||
:min="1"
|
||||
class="mt-4"
|
||||
:form="field"
|
||||
required
|
||||
label="Scale steps value"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="field.type === 'slider'" class="border-b py-2 px-4">
|
||||
<div
|
||||
v-if="field.type === 'slider'"
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<h3 class="font-semibold block text-lg">
|
||||
Slider
|
||||
</h3>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
Advanced options for slider.
|
||||
</p>
|
||||
<text-input name="slider_min_value" native-type="number" class="mt-4" :form="field" required
|
||||
label="Min slider value" />
|
||||
<text-input name="slider_max_value" native-type="number" :min="1" class="mt-4" :form="field" required
|
||||
label="Max slider value" />
|
||||
<text-input name="slider_step_value" native-type="number" :min="1" class="mt-4" :form="field" required
|
||||
label="Slider steps value" />
|
||||
<text-input
|
||||
name="slider_min_value"
|
||||
native-type="number"
|
||||
class="mt-4"
|
||||
:form="field"
|
||||
required
|
||||
label="Min slider value"
|
||||
/>
|
||||
<text-input
|
||||
name="slider_max_value"
|
||||
native-type="number"
|
||||
:min="1"
|
||||
class="mt-4"
|
||||
:form="field"
|
||||
required
|
||||
label="Max slider value"
|
||||
/>
|
||||
<text-input
|
||||
name="slider_step_value"
|
||||
native-type="number"
|
||||
:min="1"
|
||||
class="mt-4"
|
||||
:form="field"
|
||||
required
|
||||
label="Slider steps value"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Text Options -->
|
||||
<div v-if="field.type === 'text' && displayBasedOnAdvanced" class="border-b py-2 px-4">
|
||||
<div
|
||||
v-if="field.type === 'text' && displayBasedOnAdvanced"
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<h3 class="font-semibold block text-lg">
|
||||
Text Options
|
||||
</h3>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
Keep it simple or make it a multi-lines input.
|
||||
</p>
|
||||
<v-checkbox v-model="field.multi_lines" class="mb-2" :name="field.id + '_multi_lines'"
|
||||
@update:model-value="field.multi_lines = $event">
|
||||
<v-checkbox
|
||||
v-model="field.multi_lines"
|
||||
class="mb-2"
|
||||
:name="field.id + '_multi_lines'"
|
||||
@update:model-value="field.multi_lines = $event"
|
||||
>
|
||||
Multi-lines input
|
||||
</v-checkbox>
|
||||
</div>
|
||||
|
||||
<!-- Date Options -->
|
||||
<div v-if="field.type === 'date'" class="border-b py-2 px-4">
|
||||
<div
|
||||
v-if="field.type === 'date'"
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<h3 class="font-semibold block text-lg">
|
||||
Date Options
|
||||
</h3>
|
||||
@@ -163,21 +275,39 @@
|
||||
</div>
|
||||
|
||||
<!-- select/multiselect Options -->
|
||||
<div v-if="['select', 'multi_select'].includes(field.type)" class="border-b py-2 px-4">
|
||||
<div
|
||||
v-if="['select', 'multi_select'].includes(field.type)"
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<h3 class="font-semibold block text-lg">
|
||||
Select Options
|
||||
</h3>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
Advanced options for your select/multiselect fields.
|
||||
</p>
|
||||
<text-area-input v-model="optionsText" :name="field.id + '_options_text'" class="mt-3"
|
||||
label="Set selection options" help="Add one option per line" @update:model-value="onFieldOptionsChange" />
|
||||
<v-checkbox v-model="field.allow_creation" name="allow_creation" help=""
|
||||
@update:model-value="onFieldAllowCreationChange">
|
||||
<text-area-input
|
||||
v-model="optionsText"
|
||||
:name="field.id + '_options_text'"
|
||||
class="mt-3"
|
||||
label="Set selection options"
|
||||
help="Add one option per line"
|
||||
@update:model-value="onFieldOptionsChange"
|
||||
/>
|
||||
<v-checkbox
|
||||
v-model="field.allow_creation"
|
||||
name="allow_creation"
|
||||
help=""
|
||||
@update:model-value="onFieldAllowCreationChange"
|
||||
>
|
||||
Allow respondent to create new options
|
||||
</v-checkbox>
|
||||
<v-checkbox v-model="field.without_dropdown" class="mt-3" name="without_dropdown" help=""
|
||||
@update:model-value="onFieldWithoutDropdownChange">
|
||||
<v-checkbox
|
||||
v-model="field.without_dropdown"
|
||||
class="mt-3"
|
||||
name="without_dropdown"
|
||||
help=""
|
||||
@update:model-value="onFieldWithoutDropdownChange"
|
||||
>
|
||||
Always show all select options
|
||||
</v-checkbox>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
@@ -186,7 +316,10 @@
|
||||
</div>
|
||||
|
||||
<!-- Customization - Placeholder, Prefill, Relabel, Field Help -->
|
||||
<div v-if="displayBasedOnAdvanced" class="border-b py-2 px-4">
|
||||
<div
|
||||
v-if="displayBasedOnAdvanced"
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<h3 class="font-semibold block text-lg">
|
||||
Customization
|
||||
</h3>
|
||||
@@ -195,110 +328,243 @@
|
||||
Change your form field name, pre-fill a value, add hints, etc.
|
||||
</p>
|
||||
|
||||
<text-input name="name" class="mt-3" :form="field" :required="true" label="Field Name" />
|
||||
<text-input
|
||||
name="name"
|
||||
class="mt-3"
|
||||
:form="field"
|
||||
:required="true"
|
||||
label="Field Name"
|
||||
/>
|
||||
|
||||
<v-checkbox v-model="field.hide_field_name" class="mt-3" :name="field.id + '_hide_field_name'">
|
||||
<v-checkbox
|
||||
v-model="field.hide_field_name"
|
||||
class="mt-3"
|
||||
:name="field.id + '_hide_field_name'"
|
||||
>
|
||||
Hide field name
|
||||
</v-checkbox>
|
||||
|
||||
<v-checkbox v-if="field.type === 'phone_number'" v-model="field.use_simple_text_input" class="mt-3"
|
||||
:name="field.id + '_use_simple_text_input'">
|
||||
<v-checkbox
|
||||
v-if="field.type === 'phone_number'"
|
||||
v-model="field.use_simple_text_input"
|
||||
class="mt-3"
|
||||
:name="field.id + '_use_simple_text_input'"
|
||||
>
|
||||
Use simple text input
|
||||
</v-checkbox>
|
||||
<template v-if="field.type === 'phone_number' && !field.use_simple_text_input">
|
||||
<select-input v-model="field.unavailable_countries" class="mt-4" wrapper-class="relative"
|
||||
:options="allCountries" :multiple="true" :searchable="true" :search-keys="['name']" :option-key="'code'"
|
||||
:emit-key="'code'" label="Disabled countries" :placeholder="'Select a country'"
|
||||
help="Remove countries from the phone input">
|
||||
<template #selected="{ option, selected }">
|
||||
<select-input
|
||||
v-model="field.unavailable_countries"
|
||||
class="mt-4"
|
||||
wrapper-class="relative"
|
||||
:options="allCountries"
|
||||
:multiple="true"
|
||||
:searchable="true"
|
||||
:search-keys="['name']"
|
||||
:option-key="'code'"
|
||||
:emit-key="'code'"
|
||||
label="Disabled countries"
|
||||
:placeholder="'Select a country'"
|
||||
help="Remove countries from the phone input"
|
||||
>
|
||||
<template #selected="{ option }">
|
||||
<div class="flex items-center space-x-2 justify-center overflow-hidden">
|
||||
{{ option.length }} selected
|
||||
</div>
|
||||
</template>
|
||||
<template #option="{ option, selected }">
|
||||
<div class="flex items-center space-x-2 hover:text-white">
|
||||
<country-flag size="normal" class="!-mt-[9px]" :country="option.code" />
|
||||
<country-flag
|
||||
size="normal"
|
||||
class="!-mt-[9px]"
|
||||
:country="option.code"
|
||||
/>
|
||||
<span class="grow">{{ option.name }}</span>
|
||||
<span>{{ option.dial_code }}</span>
|
||||
</div>
|
||||
<span v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-2 dark:text-white">
|
||||
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd"
|
||||
<span
|
||||
v-if="selected"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-2 dark:text-white"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
</select-input>
|
||||
<small class="flex -mt-2">
|
||||
<a href="#" class="grow" @click.prevent="selectAllCountries">Select All</a>
|
||||
<a href="#" @click.prevent="field.unavailable_countries = null">Un-select All</a>
|
||||
<a
|
||||
href="#"
|
||||
class="grow"
|
||||
@click.prevent="selectAllCountries"
|
||||
>Select All</a>
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="field.unavailable_countries = null"
|
||||
>Un-select All</a>
|
||||
</small>
|
||||
</template>
|
||||
|
||||
<!-- Pre-fill depends on type -->
|
||||
<v-checkbox v-if="field.type == 'checkbox'" v-model="field.prefill" class="mt-3" :name="field.id + '_prefill'"
|
||||
@update:model-value="field.prefill = $event">
|
||||
<v-checkbox
|
||||
v-if="field.type == 'checkbox'"
|
||||
v-model="field.prefill"
|
||||
class="mt-3"
|
||||
:name="field.id + '_prefill'"
|
||||
@update:model-value="field.prefill = $event"
|
||||
>
|
||||
Pre-filled value
|
||||
</v-checkbox>
|
||||
<select-input v-else-if="['select', 'multi_select'].includes(field.type)" name="prefill" class="mt-3"
|
||||
:form="field" :options="prefillSelectsOptions" label="Pre-filled value"
|
||||
:multiple="field.type === 'multi_select'" />
|
||||
<date-input v-else-if="field.type === 'date' && field.prefill_today !== true" name="prefill" class="mt-3"
|
||||
:form="field" :with-time="field.with_time === true" :date-range="field.date_range === true"
|
||||
label="Pre-filled value" />
|
||||
<phone-input v-else-if="field.type === 'phone_number' && !field.use_simple_text_input" name="prefill" class="mt-3"
|
||||
:form="field" :can-only-country="true" :unavailable-countries="field.unavailable_countries ?? []"
|
||||
label="Pre-filled value" />
|
||||
<text-area-input v-else-if="field.type === 'text' && field.multi_lines" name="prefill" class="mt-3" :form="field"
|
||||
label="Pre-filled value" />
|
||||
<file-input v-else-if="field.type === 'files'" name="prefill" class="mt-4" :form="field" label="Pre-filled file"
|
||||
:multiple="field.multiple === true" :move-to-form-assets="true" />
|
||||
<text-input v-else-if="!['files', 'signature'].includes(field.type)" name="prefill" class="mt-3" :form="field"
|
||||
label="Pre-filled value" />
|
||||
<div v-if="['select', 'multi_select'].includes(field.type)" class="-mt-3 mb-3 text-gray-400 dark:text-gray-500">
|
||||
<select-input
|
||||
v-else-if="['select', 'multi_select'].includes(field.type)"
|
||||
name="prefill"
|
||||
class="mt-3"
|
||||
:form="field"
|
||||
:options="prefillSelectsOptions"
|
||||
label="Pre-filled value"
|
||||
:multiple="field.type === 'multi_select'"
|
||||
/>
|
||||
<date-input
|
||||
v-else-if="field.type === 'date' && field.prefill_today !== true"
|
||||
name="prefill"
|
||||
class="mt-3"
|
||||
:form="field"
|
||||
:with-time="field.with_time === true"
|
||||
:date-range="field.date_range === true"
|
||||
label="Pre-filled value"
|
||||
/>
|
||||
<phone-input
|
||||
v-else-if="field.type === 'phone_number' && !field.use_simple_text_input"
|
||||
name="prefill"
|
||||
class="mt-3"
|
||||
:form="field"
|
||||
:can-only-country="true"
|
||||
:unavailable-countries="field.unavailable_countries ?? []"
|
||||
label="Pre-filled value"
|
||||
/>
|
||||
<text-area-input
|
||||
v-else-if="field.type === 'text' && field.multi_lines"
|
||||
name="prefill"
|
||||
class="mt-3"
|
||||
:form="field"
|
||||
label="Pre-filled value"
|
||||
/>
|
||||
<file-input
|
||||
v-else-if="field.type === 'files'"
|
||||
name="prefill"
|
||||
class="mt-4"
|
||||
:form="field"
|
||||
label="Pre-filled file"
|
||||
:multiple="field.multiple === true"
|
||||
:move-to-form-assets="true"
|
||||
/>
|
||||
<text-input
|
||||
v-else-if="!['files', 'signature'].includes(field.type)"
|
||||
name="prefill"
|
||||
class="mt-3"
|
||||
:form="field"
|
||||
label="Pre-filled value"
|
||||
/>
|
||||
<div
|
||||
v-if="['select', 'multi_select'].includes(field.type)"
|
||||
class="-mt-3 mb-3 text-gray-400 dark:text-gray-500"
|
||||
>
|
||||
<small>
|
||||
A problem? <a href="#" @click.prevent="field.prefill = null">Click here to clear your pre-fill</a>
|
||||
A problem? <a
|
||||
href="#"
|
||||
@click.prevent="field.prefill = null"
|
||||
>Click here to clear your pre-fill</a>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<!-- Placeholder -->
|
||||
<text-input v-if="hasPlaceholder" name="placeholder" class="mt-3" :form="field"
|
||||
label="Empty Input Text (Placeholder)" />
|
||||
<text-input
|
||||
v-if="hasPlaceholder"
|
||||
name="placeholder"
|
||||
class="mt-3"
|
||||
:form="field"
|
||||
label="Empty Input Text (Placeholder)"
|
||||
/>
|
||||
|
||||
<select-input name="width" class="mt-3" :options="[
|
||||
{ name: 'Full', value: 'full' },
|
||||
{ name: '1/2 (half width)', value: '1/2' },
|
||||
{ name: '1/3 (a third of the width)', value: '1/3' },
|
||||
{ name: '2/3 (two thirds of the width)', value: '2/3' },
|
||||
{ name: '1/4 (a quarter of the width)', value: '1/4' },
|
||||
{ name: '3/4 (three quarters of the width)', value: '3/4' },
|
||||
]" :form="field" label="Field Width" />
|
||||
<select-input
|
||||
name="width"
|
||||
class="mt-3"
|
||||
:options="[
|
||||
{ name: 'Full', value: 'full' },
|
||||
{ name: '1/2 (half width)', value: '1/2' },
|
||||
{ name: '1/3 (a third of the width)', value: '1/3' },
|
||||
{ name: '2/3 (two thirds of the width)', value: '2/3' },
|
||||
{ name: '1/4 (a quarter of the width)', value: '1/4' },
|
||||
{ name: '3/4 (three quarters of the width)', value: '3/4' },
|
||||
]"
|
||||
:form="field"
|
||||
label="Field Width"
|
||||
/>
|
||||
|
||||
<!-- Help -->
|
||||
<rich-text-area-input name="help" class="mt-3" :form="field" :editor-toolbar="editorToolbarCustom"
|
||||
label="Field Help" help="Your field help will be shown below/above the field, just like this text."
|
||||
:help-position="field.help_position" />
|
||||
<select-input name="help_position" class="mt-3" :options="[
|
||||
{ name: 'Below input', value: 'below_input' },
|
||||
{ name: 'Above input', value: 'above_input' },
|
||||
]" :form="field" label="Field Help Position" @update:model-value="onFieldHelpPositionChange" />
|
||||
<rich-text-area-input
|
||||
name="help"
|
||||
class="mt-3"
|
||||
:form="field"
|
||||
:editor-toolbar="editorToolbarCustom"
|
||||
label="Field Help"
|
||||
help="Your field help will be shown below/above the field, just like this text."
|
||||
:help-position="field.help_position"
|
||||
/>
|
||||
<select-input
|
||||
name="help_position"
|
||||
class="mt-3"
|
||||
:options="[
|
||||
{ name: 'Below input', value: 'below_input' },
|
||||
{ name: 'Above input', value: 'above_input' },
|
||||
]"
|
||||
:form="field"
|
||||
label="Field Help Position"
|
||||
@update:model-value="onFieldHelpPositionChange"
|
||||
/>
|
||||
|
||||
<template v-if="['text', 'number', 'url', 'email'].includes(field.type)">
|
||||
<text-input name="max_char_limit" native-type="number" :min="1" :max="2000" :form="field"
|
||||
label="Max character limit" help="Maximum character limit of 2000" :required="false" />
|
||||
<checkbox-input name="show_char_limit" :form="field" class="mt-3" label="Always show character limit" />
|
||||
<text-input
|
||||
name="max_char_limit"
|
||||
native-type="number"
|
||||
:min="1"
|
||||
:max="2000"
|
||||
:form="field"
|
||||
label="Max character limit"
|
||||
help="Maximum character limit of 2000"
|
||||
:required="false"
|
||||
/>
|
||||
<checkbox-input
|
||||
name="show_char_limit"
|
||||
:form="field"
|
||||
class="mt-3"
|
||||
label="Always show character limit"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Options -->
|
||||
<div v-if="field.type === 'text'" class="border-b py-2 px-4">
|
||||
<div
|
||||
v-if="field.type === 'text'"
|
||||
class="border-b py-2 px-4"
|
||||
>
|
||||
<h3 class="font-semibold block text-lg mb-3">
|
||||
Advanced Options
|
||||
</h3>
|
||||
|
||||
<v-checkbox v-model="field.generates_uuid" :name="field.id + '_generates_uuid'"
|
||||
@update:model-value="onFieldGenUIdChange">
|
||||
<v-checkbox
|
||||
v-model="field.generates_uuid"
|
||||
:name="field.id + '_generates_uuid'"
|
||||
@update:model-value="onFieldGenUIdChange"
|
||||
>
|
||||
Generates a unique id
|
||||
</v-checkbox>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
@@ -306,8 +572,11 @@
|
||||
submission
|
||||
</p>
|
||||
|
||||
<v-checkbox v-model="field.generates_auto_increment_id" :name="field.id + '_generates_auto_increment_id'"
|
||||
@update:model-value="onFieldGenAutoIdChange">
|
||||
<v-checkbox
|
||||
v-model="field.generates_auto_increment_id"
|
||||
:name="field.id + '_generates_auto_increment_id'"
|
||||
@update:model-value="onFieldGenAutoIdChange"
|
||||
>
|
||||
Generates an auto-incremented id
|
||||
</v-checkbox>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
@@ -316,7 +585,11 @@
|
||||
</div>
|
||||
|
||||
<!-- Logic Block -->
|
||||
<form-block-logic-editor class="py-2 px-4 border-b" :form="form" :field="field" />
|
||||
<form-block-logic-editor
|
||||
class="py-2 px-4 border-b"
|
||||
:form="form"
|
||||
:field="field"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user