picocrank 1.10.0 → 1.11.1

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>

package/vue/views/Admin.vue

@@ -9,29 +9,29 @@
 				<h3>System Overview</h3>
 				<p>Welcome to the administrative panel. This is a placeholder for administrative functionality.</p>
 				
-				<div class="stats-grid">
-					<div class="stat-card">
+				<div class="grid-boxed">
+					<div class="stat-display">
 						<h4>Total Users</h4>
-						<div class="stat-value">1,247</div>
-						<div class="stat-change">+12% from last month</div>
+						<div class="stat fg-good">1,247</div>
+						<div class="subtle">+12% from last month</div>
 					</div>
 					
-					<div class="stat-card">
+					<div class="stat-display">
 						<h4>Active Sessions</h4>
-						<div class="stat-value">89</div>
-						<div class="stat-change">-3% from last hour</div>
+						<div class="stat fg-bad">89</div>
+						<div class="subtle">-3% from last hour</div>
 					</div>
 					
-					<div class="stat-card">
+					<div class="stat-display">
 						<h4>System Load</h4>
-						<div class="stat-value">67%</div>
-						<div class="stat-change">Normal</div>
+						<div class="stat fg-warning">67%</div>
+						<div class="subtle">Moderate</div>
 					</div>
 					
-					<div class="stat-card">
+					<div class="stat-display">
 						<h4>Storage Used</h4>
-						<div class="stat-value">2.4 GB</div>
-						<div class="stat-change">45% of total</div>
+						<div class="stat fg-good">2.4 GB</div>
+						<div class="subtle">45% of total</div>
 					</div>
 				</div>
 			</div>
@@ -64,7 +64,7 @@
 			
 			<div class="admin-section">
 				<h3>Quick Actions</h3>
-				<div class="action-buttons">
+				<div role = "toolbar">
 					<button class="action-btn">Create User</button>
 					<button class="action-btn">System Backup</button>
 					<button class="action-btn">View Logs</button>

package/vue/views/App.vue

@@ -30,7 +30,7 @@
 <script setup>
 	import { ref, onMounted, provide } from 'vue';
 	import { useRouter } from 'vue-router';
-	import { Pin02Icon } from '@hugeicons/core-free-icons'
+	import { Pin02Icon, SecurityValidationIcon, EditIcon, ViewIcon, HomeIcon } from '@hugeicons/core-free-icons'
 
 	import QuickSearch from './../components/QuickSearch.vue'
 	import Navigation from './../components/Navigation.vue'
@@ -63,11 +63,18 @@
 			navigation.value.addRouterLink('TableExample')
 			navigation.value.addRouterLink('CalendarExample')
 			navigation.value.addRouterLink('FormExample')
+			navigation.value.addRouterLink('TabsExample')
 			navigation.value.addSeparator('separator-1');
 			navigation.value.addRouterLink('ViewItem', 'View Awesome Item', { params: { id: 1 } })
 			navigation.value.addSeparator('separator-2');
 			navigation.value.addCallback('Callback Example', helloWorld, { icon: Pin02Icon })
 			navigation.value.addSeparator('separator-3');
+			navigation.value.addHtml('<h2 style = "padding: 0.75em;">Authentication</h2>', { name: 'auth-heading' })
+			navigation.value.addRouterLink('LoginExample')
+			navigation.value.addSeparator('separator-4');
+			navigation.value.addHtml('<h2 style = "padding: 0.75em;">User Control Panel</h2>', { name: 'user-panel-heading' })
+			navigation.value.addRouterLink('UserControlPanel')
+			navigation.value.addSeparator('separator-5');
 			navigation.value.addHtml('<h2 style = "padding: 0.75em;">Administration</h2>', { name: 'admin-heading' })
 			navigation.value.addRouterLink('Admin')
 		}

package/vue/views/Login.vue

