113113 <div
114114 ref =" textContainer"
115115 class =" flex items-center px-0.5"
116- :style =" { color: field.preferences?.color }"
116+ :style =" { color: isConditionMatch ? field.preferences?.color : '#9ca3af' }"
117117 :class =" { 'w-full h-full': isWFullType }"
118118 >
119119 <IconCheck
131131 />
132132 </template >
133133 <span
134- v-else-if =" field.type === 'number' && !isValueInput && (field.default_value || field.default_value == 0)"
134+ v-else-if =" field.type === 'number' && !isContenteditable && (displayValue || displayValue == 0)"
135135 class =" whitespace-pre-wrap"
136- >{{ formatNumber(field.default_value , field.preferences?.format) }}</span >
136+ >{{ formatNumber(displayValue , field.preferences?.format) }}</span >
137137 <span
138138 v-else-if =" field.default_value === '{{date}}'"
139139 >
140- {{ t('signing_date') }}
140+ {{ /[HhAasz]/.test(field.preferences?.format || '') ? t('signing_date_and_time') : t('signing_date') }}
141141 </span >
142142 <div
143143 v-else-if =" field.type === 'cells' && field.default_value"
183183 :contenteditable =" isValueInput"
184184 class =" whitespace-pre-wrap outline-none empty:before:content-[attr(placeholder)] before:text-base-content/30"
185185 :class =" { 'cursor-text': isValueInput }"
186- :placeholder =" withFieldPlaceholder && !isValueInput ? defaultField?.title || field.title || field.name || defaultName : (field.type === 'date' ? field.preferences?.format || t('type_value') : t('type_value'))"
186+ :placeholder =" withFieldPlaceholder && !isValueInput ? defaultField?.title || field.title || field.name || defaultName : (isConditionMatch ? ( field.type === 'date' ? field.preferences?.format || t('type_value') : t('type_value')) : '' )"
187187 @blur =" onDefaultValueBlur"
188188 @focus =" selectedAreasRef.value = [area]"
189189 @paste.prevent =" onPaste"
190190 @keydown.enter =" onDefaultValueEnter"
191- >{{ field.default_value }}</span >
191+ >{{ displayValue }}</span >
192192 </div >
193193 </div >
194194 <component
@@ -241,6 +241,16 @@ export default {
241241 required: false ,
242242 default: false
243243 },
244+ conditionalFieldIndex: {
245+ type: Object ,
246+ required: false ,
247+ default : () => ({})
248+ },
249+ formulaValuesIndex: {
250+ type: Object ,
251+ required: false ,
252+ default : () => ({})
253+ },
244254 isDraw: {
245255 type: Boolean ,
246256 required: false ,
@@ -323,11 +333,27 @@ export default {
323333 fieldNames: FieldType .computed .fieldNames ,
324334 fieldLabels: FieldType .computed .fieldLabels ,
325335 fieldIcons: FieldType .computed .fieldIcons ,
336+ isConditionMatch () {
337+ return ! this .inputMode || this .conditionalFieldIndex [this .field .uuid ] !== false
338+ },
339+ displayValue () {
340+ if (this .field .preferences ? .formula && this .field .type !== ' payment'
341+ const computed = this .formulaValuesIndex [this .field .uuid ]
342+
343+ if (computed != null ) {
344+ return computed
345+ }
346+ }
347+
348+ return this .field .default_value
349+ },
326350 bgClasses () {
327351 if (this .field .type === ' heading'
328352 return ' bg-gray-50'
329353 } else if (this .field .type === ' strikethrough'
330354 return ' bg-transparent'
355+ } else if (! this .isConditionMatch ) {
356+ return ' bg-gray-100'
331357 } else {
332358 return this .bgColors [this .submitterIndex % this .bgColors .length ]
333359 }
@@ -337,6 +363,8 @@ export default {
337363 return ' '
338364 } else if (this .field .type === ' strikethrough'
339365 return ' border-dashed border-gray-300'
366+ } else if (! this .isConditionMatch ) {
367+ return ' border-gray-300'
340368 } else {
341369 return this .borderColors [this .submitterIndex % this .borderColors .length ]
342370 }
@@ -390,7 +418,7 @@ export default {
390418 return this .basePageWidth / 612.0
391419 },
392420 isDefaultValuePresent () {
393- return this .field ? .default_value || this .field ? .default_value === 0
421+ return this .field ? .default_value || this .field ? .default_value === 0 || this . displayValue || this . displayValue === 0
394422 },
395423 isSelectInput () {
396424 return this .inputMode && (this .field .type === ' select' || (this .field .type === ' radio' && this .field .areas ? .length < 2 ))
@@ -399,6 +427,8 @@ export default {
399427 return this .inputMode && (this .field .type === ' checkbox' || ([' radio' ' multiple' includes (this .field .type ) && this .area .option_uuid ))
400428 },
401429 isValueInput () {
430+ if (this .inputMode && this .field .preferences ? .formula ) return false
431+
402432 return (this .field .type === ' heading' && this .isHeadingSelected ) || this .isContenteditable ||
403433 (this .inputMode && ([' text' ' number' includes (this .field .type ) || (this .field .type === ' date' && this .field .default_value !== ' {{date}}'
404434 },
@@ -511,7 +541,7 @@ export default {
511541 return option? .value || ` ${ this .t (' option' } ${ this .field .options .indexOf (option) + 1 } `
512542 },
513543 maybeToggleDefaultValue () {
514- if (! this .editable || this .isCmdKeyRef .value ) {
544+ if (! this .editable || this .isCmdKeyRef .value || this . field . preferences ? . formula ) {
515545 return
516546 }
517547
@@ -559,6 +589,10 @@ export default {
559589 }
560590 },
561591 focusValueInput (e ) {
592+ if (this .inputMode && this .field .type === ' number' && ! this .isContenteditable && ! this .field .preferences ? .formula ) {
593+ this .isContenteditable = true
594+ }
595+
562596 this .$nextTick (() => {
563597 if (this .$refs .defaultValue && this .$refs .defaultValue !== document .activeElement ) {
564598 this .$refs .defaultValue .focus ()
@@ -624,6 +658,12 @@ export default {
624658 }
625659 },
626660 onDefaultValueBlur (e ) {
661+ if (this .field .preferences ? .formula ) {
662+ this .isContenteditable = false
663+
664+ return
665+ }
666+
627667 const text = this .$refs .defaultValue .innerText .trim ()
628668
629669 this .isContenteditable = false
0 commit comments