fix(gui): add fallback for copy to clipboard

re #3598

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components.d.ts

@@ -232,6 +232,7 @@ declare module '@vue/runtime-core' {
     MdiUpload: typeof import('~icons/mdi/upload')['default']
     MdiUploadOutline: typeof import('~icons/mdi/upload-outline')['default']
     MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
+    MdiWarning: typeof import('~icons/mdi/warning')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
     MiCircleWarning: typeof import('~icons/mi/circle-warning')['default']

packages/nc-gui/components/smartsheet-toolbar/ShareView.vue

@@ -4,7 +4,7 @@ import { message } from 'ant-design-vue'
 import {
   computed,
   extractSdkResponseErrorMsg,
-  useClipboard,
+  useCopy,
   useI18n,
   useNuxtApp,
   useProject,
@@ -17,7 +17,7 @@ const { t } = useI18n()
 
 const { view, $api } = useSmartsheetStoreOrThrow()
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 const { $e } = useNuxtApp()
 

packages/nc-gui/components/smartsheet-toolbar/SharedViewList.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ViewTypes } from 'nocodb-sdk'
 import { Empty, message } from 'ant-design-vue'
-import { extractSdkResponseErrorMsg, onMounted, useClipboard, useI18n, useSmartsheetStoreOrThrow } from '#imports'
+import { extractSdkResponseErrorMsg, onMounted, useCopy, useI18n, useSmartsheetStoreOrThrow } from '#imports'
 import MdiVisibilityOnIcon from '~icons/mdi/visibility'
 import MdiVisibilityOffIcon from '~icons/mdi/visibility-off'
 import MdiCopyIcon from '~icons/mdi/content-copy'
@@ -20,7 +20,7 @@ const { t } = useI18n()
 
 const { $api, meta } = useSmartsheetStoreOrThrow()
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 const { dashboardUrl } = useDashboard()
 

packages/nc-gui/components/smartsheet/ApiSnippet.vue

@@ -5,7 +5,7 @@ import {
   ActiveViewInj,
   MetaInj,
   inject,
-  useClipboard,
+  useCopy,
   useGlobal,
   useI18n,
   useProject,
@@ -36,7 +36,7 @@ const { xWhere } = useSmartsheetStoreOrThrow()
 
 const { queryParams } = $(useViewData($$(meta), $$(view), xWhere))
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 let vModel = $(useVModel(props, 'modelValue', emits))
 

packages/nc-gui/components/smartsheet/Grid.vue

@@ -23,7 +23,7 @@ import {
   provide,
   reactive,
   ref,
-  useClipboard,
+  useCopy,
   useEventListener,
   useGridViewColumnWidth,
   useI18n,
@@ -97,7 +97,7 @@ const {
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 onMounted(loadGridViewColumns)
 

packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ApiTokenType } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { extractSdkResponseErrorMsg, useClipboard, useI18n } from '#imports'
+import { extractSdkResponseErrorMsg, useCopy, useI18n } from '#imports'
 import KebabIcon from '~icons/ic/baseline-more-vert'
 import MdiPlusIcon from '~icons/mdi/plus'
 import CloseIcon from '~icons/material-symbols/close-rounded'
@@ -21,7 +21,7 @@ const { $api, $e } = useNuxtApp()
 
 const { project } = $(useProject())
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 let tokensInfo = $ref<ApiToken[] | undefined>([])
 

packages/nc-gui/components/tabs/auth/UserManagement.vue

@@ -8,7 +8,7 @@ import {
   onBeforeMount,
   ref,
   useApi,
-  useClipboard,
+  useCopy,
   useDashboard,
   useI18n,
   useNuxtApp,
@@ -26,7 +26,7 @@ const { api } = useApi()
 
 const { project } = useProject()
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 const { isUIAllowed } = useUIPermission()
 

packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import { extractSdkResponseErrorMsg, onMounted, useClipboard, useI18n, useNuxtApp, useProject } from '#imports'
+import { extractSdkResponseErrorMsg, onMounted, useCopy, useI18n, useNuxtApp, useProject } from '#imports'
 
 interface ShareBase {
   uuid?: string
@@ -25,7 +25,7 @@ const showEditBaseDropdown = $ref(false)
 
 const { project } = useProject()
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 const url = $computed(() => (base && base.uuid ? `${dashboardUrl}#/base/${base.uuid}` : null))
 

packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue

@@ -9,7 +9,7 @@ import {
   projectRoleTagColors,
   projectRoles,
   ref,
-  useClipboard,
+  useCopy,
   useDashboard,
   useI18n,
   useNuxtApp,
@@ -37,7 +37,7 @@ const { t } = useI18n()
 
 const { project } = useProject()
 const { $api, $e } = useNuxtApp()
-const { copy } = useClipboard()
+const { copy } = useCopy()
 const { dashboardUrl } = $(useDashboard())
 
 const usersData = $ref<Users>({ emails: undefined, role: ProjectRole.Viewer, invitationToken: undefined })

packages/nc-gui/composables/index.ts

@@ -25,3 +25,4 @@ export * from './useLTARStore'
 export * from './useExpandedFormStore'
 export * from './useSharedFormViewStore'
 export * from './useCellUrlConfig'
+export * from './useCopy'

packages/nc-gui/composables/useColumnCreateStore.ts

@@ -4,7 +4,6 @@ import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useColumn } from './useColumn'
 import { computed, createInjectionState, extractSdkResponseErrorMsg, useNuxtApp } from '#imports'
 
 const useForm = Form.useForm

packages/nc-gui/composables/useCopy.ts

@@ -0,0 +1,26 @@
+import { useClipboard } from '#imports'
+
+export const useCopy = () => {
+  /** fallback for copy if clipboard api is not supported */
+  const copyFallback = (text: string) => {
+    const textAreaEl = document.createElement('textarea')
+    textAreaEl.innerHTML = text
+    document.body.appendChild(textAreaEl)
+    textAreaEl.select()
+    const result = document.execCommand('copy')
+    document.body.removeChild(textAreaEl)
+    return result
+  }
+
+  const { copy: _copy, isSupported } = useClipboard()
+
+  const copy = async (text: string) => {
+    if (isSupported) {
+      await _copy(text)
+    } else {
+      copyFallback(text)
+    }
+  }
+
+  return { copy }
+}

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -12,7 +12,7 @@ import {
   projectThemeColors,
   provide,
   ref,
-  useClipboard,
+  useCopy,
   useGlobal,
   useI18n,
   useProject,
@@ -42,7 +42,7 @@ const { clearTabs, addTab } = useTabs()
 
 const { isUIAllowed } = useUIPermission()
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 const isLocked = ref(false)