fix: replaced to/cc/bcc with MultiselectInput Control with validation
This commit is contained in:
parent
5866adfa5e
commit
1cf8a798b1
@ -9,32 +9,39 @@
|
|||||||
:editable="editable"
|
:editable="editable"
|
||||||
>
|
>
|
||||||
<template #top>
|
<template #top>
|
||||||
<div class="mx-10 border-t py-2.5" :class="[cc || bcc ? '' : 'border-b']">
|
<div
|
||||||
|
class="mx-10 flex items-center gap-2 border-t py-2.5"
|
||||||
|
:class="[cc || bcc ? '' : 'border-b']"
|
||||||
|
>
|
||||||
<span class="text-xs text-gray-500">TO:</span>
|
<span class="text-xs text-gray-500">TO:</span>
|
||||||
<span
|
<MultiselectInput
|
||||||
v-if="modelValue.email"
|
class="flex-1"
|
||||||
class="ml-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-sm text-gray-800"
|
:values="modelValue.email ? [modelValue.email] : []"
|
||||||
>
|
:validate="validateEmail"
|
||||||
{{ modelValue.email }}
|
error-message="Invalid email address"
|
||||||
</span>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="cc" class="mx-10 py-2.5" :class="bcc ? '' : 'border-b'">
|
<div
|
||||||
|
v-if="cc"
|
||||||
|
class="mx-10 flex items-center gap-2 py-2.5"
|
||||||
|
:class="bcc ? '' : 'border-b'"
|
||||||
|
>
|
||||||
<span class="text-xs text-gray-500">CC:</span>
|
<span class="text-xs text-gray-500">CC:</span>
|
||||||
<span
|
<MultiselectInput
|
||||||
v-if="modelValue.email"
|
class="flex-1"
|
||||||
class="ml-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-sm text-gray-800"
|
:values="[]"
|
||||||
>
|
:validate="validateEmail"
|
||||||
{{ modelValue.email }}
|
error-message="Invalid email address"
|
||||||
</span>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="bcc" class="mx-10 border-b py-2.5">
|
<div v-if="bcc" class="mx-10 flex items-center gap-2 border-b py-2.5">
|
||||||
<span class="text-xs text-gray-500">BCC:</span>
|
<span class="text-xs text-gray-500">BCC:</span>
|
||||||
<span
|
<MultiselectInput
|
||||||
v-if="modelValue.email"
|
class="flex-1"
|
||||||
class="ml-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-sm text-gray-800"
|
:values="[]"
|
||||||
>
|
:validate="validateEmail"
|
||||||
{{ modelValue.email }}
|
error-message="Invalid email address"
|
||||||
</span>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:editor="{ editor }">
|
<template v-slot:editor="{ editor }">
|
||||||
@ -106,12 +113,14 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue'
|
import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue'
|
||||||
import AttachmentItem from '@/components/AttachmentItem.vue'
|
import AttachmentItem from '@/components/AttachmentItem.vue'
|
||||||
|
import MultiselectInput from '@/components/Controls/MultiselectInput.vue'
|
||||||
import {
|
import {
|
||||||
TextEditorFixedMenu,
|
TextEditorFixedMenu,
|
||||||
TextEditor,
|
TextEditor,
|
||||||
FileUploader,
|
FileUploader,
|
||||||
FeatherIcon,
|
FeatherIcon,
|
||||||
} from 'frappe-ui'
|
} from 'frappe-ui'
|
||||||
|
import { validateEmail } from '@/utils'
|
||||||
import { EditorContent } from '@tiptap/vue-3'
|
import { EditorContent } from '@tiptap/vue-3'
|
||||||
import { ref, computed, defineModel } from 'vue'
|
import { ref, computed, defineModel } from 'vue'
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user