picocrank 1.9.0 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.9.0",
+  "version": "1.10.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,7 @@ 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';
 
 const routes = [
   {
@@ -54,6 +55,15 @@ const routes = [
       title: 'Calendar Example',
       icon: CalendarIcon,
     }
+  },
+  {
+    name: 'FormExample',
+    path: '/form-example',
+    component: () => import('./vue/views/FormExample.vue'),
+    meta: {
+      title: 'Form Example',
+      icon: EditIcon,
+    }
   }
 ];
 

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/Navigation.vue

@@ -0,0 +1,165 @@
+<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 || {}
+	}
+
+	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]
+}
+
+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>
+

package/vue/components/QuickSearch.vue

@@ -303,7 +303,6 @@ defineExpose({
 .quick-search {
   position: relative;
   width: 100%;
-  max-width: 400px;
 }
 
 .search-container {
@@ -370,7 +369,7 @@ defineExpose({
 
 .search-result-item:hover,
 .search-result-item.active {
-  background-color: #f8fafc;
+  background-color: var(--hover-background-color);
 }
 
 .result-content {

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/views/App.vue

@@ -10,19 +10,21 @@
 		</template>
 	</Header>
 
-	<div id = "layout">
-		<Sidebar v-if="sidebarEnabled" ref = "sidebar" />
+	<Navigation ref="navigation">
+		<div id = "layout">
+			<Sidebar v-if="sidebarEnabled" ref = "sidebar" />
 
-		<div id = "content">
-			<main>
-				<router-view />
-			</main>
+			<div id = "content">
+				<main>
+					<router-view />
+				</main>
 
-			<footer>
-				<span><a href = "https://github.com/jamesread/picocrank">PicoCrank</a></span>
-			</footer>
+				<footer>
+					<span><a href = "https://github.com/jamesread/picocrank">PicoCrank</a></span>
+				</footer>
+			</div>
 		</div>
-	</div>
+	</Navigation>
 </template>
 
 <script setup>
@@ -31,12 +33,14 @@
 	import { Pin02Icon } from '@hugeicons/core-free-icons'
 
 	import QuickSearch from './../components/QuickSearch.vue'
+	import Navigation from './../components/Navigation.vue'
 	import '../../styles.css'
 	import logoUrl from '/logo.png';
 
 	const quickSearchRef = ref(null)
 	const router = useRouter();
 	const sidebar = ref(null);
+	const navigation = ref(null);
 	const sidebarEnabled = ref(true);
 
 	function toggleSidebar() {
@@ -54,17 +58,21 @@
 	provide('toggleSidebarEnabled', toggleSidebarEnabled);
 
 	onMounted(() => {
+		if (navigation.value) {
+			navigation.value.addRouterLink('Welcome')
+			navigation.value.addRouterLink('TableExample')
+			navigation.value.addRouterLink('CalendarExample')
+			navigation.value.addRouterLink('FormExample')
+			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;">Administration</h2>', { name: 'admin-heading' })
+			navigation.value.addRouterLink('Admin')
+		}
+
 		if (sidebar.value) {
-			sidebar.value.addRouterLink('Welcome')
-			sidebar.value.addRouterLink('TableExample')
-			sidebar.value.addRouterLink('CalendarExample')
-			sidebar.value.addSeparator('separator-1');
-			sidebar.value.addRouterLink('ViewItem', 'View Awesome Item', { params: { id: 1 } })
-			sidebar.value.addSeparator('separator-2');
-			sidebar.value.addCallback('Callback Example', helloWorld, { icon: Pin02Icon })
-			sidebar.value.addSeparator('separator-3');
-			sidebar.value.addHtml('<h2 style = "padding: 0.75em;">Administration</h2>', { name: 'admin-heading' })
-			sidebar.value.addRouterLink('Admin')
 			sidebar.value.open();
 			sidebar.value.stick();
 		}

package/vue/views/FormExample.vue

@@ -0,0 +1,268 @@
+<template>
+	<Section 
+		title="Form Example" 
+		subtitle="A simple form with various input types"
+		>
+		<template #toolbar>
+			<button @click="resetForm">Reset</button>
+		</template>
+
+		<form @submit.prevent="handleSubmit">
+			<div class="form-group">
+				<label for="name">Name</label>
+				<input 
+					id="name"
+					v-model="formData.name" 
+					type="text" 
+					placeholder="Enter your name"
+					required
+				/>
+			</div>
+
+			<div class="form-group">
+				<label for="email">Email</label>
+				<input 
+					id="email"
+					v-model="formData.email" 
+					type="email" 
+					placeholder="Enter your email"
+					required
+				/>
+			</div>
+
+			<div class="form-group">
+				<label for="country">Country</label>
+				<select id="country" v-model="formData.country" required>
+					<option value="">Select a country</option>
+					<option value="us">United States</option>
+					<option value="uk">United Kingdom</option>
+					<option value="ca">Canada</option>
+					<option value="au">Australia</option>
+					<option value="de">Germany</option>
+					<option value="fr">France</option>
+				</select>
+			</div>
+
+			<div class="form-group">
+				<label for="message">Message</label>
+				<textarea 
+					id="message"
+					v-model="formData.message" 
+					placeholder="Enter your message"
+					rows="4"
+				></textarea>
+			</div>
+
+			<div class="form-group">
+				<label>
+					<input 
+						type="checkbox" 
+						v-model="formData.newsletter"
+					/>
+					Subscribe to newsletter
+				</label>
+			</div>
+
+			<div class="form-group">
+				<label>Preferred Contact Method</label>
+				<div class="radio-group">
+					<label>
+						<input 
+							type="radio" 
+							v-model="formData.contactMethod" 
+							value="email"
+						/>
+						Email
+					</label>
+					<label>
+						<input 
+							type="radio" 
+							v-model="formData.contactMethod" 
+							value="phone"
+						/>
+						Phone
+					</label>
+					<label>
+						<input 
+							type="radio" 
+							v-model="formData.contactMethod" 
+							value="mail"
+						/>
+						Mail
+					</label>
+				</div>
+			</div>
+
+			<div class="form-actions">
+				<button type="submit">Submit</button>
+				<button type="button" @click="resetForm">Clear</button>
+			</div>
+		</form>
+
+		<div v-if="submitted" class="form-result">
+			<h3>Form Submitted!</h3>
+			<pre>{{ JSON.stringify(formData, null, 2) }}</pre>
+		</div>
+	</Section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Section from '../components/Section.vue'
+
+const formData = ref({
+	name: '',
+	email: '',
+	country: '',
+	message: '',
+	newsletter: false,
+	contactMethod: 'email'
+})
+
+const submitted = ref(false)
+
+function handleSubmit() {
+	submitted.value = true
+	console.log('Form submitted:', formData.value)
+	// In a real application, you would send this data to a server
+	alert('Form submitted! Check the console and the form result below.')
+}
+
+function resetForm() {
+	formData.value = {
+		name: '',
+		email: '',
+		country: '',
+		message: '',
+		newsletter: false,
+		contactMethod: 'email'
+	}
+	submitted.value = false
+}
+</script>
+
+<style scoped>
+.form-group {
+	margin-bottom: 1.5rem;
+}
+
+.form-group label {
+	display: block;
+	margin-bottom: 0.5rem;
+	font-weight: 500;
+}
+
+.form-group input[type="text"],
+.form-group input[type="email"],
+.form-group select,
+.form-group textarea {
+	width: 100%;
+	padding: 0.5rem;
+	border: 1px solid #ccc;
+	border-radius: 0.25rem;
+	font-size: 1rem;
+}
+
+.form-group textarea {
+	resize: vertical;
+	font-family: inherit;
+}
+
+.form-group input[type="checkbox"],
+.form-group input[type="radio"] {
+	margin-right: 0.5rem;
+}
+
+.form-group label:has(input[type="checkbox"]) {
+	display: flex;
+	align-items: center;
+	font-weight: normal;
+}
+
+.radio-group {
+	display: flex;
+	gap: 1.5rem;
+	flex-wrap: wrap;
+}
+
+.radio-group label {
+	display: flex;
+	align-items: center;
+	font-weight: normal;
+}
+
+.form-actions {
+	display: flex;
+	gap: 1rem;
+	margin-top: 2rem;
+}
+
+.form-actions button {
+	padding: 0.75rem 1.5rem;
+	border: none;
+	border-radius: 0.25rem;
+	font-size: 1rem;
+	cursor: pointer;
+}
+
+.form-actions button[type="submit"] {
+	background-color: #0366d6;
+	color: white;
+}
+
+.form-actions button[type="submit"]:hover {
+	background-color: #0256c2;
+}
+
+.form-actions button[type="button"] {
+	background-color: #6c757d;
+	color: white;
+}
+
+.form-actions button[type="button"]:hover {
+	background-color: #5a6268;
+}
+
+.form-result {
+	margin-top: 2rem;
+	padding: 1rem;
+	background-color: #f8f9fa;
+	border-radius: 0.25rem;
+	border: 1px solid #dee2e6;
+}
+
+.form-result h3 {
+	margin-top: 0;
+	margin-bottom: 1rem;
+}
+
+.form-result pre {
+	margin: 0;
+	padding: 1rem;
+	background-color: white;
+	border-radius: 0.25rem;
+	overflow-x: auto;
+}
+
+@media (prefers-color-scheme: dark) {
+	.form-group input[type="text"],
+	.form-group input[type="email"],
+	.form-group select,
+	.form-group textarea {
+		background-color: #333;
+		border-color: #555;
+		color: #fff;
+	}
+
+	.form-result {
+		background-color: #2d2d2d;
+		border-color: #444;
+	}
+
+	.form-result pre {
+		background-color: #1a1a1a;
+		color: #fff;
+	}
+}
+</style>
+