picocrank 1.3.1 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "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

@@ -17,9 +17,11 @@
 		
 		<div class = "fg1"></div>
 
-		<div class = "user-info">
-			<span v-if="username">{{ username }}</span>
-		</div>
+		<slot name = "user-info">
+			<div class = "user-info">
+				<span v-if="username">{{ username }}</span>
+			</div>
+		</slot>
 	</header>
 </template>
 

package/vue/components/Sidebar.vue

@@ -18,7 +18,12 @@
 					<li v-for="link in navigationLinks" :key="link.name" :title="link.title">
 						<!-- Render separator if link is a separator -->
 						<div v-if="link.type === 'separator'" class="separator"></div>
-						<!-- Render regular link if not a separator -->
+						<div v-else-if="link.type === 'callback'">
+							<a href="#" @click.prevent="link.callback()">
+								<HugeiconsIcon :icon="link.icon" />
+								<span>{{ link.title }}</span>
+							</a>
+						</div>
 						<router-link v-else :to="link.path" :class="{ active: isActive(link.path) }">
 							<HugeiconsIcon :icon="link.icon" />
 							<span>{{ link.title }}</span>
@@ -68,6 +73,18 @@ function addNavigationLink(link) {
   }
 }
 
+function addCallback(title, callback, options = {}) {
+  const callbackLink = {
+	name: options.name || title.toLowerCase().replace(/\s+/g, '-'),
+	type: 'callback',
+	icon: options.icon || PinIcon,
+	callback: callback || (() => {}),
+	title: title
+  }
+
+  addNavigationLink(callbackLink)
+}
+
 function addSeparator(id) {
   const separator = {
     name: id || `nav-separator-${Date.now()}`,
@@ -131,6 +148,7 @@ defineExpose({
   isActive,
   addNavigationLink,
   addRouterLink,
+  addCallback,
   addSeparator,
   removeNavigationLink,
   clearNavigationLinks,

package/vue/views/App.vue

@@ -28,6 +28,7 @@
 <script setup>
 	import { ref, onMounted } from 'vue';
 	import { useRouter } from 'vue-router';
+	import { Pin02Icon } from '@hugeicons/core-free-icons'
 
 	import QuickSearch from './../components/QuickSearch.vue'
 
@@ -47,6 +48,8 @@
 		sidebar.value.addSeparator('separator-1');
 		sidebar.value.addRouterLink('ViewItem', { id: 1 })
 		sidebar.value.addSeparator('separator-2');
+		sidebar.value.addCallback('Hello World', helloWorld, { icon: Pin02Icon })
+		sidebar.value.addSeparator('separator-3');
 		sidebar.value.addRouterLink('Admin')
 		sidebar.value.open();
 		sidebar.value.stick();