picocrank 1.10.0 → 1.11.0

package/package.json

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

package/router.js

@@ -6,6 +6,7 @@ import { ViewIcon } from '@hugeicons/core-free-icons';
 import { SecurityValidationIcon } from '@hugeicons/core-free-icons';
 import { CalendarIcon } from '@hugeicons/core-free-icons';
 import { EditIcon } from '@hugeicons/core-free-icons';
+import { Menu01Icon } from '@hugeicons/core-free-icons';
 
 const routes = [
   {
@@ -56,6 +57,15 @@ const routes = [
       icon: CalendarIcon,
     }
   },
+  {
+    name: 'Login',
+    path: '/login',
+    component: () => import('./vue/views/Login.vue'),
+    meta: {
+      title: 'Login',
+      icon: SecurityValidationIcon,
+    }
+  },
   {
     name: 'FormExample',
     path: '/form-example',
@@ -64,6 +74,33 @@ const routes = [
       title: 'Form Example',
       icon: EditIcon,
     }
+  },
+  {
+    name: 'TabsExample',
+    path: '/tabs-example',
+    component: () => import('./vue/views/TabsExample.vue'),
+    meta: {
+      title: 'Tabs Example',
+      icon: Menu01Icon,
+    }
+  },
+  {
+    name: 'UserControlPanel',
+    path: '/user-control-panel',
+    component: () => import('./vue/views/UserControlPanel.vue'),
+    meta: {
+      title: 'User Control Panel',
+      icon: SecurityValidationIcon,
+    }
+  },
+  {
+    name: 'LoginExample',
+    path: '/login-example',
+    component: () => import('./vue/views/LoginExample.vue'),
+    meta: {
+      title: 'Login Example',
+      icon: SecurityValidationIcon,
+    }
   }
 ];
 

package/vue/components/Login.vue

