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

Input Slider Feature (#292)

Browse Source 
* feat: input slider feature

* Polish slider label

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Favour Olayinka
2024-01-29 12:57:40 +01:00
committed by GitHub
parent 2ac5f56a93
commit 0c88c9842a
4 changed files with 164 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/components/open/forms/OpenFormField.vue
View File

@@ -141,6 +141,9 @@ export default {
if (field.type === 'number' && field.is_scale && field.scale_max_value) {
return 'ScaleInput'
}
if (field.type === 'number' && field.is_slider && field.slider_max_value) {
return 'SliderInput'
}
if (['select', 'multi_select'].includes(field.type) && field.without_dropdown) {
return 'FlatSelectInput'
}
@@ -308,6 +311,10 @@ export default {
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.is_slider) {
inputProperties.minSlider = parseInt(field.slider_min_value) ?? 0
inputProperties.maxSlider = parseInt(field.slider_max_value) ?? 50
inputProperties.stepSlider = parseInt(field.slider_step_value) ?? 5
} 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) {

43
client/components/open/forms/fields/components/FieldOptions.vue
View File

@@ -100,7 +100,30 @@
/>
<text-input name="scale_step_value" native-type="number" :min="1" class="mt-4"
:form="field" required
label="Scale step svalue"
label="Scale steps value"
/>
</template>
<v-checkbox v-model="field.is_slider" class="mt-4"
:name="field.id+'_is_slider'" @update:model-value="initSlider"
>
Slider
</v-checkbox>
<p class="text-gray-400 text-xs mb-5">
Transform this field into a slider input.
</p>
<template v-if="field.is_slider">
<text-input name="slider_min_value" native-type="number" class="mt-4"
:form="field" required
label="Min slider value"
/>
<text-input name="slider_max_value" native-type="number" :min="1" class="mt-4"
:form="field" required
label="Max slider value"
/>
<text-input name="slider_step_value" native-type="number" :min="1" class="mt-4"
:form="field" required
label="Slider steps value"
/>
</template>
</div>
@@ -535,6 +558,7 @@ export default {
initRating () {
if (this.field.is_rating) {
this.field.is_scale = false
this.field.is_slider = false
if (!this.field.rating_max_value) {
this.field.rating_max_value = 5
}
@@ -543,6 +567,7 @@ export default {
initScale () {
if (this.field.is_scale) {
this.field.is_rating = false
this.field.is_slider = false
if (!this.field.scale_min_value) {
this.field.scale_min_value = 1
}
@@ -554,6 +579,22 @@ export default {
}
}
},
initSlider () {
if (this.field.is_slider) {
this.field.is_rating = false
this.field.is_scale = false
if (!this.field.slider_min_value) {
this.field.slider_min_value = 0
}
if (!this.field.slider_max_value) {
this.field.slider_max_value = 50
}
if (!this.field.slider_step_value) {
this.field.slider_step_value = 1
}
}
},
onFieldOptionsChange (val) {
const vals = (val) ? val.trim().split('\n') : []
const tmpOpts = vals.map(name => {