picocrank 1.18.3 → 1.20.0

package/package.json

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

package/vue/components/Calendar.vue

@@ -46,6 +46,8 @@ export interface CalendarProps {
   formatEventTime?: (event: CalendarEvent, date: Date) => string
   // Customization
   showNavigation?: boolean
+  /** When true, day titles show ordinal + full month name (e.g. "21st July") instead of the day number alone. */
+  shortMonthSuffix?: boolean
   currentMonth?: number
   currentYear?: number
 }
@@ -62,6 +64,7 @@ const props = withDefaults(defineProps<CalendarProps>(), {
   eventDragEnabled: true,
   eventMoveResponseTimeoutMs: 15000,
   showNavigation: true,
+  shortMonthSuffix: false,
 })
 
 const emit = defineEmits<{
@@ -646,8 +649,16 @@ watch([currentMonth, currentYear], () => {
           }"
         >
           <div class="day-content">
-            <div class="day-number clickable">
-              {{ day.date.getDate() }}<span class="day-month">{{ getOrdinalSuffix(day.date.getDate()) }} {{ monthNames[day.date.getMonth()].substring(0, 3) }}</span>
+            <div
+              class="day-number clickable"
+              :class="{ 'with-month-suffix': shortMonthSuffix }"
+            >
+              <template v-if="shortMonthSuffix">
+                {{ day.date.getDate() }}{{ getOrdinalSuffix(day.date.getDate()) }} {{ monthNames[day.date.getMonth()] }}
+              </template>
+              <template v-else>
+                {{ day.date.getDate() }}<span class="day-month">{{ getOrdinalSuffix(day.date.getDate()) }} {{ monthNames[day.date.getMonth()].substring(0, 3) }}</span>
+              </template>
             </div>
             <div class="day-events">
               <div
@@ -913,6 +924,13 @@ watch([currentMonth, currentYear], () => {
   font-size: small;
 }
 
+.day-number.with-month-suffix {
+  min-width: auto;
+  text-align: center;
+  font-size: 0.8rem;
+  white-space: nowrap;
+}
+
 .day-content:hover .day-number.clickable {
   color: #007bff;
 }

package/vue/components/Header.vue

@@ -2,7 +2,7 @@
 	<header>
 		<div
 			:id = "sidebarEnabled ? 'sidebar-button' : null"
-			:class="['image-and-title', 'flex-row', { 'disabled-branding': !showBranding }]"
+			:class="['image-and-title', 'flex-row', { 'disabled-branding': !showBranding, 'logo-home-link': !sidebarEnabled && showBranding }]"
 			@click = "onImageAndTitleClick"
 		>
 			<img v-if="showBranding" :src = "logoUrl" alt = "Logo" class = "logo" />
@@ -111,6 +111,15 @@ button:hover {
 	width: auto;
 }
 
+.logo-home-link {
+	cursor: pointer;
+}
+
+.logo-home-link:hover {
+	background-color: var(--header-hover-background-color);
+	color: var(--header-hover-text-color);
+}
+
 .user-info span {
 	padding-right: 0.5rem;
 }

package/vue/views/App.vue

@@ -1,5 +1,5 @@
 <template>
-	<Header username = "Guest" @toggleSidebar="toggleSidebar" title = "PicoCrank" :logoUrl="logoUrl" :sidebarEnabled="sidebarEnabled" :navigation="navigation" :topBarEnabled="topBarEnabled" :showBranding="brandingEnabled" :breadcrumbs="breadcrumbsEnabled">
+	<Header username = "Guest" @toggleSidebar="toggleSidebar" @logoClick="goToIndex" title = "PicoCrank" :logoUrl="logoUrl" :sidebarEnabled="sidebarEnabled" :navigation="navigation" :topBarEnabled="topBarEnabled" :showBranding="brandingEnabled" :breadcrumbs="breadcrumbsEnabled">
 		<template #toolbar>
 			<QuickSearch
 				v-if="quickSearchEnabled"
@@ -32,6 +32,7 @@
 
 <script setup>
 	import { ref, onMounted, provide } from 'vue';
+	import { useRouter } from 'vue-router';
 	import { Pin02Icon } from '@hugeicons/core-free-icons'
 
 	import QuickSearch from './../components/QuickSearch.vue'
@@ -41,6 +42,7 @@
 	import '../composables/useTheme.js'
 	import logoUrl from '/logo.png';
 
+	const router = useRouter();
 	const quickSearchRef = ref(null)
 	const sidebar = ref(null);
 	const navigation = ref(null);
@@ -56,6 +58,10 @@
 		}
 	}
 
+	function goToIndex() {
+		router.push({ name: 'Welcome' });
+	}
+
 	function toggleSidebarEnabled() {
 		sidebarEnabled.value = !sidebarEnabled.value;
 	}

package/vue/views/CalendarExample.vue

@@ -4,6 +4,10 @@
 		padding
 	>
         <template #toolbar>
+            <label class="short-month-suffix-toggle">
+                <input type="checkbox" v-model="shortMonthSuffix" />
+                Short month suffix
+            </label>
             <button @click="goToToday">Today</button>
             <button @click="previousMonth">‹</button>
             <div class="date-picker-container">
@@ -23,6 +27,7 @@
 			:loading="loading"
 			:error="error"
 			:show-navigation="false"
+			:short-month-suffix="shortMonthSuffix"
 			:current-month="currentMonthIndex"
 			:current-year="currentYear"
 			@event-click="handleEventClick"
@@ -51,6 +56,7 @@ import {
 const events = ref([])
 const loading = ref(false)
 const error = ref(null)
+const shortMonthSuffix = ref(false)
 const currentMonth = ref('?')
 const currentMonthIndex = ref(new Date().getMonth())
 const currentYear = ref(new Date().getFullYear())
@@ -401,6 +407,15 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.short-month-suffix-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  user-select: none;
+}
+
 .date-picker-container {
   display: flex;
   align-items: center;