picocrank 1.17.0 → 1.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.17.0",
+  "version": "1.18.1",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {
@@ -18,17 +18,17 @@
     "url": "https://github.com/jamesread/picocrank/issues"
   },
   "dependencies": {
-    "@hugeicons/core-free-icons": "^4.1.1",
-    "@hugeicons/vue": "^1.0.5",
-    "@vitejs/plugin-vue": "^6.0.6",
+    "@hugeicons/core-free-icons": "^4.2.2",
+    "@hugeicons/vue": "^1.0.7",
+    "@vitejs/plugin-vue": "^6.0.7",
     "femtocrank": "^2.5.0",
-    "unplugin-vue-components": "^32.0.0",
-    "vite": "^8.0.10",
-    "vue": "^3.5.33",
-    "vue-router": "^5.0.6"
+    "unplugin-vue-components": "^32.1.0",
+    "vite": "^8.1.2",
+    "vue": "^3.5.39",
+    "vue-router": "^5.1.0"
   },
   "devDependencies": {
-    "semantic-release": "^25.0.3"
+    "semantic-release": "^25.0.5"
   },
   "homepage": "https://github.com/jamesread/picocrank#readme"
 }

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,216 @@
+<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, watch } 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', 'update:modelValue'])
+
+const generatedId = useId()
+const textareaId = props.id || `readonly-textarea-${generatedId}`
+const textareaRef = ref(null)
+const copied = ref(false)
+const content = ref(props.modelValue)
+let copiedTimer = null
+
+watch(() => props.modelValue, (value) => {
+	content.value = value
+})
+
+const displayValue = computed(() => {
+	if (!props.markdownTicks || !content.value) {
+		return content.value
+	}
+
+	const openingFence = props.markdownLang ? `\`\`\`${props.markdownLang}` : '```'
+	return `${openingFence}\n${content.value}\n\`\`\``
+})
+
+function append(text) {
+	content.value += text
+	emit('update:modelValue', content.value)
+}
+
+function appendYamlProperty(k, v) {
+	const line = `${k}: ${v}`
+	if (content.value && !content.value.endsWith('\n')) {
+		content.value += '\n'
+	}
+	content.value += line
+	emit('update:modelValue', content.value)
+}
+
+function appendSection(sectionName) {
+	content.value += `\n# ${sectionName} ####\n`
+	emit('update:modelValue', content.value)
+}
+
+function clear() {
+	content.value = ''
+	emit('update:modelValue', content.value)
+}
+
+function getContentAsString() {
+	return content.value
+}
+
+async function copy() {
+	if (!content.value) {
+		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,
+	append,
+	appendYamlProperty,
+	appendSection,
+	clear,
+	getContentAsString,
+})
+</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/components/Tabs.vue

@@ -143,6 +143,7 @@ defineExpose({
 	background: transparent;
 	border: none;
 	border-bottom: 2px solid transparent;
+	border-radius: 0;
 	cursor: pointer;
 	font-size: 1em;
 	color: var(--text-muted, #666);
@@ -165,7 +166,7 @@ defineExpose({
 .tab-button:focus {
 	outline: 2px solid var(--primary-color, #007bff);
 	outline-offset: -2px;
-	border-radius: 4px 4px 0 0;
+	border-radius: 0;
 }
 
 .tabs-content {
@@ -174,7 +175,8 @@ defineExpose({
 }
 
 .tab-panel {
-	padding: 1.5rem;
+	padding-block: 1.5rem;
+	padding-inline: 0.75rem;
 	display: none;
 }
 
@@ -227,7 +229,8 @@ defineExpose({
 	}
 
 	.tab-panel {
-		padding: 1rem;
+		padding-block: 1rem;
+		padding-inline: 0.5rem;
 	}
 }
 </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,139 @@
+<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
+				ref="yamlConfigRef"
+				v-model="yamlConfig"
+				label="Configuration (YAML)"
+				:rows="12"
+				markdown-ticks
+				markdown-lang="yaml"
+			/>
+
+			<ReadOnlyTextArea
+				: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, nextTick } from 'vue'
+import Section from '../components/Section.vue'
+import ReadOnlyTextArea from '../components/ReadOnlyTextArea.vue'
+
+const diagnosticLog = ref('')
+const environmentInfo = ref('')
+const yamlConfig = ref('')
+const lastCopied = ref('')
+const yamlConfigRef = ref(null)
+
+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 buildYamlConfig() {
+	yamlConfig.value = ''
+	const area = yamlConfigRef.value
+	if (!area) {
+		return
+	}
+
+	area.appendSection('Application')
+	area.appendYamlProperty('name', 'picocrank')
+	area.appendYamlProperty('version', '1.0.0')
+	area.appendYamlProperty('environment', 'development')
+	area.appendSection('Runtime')
+	area.appendYamlProperty('language', navigator.language)
+	area.appendYamlProperty('online', navigator.onLine)
+}
+
+function refreshDiagnostics() {
+	diagnosticLog.value = buildDiagnosticLog()
+	environmentInfo.value = buildEnvironmentInfo()
+	lastCopied.value = ''
+	nextTick(() => buildYamlConfig())
+}
+
+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>