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

Select field selection handling (#158)

This commit is contained in:
formsdev 2023-07-26 13:19:31 +05:30 committed by GitHub
parent b55c3e6164
commit e28d80e7da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/js/components/forms/components/VSelect.vue
View File

@ -122,7 +122,8 @@ export default {
data () {
return {
isOpen: false,
searchTerm: ''
searchTerm: '',
defaultValue: this.value ?? null
}
},
computed: {
@ -212,7 +213,7 @@ export default {
this.$emit('input', emitValue)
} else {
if (this.value === value) {
this.$emit('input', null)
this.$emit('input', this.defaultValue ?? null)
} else {
this.$emit('input', value)
}

4
resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
View File

@ -4,7 +4,7 @@
Logic
<pro-tag/>
</h3>
<p class="text-gray-400 mb-5">
<p class="text-gray-400 text-xs mb-5">
Add some logic to this block. Start by adding some conditions, and then add some actions.
</p>
<div class="relative flex">
@ -47,7 +47,7 @@
<h3 class="font-semibold block text-lg">
Copy logic from another field
</h3>
<p class="text-gray-400 mb-5">
<p class="text-gray-400 text-xs mb-5">
Select another field/block to copy its logic and apply it to "{{ field.name }}".
</p>
<select-input v-model="copyFrom" name="copy_from" emit-key="value"

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

@ -31,7 +31,7 @@
<h3 class="font-semibold block text-lg">
General
</h3>
<p class="text-gray-400 mb-5">
<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"
@ -153,7 +153,24 @@ export default {
computed: {},
watch: {},
watch: {
'field.width': {
handler (val) {
if (val === undefined || val === null) {
this.$set(this.field, 'width', 'full')
}
},
immediate: true
},
'field.align': {
handler (val) {
if (val === undefined || val === null) {
this.$set(this.field, 'align', 'left')
}
},
immediate: true
}
},
mounted() {

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

@ -38,7 +38,7 @@
<h3 class="font-semibold block text-lg">
General
</h3>
<p class="text-gray-400 mb-5">
<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"
@ -66,7 +66,7 @@
<h3 class="font-semibold block text-lg">
Checkbox
</h3>
<p class="text-gray-400 mb-5">
<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"
@ -74,7 +74,7 @@
>
Use toggle switch
</v-checkbox>
<p class="text-gray-400 mb-5">
<p class="text-gray-400 mb-5 text-xs">
If enabled, checkbox will be replaced with a toggle switch
</p>
</div>
@ -106,7 +106,7 @@
>
Rating
</v-checkbox>
<p class="text-gray-400 mb-5">
<p class="text-gray-400 mb-5 text-xs">
If enabled then this field will be star rating input.
</p>
@ -121,7 +121,7 @@
<h3 class="font-semibold block text-lg">
Text Options
</h3>
<p class="text-gray-400 mb-5">
<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"
@ -144,7 +144,7 @@
>
Date Range
</v-checkbox>
<p class="text-gray-400 mb-5">
<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"
@ -153,7 +153,7 @@
>
Date with time
</v-checkbox>
<p class="text-gray-400 mb-5">
<p class="text-gray-400 mb-5 text-xs">
Include time. Or not. This cannot be used with the date range option yet.
</p>
@ -168,7 +168,7 @@
>
Prefill with 'today'
</v-checkbox>
<p class="text-gray-400 mb-5">
<p class="text-gray-400 mb-5 text-xs">
if enabled we will pre-fill this field with the current date
</p>
@ -193,7 +193,7 @@
Select Options
<pro-tag/>
</h3>
<p class="text-gray-400 mb-5">
<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"
@ -211,7 +211,7 @@
>
Always show all select options
</v-checkbox>
<p class="text-gray-400 mb-5">Options won't be in a dropdown anymore, but will all be visible</p>
<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 -->
@ -221,7 +221,7 @@
<pro-tag/>
</h3>
<p class="text-gray-400 mb-5">
<p class="text-gray-400 mb-5 text-xs">
Change your form field name, pre-fill a value, add hints, etc.
</p>
@ -331,7 +331,7 @@
>
Generates a unique id on submission
</v-checkbox>
<p class="text-gray-400 mb-5">
<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>
@ -341,7 +341,7 @@
>
Generates an auto-incremented id on submission
</v-checkbox>
<p class="text-gray-400 mb-5">
<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>
@ -431,7 +431,22 @@ export default {
},
},
watch: {},
watch: {
'field.width': {
handler (val) {
if (val === undefined || val === null) {
this.$set(this.field, 'width', 'full')
}
},
immediate: true
}
},
created () {
if (this.field.width === undefined || this.field.width === null) {
this.$set(this.field, 'width', 'full')
}
},
mounted() {
if (['text', 'number', 'url', 'email', 'phone_number'].includes(this.field.type) && !this.field.max_char_limit) {