nocodb/packages/nc-gui/components/general/CopyUrl.vue

<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 openUrl = async () => {
  window.open(url.value, '_blank')
}

const embedHtml = async () => {
  await navigator.clipboard.writeText(`<iframe src="${url.value}" width="100%" height="100%" style="border: none;"></iframe>`)
  isCopied.value.embed = true
}

const copyUrl = async () => {
  isCopied.value.link = false

  await navigator.clipboard.writeText(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">
      <div class="button" @click="openUrl">
        <RiExternalLinkLine class="h-3.75" />
      </div>
      <div
        class="button"
        :class="{
          '!text-gray-300 !border-gray-200 !cursor-not-allowed': isCopied.embed,
        }"
        @click="embedHtml"
      >
        <MdiCodeTags class="h-4" />
      </div>
      <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"> Link Copied </template>
          <template v-else> Copy Link </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>