didadmin/docuseal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

support checkbox option without name

Browse Source
This commit is contained in:
Pete Matsyburka
2024-01-06 15:05:15 +02:00
parent ab9cc52bcc
commit d35d8bead3
4 changed files with 57 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/submission_form/area.vue
+33 -13
View File
@@ -21,15 +21,20 @@
</span>
</div>
<div
v-if="isActive && withLabel && !area.option_uuid"
class="absolute -top-7 rounded bg-base-content text-base-100 px-2 text-sm whitespace-nowrap"
v-if="isActive && withLabel && (!area.option_uuid || !option.value)"
class="absolute -top-7 rounded bg-base-content text-base-100 px-2 text-sm whitespace-nowrap pointer-events-none"
>
{{ field.name || fieldNames[field.type] }}
<template v-if="field.type === 'checkbox' && !field.name">
{{ fieldIndex + 1 }}
<template v-if="area.option_uuid && !option.value">
{{ optionValue(option) }}
</template>
<template v-else-if="!field.required && field.type !== 'checkbox'">
(optional)
<template v-else>
{{ field.name || fieldNames[field.type] }}
<template v-if="field.type === 'checkbox' && !field.name">
{{ fieldIndex + 1 }}
</template>
<template v-else-if="!field.required && field.type !== 'checkbox'">
(optional)
</template>
</template>
</div>
<div
@@ -102,11 +107,11 @@
:value="false"
class="aspect-square base-radio"
:class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
:checked="!!modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
@click="$emit('update:model-value', field.options.find((o) => o.uuid === area.option_uuid)?.value)"
:checked="!!modelValue && modelValue === optionValue(option)"
@click="$emit('update:model-value', optionValue(option))"
>
<IconCheck
v-else-if="!!modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
v-else-if="!!modelValue && modelValue === optionValue(option)"
class="aspect-square"
:class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
/>
@@ -121,11 +126,11 @@
:value="false"
class="aspect-square base-checkbox"
:class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
:checked="!!modelValue && modelValue.includes(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
@change="updateMultipleSelectValue(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
:checked="!!modelValue && modelValue.includes(optionValue(option))"
@change="updateMultipleSelectValue(optionValue(option))"
>
<IconCheck
v-else-if="!!modelValue && modelValue.includes(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
v-else-if="!!modelValue && modelValue.includes(optionValue(option))"
class="aspect-square"
:class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
/>
@@ -171,6 +176,7 @@ export default {
IconPaperclip,
IconCheck
},
inject: ['t'],
props: {
field: {
type: Object,
@@ -241,6 +247,9 @@ export default {
payment: 'Payment'
}
},
option () {
return this.field.options.find((o) => o.uuid === this.area.option_uuid)
},
fieldIcons () {
return {
text: IconTextSize,
@@ -335,6 +344,17 @@ export default {
}
},
methods: {
optionValue (option) {
if (option) {
if (option.value) {
return option.value
} else {
const index = this.field.options.indexOf(option)
return `${this.t('option')} ${index + 1}`
}
}
},
formatDate (date, format) {
const monthFormats = {
M: 'numeric',
app/javascript/submission_form/form.vue
+3 -3
View File
@@ -122,7 +122,7 @@
<div class="flex w-full">
<div class="space-y-3.5 mx-auto">
<div
v-for="option in currentField.options"
v-for="(option, index) in currentField.options"
:key="option.uuid"
>
<label
@@ -135,11 +135,11 @@
type="radio"
class="base-radio !h-7 !w-7"
:name="`values[${currentField.uuid}]`"
:value="option.value"
:value="option.value || `${t('option')} ${index + 1}`"
:required="currentField.required"
>
<span class="text-xl">
{{ option.value }}
{{ option.value || `${t('option')} ${index + 1}` }}
</span>
</label>
</div>
app/javascript/submission_form/i18n.js
+1
View File
@@ -2,6 +2,7 @@ const en = {
submit_form: 'Submit Form',
type_here: 'Type here',
optional: 'optional',
option: 'Option',
select_your_option: 'Select your option',
complete_hightlighted_checkboxes_and_click: 'Complete hightlighted checkboxes and click',
submit: 'submit',
app/javascript/submission_form/multi_select_step.vue
+20 -5
View File
@@ -5,9 +5,16 @@
class="label text-2xl mb-2"
>{{ field.name }}</label>
<div class="flex w-full">
<input
v-if="modelValue.length === 0"
type="text"
:name="`values[${field.uuid}][]`"
:value="''"
class="hidden"
>
<div class="space-y-3.5 mx-auto">
<div
v-for="option in field.options"
v-for="(option, index) in field.options"
:key="option.uuid"
>
<label
@@ -19,13 +26,13 @@
:ref="setInputRef"
type="checkbox"
:name="`values[${field.uuid}][]`"
:value="option.value"
:value="optionValue(option, index)"
class="base-checkbox !h-7 !w-7"
:checked="(modelValue || []).includes(option.value)"
:checked="(modelValue || []).includes(optionValue(option, index))"
@change="onChange"
>
<span class="text-xl">
{{ option.value }}
{{ optionValue(option, index) }}
</span>
</label>
</div>
@@ -36,6 +43,7 @@
<script>
export default {
name: 'MultiSelectStep',
inject: ['t'],
props: {
field: {
type: Object,
@@ -62,8 +70,15 @@ export default {
this.inputRefs.push(el)
}
},
optionValue (option, index) {
if (option.value) {
return option.value
} else {
return `${this.t('option')} ${index + 1}`
}
},
onChange () {
this.$emit('update:model-value', this.inputRefs.filter(e => e.checked).map(e => e.value))
this.$emit('update:model-value', this.inputRefs.filter(e => e.checked).map((e, index) => this.optionValue(e, index)))
}
}
}