adminbruno
/
docuseal
mirror of https://github.com/docusealco/docuseal
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add field settings classes

Browse Source
pull/603/head
Pete Matsyburka 3 weeks ago
parent db3b80c96c
commit 5a31df40d8
3 changed files with 74 additions and 40 deletions
Show Stats Download Patch File Download Diff File

40
app/javascript/template_builder/field_context_menu.vue
Unescape View File

@ -11,7 +11,7 @@
> >
<label <label
v-if="showRequired" 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 @click.stop
> >
<input <input
@ -26,7 +26,7 @@
</label> </label>
<label <label
v-if="showReadOnly" 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 @click.stop
> >
<input <input
@ -41,7 +41,7 @@
</label> </label>
<label <label
v-if="showPrefillable" 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 @click.stop
> >
<input <input
@ -56,7 +56,7 @@
</label> </label>
<label <label
v-if="showSetSigningDate" 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 @click.stop
> >
<input <input
@ -70,7 +70,7 @@
</label> </label>
<label <label
v-if="showWithLogo" 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 @click.stop
> >
<input <input
@ -84,7 +84,7 @@
</label> </label>
<label <label
v-if="showSignatureId" 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 @click.stop
> >
<input <input
@ -99,7 +99,7 @@
</label> </label>
<label <label
v-if="showChecked" 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 @click.stop
> >
<input <input
@ -113,6 +113,7 @@
</label> </label>
<ContextSubmenu <ContextSubmenu
v-if="showVerificationMethod" v-if="showVerificationMethod"
class="field-settings-verification-method"
:icon="IconId" :icon="IconId"
:label="t('method')" :label="t('method')"
:options="methodOptions" :options="methodOptions"
@ -125,6 +126,7 @@
> >
<ContextSubmenu <ContextSubmenu
v-if="showFormatSubmenu" v-if="showFormatSubmenu"
class="field-settings-format"
:icon="IconAdjustmentsHorizontal" :icon="IconAdjustmentsHorizontal"
:label="t('format')" :label="t('format')"
:options="formatOptions" :options="formatOptions"
@ -133,6 +135,7 @@
/> />
<ContextSubmenu <ContextSubmenu
v-if="showValidationSubmenu && field.type !== 'number'" v-if="showValidationSubmenu && field.type !== 'number'"
class="field-settings-validation"
:icon="IconInputCheck" :icon="IconInputCheck"
:label="t('validation')" :label="t('validation')"
:options="validationMenuItems.map(k => ({ value: k, label: t(k) }))" :options="validationMenuItems.map(k => ({ value: k, label: t(k) }))"
@ -141,7 +144,7 @@
/> />
<button <button
v-if="field.type === 'number'" 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" @click.stop="openNumberRangeModal"
> >
<IconInputCheck class="w-4 h-4" /> <IconInputCheck class="w-4 h-4" />
@ -149,6 +152,7 @@
</button> </button>
<ContextSubmenu <ContextSubmenu
v-if="showPaymentSettings" v-if="showPaymentSettings"
class="field-settings-currency"
:icon="IconCash" :icon="IconCash"
:label="t('currency')" :label="t('currency')"
:options="currencyOptions" :options="currencyOptions"
@ -157,6 +161,7 @@
/> />
<ContextSubmenu <ContextSubmenu
v-if="showPaymentSettings" v-if="showPaymentSettings"
class="field-settings-price"
:icon="IconCoins" :icon="IconCoins"
:label="t('price')" :label="t('price')"
:options="priceTypeOptions" :options="priceTypeOptions"
@ -165,7 +170,7 @@
/> />
<button <button
v-if="showFont" 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" @click.stop="openFontModal"
> >
<IconTypography class="w-4 h-4" /> <IconTypography class="w-4 h-4" />
@ -173,7 +178,7 @@
</button> </button>
<button <button
v-if="showDescription" 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" @click.stop="openDescriptionModal"
> >
<IconInfoCircle class="w-4 h-4" /> <IconInfoCircle class="w-4 h-4" />
@ -181,7 +186,7 @@
</button> </button>
<button <button
v-if="showCondition" 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" @click.stop="openConditionModal"
> >
<span class="flex items-center space-x-2"> <span class="flex items-center space-x-2">
@ -196,7 +201,7 @@
</button> </button>
<button <button
v-if="showFormula" 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" @click.stop="openFormulaModal"
> >
<IconMathFunction class="w-4 h-4" /> <IconMathFunction class="w-4 h-4" />
@ -207,7 +212,7 @@
class="my-1 border-neutral-200" class="my-1 border-neutral-200"
> >
<button <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')" @click.stop="$emit('copy')"
> >
<span class="flex items-center space-x-2"> <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> <span class="text-xs text-base-content/60 ml-4">{{ isMac ? '⌘C' : 'Ctrl+C' }}</span>
</button> </button>
<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')" @click.stop="$emit('delete')"
> >
<span class="flex items-center space-x-2"> <span class="flex items-center space-x-2">
@ -228,12 +233,13 @@
</button> </button>
<ContextSubmenu <ContextSubmenu
v-if="showMoreSubmenu" v-if="showMoreSubmenu"
class="field-settings-more"
:icon="IconDots" :icon="IconDots"
:label="t('more')" :label="t('more')"
> >
<button <button
v-if="showDrawNewArea" 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')" @click="handleMoreSelect('draw_new_area')"
> >
<IconNewSection class="w-4 h-4" /> <IconNewSection class="w-4 h-4" />
@ -241,7 +247,7 @@
</button> </button>
<button <button
v-if="showCopyToAllPages" 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')" @click="handleMoreSelect('copy_to_all_pages')"
> >
<IconCopy class="w-4 h-4" /> <IconCopy class="w-4 h-4" />
@ -249,7 +255,7 @@
</button> </button>
<button <button
v-if="showSaveAsCustom" 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')" @click="handleMoreSelect('save_as_custom')"
> >
<IconForms class="w-4 h-4" /> <IconForms class="w-4 h-4" />

