mirror of https://github.com/docusealco/docuseal
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.2 KiB
92 lines
2.2 KiB
<template>
|
|
<div class="flex space-x-2">
|
|
<Contenteditable
|
|
class="w-full block mr-6"
|
|
:model-value="item.name"
|
|
:icon-width="16"
|
|
@update:model-value="onUpdateName"
|
|
/>
|
|
<ReplaceButton
|
|
:is-direct-upload="isDirectUpload"
|
|
:template-id="template.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"
|
|
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"
|
|
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"
|
|
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
|
|
},
|
|
isDirectUpload: {
|
|
type: Boolean,
|
|
required: true,
|
|
default: false
|
|
},
|
|
withArrows: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true
|
|
}
|
|
},
|
|
emits: ['change', 'remove', 'up', 'down', 'replace'],
|
|
mounted () {
|
|
if (this.isDirectUpload) {
|
|
import('@rails/activestorage')
|
|
}
|
|
},
|
|
methods: {
|
|
upload: Upload.methods.upload,
|
|
onUpdateName (value) {
|
|
this.item.name = value
|
|
|
|
this.$emit('change')
|
|
}
|
|
}
|
|
}
|
|
</script>
|