picocrank 1.11.1 → 1.12.0

package/.github/workflows/pages.yml

@@ -38,7 +38,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: './dist'
+          path: './dist/**'
 
   deploy:
     environment:

package/package.json

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

package/vue/components/Login.vue

@@ -57,12 +57,17 @@
 					</div>
 				</div>
 			</template>
+
+			<!-- Forward custom tab slots -->
+			<template v-for="slotName in customTabSlotNames" :key="slotName" v-slot:[slotName]="slotProps">
+				<slot :name="slotName" v-bind="slotProps" />
+			</template>
 		</Tabs>
 	</div>
 </template>
 
 <script setup>
-import { ref, reactive, watch } from 'vue';
+import { ref, reactive, watch, computed, useSlots } from 'vue';
 import Tabs from './Tabs.vue';
 import { HugeiconsIcon } from '@hugeicons/vue';
 
@@ -79,16 +84,63 @@ const props = defineProps({
 			local: 'Username & Password',
 			oauth: 'OAuth2'
 		})
+	},
+	// Custom tabs to inject (optional)
+	customTabs: {
+		type: Array,
+		default: () => []
+	},
+	// Whether to show default tabs (local and oauth)
+	showDefaultTabs: {
+		type: Boolean,
+		default: true
 	}
 });
 
 const emit = defineEmits(['local-login', 'oauth-login', 'tab-change']);
 
+const slots = useSlots();
+
+// Get custom tab slot names (exclude default tabs: tab-local and tab-oauth)
+const customTabSlotNames = computed(() => {
+	if (!slots) return [];
+	const defaultSlots = ['tab-local', 'tab-oauth'];
+	const allSlotNames = Object.keys(slots);
+	return allSlotNames.filter(
+		slotName => slotName.startsWith('tab-') && !defaultSlots.includes(slotName)
+	);
+});
+
 // Login tabs configuration
