mirror of
https://github.com/docusealco/docuseal
synced 2026-11-04 06:42:32 -05:00
adjust mobile builder
This commit is contained in:
Pete Matsyburka committed
1 parent
d29be7c2cf
commit
3ed15e383b
12 files changed
+521
-638
No files matched your search
@@ -2,7 +2,7 @@
|
||||
<div
|
||||
ref="dragContainer"
|
||||
style="max-width: 1600px"
|
||||
:class="isNativeView ? 'px-4 pt-3 pb-6' : 'mx-auto pl-3 md:pl-4 h-full'"
|
||||
:class="isNativeView ? (isRevisionsView ? 'px-4 pt-3 pb-6' : 'px-4') : 'mx-auto pl-3 md:pl-4 h-full'"
|
||||
@dragover="onDragover"
|
||||
@drop="isDragFile = false"
|
||||
>
|
||||
@@ -25,79 +25,117 @@
|
||||
:is-default="defaultFields.includes(toRaw(dragField))"
|
||||
:is-required="defaultRequiredFields.includes(toRaw(dragField))"
|
||||
/>
|
||||
<div
|
||||
v-if="isDocumentsView"
|
||||
class="space-y-3"
|
||||
<MobileDrawer
|
||||
v-if="isDocumentsView || (withMobileDrawers && withDocumentsList && isBreakpointLg)"
|
||||
side="left"
|
||||
:inline="isDocumentsView"
|
||||
:open="isDocumentsDrawerOpen"
|
||||
@close="isDocumentsDrawerOpen = false"
|
||||
>
|
||||
<DocumentPreview
|
||||
v-for="(item, index) in template.schema"
|
||||
:key="item.attachment_uuid"
|
||||
:with-arrows="template.schema.length > 1"
|
||||
:with-visible-controls="true"
|
||||
:item="item"
|
||||
:document="sortedDocuments[index]"
|
||||
:accept-file-types="acceptFileTypes"
|
||||
:with-replace-button="withUploadButton"
|
||||
:with-google-drive="withGoogleDrive"
|
||||
:authenticity-token="authenticityToken"
|
||||
:editable="editable"
|
||||
:dynamic-documents="dynamicDocuments"
|
||||
:with-dynamic-documents="withDynamicDocuments"
|
||||
:template="template"
|
||||
@scroll-to="postNativeEvent('template-builder:scroll-to', { attachment_uuid: item.attachment_uuid }, true)"
|
||||
@remove="onDocumentRemove"
|
||||
@replace="onDocumentReplace"
|
||||
@up="moveDocument(item, -1)"
|
||||
@reorder="reorderFields"
|
||||
@edit="editModalDocumentUuid = item.attachment_uuid"
|
||||
@down="moveDocument(item, 1)"
|
||||
@change="save"
|
||||
/>
|
||||
<Upload
|
||||
v-if="editable && withUploadButton"
|
||||
:accept-file-types="acceptFileTypes"
|
||||
:authenticity-token="authenticityToken"
|
||||
:with-google-drive="withGoogleDrive"
|
||||
:template-id="template.id"
|
||||
@success="updateFromUpload"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isFieldsView">
|
||||
<Fields
|
||||
ref="fields"
|
||||
:fields="template.fields"
|
||||
:submitters="template.submitters"
|
||||
:selected-submitter="selectedSubmitter"
|
||||
:with-help="withHelp"
|
||||
:default-submitters="defaultSubmitters"
|
||||
:draw-field-type="drawFieldType"
|
||||
:custom-fields="customFields"
|
||||
:with-custom-fields="withCustomFields"
|
||||
:with-fields-search="withFieldsSearch"
|
||||
:default-fields="[...defaultRequiredFields, ...defaultFields]"
|
||||
:with-custom-fields-tab="false"
|
||||
:template="template"
|
||||
:default-required-fields="defaultRequiredFields"
|
||||
:detect-custom-fields-index="detectCustomFieldsIndex"
|
||||
:field-types="fieldTypes"
|
||||
:with-fields-detection="withFieldsDetection"
|
||||
:with-detect-existing-fields="withDetectExistingFields"
|
||||
:with-signature-id="withSignatureId"
|
||||
:with-prefillable="withPrefillable"
|
||||
:only-defined-fields="onlyDefinedFields"
|
||||
:editable="editable"
|
||||
:scroll-on-edit="false"
|
||||
@add-field="addField"
|
||||
@set-draw="postNativeEvent('template-builder:draw-field', { uuid: $event.field.uuid, option: $event.option }, true)"
|
||||
@remove-field="onRemoveField"
|
||||
@remove-submitter="onRemoveSubmitter"
|
||||
@select-submitter="selectedSubmitter = $event"
|
||||
@set-draw-type="postNativeEvent('template-builder:draw-field', { type: $event }, true)"
|
||||
@change-submitter="selectedSubmitter = $event"
|
||||
@scroll-to-area="onDrawerScrollToArea"
|
||||
@rebuild-variables-schema="rebuildVariablesSchema"
|
||||
/>
|
||||
</div>
|
||||
<div class="pt-3 space-y-3">
|
||||
<DocumentPreview
|
||||
v-for="(item, index) in template.schema"
|
||||
:key="item.attachment_uuid"
|
||||
:with-arrows="template.schema.length > 1"
|
||||
:with-visible-controls="true"
|
||||
:item="item"
|
||||
:document="sortedDocuments[index]"
|
||||
:accept-file-types="acceptFileTypes"
|
||||
:with-replace-button="withUploadButton"
|
||||
:with-google-drive="withGoogleDrive"
|
||||
:authenticity-token="authenticityToken"
|
||||
:editable="editable"
|
||||
:dynamic-documents="dynamicDocuments"
|
||||
:with-dynamic-documents="withDynamicDocuments"
|
||||
:template="template"
|
||||
@scroll-to="onDrawerScrollTo(item)"
|
||||
@remove="onDocumentRemove"
|
||||
@replace="onDocumentReplace"
|
||||
@up="moveDocument(item, -1)"
|
||||
@reorder="reorderFields"
|
||||
@edit="editModalDocumentUuid = item.attachment_uuid"
|
||||
@down="moveDocument(item, 1)"
|
||||
@change="save"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="editable && (withUploadButton || withAddPageButton)"
|
||||
class="pt-3 space-y-2"
|
||||
:class="isDocumentsView ? 'pb-6' : 'sticky bottom-0 bg-base-100 pb-3'"
|
||||
>
|
||||
<Upload
|
||||
v-if="withUploadButton"
|
||||
:accept-file-types="acceptFileTypes"
|
||||
:authenticity-token="authenticityToken"
|
||||
:with-google-drive="withGoogleDrive"
|
||||
:template-id="template.id"
|
||||
@success="updateFromUpload"
|
||||
/>
|
||||
<button
|
||||
v-if="withAddPageButton"
|
||||
class="btn btn-outline w-full add-blank-page-button"
|
||||
@click.prevent="addBlankPage"
|
||||
>
|
||||
<IconInnerShadowTop
|
||||
v-if="isLoadingBlankPage"
|
||||
class="animate-spin w-5 h-5"
|
||||
/>
|
||||
<IconPlus
|
||||
v-else
|
||||
class="w-5 h-5"
|
||||
/>
|
||||
{{ t('add_blank_page') }}
|
||||
</button>
|
||||
</div>
|
||||
</MobileDrawer>
|
||||
<MobileDrawer
|
||||
v-if="isFieldsView || (withMobileDrawers && withFieldsList && editable)"
|
||||
side="right"
|
||||
:inline="isFieldsView"
|
||||
:open="isFieldsDrawerOpen"
|
||||
:class="{ 'md:hidden': !isMobile }"
|
||||
@close="isFieldsDrawerOpen = false"
|
||||
>
|
||||
<div class="pb-6">
|
||||
<Fields
|
||||
:with-top-padding="true"
|
||||
:fields="template.fields"
|
||||
:submitters="template.submitters"
|
||||
:selected-submitter="selectedSubmitter"
|
||||
:with-help="false"
|
||||
:default-submitters="defaultSubmitters"
|
||||
:draw-field-type="drawFieldType"
|
||||
:custom-fields="customFields"
|
||||
:with-custom-fields="withCustomFields"
|
||||
:with-fields-search="withFieldsSearch"
|
||||
:default-fields="[...defaultRequiredFields, ...defaultFields]"
|
||||
:with-custom-fields-tab="false"
|
||||
:template="template"
|
||||
:default-required-fields="defaultRequiredFields"
|
||||
:detect-custom-fields-index="detectCustomFieldsIndex"
|
||||
:field-types="fieldTypes"
|
||||
:with-fields-detection="withFieldsDetection"
|
||||
:with-detect-existing-fields="withDetectExistingFields"
|
||||
:with-signature-id="withSignatureId"
|
||||
:with-prefillable="withPrefillable"
|
||||
:only-defined-fields="onlyDefinedFields"
|
||||
:editable="editable"
|
||||
:scroll-on-edit="false"
|
||||
@add-field="addField"
|
||||
@set-draw="onDrawerSetDraw"
|
||||
@remove-field="onRemoveField"
|
||||
@remove-submitter="onRemoveSubmitter"
|
||||
@select-submitter="selectedSubmitter = $event"
|
||||
@set-draw-type="onDrawerSetDrawType"
|
||||
@set-drag="dragField = $event"
|
||||
@set-drag-placeholder="$refs.dragPlaceholder.dragPlaceholder = $event"
|
||||
@drag-end="[dragField = null, $refs.dragPlaceholder.dragPlaceholder = null]"
|
||||
@change-submitter="selectedSubmitter = $event"
|
||||
@scroll-to-area="onDrawerScrollToArea"
|
||||
@rebuild-variables-schema="rebuildVariablesSchema"
|
||||
/>
|
||||
</div>
|
||||
</MobileDrawer>
|
||||
<div
|
||||
v-if="isRevisionsView && !isRevisionsModalOpen"
|
||||
class="flex justify-center py-8"
|
||||
@@ -636,53 +674,7 @@
|
||||
@delete-selected-areas="deleteSelectedAreas"
|
||||
@autodetect-fields="detectFieldsForPage"
|
||||
/>
|
||||
<DocumentControls
|
||||
v-if="isBreakpointLg && editable"
|
||||
:with-arrows="template.schema.length > 1"
|
||||
:item="template.schema.find((item) => item.attachment_uuid === document.uuid)"
|
||||
:with-replace-button="withUploadButton"
|
||||
:with-google-drive="withGoogleDrive"
|
||||
:authenticity-token="authenticityToken"
|
||||
:accept-file-types="acceptFileTypes"
|
||||
:document="document"
|
||||
:template="template"
|
||||
class="pb-2 mb-2 border-b border-base-300 border-dashed"
|
||||
@remove="onDocumentRemove"
|
||||
@replace="onDocumentReplace"
|
||||
@up="moveDocument(template.schema.find((item) => item.attachment_uuid === document.uuid), -1)"
|
||||
@down="moveDocument(template.schema.find((item) => item.attachment_uuid === document.uuid), 1)"
|
||||
@change="save"
|
||||
/>
|
||||
</template>
|
||||
<div
|
||||
v-if="sortedDocuments.length && isBreakpointLg && editable"
|
||||
class="pb-4 space-y-2"
|
||||
>
|
||||
<Upload
|
||||
v-if="withUploadButton"
|
||||
:template-id="template.id"
|
||||
:accept-file-types="acceptFileTypes"
|
||||
:authenticity-token="authenticityToken"
|
||||
:with-google-drive="withGoogleDrive"
|
||||
@success="updateFromUpload"
|
||||
/>
|
||||
<button
|
||||
v-if="withAddPageButton"
|
||||
id="add_blank_page_button"
|
||||
class="btn btn-outline w-full mt-4 add-blank-page-button"
|
||||
@click.prevent="addBlankPage"
|
||||
>
|
||||
<IconInnerShadowTop
|
||||
v-if="isLoadingBlankPage"
|
||||
class="animate-spin w-5 h-5"
|
||||
/>
|
||||
<IconPlus
|
||||
v-else
|
||||
class="w-5 h-5"
|
||||
/>
|
||||
{{ t('add_blank_page') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@@ -797,27 +789,52 @@
|
||||
@click="[drawField = null, drawOption = null]"
|
||||
/>
|
||||
</native-action>
|
||||
<MobileDrawField
|
||||
<button
|
||||
v-if="drawField && (isBreakpointLg || isMobile) && !nativePlatform"
|
||||
:draw-field="drawField"
|
||||
:fields="template.fields"
|
||||
:submitters="template.submitters"
|
||||
:selected-submitter="selectedSubmitter"
|
||||
class="btn btn-neutral text-white btn-lg rounded-full no-animation transition-none absolute bottom-4 -left-3 md:-left-4 right-0 mx-auto w-fit z-10 flex-nowrap gap-2 px-5 max-[400px]:px-4"
|
||||
:class="{ 'md:hidden': !isMobile }"
|
||||
:editable="editable"
|
||||
@cancel="[drawField = null, drawOption = null]"
|
||||
@change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
|
||||
/>
|
||||
<MobileFields
|
||||
v-if="sortedDocuments.length && !drawField && editable && !nativePlatform"
|
||||
:fields="template.fields"
|
||||
:default-fields="[...defaultRequiredFields, ...defaultFields]"
|
||||
:default-required-fields="defaultRequiredFields"
|
||||
:field-types="fieldTypes"
|
||||
style="max-width: calc(100% - 11rem); --btn-focus-scale: 1"
|
||||
@click.prevent="[drawField = null, drawOption = null]"
|
||||
>
|
||||
<component
|
||||
:is="fieldIcons[drawField.type]"
|
||||
:width="22"
|
||||
:height="22"
|
||||
:stroke-width="1.6"
|
||||
class="flex-shrink-0 max-[400px]:hidden"
|
||||
/>
|
||||
<span class="truncate normal-case font-normal text-[17px] max-[400px]:text-[15px]">{{ t('draw_field').replace('{field}', fieldNames[drawField.type]) }}</span>
|
||||
<IconX
|
||||
:width="18"
|
||||
:height="18"
|
||||
:stroke-width="2.5"
|
||||
class="flex-shrink-0"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="withMobileDrawers && withDocumentsList && isBreakpointLg"
|
||||
class="btn btn-neutral text-white btn-circle btn-lg absolute bottom-4 left-1 md:left-0 z-10"
|
||||
:title="t('documents')"
|
||||
@click.prevent="isDocumentsDrawerOpen = true"
|
||||
>
|
||||
<IconFiles
|
||||
:width="26"
|
||||
:height="26"
|
||||
:stroke-width="1.6"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="withMobileDrawers && withFieldsList && editable"
|
||||
class="btn btn-neutral text-white btn-circle btn-lg absolute bottom-4 right-4 z-10"
|
||||
:class="{ 'md:hidden': !isMobile }"
|
||||
:selected-submitter="selectedSubmitter"
|
||||
@select="startFieldDraw($event)"
|
||||
/>
|
||||
title="Fields"
|
||||
@click.prevent="isFieldsDrawerOpen = true"
|
||||
>
|
||||
<IconPlus
|
||||
:width="28"
|
||||
:height="28"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<Transition
|
||||
enter-active-class="transition-all duration-300 ease-out"
|
||||
@@ -920,18 +937,16 @@ import Dropzone from './dropzone'
|
||||
import HoverDropzone from './hover_dropzone'
|
||||
import DragPlaceholder from './drag_placeholder'
|
||||
import Fields from './fields'
|
||||
import MobileDrawField from './mobile_draw_field'
|
||||
import MobileDrawer from './mobile_drawer'
|
||||
import FieldType from './field_type'
|
||||
import Document from './document'
|
||||
import Logo from './logo'
|
||||
import Contenteditable from './contenteditable'
|
||||
import DocumentPreview from './preview'
|
||||
import DocumentControls from './controls'
|
||||
import MobileFields from './mobile_fields'
|
||||
import FieldSubmitter from './field_submitter'
|
||||
import RevisionsModal from './revisions_modal'
|
||||
import DocumentsEditorModal from './documents_editor_modal'
|
||||
import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload, IconHistory, IconX } from '@tabler/icons-vue'
|
||||
import { IconPlus, IconFiles, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload, IconHistory, IconX } from '@tabler/icons-vue'
|
||||
import { v4 } from 'uuid'
|
||||
import { ref, computed, toRaw, defineAsyncComponent } from 'vue'
|
||||
import * as i18n from './i18n'
|
||||
@@ -955,15 +970,14 @@ export default {
|
||||
Document,
|
||||
Fields,
|
||||
IconInfoCircle,
|
||||
MobileDrawField,
|
||||
MobileDrawer,
|
||||
IconPlus,
|
||||
IconFiles,
|
||||
IconWritingSign,
|
||||
MobileFields,
|
||||
Logo,
|
||||
Dropzone,
|
||||
HoverDropzone,
|
||||
DocumentPreview,
|
||||
DocumentControls,
|
||||
IconInnerShadowTop,
|
||||
Contenteditable,
|
||||
IconUsersPlus,
|
||||
@@ -1362,6 +1376,8 @@ export default {
|
||||
isDragFile: false,
|
||||
isMathLoaded: false,
|
||||
isRevisionsModalOpen: false,
|
||||
isDocumentsDrawerOpen: false,
|
||||
isFieldsDrawerOpen: false,
|
||||
editModalDocumentUuid: null,
|
||||
revisions: [],
|
||||
beforeRevisionSnapshot: null,
|
||||
@@ -1407,12 +1423,16 @@ export default {
|
||||
return this.selectedAreasRef.value[this.selectedAreasRef.value.length - 1]
|
||||
},
|
||||
fieldNames: FieldType.computed.fieldNames,
|
||||
fieldIcons: FieldType.computed.fieldIcons,
|
||||
isDocumentsView () {
|
||||
return this.view === 'documents'
|
||||
},
|
||||
isFieldsView () {
|
||||
return this.view === 'fields'
|
||||
},
|
||||
withMobileDrawers () {
|
||||
return !this.nativePlatform && !this.isNativeView && this.sortedDocuments.length > 0
|
||||
},
|
||||
isRevisionsView () {
|
||||
return this.view === 'revisions'
|
||||
},
|
||||
@@ -2406,10 +2426,40 @@ export default {
|
||||
postNativeEvent (name, detail, dismiss = false) {
|
||||
window.webkit?.messageHandlers?.modal?.postMessage({ action: 'dispatch', name, detail: JSON.stringify(detail), dismiss: dismiss ? 'true' : 'false' })
|
||||
},
|
||||
onDrawerScrollTo (item) {
|
||||
if (this.isNativeView) {
|
||||
this.postNativeEvent('template-builder:scroll-to', { attachment_uuid: item.attachment_uuid }, true)
|
||||
} else {
|
||||
this.isDocumentsDrawerOpen = false
|
||||
this.scrollIntoDocument(item)
|
||||
}
|
||||
},
|
||||
onDrawerSetDraw ({ field, option }) {
|
||||
if (this.isNativeView) {
|
||||
this.postNativeEvent('template-builder:draw-field', { uuid: field.uuid, option }, true)
|
||||
} else {
|
||||
this.isFieldsDrawerOpen = false
|
||||
this.drawField = field
|
||||
this.drawOption = option
|
||||
}
|
||||
},
|
||||
onDrawerSetDrawType (type) {
|
||||
if (this.isNativeView) {
|
||||
this.postNativeEvent('template-builder:draw-field', { type }, true)
|
||||
} else {
|
||||
this.isFieldsDrawerOpen = false
|
||||
this.startFieldDraw({ type })
|
||||
}
|
||||
},
|
||||
onDrawerScrollToArea (area) {
|
||||
const field = this.template.fields.find((f) => (f.areas || []).includes(area))
|
||||
if (this.isNativeView) {
|
||||
const field = this.template.fields.find((f) => (f.areas || []).includes(area))
|
||||
|
||||
this.postNativeEvent('template-builder:select-field', { uuid: field?.uuid, attachment_uuid: area.attachment_uuid, page: area.page, x: area.x, y: area.y }, true)
|
||||
this.postNativeEvent('template-builder:select-field', { uuid: field?.uuid, attachment_uuid: area.attachment_uuid, page: area.page, x: area.x, y: area.y }, true)
|
||||
} else {
|
||||
this.isFieldsDrawerOpen = false
|
||||
this.scrollToArea(area)
|
||||
}
|
||||
},
|
||||
syncNative () {
|
||||
const { schema, documents, fields, submitters } = this.template
|
||||
|
||||
@@ -1,105 +0,0 @@
|
||||
<template>
|
||||
<div class="flex space-x-2">
|
||||
<Contenteditable
|
||||
class="w-full block mr-6 document-preview-name"
|
||||
:model-value="item.name"
|
||||
:icon-width="16"
|
||||
@update:model-value="onUpdateName"
|
||||
/>
|
||||
<ReplaceButton
|
||||
v-if="withReplaceButton"
|
||||
:template-id="template.id"
|
||||
:accept-file-types="acceptFileTypes"
|
||||
:authenticity-token="authenticityToken"
|
||||
:with-google-drive="withGoogleDrive"
|
||||
:google-drive-file-id="item.google_drive_file_id"
|
||||
@click.stop
|
||||
@success="$emit('replace', { replaceSchemaItem: item, ...$event })"
|
||||
/>
|
||||
<button
|
||||
v-if="withArrows"
|
||||
class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
|
||||
style="width: 24px; height: 24px"
|
||||
@click.stop="$emit('up', item)"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
<button
|
||||
v-if="withArrows"
|
||||
class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
|
||||
style="width: 24px; height: 24px"
|
||||
@click.stop="$emit('down', item)"
|
||||
>
|
||||
↓
|
||||
</button>
|
||||
<button
|
||||
class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
|
||||
style="width: 24px; height: 24px"
|
||||
@click.stop="$emit('remove', item)"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Contenteditable from './contenteditable'
|
||||
import Upload from './upload'
|
||||
import ReplaceButton from './replace'
|
||||
|
||||
export default {
|
||||
name: 'DocumentControls',
|
||||
components: {
|
||||
Contenteditable,
|
||||
ReplaceButton
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
template: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
document: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
acceptFileTypes: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'image/*, application/pdf, application/zip, application/json'
|
||||
},
|
||||
withReplaceButton: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: true
|
||||
},
|
||||
withGoogleDrive: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
authenticityToken: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
withArrows: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
emits: ['change', 'remove', 'up', 'down', 'replace'],
|
||||
methods: {
|
||||
upload: Upload.methods.upload,
|
||||
onUpdateName (value) {
|
||||
this.item.name = value
|
||||
|
||||
this.$emit('change')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-1 min-h-0">
|
||||
<div class="flex flex-col md:flex-row flex-1 min-h-0">
|
||||
<div
|
||||
class="flex-1 min-h-0 flex items-center justify-center px-6 py-4"
|
||||
class="flex-1 min-h-0 flex items-center justify-center px-4 md:px-6 py-4"
|
||||
style="container-type: size"
|
||||
>
|
||||
<div
|
||||
@@ -46,73 +46,75 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-56 flex-none border-l px-4 py-4 space-y-2 flex flex-col">
|
||||
<button
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
|
||||
:disabled="!!isProcessing"
|
||||
@click.prevent="submit(true)"
|
||||
>
|
||||
<IconInnerShadowTop
|
||||
v-if="isProcessing === 'scan'"
|
||||
class="w-4 h-4 animate-spin"
|
||||
/>
|
||||
<IconScan
|
||||
v-else
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
{{ t('crop_and_scan') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
|
||||
:disabled="!!isProcessing"
|
||||
@click.prevent="submit(false)"
|
||||
>
|
||||
<IconInnerShadowTop
|
||||
v-if="isProcessing === 'crop'"
|
||||
class="w-4 h-4 animate-spin"
|
||||
/>
|
||||
<IconCrop
|
||||
v-else
|
||||
width="22"
|
||||
height="22"
|
||||
style="margin-left: -3px"
|
||||
:stroke-width="1.5"
|
||||
/>
|
||||
<span :style="{ 'margin-left': isProcessing === 'crop' ? '0px' : '-3px' }">
|
||||
{{ t('crop') }}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded"
|
||||
@click.prevent="$emit('cancel')"
|
||||
>
|
||||
<IconX class="w-4 h-4" />
|
||||
{{ t('cancel') }}
|
||||
</button>
|
||||
<div class="border-t !mt-3 !mb-1" />
|
||||
<button
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded"
|
||||
@click.prevent="rotateCw"
|
||||
>
|
||||
<IconRotateClockwise class="w-4 h-4" />
|
||||
{{ t('rotate') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded"
|
||||
:class="{ 'btn-active': flipH }"
|
||||
@click.prevent="toggleFlip('flipH')"
|
||||
>
|
||||
<IconFlipVertical class="w-4 h-4" />
|
||||
{{ t('flip_horizontal') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded"
|
||||
:class="{ 'btn-active': flipV }"
|
||||
@click.prevent="toggleFlip('flipV')"
|
||||
>
|
||||
<IconFlipHorizontal class="w-4 h-4" />
|
||||
{{ t('flip_vertical') }}
|
||||
</button>
|
||||
<div class="flex-none px-4 border-t py-3 md:w-56 md:border-t-0 md:border-l md:py-4 md:space-y-2 md:flex md:flex-col">
|
||||
<div class="grid grid-cols-3 gap-2 md:block md:space-y-2">
|
||||
<button
|
||||
class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
:disabled="!!isProcessing"
|
||||
@click.prevent="submit(true)"
|
||||
>
|
||||
<IconInnerShadowTop
|
||||
v-if="isProcessing === 'scan'"
|
||||
class="w-4 h-4 animate-spin"
|
||||
/>
|
||||
<IconScan
|
||||
v-else
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
{{ t('crop_and_scan') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
:disabled="!!isProcessing"
|
||||
@click.prevent="submit(false)"
|
||||
>
|
||||
<IconInnerShadowTop
|
||||
v-if="isProcessing === 'crop'"
|
||||
class="w-4 h-4 animate-spin"
|
||||
/>
|
||||
<IconCrop
|
||||
v-else
|
||||
width="22"
|
||||
height="22"
|
||||
style="margin-left: -3px"
|
||||
:stroke-width="1.5"
|
||||
/>
|
||||
<span :style="{ 'margin-left': isProcessing === 'crop' ? '0px' : '-3px' }">
|
||||
{{ t('crop') }}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm normal-case font-normal rounded flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
@click.prevent="$emit('cancel')"
|
||||
>
|
||||
<IconX class="w-4 h-4" />
|
||||
{{ t('cancel') }}
|
||||
</button>
|
||||
<div class="hidden md:block border-t !mt-3 !mb-1" />
|
||||
<button
|
||||
class="btn btn-sm normal-case font-normal rounded flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
@click.prevent="rotateCw"
|
||||
>
|
||||
<IconRotateClockwise class="w-4 h-4" />
|
||||
{{ t('rotate') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm normal-case font-normal rounded flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
:class="{ 'btn-active': flipH }"
|
||||
@click.prevent="toggleFlip('flipH')"
|
||||
>
|
||||
<IconFlipVertical class="w-4 h-4" />
|
||||
{{ t('flip_horizontal') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm normal-case font-normal rounded flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
:class="{ 'btn-active': flipV }"
|
||||
@click.prevent="toggleFlip('flipV')"
|
||||
>
|
||||
<IconFlipHorizontal class="w-4 h-4" />
|
||||
{{ t('flip_vertical') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
@click.prevent="$emit('close')"
|
||||
/>
|
||||
<div
|
||||
class="modal-box relative flex flex-col p-0 w-full h-full rounded-2xl"
|
||||
style="max-width: 1240px; max-height: 92vh"
|
||||
class="modal-box relative flex flex-col p-0 w-full h-full rounded-none md:rounded-2xl overflow-x-hidden !max-h-full md:!max-h-[92vh]"
|
||||
style="max-width: 1240px"
|
||||
>
|
||||
<div class="flex justify-between items-center border-b py-2 px-6 font-medium">
|
||||
<span
|
||||
@@ -26,7 +26,9 @@
|
||||
@click.prevent="$emit('close')"
|
||||
>×</a>
|
||||
</div>
|
||||
<div class="flex flex-1 min-h-0 relative">
|
||||
<div
|
||||
class="flex flex-col md:flex-row flex-1 min-h-0 relative"
|
||||
>
|
||||
<CropView
|
||||
v-if="cropPageItem"
|
||||
class="absolute inset-0 z-10 bg-base-100"
|
||||
@@ -53,7 +55,9 @@
|
||||
class="contents"
|
||||
:class="{ invisible: cropPageItem || redactPageItem }"
|
||||
>
|
||||
<div class="flex-1 overflow-y-auto px-6 py-4 space-y-4">
|
||||
<div
|
||||
class="flex-1 overflow-y-auto overflow-x-hidden px-4 md:px-6 py-4 space-y-4"
|
||||
>
|
||||
<div
|
||||
v-for="(doc, docIndex) in layout"
|
||||
:key="doc.attachmentUuid"
|
||||
@@ -170,7 +174,7 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="(!collapsedDocumentsIndex[doc.attachmentUuid] || layout.length === 1) && doc.pages.length"
|
||||
class="grid grid-cols-4 gap-3"
|
||||
class="grid grid-cols-2 md:grid-cols-4 gap-3"
|
||||
@dragover.prevent="onGridDragover(docIndex, $event)"
|
||||
@drop.prevent="onPageDrop"
|
||||
>
|
||||
@@ -178,7 +182,7 @@
|
||||
v-for="(page, pageIndex) in doc.pages"
|
||||
:key="page.id"
|
||||
:data-page-id="page.id"
|
||||
class="relative cursor-pointer group"
|
||||
class="relative min-w-0 cursor-pointer group"
|
||||
draggable="true"
|
||||
@click="selectedPageId = page.id"
|
||||
@mousedown="onPageMousedown(page, $event)"
|
||||
@@ -245,26 +249,30 @@
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-56 flex-none border-l px-4 py-4 flex flex-col">
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
class="flex-none px-4 border-t py-3 flex flex-col gap-3 md:w-56 md:border-t-0 md:border-l md:py-4 md:gap-0"
|
||||
>
|
||||
<div class="grid grid-cols-4 gap-2 md:block md:space-y-2">
|
||||
<button
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
|
||||
class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
:disabled="!selectedPageId"
|
||||
@click.prevent="movePage(-1)"
|
||||
>
|
||||
<IconArrowBackUp class="w-4 h-4" />
|
||||
{{ t('move_backward') }}
|
||||
<span class="md:hidden">{{ t('backward') }}</span>
|
||||
<span class="hidden md:inline">{{ t('move_backward') }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
|
||||
class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
:disabled="!selectedPageId"
|
||||
@click.prevent="movePage(1)"
|
||||
>
|
||||
<IconArrowForwardUp class="w-4 h-4" />
|
||||
{{ t('move_forward') }}
|
||||
<span class="md:hidden">{{ t('forward') }}</span>
|
||||
<span class="hidden md:inline">{{ t('move_forward') }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
|
||||
class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
:disabled="!selectedPageId"
|
||||
@click.prevent="rotatePage"
|
||||
>
|
||||
@@ -272,7 +280,7 @@
|
||||
{{ t('rotate') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
|
||||
class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
:disabled="!selectedPageId || isReplacing"
|
||||
@click.prevent="replaceSelected"
|
||||
>
|
||||
@@ -303,7 +311,7 @@
|
||||
@change="onReplaceDocFilesPicked"
|
||||
>
|
||||
<button
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
|
||||
class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
:disabled="!selectedPageId"
|
||||
@click.prevent="openRedactView"
|
||||
>
|
||||
@@ -312,7 +320,7 @@
|
||||
</button>
|
||||
<button
|
||||
v-if="isSelectedPageCroppable"
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
|
||||
class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
@click.prevent="openCropView"
|
||||
>
|
||||
<IconCrop
|
||||
@@ -326,15 +334,16 @@
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300 text-red-600"
|
||||
class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 text-red-600 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
:disabled="!selectedPageId"
|
||||
@click.prevent="removePage"
|
||||
>
|
||||
<IconTrashX class="w-4 h-4" />
|
||||
{{ t('remove_page') }}
|
||||
<span class="md:hidden">{{ t('remove') }}</span>
|
||||
<span class="hidden md:inline">{{ t('remove_page') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-auto space-y-2">
|
||||
<div class="grid grid-cols-2 gap-2 md:block md:mt-auto md:space-y-2">
|
||||
<Upload
|
||||
:template-id="template.id"
|
||||
:accept-file-types="acceptFileTypes"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="flex flex-1 min-h-0">
|
||||
<div class="flex-1 overflow-y-auto px-6 py-4">
|
||||
<div class="flex flex-col md:flex-row flex-1 min-h-0">
|
||||
<div class="flex-1 overflow-y-auto overflow-x-hidden px-4 md:px-6 py-4">
|
||||
<div
|
||||
ref="pageEl"
|
||||
class="relative mx-auto select-none cursor-crosshair"
|
||||
@@ -48,8 +48,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-56 flex-none border-l px-4 py-4 space-y-2">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex-none px-4 border-t py-3 md:w-56 md:border-t-0 md:border-l md:py-4 md:space-y-2">
|
||||
<div class="flex items-center justify-between mb-3 md:mb-1">
|
||||
<span class="text-sm pl-1">{{ t('color') }}</span>
|
||||
<div
|
||||
class="join rounded"
|
||||
@@ -69,30 +69,32 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
|
||||
:disabled="!hasRedactions && !wasReset"
|
||||
@click.prevent="apply"
|
||||
>
|
||||
<IconCheck class="w-4 h-4" />
|
||||
{{ t('apply') }}
|
||||
</button>
|
||||
<div class="border-t !mt-3 !mb-1" />
|
||||
<button
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded disabled:bg-base-300"
|
||||
:disabled="!hasRedactions"
|
||||
@click.prevent="reset"
|
||||
>
|
||||
<IconRotate class="w-4 h-4" />
|
||||
{{ t('reset') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm w-full justify-start normal-case font-normal rounded"
|
||||
@click.prevent="$emit('cancel')"
|
||||
>
|
||||
<IconX class="w-4 h-4" />
|
||||
{{ t('cancel') }}
|
||||
</button>
|
||||
<div class="grid grid-cols-3 gap-2 md:block md:space-y-2">
|
||||
<button
|
||||
class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
:disabled="!hasRedactions && !wasReset"
|
||||
@click.prevent="apply"
|
||||
>
|
||||
<IconCheck class="w-4 h-4" />
|
||||
{{ t('apply') }}
|
||||
</button>
|
||||
<div class="hidden md:block border-t !mt-3 !mb-1" />
|
||||
<button
|
||||
class="btn btn-sm normal-case font-normal rounded disabled:bg-base-300 flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
:disabled="!hasRedactions"
|
||||
@click.prevent="reset"
|
||||
>
|
||||
<IconRotate class="w-4 h-4" />
|
||||
{{ t('reset') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm normal-case font-normal rounded flex-col gap-1 h-auto min-h-0 py-2 px-1 text-xs leading-tight whitespace-normal md:flex-row md:gap-2 md:h-8 md:min-h-[2rem] md:py-0 md:px-3 md:text-sm md:whitespace-nowrap md:w-full md:justify-start"
|
||||
@click.prevent="$emit('cancel')"
|
||||
>
|
||||
<IconX class="w-4 h-4" />
|
||||
{{ t('cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
:style="dragPlaceholderStyle"
|
||||
:field="field"
|
||||
:with-options="false"
|
||||
class="fixed z-20 pointer-events-none"
|
||||
class="fixed z-50 pointer-events-none"
|
||||
:editable="false"
|
||||
/>
|
||||
<CustomField
|
||||
@@ -13,13 +13,13 @@
|
||||
ref="dragPlaceholder"
|
||||
:style="dragPlaceholderStyle"
|
||||
:field="field"
|
||||
class="fixed z-20 pointer-events-none opacity-90"
|
||||
class="fixed z-50 pointer-events-none opacity-90"
|
||||
/>
|
||||
<div
|
||||
v-else-if="dragPlaceholder && (isDefault || isRequired) && !isMask && field"
|
||||
ref="dragPlaceholder"
|
||||
:style="[dragPlaceholderStyle, { backgroundColor: backgroundColor }]"
|
||||
class="fixed z-20 border border-base-300 rounded group default-field fields-list-item pointer-events-none"
|
||||
class="fixed z-50 border border-base-300 rounded group default-field fields-list-item pointer-events-none"
|
||||
>
|
||||
<div class="flex items-center justify-between relative cursor-grab">
|
||||
<div class="flex items-center p-1 space-x-1">
|
||||
@@ -45,7 +45,7 @@
|
||||
<button
|
||||
v-else-if="dragPlaceholder && !isMask && field"
|
||||
ref="dragPlaceholder"
|
||||
class="fixed field-type-button z-20 flex items-center justify-center border border-dashed w-full rounded border-base-content/20 opacity-90 pointer-events-none"
|
||||
class="fixed field-type-button z-50 flex items-center justify-center border border-dashed w-full rounded border-base-content/20 opacity-90 pointer-events-none"
|
||||
:style="[dragPlaceholderStyle, { backgroundColor }]"
|
||||
>
|
||||
<div
|
||||
|
||||
@@ -114,6 +114,12 @@
|
||||
:title="t('settings')"
|
||||
class="cursor-pointer flex items-center"
|
||||
:class="[iconColorClass, { 'pr-1': isMobile }]"
|
||||
@touchstart="onHandleTouchstart"
|
||||
@touchmove="onHandleTouchmove"
|
||||
@touchend="onHandleTouchend"
|
||||
@touchcancel="onHandleTouchend"
|
||||
@mousedown="dropdownWasOpen = $event.currentTarget.parentElement.contains($event.currentTarget.getRootNode().activeElement)"
|
||||
@click="dropdownWasOpen && closeDropdown()"
|
||||
>
|
||||
<IconDotsVertical
|
||||
v-if="isMobile"
|
||||
@@ -417,9 +423,11 @@ export default {
|
||||
default: true
|
||||
}
|
||||
},
|
||||
emits: ['set-draw', 'remove', 'scroll-to', 'save', 'add-custom-field'],
|
||||
emits: ['set-draw', 'remove', 'scroll-to', 'save', 'add-custom-field', 'touch-drag', 'touch-drag-end'],
|
||||
data () {
|
||||
return {
|
||||
touchDrag: null,
|
||||
dropdownWasOpen: false,
|
||||
isExpandOptions: false,
|
||||
isNameFocus: false,
|
||||
isShowFormulaModal: false,
|
||||
@@ -471,6 +479,37 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onHandleTouchstart (e) {
|
||||
if (!this.isMobile) return
|
||||
|
||||
this.touchDrag = { startY: e.touches[0].clientY, moved: false }
|
||||
},
|
||||
onHandleTouchmove (e) {
|
||||
if (!this.touchDrag) return
|
||||
|
||||
const { clientX, clientY } = e.touches[0]
|
||||
|
||||
if (!this.touchDrag.moved && Math.abs(clientY - this.touchDrag.startY) < 6) return
|
||||
|
||||
this.touchDrag.moved = true
|
||||
|
||||
e.preventDefault()
|
||||
|
||||
this.$emit('touch-drag', { field: this.field, x: clientX, y: clientY })
|
||||
},
|
||||
onHandleTouchend (e) {
|
||||
if (!this.touchDrag) return
|
||||
|
||||
if (this.touchDrag.moved) {
|
||||
e.preventDefault()
|
||||
|
||||
e.currentTarget.blur()
|
||||
|
||||
this.$emit('touch-drag-end')
|
||||
}
|
||||
|
||||
this.touchDrag = null
|
||||
},
|
||||
removeArea (area) {
|
||||
this.field.areas.splice(this.field.areas.indexOf(area), 1)
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
:class="withStickySubmitters ? 'sticky top-0 z-[1]' : ''"
|
||||
:class="{ 'sticky top-0 z-[1]': withStickySubmitters, 'bg-base-100': withStickySubmitters && ['', null, 'transparent'].includes(backgroundColor), 'pt-3': withTopPadding }"
|
||||
:style="withStickySubmitters ? { backgroundColor } : {}"
|
||||
class="flex items-center gap-1"
|
||||
>
|
||||
@@ -64,6 +64,8 @@
|
||||
@remove="removeField"
|
||||
@scroll-to="$emit('scroll-to-area', $event)"
|
||||
@set-draw="$emit('set-draw', $event)"
|
||||
@touch-drag="onTouchDrag"
|
||||
@touch-drag-end="onTouchDragEnd"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
@@ -356,24 +358,16 @@
|
||||
width="22"
|
||||
class="animate-spin"
|
||||
/>
|
||||
<span
|
||||
v-if="analyzingProgress"
|
||||
class="hidden md:inline"
|
||||
>
|
||||
<span v-if="analyzingProgress">
|
||||
{{ Math.round(analyzingProgress * 100) }}% {{ t('analyzing_') }}
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="hidden md:inline"
|
||||
>
|
||||
<span v-else>
|
||||
{{ fieldPagesLoaded }} / {{ numberOfPages }} {{ t('processing_') }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<IconSparkles width="22" />
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
>
|
||||
<span>
|
||||
{{ t('autodetect_fields') }}
|
||||
</span>
|
||||
</template>
|
||||
@@ -518,6 +512,11 @@ export default {
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
withTopPadding: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
fieldTypes: {
|
||||
type: Array,
|
||||
required: false,
|
||||
@@ -829,6 +828,8 @@ export default {
|
||||
|
||||
this.save()
|
||||
|
||||
window.webkit?.messageHandlers?.flash?.postMessage({ style: 'notice', message: this.t('fields_detected').replace('{count}', (data.fields || fields).length) })
|
||||
|
||||
break
|
||||
} else if (data.fields) {
|
||||
data.fields.forEach((f) => {
|
||||
@@ -884,19 +885,58 @@ export default {
|
||||
},
|
||||
onFieldDragover (e) {
|
||||
if (this.fieldsDragFieldRef.value) {
|
||||
const targetField = e.target.closest('[data-uuid]')
|
||||
const dragField = this.$refs.fields.querySelector(`[data-uuid="${this.fieldsDragFieldRef.value.uuid}"]`)
|
||||
this.moveFieldElement(this.fieldsDragFieldRef.value, e.target.closest('[data-uuid]'))
|
||||
}
|
||||
},
|
||||
onTouchDrag ({ field, x, y }) {
|
||||
const dragField = this.$refs.fields.querySelector(`[data-uuid="${field.uuid}"]`)
|
||||
|
||||
if (dragField && targetField && targetField !== dragField) {
|
||||
const fields = Array.from(this.$refs.fields.children)
|
||||
const currentIndex = fields.indexOf(dragField)
|
||||
const targetIndex = fields.indexOf(targetField)
|
||||
if (!dragField) return
|
||||
|
||||
if (currentIndex < targetIndex) {
|
||||
targetField.after(dragField)
|
||||
} else {
|
||||
targetField.before(dragField)
|
||||
}
|
||||
if (!this.touchPreview) {
|
||||
const rect = dragField.getBoundingClientRect()
|
||||
const el = dragField.cloneNode(true)
|
||||
const root = this.$el.getRootNode()
|
||||
|
||||
Object.assign(el.style, { position: 'fixed', left: `${rect.left}px`, top: `${rect.top}px`, width: `${rect.width}px`, margin: 0, zIndex: 50, pointerEvents: 'none', opacity: 0.9 })
|
||||
|
||||
;(root === document ? document.body : root).appendChild(el)
|
||||
|
||||
dragField.style.opacity = 0.4
|
||||
|
||||
this.touchPreview = { el, dragField, offsetY: y - rect.top }
|
||||
}
|
||||
|
||||
this.touchPreview.el.style.top = `${y - this.touchPreview.offsetY}px`
|
||||
|
||||
const root = this.$el.getRootNode()
|
||||
const targetField = (root.elementFromPoint ? root : document).elementFromPoint(x, y)?.closest('[data-uuid]')
|
||||
|
||||
if (targetField && this.$refs.fields.contains(targetField)) {
|
||||
this.moveFieldElement(field, targetField)
|
||||
}
|
||||
},
|
||||
onTouchDragEnd () {
|
||||
if (this.touchPreview) {
|
||||
this.touchPreview.el.remove()
|
||||
this.touchPreview.dragField.style.opacity = ''
|
||||
this.touchPreview = null
|
||||
}
|
||||
|
||||
this.reorderFields()
|
||||
},
|
||||
moveFieldElement (field, targetField) {
|
||||
const dragField = this.$refs.fields.querySelector(`[data-uuid="${field.uuid}"]`)
|
||||
|
||||
if (dragField && targetField && targetField !== dragField) {
|
||||
const fields = Array.from(this.$refs.fields.children)
|
||||
const currentIndex = fields.indexOf(dragField)
|
||||
const targetIndex = fields.indexOf(targetField)
|
||||
|
||||
if (currentIndex < targetIndex) {
|
||||
targetField.after(dragField)
|
||||
} else {
|
||||
targetField.before(dragField)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -9,6 +9,7 @@ const en = {
|
||||
downloading_: 'Downloading...',
|
||||
view: 'View',
|
||||
autodetect_fields: 'Autodetect Fields',
|
||||
fields_detected: '{count} fields detected',
|
||||
payment_link: 'Payment link',
|
||||
strikeout: 'Strikeout',
|
||||
draw_strikethrough_the_document: 'Draw strikethrough the document',
|
||||
@@ -101,6 +102,8 @@ const en = {
|
||||
documents: 'Documents',
|
||||
move_forward: 'Move forward',
|
||||
move_backward: 'Move backward',
|
||||
backward: 'Backward',
|
||||
forward: 'Forward',
|
||||
remove_page: 'Remove page',
|
||||
merge_with_previous: 'Merge with previous',
|
||||
merge_with_next: 'Merge with next',
|
||||
@@ -251,6 +254,7 @@ const es = {
|
||||
save_as_custom_field: 'Guardar como personalizado',
|
||||
kba: 'KBA',
|
||||
autodetect_fields: 'Autodetectar campos',
|
||||
fields_detected: '{count} campos detectados',
|
||||
analyzing_: 'Analizando...',
|
||||
download: 'Descargar',
|
||||
downloading_: 'Descargando...',
|
||||
@@ -344,6 +348,8 @@ const es = {
|
||||
documents: 'Documentos',
|
||||
move_forward: 'Mover adelante',
|
||||
move_backward: 'Mover atrás',
|
||||
backward: 'Atrás',
|
||||
forward: 'Adelante',
|
||||
remove_page: 'Eliminar página',
|
||||
merge_with_previous: 'Combinar con el anterior',
|
||||
merge_with_next: 'Combinar con el siguiente',
|
||||
@@ -497,6 +503,7 @@ const it = {
|
||||
save_as_custom_field: 'Salva come personalizzato',
|
||||
kba: 'KBA',
|
||||
autodetect_fields: 'Rileva campi',
|
||||
fields_detected: '{count} campi rilevati',
|
||||
analyzing_: 'Analisi...',
|
||||
download: 'Scarica',
|
||||
downloading_: 'Download in corso...',
|
||||
@@ -593,6 +600,8 @@ const it = {
|
||||
documents: 'Documenti',
|
||||
move_forward: 'Sposta avanti',
|
||||
move_backward: 'Sposta indietro',
|
||||
backward: 'Indietro',
|
||||
forward: 'Avanti',
|
||||
remove_page: 'Rimuovi pagina',
|
||||
merge_with_previous: 'Unisci al precedente',
|
||||
merge_with_next: 'Unisci al successivo',
|
||||
@@ -743,6 +752,7 @@ const pt = {
|
||||
save_as_custom_field: 'Salvar como personalizado',
|
||||
kba: 'KBA',
|
||||
autodetect_fields: 'Detectar campos',
|
||||
fields_detected: '{count} campos detectados',
|
||||
analyzing_: 'Analisando...',
|
||||
download: 'Baixar',
|
||||
downloading_: 'Baixando...',
|
||||
@@ -836,6 +846,8 @@ const pt = {
|
||||
documents: 'Documentos',
|
||||
move_forward: 'Mover para frente',
|
||||
move_backward: 'Mover para trás',
|
||||
backward: 'Para trás',
|
||||
forward: 'Para frente',
|
||||
remove_page: 'Remover página',
|
||||
merge_with_previous: 'Mesclar com o anterior',
|
||||
merge_with_next: 'Mesclar com o próximo',
|
||||
@@ -989,6 +1001,7 @@ const fr = {
|
||||
save_as_custom_field: 'Enregistrer comme personnalisé',
|
||||
kba: 'KBA',
|
||||
autodetect_fields: 'Détecter les champs',
|
||||
fields_detected: '{count} champs détectés',
|
||||
analyzing_: 'Analyse...',
|
||||
download: 'Télécharger',
|
||||
downloading_: 'Téléchargement...',
|
||||
@@ -1085,6 +1098,8 @@ const fr = {
|
||||
documents: 'Documents',
|
||||
move_forward: 'Déplacer en avant',
|
||||
move_backward: 'Déplacer en arrière',
|
||||
backward: 'Reculer',
|
||||
forward: 'Avancer',
|
||||
remove_page: 'Supprimer la page',
|
||||
merge_with_previous: 'Fusionner avec le précédent',
|
||||
merge_with_next: 'Fusionner avec le suivant',
|
||||
@@ -1235,6 +1250,7 @@ const de = {
|
||||
save_as_custom_field: 'Als benutzerdefiniert speichern',
|
||||
kba: 'KBA',
|
||||
autodetect_fields: 'Felder erkennen',
|
||||
fields_detected: '{count} Felder erkannt',
|
||||
analyzing_: 'Analysiere...',
|
||||
download: 'Download',
|
||||
downloading_: 'Download...',
|
||||
@@ -1331,6 +1347,8 @@ const de = {
|
||||
documents: 'Dokumente',
|
||||
move_forward: 'Nach vorne',
|
||||
move_backward: 'Nach hinten',
|
||||
backward: 'Zurück',
|
||||
forward: 'Vorwärts',
|
||||
remove_page: 'Seite entfernen',
|
||||
merge_with_previous: 'Mit vorherigem zusammenführen',
|
||||
merge_with_next: 'Mit nächstem zusammenführen',
|
||||
@@ -1481,6 +1499,7 @@ const nl = {
|
||||
save_as_custom_field: 'Opslaan als aangepast',
|
||||
kba: 'KBA',
|
||||
autodetect_fields: 'Velden detecteren',
|
||||
fields_detected: '{count} velden gedetecteerd',
|
||||
analyzing_: 'Analyseren...',
|
||||
download: 'Downloaden',
|
||||
downloading_: 'Downloaden...',
|
||||
@@ -1577,6 +1596,8 @@ const nl = {
|
||||
documents: 'Documenten',
|
||||
move_forward: 'Naar voren',
|
||||
move_backward: 'Naar achteren',
|
||||
backward: 'Achteruit',
|
||||
forward: 'Vooruit',
|
||||
remove_page: 'Pagina verwijderen',
|
||||
merge_with_previous: 'Samenvoegen met vorige',
|
||||
merge_with_next: 'Samenvoegen met volgende',
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<div class="absolute w-full bottom-0 pr-3 mb-4">
|
||||
<span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20 draw-field-container-mobile">
|
||||
<div class="flex items-center space-x-2">
|
||||
<component
|
||||
:is="fieldIcons[drawField.type]"
|
||||
:width="20"
|
||||
:height="20"
|
||||
class="inline"
|
||||
:stroke-width="1.6"
|
||||
/>
|
||||
<span>{{ t('draw_field').replace('{field}', fieldNames[drawField.type]) }}</span>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
class="link block text-center"
|
||||
@click.prevent="$emit('cancel')"
|
||||
>
|
||||
{{ t('cancel') }}
|
||||
</a>
|
||||
</span>
|
||||
<FieldSubmitter
|
||||
:model-value="selectedSubmitter.uuid"
|
||||
:submitters="submitters"
|
||||
:editable="editable"
|
||||
:mobile-view="true"
|
||||
:menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
|
||||
@new-submitter="save"
|
||||
@remove="removeSubmitter"
|
||||
@name-change="save"
|
||||
@update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Field from './field'
|
||||
import FieldType from './field_type'
|
||||
import FieldSubmitter from './field_submitter'
|
||||
|
||||
export default {
|
||||
name: 'MobileDrawField',
|
||||
components: {
|
||||
Field,
|
||||
FieldSubmitter
|
||||
},
|
||||
inject: ['save', 't', 'backgroundColor'],
|
||||
props: {
|
||||
drawField: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
submitters: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
fields: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
selectedSubmitter: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['change-submitter', 'cancel'],
|
||||
computed: {
|
||||
fieldNames: FieldType.computed.fieldNames,
|
||||
fieldIcons: FieldType.computed.fieldIcons
|
||||
},
|
||||
methods: {
|
||||
removeSubmitter (submitter) {
|
||||
[...this.fields].forEach((field) => {
|
||||
if (field.submitter_uuid === submitter.uuid) {
|
||||
this.removeField(field, false)
|
||||
}
|
||||
})
|
||||
|
||||
this.submitters.splice(this.submitters.indexOf(submitter), 1)
|
||||
|
||||
if (this.selectedSubmitter === submitter) {
|
||||
this.$emit('change-submitter', this.submitters[0])
|
||||
}
|
||||
|
||||
this.save()
|
||||
},
|
||||
removeField (field, save = true) {
|
||||
this.fields.splice(this.fields.indexOf(field), 1)
|
||||
|
||||
if (save) {
|
||||
this.save()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div v-if="inline">
|
||||
<slot />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="fixed inset-0 z-40"
|
||||
:class="{ 'pointer-events-none': !open }"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-black transition-opacity duration-300"
|
||||
:class="open ? 'opacity-25' : 'opacity-0'"
|
||||
@click="$emit('close')"
|
||||
@dragenter="$emit('close')"
|
||||
@touchmove.prevent
|
||||
/>
|
||||
<div
|
||||
ref="panel"
|
||||
class="absolute top-0 bottom-0 bg-base-100 shadow-xl overflow-y-auto overflow-x-hidden overscroll-contain px-4 transition-transform duration-300 ease-out"
|
||||
style="width: 82%; max-width: 340px"
|
||||
:class="[side === 'left' ? 'left-0' : 'right-0', open ? 'translate-x-0' : (side === 'left' ? '-translate-x-full' : 'translate-x-full')]"
|
||||
@touchmove="onPanelTouchmove"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MobileDrawer',
|
||||
props: {
|
||||
side: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'left'
|
||||
},
|
||||
open: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
emits: ['close'],
|
||||
watch: {
|
||||
open (value) {
|
||||
document.body.style.overflow = value ? 'hidden' : ''
|
||||
}
|
||||
},
|
||||
beforeUnmount () {
|
||||
if (this.open) {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onPanelTouchmove (e) {
|
||||
if (this.$refs.panel.scrollHeight <= this.$refs.panel.clientHeight) {
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,142 +0,0 @@
|
||||
<template>
|
||||
<span class="dropdown dropdown-top dropdown-end absolute bottom-4 right-4 z-10 fields-dropdown-mobile">
|
||||
<label
|
||||
class="btn btn-neutral text-white btn-circle btn-lg group"
|
||||
tabindex="0"
|
||||
>
|
||||
<IconPlus
|
||||
class="group-focus:hidden"
|
||||
width="28"
|
||||
height="28"
|
||||
/>
|
||||
<IconX
|
||||
class="hidden group-focus:inline p-3"
|
||||
width="64"
|
||||
height="50"
|
||||
@click="closeDropdown"
|
||||
/>
|
||||
</label>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3 mt-1.5 bg-base-100"
|
||||
@click="closeDropdown"
|
||||
>
|
||||
<template v-if="submitterDefaultFields.length">
|
||||
<template
|
||||
v-for="field in submitterDefaultFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="text-sm py-1 px-2"
|
||||
@click.prevent="$emit('select', { name: field.name || '', type: field.type || 'text' })"
|
||||
>
|
||||
<component
|
||||
:is="fieldIcons[field.type || 'text']"
|
||||
:stroke-width="1.6"
|
||||
:width="20"
|
||||
/>
|
||||
{{ field.title || field.name }}
|
||||
<span
|
||||
v-if="defaultRequiredFields.includes(field)"
|
||||
:data-tip="t('required')"
|
||||
class="text-red-400 text-2xl tooltip tooltip-left h-6"
|
||||
>
|
||||
*
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</template>
|
||||
<div
|
||||
v-if="fieldTypes.length && submitterDefaultFields.length"
|
||||
class="bg-base-300"
|
||||
style="height: 1px; margin-top: 1px; margin-bottom: 1px"
|
||||
/>
|
||||
<template v-if="fieldTypes.length || !submitterDefaultFields.length">
|
||||
<template
|
||||
v-for="(icon, type) in fieldIconsSorted"
|
||||
:key="type"
|
||||
>
|
||||
<li v-if="fieldTypes.includes(type) || ((withPhone || type != 'phone') && (withPayment || type != 'payment') && (withVerification || type != 'verification') && (withKba || type != 'kba'))">
|
||||
<a
|
||||
href="#"
|
||||
class="text-sm py-1 px-2"
|
||||
:class="{ 'active': type === modelValue }"
|
||||
@click.prevent="$emit('select', { type })"
|
||||
>
|
||||
<component
|
||||
:is="icon"
|
||||
:stroke-width="1.6"
|
||||
:width="20"
|
||||
/>
|
||||
{{ fieldNames[type] }}
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</template>
|
||||
</ul>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
import { IconPlus, IconX } from '@tabler/icons-vue'
|
||||
import FieldType from './field_type'
|
||||
|
||||
export default {
|
||||
name: 'MobileFields',
|
||||
components: {
|
||||
IconPlus,
|
||||
IconX
|
||||
},
|
||||
inject: ['withPhone', 'withPayment', 'withVerification', 'withKba', 'backgroundColor', 't'],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
fields: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
selectedSubmitter: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
fieldTypes: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
defaultRequiredFields: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
defaultFields: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
emits: ['select'],
|
||||
computed: {
|
||||
...FieldType.computed,
|
||||
submitterFields () {
|
||||
return this.fields.filter((f) => f.submitter_uuid === this.selectedSubmitter.uuid)
|
||||
},
|
||||
submitterDefaultFields () {
|
||||
return this.defaultFields.filter((f) => {
|
||||
return (!f.role || f.role === this.selectedSubmitter.name)
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeDropdown () {
|
||||
document.activeElement.blur()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in new issue
Block a user