picocrank 1.35.0 → 1.36.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.35.0",
+  "version": "1.36.1",
   "type": "module",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
@@ -24,25 +24,25 @@
     "url": "https://github.com/jamesread/picocrank/issues"
   },
   "dependencies": {
-    "@hugeicons/core-free-icons": "^4.3.0",
+    "@hugeicons/core-free-icons": "^4.3.5",
     "@hugeicons/vue": "^1.0.8",
-    "@vitejs/plugin-vue": "^6.0.8",
-    "femtocrank": "^2.7.1",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "femtocrank": "^2.7.2",
     "unplugin-vue-components": "^32.1.0",
-    "vite": "^8.2.2",
-    "vue": "^3.5.42",
-    "vue-router": "^5.3.1"
+    "vite": "^8.3.4",
+    "vue": "^3.5.43",
+    "vue-router": "^5.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@vitest/coverage-v8": "^5.0.0",
-    "@vue/test-utils": "^2.5.0",
-    "eslint": "^10.10.0",
-    "eslint-plugin-vue": "^10.11.0",
-    "globals": "^17.12.0",
-    "happy-dom": "^20.14.0",
+    "@vitest/coverage-v8": "^5.0.3",
+    "@vue/test-utils": "^2.5.1",
+    "eslint": "^10.12.0",
+    "eslint-plugin-vue": "^10.11.1",
+    "globals": "^17.13.0",
+    "happy-dom": "^20.14.6",
     "semantic-release": "^25.0.9",
-    "vitest": "^5.0.0",
+    "vitest": "^5.0.3",
     "vue-eslint-parser": "^10.4.1"
   },
   "homepage": "https://github.com/jamesread/picocrank#readme"

package/vue/components/NotificationBlock.spec.js

@@ -0,0 +1,71 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import NotificationBlock from './NotificationBlock.vue'
+
+const routerLinkStub = {
+	name: 'RouterLink',
+	template: '<a><slot /></a>',
+}
+
+function mountBlock(props = {}, options = {}) {
+	return mount(NotificationBlock, {
+		props,
+		global: {
+			stubs: {
+				RouterLink: routerLinkStub,
+				HugeiconsIcon: true,
+			},
+		},
+		...options,
+	})
+}
+
+describe('NotificationBlock', () => {
+	afterEach(() => {
+		vi.restoreAllMocks()
+	})
+
+	it('shows a copy control for critical, error, and bad types', () => {
+		for (const type of ['critical', 'error', 'bad']) {
+			const wrapper = mountBlock({ type, message: 'Something failed.' })
+			expect(wrapper.find('.notification-copy').exists()).toBe(true)
+			wrapper.unmount()
+		}
+	})
+
+	it('does not show a copy control for non-critical types', () => {
+		for (const type of ['info', 'note', 'success', 'warning', 'severe', 'old']) {
+			const wrapper = mountBlock({ type, message: 'Status update.' })
+			expect(wrapper.find('.notification-copy').exists()).toBe(false)
+			wrapper.unmount()
+		}
+	})
+
+	it('copies the body text to the clipboard', async () => {
+		const writeText = vi.fn().mockResolvedValue(undefined)
+		vi.stubGlobal('navigator', {
+			clipboard: { writeText },
+		})
+
+		const wrapper = mountBlock({
+			type: 'critical',
+			message: 'Database unreachable.',
+		})
+
+		await wrapper.find('.notification-copy').trigger('click')
+
+		expect(writeText).toHaveBeenCalledWith('Database unreachable.')
+	})
+
+	it('does not dismiss when the copy control is clicked', async () => {
+		const wrapper = mountBlock({
+			type: 'error',
+			message: 'Boom.',
+			dismissible: true,
+		})
+
+		await wrapper.find('.notification-copy').trigger('click')
+
+		expect(wrapper.emitted('dismiss')).toBeUndefined()
+	})
+})

package/vue/components/NotificationBlock.vue

@@ -5,7 +5,7 @@
 		@click="handleClick"
 	>
 		<span class="notification-key">{{ displayLabel }}</span>
-		<span class="notification-body">
+		<span ref="bodyRef" class="notification-body">
 			<slot>
 				<template v-if="hasLink">
 					<template v-if="messagePrefix">{{ messagePrefix }}</template><RouterLink
@@ -21,12 +21,29 @@
 				<template v-else>{{ message }}</template>
 			</slot>
 		</span>