-const loginTabs = ref([
-	{ id: 'local', label: props.tabLabels.local || 'Username & Password' },
-	{ id: 'oauth', label: props.tabLabels.oauth || 'OAuth2' }
-]);
+const loginTabs = ref([]);
+
+// Initialize tabs
+function initializeTabs() {
+	const tabs = [];
+	
+	// Add default tabs if enabled
+	if (props.showDefaultTabs) {
+		tabs.push(
+			{ id: 'local', label: props.tabLabels.local || 'Username & Password' },
+			{ id: 'oauth', label: props.tabLabels.oauth || 'OAuth2' }
+		);
+	}
+	
+	// Add custom tabs
+	if (props.customTabs && props.customTabs.length > 0) {
+		tabs.push(...props.customTabs);
+	}
+	
+	loginTabs.value = tabs;
+}
+
+// Initialize tabs on mount
+initializeTabs();
+
+// Watch for changes to customTabs or showDefaultTabs
+watch(() => [props.customTabs, props.showDefaultTabs], () => {
+	initializeTabs();
+}, { deep: true });
 
 // Local login state
 const localLogin = reactive({
@@ -102,6 +154,7 @@ const localLoginError = ref('');
 const oauthProviders = ref(props.oauthProviders);
 const oauthError = ref('');
 
+
 // Watch for changes to oauthProviders prop
 watch(() => props.oauthProviders, (newProviders) => {
 	oauthProviders.value = newProviders;

package/vue/components/NavigationGrid.vue

@@ -189,33 +189,23 @@ function handleLinkClick(link) {
 }
 
 .nav-button-label {
-	font-size: normal;
 	font-weight: bold;
+	font-size: 1.125rem;
 	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 {
@@ -253,42 +243,14 @@ function handleLinkClick(link) {
 	}
 }
 
-/* Responsive */
 @media (max-width: 768px) {
 	.navigation-grid {
-		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(220px, 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/views/LoginExample.vue

@@ -2,10 +2,53 @@
 	<Section title="Login Example" subtitle="A reusable login form component with local and OAuth2 authentication">
 		<Login 
 			:oauth-providers="oauthProviders"
+			:custom-tabs="customTabs"
 			@local-login="handleLocalLogin"
 			@oauth-login="handleOAuthLogin"
 			@tab-change="onTabChange"
-		/>
+		>
+			<!-- Custom tab: Magic Link Login -->
+			<template #tab-magic-link="{ tab }">
+				<div class="login-section">
+					<form @submit.prevent="handleMagicLinkLogin" class="magic-link-form">
+						<input
+							v-model="magicLinkEmail"
+							type="email"
+							required
+							autocomplete="email"
+							placeholder="Email address"
+						/>
+						<button type="submit" class="good">Send Magic Link</button>
+						<div v-if="magicLinkError" class="error-message">
+							{{ magicLinkError }}
+						</div>
+						<div v-if="magicLinkSuccess" class="success-message">
+							{{ magicLinkSuccess }}
+						</div>
+					</form>
+				</div>
+			</template>
+
+			<!-- Custom tab: SSO Login -->
+			<template #tab-sso="{ tab }">
+				<div class="login-section">
+					<div class="sso-providers">
+						<button
+							v-for="ssoProvider in ssoProviders"
+							:key="ssoProvider.id"
+							class="sso-button good"
+							@click="handleSSOLogin(ssoProvider)"
+							:title="`Sign in with ${ssoProvider.name}`"
+						>
+							<span>{{ ssoProvider.name }}</span>
+						</button>
+					</div>
+					<div v-if="ssoError" class="error-message">
+						{{ ssoError }}
+					</div>
+				</div>
+			</template>
+		</Login>
 	</Section>
 </template>
 
@@ -17,6 +60,25 @@ import Login from '../components/Login.vue';
 
 const router = useRouter();
 
+// Custom tabs configuration
+const customTabs = ref([
+	{ id: 'magic-link', label: 'Magic Link' },
+	{ id: 'sso', label: 'SSO' }
+]);
+
+// Magic Link state
+const magicLinkEmail = ref('');
+const magicLinkError = ref('');
+const magicLinkSuccess = ref('');
+
+// SSO providers
+const ssoProviders = ref([
+	{ id: 'okta', name: 'Okta SSO' },
+	{ id: 'auth0', name: 'Auth0 SSO' },
+	{ id: 'saml', name: 'SAML SSO' }
+]);
+const ssoError = ref('');
+
 // OAuth providers configuration
 const oauthProviders = ref([
 	{
@@ -109,9 +171,105 @@ function handleOAuthLogin(provider) {
 // Handle tab change
 function onTabChange(tab, tabId) {
 	console.log('Tab changed:', tab, tabId);
+	// Clear custom tab errors when switching tabs
+	magicLinkError.value = '';
+	magicLinkSuccess.value = '';
+	ssoError.value = '';
+}
+
+// Handle magic link login
+function handleMagicLinkLogin() {
+	magicLinkError.value = '';
+	magicLinkSuccess.value = '';
+	
+	if (!magicLinkEmail.value) {
+		magicLinkError.value = 'Please enter your email address';
+		return;
+	}
+
+	// TODO: Implement actual magic link logic
+	// Example: Send magic link email
+	// try {
+	//   const response = await fetch('/api/auth/magic-link', {
+	//     method: 'POST',
+	//     headers: { 'Content-Type': 'application/json' },
+	//     body: JSON.stringify({ email: magicLinkEmail.value })
+	//   });
+	//   
+	//   if (response.ok) {
+	//     magicLinkSuccess.value = 'Magic link sent! Check your email.';
+	//   } else {
+	//     magicLinkError.value = 'Failed to send magic link';
+	//   }
+	// } catch (error) {
+	//   magicLinkError.value = 'An error occurred';
+	// }
+
+	// Placeholder
+	magicLinkSuccess.value = `Magic link would be sent to: ${magicLinkEmail.value}`;
+}
+
+// Handle SSO login
+function handleSSOLogin(provider) {
+	ssoError.value = '';
+	
+	// TODO: Implement actual SSO redirect logic
+	// Example: Redirect to SSO provider
+	// window.location.href = provider.authUrl;
+	
+	// Placeholder
+	alert(`SSO login would redirect to: ${provider.name}`);
 }
 </script>
 
 <style scoped>
-/* Additional styles if needed */
+.magic-link-form,
+.sso-providers {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	width: 100%;
+}
+
+.magic-link-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%;
+}
+
+.magic-link-form input:focus {
+	outline: none;
+	border-color: var(--primary-color, #007bff);
+	box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.magic-link-form button,
+.sso-button {
+	width: 100%;
+	padding: 0.75rem 1.5rem;
+	font-size: 1em;
+	cursor: pointer;
+	border: none;
+	border-radius: 4px;
+	transition: opacity 0.2s;
+}
+
+.magic-link-form button:hover,
+.sso-button:hover {
+	opacity: 0.9;
+}
+
+.success-message {
+	padding: 0.75rem;
+	background-color: var(--success-bg, #efe);
+	color: var(--success-color, #3c3);
+	border-radius: 4px;
+	font-size: 0.9em;
+	margin-top: 0.5rem;
+	width: 100%;
+}
 </style>