mirror of https://github.com/docusealco/docuseal
Alex Turchyn
2 years ago
parent
0c7ac32935
commit
368e364823
@ -0,0 +1,157 @@
|
|||||||
|
<template>
|
||||||
|
<div class="dropdown">
|
||||||
|
<label
|
||||||
|
v-if="compact"
|
||||||
|
tabindex="0"
|
||||||
|
:title="selectedSubmitter.name"
|
||||||
|
class="cursor-pointer text-base-100"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="mx-1 w-3 h-3 rounded-full"
|
||||||
|
:class="colors[submitters.indexOf(selectedSubmitter)]"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
v-else
|
||||||
|
tabindex="0"
|
||||||
|
class="rounded-md p-2 border border-base-300 w-full flex justify-between"
|
||||||
|
>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<span
|
||||||
|
class="w-3 h-3 rounded-full"
|
||||||
|
:class="colors[submitters.indexOf(selectedSubmitter)]"
|
||||||
|
/>
|
||||||
|
<Contenteditable
|
||||||
|
v-model="selectedSubmitter.name"
|
||||||
|
:icon-inline="true"
|
||||||
|
:icon-width="18"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span>
|
||||||
|
▼
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<ul
|
||||||
|
tabindex="0"
|
||||||
|
:class="menuClasses"
|
||||||
|
@click="closeDropdown"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
v-for="(submitter, index) in submitters"
|
||||||
|
:key="submitter.uuid"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="flex px-2 group justify-between items-center"
|
||||||
|
:class="{ 'active': submitter === selectedSubmitter }"
|
||||||
|
@click.prevent="selectSubmitter(submitter)"
|
||||||
|
>
|
||||||
|
<span class="py-1 flex items-center">
|
||||||
|
<span
|
||||||
|
class="rounded-full w-3 h-3 ml-1 mr-3"
|
||||||
|
:class="colors[index]"
|
||||||
|
/>
|
||||||
|
<span>
|
||||||
|
{{ submitter.name }}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
v-if="!compact && submitters.length > 1"
|
||||||
|
class="hidden group-hover:block px-2"
|
||||||
|
@click.stop="remove(submitter)"
|
||||||
|
>
|
||||||
|
<IconTrashX :width="18" />
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li v-if="submitters.length < 5">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="flex px-2"
|
||||||
|
@click.prevent="addSubmitter"
|
||||||
|
>
|
||||||
|
<IconUserPlus
|
||||||
|
:width="20"
|
||||||
|
:stroke-width="1.6"
|
||||||
|
/>
|
||||||
|
<span class="py-1">
|
||||||
|
Add Submitter
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { IconUserPlus, IconTrashX } from '@tabler/icons-vue'
|
||||||
|
import Contenteditable from './contenteditable'
|
||||||
|
import { v4 } from 'uuid'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'FieldSubmitter',
|
||||||
|
components: {
|
||||||
|
IconUserPlus,
|
||||||
|
Contenteditable,
|
||||||
|
IconTrashX
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
submitters: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
compact: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
menuClasses: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: 'dropdown-content menu p-2 shadow bg-base-100 rounded-box w-full z-10'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['update:model-value', 'remove'],
|
||||||
|
computed: {
|
||||||
|
colors () {
|
||||||
|
return [
|
||||||
|
'bg-red-500',
|
||||||
|
'bg-sky-500',
|
||||||
|
'bg-emerald-500',
|
||||||
|
'bg-yellow-300',
|
||||||
|
'bg-purple-600'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
selectedSubmitter () {
|
||||||
|
return this.submitters.find((e) => e.uuid === this.modelValue)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectSubmitter (submitter) {
|
||||||
|
this.$emit('update:model-value', submitter.uuid)
|
||||||
|
},
|
||||||
|
remove (submitter) {
|
||||||
|
if (window.confirm('Are you sure?')) {
|
||||||
|
this.$emit('remove', submitter)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addSubmitter () {
|
||||||
|
const newSubmitter = {
|
||||||
|
name: `Submitter ${this.submitters.length + 1}`,
|
||||||
|
uuid: v4()
|
||||||
|
}
|
||||||
|
|
||||||
|
this.submitters.push(newSubmitter)
|
||||||
|
|
||||||
|
this.$emit('update:model-value', newSubmitter.uuid)
|
||||||
|
},
|
||||||
|
closeDropdown () {
|
||||||
|
document.activeElement.blur()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue