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