picocrank 1.8.8 → 1.9.0

package/.github/workflows/pages.yml

@@ -24,8 +24,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "lts/*"
-          cache: 'npm'
+          node-version: "22"
           
       - name: Install dependencies
         run: npm ci
@@ -50,4 +49,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v4

package/README.md

@@ -2,7 +2,7 @@
   <img alt = "project logo" src = "logo.png" width = "128" />
   <h1>PicoCrank</h1>
 
-  A set of zero dependency Vue components built on the [FemtoCrank](https://github.com/jamesread/femtocrank) global CSS theme.
+  A lightweight set of Vue components built on the [FemtoCrank](https://github.com/jamesread/femtocrank) global CSS theme.
 
   [![Maturity Badge](https://img.shields.io/badge/maturity-Production-brightgreen)](#none)
   [![Discord](https://img.shields.io/discord/846737624960860180?label=Discord%20Server)](https://discord.gg/jhYWWpNJ3v)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.8.8",
+  "version": "1.9.0",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {
@@ -18,12 +18,12 @@
     "url": "https://github.com/jamesread/picocrank/issues"
   },
   "dependencies": {
-    "@hugeicons/core-free-icons": "^1.2.1",
+    "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/vue": "^1.0.3",
-    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue": "^6.0.2",
     "femtocrank": "^2.4.11",
     "unplugin-vue-components": "^30.0.0",
-    "vite": "^7.2.2",
+    "vite": "^7.2.4",
     "vue": "^3.5.24",
     "vue-router": "^4.6.3"
   },

package/vite.config.js

@@ -3,7 +3,7 @@ import vue from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
 
 export default defineConfig({
-  base: '/picocrank/',
+  base: '/',
   build: {
     outDir: 'dist',
     rollupOptions: {

package/vue/components/Calendar.vue

@@ -203,6 +203,22 @@ function formatEventTimeDefault(event: CalendarEvent, date: Date): string {
   return 'All day'
 }
 
+// Get ordinal suffix for a number (1st, 2nd, 3rd, 4th, etc.)
+function getOrdinalSuffix(day: number): string {
+  const j = day % 10
+  const k = day % 100
+  if (j === 1 && k !== 11) {
+    return 'st'
+  }
+  if (j === 2 && k !== 12) {
+    return 'nd'
+  }
+  if (j === 3 && k !== 13) {
+    return 'rd'
+  }
+  return 'th'
+}
+
 // Calendar generation from persistent grid start
 const calendarDays = computed(() => {
   const days = [] as { date: Date; events: CalendarEvent[] }[]
@@ -355,7 +371,7 @@ watch([currentMonth, currentYear], () => {
         >
           <div v-if="day" class="day-content" @click="handleDateClick(day.date)">
             <div class="day-number clickable">
-              {{ day.date.getDate() }}
+              {{ day.date.getDate() }}<span class="day-month">{{ getOrdinalSuffix(day.date.getDate()) }} {{ monthNames[day.date.getMonth()].substring(0, 3) }}</span>
             </div>
             <div class="day-events">
               <div
@@ -494,6 +510,10 @@ watch([currentMonth, currentYear], () => {
   background-color: #f0f8ff;
 }
 
+.calendar-day:hover .day-number .day-month {
+  display: inline;
+}
+
 .calendar-day:nth-child(7n) {
   border-right: none;
 }
@@ -560,6 +580,11 @@ watch([currentMonth, currentYear], () => {
   transition: background-color 0.2s;
 }
 
+.day-number.clickable .day-month {
+  display: none;
+  font-size: small;
+}
+
 .day-content:hover .day-number.clickable {
   color: #007bff;
 }

package/vue/components/Sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-	<aside :class="{ 'shown': isOpen, 'stuck': isStuck }" class="sidebar">
+	<aside ref="sidebarRef" :class="{ 'shown': isOpen, 'stuck': isStuck }" class="sidebar">
 		<div class = "flex-row">
 			<h2>Navigation</h2>
 			<div class = "fg1" />
@@ -36,7 +36,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { HugeiconsIcon } from '@hugeicons/vue'
 import { Pin02Icon } from '@hugeicons/core-free-icons'
@@ -45,6 +45,7 @@ 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()
@@ -206,6 +207,52 @@ function handleLinkClick(callback = null) {
   }
 }
 
+function handleClickOutside(event) {
+  // Only close if sidebar is open and unpinned
+  if (!isOpen.value || isStuck.value) {
+    return
+  }
+
+  const target = event.target
+  
+  // Check if click is on the sidebar toggle button or its container
+  // These elements should not trigger the close action
+  const sidebarButton = document.getElementById('sidebar-button')
+  const sidebarTogglerButton = document.getElementById('sidebar-toggler-button')
+  
+  // Don't close if clicking on toggle button or its parent container
+  if (sidebarButton && sidebarButton.contains(target)) {
+    return
+  }
+  
+  if (sidebarTogglerButton && sidebarTogglerButton.contains(target)) {
+    return
+  }
+
+  // Check if click is outside the sidebar element
+  if (sidebarRef.value && !sidebarRef.value.contains(target)) {
+    close()
+  }
+}
+
+// Watch for sidebar open/close state to manage event listener
+watch([isOpen, isStuck], ([open, stuck]) => {
+  nextTick(() => {
+    if (open && !stuck) {
+      // Add event listener when sidebar is open and unpinned
+      document.addEventListener('click', handleClickOutside)
+    } else {
+      // Remove event listener when sidebar is closed or pinned
+      document.removeEventListener('click', handleClickOutside)
+    }
+  })
+}, { immediate: true })
+
+// Clean up event listener on unmount
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+
 defineExpose({
   isOpen,
   navigationLinks,