From 0c88c9842a5fac0c75df16de37d055c5ba305423 Mon Sep 17 00:00:00 2001 From: Favour Olayinka Date: Mon, 29 Jan 2024 12:57:40 +0100 Subject: [PATCH] Input Slider Feature (#292) * feat: input slider feature * Polish slider label --------- Co-authored-by: Julien Nahum --- client/components/forms/SliderInput.vue | 100 ++++++++++++++++++ .../components/open/forms/OpenFormField.vue | 7 ++ .../forms/fields/components/FieldOptions.vue | 43 +++++++- client/lib/forms/form-themes.js | 15 +++ 4 files changed, 164 insertions(+), 1 deletion(-) create mode 100644 client/components/forms/SliderInput.vue diff --git a/client/components/forms/SliderInput.vue b/client/components/forms/SliderInput.vue new file mode 100644 index 0000000..b43cb62 --- /dev/null +++ b/client/components/forms/SliderInput.vue @@ -0,0 +1,100 @@ + + + diff --git a/client/components/open/forms/OpenFormField.vue b/client/components/open/forms/OpenFormField.vue index 7377a97..e0a28ea 100644 --- a/client/components/open/forms/OpenFormField.vue +++ b/client/components/open/forms/OpenFormField.vue @@ -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) { diff --git a/client/components/open/forms/fields/components/FieldOptions.vue b/client/components/open/forms/fields/components/FieldOptions.vue index 932a235..0246666 100644 --- a/client/components/open/forms/fields/components/FieldOptions.vue +++ b/client/components/open/forms/fields/components/FieldOptions.vue @@ -100,7 +100,30 @@ /> + + + + Slider + +

+ Transform this field into a slider input. +

+ @@ -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 => { diff --git a/client/lib/forms/form-themes.js b/client/lib/forms/form-themes.js index 56c761e..ae23f36 100644 --- a/client/lib/forms/form-themes.js +++ b/client/lib/forms/form-themes.js @@ -32,6 +32,11 @@ export const themes = { unselectedButton: 'bg-white hover:bg-gray-50 border', help: 'text-gray-400 dark:text-gray-500' }, + SliderInput: { + label: 'text-gray-700 dark:text-gray-300 font-semibold', + stepLabel: 'text-gray-700 dark:text-gray-300 text-center text-xs', + help: 'text-gray-400 dark:text-gray-500' + }, fileInput: { input: 'min-h-40 border border-dashed border-gray-300 p-4 rounded-lg', inputHover: { @@ -71,6 +76,11 @@ export const themes = { unselectedButton: 'bg-white hover:bg-gray-50 border -mx-4', help: 'text-gray-400 dark:text-gray-500' }, + SliderInput: { + label: 'text-gray-700 dark:text-gray-300 font-semibold', + stepLabel: 'text-gray-700 dark:text-gray-300 text-center text-xs', + help: 'text-gray-400 dark:text-gray-500' + }, fileInput: { input: 'min-h-40 border border-dashed border-gray-300 p-4', inputHover: { @@ -110,6 +120,11 @@ export const themes = { unselectedButton: 'bg-notion-input-background dark:bg-notion-dark-light hover:bg-gray-50 border', help: 'text-notion-input-help dark:text-gray-500' }, + SliderInput: { + label: 'text-gray-700 dark:text-gray-300 font-semibold', + stepLabel: 'text-gray-700 dark:text-gray-300 text-center text-xs', + help: 'text-gray-400 dark:text-gray-500' + }, fileInput: { input: 'min-h-40 border border-dashed border-gray-300 p-4 rounded bg-notion-input-background', inputHover: {