mirror of https://github.com/docusealco/docuseal
Alex Turchyn
2 years ago
parent
faf6f69e3e
commit
98fc9d964a
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="group flex items-center relative overflow-visible">
|
||||
<div
|
||||
ref="contenteditable"
|
||||
contenteditable
|
||||
style="min-width: 2px"
|
||||
class="peer outline-none"
|
||||
@keydown.enter.prevent="onEnter"
|
||||
@blur="onBlur"
|
||||
>
|
||||
{{ value }}
|
||||
</div>
|
||||
<IconPencil
|
||||
contenteditable="false"
|
||||
class="absolute ml-1 cursor-pointer inline opacity-0 group-hover:opacity-100 peer-focus:opacity-0 align-middle"
|
||||
:style="{ right: -(1.1 * iconWidth) + 'px' }"
|
||||
:width="iconWidth"
|
||||
@click="onPencilClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IconPencil } from '@tabler/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'ContenteditableField',
|
||||
components: {
|
||||
IconPencil
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
iconWidth: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 30
|
||||
}
|
||||
},
|
||||
emits: ['update:model-value'],
|
||||
data () {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue: {
|
||||
handler (value) {
|
||||
this.value = value
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onBlur (e) {
|
||||
this.value = this.$refs.contenteditable.innerText.trim() || this.modelValue
|
||||
|
||||
this.$emit('update:model-value', this.value)
|
||||
},
|
||||
onPencilClick () {
|
||||
this.$refs.contenteditable.focus()
|
||||
},
|
||||
onEnter () {
|
||||
this.$refs.contenteditable.blur()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="relative">
|
||||
<img
|
||||
:src="previewImage.url"
|
||||
:width="previewImage.metadata.width"
|
||||
:height="previewImage.metadata.height"
|
||||
class="rounded border"
|
||||
loading="lazy"
|
||||
>
|
||||
<div
|
||||
class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute"
|
||||
@click="$emit('scroll-to', item)"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col justify-between opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
class="px-1.5 rounded bg-white border border-red-400 text-red-400 hover:bg-red-50"
|
||||
@click.stop="$emit('remove', item)"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="withArrows"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<button
|
||||
class="px-1.5"
|
||||
@click.stop="$emit('up', item)"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
<button
|
||||
class="px-1.5"
|
||||
@click.stop="$emit('down', item)"
|
||||
>
|
||||
↓
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex py-2">
|
||||
<Contenteditable
|
||||
:model-value="item.name"
|
||||
:icon-width="16"
|
||||
class="mx-auto"
|
||||
@update:model-value="onUpdateName"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Contenteditable from './contenteditable'
|
||||
|
||||
export default {
|
||||
name: 'DocumentPreview',
|
||||
components: {
|
||||
Contenteditable
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
document: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
withArrows: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
emits: ['scroll-to', 'change', 'remove', 'up', 'down'],
|
||||
computed: {
|
||||
previewImage () {
|
||||
return this.document.preview_images[0]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onUpdateName (value) {
|
||||
this.item.name = value
|
||||
|
||||
this.$emit('change')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1 +1,16 @@
|
||||
<flow-builder data-flow="<%= @flow.to_json(include: { documents: { include: { preview_images: { methods: %i[url metadata filename] } } } }) %>"></flow-builder>
|
||||
<!DOCTYPE html>
|
||||
<html data-theme="docuseal" class="h-full">
|
||||
<head>
|
||||
<title>
|
||||
Docuseal
|
||||
</title>
|
||||
<%= csrf_meta_tags %>
|
||||
<%= csp_meta_tag %>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<%= javascript_pack_tag 'application', defer: true %>
|
||||
<%= stylesheet_pack_tag 'application', media: 'all' %>
|
||||
</head>
|
||||
<body class="h-full" data>
|
||||
<flow-builder data-flow="<%= @flow.to_json(include: { documents: { include: { preview_images: { methods: %i[url metadata filename] } } } }) %>"></flow-builder>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in new issue