picocrank 1.9.1 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.9.1",
+  "version": "1.11.0",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {
@@ -18,14 +18,14 @@
     "url": "https://github.com/jamesread/picocrank/issues"
   },
   "dependencies": {
-    "@hugeicons/core-free-icons": "^2.0.0",
-    "@hugeicons/vue": "^1.0.3",
-    "@vitejs/plugin-vue": "^6.0.2",
-    "femtocrank": "^2.4.11",
+    "@hugeicons/core-free-icons": "^3.1.0",
+    "@hugeicons/vue": "^1.0.4",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "femtocrank": "^2.4.12",
     "unplugin-vue-components": "^30.0.0",
-    "vite": "^7.2.4",
-    "vue": "^3.5.24",
-    "vue-router": "^4.6.3"
+    "vite": "^7.3.0",
+    "vue": "^3.5.26",
+    "vue-router": "^4.6.4"
   },
   "devDependencies": {
     "semantic-release": "^25.0.2"

package/router.js

@@ -5,6 +5,8 @@ import { TableIcon } from '@hugeicons/core-free-icons';
 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 = [
   {
@@ -54,6 +56,51 @@ const routes = [
       title: 'Calendar Example',
       icon: CalendarIcon,
     }
+  },
+  {
+    name: 'Login',
+    path: '/login',
+    component: () => import('./vue/views/Login.vue'),
+    meta: {
+      title: 'Login',
+      icon: SecurityValidationIcon,
+    }
+  },
+  {
+    name: 'FormExample',
+    path: '/form-example',
+    component: () => import('./vue/views/FormExample.vue'),
+    meta: {
+      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/Header.vue

@@ -66,4 +66,8 @@ button {
 button:hover {
 	background-color: transparent;
 }
+
+.user-info span {
+	padding-right: 0.5rem;
+}
 </style>

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

@@ -0,0 +1,167 @@
+<template>
+	<!-- Navigation component has no visual output, it only manages navigation state -->
+	<slot />
+</template>
+
+<script setup>
+import { ref, provide } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { PinIcon } from '@hugeicons/core-free-icons'
+
+const navigationLinks = ref([])
+const route = useRoute()
+const router = useRouter()
+
+/**
+ * Add a router link to the 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 || {},
+		description: options.description || foundRoute.meta?.description || null
+	}
+
+	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,
+	description: options.description || null
+  }
+
+  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]
+}
+
+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
+}
+
+// Provide navigation API for child components
+provide('navigation', {
+  navigationLinks,
+  addRouterLink,
+  addNavigationLink,
+  addCallback,
+  addSeparator,
+  addHtml,
+  removeNavigationLink,
+  clearNavigationLinks,
+  getNavigationLinks,
+  isActive
+})
+
+// Expose API for direct ref access
+defineExpose({
+  navigationLinks,
+  addRouterLink,
+  addNavigationLink,
+  addCallback,
+  addSeparator,
+  addHtml,
+  removeNavigationLink,
+  clearNavigationLinks,
+  getNavigationLinks,
+  isActive
+})
+</script>
+