picocrank 1.9.1 → 1.11.0

package/vue/components/NavigationGrid.vue

@@ -0,0 +1,294 @@
+<template>
+	<div class="navigation-grid-container">
+		<div class="navigation-grid" :class="{ 'compact': compact }">
+			<button
+				v-for="link in filteredLinks"
+				:key="link.name"
+				:class="['nav-button', { active: isLinkActive(link) }]"
+				:title="link.title"
+				@click="handleLinkClick(link)"
+			>
+				<div class="nav-button-icon">
+					<HugeiconsIcon
+						:icon="link.icon"
+						:width="iconSize"
+						:height="iconSize"
+					/>
+				</div>
+					<div class="nav-button-label">{{ link.title }}</div>
+					<div v-if="link.description" class="nav-button-description">
+						{{ link.description }}
+					</div>
+			</button>
+		</div>
+		<div v-if="filteredLinks.length === 0" class="no-links">
+			<p>No navigation links available</p>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { computed, inject, ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { HugeiconsIcon } from '@hugeicons/vue';
+
+const props = defineProps({
+	// Filter links by type: 'route', 'callback', or null for all
+	filterType: {
+		type: String,
+		default: null,
+		validator: (value) => value === null || ['route', 'callback'].includes(value)
+	},
+	// Custom filter function
+	filter: {
+		type: Function,
+		default: null
+	},
+	// Compact mode (smaller buttons)
+	compact: {
+		type: Boolean,
+		default: false
+	},
+	// Icon size
+	iconSize: {
+		type: String,
+		default: '2em'
+	},
+	// Exclude separator and html items
+	excludeNonButtons: {
+		type: Boolean,
+		default: true
+	}
+});
+
+const router = useRouter();
+const route = useRoute();
+
+// Inject navigation from Navigation component
+const navigation = inject('navigation', null);
+
+// Get navigation links (it's a ref from the Navigation component)
+const navigationLinks = navigation ? navigation.navigationLinks : ref([]);
+
+// Get isActive function from navigation
+const isActive = navigation ? navigation.isActive : (() => false);
+
+// Filter links based on props
+const filteredLinks = computed(() => {
+	if (!navigationLinks.value || navigationLinks.value.length === 0) {
+		return [];
+	}
+
+	let links = [...navigationLinks.value];
+
+	// Exclude separators and HTML items by default
+	if (props.excludeNonButtons) {
+		links = links.filter(link => 
+			link.type !== 'separator' && link.type !== 'html'
+		);
+	}
+
+	// Filter by type if specified
+	if (props.filterType) {
+		links = links.filter(link => link.type === props.filterType);
+	}
+
+	// Apply custom filter if provided
+	if (props.filter && typeof props.filter === 'function') {
+		links = links.filter(props.filter);
+	}
+
+	return links;
+});
+
+function isLinkActive(link) {
+	return isActive(link);
+}
+
+function handleLinkClick(link) {
+	if (link.type === 'route') {
+		const to = link.to || link.path;
+		if (to) {
+			router.push(to);
+		}
+	} else if (link.type === 'callback' && link.callback) {
+		link.callback();
+	}
+}
+</script>
+
+<style scoped>
+.navigation-grid-container {
+	width: 100%;
+}
+
+.navigation-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+	gap: 1rem;
+	padding: 1rem 0;
+}
+
+.navigation-grid.compact {
+	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+	gap: 0.75rem;
+}
+
+.nav-button {
+	display: flex;
+	flex-direction: column;
+	align-items: top;
+	justify-content: flex-start;
+	gap: 0.75rem;
+	padding: 1.25rem 0.75rem;
+	background: transparent;
+	border: 1px solid var(--border-color, #e1e5e9);
+	border-radius: 8px;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	text-align: left;
+}
+
+.navigation-grid.compact .nav-button {
+	padding: 0.75rem 0.5rem;
+	gap: 0.5rem;
+}
+
+.nav-button:hover {
+	border-color: var(--primary-color, #007bff);
+	transform: translateY(-2px);
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.nav-button:active {
+	transform: translateY(0);
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.nav-button.active {
+	background: var(--primary-color, #007bff);
+	border-color: var(--primary-color, #007bff);
+	color: #fff;
+}
+
+.nav-button.active .nav-button-icon {
+	color: #fff;
+}
+
+.nav-button-icon {
+	display: flex;
+	align-items: start;
+	justify-content: start;
+	color: var(--primary-color, #007bff);
+	transition: color 0.2s ease;
+	flex-shrink: 0;
+}
+
+.nav-button.active .nav-button-icon {
+	color: #fff;
+}
+
+.nav-button-label {
+	font-size: normal;
+	font-weight: bold;
+	word-break: break-word;
+	text-align: left;
+	line-height: 1.2;
+}
+
+.navigation-grid.compact .nav-button-label {
+	font-size: 0.85em;
+}
+
+.nav-button.active .nav-button-label {
+	color: #fff;
+}
+
+.nav-button-description {
+	font-size: small;
+	font-weight: normal;
+	color: var(--text-muted, #666);
+	word-break: break-word;
+	text-align: left;
+	line-height: 1.5;
+	opacity: 0.8;
+}
+
+.navigation-grid.compact .nav-button-description {
+	font-size: 0.7em;
+}
+
+.nav-button.active .nav-button-description {
+	color: rgba(255, 255, 255, 0.9);
+}
+
+.no-links {
+	padding: 2rem;
+	text-align: center;
+	color: var(--text-muted, #666);
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+	.nav-button {
+		background: transparent;
+	}
+
+	.nav-button:hover {
+		background: var(--hover-background-color, rgba(96, 165, 250, 0.1));
+		border-color: var(--primary-color, #60a5fa);
+	}
+
+	.nav-button.active {
+		background: var(--primary-color, #60a5fa);
+		border-color: var(--primary-color, #60a5fa);
+	}
+
+	.nav-button-description {
+		color: var(--text-muted, #999);
+	}
+
+	.nav-button-icon {
+		color: var(--primary-color, #60a5fa);
+	}
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+	.navigation-grid {
+		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+		gap: 0.75rem;
+	}
+
+	.nav-button {
+		padding: 1rem 0.5rem;
+	}
+
+	.nav-button-label {
+		font-size: normal;
+	}
+
+	.nav-button-description {
+		font-size: 0.7em;
+	}
+}
+
+@media (max-width: 480px) {
+	.navigation-grid {
+		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+		gap: 0.5rem;
+	}
+
+	.nav-button {
+		padding: 0.75rem 0.25rem;
+	}
+
+	.nav-button-label {
+		font-size: 0.8em;
+	}
+
+	.nav-button-description {
+		font-size: 0.65em;
+	}
+}
+</style>

package/vue/components/Sidebar.vue

@@ -36,111 +36,21 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { ref, inject, onUnmounted, watch, nextTick } from 'vue'
 import { HugeiconsIcon } from '@hugeicons/vue'
 import { Pin02Icon } from '@hugeicons/core-free-icons'
 import { PinIcon } from '@hugeicons/core-free-icons'
 
 const isOpen = ref(false)
 const isStuck = ref(false)
-const navigationLinks = ref([])
 const sidebarRef = ref(null)
 
-const route = useRoute()
-const router = useRouter()
+// Get navigation from Navigation component
+const navigation = inject('navigation', null)
 
-/**
- * Add a router link to the sidebar navigation
- * @param {string} link - Route name
- * @param {string|null} altTitle - Optional alternative title
- * @param {object} options - Additional options
- * @param {object} options.params - Route params to pass (e.g., { id: 1 })
- * @param {object} options.props - Props to pass to router-link (e.g., { replace: true, custom: true })
- * @param {object|string} options.to - Override the 'to' prop (if provided, takes precedence over params)
- */
-function addRouterLink(link, altTitle = null, options = {}) {
-	const foundRoute = router.getRoutes().find(r => r.name === link)
-
-	if (!foundRoute) {
-		console.warn(`Route "${link}" not found`)
-		return
-	}
-
-	const title = altTitle || foundRoute.meta?.title || foundRoute.name
-
-	// Determine the 'to' value: use options.to if provided, otherwise construct from params, or fall back to path
-	let toValue = foundRoute.path
-	if (options.to) {
-		toValue = options.to
-	} else if (options.params) {
-		toValue = { name: link, params: options.params }
-	}
-
-	const routeLink = {
-		name: link,
-		title: title,
-		path: foundRoute.path,
-		to: toValue,
-		icon: foundRoute.meta?.icon || PinIcon,
-		type: 'route',
-		props: options.props || {}
-	}
-
-	addNavigationLink(routeLink)
-}
-
-function addNavigationLink(link) {
-  const existingIndex = navigationLinks.value.findIndex(l => l.name === link.name)
-  if (existingIndex >= 0) {
-	navigationLinks.value[existingIndex] = { ...link }
-  } else {
-	navigationLinks.value.push({ ...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()}`,
-    type: 'separator',
-    title: 'Separator'
-  }
-  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)
-}
-
-function clearNavigationLinks() {
-  navigationLinks.value = []
-}
-
-function getNavigationLinks() {
-  return [...navigationLinks.value]
-}
+// Get navigation links and isActive function from navigation
+const navigationLinks = navigation ? navigation.navigationLinks : ref([])
+const isActive = navigation ? navigation.isActive : (() => false)
 
 function toggleStick() {
   isStuck.value = !isStuck.value
@@ -168,36 +78,6 @@ function close() {
   isStuck.value = false
 }
 
-function isActive(link) {
-  // If link has a 'to' object with a name, compare route name and params
-  if (link.to && typeof link.to === 'object' && link.to.name) {
-    // Compare route names first
-    if (route.name !== link.to.name) {
-      return false
-    }
-    
-    // If params are specified in the link, all specified params must match
-    if (link.to.params && Object.keys(link.to.params).length > 0) {
-      const linkParams = link.to.params
-      const routeParams = route.params
-      
-      // Check if all params in link.to.params match route.params
-      for (const key in linkParams) {
-        if (String(routeParams[key]) !== String(linkParams[key])) {
-          return false
-        }
-      }
-    }
-    
-    // Route name matches, and either no params specified or all params match
-    return true
-  }
-  
-  // Fall back to path comparison for string paths
-  const linkPath = typeof link.to === 'string' ? link.to : link.path
-  return route.path === linkPath
-}
-
 function handleLinkClick(callback = null) {
   if (callback) {
     callback()
@@ -255,22 +135,12 @@ onUnmounted(() => {
 
 defineExpose({
   isOpen,
-  navigationLinks,
   stick,
   unstick,
   toggleStick,
   toggle,
   open,
   close,
-  isActive,
-  addNavigationLink,
-  addRouterLink,
-  addCallback,
-  addSeparator,
-  addHtml,
-  removeNavigationLink,
-  clearNavigationLinks,
-  getNavigationLinks,
 })
 </script>
 

package/vue/components/Table.vue

@@ -33,7 +33,7 @@
 			</tr>
 		</tbody>
 	</table>
-	<div class = "padding">
+	<div v-if="showPagination" class = "padding">
 		<Pagination :total = "total" v-model:page="page" v-model:page-size="pageSize" />
 	</div>
 </template>
@@ -56,6 +56,10 @@
 			type: Array,
 			default: () => [],
 		},
+		showPagination: {
+			type: Boolean,
+			default: true,
+		},
 	});
 
 	const slots = useSlots()

package/vue/components/Tabs.vue

@@ -0,0 +1,233 @@
+<template>
+	<div class="tabs-container">
+		<div class="tabs-header" role="tablist">
+			<button
+				v-for="(tab, index) in tabs"
+				:key="tab.id || index"
+				:class="['tab-button', { active: activeTabId === (tab.id || index) }]"
+				:aria-selected="activeTabId === (tab.id || index)"
+				:aria-controls="`tab-panel-${tab.id || index}`"
+				:id="`tab-${tab.id || index}`"
+				role="tab"
+				@click="selectTab(tab.id || index)"
+			>
+				<HugeiconsIcon
+					v-if="tab.icon"
+					:icon="tab.icon"
+					width="1em"
+					height="1em"
+				/>
+				<span>{{ tab.label }}</span>
+				<slot :name="`tab-${tab.id || index}-badge`" />
+			</button>
+		</div>
+		<div class="tabs-content">
+			<div
+				v-for="(tab, index) in tabs"
+				:key="tab.id || index"
+				:id="`tab-panel-${tab.id || index}`"
+				:class="['tab-panel', { active: activeTabId === (tab.id || index) }]"
+				role="tabpanel"
+				:aria-labelledby="`tab-${tab.id || index}`"
+				v-show="activeTabId === (tab.id || index)"
+			>
+				<slot :name="`tab-${tab.id || index}`" :tab="tab" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { HugeiconsIcon } from '@hugeicons/vue';
+
+const props = defineProps({
+	tabs: {
+		type: Array,
+		required: true,
+		validator: (tabs) => {
+			return tabs.every(tab => 
+				typeof tab === 'object' && 
+				(tab.id !== undefined || true) && 
+				typeof tab.label === 'string'
+			);
+		}
+	},
+	defaultTab: {
+		type: [String, Number],
+		default: null
+	}
+});
+
+const emit = defineEmits(['tab-change']);
+
+// Initialize activeTabId with first tab by default
+function getInitialTabId() {
+	if (props.defaultTab !== null) {
+		return props.defaultTab;
+	}
+	if (props.tabs.length > 0) {
+		return props.tabs[0].id ?? 0;
+	}
+	return null;
+}
+
+const activeTabId = ref(getInitialTabId());
+
+function selectTab(tabId) {
+	if (activeTabId.value !== tabId) {
+		activeTabId.value = tabId;
+		const activeTab = props.tabs.find(tab => (tab.id ?? props.tabs.indexOf(tab)) === tabId);
+		emit('tab-change', activeTab, tabId);
+	}
+}
+
+function setActiveTab(tabId) {
+	const tab = props.tabs.find(t => (t.id ?? props.tabs.indexOf(t)) === tabId);
+	if (tab) {
+		selectTab(tabId);
+	}
+}
+
+// Initialize active tab on mount if not already set
+onMounted(() => {
+	if (activeTabId.value === null && props.tabs.length > 0) {
+		activeTabId.value = props.tabs[0].id ?? 0;
+	}
+});
+
+// Watch for tabs changes
+watch(() => props.tabs, (newTabs) => {
+	if (newTabs.length > 0 && activeTabId.value === null) {
+		activeTabId.value = newTabs[0].id ?? 0;
+	}
+}, { immediate: true });
+
+defineExpose({
+	setActiveTab,
+	activeTabId
+});
+</script>
+
+<style scoped>
+.tabs-container {
+	width: 100%;
+}
+
+.tabs-header {
+	display: flex;
+	border-bottom: 2px solid var(--border-color, #e1e5e9);
+	gap: 0.25rem;
+	overflow-x: auto;
+	scrollbar-width: thin;
+}
+
+.tabs-header::-webkit-scrollbar {
+	height: 4px;
+}
+
+.tabs-header::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.tabs-header::-webkit-scrollbar-thumb {
+	background: var(--border-color, #ccc);
+	border-radius: 2px;
+}
+
+.tab-button {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.75rem 1.25rem;
+	background: transparent;
+	border: none;
+	border-bottom: 2px solid transparent;
+	cursor: pointer;
+	font-size: 1em;
+	color: var(--text-muted, #666);
+	transition: all 0.2s ease;
+	white-space: nowrap;
+	position: relative;
+}
+
+.tab-button:hover {
+	color: var(--text-color, #000);
+	background-color: var(--hover-background-color, #f5f5f5);
+}
+
+.tab-button.active {
+	color: var(--primary-color, #007bff);
+	border-bottom-color: var(--primary-color, #007bff);
+	font-weight: 500;
+}
+
+.tab-button:focus {
+	outline: 2px solid var(--primary-color, #007bff);
+	outline-offset: -2px;
+	border-radius: 4px 4px 0 0;
+}
+
+.tabs-content {
+	width: 100%;
+	min-height: 200px;
+}
+
+.tab-panel {
+	padding: 1.5rem;
+	display: none;
+}
+
+.tab-panel.active {
+	display: block;
+	animation: fadeIn 0.2s ease-in;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+		transform: translateY(4px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+	.tabs-header {
+		border-bottom-color: var(--border-color, #444);
+	}
+
+	.tab-button {
+		color: var(--text-muted, #999);
+	}
+
+	.tab-button:hover {
+		color: var(--text-color, #fff);
+		background-color: var(--hover-background-color, #333);
+	}
+
+	.tab-button.active {
+		color: var(--primary-color, #60a5fa);
+		border-bottom-color: var(--primary-color, #60a5fa);
+	}
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+	.tabs-header {
+		gap: 0;
+	}
+
+	.tab-button {
+		padding: 0.75rem 1rem;
+		font-size: 0.9em;
+	}
+
+	.tab-panel {
+		padding: 1rem;
+	}
+}
+</style>