picocrank 1.6.0 → 1.6.1

package/package.json

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

package/vue/components/Header.vue

@@ -7,7 +7,7 @@
 			<div class = "fg1" />
 
 			<button id = "sidebar-toggler-button" aria-label = "Open sidebar navigation" aria-pressed = "false" aria-haspopup = "menu" class = "neutral">
-				<HugeiconsIcon :icon = "Menu01Icon" width = "1em" height = "1em" />
+				<HugeiconsIcon :icon = "Menu01Icon" width = "1em" height = "1em" :strokeWidth = 3 />
 			</button>
 		</div>
 
@@ -55,6 +55,11 @@
 
 <style scoped>
 button {
-	color: #bbb;
+	border: 0;
+	color: #fff;
 }
-</style>
+
+button:hover {
+	background-color: transparent;
+}
+</style>

package/vue/components/Section.vue

@@ -39,3 +39,35 @@ const props = defineProps({
 	},
 });
 </script>
+
+<style scoped>
+:slotted(button):not(.good),
+:slotted(.button):not(.good)
+{
+	background-color: white;
+}
+
+:slotted(button:hover):not(.good),
+:slotted(.button:hover):not(.good)
+{
+	background-color: #f0f0f0;
+}
+
+@media (prefers-color-scheme: dark) {
+	:slotted(button):not(.good),
+	:slotted(.button):not(.good)
+	{
+		background-color: #111;
+		border: 1px solid #222;
+		color: #fff;
+	}
+
+	:slotted(button:hover):not(.good),
+	:slotted(.button:hover):not(.good)
+	{
+		background-color: #222;
+		border: 1px solid #333;
+		color: #fff;
+	}
+}
+</style>

package/vue/components/Sidebar.vue

@@ -5,10 +5,10 @@
 			<div class = "fg1" />
 				<button class="stick-toggle" :aria-pressed="isStuck" :title="isStuck ? 'Unstick sidebar' : 'Stick sidebar'"	@click="toggleStick">
 					<span v-if="isStuck">
-						<HugeiconsIcon :icon="Pin02Icon" width = "1em" height = "1em" />
+						<HugeiconsIcon :icon="Pin02Icon" width = "1em" height = "1em" :strokeWidth = 3 />
 					</span>
 					<span v-else>
-						<HugeiconsIcon :icon="PinIcon" width = "1em" height = "1em" />
+						<HugeiconsIcon :icon="PinIcon" width = "1em" height = "1em" :strokeWidth = 3 />
 					</span>
 				</button>
 			</div>
@@ -24,6 +24,7 @@
 								<span>{{ link.title }}</span>
 							</a>
 						</div>
+						<div v-else-if="link.type === 'html'" v-html="link.html"></div>
 						<router-link v-else :to="link.path" :class="{ active: isActive(link.path) }">
 							<HugeiconsIcon :icon="link.icon" />
 							<span>{{ link.title }}</span>
@@ -94,6 +95,16 @@ function addSeparator(id) {
   addNavigationLink(separator)
 }
 
+function addHtml(html, options = {}) {
+  const htmlLink = {
+    name: options.name || `html-item-${Date.now()}`,
+    type: 'html',
+    html: html,
+    title: options.title || 'HTML Item'
+  }
+  addNavigationLink(htmlLink)
+}
+
 function removeNavigationLink(linkId) {
   navigationLinks.value = navigationLinks.value.filter(link => link.id !== linkId)
 }
@@ -150,6 +161,7 @@ defineExpose({
   addRouterLink,
   addCallback,
   addSeparator,
+  addHtml,
   removeNavigationLink,
   clearNavigationLinks,
   getNavigationLinks,
@@ -171,6 +183,10 @@ li {
 	padding: 0;
 }
 
+button {
+	border: 0;
+}
+
 .navigation-links a {
 	display: flex;
 	align-items: center;

package/vue/views/App.vue

@@ -51,6 +51,7 @@
 		sidebar.value.addSeparator('separator-2');
 		sidebar.value.addCallback('Hello World', helloWorld, { icon: Pin02Icon })
 		sidebar.value.addSeparator('separator-3');
+		sidebar.value.addHtml('<h2 style = "padding: 0.75em;">Administration</h2>', { name: 'admin-heading' })
 		sidebar.value.addRouterLink('Admin')
 		sidebar.value.open();
 		sidebar.value.stick();

package/vue/views/Welcome.vue

@@ -10,6 +10,14 @@
 	</Section>
 
 	<Section title = "Lorum" id = "lorem">
+		<template #toolbar>
+			<button>
+				<HugeiconsIcon :icon = "HighlighterIcon" width = "1em" height = "1em" />
+				Highlight</button>
+			<button>Quote</button>
+			<button class = "good">Add</button>
+		</template>
+
 		<p>
 			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -52,4 +60,6 @@
 
 <script setup>
 	import Section from '../components/Section.vue';
+	import { HugeiconsIcon } from '@hugeicons/vue';
+	import { HighlighterIcon } from '@hugeicons/core-free-icons';
 </script>