picocrank 1.30.0 → 1.31.0

package/package.json

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

package/vue/components/ReadOnlyTextArea.vue

@@ -6,11 +6,21 @@
 			<div
 				v-if="showActions"
 				class="readonly-textarea-actions"
-				:class="{ 'readonly-textarea-actions--leading': hasActions }"
 			>
 				<div v-if="hasActions" class="readonly-textarea-actions-slot">
 					<slot name="actions" />
 				</div>
+				<button
+					v-if="showClearButton"
+					type="button"
+					class="readonly-textarea-clear neutral"
+					title="Clear contents"
+					:disabled="!modelValue"
+					@click="clear"
+				>
+					<HugeiconsIcon :icon="Delete02Icon" width="1em" height="1em" />
+					<span>{{ clearLabel }}</span>
+				</button>
 				<button
 					v-if="showCopyButton"
 					type="button"
@@ -39,7 +49,7 @@
 <script setup>
 import { ref, computed, useId, useSlots, watch, Comment } from 'vue'
 import { HugeiconsIcon } from '@hugeicons/vue'
-import { Copy01Icon, CopyCheckIcon } from '@hugeicons/core-free-icons'
+import { Copy01Icon, CopyCheckIcon, Delete02Icon } from '@hugeicons/core-free-icons'
 
 const props = defineProps({
 	modelValue: {
@@ -70,6 +80,10 @@ const props = defineProps({
 		type: Boolean,
 		default: true,
 	},
+	showClearButton: {
+		type: Boolean,
+		default: false,
+	},
 	copyLabel: {
 		type: String,
 		default: 'Copy',
@@ -78,6 +92,10 @@ const props = defineProps({
 		type: String,
 		default: 'Copied',
 	},
+	clearLabel: {
+		type: String,
+		default: 'Clear',
+	},
 	copiedFeedbackMs: {
 		type: Number,
 		default: 2000,
@@ -92,27 +110,40 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['copy', 'copy-error', 'update:modelValue'])
+const emit = defineEmits(['copy', 'copy-error', 'clear', 'update:modelValue'])
 
 const slots = useSlots()
 
-const hasActions = computed(() => {
+const slotActionCount = computed(() => {
 	const render = slots.actions
 	if (!render) {
-		return false
+		return 0
 	}
-	return render().some((vnode) => vnode.type !== Comment)
+	return render().filter((vnode) => vnode.type !== Comment).length
 })
 
-const showActions = computed(() => hasActions.value || props.showCopyButton)
+const hasActions = computed(() => slotActionCount.value > 0)
+
+const builtInActionCount = computed(() => {
+	let count = 0
+	if (props.showClearButton) count++
+	if (props.showCopyButton) count++
+	return count
+})
+
+const actionButtonCount = computed(
+	() => slotActionCount.value + builtInActionCount.value,
+)
+
+const showActions = computed(
+	() => actionButtonCount.value > 0,
+)
 
 const showHeader = computed(
 	() => Boolean(props.label) || showActions.value,
 )
 
-const pushActionsEnd = computed(
-	() => showActions.value && !hasActions.value,
-)
+const pushActionsEnd = computed(() => showActions.value)
 
 const generatedId = useId()
 const textareaId = props.id || `readonly-textarea-${generatedId}`
@@ -156,6 +187,7 @@ function appendSection(sectionName) {
 function clear() {
 	content.value = ''
 	emit('update:modelValue', content.value)
+	emit('clear')
 }
 
 function getContentAsString() {
@@ -236,10 +268,6 @@ defineExpose({
 	flex-shrink: 0;
 }
 
-.readonly-textarea-actions--leading {
-	margin-left: 0;
-}
-
 .readonly-textarea-actions-slot {
 	display: inline-flex;
 	align-items: center;
@@ -247,7 +275,8 @@ defineExpose({
 	flex-wrap: wrap;
 }
 
-.readonly-textarea-copy {
+.readonly-textarea-copy,
+.readonly-textarea-clear {
 	display: inline-flex;
 	align-items: center;
 	gap: 0.35em;

package/vue/components/Section.vue

@@ -7,9 +7,6 @@
 						<HugeiconsIcon
 							:icon="icon"
 							class="section-title-icon"
-							width="1.1em"
-							height="1.1em"
-							:strokeWidth="2"
 							aria-hidden="true"
 						/>
 						<span class="section-title-text">

package/vue/components/Sidebar.vue

@@ -3,7 +3,7 @@
 		:id="SIDEBAR_PANEL_ID"
 		ref="sidebarRef"
 		class="sidebar"
-		:class="{ 'shown': isOpen, 'stuck': isStuck }"
+		:class="{ 'shown': isVisible, 'stuck': isStuck }"
 		aria-label="Sidebar"
 		:aria-hidden="isVisible ? undefined : 'true'"
 		:inert="isVisible ? undefined : true"
@@ -25,14 +25,14 @@
 						:icon="Pin02Icon"
 						width="1em"
 						height="1em"
-						:strokeWidth="3"
+						:strokeWidth="1.5"
 					/>
 					<HugeiconsIcon
 						v-else
 						:icon="PinIcon"
 						width="1em"
 						height="1em"
-						:strokeWidth="3"
+						:strokeWidth="1.5"
 					/>
 				</span>
 			</button>
@@ -274,8 +274,13 @@ function unstick() {
 }
 
 function toggle() {
+	if (isStuck.value) {
+		isStuck.value = false
+		isOpen.value = false
+		return
+	}
+
 	isOpen.value = !isOpen.value
-	isStuck.value = false
 }
 
 function open() {
@@ -284,7 +289,6 @@ function open() {
 
 function close() {
 	isOpen.value = false
-	isStuck.value = false
 }
 
 function isLinkActive(link) {
@@ -410,6 +414,28 @@ button {
 	border: 0;
 }
 
+.stick-toggle {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	align-self: stretch;
+	flex-shrink: 0;
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-left: 1em;
+	padding-right: 1em;
+	border-radius: 0;
+	color: var(--text-color);
+	background-color: transparent;
+	cursor: pointer;
+}
+
+.stick-toggle:hover,
+.stick-toggle:focus-visible {
+	background-color: var(--sidebar-hover-bg-color);
+	color: var(--hover-text-color);
+}
+
 .navigation-links,
 .nav-section-links {
 	list-style: none;

package/vue/examples/App.vue

@@ -222,11 +222,6 @@
 		registerSidebarNavigation(navigation.value, { onHelloWorld: helloWorld })
 		registerTopBarNavigation(topBarNavigation.value)
 
-		if (sidebar.value) {
-			sidebar.value.open();
-			sidebar.value.stick();
-		}
-
 		registerQuickSearchItems()
 	});
 

package/vue/examples/ReadOnlyTextAreaExample.vue

@@ -17,7 +17,9 @@
 				v-model="diagnosticLog"
 				label="Application log"
 				:rows="10"
+				show-clear-button
 				@copy="onCopy"
+				@clear="onClear"
 			>
 				<template #actions>
 					<button type="button" @click="refreshDiagnostics">Refresh log</button>
@@ -28,6 +30,7 @@
 				v-model="environmentInfo"
 				label="Environment (JSON)"
 				:rows="12"
+				show-clear-button
 				markdown-ticks
 				markdown-lang="json"
 			/>
@@ -37,14 +40,99 @@
 				v-model="yamlConfig"
 				label="Configuration (YAML)"
 				:rows="12"
+				show-clear-button
 				markdown-ticks
 				markdown-lang="yaml"
 			/>
 
-			<ReadOnlyTextArea
-				:rows="4"
-				placeholder="No diagnostics available."
-			/>
+			<div class="readonly-playground">
+				<p class="readonly-playground-intro">
+					Toggle options on the playground instance below to explore every
+					<code>ReadOnlyTextArea</code> prop and the actions slot.
+				</p>
+
+				<div
+					class="readonly-playground-controls"
+					role="group"
+					aria-label="ReadOnlyTextArea playground options"
+				>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.labelEnabled" type="checkbox" />
+						Label
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.showCopyButton" type="checkbox" />
+						Copy button
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.showClearButton" type="checkbox" />
+						Clear button
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.showActions" type="checkbox" />
+						Actions slot
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.monospace" type="checkbox" />
+						Monospace
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.markdownTicks" type="checkbox" />
+						Markdown ticks
+					</label>
+					<label class="readonly-example-toggle">
+						<input
+							v-model="playground.markdownLangJson"
+							type="checkbox"
+							:disabled="!playground.markdownTicks"
+						/>
+						Markdown lang: json
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.usePlaceholder" type="checkbox" />
+						Placeholder
+					</label>
+					<label class="readonly-example-toggle">
+						<input v-model="playground.customButtonLabels" type="checkbox" />
+						Custom button labels
+					</label>
+					<label class="readonly-example-toggle readonly-playground-rows">
+						<span>Rows</span>
+						<input
+							v-model.number="playground.rows"
+							type="number"
+							min="2"
+							max="24"
+						/>
+					</label>
+				</div>
+
+				<ReadOnlyTextArea
+					v-model="playgroundContent"
+					:label="playground.labelEnabled ? 'Playground output' : ''"
+					:rows="playground.rows"
+					:placeholder="playground.usePlaceholder ? 'No diagnostics available.' : ''"
+					:monospace="playground.monospace"
+					:show-copy-button="playground.showCopyButton"
+					:show-clear-button="playground.showClearButton"
+					:copy-label="playground.customButtonLabels ? 'Copy all' : undefined"
+					:copied-label="playground.customButtonLabels ? 'Copied!' : undefined"
+					:clear-label="playground.customButtonLabels ? 'Reset' : undefined"
+					:markdown-ticks="playground.markdownTicks"
+					:markdown-lang="playground.markdownTicks && playground.markdownLangJson ? 'json' : ''"
+					@copy="onPlaygroundCopy"
+					@clear="onPlaygroundClear"
+					@copy-error="onPlaygroundCopyError"
+				>
+					<template v-if="playground.showActions" #actions>
+						<button type="button" @click="fillPlaygroundContent">Fill sample</button>
+					</template>
+				</ReadOnlyTextArea>
+
+				<p v-if="playgroundFeedback" class="copy-feedback subtle">
+					{{ playgroundFeedback }}
+				</p>
+			</div>
 
 			<p v-if="lastCopied" class="copy-feedback subtle">
 				Copied {{ lastCopied.length > 60 ? `${lastCopied.slice(0, 60)}…` : lastCopied }}
@@ -62,8 +150,40 @@ const diagnosticLog = ref('')
 const environmentInfo = ref('')
 const yamlConfig = ref('')
 const lastCopied = ref('')
+const playgroundFeedback = ref('')
 const yamlConfigRef = ref(null)
 
+const playground = ref({
+	labelEnabled: false,
+	showCopyButton: true,
+	showClearButton: false,
+	showActions: false,
+	monospace: true,
+	markdownTicks: false,
+	markdownLangJson: false,
+	usePlaceholder: false,
+	customButtonLabels: false,
+	rows: 4,
+})
+
+function buildPlaygroundSample() {
+	return [
+		'Playground sample output',
+		'Toggle the checkboxes above to try label, buttons, markdown fences, and monospace.',
+		'',
+		'status: ok',
+		'items: 3',
+	].join('\n')
+}
+
+const playgroundContent = ref(buildPlaygroundSample())
+
+function fillPlaygroundContent() {
+	playground.value.usePlaceholder = false
+	playgroundContent.value = buildPlaygroundSample()
+	playgroundFeedback.value = 'Filled playground with sample content.'
+}
+
 function buildDiagnosticLog() {
 	const now = new Date().toISOString()
 	return [
@@ -122,6 +242,23 @@ function onCopy(value) {
 	lastCopied.value = value.split('\n')[0]
 }
 
+function onClear() {
+	lastCopied.value = ''
+}
+
+function onPlaygroundCopy(value) {
+	playgroundFeedback.value = `Copied ${value.split('\n').length} line(s).`
+}
+
+function onPlaygroundClear() {
+	playgroundContent.value = ''
+	playgroundFeedback.value = 'Playground cleared.'
+}
+
+function onPlaygroundCopyError(error) {
+	playgroundFeedback.value = `Copy failed: ${error?.message ?? error}`
+}
+
 refreshDiagnostics()
 </script>
 
@@ -140,4 +277,34 @@ refreshDiagnostics()
 	margin: 0;
 	font-size: 0.875rem;
 }
+
+.readonly-playground {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+
+.readonly-playground-intro {
+	margin: 0;
+}
+
+.readonly-example-toggle {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	font-size: 0.875rem;
+	cursor: pointer;
+	user-select: none;
+}
+
+.readonly-playground-controls {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.75rem 1rem;
+}
+
+.readonly-playground-rows input[type='number'] {
+	width: 4rem;
+	padding: 0.15rem 0.35rem;
+}
 </style>