Browse Source

feat(gui-v2): email cell

pull/2888/head
Wing-Kam Wong 2 years ago
parent
commit
8205d2915e
  1. 27
      packages/nc-gui-v2/components/cell/Email.vue
  2. 3
      packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
  3. 2
      packages/nc-gui-v2/components/smartsheet/Cell.vue

27
packages/nc-gui-v2/components/cell/Email.vue

@ -1,15 +1,24 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from '#imports' import { computed } from '#imports'
import { isEmail } from '~/utils/validation' import { isEmail } from '~/utils/validation'
const { modelValue: value } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const editEnabled = inject<boolean>('editEnabled')
interface Props { interface Props {
modelValue: string modelValue: string
} }
const { modelValue } = defineProps<Props>() const root = ref<HTMLInputElement>()
const localState = computed({
get: () => value,
set: (val) => emit('update:modelValue', val),
})
const validEmail = computed(() => isEmail(modelValue)) const validEmail = computed(() => isEmail(value))
</script> </script>
<script lang="ts"> <script lang="ts">
@ -19,6 +28,14 @@ export default {
</script> </script>
<template> <template>
<a v-if="validEmail" :href="`mailto:${modelValue}`" target="_blank">{{ modelValue }}</a> <input v-if="editEnabled" ref="root" v-model="localState" />
<span v-else>{{ modelValue }}</span> <a
v-else-if="validEmail"
class="caption py-2 text-primary underline hover:opacity-75"
:href="`mailto:${value}`"
target="_blank"
>
{{ value }}
</a>
<span v-else>{{ value }}</span>
</template> </template>

3
packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue

@ -16,6 +16,7 @@ import RatingIcon from '~icons/mdi/star'
import GenericIcon from '~icons/mdi/square-rounded' import GenericIcon from '~icons/mdi/square-rounded'
import AttachmentIcon from '~icons/mdi/image-multiple-outline' import AttachmentIcon from '~icons/mdi/image-multiple-outline'
import URLIcon from '~icons/mdi/link' import URLIcon from '~icons/mdi/link'
import EmailIcon from '~icons/mdi/email'
const column = inject(ColumnInj) const column = inject(ColumnInj)
@ -38,6 +39,8 @@ const icon = computed(() => {
return BooleanIcon return BooleanIcon
} else if (additionalColMeta.isTextArea) { } else if (additionalColMeta.isTextArea) {
return TextAreaIcon return TextAreaIcon
} else if (additionalColMeta.isEmail) {
return EmailIcon
} else if (additionalColMeta.isRating) { } else if (additionalColMeta.isRating) {
return RatingIcon return RatingIcon
} else if (additionalColMeta.isAttachment) { } else if (additionalColMeta.isAttachment) {

2
packages/nc-gui-v2/components/smartsheet/Cell.vue

@ -52,7 +52,6 @@ const {
todo : todo :
JSONCell JSONCell
Currency Currency
Email
--> -->
<!-- <RatingCell --> <!-- <RatingCell -->
@ -193,6 +192,7 @@ todo :
v-on="$listeners" v-on="$listeners"
/> --> /> -->
<CellDuration v-else-if="isDuration" v-model="localState" /> <CellDuration v-else-if="isDuration" v-model="localState" />
<CellEmail v-else-if="isEmail" v-model="localState" />
<CellUrl v-else-if="isURL" v-model="localState" /> <CellUrl v-else-if="isURL" v-model="localState" />
<!-- v-on="parentListeners" <!-- v-on="parentListeners"
/> />

Loading…
Cancel
Save