@@ -0,0 +1,65 @@
+<template>
+	<Section title="Login" classes="">
+		<Login 
+			@local-login="handleLocalLogin"
+			@oauth-login="handleOAuthLogin"
+			@tab-change="onTabChange"
+		/>
+	</Section>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+import Section from '../components/Section.vue';
+import Login from '../components/Login.vue';
+
+const router = useRouter();
+
+// Handle local login
+function handleLocalLogin(credentials) {
+	console.log('Local login attempt:', {
+		username: credentials.username,
+		password: '***' // Don't log passwords in production
+	});
+
+	// TODO: Implement actual authentication logic
+	// Example: Simulate API call
+	// try {
+	//   const response = await fetch('/api/auth/local', {
+	//     method: 'POST',
+	//     headers: { 'Content-Type': 'application/json' },
+	//     body: JSON.stringify(credentials)
+	//   });
+	//   
+	//   if (response.ok) {
+	//     const data = await response.json();
+	//     // Store token, redirect, etc.
+	//     router.push('/');
+	//   } else {
+	//     // Handle error
+	//   }
+	// } catch (error) {
+	//   // Handle error
+	// }
+
+	// Placeholder success
+	alert(`Local login would authenticate: ${credentials.username}`);
+}
+
+// Handle OAuth login
+function handleOAuthLogin(provider) {
+	console.log('OAuth login attempt:', provider);
+
+	// TODO: Implement actual OAuth redirect logic
+	// Example: Redirect to OAuth provider
+	// window.location.href = provider.authUrl;
+	
+	// Placeholder
+	alert(`OAuth login would redirect to: ${provider.name}`);
+}
+
+// Handle tab change
+function onTabChange(tab, tabId) {
+	console.log('Tab changed:', tab, tabId);
+}
+</script>

package/vue/views/LoginExample.vue

@@ -0,0 +1,117 @@
+<template>
+	<Section title="Login Example" subtitle="A reusable login form component with local and OAuth2 authentication">
+		<Login 
+			:oauth-providers="oauthProviders"
+			@local-login="handleLocalLogin"
+			@oauth-login="handleOAuthLogin"
+			@tab-change="onTabChange"
+		/>
+	</Section>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import Section from '../components/Section.vue';
+import Login from '../components/Login.vue';
+
+const router = useRouter();
+
+// OAuth providers configuration
+const oauthProviders = ref([
+	{
+		id: 'google',
+		name: 'Google',
+		icon: null, // Add icon from @hugeicons/core-free-icons if available
+		class: 'good',
+		authUrl: '/api/auth/google'
+	},
+	{
+		id: 'github',
+		name: 'GitHub',
+		icon: null, // Add icon from @hugeicons/core-free-icons if available
+		class: 'neutral',
+		authUrl: '/api/auth/github'
+	},
+	{
+		id: 'microsoft',
+		name: 'Microsoft',
+		icon: null, // Add icon from @hugeicons/core-free-icons if available
+		class: 'good',
+		authUrl: '/api/auth/microsoft'
+	},
+	{
+		id: 'facebook',
+		name: 'Facebook',
+		icon: null, // Add icon from @hugeicons/core-free-icons if available
+		class: 'good',
+		authUrl: '/api/auth/facebook'
+	},
+	{
+		id: 'twitter',
+		name: 'Twitter',
+		icon: null, // Add icon from @hugeicons/core-free-icons if available
+		class: 'neutral',
+		authUrl: '/api/auth/twitter'
+	},
+	{
+		id: 'apple',
+		name: 'Apple',
+		icon: null, // Add icon from @hugeicons/core-free-icons if available
+		class: 'neutral',
+		authUrl: '/api/auth/apple'
+	}
+]);
+
+// Handle local login
+function handleLocalLogin(credentials) {
+	console.log('Local login attempt:', {
+		username: credentials.username,
+		password: '***' // Don't log passwords in production
+	});
+
+	// TODO: Implement actual authentication logic
+	// Example: Simulate API call
+	// try {
+	//   const response = await fetch('/api/auth/local', {
+	//     method: 'POST',
+	//     headers: { 'Content-Type': 'application/json' },
+	//     body: JSON.stringify(credentials)
+	//   });
+	//   
+	//   if (response.ok) {
+	//     const data = await response.json();
+	//     // Store token, redirect, etc.
+	//     router.push('/');
+	//   } else {
+	//     // Handle error - you can use the component's setLocalLoginError method
+	//   }
+	// } catch (error) {
+	//   // Handle error
+	// }
+
+	// Placeholder success
+	alert(`Local login would authenticate: ${credentials.username}`);
+}
+
+// Handle OAuth login
+function handleOAuthLogin(provider) {
+	console.log('OAuth login attempt:', provider);
+
+	// TODO: Implement actual OAuth redirect logic
+	// Example: Redirect to OAuth provider
+	// window.location.href = provider.authUrl;
+	
+	// Placeholder
+	alert(`OAuth login would redirect to: ${provider.name}`);
+}
+
+// Handle tab change
+function onTabChange(tab, tabId) {
+	console.log('Tab changed:', tab, tabId);
+}
+</script>
+
+<style scoped>
+/* Additional styles if needed */
+</style>