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

add field settings classes

Browse Source
This commit is contained in:
Pete Matsyburka
2026-02-25 10:15:41 +02:00
parent db3b80c96c
commit 5a31df40d8
3 changed files with 74 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/template_builder/field_context_menu.vue
+23 -17
View File
@@ -11,7 +11,7 @@
>
<label
v-if="showRequired"
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
class="field-settings-required w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
@click.stop
>
<input
@@ -26,7 +26,7 @@
</label>
<label
v-if="showReadOnly"
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
class="field-settings-read-only w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
@click.stop
>
<input
@@ -41,7 +41,7 @@
</label>
<label
v-if="showPrefillable"
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
class="field-settings-prefillable w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
@click.stop
>
<input
@@ -56,7 +56,7 @@
</label>
<label
v-if="showSetSigningDate"
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
class="field-settings-set-signing-date w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
@click.stop
>
<input
@@ -70,7 +70,7 @@
</label>
<label
v-if="showWithLogo"
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
class="field-settings-with-logo w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
@click.stop
>
<input
@@ -84,7 +84,7 @@
</label>
<label
v-if="showSignatureId"
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
class="field-settings-signature-id w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
@click.stop
>
<input
@@ -99,7 +99,7 @@
</label>
<label
v-if="showChecked"
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
class="field-settings-checked w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
@click.stop
>
<input
@@ -113,6 +113,7 @@
</label>
<ContextSubmenu
v-if="showVerificationMethod"
class="field-settings-verification-method"
:icon="IconId"
:label="t('method')"
:options="methodOptions"
@@ -125,6 +126,7 @@
>
<ContextSubmenu
v-if="showFormatSubmenu"
class="field-settings-format"
:icon="IconAdjustmentsHorizontal"
:label="t('format')"
:options="formatOptions"
@@ -133,6 +135,7 @@
/>
<ContextSubmenu
v-if="showValidationSubmenu && field.type !== 'number'"
class="field-settings-validation"
:icon="IconInputCheck"
:label="t('validation')"
:options="validationMenuItems.map(k => ({ value: k, label: t(k) }))"
@@ -141,7 +144,7 @@
/>
<button
v-if="field.type === 'number'"
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
class="field-settings-validation w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
@click.stop="openNumberRangeModal"
>
<IconInputCheck class="w-4 h-4" />
@@ -149,6 +152,7 @@
</button>
<ContextSubmenu
v-if="showPaymentSettings"
class="field-settings-currency"
:icon="IconCash"
:label="t('currency')"
:options="currencyOptions"
@@ -157,6 +161,7 @@
/>
<ContextSubmenu
v-if="showPaymentSettings"
class="field-settings-price"
:icon="IconCoins"
:label="t('price')"
:options="priceTypeOptions"
@@ -165,7 +170,7 @@
/>
<button
v-if="showFont"
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
class="field-settings-font w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
@click.stop="openFontModal"
>
<IconTypography class="w-4 h-4" />
@@ -173,7 +178,7 @@
</button>
<button
v-if="showDescription"
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
class="field-settings-description w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
@click.stop="openDescriptionModal"
>
<IconInfoCircle class="w-4 h-4" />
@@ -181,7 +186,7 @@
</button>
<button
v-if="showCondition"
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
class="field-settings-condition w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
@click.stop="openConditionModal"
>
<span class="flex items-center space-x-2">
@@ -196,7 +201,7 @@
</button>
<button
v-if="showFormula"
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
class="field-settings-formula w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
@click.stop="openFormulaModal"
>
<IconMathFunction class="w-4 h-4" />
@@ -207,7 +212,7 @@
class="my-1 border-neutral-200"
>
<button
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
class="field-settings-copy w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
@click.stop="$emit('copy')"
>
<span class="flex items-center space-x-2">
@@ -217,7 +222,7 @@
<span class="text-xs text-base-content/60 ml-4">{{ isMac ? '⌘C' : 'Ctrl+C' }}</span>
</button>
<button
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm text-red-600"
class="field-settings-remove w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm text-red-600"
@click.stop="$emit('delete')"
>
<span class="flex items-center space-x-2">
@@ -228,12 +233,13 @@
</button>
<ContextSubmenu
v-if="showMoreSubmenu"
class="field-settings-more"
:icon="IconDots"
:label="t('more')"
>
<button
v-if="showDrawNewArea"
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
class="field-settings-draw-new-area w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
@click="handleMoreSelect('draw_new_area')"
>
<IconNewSection class="w-4 h-4" />
@@ -241,7 +247,7 @@
</button>
<button
v-if="showCopyToAllPages"
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
class="field-settings-copy-to-all-pages w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
@click="handleMoreSelect('copy_to_all_pages')"
>
<IconCopy class="w-4 h-4" />
@@ -249,7 +255,7 @@
</button>
<button
v-if="showSaveAsCustom"
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
class="field-settings-save-as-custom-field w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
@click="handleMoreSelect('save_as_custom')"
>
<IconForms class="w-4 h-4" />
app/javascript/template_builder/field_settings.vue
+41 -16
View File
@@ -1,7 +1,7 @@
<template>
<div
v-if="field.type === 'verification'"
class="py-1.5 px-1 relative"
class="field-settings-verification-method py-1.5 px-1 relative"
@click.stop
>
<select
@@ -28,7 +28,7 @@
</div>
<div
v-if="['select', 'radio'].includes(field.type) && !defaultField"
class="py-1.5 px-1 relative"
class="field-settings-default-value py-1.5 px-1 relative"
@click.stop
>
<select
@@ -62,7 +62,7 @@
</div>
<div
v-if="['text', 'number'].includes(field.type) && !defaultField"
class="py-1.5 px-1 relative"
class="field-settings-default-value py-1.5 px-1 relative"
@click.stop
>
<input
@@ -84,7 +84,7 @@
</div>
<div
v-if="['text', 'cells'].includes(field.type)"
class="py-1.5 px-1 relative"
class="field-settings-validation py-1.5 px-1 relative"
@click.stop
>
<select
@@ -122,7 +122,7 @@
</div>
<div
v-if="['text', 'cells'].includes(field.type) && field.validation && lengthValidation"
class="py-1.5 px-1 relative flex space-x-1"
class="field-settings-length-validation py-1.5 px-1 relative flex space-x-1"
@click.stop
>
<div class="w-1/2 relative">
@@ -166,7 +166,7 @@
</div>
<div
v-if="field.type === 'number'"
class="py-1.5 px-1 relative flex space-x-1"
class="field-settings-number-range py-1.5 px-1 relative flex space-x-1"
@click.stop
>
<div class="w-1/2 relative">
@@ -210,7 +210,7 @@
</div>
<div
v-if="field.type === 'number'"
class="py-1.5 px-1 relative"
class="field-settings-number-format py-1.5 px-1 relative"
@click.stop
>
<select
@@ -237,7 +237,7 @@
</div>
<div
v-if="['text', 'cells'].includes(field.type) && field.validation && !validations[field.validation.pattern] && !lengthValidation"
class="py-1.5 px-1 relative"
class="field-settings-custom-validation py-1.5 px-1 relative"
@click.stop
>
<input
@@ -259,7 +259,7 @@
</div>
<div
v-if="['text', 'cells'].includes(field.type) && field.validation && !validations[field.validation.pattern] && !lengthValidation"
class="py-1.5 px-1 relative"
class="field-settings-error-message py-1.5 px-1 relative"
@click.stop
>
<input
@@ -280,7 +280,7 @@
</div>
<div
v-if="field.type === 'date'"
class="py-1.5 px-1 relative"
class="field-settings-date-format py-1.5 px-1 relative"
@click.stop
>
<select
@@ -307,7 +307,7 @@
</div>
<div
v-if="field.type === 'signature'"
class="py-1.5 px-1 relative"
class="field-settings-signature-format py-1.5 px-1 relative"
@click.stop
>
<select
@@ -340,6 +340,7 @@
</div>
<li
v-if="[true, false].includes(withSignatureId) && field.type === 'signature'"
class="field-settings-signature-id"
@click.stop
>
<label class="cursor-pointer py-1.5">
@@ -355,6 +356,7 @@
</li>
<li
v-if="withRequired && field.type !== 'phone' && field.type !== 'stamp' && field.type !== 'verification' && field.type !== 'strikethrough' && field.type !== 'heading'"
class="field-settings-required"
@click.stop
>
<label class="cursor-pointer py-1.5">
@@ -370,6 +372,7 @@
</li>
<li
v-if="field.type == 'stamp'"
class="field-settings-with-logo"
@click.stop
>
<label class="cursor-pointer py-1.5">
@@ -384,6 +387,7 @@
</li>
<li
v-if="field.type == 'checkbox'"
class="field-settings-checked"
@click.stop
>
<label class="cursor-pointer py-1.5">
@@ -398,6 +402,7 @@
</li>
<li
v-if="field.type == 'date'"
class="field-settings-set-signing-date"
@click.stop
>
<label class="cursor-pointer py-1.5">
@@ -412,6 +417,7 @@
</li>
<li
v-if="['text', 'number', 'radio', 'multiple', 'select'].includes(field.type)"
class="field-settings-read-only"
@click.stop
>
<label class="cursor-pointer py-1.5">
@@ -427,6 +433,7 @@
</li>
<li
v-if="withPrefillable && prefillableFieldTypes.includes(field['type'])"
class="field-settings-prefillable"
@click.stop
>
<label class="cursor-pointer py-1.5">
@@ -444,7 +451,10 @@
v-if="field.type != 'stamp'"
class="pb-0.5 mt-0.5"
>
<li v-if="['text', 'number', 'date', 'select', 'heading', 'cells'].includes(field.type)">
<li
v-if="['text', 'number', 'date', 'select', 'heading', 'cells'].includes(field.type)"
class="field-settings-font"
>
<label
class="label-text cursor-pointer text-center w-full flex items-center"
@click="$emit('click-font')"
@@ -459,6 +469,7 @@
</li>
<li
v-if="field.type != 'stamp' && field.type != 'heading' && field.type != 'strikethrough'"
class="field-settings-description"
>
<label
class="label-text cursor-pointer text-center w-full flex items-center"
@@ -474,6 +485,7 @@
</li>
<li
v-if="withCondition && field.type != 'stamp' && field.type != 'heading'"
class="field-settings-condition"
>
<label
class="label-text cursor-pointer text-center w-full flex items-center"
@@ -487,7 +499,10 @@
</span>
</label>
</li>
<li v-if="field.type == 'number'">
<li
v-if="field.type == 'number'"
class="field-settings-formula"
>
<label
class="label-text cursor-pointer text-center w-full flex items-center"
@click="$emit('click-formula')"
@@ -508,6 +523,7 @@
<li
v-for="(area, index) in sortedAreas"
:key="index"
class="field-settings-area"
>
<a
href="#"
@@ -527,7 +543,10 @@
/>
</a>
</li>
<li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
<li
v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)"
class="field-settings-draw-new-area"
>
<a
href="#"
class="text-sm py-1 px-2"
@@ -541,7 +560,10 @@
</a>
</li>
</template>
<li v-if="withCopyToAllPages && field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells', 'stamp'].includes(field.type)">
<li
v-if="withCopyToAllPages && field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells', 'stamp'].includes(field.type)"
class="field-settings-copy-to-all-pages"
>
<a
href="#"
class="text-sm py-1 px-2"
@@ -554,7 +576,10 @@
{{ t('copy_to_all_pages') }}
</a>
</li>
<li v-if="withCustomFields">
<li
v-if="withCustomFields"
class="field-settings-save-as-custom-field"
>
<a
href="#"
class="text-sm py-1 px-2"
app/javascript/template_builder/payment_settings.vue
+10 -7
View File
@@ -22,7 +22,7 @@
>
<div
v-if="!('price_id' in field.preferences) && !('payment_link_id' in field.preferences)"
class="py-1.5 px-1 relative"
class="field-settings-currency py-1.5 px-1 relative"
@click.stop
>
<select
@@ -48,7 +48,7 @@
</label>
</div>
<div
class="py-1.5 px-1 relative"
class="field-settings-price py-1.5 px-1 relative"
@click.stop
>
<input
@@ -121,7 +121,7 @@
</div>
<div
v-if="!isConnected || isOauthSuccess"
class="py-1.5 px-1 relative"
class="field-settings-stripe-connect py-1.5 px-1 relative"
@click.stop
>
<div
@@ -203,7 +203,7 @@
>{{ t('learn_more') }}</a>
</div>
<li
class="mb-1"
class="field-settings-formula mb-1"
>
<label
class="label-text cursor-pointer text-center w-full flex items-center"
@@ -218,7 +218,7 @@
</label>
</li>
<hr>
<li>
<li class="field-settings-description">
<label
class="label-text cursor-pointer text-center w-full flex items-center"
@click="$emit('click-description')"
@@ -233,7 +233,7 @@
</li>
<li
v-if="withCondition"
class="mt-1"
class="field-settings-condition mt-1"
>
<label
class="label-text cursor-pointer text-center w-full flex items-center"
@@ -251,7 +251,10 @@
v-if="withCustomFields"
class="pb-0.5 mt-0.5"
>
<li v-if="withCustomFields">
<li
v-if="withCustomFields"
class="field-settings-save-as-custom-field"
>
<a
href="#"
class="text-sm py-1 px-2"