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

add ui classes

Browse Source
This commit is contained in:
Alex Turchyn
2025-03-18 17:34:11 +02:00
committed by GitHub
parent 3ae98bf03e
commit 64d3360e82
30 changed files with 124 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/submission_form/form.vue
+14 -14
View File
@@ -67,7 +67,7 @@
<button
v-if="!isFormVisible"
id="expand_form_button"
class="btn btn-neutral flex text-white absolute bottom-0 w-full mb-3"
class="btn btn-neutral flex text-white absolute bottom-0 w-full mb-3 expand-form-button"
style="width: 96%; margin-left: 2%"
@click.prevent="[isFormVisible = true, scrollIntoField(currentField)]"
>
@@ -93,14 +93,14 @@
<div
v-show="isFormVisible"
id="form_container"
class="shadow-md bg-base-100 absolute bottom-0 w-full border-base-200 border p-4 rounded"
class="shadow-md bg-base-100 absolute bottom-0 w-full border-base-200 border p-4 rounded form-container"
:class="{ 'md:bottom-4': isBreakpointMd }"
:style="{ backgroundColor: backgroundColor }"
>
<button
v-if="!isCompleted"
id="minimize_form_button"
class="absolute right-0 top-0"
class="absolute right-0 top-0 minimize-form-button"
:class="currentField?.description?.length > 100 ? 'mr-1 mt-1 md:mr-2 md:mt-2': 'mr-2 mt-2 hidden md:block'"
:title="t('minimize')"
@click.prevent="minimizeForm"
@@ -119,7 +119,7 @@
ref="form"
:action="submitPath"
method="post"
class="mx-auto"
class="mx-auto steps-form"
:style="{ maxWidth: isBreakpointMd ? '582px' : '' }"
@submit.prevent="submitStep"
>
@@ -165,7 +165,7 @@
v-if="showFieldNames && (currentField.name || currentField.title)"
:for="currentField.uuid"
dir="auto"
class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
:class="{ 'mb-2': !currentField.description }"
>
<MarkdownContent
@@ -188,7 +188,7 @@
<div
v-if="currentField.description"
dir="auto"
class="mb-3 px-1"
class="mb-3 px-1 field-description-text"
>
<MarkdownContent :string="currentField.description" />
</div>
@@ -226,7 +226,7 @@
v-if="showFieldNames && (currentField.name || currentField.title)"
:for="currentField.uuid"
dir="auto"
class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
:class="{ 'mb-2': !currentField.description }"
>
<MarkdownContent
@@ -245,7 +245,7 @@
<div
v-if="currentField.description"
dir="auto"
class="mb-3 px-1"
class="mb-3 px-1 field-description-text"
>
<MarkdownContent :string="currentField.description" />
</div>
@@ -270,7 +270,7 @@
>
<label
:for="option.uuid"
class="flex items-center space-x-3"
class="flex items-center space-x-3 radio-label"
>
<input
:id="option.uuid"
@@ -304,7 +304,7 @@
<div
v-if="currentField.description"
dir="auto"
class="mb-3 px-1"
class="mb-3 px-1 field-description-text"
>
<MarkdownContent :string="currentField.description" />
</div>
@@ -338,7 +338,7 @@
>
<label
:for="field.uuid"
class="flex items-center space-x-3"
class="flex items-center space-x-3 checkbox-label"
>
<input
type="hidden"
@@ -481,7 +481,7 @@
id="submit_form_button"
ref="submitButton"
type="submit"
class="base-button w-full flex justify-center"
class="base-button w-full flex justify-center submit-form-button"
:disabled="isButtonDisabled"
>
<span class="flex">
@@ -533,13 +533,13 @@
v-if="stepFields.length < 80"
class="flex justify-center mt-3 sm:mt-4 mb-0 sm:mb-1"
>
<div class="flex items-center flex-wrap">
<div class="flex items-center flex-wrap steps-progress">
<a
v-for="(step, index) in stepFields"
:key="step[0].uuid"
href="#"
class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1"
:class="{ 'bg-base-300': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }"
:class="{ 'bg-base-300 steps-progress-current': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }"
@click.prevent="isCompleted ? '' : [saveStep(), goToStep(index, true)]"
/>
</div>