+		<button
+			v-if="showCopyButton"
+			type="button"
+			class="notification-copy"
+			:title="copied ? 'Copied' : 'Copy to clipboard'"
+			:aria-label="copied ? 'Copied' : 'Copy to clipboard'"
+			@click.stop="copyToClipboard"
+		>
+			<HugeiconsIcon
+				:icon="copied ? CopyCheckIcon : Copy01Icon"
+				width="1em"
+				height="1em"
+				aria-hidden="true"
+			/>
+		</button>
 	</div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { RouterLink } from 'vue-router'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { Copy01Icon, CopyCheckIcon } from '@hugeicons/core-free-icons'
 
 const TYPE_LABELS = {
 	info: 'INFO:',
@@ -41,6 +58,8 @@ const TYPE_LABELS = {
 	old: 'OLD:',
 }
 
+const COPYABLE_TYPES = new Set(['critical', 'error', 'bad'])
+
 const props = defineProps({
 	type: {
 		type: String,
@@ -101,6 +120,10 @@ const props = defineProps({
 
 const emit = defineEmits(['click', 'dismiss'])
 
+const bodyRef = ref(null)
+const copied = ref(false)
+let copiedTimer
+
 const displayLabel = computed(() => {
 	const trimmed = props.label.trim()
 	if (trimmed) {
@@ -113,6 +136,8 @@ const hasLink = computed(() => Boolean(
 	props.linkLabel && (props.linkHref || props.linkTo)
 ))
 
+const showCopyButton = computed(() => COPYABLE_TYPES.has(props.type))
+
 const rootClasses = computed(() => ({
 	notification: true,
 	[props.type]: true,
@@ -126,6 +151,49 @@ function handleClick(event) {
 		emit('dismiss', event)
 	}
 }
+
+function copyText() {
+	const fromBody = bodyRef.value?.textContent?.trim()
+	if (fromBody) {
+		return fromBody
+	}
+	return props.message.trim()
+}
+
+function markCopied() {
+	copied.value = true
+	clearTimeout(copiedTimer)
+	copiedTimer = setTimeout(() => {
+		copied.value = false
+	}, 1500)
+}
+
+async function copyToClipboard() {
+	const text = copyText()
+	if (!text) {
+		return
+	}
+
+	try {
+		await navigator.clipboard.writeText(text)
+		markCopied()
+	} catch (_error) {
+		try {
+			const textarea = document.createElement('textarea')
+			textarea.value = text
+			textarea.setAttribute('readonly', '')
+			textarea.style.position = 'fixed'
+			textarea.style.opacity = '0'
+			document.body.appendChild(textarea)
+			textarea.select()
+			document.execCommand('copy')
+			document.body.removeChild(textarea)
+			markCopied()
+		} catch (_fallbackError) {
+			// Clipboard unavailable; leave UI unchanged.
+		}
+	}
+}
 </script>
 
 <style scoped>
@@ -142,4 +210,27 @@ function handleClick(event) {
 .notification.attached-below.critical {
 	border-color: var(--karma-bad-border);
 }
+
+.notification-copy {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: 0 0 auto;
+	align-self: center;
+	width: 1.75rem;
+	height: 1.75rem;
+	margin: 0 0.35rem 0 0;
+	padding: 0;
+	border: 0;
+	border-radius: 0.35rem;
+	background: transparent;
+	color: var(--text-color);
+	cursor: pointer;
+	opacity: 0.7;
+}
+
+.notification-copy:hover {
+	opacity: 1;
+	background: var(--hover-background-color, color-mix(in srgb, var(--text-color) 10%, transparent));
+}
 </style>

package/vue/components/NotificationPopup.vue

@@ -73,6 +73,8 @@ const isExternalLink = computed(() =>
 
 .notification-popup :deep(.notification) {
 	margin: 0;
+	/* Room for the absolute dismiss control (and copy on error/critical). */
+	padding-right: 2rem;
 }
 
 .notification-popup-content {

package/vue/examples/StatusExample.vue

@@ -7,6 +7,7 @@
 			Each block uses a karma type class for the key tint
 			(<code>.notification.info</code>, <code>.notification.warning</code>, …).
 			Add <code>clickable</code> when the whole notification is interactive.
+			Critical / error / bad blocks include a small copy-to-clipboard control for the body text.
 		</p>
 
 		<FormLayout class="notification-builder" @submit.prevent="addBuiltNotification">