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/area.vue
+2 -2
View File
@@ -1,9 +1,9 @@
<template>
<div
class="field-area flex absolute lg:text-base -outline-offset-1"
class="flex absolute lg:text-base -outline-offset-1 field-area"
dir="auto"
:style="computedStyle"
:class="{ 'text-[1.6vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'field-area-active outline-red-500 outline-dashed outline-2 z-10': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
:class="{ 'text-[1.6vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'outline-red-500 outline-dashed outline-2 z-10 field-area-active': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
>
<div
v-if="(!withFieldPlaceholder || !field.name || field.type === 'cells') && !isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
app/javascript/submission_form/attachment_step.vue
+6 -3
View File
@@ -13,7 +13,7 @@
>
<a
v-if="val"
class="flex items-center space-x-1.5 w-full"
class="flex items-center space-x-1.5 w-full attachment-file-name"
:href="attachmentsIndex[val].url"
target="_blank"
>
@@ -26,7 +26,10 @@
{{ attachmentsIndex[val].filename }}
</span>
</a>
<button @click.prevent="removeAttachment(val)">
<button
class="remove-attachment-button"
@click.prevent="removeAttachment(val)"
>
<IconTrashX
:width="18"
:heigh="19"
@@ -44,7 +47,7 @@
<div
v-if="field.description && !modelValue.length"
dir="auto"
class="mb-3 px-1"
class="mb-3 px-1 field-description-text"
>
<MarkdownContent :string="field.description" />
</div>
app/javascript/submission_form/completed.vue
+6 -6
View File
@@ -1,7 +1,7 @@
<template>
<div
id="form_completed"
class="mx-auto max-w-md flex flex-col"
class="mx-auto max-w-md flex flex-col completed-form"
dir="auto"
>
<div class="font-medium text-2xl flex items-center space-x-1.5 mx-auto">
@@ -10,13 +10,13 @@
:width="30"
:height="30"
/>
<span>
<span class="completed-form-message-title">
{{ completedMessage.title || (hasSignatureFields ? (hasMultipleDocuments ? t('documents_have_been_signed') : t('document_has_been_signed')) : t('form_has_been_completed')) }}
</span>
</div>
<div
v-if="completedMessage.body"
class="mt-2"
class="mt-2 completed-form-message-body"
>
<MarkdownContent
:string="completedMessage.body"
@@ -27,7 +27,7 @@
v-if="completedButton.url"
:href="sanitizeHref(completedButton.url)"
rel="noopener noreferrer nofollow"
class="white-button flex items-center w-full"
class="white-button flex items-center w-full completed-form-completed-button"
>
<span>
{{ completedButton.title || 'Back to Website' }}
@@ -35,7 +35,7 @@
</a>
<button
v-if="canSendEmail && !isDemo && withSendCopyButton"
class="white-button !h-auto flex items-center space-x-1 w-full"
class="white-button !h-auto flex items-center space-x-1 w-full completed-form-send-copy-button"
:disabled="isSendingCopy"
@click.prevent="sendCopyToEmail"
>
@@ -50,7 +50,7 @@
</button>
<button
v-if="!isWebView && withDownloadButton"
class="base-button flex items-center space-x-1 w-full"
class="base-button flex items-center space-x-1 w-full completed-form-download-button"
:disabled="isDownloading"
@click.prevent="download"
>
app/javascript/submission_form/date_step.vue
+3 -3
View File
@@ -7,7 +7,7 @@
<label
v-if="showFieldNames"
:for="field.uuid"
class="label text-xl sm:text-2xl py-0"
class="label text-xl sm:text-2xl py-0 field-name-label"
>
<MarkdownContent
v-if="field.title"
@@ -26,7 +26,7 @@
</template>
</label>
<button
class="btn btn-outline btn-sm !normal-case font-normal"
class="btn btn-outline btn-sm !normal-case font-normal set-current-date-button"
@click.prevent="[setCurrentDate(), $emit('focus')]"
>
<IconCalendarCheck :width="16" />
@@ -35,7 +35,7 @@
</div>
<div
v-if="field.description"
class="mb-3 px-1"
class="mb-3 px-1 field-description-text"
dir="auto"
>
<MarkdownContent :string="field.description" />
app/javascript/submission_form/dropzone.vue
+1 -1
View File
@@ -7,7 +7,7 @@
>
<label
:for="inputId"
class="w-full relative bg-base-300 hover:bg-base-200 rounded-md border border-base-content border-dashed"
class="w-full relative bg-base-300 hover:bg-base-200 rounded-md border border-base-content border-dashed file-dropzone"
:class="{ 'opacity-50': isLoading }"
>
<div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
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>
app/javascript/submission_form/image_step.vue
+4 -4
View File
@@ -4,7 +4,7 @@
<label
v-if="showFieldNames"
:for="field.uuid"
class="label text-xl sm:text-2xl py-0"
class="label text-xl sm:text-2xl py-0 field-name-label"
>
<MarkdownContent
v-if="field.title"
@@ -15,7 +15,7 @@
</template>
</label>
<button
class="btn btn-outline btn-sm"
class="btn btn-outline btn-sm reupload-button"
@click.prevent="remove"
>
<IconReload :width="16" />
@@ -25,7 +25,7 @@
<div>
<img
:src="attachmentsIndex[modelValue].url"
class="h-52 border border-base-300 rounded mx-auto"
class="h-52 border border-base-300 rounded mx-auto uploaded-image-preview"
>
</div>
<input
@@ -40,7 +40,7 @@
<div
v-if="field.description"
dir="auto"
class="mb-3 px-1"
class="mb-3 px-1 field-description-text"
>
<MarkdownContent :string="field.description" />
</div>
app/javascript/submission_form/initials_step.vue
+8 -10
View File
@@ -6,7 +6,7 @@
>
<label
v-if="showFieldNames"
class="label text-xl sm:text-2xl py-0"
class="label text-xl sm:text-2xl py-0 field-name-label"
>
<MarkdownContent
v-if="field.title"
@@ -25,7 +25,7 @@
<a
id="type_text_button"
href="#"
class="btn btn-outline font-medium btn-sm"
class="btn btn-outline font-medium btn-sm type_text_button type-text-button"
@click.prevent="toggleTextInput"
>
<IconTextSize :width="16" />
@@ -42,7 +42,7 @@
<a
id="type_text_button"
href="#"
class="btn btn-outline font-medium btn-sm"
class="btn btn-outline font-medium btn-sm type-text-button"
@click.prevent="toggleTextInput"
>
<IconSignature :width="16" />
@@ -55,9 +55,7 @@
class="tooltip"
:data-tip="t('click_to_upload')"
>
<label
class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
>
<label class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button">
<IconUpload :width="16" />
<input
:key="uploadImageInputKey"
@@ -74,7 +72,7 @@
<a
v-if="modelValue || computedPreviousValue"
href="#"
class="btn font-medium btn-outline btn-sm"
class="btn font-medium btn-outline btn-sm clear-canvas-button"
@click.prevent="remove"
>
<IconReload :width="16" />
@@ -83,7 +81,7 @@
<a
v-else
href="#"
class="btn font-medium btn-outline btn-sm"
class="btn font-medium btn-outline btn-sm clear-canvas-button"
@click.prevent="clear"
>
<IconReload :width="16" />
@@ -105,7 +103,7 @@
<div
v-if="field.description"
dir="auto"
class="mb-3 px-1"
class="mb-3 px-1 field-description-text"
>
<MarkdownContent :string="field.description" />
</div>
@@ -123,7 +121,7 @@
<canvas
v-show="!modelValue && !computedPreviousValue"
ref="canvas"
class="bg-white border border-base-300 rounded-2xl w-full"
class="bg-white border border-base-300 rounded-2xl w-full draw-canvas"
/>
<input
v-if="!isDrawInitials && !modelValue && !computedPreviousValue"
app/javascript/submission_form/multi_select_step.vue
+3 -3
View File
@@ -3,7 +3,7 @@
v-if="showFieldNames && (field.name || field.title)"
:for="field.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': !field.description }"
>
<MarkdownContent
@@ -20,7 +20,7 @@
<div
v-if="field.description"
dir="auto"
class="mb-3 px-1"
class="mb-3 px-1 field-description-text"
>
<MarkdownContent :string="field.description" />
</div>
@@ -50,7 +50,7 @@
>
<label
:for="option.uuid"
class="flex items-center space-x-3"
class="flex items-center space-x-3 checkbox-label"
@click="scrollIntoField(field)"
>
<input
app/javascript/submission_form/number_step.vue
+2 -2
View File
@@ -3,7 +3,7 @@
v-if="showFieldNames && (field.name || field.title)"
:for="field.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': !field.description }"
>
<MarkdownContent
@@ -24,7 +24,7 @@
<div
v-if="field.description"
dir="auto"
class="mb-3 px-1"
class="mb-3 px-1 field-description-text"
>
<MarkdownContent :string="field.description" />
</div>
app/javascript/submission_form/payment_step.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<label
v-if="!modelValue && !sessionId"
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"
>
<MarkdownContent
v-if="field.title"
@@ -34,7 +34,7 @@
<button
v-if="sessionId"
disabled
class="base-button w-full"
class="base-button w-full modal-save-button"
>
<IconLoader
width="22"
app/javascript/submission_form/phone_step.vue
+6 -6
View File
@@ -3,7 +3,7 @@
<label
v-if="showFieldNames"
:for="isCodeSent ? 'one_time_code' : field.uuid"
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': !field.description }"
>
<MarkdownContent
@@ -17,7 +17,7 @@
<div
v-if="field.description"
dir="auto"
class="mb-3 px-1"
class="mb-3 px-1 field-description-text"
>
<MarkdownContent :string="field.description" />
</div>
@@ -45,7 +45,7 @@
<a
v-if="!defaultValue"
href="#"
class="link"
class="link change-phone-number-link"
@click.prevent="isCodeSent = false"
>
{{ t('change_phone_number') }}
@@ -59,7 +59,7 @@
<a
v-else
href="#"
class="link"
class="link resend-code-link"
@click.prevent="resendCode"
>
{{ isResendLoading ? t('sending') : t('resend_code') }}
@@ -68,13 +68,13 @@
</div>
<div
v-show="!isCodeSent"
class="flex w-full rounded-full outline-neutral-content outline-2 outline-offset-2 focus-within:outline"
class="flex w-full rounded-full outline-neutral-content outline-2 outline-offset-2 focus-within:outline phone-number-input-container"
>
<div
id="country_code"
class="relative inline-block"
>
<div class="btn bg-base-200 border border-neutral-300 text-2xl whitespace-nowrap font-normal rounded-l-full">
<div class="btn bg-base-200 border border-neutral-300 text-2xl whitespace-nowrap font-normal rounded-l-full country-code-select-label">
{{ selectedCountry.flag }} +{{ selectedCountry.dial }}
</div>
<select
app/javascript/submission_form/signature_step.vue
+7 -9
View File
@@ -9,7 +9,7 @@
>
<label
v-if="showFieldNames"
class="label text-xl sm:text-2xl py-0"
class="label text-xl sm:text-2xl py-0 field-name-label"
>
<MarkdownContent
v-if="field.title"
@@ -28,7 +28,7 @@
<a
id="type_text_button"
href="#"
class="btn btn-outline btn-sm font-medium"
class="btn btn-outline btn-sm font-medium type-text-button"
@click.prevent="[toggleTextInput(), hideQr()]"
>
<IconSignature :width="16" />
@@ -46,7 +46,7 @@
<a
id="type_text_button"
href="#"
class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap type-text-button"
@click.prevent="[toggleTextInput(), hideQr()]"
>
<IconTextSize :width="16" />
@@ -61,9 +61,7 @@
:class="{ 'hidden sm:inline': modelValue || computedPreviousValue }"
:data-tip="t('take_photo')"
>
<label
class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
>
<label class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button">
<IconCamera :width="16" />
<input
:key="uploadImageInputKey"
@@ -80,7 +78,7 @@
<a
v-if="modelValue || computedPreviousValue"
href="#"
class="btn btn-outline btn-sm font-medium"
class="btn btn-outline btn-sm font-medium reupload-button"
@click.prevent="remove"
>
<IconReload :width="16" />
@@ -119,7 +117,7 @@
<div
v-if="field.description"
dir="auto"
class="mb-3 px-1"
class="mb-3 px-1 field-description-text"
>
<MarkdownContent :string="field.description" />
</div>
@@ -167,7 +165,7 @@
v-show="!modelValue && !computedPreviousValue"
ref="canvas"
style="padding: 1px; 0"
class="bg-white border border-base-300 rounded-2xl w-full"
class="bg-white border border-base-300 rounded-2xl w-full draw-canvas"
/>
<div
v-if="isShowQr"
app/javascript/submission_form/text_step.vue
+3 -3
View File
@@ -3,7 +3,7 @@
v-if="showFieldNames && (field.name || field.title)"
:for="field.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': !field.description }"
>
<MarkdownContent
@@ -24,7 +24,7 @@
<div
v-if="field.description"
dir="auto"
class="mb-3 px-1"
class="mb-3 px-1 field-description-text"
>
<MarkdownContent :string="field.description" />
</div>
@@ -67,7 +67,7 @@
>
<a
href="#"
class="btn btn-ghost btn-circle btn-sm"
class="btn btn-ghost btn-circle btn-sm toggle-multiline-text-button"
@click.prevent="toggleTextArea"
>
<IconAlignBoxLeftTop />
app/javascript/submission_form/verification_step.vue
+3 -5
View File
@@ -1,7 +1,5 @@
<template>
<label
class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
>
<label class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label">
<MarkdownContent
v-if="field.title"
:string="field.title"
@@ -11,13 +9,13 @@
<div
v-if="field.description"
dir="auto"
class="mb-4 px-1"
class="mb-4 px-1 field-description-text"
>
<MarkdownContent :string="field.description" />
</div>
<div
v-if="emptyValueRequiredStep && emptyValueRequiredStep[0] !== field"
class="px-1"
class="px-1 field-description-text"
>
{{ t('complete_all_required_fields_to_proceed_with_identity_verification') }}
</div>