picocrank 1.18.0 → 1.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.18.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/vue/components/ReadOnlyTextArea.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup>
-import { ref, computed, useId } from 'vue'
+import { ref, computed, useId, watch } from 'vue'
 import { HugeiconsIcon } from '@hugeicons/vue'
 import { Copy01Icon, CopyCheckIcon } from '@hugeicons/core-free-icons'
 
@@ -83,25 +83,58 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['copy', 'copy-error'])
+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 || !props.modelValue) {
-		return props.modelValue
+	if (!props.markdownTicks || !content.value) {
+		return content.value
 	}
 
 	const openingFence = props.markdownLang ? `\`\`\`${props.markdownLang}` : '```'
-	return `${openingFence}\n${props.modelValue}\n\`\`\``
+	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 (!props.modelValue) {
+	if (!content.value) {
 		return
 	}
 
@@ -133,6 +166,11 @@ function markCopied() {
 
 defineExpose({
 	copy,
+	append,
+	appendYamlProperty,
+	appendSection,
+	clear,
+	getContentAsString,
 })
 </script>
 

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/ReadOnlyTextAreaExample.vue

@@ -29,7 +29,15 @@
 			/>
 
 			<ReadOnlyTextArea
-				label="Empty output"
+				ref="yamlConfigRef"
+				v-model="yamlConfig"
+				label="Configuration (YAML)"
+				:rows="12"
+				markdown-ticks
+				markdown-lang="yaml"
+			/>
+
+			<ReadOnlyTextArea
 				:rows="4"
 				placeholder="No diagnostics available."
 			/>
@@ -42,13 +50,15 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+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()
@@ -81,10 +91,27 @@ function buildEnvironmentInfo() {
 	}, 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) {