matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into vue-3

Browse Source
This commit is contained in:
Forms Dev
2023-11-28 16:24:36 +05:30
parent 83d3eb6991 57fdfb25a0
commit 54918354ea
81 changed files with 2327 additions and 1494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
resources/js/components/open/editors/EditorOptionsPanel.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<collapse class="p-4 w-full border-b" v-model="show">
<template #title>
<div class="flex items-center pr-8">
<div class="mr-3" :class="{'text-blue-600':show, 'text-gray-500':!show}">
<slot name="icon" />
</div>
<h3 id="v-step-2" class="font-semibold flex-grow">
{{ name }}
</h3>
<pro-tag v-if="hasProTag" />
</div>
</template>
<slot />
</collapse>
</template>
<script>
import Collapse from '../../common/Collapse.vue'
import ProTag from '../../common/ProTag.vue'
export default {
name: 'EditorOptionsPanel',
components: { Collapse, ProTag },
props: {
name: {
type: String,
required: true
},
hasProTag: {
type: Boolean,
default: false
},
alreadyOpened: {
type: Boolean,
default: false
}
},
data () {
return {
show: this.alreadyOpened
}
}
}
</script>

7
resources/js/components/open/forms/OpenFormField.vue
View File

@@ -150,6 +150,9 @@ export default {
if (field.type === 'number' && field.is_rating && field.rating_max_value) {
return 'RatingInput'
}
if (field.type === 'number' && field.is_scale && field.scale_max_value) {
return 'ScaleInput'
}
if (['select', 'multi_select'].includes(field.type) && field.without_dropdown) {
return 'FlatSelectInput'
}
@@ -302,6 +305,10 @@ export default {
inputProperties.accept = (this.form.is_pro && field.allowed_file_types) ? field.allowed_file_types : ""
} else if (field.type === 'number' && field.is_rating) {
inputProperties.numberOfStars = parseInt(field.rating_max_value)
} else if (field.type === 'number' && field.is_scale) {
inputProperties.minScale = parseInt(field.scale_min_value) ?? 1
inputProperties.maxScale = parseInt(field.scale_max_value) ?? 5
inputProperties.stepScale = parseInt(field.scale_step_value) ?? 1
} else if (field.type === 'number' || (field.type === 'phone_number' && field.use_simple_text_input)) {
inputProperties.pattern = '/\d*'
} else if (field.type === 'phone_number' && !field.use_simple_text_input) {

22
resources/js/components/open/forms/components/FormEditor.vue
View File

@@ -55,15 +55,15 @@
Please create this form on a device with a larger screen. That will allow you to preview your form changes.
</div>
<form-information />
<form-structure />
<form-customization />
<form-about-submission />
<form-notifications />
<form-security-privacy />
<form-information/>
<form-structure/>
<form-customization/>
<form-notifications/>
<form-about-submission/>
<form-access />
<form-security-privacy/>
<form-custom-seo />
<form-custom-code />
<form-integrations />
<form-custom-code/>
</div>
<form-editor-preview />
@@ -95,10 +95,10 @@ import FormCustomization from './form-components/FormCustomization.vue'
import FormCustomCode from './form-components/FormCustomCode.vue'
import FormAboutSubmission from './form-components/FormAboutSubmission.vue'
import FormNotifications from './form-components/FormNotifications.vue'
import FormIntegrations from './form-components/FormIntegrations.vue'
import FormEditorPreview from './form-components/FormEditorPreview.vue'
import FormSecurityPrivacy from './form-components/FormSecurityPrivacy.vue'
import FormCustomSeo from './form-components/FormCustomSeo.vue'
import FormAccess from './form-components/FormAccess.vue'
import saveUpdateAlert from '../../../../mixins/forms/saveUpdateAlert.js'
import fieldsLogic from '../../../../mixins/forms/fieldsLogic.js'
@@ -108,7 +108,6 @@ export default {
AddFormBlockSidebar,
FormFieldEditSidebar,
FormEditorPreview,
FormIntegrations,
FormNotifications,
FormAboutSubmission,
FormCustomCode,
@@ -117,7 +116,8 @@ export default {
FormInformation,
FormErrorModal,
FormSecurityPrivacy,
FormCustomSeo
FormCustomSeo,
FormAccess
},
mixins: [saveUpdateAlert, fieldsLogic],
props: {

55
resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue
View File

@@ -1,19 +1,11 @@
<template>
<collapse v-model="isCollapseOpen" class="p-4 w-full border-b">
<template #title>
<h3 class="font-semibold text-lg relative">
<svg
class="h-5 w-5 inline mr-2 -mt-0.5 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.83333 6.08333H9M4.83333 9H11.5M4.83333 14V15.9463C4.83333 16.3903 4.83333 16.6123 4.92436 16.7263C5.00352 16.8255 5.12356 16.8832 5.25045 16.8831C5.39636 16.8829 5.56973 16.7442 5.91646 16.4668L7.90434 14.8765C8.31043 14.5517 8.51347 14.3892 8.73957 14.2737C8.94017 14.1712 9.15369 14.0963 9.37435 14.051C9.62306 14 9.88308 14 10.4031 14H12.5C13.9001 14 14.6002 14 15.135 13.7275C15.6054 13.4878 15.9878 13.1054 16.2275 12.635C16.5 12.1002 16.5 11.4001 16.5 10V5.5C16.5 4.09987 16.5 3.3998 16.2275 2.86502C15.9878 2.39462 15.6054 2.01217 15.135 1.77248C14.6002 1.5 13.9001 1.5 12.5 1.5H5.5C4.09987 1.5 3.3998 1.5 2.86502 1.77248C2.39462 2.01217 2.01217 2.39462 1.77248 2.86502C1.5 3.3998 1.5 4.09987 1.5 5.5V10.6667C1.5 11.4416 1.5 11.8291 1.58519 12.147C1.81635 13.0098 2.49022 13.6836 3.35295 13.9148C3.67087 14 4.05836 14 4.83333 14Z"
stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"
/>
</svg>
About Submissions
</h3>
<editor-options-panel name="About Submissions" :already-opened="true">
<template #icon>
<svg class="h-5 w-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.83333 6.08333H9M4.83333 9H11.5M4.83333 14V15.9463C4.83333 16.3903 4.83333 16.6123 4.92436 16.7263C5.00352 16.8255 5.12356 16.8832 5.25045 16.8831C5.39636 16.8829 5.56973 16.7442 5.91646 16.4668L7.90434 14.8765C8.31043 14.5517 8.51347 14.3892 8.73957 14.2737C8.94017 14.1712 9.15369 14.0963 9.37435 14.051C9.62306 14 9.88308 14 10.4031 14H12.5C13.9001 14 14.6002 14 15.135 13.7275C15.6054 13.4878 15.9878 13.1054 16.2275 12.635C16.5 12.1002 16.5 11.4001 16.5 10V5.5C16.5 4.09987 16.5 3.3998 16.2275 2.86502C15.9878 2.39462 15.6054 2.01217 15.135 1.77248C14.6002 1.5 13.9001 1.5 12.5 1.5H5.5C4.09987 1.5 3.3998 1.5 2.86502 1.77248C2.39462 2.01217 2.01217 2.39462 1.77248 2.86502C1.5 3.3998 1.5 4.09987 1.5 5.5V10.6667C1.5 11.4416 1.5 11.8291 1.58519 12.147C1.81635 13.0098 2.49022 13.6836 3.35295 13.9148C3.67087 14 4.05836 14 4.83333 14Z"
stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>
<text-input name="submit_button_text" class="mt-4"
@@ -132,46 +124,21 @@
label="Text After Submission"
:required="false"
/>
<date-input :with-time="true" name="closes_at"
:form="form"
label="Closing Date"
help="If filled, then the form won't accept submissions after the given date"
:required="false"
/>
<rich-text-area-input v-if="form.closes_at || form.visibility=='closed'" name="closed_text"
:form="form"
label="Closed form text"
help="This message will be shown when the form will be closed"
:required="false"
/>
<text-input name="max_submissions_count" native-type="number" :min="1" :form="form"
label="Max. Number of Submissions"
help="If filled, the form will only accept X number of submissions"
:required="false"
/>
<rich-text-area-input v-if="form.max_submissions_count && form.max_submissions_count > 0"
name="max_submissions_reached_text"
:form="form"
label="Max Submissions reached text"
help="This message will be shown when the form will have the maximum number of submissions"
:required="false"
/>
</template>
</collapse>
</editor-options-panel>
</template>
<script>
import Collapse from '../../../../common/Collapse.vue'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import ProTag from '../../../../common/ProTag.vue'
import VTransition from '../../../../common/transitions/VTransition.vue'
export default {
components: { Collapse, ProTag, VTransition },
components: {EditorOptionsPanel, ProTag, VTransition},
props: {},
data () {
return {
submissionOptions: {},
isCollapseOpen: true
submissionOptions: {}
}
},

66
resources/js/components/open/forms/components/form-components/FormAccess.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<editor-options-panel name="Form Access" :already-opened="false">
<template #icon>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
/>
</svg>
</template>
<text-input name="password" :form="form" class="mt-4"
label="Form Password" help="Leave empty to disable password"
/>
<date-input :with-time="true" name="closes_at" class="mt-4"
:form="form"
label="Close form on a scheduled date"
help="Leave empty to keep the form open"
:required="false"
/>
<rich-text-area-input v-if="form.closes_at || form.visibility=='closed'" name="closed_text"
:form="form" class="mt-4"
label="Closed form text"
help="This message will be shown when the form will be closed"
:required="false"
/>
<text-input name="max_submissions_count" native-type="number" :min="1" :form="form"
label="Limit number of submissions" placeholder="Max submissions" class="mt-4"
help="Leave empty for unlimited submissions"
:required="false"
/>
<rich-text-area-input v-if="form.max_submissions_count && form.max_submissions_count > 0"
name="max_submissions_reached_text" class="mt-4"
:form="form"
label="Max Submissions reached text"
help="This message will be shown when the form will have the maximum number of submissions"
:required="false"
/>
</editor-options-panel>
</template>
<script>
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
export default {
components: { EditorOptionsPanel },
props: {},
data () {
return {
}
},
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
}
}
},
watch: {},
mounted () {
},
methods: {}
}
</script>

24
resources/js/components/open/forms/components/form-components/FormCustomCode.vue
View File

@@ -1,15 +1,9 @@
<template>
<collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
<template #title>
<h3 class="font-semibold text-lg">
<svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors"
:class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M14 17.5L16.5 15L14 12.5M10 12.5L7.5 15L10 17.5M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Custom Code
<pro-tag />
</h3>
<editor-options-panel name="Custom Code" :already-opened="false" :has-pro-tag="true">
<template #icon>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M14 17.5L16.5 15L14 12.5M10 12.5L7.5 15L10 17.5M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>
<p class="mt-4">
The code will be injected in the <span class="font-semibold">head</span> section of your form page.
@@ -19,21 +13,19 @@
your actual form page (save changes beforehand)."
label="Custom Code"
/>
</collapse>
</editor-options-panel>
</template>
<script>
import Collapse from '../../../../common/Collapse.vue'
import ProTag from '../../../../common/ProTag.vue'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import CodeInput from '../../../../forms/CodeInput.vue'
export default {
components: { Collapse, ProTag, CodeInput },
components: { EditorOptionsPanel, CodeInput },
props: {
},
data () {
return {
isCollapseOpen: false
}
},

29
resources/js/components/open/forms/components/form-components/FormCustomSeo.vue
View File

@@ -1,18 +1,11 @@
<template>
<collapse class="p-5 w-full border-b" v-model="isCollapseOpen">
<template #title>
<h3 id="v-step-2" class="font-semibold text-lg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="h-5 w-5 inline -ml-1 mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
>
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
/>
</svg>
Link Settings - SEO
<pro-tag />
</h3>
<editor-options-panel name="Link Settings - SEO" :already-opened="false" :has-pro-tag="true">
<template #icon>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
/>
</svg>
</template>
<p class="mt-4 text-gray-500 text-sm">
Customize the image and text that appear when you share your form on other sites (Open Graph).
@@ -26,19 +19,17 @@
<image-input v-model="form.seo_meta.page_thumbnail" name="page_thumbnail" class="mt-4"
label="Page Thumbnail Image" help="Also know as og:image - 1200 X 630"
/>
</collapse>
</editor-options-panel>
</template>
<script>
import Collapse from '../../../../common/Collapse.vue'
import ProTag from '../../../../common/ProTag.vue'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
export default {
components: { Collapse, ProTag },
components: { EditorOptionsPanel },
props: {},
data () {
return {
isCollapseOpen: false
}
},
computed: {

29
resources/js/components/open/forms/components/form-components/FormCustomization.vue
View File

@@ -1,16 +1,12 @@
<template>
<collapse v-model="isCollapseOpen" class="p-4 w-full border-b">
<template #title>
<h3 class="font-semibold text-lg">
<svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.66667 9.99984C1.66667 14.6022 5.39763 18.3332 10 18.3332C11.3807 18.3332 12.5 17.2139 12.5 15.8332V15.4165C12.5 15.0295 12.5 14.836 12.5214 14.6735C12.6691 13.5517 13.5519 12.6689 14.6737 12.5212C14.8361 12.4998 15.0297 12.4998 15.4167 12.4998H15.8333C17.214 12.4998 18.3333 11.3805 18.3333 9.99984C18.3333 5.39746 14.6024 1.6665 10 1.6665C5.39763 1.6665 1.66667 5.39746 1.66667 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
<path d="M5.83333 10.8332C6.29357 10.8332 6.66667 10.4601 6.66667 9.99984C6.66667 9.5396 6.29357 9.1665 5.83333 9.1665C5.3731 9.1665 5 9.5396 5 9.99984C5 10.4601 5.3731 10.8332 5.83333 10.8332Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.3333 7.49984C13.7936 7.49984 14.1667 7.12674 14.1667 6.6665C14.1667 6.20627 13.7936 5.83317 13.3333 5.83317C12.8731 5.83317 12.5 6.20627 12.5 6.6665C12.5 7.12674 12.8731 7.49984 13.3333 7.49984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8.33333 6.6665C8.79357 6.6665 9.16667 6.29341 9.16667 5.83317C9.16667 5.37293 8.79357 4.99984 8.33333 4.99984C7.8731 4.99984 7.5 5.37293 7.5 5.83317C7.5 6.29341 7.8731 6.6665 8.33333 6.6665Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Customization
</h3>
<editor-options-panel name="Customization" :already-opened="true">
<template #icon>
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.66667 9.99984C1.66667 14.6022 5.39763 18.3332 10 18.3332C11.3807 18.3332 12.5 17.2139 12.5 15.8332V15.4165C12.5 15.0295 12.5 14.836 12.5214 14.6735C12.6691 13.5517 13.5519 12.6689 14.6737 12.5212C14.8361 12.4998 15.0297 12.4998 15.4167 12.4998H15.8333C17.214 12.4998 18.3333 11.3805 18.3333 9.99984C18.3333 5.39746 14.6024 1.6665 10 1.6665C5.39763 1.6665 1.66667 5.39746 1.66667 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.83333 10.8332C6.29357 10.8332 6.66667 10.4601 6.66667 9.99984C6.66667 9.5396 6.29357 9.1665 5.83333 9.1665C5.3731 9.1665 5 9.5396 5 9.99984C5 10.4601 5.3731 10.8332 5.83333 10.8332Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.3333 7.49984C13.7936 7.49984 14.1667 7.12674 14.1667 6.6665C14.1667 6.20627 13.7936 5.83317 13.3333 5.83317C12.8731 5.83317 12.5 6.20627 12.5 6.6665C12.5 7.12674 12.8731 7.49984 13.3333 7.49984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.33333 6.6665C8.79357 6.6665 9.16667 6.29341 9.16667 5.83317C9.16667 5.37293 8.79357 4.99984 8.33333 4.99984C7.8731 4.99984 7.5 5.37293 7.5 5.83317C7.5 6.29341 7.8731 6.6665 8.33333 6.6665Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>
<select-input name="theme" class="mt-4"
@@ -81,21 +77,20 @@
label="Auto save form response"
help="Will save data in browser, if user not submit the form then next time will auto prefill last entered data"
/>
</collapse>
</editor-options-panel>
</template>
<script>
import Collapse from '../../../../common/Collapse.vue'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import ProTag from '../../../../common/ProTag.vue'
export default {
components: { Collapse, ProTag },
components: { EditorOptionsPanel, ProTag },
props: {
},
data () {
return {
isMounted: false,
isCollapseOpen: true
isMounted: false
}
},

35
resources/js/components/open/forms/components/form-components/FormInformation.vue
View File

@@ -1,13 +1,9 @@
<template>
<collapse v-model="isCollapseOpen" class="p-4 w-full border-b">
<template #title>
<h3 id="v-step-0" class="font-semibold text-lg">
<svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 13.3332V9.99984M10 6.6665H10.0083M18.3333 9.99984C18.3333 14.6022 14.6024 18.3332 10 18.3332C5.39763 18.3332 1.66667 14.6022 1.66667 9.99984C1.66667 5.39746 5.39763 1.6665 10 1.6665C14.6024 1.6665 18.3333 5.39746 18.3333 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Information
</h3>
<editor-options-panel name="Information" :already-opened="true">
<template #icon>
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 13.3332V9.99984M10 6.6665H10.0083M18.3333 9.99984C18.3333 14.6022 14.6024 18.3332 10 18.3332C5.39763 18.3332 1.66667 14.6022 1.66667 9.99984C1.66667 5.39746 5.39763 1.6665 10 1.6665C14.6024 1.6665 18.3333 5.39746 18.3333 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>
<text-input name="title" class="mt-4"
:form="form"
@@ -66,17 +62,17 @@
</div>
</div>
</modal>
</collapse>
</editor-options-panel>
</template>
<script>
import Collapse from '../../../../common/Collapse.vue'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import SelectInput from '../../../../forms/SelectInput.vue'
import { mapState } from 'vuex'
import clonedeep from 'clone-deep'
export default {
components: { SelectInput, Collapse },
components: { SelectInput, EditorOptionsPanel },
props: {},
data () {
return {
@@ -84,19 +80,18 @@ export default {
copyFormId: null,
visibilityOptions: [
{
name: 'Public',
value: 'public'
name: "Published",
value: "public"
},
{
name: "Draft (form won't be accessible)",
value: 'draft'
name: "Draft - not publicly accessible",
value: "draft"
},
{
name: 'Closed',
value: 'closed'
name: "Closed - won\'t accept new submissions",
value: "closed"
}
],
isCollapseOpen: true
]
}
},

74
resources/js/components/open/forms/components/form-components/FormIntegrations.vue
View File

@@ -1,74 +0,0 @@
<template>
<collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
<template #title>
<h3 class="font-semibold text-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2 transition-colors"
:class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/>
</svg>
Integrations
<pro-tag/>
</h3>
</template>
<text-input name="webhook_url" class="mt-4"
:form="form" help="We will post form submissions to this endpoint."
label="Webhook URL"
/>
<!-- <div>-->
<!-- <p>-->
<!-- <span class="text-uppercase font-semibold text-blue-500">NEW</span> - our Zapier integration is available for-->
<!-- beta testers!-->
<!-- </p>-->
<!-- <p class="w-full text-center mt-5">-->
<!-- <a :href="zapierUrl" target="_blank">-->
<!-- <v-button color="gray" shade="lighter">-->
<!-- <svg class="h-5 w-5 inline text-yellow-500" fill="currentColor" xmlns="http://www.w3.org/2000/svg"-->
<!-- viewBox="0 0 512 512"-->
<!-- >-->
<!-- <path-->
<!-- d="M318 256c0 19-4 36-10 52-16 7-34 10-52 10-19 0-36-3-52-9-7-17-10-34-10-53 0-18 3-36 10-52 16-6 33-10 52-10 18 0 36 4 52 10 6 16 10 34 10 52zm182-41H355l102-102c-8-11-17-22-26-32-10-9-21-18-32-26L297 157V12c-13-2-27-3-41-3s-28 1-41 3v145L113 55c-12 8-22 17-32 26-10 10-19 21-27 32l102 102H12s-3 27-3 41 1 28 3 41h144L54 399c16 23 36 43 59 59l102-102v144c13 2 27 3 41 3s28-1 41-3V356l102 102c11-8 22-17 32-27 9-10 18-20 26-32L355 297h145c2-13 3-27 3-41s-1-28-3-41z"-->
<!-- />-->
<!-- </svg>-->
<!-- Zapier Integration-->
<!-- </v-button>-->
<!-- </a>-->
<!-- </p>-->
<!-- </div>-->
</collapse>
</template>
<script>
import Collapse from '../../../../common/Collapse.vue'
import ProTag from '../../../../common/ProTag.vue'
export default {
components: {Collapse, ProTag},
props: {},
data() {
return {
isCollapseOpen: false
}
},
computed: {
form: {
get() {
return this.$store.state['open/working_form'].content
},
/* We add a setter */
set(value) {
this.$store.commit('open/working_form/set', value)
}
},
zapierUrl: () => window.config.links.zapier_integration
},
watch: {},
mounted() {},
}
</script>

44
resources/js/components/open/forms/components/form-components/FormNotifications.vue
View File

@@ -1,40 +1,49 @@
<template>
<collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
<template #title>
<h3 id="v-step-2" class="font-semibold text-lg">
<svg class="h-5 w-5 inline mr-2 transition-colors"
:class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6M22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6M22 6L12 13L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Notifications
<pro-tag />
</h3>
<editor-options-panel name="Notifications & Integrations" :already-opened="true" :has-pro-tag="true">
<template #icon>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6M22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6M22 6L12 13L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>
<form-notifications-option class="mt-2" />
<form-notifications-submission-confirmation />
<form-notifications-slack />
<form-notifications-discord />
<form-notifications-webhook />
<v-button color="white"
class="flex items-center mt-3 cursor-pointer relative w-full rounded-lg flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full py-2 px-4 bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100"
:href="zapierUrl" target="_blank"
>
<div class="flex-grow flex items-center">
<svg class="w-5 h-5 inline text-yellow-500" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M318 256c0 19-4 36-10 52-16 7-34 10-52 10-19 0-36-3-52-9-7-17-10-34-10-53 0-18 3-36 10-52 16-6 33-10 52-10 18 0 36 4 52 10 6 16 10 34 10 52zm182-41H355l102-102c-8-11-17-22-26-32-10-9-21-18-32-26L297 157V12c-13-2-27-3-41-3s-28 1-41 3v145L113 55c-12 8-22 17-32 26-10 10-19 21-27 32l102 102H12s-3 27-3 41 1 28 3 41h144L54 399c16 23 36 43 59 59l102-102v144c13 2 27 3 41 3s28-1 41-3V356l102 102c11-8 22-17 32-27 9-10 18-20 26-32L355 297h145c2-13 3-27 3-41s-1-28-3-41z"
/>
</svg>
<p class="flex-grow text-center font-normal">
Zapier Integration
</p>
</div>
</v-button>
</collapse>
</editor-options-panel>
</template>
<script>
import Collapse from '../../../../common/Collapse.vue'
import ProTag from '../../../../common/ProTag.vue'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import FormNotificationsOption from './components/FormNotificationsOption.vue'
import FormNotificationsSlack from './components/FormNotificationsSlack.vue'
import FormNotificationsDiscord from './components/FormNotificationsDiscord.vue'
import FormNotificationsSubmissionConfirmation from './components/FormNotificationsSubmissionConfirmation.vue'
import FormNotificationsWebhook from './components/FormNotificationsWebhook.vue'
export default {
components: { FormNotificationsSubmissionConfirmation, FormNotificationsSlack, FormNotificationsDiscord, FormNotificationsOption, Collapse, ProTag },
components: { FormNotificationsSubmissionConfirmation, FormNotificationsSlack, FormNotificationsDiscord, FormNotificationsOption, EditorOptionsPanel, FormNotificationsWebhook },
props: {
},
data () {
return {
isCollapseOpen: true
}
},
@@ -47,7 +56,8 @@ export default {
set (value) {
this.$store.commit('open/working_form/set', value)
}
}
},
zapierUrl: () => window.config.links.zapier_integration
},
watch: {

25
resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue
View File

@@ -1,13 +1,9 @@
<template>
<collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
<template #title>
<h3 id="v-step-2" class="font-semibold text-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2 transition-colors"
:class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg> Security & Privacy
</h3>
<editor-options-panel name="Security & Privacy" :already-opened="false">
<template #icon>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</template>
<toggle-switch-input name="can_be_indexed" :form="form" class="mt-4"
label="Indexable by Google"
@@ -17,23 +13,18 @@
label="Protect your form with a Captcha"
help="If enabled we will make sure respondant is a human"
/>
<text-input name="password" :form="form" class="mt-4"
label="Form Password" help="Leave empty to disable password"
/>
</collapse>
</editor-options-panel>
</template>
<script>
import Collapse from '../../../../common/Collapse.vue'
import ProTag from '../../../../common/ProTag.vue'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
export default {
components: { Collapse, ProTag },
components: { EditorOptionsPanel },
props: {
},
data () {
return {
isCollapseOpen: false
}
},
computed: {

23
resources/js/components/open/forms/components/form-components/FormStructure.vue
View File

@@ -1,30 +1,25 @@
<template>
<collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
<template #title>
<div class="flex">
<h3 id="v-step-1" class="font-semibold block text-lg">
<svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.8333 7.33333C14.7668 7.33333 15.2335 7.33333 15.59 7.15168C15.9036 6.99189 16.1586 6.73692 16.3183 6.42332C16.5 6.0668 16.5 5.60009 16.5 4.66667V4.16667C16.5 3.23325 16.5 2.76654 16.3183 2.41002C16.1586 2.09641 15.9036 1.84145 15.59 1.68166C15.2335 1.5 14.7668 1.5 13.8333 1.5L4.16667 1.5C3.23325 1.5 2.76654 1.5 2.41002 1.68166C2.09641 1.84144 1.84144 2.09641 1.68166 2.41002C1.5 2.76654 1.5 3.23325 1.5 4.16667L1.5 4.66667C1.5 5.60009 1.5 6.0668 1.68166 6.42332C1.84144 6.73692 2.09641 6.99189 2.41002 7.15168C2.76654 7.33333 3.23325 7.33333 4.16667 7.33333L13.8333 7.33333Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.8333 16.5C14.7668 16.5 15.2335 16.5 15.59 16.3183C15.9036 16.1586 16.1586 15.9036 16.3183 15.59C16.5 15.2335 16.5 14.7668 16.5 13.8333V13.3333C16.5 12.3999 16.5 11.9332 16.3183 11.5767C16.1586 11.2631 15.9036 11.0081 15.59 10.8483C15.2335 10.6667 14.7668 10.6667 13.8333 10.6667L4.16667 10.6667C3.23325 10.6667 2.76654 10.6667 2.41002 10.8483C2.09641 11.0081 1.84144 11.2631 1.68166 11.5767C1.5 11.9332 1.5 12.3999 1.5 13.3333L1.5 13.8333C1.5 14.7668 1.5 15.2335 1.68166 15.59C1.84144 15.9036 2.09641 16.1586 2.41002 16.3183C2.76654 16.5 3.23325 16.5 4.16667 16.5H13.8333Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</svg> Form Structure
</h3>
</div>
<editor-options-panel name="Form Structure" :already-opened="true">
<template #icon>
<svg class="h-5 w-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.8333 7.33333C14.7668 7.33333 15.2335 7.33333 15.59 7.15168C15.9036 6.99189 16.1586 6.73692 16.3183 6.42332C16.5 6.0668 16.5 5.60009 16.5 4.66667V4.16667C16.5 3.23325 16.5 2.76654 16.3183 2.41002C16.1586 2.09641 15.9036 1.84145 15.59 1.68166C15.2335 1.5 14.7668 1.5 13.8333 1.5L4.16667 1.5C3.23325 1.5 2.76654 1.5 2.41002 1.68166C2.09641 1.84144 1.84144 2.09641 1.68166 2.41002C1.5 2.76654 1.5 3.23325 1.5 4.16667L1.5 4.66667C1.5 5.60009 1.5 6.0668 1.68166 6.42332C1.84144 6.73692 2.09641 6.99189 2.41002 7.15168C2.76654 7.33333 3.23325 7.33333 4.16667 7.33333L13.8333 7.33333Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.8333 16.5C14.7668 16.5 15.2335 16.5 15.59 16.3183C15.9036 16.1586 16.1586 15.9036 16.3183 15.59C16.5 15.2335 16.5 14.7668 16.5 13.8333V13.3333C16.5 12.3999 16.5 11.9332 16.3183 11.5767C16.1586 11.2631 15.9036 11.0081 15.59 10.8483C15.2335 10.6667 14.7668 10.6667 13.8333 10.6667L4.16667 10.6667C3.23325 10.6667 2.76654 10.6667 2.41002 10.8483C2.09641 11.0081 1.84144 11.2631 1.68166 11.5767C1.5 11.9332 1.5 12.3999 1.5 13.3333L1.5 13.8333C1.5 14.7668 1.5 15.2335 1.68166 15.59C1.84144 15.9036 2.09641 16.1586 2.41002 16.3183C2.76654 16.5 3.23325 16.5 4.16667 16.5H13.8333Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>
<form-fields-editor class="mt-5" />
</collapse>
</editor-options-panel>
</template>
<script>
import Collapse from '../../../../common/Collapse.vue'
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import FormFieldsEditor from '../FormFieldsEditor.vue'
export default {
components: { Collapse, FormFieldsEditor },
components: { EditorOptionsPanel, FormFieldsEditor },
props: {
},
data () {
return {
isCollapseOpen: true
}
},

82
resources/js/components/open/forms/components/form-components/components/FormNotificationsWebhook.vue Normal file
View File

@@ -0,0 +1,82 @@
<template>
<div>
<button
class="flex items-center mt-3 cursor-pointer relative w-full rounded-lg flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full py-2 px-4 bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100"
@click.prevent="showModal=true"
>
<div class="flex-grow flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-5 h-5 inline"
>
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 01-.657.643 48.39 48.39 0 01-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 01-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 00-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 01-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 00.657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 005.427-.63 48.05 48.05 0 00.582-4.717.532.532 0 00-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 00.658-.663 48.422 48.422 0 00-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 01-.61-.58v0z"
/>
</svg>
<p class="flex-grow text-center">
Webhook Notifications
</p>
</div>
<div v-if="form.notifies_webhook">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-5 h-5 text-nt-blue"
>
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
</button>
<modal :show="showModal" @close="showModal=false">
<h2 class="text-2xl font-bold z-10 truncate mb-5 text-nt-blue">
Webhook Notifications
<pro-tag />
</h2>
<toggle-switch-input name="notifies_webhook" :form="form" class="mt-4"
label="Trigger a webhook notification on form submission"
@change="onToggleChange"
/>
<text-input v-if="form.notifies_webhook" name="webhook_url" :form="form" class="mt-4"
label="Webhook url" help="We will post form submissions to this endpoint"
/>
</modal>
</div>
</template>
<script>
import ProTag from '../../../../../common/ProTag.vue'
export default {
components: { ProTag },
props: {},
data () {
return {
showModal: false
}
},
computed: {
form: {
get () {
return this.$store.state['open/working_form'].content
},
/* We add a setter */
set (value) {
this.$store.commit('open/working_form/set', value)
}
}
},
watch: {},
mounted () {
},
methods: {
onToggleChange () {
if (!this.form.notifies_webhook) {
this.form.webhook_url = ''
}
}
}
}
</script>

205
resources/js/components/open/forms/fields/FormBlockOptionsModal.vue
View File

@@ -1,205 +0,0 @@
<template>
<modal :show="show" @close="close">
<div v-if="field">
<div class="flex">
<h2 class="text-2xl font-semibold z-10 truncate mb-5 text-gray-900 flex-grow">
Configure "<span class="truncate">{{ field.name }}</span>" block
</h2>
<div class="flex mr-6">
<div>
<v-button color="light-gray" 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">
<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" />
</svg>
Remove
</v-button>
</div>
<div class="ml-1">
<v-button size="small" 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">
<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" />
</svg>
Duplicate
</v-button>
</div>
</div>
</div>
<div class="-mx-4 sm:-mx-6 p-5 border-b border-t">
<div class="-mx-4 sm:-mx-6 px-5 pt-0">
<h3 class="font-semibold block text-lg">
General
</h3>
<p class="text-gray-400 mb-5 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"
>
Hidden
</v-checkbox>
<select-input name="width" class="mt-4"
: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-4"
:options="[
{name:'Left',value:'left'},
{name:'Center',value:'center'},
{name:'Right',value:'right'},
{name:'Justify',value:'justify'}
]"
:form="field" label="Field Alignment"
/>
</div>
</div>
<div v-if="field.type == 'nf-text'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
<rich-text-area-input name="content"
:form="field"
label="Content"
:required="false"
/>
</div>
<div v-else-if="field.type == 'nf-page-break'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
<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"
/>
</div>
<div v-else-if="field.type == 'nf-divider'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
<text-input name="name" class="mt-4"
:form="field" :required="true"
label="Field Name"
/>
</div>
<div v-else-if="field.type == 'nf-image'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
<text-input name="name" class="mt-4"
:form="field" :required="true"
label="Field Name"
/>
<image-input name="image_block" class="mt-4"
:form="field" label="Upload Image" :required="false"
/>
</div>
<div v-else-if="field.type == 'nf-code'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
<code-input name="content" class="mt-4 h-36" :form="field" label="Content"
help="You can add any html code, including iframes"
/>
</div>
<div v-else class="-mx-4 sm:-mx-6 p-5 border-b border-t">
<p>No settings found.</p>
</div>
<!-- Logic Block -->
<form-block-logic-editor v-model="form" :form="form" :field="field" />
<div class="pt-5 flex justify-end">
<v-button color="white" @click="close">
Close
</v-button>
</div>
</div>
<div v-else class="text-center p-10">
Field not found.
</div>
</modal>
</template>
<script>
import ProTag from '../../../common/ProTag.vue'
import CodeInput from '../../../forms/CodeInput.vue'
const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor.vue')
export default {
name: 'FormBlockOptionsModal',
components: { ProTag, FormBlockLogicEditor, CodeInput },
props: {
field: {
type: Object,
required: false
},
form: {
type: Object,
required: false
},
show: {
type: Boolean,
required: false
}
},
data () {
return {
editorToolbarCustom: [
['bold', 'italic', 'underline', 'link']
]
}
},
computed: {},
watch: {
'field.width': {
handler (val) {
if (val === undefined || val === null) {
this.field.width = 'full'
}
},
immediate: true
},
'field.align': {
handler (val) {
if (val === undefined || val === null) {
this.field.align = 'left'
}
},
immediate: true
}
},
mounted () {
},
methods: {
close () {
this.$emit('close')
},
removeBlock () {
this.close()
this.$emit('remove-block', this.field)
},
duplicateBlock () {
this.close()
this.$emit('duplicate-block', this.field)
},
onFieldHiddenChange (val) {
this.field.hidden = val
if (this.field.hidden) {
this.field.required = false
}
},
onFieldHelpPositionChange (val) {
if (!val) {
this.field.help_position = 'below_input'
}
}
}
}
</script>

584
resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
View File

@@ -1,584 +0,0 @@
<template>
<modal :show="show" @close="close">
<div v-if="field">
<div class="flex">
<h2 class="text-2xl font-semibold z-10 truncate mb-5 text-gray-900 flex-grow">
Configure "<span class="truncate">{{ field.name }}</span>" block
</h2>
<div class="flex flex-wrap justify-end mr-6">
<div>
<v-button color="light-gray" 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"
>
<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"
/>
</svg>
Remove
</v-button>
</div>
<div class="ml-1">
<v-button size="small" 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"
>
<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"
/>
</svg>
Duplicate
</v-button>
</div>
<change-field-type class="my-1" :field="field" @changeType="onChangeType" />
</div>
</div>
<!-- General -->
<div class="-mx-4 sm:-mx-6 p-5 border-b border-t">
<h3 class="font-semibold block text-lg">
General
</h3>
<p class="text-gray-400 mb-5 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"
>
Hidden
</v-checkbox>
<v-checkbox v-model="field.required" class="mb-3"
:name="field.id+'_required'"
@update:model-value="onFieldRequiredChange"
>
Required
</v-checkbox>
<v-checkbox v-model="field.disabled" class="mb-3"
:name="field.id+'_disabled'"
@update:model-value="onFieldDisabledChange"
>
Disabled
</v-checkbox>
</div>
<!-- Checkbox -->
<div v-if="field.type === 'checkbox'" class="-mx-4 sm:-mx-6 p-5 border-b">
<h3 class="font-semibold block text-lg">
Checkbox
</h3>
<p class="text-gray-400 mb-5 text-xs">
Advanced options for checkbox.
</p>
<v-checkbox v-model="field.use_toggle_switch" class="mt-4"
name="use_toggle_switch" help=""
>
Use toggle switch
</v-checkbox>
<p class="text-gray-400 mb-5 text-xs">
If enabled, checkbox will be replaced with a toggle switch
</p>
</div>
<!-- File Uploads -->
<div v-if="field.type === 'files'" class="-mx-4 sm:-mx-6 p-5 border-b">
<h3 class="font-semibold block text-lg">
File uploads
</h3>
<v-checkbox v-model="field.multiple" class="mt-4"
:name="field.id+'_multiple'"
>
Allow multiple files
</v-checkbox>
<text-input name="allowed_file_types" class="mt-4" :form="field"
label="Allowed file types" placeholder="jpg,jpeg,png,gif"
help="Comma separated values, leave blank to allow all file types"
/>
</div>
<!-- Number Options -->
<div v-if="field.type === 'number'" class="-mx-4 sm:-mx-6 p-5 border-b">
<h3 class="font-semibold block text-lg">
Number Options
</h3>
<v-checkbox v-model="field.is_rating" class="mt-4"
:name="field.id+'_is_rating'" @update:model-value="initRating"
>
Rating
</v-checkbox>
<p class="text-gray-400 mb-5 text-xs">
If enabled then this field will be star rating input.
</p>
<text-input v-if="field.is_rating" name="rating_max_value" native-type="number" :min="1" class="mt-4"
:form="field" required
label="Max rating value"
/>
</div>
<!-- Text Options -->
<div v-if="field.type === 'text' && displayBasedOnAdvanced" class="-mx-4 sm:-mx-6 p-5 border-b">
<h3 class="font-semibold block text-lg">
Text Options
</h3>
<p class="text-gray-400 mb-5 text-xs">
Keep it simple or make it a multi-lines input.
</p>
<v-checkbox v-model="field.multi_lines"
:name="field.id+'_multi_lines'"
@input="field.multi_lines = $event"
>
Multi-lines input
</v-checkbox>
</div>
<!-- Date Options -->
<div v-if="field.type === 'date'" class="-mx-4 sm:-mx-6 p-5 border-b">
<h3 class="font-semibold block text-lg">
Date Options
</h3>
<v-checkbox v-model="field.date_range" class="mt-4"
:name="field.id+'_date_range'"
@update:model-value="onFieldDateRangeChange"
>
Date Range
</v-checkbox>
<p class="text-gray-400 mb-5 text-xs">
Adds an end date. This cannot be used with the time option yet.
</p>
<v-checkbox v-model="field.with_time"
:name="field.id+'_with_time'"
@update:model-value="onFieldWithTimeChange"
>
Date with time
</v-checkbox>
<p class="text-gray-400 mb-5 text-xs">
Include time. Or not. This cannot be used with the date range option yet.
</p>
<select-input v-if="field.with_time" name="timezone" class="mt-4"
:form="field" :options="timezonesOptions"
label="Timezone" :searchable="true"
help="Make sure to select correct timezone. Leave blank otherwise."
/>
<v-checkbox v-model="field.prefill_today"
name="prefill_today"
@update:model-value="onFieldPrefillTodayChange"
>
Prefill with 'today'
</v-checkbox>
<p class="text-gray-400 mb-5 text-xs">
if enabled we will pre-fill this field with the current date
</p>
<v-checkbox v-model="field.disable_past_dates"
name="disable_past_dates" class="mb-3"
@update:model-value="onFieldDisablePastDatesChange"
>
Disable past dates
</v-checkbox>
<v-checkbox v-model="field.disable_future_dates"
name="disable_future_dates" class="mb-3"
@update:model-value="onFieldDisableFutureDatesChange"
>
Disable future dates
</v-checkbox>
</div>
<!-- select/multiselect Options -->
<div v-if="['select','multi_select'].includes(field.type)" class="-mx-4 sm:-mx-6 p-5 border-b">
<h3 class="font-semibold block text-lg">
Select Options
</h3>
<p class="text-gray-400 mb-5 text-xs">
Advanced options for your select/multiselect fields.
</p>
<text-area-input v-model="optionsText" :name="field.id+'_options_text'" class="mt-4"
label="Set selection options"
help="Add one option per line"
@input="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-4"
name="without_dropdown" help="" @update:model-value="onFieldWithoutDropdownChange"
>
Always show all select options
</v-checkbox>
<p class="text-gray-400 mb-5 text-xs">
Options won't be in a dropdown anymore, but will all be visible
</p>
</div>
<!-- Customization - Placeholder, Prefill, Relabel, Field Help -->
<div v-if="displayBasedOnAdvanced" class="-mx-4 sm:-mx-6 p-5 border-b">
<h3 class="font-semibold block text-lg">
Customization
</h3>
<p class="text-gray-400 mb-5 text-xs">
Change your form field name, pre-fill a value, add hints, etc.
</p>
<text-input name="name" class="mt-4"
:form="field" :required="true"
label="Field Name"
/>
<v-checkbox v-model="field.hide_field_name" class="mb-3"
:name="field.id+'_hide_field_name'"
>
Hide field name
</v-checkbox>
<!-- Pre-fill depends on type -->
<v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-4"
: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-4"
: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-4"
:form="field" :with-time="field.with_time===true"
:date-range="field.date_range===true"
label="Pre-filled value"
/>
<text-area-input v-else-if="field.type === 'text' && field.multi_lines"
name="prefill" class="mt-4"
:form="field"
label="Pre-filled value"
/>
<text-input v-else-if="field.type!=='files'" name="prefill" class="mt-4"
:form="field"
label="Pre-filled value"
:disabled="field.type==='date' && field.prefill_today===true"
/>
<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>
</small>
</div>
<!-- Placeholder -->
<text-input v-if="hasPlaceholder" name="placeholder" class="mt-4"
:form="field"
label="Empty Input Text (Placeholder)"
/>
<select-input name="width" class="mt-4"
: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-4"
:form="field"
:editor-toolbar="editorToolbarCustom"
label="Field Help"
help="Your field help will be shown below/above the field, just like this message."
:help-position="field.help_position"
/>
<select-input name="help_position" class="mt-4"
:options="[
{name:'Below input',value:'below_input'},
{name:'Above input',value:'above_input'},
]"
:form="field" label="Field Help Position"
@input="onFieldHelpPositionChange"
/>
<template v-if="['text','number','url','email','phone_number'].includes(field.type)">
<text-input v-model="field.max_char_limit" 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-4"
label="Always show character limit"
/>
</template>
</div>
<!-- Advanced Options -->
<div v-if="field.type === 'text'" class="-mx-4 sm:-mx-6 p-5 border-b">
<h3 class="font-semibold block text-lg">
Advanced Options
</h3>
<v-checkbox v-model="field.generates_uuid"
:name="field.id+'_generates_uuid'"
@update:model-value="onFieldGenUIdChange"
>
Generates a unique id on submission
</v-checkbox>
<p class="text-gray-400 mb-5 text-xs">
If you enable this, we will hide this field and fill it a unique id (UUID format) on each new form submission
</p>
<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 on submission
</v-checkbox>
<p class="text-gray-400 mb-5 text-xs">
If you enable this, we will hide this field and fill it a unique number on each new form submission
</p>
</div>
<!-- Logic Block -->
<form-block-logic-editor v-model="form" :form="form" :field="field" />
<div class="pt-5 flex justify-end">
<v-button color="white" @click="close">
Close
</v-button>
</div>
</div>
<div v-else class="text-center p-10">
Field not found.
</div>
</modal>
</template>
<script>
import timezones from '../../../../../data/timezones.json'
import ProTag from '../../../common/ProTag.vue'
import ChangeFieldType from './components/ChangeFieldType.vue'
const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor.vue')
export default {
name: 'FormFieldOptionsModal',
components: { ProTag, FormBlockLogicEditor, ChangeFieldType },
props: {
field: {
type: Object,
required: false
},
form: {
type: Object,
required: false
},
show: {
type: Boolean,
required: false
}
},
data () {
return {
typesWithoutPlaceholder: ['date', 'checkbox', 'files'],
editorToolbarCustom: [
['bold', 'italic', 'underline', 'link']
]
}
},
computed: {
hasPlaceholder () {
return !this.typesWithoutPlaceholder.includes(this.field.type)
},
prefillSelectsOptions () {
if (!['select', 'multi_select'].includes(this.field.type)) return {}
return this.field[this.field.type].options.map(option => {
return {
name: option.name,
value: option.id
}
})
},
timezonesOptions () {
if (this.field.type !== 'date') return []
return timezones.map((timezone) => {
return {
name: timezone.text,
value: timezone.utc[0]
}
})
},
displayBasedOnAdvanced () {
if (this.field.generates_uuid || this.field.generates_auto_increment_id) {
return false
}
return true
},
optionsText () {
return this.field[this.field.type].options.map(option => {
return option.name
}).join('\n')
}
},
watch: {
'field.width': {
handler (val) {
if (val === undefined || val === null) {
this.field.width = 'full'
}
},
immediate: true
}
},
created () {
if (this.field.width === undefined || this.field.width === null) {
this.field.width = 'full'
}
},
mounted () {
if (['text', 'number', 'url', 'email', 'phone_number'].includes(this.field.type) && !this.field.max_char_limit) {
this.field.max_char_limit = 2000
}
},
methods: {
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
},
close () {
this.$emit('close')
},
removeBlock () {
this.close()
this.$emit('remove-block', this.field)
},
duplicateBlock () {
this.close()
this.$emit('duplicate-block', this.field)
},
onFieldDisabledChange (val) {
this.field.disabled = val
if (this.field.disabled) {
this.field.hidden = false
}
},
onFieldRequiredChange (val) {
this.field.required = val
if (this.field.required) {
this.field.hidden = false
}
},
onFieldHiddenChange (val) {
this.field.hidden = val
if (this.field.hidden) {
this.field.required = false
this.field.disabled = false
} else {
this.field.generates_uuid = false
this.field.generates_auto_increment_id = false
}
},
onFieldDateRangeChange (val) {
this.field.date_range = val
if (this.field.date_range) {
this.field.with_time = false
this.field.prefill_today = false
}
},
onFieldWithTimeChange (val) {
this.field.with_time = val
if (this.field.with_time) {
this.field.date_range = false
}
},
onFieldGenUIdChange (val) {
this.field.generates_uuid = val
if (this.field.generates_uuid) {
this.field.generates_auto_increment_id = false
this.field.hidden = true
}
},
onFieldGenAutoIdChange (val) {
this.field.generates_auto_increment_id = val
if (this.field.generates_auto_increment_id) {
this.field.generates_uuid = false
this.field.hidden = true
}
},
initRating () {
if (this.field.is_rating && !this.field.rating_max_value) {
this.field.rating_max_value = 5
}
},
onFieldOptionsChange (val) {
const vals = (val) ? val.trim().split('\n') : []
const tmpOpts = vals.map(name => {
return {
name: name,
id: name
}
})
this.field[this.field.type] = { options: tmpOpts }
},
onFieldPrefillTodayChange (val) {
this.field.prefill_today = val
if (this.field.prefill_today) {
this.field.prefill = 'Pre-filled with current date'
this.field.date_range = false
this.field.disable_future_dates = false
this.field.disable_past_dates = false
} else {
this.field.prefill = null
}
},
onFieldAllowCreationChange (val) {
this.field.allow_creation = val
if (this.field.allow_creation) {
this.field.without_dropdown = false
}
},
onFieldWithoutDropdownChange (val) {
this.field.without_dropdown = val
if (this.field.without_dropdown) {
this.field.allow_creation = false
}
},
onFieldDisablePastDatesChange (val) {
this.field.disable_past_dates = val
if (this.field.disable_past_dates) {
this.field.disable_future_dates = false
this.field.prefill_today = false
}
},
onFieldDisableFutureDatesChange (val) {
this.field.disable_future_dates = val
if (this.field.disable_future_dates) {
this.field.disable_past_dates = false
this.field.prefill_today = false
}
},
onFieldHelpPositionChange (val) {
if (!val) {
this.field.help_position = 'below_input'
}
}
}
}
</script>

55
resources/js/components/open/forms/fields/components/FieldOptions.vue
View File

@@ -73,13 +73,36 @@
Rating
</v-checkbox>
<p class="text-gray-400 mb-3 text-xs">
If enabled then this field will be star rating input.
Transform this field into a star rating input.
</p>
<text-input v-if="field.is_rating" name="rating_max_value" native-type="number" :min="1" class="mt-3"
:form="field" required
label="Max rating value"
/>
<v-checkbox v-model="field.is_scale" class="mt-4"
:name="field.id+'_is_scale'" @input="initScale"
>
Scale
</v-checkbox>
<p class="text-gray-400 text-xs mb-5">
Transform this field into a scale/score input.
</p>
<template v-if="field.is_scale">
<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 step svalue"
/>
</template>
</div>
<!-- Text Options -->
@@ -267,7 +290,12 @@
:form="field"
label="Pre-filled value"
/>
<text-input v-else-if="field.type!=='files'" name="prefill" class="mt-3"
<file-input v-else-if="field.type==='files'" name="prefill" class="mt-4"
:form="field"
label="Pre-filled file"
:multiple="field.multiple===true" :moveToFormAssets="true"
/>
<text-input v-else-if="!['files', 'signature'].includes(field.type)" name="prefill" class="mt-3"
:form="field"
label="Pre-filled value"
/>
@@ -505,9 +533,26 @@ export default {
this.field.hidden = true
}
},
initRating () {
if (this.field.is_rating && !this.field.rating_max_value) {
this.field.rating_max_value = 5
initRating() {
if (this.field.is_rating) {
this.$set(this.field, 'is_scale', false)
if (!this.field.rating_max_value) {
this.$set(this.field, 'rating_max_value', 5)
}
}
},
initScale () {
if (this.field.is_scale) {
this.$set(this.field, 'is_rating', false)
if (!this.field.scale_min_value) {
this.$set(this.field, 'scale_min_value', 1)
}
if (!this.field.scale_max_value) {
this.$set(this.field, 'scale_max_value', 5)
}
if (!this.field.scale_step_value) {
this.$set(this.field, 'scale_step_value', 1)
}
}
},
onFieldOptionsChange (val) {