57
app/javascript/template_builder/field_settings.vue
Unescape View File

@ -1,7 +1,7 @@
<template> <template>
<div <div
v-if="field.type === 'verification'" 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 @click.stop
> >
<select <select
@ -28,7 +28,7 @@
</div> </div>
<div <div
v-if="['select', 'radio'].includes(field.type) && !defaultField" 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 @click.stop
> >
<select <select
@ -62,7 +62,7 @@
</div> </div>
<div <div
v-if="['text', 'number'].includes(field.type) && !defaultField" 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 @click.stop
> >
<input <input
@ -84,7 +84,7 @@
</div> </div>
<div <div
v-if="['text', 'cells'].includes(field.type)" 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 @click.stop
> >
<select <select
@ -122,7 +122,7 @@
</div> </div>
<div <div
v-if="['text', 'cells'].includes(field.type) && field.validation && lengthValidation" 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 @click.stop
> >
<div class="w-1/2 relative"> <div class="w-1/2 relative">
@ -166,7 +166,7 @@
</div> </div>
<div <div
v-if="field.type === 'number'" 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 @click.stop
> >
<div class="w-1/2 relative"> <div class="w-1/2 relative">
@ -210,7 +210,7 @@
</div> </div>
<div <div
v-if="field.type === 'number'" 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 @click.stop
> >
<select <select
@ -237,7 +237,7 @@
</div> </div>
<div <div
v-if="['text', 'cells'].includes(field.type) && field.validation && !validations[field.validation.pattern] && !lengthValidation" 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 @click.stop
> >
<input <input
@ -259,7 +259,7 @@
</div> </div>
<div <div
v-if="['text', 'cells'].includes(field.type) && field.validation && !validations[field.validation.pattern] && !lengthValidation" 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 @click.stop
> >
<input <input
@ -280,7 +280,7 @@
</div> </div>
<div <div
v-if="field.type === 'date'" 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 @click.stop
> >
<select <select
@ -307,7 +307,7 @@
</div> </div>
<div <div
v-if="field.type === 'signature'" 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 @click.stop
> >
<select <select
@ -340,6 +340,7 @@
</div> </div>
<li <li
v-if="[true, false].includes(withSignatureId) && field.type === 'signature'" v-if="[true, false].includes(withSignatureId) && field.type === 'signature'"
class="field-settings-signature-id"
@click.stop @click.stop
> >
<label class="cursor-pointer py-1.5"> <label class="cursor-pointer py-1.5">
@ -355,6 +356,7 @@
</li> </li>
<li <li
v-if="withRequired && field.type !== 'phone' && field.type !== 'stamp' && field.type !== 'verification' && field.type !== 'strikethrough' && field.type !== 'heading'" v-if="withRequired && field.type !== 'phone' && field.type !== 'stamp' && field.type !== 'verification' && field.type !== 'strikethrough' && field.type !== 'heading'"
class="field-settings-required"
@click.stop @click.stop
> >
<label class="cursor-pointer py-1.5"> <label class="cursor-pointer py-1.5">
@ -370,6 +372,7 @@
</li> </li>
<li <li
v-if="field.type == 'stamp'" v-if="field.type == 'stamp'"
class="field-settings-with-logo"
@click.stop @click.stop
> >
<label class="cursor-pointer py-1.5"> <label class="cursor-pointer py-1.5">
@ -384,6 +387,7 @@
</li> </li>
<li <li
v-if="field.type == 'checkbox'" v-if="field.type == 'checkbox'"
class="field-settings-checked"
@click.stop @click.stop
> >
<label class="cursor-pointer py-1.5"> <label class="cursor-pointer py-1.5">
@ -398,6 +402,7 @@
</li> </li>
<li <li
v-if="field.type == 'date'" v-if="field.type == 'date'"
class="field-settings-set-signing-date"
@click.stop @click.stop
> >
<label class="cursor-pointer py-1.5"> <label class="cursor-pointer py-1.5">
@ -412,6 +417,7 @@
</li> </li>
<li <li
v-if="['text', 'number', 'radio', 'multiple', 'select'].includes(field.type)" v-if="['text', 'number', 'radio', 'multiple', 'select'].includes(field.type)"
class="field-settings-read-only"
@click.stop @click.stop
> >
<label class="cursor-pointer py-1.5"> <label class="cursor-pointer py-1.5">
@ -427,6 +433,7 @@
</li> </li>
<li <li
v-if="withPrefillable && prefillableFieldTypes.includes(field['type'])" v-if="withPrefillable && prefillableFieldTypes.includes(field['type'])"
class="field-settings-prefillable"
@click.stop @click.stop
> >
<label class="cursor-pointer py-1.5"> <label class="cursor-pointer py-1.5">
@ -444,7 +451,10 @@
v-if="field.type != 'stamp'" v-if="field.type != 'stamp'"
class="pb-0.5 mt-0.5" 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 <label
class="label-text cursor-pointer text-center w-full flex items-center" class="label-text cursor-pointer text-center w-full flex items-center"
@click="$emit('click-font')" @click="$emit('click-font')"
@ -459,6 +469,7 @@
</li> </li>
<li <li
v-if="field.type != 'stamp' && field.type != 'heading' && field.type != 'strikethrough'" v-if="field.type != 'stamp' && field.type != 'heading' && field.type != 'strikethrough'"
class="field-settings-description"
> >
<label <label
class="label-text cursor-pointer text-center w-full flex items-center" class="label-text cursor-pointer text-center w-full flex items-center"
@ -474,6 +485,7 @@
</li> </li>
<li <li
v-if="withCondition && field.type != 'stamp' && field.type != 'heading'" v-if="withCondition && field.type != 'stamp' && field.type != 'heading'"
class="field-settings-condition"
> >
<label <label
class="label-text cursor-pointer text-center w-full flex items-center" class="label-text cursor-pointer text-center w-full flex items-center"
@ -487,7 +499,10 @@
</span> </span>
</label> </label>
</li> </li>
<li v-if="field.type == 'number'"> <li
v-if="field.type == 'number'"
class="field-settings-formula"
>
<label <label
class="label-text cursor-pointer text-center w-full flex items-center" class="label-text cursor-pointer text-center w-full flex items-center"
@click="$emit('click-formula')" @click="$emit('click-formula')"
@ -508,6 +523,7 @@
<li <li
v-for="(area, index) in sortedAreas" v-for="(area, index) in sortedAreas"
:key="index" :key="index"
class="field-settings-area"
> >
<a <a
href="#" href="#"
@ -527,7 +543,10 @@
/> />
</a> </a>
</li> </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 <a
href="#" href="#"
class="text-sm py-1 px-2" class="text-sm py-1 px-2"
@ -541,7 +560,10 @@
</a> </a>
</li> </li>
</template> </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 <a
href="#" href="#"
class="text-sm py-1 px-2" class="text-sm py-1 px-2"
@ -554,7 +576,10 @@
{{ t('copy_to_all_pages') }} {{ t('copy_to_all_pages') }}
</a> </a>
</li> </li>
<li v-if="withCustomFields"> <li
v-if="withCustomFields"
class="field-settings-save-as-custom-field"
>
<a <a
href="#" href="#"
class="text-sm py-1 px-2" class="text-sm py-1 px-2"

