picocrank 1.17.0 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {

package/router.js

@@ -7,6 +7,7 @@ import { SecurityValidationIcon } from '@hugeicons/core-free-icons';
 import { CalendarIcon } from '@hugeicons/core-free-icons';
 import { EditIcon } from '@hugeicons/core-free-icons';
 import { Menu01Icon } from '@hugeicons/core-free-icons';
+import { ClipboardCopyIcon } from '@hugeicons/core-free-icons';
 
 const routes = [
   {
@@ -75,6 +76,15 @@ const routes = [
       icon: EditIcon,
     }
   },
+  {
+    name: 'ReadOnlyTextAreaExample',
+    path: '/readonly-textarea-example',
+    component: () => import('./vue/views/ReadOnlyTextAreaExample.vue'),
+    meta: {
+      title: 'ReadOnlyTextArea Example',
+      icon: ClipboardCopyIcon,
+    }
+  },
   {
     name: 'TabsExample',
     path: '/tabs-example',

package/vue/components/ReadOnlyTextArea.vue

@@ -0,0 +1,178 @@
+<template>
+	<div class="readonly-textarea">
+		<div v-if="label || showCopyButton" class="readonly-textarea-header">
+			<label v-if="label" :for="textareaId">{{ label }}</label>
+			<div v-else class="fg1" />
+			<button
+				v-if="showCopyButton"
+				type="button"
+				class="readonly-textarea-copy"
+				:title="copied ? 'Copied' : 'Copy to clipboard'"
+				:disabled="!modelValue"
+				@click="copy"
+			>
+				<HugeiconsIcon :icon="copied ? CopyCheckIcon : Copy01Icon" width="1em" height="1em" />
+				<span>{{ copied ? copiedLabel : copyLabel }}</span>
+			</button>
+		</div>
+		<textarea
+			:id="textareaId"
+			ref="textareaRef"
+			:value="displayValue"
+			readonly
+			:rows="rows"
+			:placeholder="placeholder"
+			:class="{ monospace }"
+		/>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, useId } from 'vue'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { Copy01Icon, CopyCheckIcon } from '@hugeicons/core-free-icons'
+
+const props = defineProps({
+	modelValue: {
+		type: String,
+		default: '',
+	},
+	label: {
+		type: String,
+		default: '',
+	},
+	id: {
+		type: String,
+		default: '',
+	},
+	rows: {
+		type: Number,
+		default: 8,
+	},
+	placeholder: {
+		type: String,
+		default: '',
+	},
+	monospace: {
+		type: Boolean,
+		default: true,
+	},
+	showCopyButton: {
+		type: Boolean,
+		default: true,
+	},
+	copyLabel: {
+		type: String,
+		default: 'Copy',
+	},
+	copiedLabel: {
+		type: String,
+		default: 'Copied',
+	},
+	copiedFeedbackMs: {
+		type: Number,
+		default: 2000,
+	},
+	markdownTicks: {
+		type: Boolean,
+		default: false,
+	},
+	markdownLang: {
+		type: String,
+		default: '',
+	},
+})
+
+const emit = defineEmits(['copy', 'copy-error'])
+
+const generatedId = useId()
+const textareaId = props.id || `readonly-textarea-${generatedId}`
+const textareaRef = ref(null)
+const copied = ref(false)
+let copiedTimer = null
+
+const displayValue = computed(() => {
+	if (!props.markdownTicks || !props.modelValue) {
+		return props.modelValue
+	}
+
+	const openingFence = props.markdownLang ? `\`\`\`${props.markdownLang}` : '```'
+	return `${openingFence}\n${props.modelValue}\n\`\`\``
+})
+
+async function copy() {
+	if (!props.modelValue) {
+		return
+	}
+
+	const text = displayValue.value
+
+	try {
+		await navigator.clipboard.writeText(text)
+		markCopied()
+		emit('copy', text)
+	} catch (error) {
+		try {
+			textareaRef.value?.select()
+			document.execCommand('copy')
+			markCopied()
+			emit('copy', text)
+		} catch (fallbackError) {
+			emit('copy-error', fallbackError)
+		}
+	}
+}
+
+function markCopied() {
+	copied.value = true
+	clearTimeout(copiedTimer)
+	copiedTimer = setTimeout(() => {
+		copied.value = false
+	}, props.copiedFeedbackMs)
+}
+
+defineExpose({
+	copy,
+})
+</script>
+
+<style scoped>
+.readonly-textarea {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	width: 100%;
+}
+
+.readonly-textarea-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.75rem;
+}
+
+.readonly-textarea-header label {
+	margin: 0;
+}
+
+.fg1 {
+	flex: 1;
+}
+
+.readonly-textarea-copy {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35em;
+}
+
+.readonly-textarea textarea {
+	width: 100%;
+	resize: vertical;
+	margin: 0;
+}
+
+.readonly-textarea textarea.monospace {
+	font-family: monospace;
+	white-space: pre;
+}
+</style>

package/vue/views/App.vue

@@ -93,6 +93,7 @@
 			navigation.value.addRouterLink('TableExample')
 			navigation.value.addRouterLink('CalendarExample')
 			navigation.value.addRouterLink('FormExample')
+			navigation.value.addRouterLink('ReadOnlyTextAreaExample')
 			navigation.value.addRouterLink('TabsExample')
 			navigation.value.addSeparator('separator-1');
 			navigation.value.addRouterLink('ViewItem', 'View Awesome Item', { params: { id: 1 } })

package/vue/views/ReadOnlyTextAreaExample.vue

@@ -0,0 +1,112 @@
+<template>
+	<Section
+		title="ReadOnlyTextArea Example"
+		subtitle="Read-only text areas with copy-to-clipboard, for diagnostics and similar output"
+	>
+		<template #toolbar>
+			<button type="button" @click="refreshDiagnostics">Refresh diagnostics</button>
+		</template>
+
+		<div class="readonly-textarea-examples">
+			<p>
+				Use <code>ReadOnlyTextArea</code> when you need to show log output, API responses,
+				or other text that users should read and copy but not edit.
+			</p>
+
+			<ReadOnlyTextArea
+				v-model="diagnosticLog"
+				label="Application log"
+				:rows="10"
+				@copy="onCopy"
+			/>
+
+			<ReadOnlyTextArea
+				v-model="environmentInfo"
+				label="Environment (JSON)"
+				:rows="12"
+				markdown-ticks
+				markdown-lang="json"
+			/>
+
+			<ReadOnlyTextArea
+				label="Empty output"
+				:rows="4"
+				placeholder="No diagnostics available."
+			/>
+
+			<p v-if="lastCopied" class="copy-feedback subtle">
+				Copied {{ lastCopied.length > 60 ? `${lastCopied.slice(0, 60)}…` : lastCopied }}
+			</p>
+		</div>
+	</Section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Section from '../components/Section.vue'
+import ReadOnlyTextArea from '../components/ReadOnlyTextArea.vue'
+
+const diagnosticLog = ref('')
+const environmentInfo = ref('')
+const lastCopied = ref('')
+
+function buildDiagnosticLog() {
+	const now = new Date().toISOString()
+	return [
+		`[${now}] INFO  Service started`,
+		`[${now}] INFO  Listening on http://localhost:8080`,
+		`[${now}] DEBUG Database connection pool ready (size=5)`,
+		`[${now}] WARN  Cache miss for key: user:session:abc123`,
+		`[${now}] INFO  GET /api/health 200 12ms`,
+		`[${now}] ERROR Failed to reach upstream metrics collector`,
+		`[${now}] INFO  Retrying metrics collector in 30s`,
+	].join('\n')
+}
+
+function buildEnvironmentInfo() {
+	return JSON.stringify({
+		app: 'picocrank',
+		version: '1.0.0',
+		environment: 'development',
+		timestamp: new Date().toISOString(),
+		runtime: {
+			userAgent: navigator.userAgent,
+			language: navigator.language,
+			online: navigator.onLine,
+		},
+		features: {
+			clipboard: Boolean(navigator.clipboard),
+			serviceWorker: 'serviceWorker' in navigator,
+		},
+	}, null, 2)
+}
+
+function refreshDiagnostics() {
+	diagnosticLog.value = buildDiagnosticLog()
+	environmentInfo.value = buildEnvironmentInfo()
+	lastCopied.value = ''
+}
+
+function onCopy(value) {
+	lastCopied.value = value.split('\n')[0]
+}
+
+refreshDiagnostics()
+</script>
+
+<style scoped>
+.readonly-textarea-examples {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+
+.readonly-textarea-examples p {
+	margin: 0;
+}
+
+.copy-feedback {
+	margin: 0;
+	font-size: 0.875rem;
+}
+</style>