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

Field’s setting sidebar UI improvement (#378)

This commit is contained in:
Chirag Chhatrala 2024-04-17 20:04:26 +05:30 committed by GitHub
parent bcd45ce8a6
commit dbf5fd5bcc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 63 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
View File

@ -75,7 +75,7 @@
<h5 class="font-semibold mt-3">
2. Actions
</h5>
<select-input
<flat-select-input
:key="resetKey"
v-model="logic.actions"
name="actions"

12
client/components/open/forms/fields/components/BlockOptions.vue
View File

@ -8,14 +8,12 @@
<p class="text-gray-400 mb-3 text-xs">
Exclude this field or make it required.
</p>
<v-checkbox
v-model="field.hidden"
class="mb-3"
:name="field.id + '_hidden'"
<toggle-switch-input
:form="field"
name="hidden"
label="Hidden"
@update:model-value="onFieldHiddenChange"
>
Hidden
</v-checkbox>
/>
<select-input
name="width"
class="mt-3"

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

@ -42,17 +42,12 @@
<p class="text-gray-400 mb-3 text-xs">
Advanced options for checkbox.
</p>
<v-checkbox
v-model="field.use_toggle_switch"
class="mt-3"
<toggle-switch-input
:form="field"
name="use_toggle_switch"
help=""
>
Use toggle switch
</v-checkbox>
<p class="text-gray-400 mb-3 text-xs">
If enabled, checkbox will be replaced with a toggle switch
</p>
label="Use toggle switch"
help="If enabled, checkbox will be replaced with a toggle switch"
/>
</div>
<!-- File Uploads -->
@ -60,23 +55,19 @@
v-if="field.type === 'files'"
class="border-b py-2 px-4"
>
<h3 class="font-semibold block text-lg">
<h3 class="font-semibold block text-lg mb-3">
File uploads
</h3>
<v-checkbox
v-model="field.multiple"
class="mt-3"
:name="field.id + '_multiple'"
>
Allow multiple files
</v-checkbox>
<v-checkbox
v-model="field.camera_upload"
class="mt-3"
:name="field.id+'_camera_upload'"
>
Allow Camera uploads
</v-checkbox>
<toggle-switch-input
:form="field"
name="multiple"
label="Allow multiple files"
/>
<toggle-switch-input
:form="field"
name="camera_upload"
label="Allow Camera uploads"
/>
<text-input
name="allowed_file_types"
class="mt-3"
@ -207,14 +198,12 @@
<p class="text-gray-400 mb-3 text-xs">
Keep it simple or make it a multi-lines input.
</p>
<v-checkbox
v-model="field.multi_lines"
class="mb-2"
:name="field.id + '_multi_lines'"
<toggle-switch-input
:form="field"
name="multi_lines"
label="Multi-lines input"
@update:model-value="field.multi_lines = $event"
>
Multi-lines input
</v-checkbox>
/>
</div>
<!-- Date Options -->
@ -293,26 +282,19 @@
help="Add one option per line"
@update:model-value="onFieldOptionsChange"
/>
<v-checkbox
v-model="field.allow_creation"
<toggle-switch-input
:form="field"
name="allow_creation"
help=""
label="Allow respondent to create new options"
@update:model-value="onFieldAllowCreationChange"
>
Allow respondent to create new options
</v-checkbox>
<v-checkbox
v-model="field.without_dropdown"
class="mt-3"
/>
<toggle-switch-input
:form="field"
name="without_dropdown"
help=""
label="Always show all select options"
help="Options won't be in a dropdown anymore, but will all be visible"
@update:model-value="onFieldWithoutDropdownChange"
>
Always show all select options
</v-checkbox>
<p class="text-gray-400 mb-3 text-xs">
Options won't be in a dropdown anymore, but will all be visible
</p>
/>
</div>
<!-- Customization - Placeholder, Prefill, Relabel, Field Help -->
@ -336,22 +318,18 @@
label="Field Name"
/>
<v-checkbox
v-model="field.hide_field_name"
class="mt-3"
:name="field.id + '_hide_field_name'"
>
Hide field name
</v-checkbox>
<toggle-switch-input
:form="field"
name="hide_field_name"
label="Hide field name"
/>
<v-checkbox
<toggle-switch-input
v-if="field.type === 'phone_number'"
v-model="field.use_simple_text_input"
class="mt-3"
:name="field.id + '_use_simple_text_input'"
>
Use simple text input
</v-checkbox>
:form="field"
name="use_simple_text_input"
label="Use simple text input"
/>
<template v-if="field.type === 'phone_number' && !field.use_simple_text_input">
<select-input
v-model="field.unavailable_countries"
@ -414,15 +392,13 @@
</template>
<!-- Pre-fill depends on type -->
<v-checkbox
<toggle-switch-input
v-if="field.type == 'checkbox'"
v-model="field.prefill"
class="mt-3"
:name="field.id + '_prefill'"
:form="field"
name="prefill"
label="Pre-filled value"
@update:model-value="field.prefill = $event"
>
Pre-filled value
</v-checkbox>
/>
<select-input
v-else-if="['select', 'multi_select'].includes(field.type)"
name="prefill"
@ -559,29 +535,20 @@
<h3 class="font-semibold block text-lg mb-3">
Advanced Options
</h3>
<v-checkbox
v-model="field.generates_uuid"
:name="field.id + '_generates_uuid'"
<toggle-switch-input
:form="field"
name="generates_uuid"
label="Generates a unique id"
help="If you enable this, we will hide this field and fill it with a unique id (UUID format) on each new form submission"
@update:model-value="onFieldGenUIdChange"
>
Generates a unique id
</v-checkbox>
<p class="text-gray-400 mb-3 text-xs">
If you enable this, we will hide this field and fill it with 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'"
/>
<toggle-switch-input
:form="field"
name="generates_auto_increment_id"
label="Generates an auto-incremented id"
help="If you enable this, we will hide this field and fill it a unique incrementing number on each new form submission"
@update:model-value="onFieldGenAutoIdChange"
>
Generates an auto-incremented id
</v-checkbox>
<p class="text-gray-400 mb-3 text-xs">
If you enable this, we will hide this field and fill it a unique incrementing number on each new form submission
</p>
/>
</div>
<!-- Logic Block -->