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

add builder editable prop

Browse Source
This commit is contained in:
DocuSeal
2023-11-04 01:19:32 +02:00
parent 2d24eac4a3
commit c0e49ebeea
10 changed files with 95 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/template_builder/area.vue
+15 -4
View File
@@ -23,7 +23,7 @@
:style="{ left: (cellW / area.w * 100) + '%' }"
>
<span
v-if="index === 0"
v-if="index === 0 && editable"
class="h-2.5 w-2.5 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-ew-resize z-10"
style="left: -4px"
@mousedown.stop="startResizeCell"
@@ -42,6 +42,7 @@
v-model="field.submitter_uuid"
class="border-r"
:compact="true"
:editable="editable"
:menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px]'"
:submitters="template.submitters"
@update:model-value="save"
@@ -50,6 +51,7 @@
<FieldType
v-model="field.type"
:button-width="27"
:editable="editable"
:button-classes="'px-1'"
:menu-classes="'bg-white rounded-t-none'"
@update:model-value="[maybeUpdateOptions(), save()]"
@@ -58,7 +60,7 @@
<span
v-if="field.type !== 'checkbox' || field.name"
ref="name"
contenteditable
:contenteditable="editable"
class="pr-1 cursor-text outline-none block"
style="min-width: 2px"
@keydown.enter.prevent="onNameEnter"
@@ -84,7 +86,7 @@
>Required</label>
</div>
<button
v-else
v-else-if="editable"
class="pr-1"
title="Remove"
@click.prevent="$emit('remove')"
@@ -113,7 +115,7 @@
class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
/>
<span
v-if="field?.type"
v-if="field?.type && editable"
class="h-4 w-4 md:h-2.5 md:w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
@mousedown.stop="startResize"
@touchstart="startTouchResize"
@@ -145,6 +147,11 @@ export default {
required: false,
default: false
},
editable: {
type: Boolean,
required: false,
default: true
},
field: {
type: Object,
required: false,
@@ -313,6 +320,10 @@ export default {
startDrag (e) {
this.selectedAreaRef.value = this.area
if (!this.editable) {
return
}
const rect = e.target.getBoundingClientRect()
this.dragFrom = { x: e.clientX - rect.left, y: e.clientY - rect.top }
app/javascript/template_builder/builder.vue
+13 -4
View File
@@ -16,6 +16,7 @@
</a>
<Contenteditable
:model-value="template.name"
:editable="editable"
class="text-3xl font-semibold focus:text-clip"
:icon-stroke-width="2.3"
@update:model-value="updateName"
@@ -76,6 +77,7 @@
:item="item"
:document="sortedDocuments[index]"
:accept-file-types="acceptFileTypes"
:editable="editable"
:template="template"
:is-direct-upload="isDirectUpload"
@scroll-to="scrollIntoDocument(item)"
@@ -90,7 +92,7 @@
:class="{ 'bg-base-100': withStickySubmitters }"
>
<Upload
v-if="sortedDocuments.length"
v-if="sortedDocuments.length && editable"
:accept-file-types="acceptFileTypes"
:template-id="template.id"
:is-direct-upload="isDirectUpload"
@@ -122,12 +124,13 @@
:document="document"
:is-drag="!!dragFieldType"
:draw-field="drawField"
:editable="editable"
@draw="onDraw"
@drop-field="onDropfield"
@remove-area="removeArea"
/>
<DocumentControls
v-if="isBreakpointLg"
v-if="isBreakpointLg && editable"
:with-arrows="template.schema.length > 1"
:item="template.schema.find((item) => item.attachment_uuid === document.uuid)"
:document="document"
@@ -142,7 +145,7 @@
/>
</template>
<div
v-if="sortedDocuments.length && isBreakpointLg"
v-if="sortedDocuments.length && isBreakpointLg && editable"
class="pb-4"
>
<Upload
@@ -180,7 +183,7 @@
</span>
</span>
<FieldType
v-if="sortedDocuments.length && !drawField"
v-if="sortedDocuments.length && !drawField && editable"
class="dropdown-top dropdown-end fixed bottom-4 right-4 z-10 md:hidden"
:model-value="''"
@update:model-value="startFieldDraw($event)"
@@ -231,6 +234,7 @@
:submitters="template.submitters"
:selected-submitter="selectedSubmitter"
:with-sticky-submitters="withStickySubmitters"
:editable="editable"
@set-draw="drawField = $event"
@set-drag="dragFieldType = $event"
@change-submitter="selectedSubmitter = $event"
@@ -300,6 +304,11 @@ export default {
required: false,
default: ''
},
editable: {
type: Boolean,
required: false,
default: true
},
acceptFileTypes: {
type: String,
required: false,
app/javascript/template_builder/contenteditable.vue
+7 -1
View File
@@ -5,7 +5,7 @@
>
<span
ref="contenteditable"
contenteditable
:contenteditable="editable"
style="min-width: 2px"
:class="iconInline ? 'inline' : 'block'"
class="peer outline-none focus:block"
@@ -24,6 +24,7 @@
*
</span>
<IconPencil
v-if="editable"
class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
:style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
title="Edit"
@@ -69,6 +70,11 @@ export default {
required: false,
default: false
},
editable: {
type: Boolean,
required: false,
default: true
},
iconStrokeWidth: {
type: Number,
required: false,
app/javascript/template_builder/document.vue
+6
View File
@@ -5,6 +5,7 @@
:key="image.id"
:ref="setPageRefs"
:number="index"
:editable="editable"
:areas="areasIndex[index]"
:is-drag="isDrag"
:draw-field="drawField"
@@ -38,6 +39,11 @@ export default {
type: Object,
required: true
},
editable: {
type: Boolean,
required: false,
default: true
},
drawField: {
type: Object,
required: false,
app/javascript/template_builder/field.vue
+8 -1
View File
@@ -13,6 +13,7 @@
<div class="flex items-center p-1 space-x-1">
<FieldType
v-model="field.type"
:editable="editable"
:button-width="20"
@update:model-value="[maybeUpdateOptions(), save()]"
@click="scrollToFirstArea"
@@ -20,6 +21,7 @@
<Contenteditable
ref="name"
:model-value="field.name || defaultName"
:editable="editable"
:icon-inline="true"
:icon-width="18"
:icon-stroke-width="1.6"
@@ -46,7 +48,7 @@
>Required</label>
</div>
<div
v-else
v-else-if="editable"
class="flex items-center space-x-1"
>
<span
@@ -211,6 +213,11 @@ export default {
field: {
type: Object,
required: true
},
editable: {
type: Boolean,
required: false,
default: true
}
},
emits: ['set-draw', 'remove', 'move-up', 'move-down', 'scroll-to'],
app/javascript/template_builder/field_submitter.vue
+9 -2
View File
@@ -25,6 +25,7 @@
v-model="selectedSubmitter.name"
class="cursor-text"
:icon-inline="true"
:editable="editable"
:select-on-edit-click="true"
:icon-width="18"
@update:model-value="$emit('name-change', selectedSubmitter)"
@@ -38,6 +39,7 @@
</span>
</label>
<ul
v-if="editable || !compact"
tabindex="0"
:class="menuClasses"
@click="closeDropdown"
@@ -62,7 +64,7 @@
</span>
</span>
<button
v-if="!compact && submitters.length > 1"
v-if="!compact && submitters.length > 1 && editable"
class="hidden group-hover:block px-2"
@click.stop="remove(submitter)"
>
@@ -70,7 +72,7 @@
</button>
</a>
</li>
<li v-if="submitters.length < 10">
<li v-if="submitters.length < 10 && editable">
<a
href="#"
class="flex px-2"
@@ -107,6 +109,11 @@ export default {
type: Array,
required: true
},
editable: {
type: Boolean,
required: false,
default: true
},
compact: {
type: Boolean,
required: false,
app/javascript/template_builder/field_type.vue
+6
View File
@@ -15,6 +15,7 @@
</label>
</slot>
<ul
v-if="editable"
tabindex="0"
class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3"
:class="menuClasses"
@@ -65,6 +66,11 @@ export default {
required: false,
default: ''
},
editable: {
type: Boolean,
required: false,
default: true
},
buttonWidth: {
type: Number,
required: false,
app/javascript/template_builder/fields.vue
+12 -2
View File
@@ -5,6 +5,7 @@
class="w-full rounded-lg"
:class="{ 'bg-base-100': withStickySubmitters }"
:submitters="submitters"
:editable="editable"
@new-submitter="save"
@remove="removeSubmitter"
@name-change="save"
@@ -17,6 +18,7 @@
:key="field.uuid"
:field="field"
:type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
:editable="editable"
@remove="removeField"
@move-up="move(field, -1)"
@move-down="move(field, 1)"
@@ -24,7 +26,10 @@
@set-draw="$emit('set-draw', $event)"
/>
</div>
<div class="grid grid-cols-3 gap-1 pb-2">
<div
v-if="editable"
class="grid grid-cols-3 gap-1 pb-2"
>
<template
v-for="(icon, type) in fieldIcons"
:key="type"
@@ -100,7 +105,7 @@
</template>
</div>
<div
v-if="fields.length < 4"
v-if="fields.length < 4 && editable"
class="text-xs p-2 border border-base-200 rounded"
>
<ul class="list-disc list-outside ml-3">
@@ -137,6 +142,11 @@ export default {
type: Array,
required: true
},
editable: {
type: Boolean,
required: false,
default: true
},
withStickySubmitters: {
type: Boolean,
required: false,
app/javascript/template_builder/page.vue
+10
View File
@@ -22,6 +22,7 @@
:ref="setAreaRefs"
:area="item.area"
:field="item.field"
:editable="editable"
@start-resize="resizeDirection = $event"
@stop-resize="resizeDirection = null"
@start-drag="isMove = true"
@@ -77,6 +78,11 @@ export default {
required: false,
default: null
},
editable: {
type: Boolean,
required: false,
default: true
},
isDrag: {
type: Boolean,
required: false,
@@ -141,6 +147,10 @@ export default {
return
}
if (!this.editable) {
return
}
this.showMask = true
this.$nextTick(() => {
app/javascript/template_builder/preview.vue
+9 -1
View File
@@ -12,7 +12,10 @@
class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1"
@click="$emit('scroll-to', item)"
>
<div class="flex justify-between w-full">
<div
v-if="editable"
class="flex justify-between w-full"
>
<div style="width: 26px" />
<div class="">
<ReplaceButton
@@ -95,6 +98,11 @@ export default {
type: Object,
required: true
},
editable: {
type: Boolean,
required: false,
default: true
},
acceptFileTypes: {
type: String,
required: false,