17
app/javascript/template_builder/payment_settings.vue
Unescape View File

@ -22,7 +22,7 @@
> >
<div <div
v-if="!('price_id' in field.preferences) && !('payment_link_id' in field.preferences)" 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 @click.stop
> >
<select <select
@ -48,7 +48,7 @@
</label> </label>
</div> </div>
<div <div
class="py-1.5 px-1 relative" class="field-settings-price py-1.5 px-1 relative"
@click.stop @click.stop
> >
<input <input
@ -121,7 +121,7 @@
</div> </div>
<div <div
v-if="!isConnected || isOauthSuccess" v-if="!isConnected || isOauthSuccess"
class="py-1.5 px-1 relative" class="field-settings-stripe-connect py-1.5 px-1 relative"
@click.stop @click.stop
> >
<div <div
@ -203,7 +203,7 @@
>{{ t('learn_more') }}</a> >{{ t('learn_more') }}</a>
</div> </div>
<li <li
class="mb-1" class="field-settings-formula mb-1"
> >
<label <label
class="label-text cursor-pointer text-center w-full flex items-center" class="label-text cursor-pointer text-center w-full flex items-center"
@ -218,7 +218,7 @@
</label> </label>
</li> </li>
<hr> <hr>
<li> <li class="field-settings-description">
<label <label
class="label-text cursor-pointer text-center w-full flex items-center" class="label-text cursor-pointer text-center w-full flex items-center"
@click="$emit('click-description')" @click="$emit('click-description')"
@ -233,7 +233,7 @@
</li> </li>
<li <li
v-if="withCondition" v-if="withCondition"
class="mt-1" class="field-settings-condition mt-1"
> >
<label <label
class="label-text cursor-pointer text-center w-full flex items-center" class="label-text cursor-pointer text-center w-full flex items-center"
@ -251,7 +251,10 @@
v-if="withCustomFields" v-if="withCustomFields"
class="pb-0.5 mt-0.5" class="pb-0.5 mt-0.5"
> >
<li v-if="withCustomFields"> <li
v-if="withCustomFields"
class="field-settings-save-as-custom-field"
>
<a <a
href="#" href="#"
class="text-sm py-1 px-2" class="text-sm py-1 px-2"

Write Preview
Loading…
Cancel
Save