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

double click to edit default value

Browse Source
This commit is contained in:
Pete Matsyburka
2024-06-12 20:05:55 +03:00
parent 2389c3fc40
commit 3b717ae3de
3 changed files with 154 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/template_builder/area.vue
+150 -30
View File
@@ -3,7 +3,7 @@
class="absolute overflow-visible group"
:style="positionStyle"
@pointerdown.stop
@mousedown.stop="startDrag"
@mousedown="startMouseMove"
@touchstart="startTouchDrag"
>
<div
@@ -70,10 +70,11 @@
@blur="onNameBlur"
>{{ optionIndexText }} {{ (defaultField ? (field.title || field.name) : field.name) || defaultName }}</span>
<div
v-if="isSettingsFocus || (isNameFocus && !['checkbox', 'phone'].includes(field.type))"
v-if="isSettingsFocus || isContenteditable || (isNameFocus && !['checkbox', 'phone'].includes(field.type))"
class="flex items-center ml-1.5"
>
<input
v-if="!isContenteditable"
:id="`required-checkbox-${field.uuid}`"
v-model="field.required"
type="checkbox"
@@ -81,13 +82,30 @@
@mousedown.prevent
>
<label
v-if="!isContenteditable"
:for="`required-checkbox-${field.uuid}`"
class="label text-xs"
@click.prevent="field.required = !field.required"
@mousedown.prevent
>{{ t('required') }}</label>
<input
v-if="isContenteditable"
:id="`readonly-checkbox-${field.uuid}`"
type="checkbox"
class="checkbox checkbox-xs no-animation rounded"
:checked="!(field.readonly ?? true)"
@change="field.readonly = !(field.readonly ?? true)"
@mousedown.prevent
>
<label
v-if="isContenteditable"
:for="`readonly-checkbox-${field.uuid}`"
class="label text-xs"
@click.prevent="field.readonly = !(field.readonly ?? true)"
@mousedown.prevent
>{{ t('editable') }}</label>
<span
v-if="field.type !== 'payment'"
v-if="field.type !== 'payment' && !isContenteditable"
class="dropdown dropdown-end"
@mouseenter="renderDropdown = true"
@touchstart="renderDropdown = true"
@@ -140,7 +158,7 @@
<div
class="flex items-center h-full w-full"
dir="auto"
:class="[bgColors[submitterIndex], field?.default_value ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
:class="[isContenteditable ? 'bg-opacity-50' : 'bg-opacity-80', bgColors[submitterIndex], isDefaultValuePresent || isContenteditable ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
>
<span
v-if="field"
@@ -148,7 +166,7 @@
:class="{'w-full h-full': field.type == 'checkbox'}"
>
<div
v-if="field?.default_value"
v-if="isDefaultValuePresent || isContenteditable"
:class="{ 'w-full h-full': field.type == 'checkbox', 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
>
<div
@@ -162,12 +180,18 @@
:class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
/>
<span
v-else-if="field.type === 'number'"
v-else-if="field.type === 'number' && !isContenteditable"
class="whitespace-pre-wrap"
>{{ formatNumber(field.default_value, field.preferences?.format) }}</span>
<span
v-else
class="whitespace-pre-wrap"
ref="defaultValue"
:contenteditable="isContenteditable"
class="whitespace-pre-wrap outline-none empty:before:content-[attr(placeholder)] before:text-gray-400"
:class="{ 'cursor-text': isContenteditable }"
:placeholder="t('type_value')"
@blur="onDefaultValueBlur"
@keydown.enter.prevent="onDefaultValueEnter"
>{{ field.default_value }}</span>
</div>
</div>
@@ -181,8 +205,11 @@
</span>
</div>
<div
v-if="!isContenteditable"
ref="touchTarget"
class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
class="absolute top-0 bottom-0 right-0 left-0"
:class="isDragged ? 'cursor-grab' : 'cursor-pointer'"
@dblclick="maybeFocusDefaultValue"
/>
<span
v-if="field?.type && editable"
@@ -286,6 +313,7 @@ export default {
return {
isShowFormulaModal: false,
isShowConditionsModal: false,
isContenteditable: false,
isSettingsFocus: false,
isShowDescriptionModal: false,
isResize: false,
@@ -299,6 +327,9 @@ export default {
computed: {
fieldNames: FieldType.computed.fieldNames,
fieldIcons: FieldType.computed.fieldIcons,
isDefaultValuePresent () {
return this.field?.default_value || this.field?.default_value === 0
},
modalContainerEl () {
return this.$el.getRootNode().querySelector('#docuseal_modal_container')
},
@@ -364,26 +395,26 @@ export default {
},
bgColors () {
return [
'bg-red-100/80',
'bg-sky-100/80',
'bg-emerald-100/80',
'bg-yellow-100/80',
'bg-purple-100/80',
'bg-pink-100/80',
'bg-cyan-100/80',
'bg-orange-100/80',
'bg-lime-100/80',
'bg-indigo-100/80',
'bg-red-100/80',
'bg-sky-100/80',
'bg-emerald-100/80',
'bg-yellow-100/80',
'bg-purple-100/80',
'bg-pink-100/80',
'bg-cyan-100/80',
'bg-orange-100/80',
'bg-lime-100/80',
'bg-indigo-100/80'
'bg-red-100',
'bg-sky-100',
'bg-emerald-100',
'bg-yellow-100',
'bg-purple-100',
'bg-pink-100',
'bg-cyan-100',
'bg-orange-100',
'bg-lime-100',
'bg-indigo-100',
'bg-red-100',
'bg-sky-100',
'bg-emerald-100',
'bg-yellow-100',
'bg-purple-100',
'bg-pink-100',
'bg-cyan-100',
'bg-orange-100',
'bg-lime-100',
'bg-indigo-100'
]
},
isSelected () {
@@ -421,6 +452,22 @@ export default {
closeDropdown () {
document.activeElement.blur()
},
maybeFocusDefaultValue () {
if (['text', 'number'].includes(this.field.type)) {
this.isContenteditable = true
this.$nextTick(() => {
this.$refs.defaultValue.focus()
if (this.$refs.defaultValue.innerText.length) {
window.getSelection().collapse(
this.$refs.defaultValue.firstChild,
this.$refs.defaultValue.innerText.length
)
}
})
}
},
formatNumber (number, format) {
if (format === 'comma') {
return new Intl.NumberFormat('en-US').format(number)
@@ -510,6 +557,38 @@ export default {
this.save()
},
onDefaultValueBlur (e) {
const text = this.$refs.defaultValue.innerText.trim()
this.isContenteditable = false
if (text) {
if (this.field.type === 'number') {
const number = parseFloat(text)
if (number || number === 0) {
this.field.default_value = parseFloat(text)
}
} else {
this.field.default_value = text
}
if (![true, false].includes(this.field.readonly)) {
this.field.readonly = true
}
this.$refs.defaultValue.innerText = text
} else {
delete this.field.readonly
delete this.field.default_value
this.$refs.defaultValue.innerText = ''
}
this.save()
},
onDefaultValueEnter (e) {
this.$refs.defaultValue.blur()
},
onNameEnter (e) {
this.$refs.name.blur()
},
@@ -569,8 +648,8 @@ export default {
const page = this.$parent.$refs.mask.previousSibling
const rect = page.getBoundingClientRect()
this.area.x = (this.dragFrom.x + e.touches[0].clientX - rect.left) / rect.width
this.area.y = (this.dragFrom.y + e.touches[0].clientY - rect.top) / rect.height
this.area.x = Math.min(Math.max((this.dragFrom.x + e.touches[0].clientX - rect.left) / rect.width, 0), 1 - this.area.w)
this.area.y = Math.min(Math.max((this.dragFrom.y + e.touches[0].clientY - rect.top) / rect.height, 0), 1 - this.area.h)
},
stopTouchDrag () {
this.$el.getRootNode().removeEventListener('touchmove', this.touchDrag)
@@ -584,6 +663,47 @@ export default {
this.$emit('stop-drag')
},
startMouseMove (e) {
if (e.target !== this.$refs.touchTarget) {
return
}
this.$refs?.name?.blur()
e.preventDefault()
this.isDragged = true
const rect = e.target.getBoundingClientRect()
this.selectedAreaRef.value = this.area
this.dragFrom = { x: rect.left - e.clientX, y: rect.top - e.clientY }
this.$el.getRootNode().addEventListener('mousemove', this.mouseMove)
this.$el.getRootNode().addEventListener('mouseup', this.stopMouseMove)
this.$emit('start-drag')
},
mouseMove (e) {
const page = this.$parent.$refs.mask.previousSibling
const rect = page.getBoundingClientRect()
this.area.x = Math.min(Math.max((this.dragFrom.x + e.clientX - rect.left) / rect.width, 0), 1 - this.area.w)
this.area.y = Math.min(Math.max((this.dragFrom.y + e.clientY - rect.top) / rect.height, 0), 1 - this.area.h)
},
stopMouseMove (e) {
this.$el.getRootNode().removeEventListener('mousemove', this.mouseMove)
this.$el.getRootNode().removeEventListener('mouseup', this.stopMouseMove)
if (this.isDragged) {
this.save()
}
this.isDragged = false
this.$emit('stop-drag')
},
stopDrag () {
this.$el.getRootNode().removeEventListener('mousemove', this.drag)
this.$el.getRootNode().removeEventListener('mouseup', this.stopDrag)
app/javascript/template_builder/i18n.js
+2
View File
@@ -1,4 +1,5 @@
const en = {
editable: 'Editable',
search_field: 'Search field',
field_not_found: 'Field not found',
clear: 'Clear',
@@ -11,6 +12,7 @@ const en = {
display_title: 'Display title',
with_logo: 'With logo',
unchecked: 'Unchecked',
type_value: 'Type value',
equal: 'Equal',
not_equal: 'Not equal',
contains: 'Contains',
app/javascript/template_builder/page.vue
+2 -5
View File
@@ -27,8 +27,6 @@
:default-submitters="defaultSubmitters"
@start-resize="resizeDirection = $event"
@stop-resize="resizeDirection = null"
@start-drag="isMove = true"
@stop-drag="isMove = false"
@remove="$emit('remove-area', item.area)"
@scroll-to="$emit('scroll-to', $event)"
/>
@@ -40,11 +38,11 @@
/>
</div>
<div
v-show="resizeDirection || isMove || isDrag || showMask || (drawField && isMobile) || fieldsDragFieldRef.value"
v-show="resizeDirection || isDrag || showMask || (drawField && isMobile) || fieldsDragFieldRef.value"
id="mask"
ref="mask"
class="top-0 bottom-0 left-0 right-0 absolute"
:class="{ 'z-10': !isMobile, 'cursor-grab': isDrag || isMove, 'cursor-nwse-resize': drawField, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
:class="{ 'z-10': !isMobile, 'cursor-grab': isDrag, 'cursor-nwse-resize': drawField, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
@pointermove="onPointermove"
@pointerdown="onStartDraw"
@dragover.prevent
@@ -122,7 +120,6 @@ export default {
return {
areaRefs: [],
showMask: false,
isMove: false,
resizeDirection: null,
newArea: null
}