village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor editor panels (#245) 

* Refactor editor panels

* EditorOptionsPanel icon fixes

* manage editor panel open/close

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
formsdev 2023-11-28 15:54:55 +05:30 committed by GitHub
parent d65c1be9b5
commit 730bdd1b1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 132 additions and 145 deletions
Show Stats 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>

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

@ -1,17 +1,11 @@
<template> <template>
<collapse class="p-4 w-full border-b" v-model="isCollapseOpen"> <editor-options-panel name="About Submissions" :already-opened="true">
<template #title> <template #icon>
<h3 class="font-semibold text-lg relative"> <svg class="h-5 w-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg <path
class="h-5 w-5 inline mr-2 -mt-0.5 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" 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"
viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
<path </svg>
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>
</template> </template>
<text-input name="submit_button_text" class="mt-4" <text-input name="submit_button_text" class="mt-4"
@ -130,21 +124,20 @@
:required="false" :required="false"
/> />
</template> </template>
</collapse> </editor-options-panel>
</template> </template>
<script> <script>
import Collapse from '../../../../common/Collapse.vue' import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import ProTag from '../../../../common/ProTag.vue' import ProTag from '../../../../common/ProTag.vue'
import VTransition from '../../../../common/transitions/VTransition.vue' import VTransition from '../../../../common/transitions/VTransition.vue'
export default { export default {
components: {Collapse, ProTag, VTransition}, components: {EditorOptionsPanel, ProTag, VTransition},
props: {}, props: {},
data() { data() {
return { return {
submissionOptions: {}, submissionOptions: {}
isCollapseOpen: true,
} }
}, },

28
resources/js/components/open/forms/components/form-components/FormAccess.vue
View File

@ -1,18 +1,12 @@
<template> <template>
<collapse class="p-4 w-full border-b" v-model="isCollapseOpen"> <editor-options-panel name="Form Access" :already-opened="false">
<template #title> <template #icon>
<h3 class="font-semibold text-lg"> <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">
<svg class="h-5 w-5 inline mr-2 transition-colors" <path stroke-linecap="round" stroke-linejoin="round"
:class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" 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"
> />
<path stroke-linecap="round" stroke-linejoin="round" </svg>
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>
Form Access
</h3>
</template> </template>
<pro-tag class="float-right" />
<text-input name="password" :form="form" class="mt-4" <text-input name="password" :form="form" class="mt-4"
label="Form Password" help="Leave empty to disable password" label="Form Password" help="Leave empty to disable password"
/> />
@ -40,19 +34,17 @@
help="This message will be shown when the form will have the maximum number of submissions" help="This message will be shown when the form will have the maximum number of submissions"
:required="false" :required="false"
/> />
</collapse> </editor-options-panel>
</template> </template>
<script> <script>
import Collapse from '../../../../common/Collapse.vue' import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import ProTag from '../../../../common/ProTag.vue'
export default { export default {
components: { Collapse, ProTag }, components: { EditorOptionsPanel },
props: {}, props: {},
data () { data () {
return { return {
isCollapseOpen: false
} }
}, },
computed: { computed: {

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

@ -1,15 +1,9 @@
<template> <template>
<collapse class="p-4 w-full border-b" v-model="isCollapseOpen"> <editor-options-panel name="Custom Code" :already-opened="false" :has-pro-tag="true">
<template #title> <template #icon>
<h3 class="font-semibold text-lg"> <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors" <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"/>
:class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> </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>
</template> </template>
<p class="mt-4"> <p class="mt-4">
The code will be injected in the <span class="font-semibold">head</span> section of your form page. 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)." your actual form page (save changes beforehand)."
label="Custom Code" label="Custom Code"
/> />
</collapse> </editor-options-panel>
</template> </template>
<script> <script>
import Collapse from '../../../../common/Collapse.vue' import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import ProTag from '../../../../common/ProTag.vue'
import CodeInput from '../../../../forms/CodeInput.vue' import CodeInput from '../../../../forms/CodeInput.vue'
export default { export default {
components: { Collapse, ProTag, CodeInput }, components: { EditorOptionsPanel, CodeInput },
props: { props: {
}, },
data () { data () {
return { return {
isCollapseOpen: false
} }
}, },

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

@ -1,18 +1,11 @@
<template> <template>
<collapse class="p-5 w-full border-b" v-model="isCollapseOpen"> <editor-options-panel name="Link Settings - SEO" :already-opened="false" :has-pro-tag="true">
<template #title> <template #icon>
<h3 id="v-step-2" class="font-semibold text-lg"> <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">
<svg 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"
class="h-5 w-5 inline -ml-1 mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" 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"
> />
<path stroke-linecap="round" stroke-linejoin="round" </svg>
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>
</template> </template>
<p class="mt-4 text-gray-500 text-sm"> <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). 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" <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" label="Page Thumbnail Image" help="Also know as og:image - 1200 X 630"
/> />
</collapse> </editor-options-panel>
</template> </template>
<script> <script>
import Collapse from '../../../../common/Collapse.vue' import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import ProTag from '../../../../common/ProTag.vue'
export default { export default {
components: { Collapse, ProTag }, components: { EditorOptionsPanel },
props: {}, props: {},
data () { data () {
return { return {
isCollapseOpen: false
} }
}, },
computed: { computed: {

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

@ -1,16 +1,12 @@
<template> <template>
<collapse class="p-4 w-full border-b" v-model="isCollapseOpen"> <editor-options-panel name="Customization" :already-opened="true">
<template #title> <template #icon>
<h3 class="font-semibold text-lg"> <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<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="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="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="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"/>
<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>
</svg>
Customization
</h3>
</template> </template>
<select-input name="theme" class="mt-4" <select-input name="theme" class="mt-4"
@ -81,21 +77,20 @@
label="Auto save form response" 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" 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> </template>
<script> <script>
import Collapse from '../../../../common/Collapse.vue' import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import ProTag from '../../../../common/ProTag.vue' import ProTag from '../../../../common/ProTag.vue'
export default { export default {
components: { Collapse, ProTag }, components: { EditorOptionsPanel, ProTag },
props: { props: {
}, },
data () { data () {
return { return {
isMounted: false, isMounted: false
isCollapseOpen: true
} }
}, },

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

@ -1,13 +1,9 @@
<template> <template>
<collapse class="p-4 w-full border-b" v-model="isCollapseOpen"> <editor-options-panel name="Information" :already-opened="true">
<template #title> <template #icon>
<h3 id="v-step-0" class="font-semibold text-lg"> <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
<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>
</svg>
Information
</h3>
</template> </template>
<text-input name="title" class="mt-4" <text-input name="title" class="mt-4"
:form="form" :form="form"
@ -66,17 +62,17 @@
</div> </div>
</div> </div>
</modal> </modal>
</collapse> </editor-options-panel>
</template> </template>
<script> <script>
import Collapse from '../../../../common/Collapse.vue' import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import SelectInput from '../../../../forms/SelectInput.vue' import SelectInput from '../../../../forms/SelectInput.vue'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import clonedeep from 'clone-deep' import clonedeep from 'clone-deep'
export default { export default {
components: { SelectInput, Collapse }, components: { SelectInput, EditorOptionsPanel },
props: {}, props: {},
data () { data () {
return { return {
@ -95,8 +91,7 @@ export default {
name: "Closed - won\'t accept new submissions", name: "Closed - won\'t accept new submissions",
value: "closed" value: "closed"
} }
], ]
isCollapseOpen: true
} }
}, },

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

@ -1,14 +1,9 @@
<template> <template>
<collapse class="p-4 w-full border-b" v-model="isCollapseOpen"> <editor-options-panel name="Notifications & Integrations" :already-opened="true" :has-pro-tag="true">
<template #title> <template #icon>
<h3 id="v-step-2" class="font-semibold text-lg"> <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg class="h-5 w-5 inline mr-2 transition-colors" <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"/>
:class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> </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 & Integrations
<pro-tag />
</h3>
</template> </template>
<form-notifications-option class="mt-2" /> <form-notifications-option class="mt-2" />
@ -32,12 +27,11 @@
</div> </div>
</v-button> </v-button>
</collapse> </editor-options-panel>
</template> </template>
<script> <script>
import Collapse from '../../../../common/Collapse.vue' import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import ProTag from '../../../../common/ProTag.vue'
import FormNotificationsOption from './components/FormNotificationsOption.vue' import FormNotificationsOption from './components/FormNotificationsOption.vue'
import FormNotificationsSlack from './components/FormNotificationsSlack.vue' import FormNotificationsSlack from './components/FormNotificationsSlack.vue'
import FormNotificationsDiscord from './components/FormNotificationsDiscord.vue' import FormNotificationsDiscord from './components/FormNotificationsDiscord.vue'
@ -45,12 +39,11 @@ import FormNotificationsSubmissionConfirmation from './components/FormNotificati
import FormNotificationsWebhook from './components/FormNotificationsWebhook.vue' import FormNotificationsWebhook from './components/FormNotificationsWebhook.vue'
export default { export default {
components: { FormNotificationsSubmissionConfirmation, FormNotificationsSlack, FormNotificationsDiscord, FormNotificationsOption, Collapse, ProTag, FormNotificationsWebhook }, components: { FormNotificationsSubmissionConfirmation, FormNotificationsSlack, FormNotificationsDiscord, FormNotificationsOption, EditorOptionsPanel, FormNotificationsWebhook },
props: { props: {
}, },
data () { data () {
return { return {
isCollapseOpen: true
} }
}, },

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

@ -1,13 +1,9 @@
<template> <template>
<collapse class="p-4 w-full border-b" v-model="isCollapseOpen"> <editor-options-panel name="Security & Privacy" :already-opened="false">
<template #title> <template #icon>
<h3 id="v-step-2" class="font-semibold text-lg"> <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">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2 transition-colors" <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" />
:class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" </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> Security & Privacy
</h3>
</template> </template>
<toggle-switch-input name="can_be_indexed" :form="form" class="mt-4" <toggle-switch-input name="can_be_indexed" :form="form" class="mt-4"
label="Indexable by Google" label="Indexable by Google"
@ -17,20 +13,18 @@
label="Protect your form with a Captcha" label="Protect your form with a Captcha"
help="If enabled we will make sure respondant is a human" help="If enabled we will make sure respondant is a human"
/> />
</collapse> </editor-options-panel>
</template> </template>
<script> <script>
import Collapse from '../../../../common/Collapse.vue' import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import ProTag from '../../../../common/ProTag.vue'
export default { export default {
components: { Collapse, ProTag }, components: { EditorOptionsPanel },
props: { props: {
}, },
data () { data () {
return { return {
isCollapseOpen: false
} }
}, },
computed: { computed: {

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

@ -1,30 +1,25 @@
<template> <template>
<collapse class="p-4 w-full border-b" v-model="isCollapseOpen"> <editor-options-panel name="Form Structure" :already-opened="true">
<template #title> <template #icon>
<div class="flex"> <svg class="h-5 w-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<h3 id="v-step-1" class="font-semibold block text-lg"> <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"/>
<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 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"/>
<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"/> </svg>
<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>
</template> </template>
<form-fields-editor class="mt-5" /> <form-fields-editor class="mt-5" />
</collapse> </editor-options-panel>
</template> </template>
<script> <script>
import Collapse from '../../../../common/Collapse.vue' import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
import FormFieldsEditor from '../FormFieldsEditor.vue' import FormFieldsEditor from '../FormFieldsEditor.vue'
export default { export default {
components: { Collapse, FormFieldsEditor }, components: { EditorOptionsPanel, FormFieldsEditor },
props: { props: {
}, },
data () { data () {
return { return {
isCollapseOpen: true
} }
}, },

1
tailwind.config.js vendored
View File

@ -74,6 +74,7 @@ module.exports = {
transitionProperty: { transitionProperty: {
height: 'height', height: 'height',
width: 'width', width: 'width',
maxWidth: 'max-width',
spacing: 'margin, padding' spacing: 'margin, padding'
} }
} }