Merge pull request #7793 from nextcloud-libraries/backport/7787/stable8

[stable8] feat: add NcFormBoxCopyButton

Author: susnux

l10n/messages.pot

@@ -112,6 +112,12 @@ msgstr ""
 msgid "Connect items to a project to make them easier to find"
 msgstr ""
 
+msgid "Copied"
+msgstr ""
+
+msgid "Copy to clipboard"
+msgstr ""
+
 #. TRANSLATORS: Ctrl key on keyboard (Windows/Linux)
 msgid "Ctrl"
 msgstr ""

src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.vue

@@ -0,0 +1,80 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { mdiCheck, mdiContentCopy } from '@mdi/js'
+import { whenever } from '@vueuse/core'
+import { computed } from 'vue'
+import NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
+import { t } from '../../l10n.js'
+import { useCopy } from './useCopy.ts'
+
+const props = withDefaults(defineProps<{
+	/** Copied value's value */
+	label?: string
+	/** The value to be copied */
+	value: string
+	/** Native disabled attribute */
+	disabled?: boolean
+}>(), {
+	label: undefined,
+	disabled: false,
+})
+
+const emit = defineEmits<{
+	copy: () => void
+}>()
+
+const { isCopied, copy } = useCopy(() => props.value)
+
+const icon = computed(() => isCopied.value ? mdiCheck : mdiContentCopy)
+
+whenever(isCopied, () => emit('copy'))
+</script>
+
+<template>
+	<NcFormBoxButton
+		:disabled="disabled"
+		inverted-accent
+		@click="copy">
+		<template v-if="$slots.default || label" #default>
+			<!-- @slot Custom label content -->
+			<span class="hidden-visually">
+				{{ isCopied ? t('Copied') : t('Copy to clipboard') }}
+			</span>
+			<slot>
+				{{ label }}
+			</slot>
+		</template>
+		<template #description>
+			{{ value }}
+		</template>
+		<template #icon>
+			<NcIconSvgWrapper :path="icon" inline />
+		</template>
+	</NcFormBoxButton>
+</template>
+
+<docs>
+### General
+
+`NcFormBoxButton` set up to be a copy button.
+
+```vue
+<template>
+	<NcFormGroup label="CalDAV" description="Access Nextcloud calendars from other apps and devices">
+		<NcFormBox>
+			<NcFormBoxCopyButton
+				label="CalDAV URL"
+				value="https://cloud.example.com/remote.php/dav/" />
+			<NcFormBoxCopyButton
+				label="Server Address for iOS and macOS"
+				value="https://cloud.example.com/remote.php/dav/principals/users/user/" />
+		</NcFormBox>
+	</NcFormGroup>
+</template>
+```
+</docs>

src/components/NcFormBoxCopyButton/index.ts

@@ -0,0 +1,6 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export { default } from './NcFormBoxCopyButton.vue'

src/components/NcFormBoxCopyButton/useCopy.ts

@@ -0,0 +1,47 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { MaybeRefOrGetter } from '@vueuse/core'
+
+import { toValue } from '@vueuse/core'
+import { ref } from 'vue'
+
+const DELAY = 2000
+
+/**
+ * Copy content to clipboard with copied state
+ *
+ * @param content - Content to copy
+ */
+export function useCopy(content: MaybeRefOrGetter<string>) {
+	const isCopied = ref(false)
+
+	/**
+	 * Copy the content to clipboard
+	 */
+	async function copy() {
+		if (isCopied.value) {
+			return
+		}
+
+		const value = toValue(content)
+		try {
+			await navigator.clipboard.writeText(value)
+		} catch {
+			// Fallback for a case when clipboard API is not available or permission denied
+			prompt('', value)
+		}
+
+		isCopied.value = true
+		setTimeout(() => {
+			isCopied.value = false
+		}, DELAY)
+	}
+
+	return {
+		isCopied,
+		copy,
+	}
+}

src/components/index.js

@@ -59,6 +59,7 @@ export { default as NcEmojiPicker } from './NcEmojiPicker/index.js'
 export { default as NcEmptyContent } from './NcEmptyContent/index.js'
 export { default as NcFormBox } from './NcFormBox/index.ts'
 export { default as NcFormBoxButton } from './NcFormBoxButton/index.ts'
+export { default as NcFormBoxCopyButton } from './NcFormBoxCopyButton/index.ts'
 export { default as NcFormGroup } from './NcFormGroup/index.ts'
 export { default as NcGuestContent } from './NcGuestContent/index.js'
 export { default as NcHeaderButton } from './NcHeaderButton/index.js'