@@ -0,0 +1,279 @@
+<template>
+	<div class="login-container">
+		<Tabs :tabs="loginTabs" @tab-change="onTabChange">
+			<!-- Local Login Tab -->
+			<template #tab-local>
+				<div class="login-section">
+					<form @submit.prevent="handleLocalLogin" class="local-login-form">
+						<input
+							id="username"
+							v-model="localLogin.username"
+							required
+							autocomplete="username"
+							placeholder="Username"
+						/>
+						<input
+							id="password"
+							type="password"
+							v-model="localLogin.password"
+							required
+							autocomplete="current-password"
+							placeholder="Password"
+						/>
+						<button type="submit" class="good">Login</button>
+						<div v-if="localLoginError" class="error-message">
+							{{ localLoginError }}
+						</div>
+					</form>
+				</div>
+			</template>
+
+			<!-- OAuth 2 Login Tab -->
+			<template #tab-oauth>
+				<div class="login-section">
+					<div v-if="oauthProviders.length > 0" class="oauth-providers">
+						<button
+							v-for="provider in oauthProviders"
+							:key="provider.id"
+							class="oauth-button"
+							:class="provider.class || 'neutral'"
+							@click="handleOAuthLogin(provider)"
+							:title="`Sign in with ${provider.name}`"
+						>
+							<HugeiconsIcon
+								v-if="provider.icon"
+								:icon="provider.icon"
+								width="1.2em"
+								height="1.2em"
+							/>
+							<span>{{ provider.name }}</span>
+						</button>
+					</div>
+					<div v-else class="no-providers">
+						<p>No OAuth providers configured.</p>
+					</div>
+					<div v-if="oauthError" class="error-message">
+						{{ oauthError }}
+					</div>
+				</div>
+			</template>
+		</Tabs>
+	</div>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from 'vue';
+import Tabs from './Tabs.vue';
+import { HugeiconsIcon } from '@hugeicons/vue';
+
+const props = defineProps({
+	// Custom OAuth providers (optional)
+	oauthProviders: {
+		type: Array,
+		default: () => []
+	},
+	// Custom tab labels (optional)
+	tabLabels: {
+		type: Object,
+		default: () => ({
+			local: 'Username & Password',
+			oauth: 'OAuth2'
+		})
+	}
+});
+
+const emit = defineEmits(['local-login', 'oauth-login', 'tab-change']);
+
+// Login tabs configuration
+const loginTabs = ref([
+	{ id: 'local', label: props.tabLabels.local || 'Username & Password' },
+	{ id: 'oauth', label: props.tabLabels.oauth || 'OAuth2' }
+]);
+
+// Local login state
+const localLogin = reactive({
+	username: '',
+	password: ''
+});
+
+const localLoginError = ref('');
+
+// OAuth providers - provided by parent component
+const oauthProviders = ref(props.oauthProviders);
+const oauthError = ref('');
+
+// Watch for changes to oauthProviders prop
+watch(() => props.oauthProviders, (newProviders) => {
+	oauthProviders.value = newProviders;
+}, { deep: true });
+
+// Handle local login
+function handleLocalLogin() {
+	localLoginError.value = '';
+	
+	// Emit event for parent component to handle
+	emit('local-login', {
+		username: localLogin.username,
+		password: localLogin.password
+	});
+}
+
+// Reset local login form
+function resetLocalForm() {
+	localLogin.username = '';
+	localLogin.password = '';
+	localLoginError.value = '';
+}
+
+// Handle OAuth login
+function handleOAuthLogin(provider) {
+	oauthError.value = '';
+	
+	// Emit event for parent component to handle
+	emit('oauth-login', provider);
+}
+
+// Handle tab change
+function onTabChange(tab, tabId) {
+	// Clear errors when switching tabs
+	localLoginError.value = '';
+	oauthError.value = '';
+	emit('tab-change', tab, tabId);
+}
+
+// Method to set error messages
+function setLocalLoginError(message) {
+	localLoginError.value = message;
+}
+
+function setOAuthError(message) {
+	oauthError.value = message;
+}
+
+// Method to add custom OAuth providers programmatically
+function addOAuthProvider(provider) {
+	oauthProviders.value.push(provider);
+}
+
+// Expose methods for parent components
+defineExpose({
+	addOAuthProvider,
+	resetLocalForm,
+	setLocalLoginError,
+	setOAuthError,
+	localLogin
+});
+</script>
+
+<style scoped>
+.login-container {
+	max-width: 500px;
+	margin: 2rem auto;
+}
+
+.login-section {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	align-items: center;
+}
+
+.local-login-form {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	width: 100%;
+}
+
+.local-login-form input {
+	padding: 0.75rem;
+	border: 1px solid var(--border-color, #ccc);
+	border-radius: 4px;
+	font-size: 1em;
+	background-color: var(--input-bg, #fff);
+	color: var(--text-color, #000);
+	width: 100%;
+}
+
+.local-login-form input:focus {
+	outline: none;
+	border-color: var(--primary-color, #007bff);
+	box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.local-login-form button {
+	width: 100%;
+	padding: 0.75rem 1.5rem;
+	font-size: 1em;
+	cursor: pointer;
+	border: none;
+	border-radius: 4px;
+	transition: opacity 0.2s;
+}
+
+.local-login-form button:hover {
+	opacity: 0.9;
+}
+
+.oauth-providers {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+	width: 100%;
+}
+
+.oauth-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.75rem;
+	padding: 0.75rem 1.5rem;
+	font-size: 1em;
+	cursor: pointer;
+	border: none;
+	border-radius: 4px;
+	transition: opacity 0.2s, transform 0.1s;
+	width: 100%;
+}
+
+.oauth-button:hover {
+	opacity: 0.9;
+	transform: translateY(-1px);
+}
+
+.oauth-button:active {
+	transform: translateY(0);
+}
+
+.oauth-button span {
+	font-weight: 500;
+}
+
+.error-message {
+	padding: 0.75rem;
+	background-color: var(--error-bg, #fee);
+	color: var(--error-color, #c33);
+	border-radius: 4px;
+	font-size: 0.9em;
+	margin-top: 0.5rem;
+	width: 100%;
+}
+
+.no-providers {
+	padding: 2rem;
+	text-align: center;
+	color: var(--text-muted, #666);
+}
+
+@media (min-width: 768px) {
+	.login-container {
+		max-width: 600px;
+	}
+	
+	.oauth-providers {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 0.75rem;
+	}
+}
+</style>

package/vue/components/Navigation.vue

@@ -46,7 +46,8 @@ function addRouterLink(link, altTitle = null, options = {}) {
 		to: toValue,
 		icon: foundRoute.meta?.icon || PinIcon,
 		type: 'route',
-		props: options.props || {}
+		props: options.props || {},
+		description: options.description || foundRoute.meta?.description || null
 	}
 
 	addNavigationLink(routeLink)
@@ -67,7 +68,8 @@ function addCallback(title, callback, options = {}) {
 	type: 'callback',
 	icon: options.icon || PinIcon,
 	callback: callback || (() => {}),
-	title: title
+	title: title,
+	description: options.description || null
   }
 
   addNavigationLink(callbackLink)

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>