picocrank 1.18.0 → 1.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.18.0",
+  "version": "1.18.2",
   "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/Navigation.vue

@@ -47,7 +47,10 @@ function addRouterLink(link, altTitle = null, options = {}) {
 		icon: foundRoute.meta?.icon || PinIcon,
 		type: 'route',
 		props: options.props || {},
-		description: options.description || foundRoute.meta?.description || null
+		description: options.description || foundRoute.meta?.description || null,
+		disabled: options.disabled || false,
+		iconColor: options.iconColor || null,
+		indicator: options.indicator || false
 	}
 
 	addNavigationLink(routeLink)
@@ -69,7 +72,10 @@ function addCallback(title, callback, options = {}) {
 	icon: options.icon || PinIcon,
 	callback: callback || (() => {}),
 	title: title,
-	description: options.description || null
+	description: options.description || null,
+	disabled: options.disabled || false,
+	iconColor: options.iconColor || null,
+	indicator: options.indicator || false
   }
 
   addNavigationLink(callbackLink)

package/vue/components/NavigationGrid.vue

@@ -4,11 +4,17 @@
 			<button
 				v-for="link in filteredLinks"
 				:key="link.name"
-				:class="['nav-button', { active: isLinkActive(link) }]"
+				:class="['nav-button', { active: isLinkActive(link), disabled: link.disabled }]"
+				:disabled="link.disabled"
 				:title="link.title"
 				@click="handleLinkClick(link)"
 			>
-				<div class="nav-button-icon">
+				<span
+					v-if="showIndicator(link)"
+					class="nav-button-indicator"
+					aria-label="Requires attention"
+				/>
+				<div class="nav-button-icon" :style="getIconStyle(link)">
 					<HugeiconsIcon
 						:icon="link.icon"
 						:width="iconSize"
@@ -102,10 +108,30 @@ const filteredLinks = computed(() => {
 });
 
 function isLinkActive(link) {
+	if (link.disabled) {
+		return false;
+	}
 	return isActive(link);
 }
 
+function getIconStyle(link) {
+	if (link.disabled || isLinkActive(link)) {
+		return undefined;
+	}
+	if (link.iconColor) {
+		return { color: link.iconColor };
+	}
+	return undefined;
+}
+
+function showIndicator(link) {
+	return link.indicator && !link.disabled;
+}
+
 function handleLinkClick(link) {
+	if (link.disabled) {
+		return;
+	}
 	if (link.type === 'route') {
 		const to = link.to || link.path;
 		if (to) {
@@ -147,6 +173,7 @@ function handleLinkClick(link) {
 	cursor: pointer;
 	transition: all 0.2s ease;
 	text-align: left;
+	position: relative;
 }
 
 .navigation-grid.compact .nav-button {
@@ -188,6 +215,46 @@ function handleLinkClick(link) {
 	color: #fff;
 }
 
+.nav-button:disabled,
+.nav-button.disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.nav-button:disabled:hover,
+.nav-button.disabled:hover {
+	border-color: var(--border-color, #e1e5e9);
+	transform: none;
+	box-shadow: none;
+	background: transparent;
+}
+
+.nav-button:disabled .nav-button-icon,
+.nav-button.disabled .nav-button-icon {
+	color: var(--text-muted, #999);
+}
+
+.nav-button-indicator {
+	position: absolute;
+	top: 0.75rem;
+	right: 0.75rem;
+	width: 0.625rem;
+	height: 0.625rem;
+	border-radius: 50%;
+	background: var(--indicator-color, #dc3545);
+	box-shadow: 0 0 0 2px var(--background-color, #fff);
+	flex-shrink: 0;
+}
+
+.navigation-grid.compact .nav-button-indicator {
+	top: 0.5rem;
+	right: 0.5rem;
+}
+
+.nav-button.active .nav-button-indicator {
+	box-shadow: 0 0 0 2px var(--primary-color, #007bff);
+}
+
 .nav-button-label {
 	font-weight: bold;
 	font-size: 1.125rem;

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) {

package/vue/views/UserControlPanel.vue

@@ -60,7 +60,9 @@ onMounted(() => {
 		}, { 
 			icon: ViewIcon, 
 			name: 'notifications',
-			description: 'Manage notification settings'
+			description: 'Manage notification settings',
+			iconColor: '#e67e22',
+			indicator: true
 		});
 		
 		localNavigation.value.addCallback('Billing', () => {
@@ -68,7 +70,8 @@ onMounted(() => {
 		}, { 
 			icon: EditIcon, 
 			name: 'billing',
-			description: 'View billing and subscription details'
+			description: 'View billing and subscription details',
+			disabled: true
 		});
 	}
 });