mirror of https://github.com/nocodb/nocodb
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.
84 lines
2.3 KiB
84 lines
2.3 KiB
<script lang="ts" setup> |
|
const props = defineProps<{ |
|
url: string |
|
}>() |
|
|
|
const emits = defineEmits(['update:url']) |
|
|
|
const url = useVModel(props, 'url', emits) |
|
|
|
const isCopied = ref({ |
|
link: false, |
|
embed: false, |
|
}) |
|
|
|
const { copy } = useCopy() |
|
|
|
const openUrl = async () => { |
|
window.open(url.value, '_blank', 'noopener,noreferrer') |
|
} |
|
|
|
const embedHtml = async () => { |
|
await copy(`<iframe src="${url.value}" width="100%" height="100%" style="border: none;"></iframe>`) |
|
isCopied.value.embed = true |
|
} |
|
|
|
const copyUrl = async () => { |
|
isCopied.value.link = false |
|
|
|
await copy(url.value) |
|
|
|
setTimeout(() => { |
|
isCopied.value.link = true |
|
}, 100) |
|
} |
|
</script> |
|
|
|
<template> |
|
<div |
|
class="flex flex-row items-center justify-end text-gray-600 gap-x-1.5 py-1.5 px-1.5 bg-gray-50 rounded-md border-1 border-gray-200" |
|
> |
|
<div class="flex flex-row block flex-1 overflow-hidden pl-3 cursor-pointer" @click="copyUrl"> |
|
<div class="overflow-hidden whitespace-nowrap text-gray-500">{{ url }}</div> |
|
</div> |
|
<div class="flex flex-row gap-x-1"> |
|
<NcTooltip> |
|
<template #title> |
|
{{ $t('activity.openInANewTab') }} |
|
</template> |
|
|
|
<div class="button" @click="openUrl"> |
|
<RiExternalLinkLine class="h-3.75" /> |
|
</div> |
|
</NcTooltip> |
|
<NcTooltip> |
|
<template #title> |
|
{{ $t('activity.copyIFrameCode') }} |
|
</template> |
|
<div |
|
class="button" |
|
:class="{ |
|
'!text-gray-300 !border-gray-200 !cursor-not-allowed': isCopied.embed, |
|
}" |
|
@click="embedHtml" |
|
> |
|
<MdiCodeTags class="h-4" /> |
|
</div> |
|
</NcTooltip> |
|
<div class="button" data-testid="docs-share-page-copy-link" @click="copyUrl"> |
|
<MdiCheck v-if="isCopied.link" class="h-3.5" /> |
|
<MdiContentCopy v-else class="h-3.5" /> |
|
<div class="flex text-xs" :style="{ fontWeight: 500 }"> |
|
<template v-if="isCopied.link"> {{ $t('activity.copiedLink') }} </template> |
|
<template v-else> {{ $t('activity.copyUrl') }} </template> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style lang="scss" scoped> |
|
.button { |
|
@apply flex flex-row py-1.5 px-1.5 bg-white hover:bg-gray-100 cursor-pointer rounded-md border-1 border-gray-100 gap-x-1 items-center shadow-sm; |
|
} |
|
</style>
|
|
|