picocrank 1.5.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "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

@@ -628,5 +628,69 @@ function handleContextMenu(event: CalendarEvent, mouseEvent: MouseEvent) {
     padding: 0.25rem 0.5rem;
   }
 }
-</style>
 
+@media (prefers-color-scheme: dark) {
+  .calendar-container {
+    background: #565656;
+    border-color: #374151;
+    border: 1px solid #565656;
+  }
+
+  .calendar-day.today {
+    background: #646c70;
+  }
+
+  .calendar-day.weekend {
+    background: #444;
+  }
+
+  .calendar-day.weekend:hover {
+    background: #1a1a1a;
+  }
+
+  .calendar-day.next-month,
+  .calendar-day.prev-month {
+    background: #1a1a1a !important;
+  }
+  
+  .calendar-day.next-month:hover,
+  .calendar-day.prev-month:hover {
+    background: #374151;
+  }
+
+  .calendar-day.today:hover {
+    background: #374151;
+  }
+
+  .calendar-day {
+    border: 1px solid #3b3b3b;
+  }
+
+  .day-number {
+    color: #f9fafb;
+  }
+
+  .day-header {
+    color: #f9fafb;
+    background: #444 !important;
+    border: 1px solid #374151;
+    border-color: #374151;
+  }
+
+  .day-content:hover .day-number.clickable {
+    color: #f9fafb;
+  }
+
+  .calendar-day:hover {
+    background-color: #374151;
+  }
+
+  .calendar-day.today:hover {
+    background: #374151;
+  }
+
+  .calendar-day.weekend:hover {
+    background: #374151;
+  }
+}
+</style>

package/vue/components/Header.vue

@@ -7,7 +7,7 @@
 			<div class = "fg1" />
 
 			<button id = "sidebar-toggler-button" aria-label = "Open sidebar navigation" aria-pressed = "false" aria-haspopup = "menu" class = "neutral">
-				<HugeiconsIcon :icon = "Menu01Icon" width = "1em" height = "1em" />
+				<HugeiconsIcon :icon = "Menu01Icon" width = "1em" height = "1em" :strokeWidth = 3 />
 			</button>
 		</div>
 
@@ -55,6 +55,11 @@
 
 <style scoped>
 button {
-	color: #bbb;
+	border: 0;
+	color: #fff;
 }
-</style>
+
+button:hover {
+	background-color: transparent;
+}
+</style>

package/vue/components/Pagination.vue

@@ -2,15 +2,28 @@
   <div class="pagination">
     <div class="pagination-info">
       <span class="pagination-text">
-        Showing {{ startItem + 1 }}-{{ endItem }} of {{ total }} {{ itemTitle }}
+      Page size:
+      <select 
+        id="page-size" 
+        v-model="localPageSize" 
+        @change="handlePageSizeChange"
+        class="page-size-select"
+      >
+        <option value="10">10</option>
+        <option value="25">25</option>
+        <option value="50">50</option>
+        <option value="100">100</option>
+      </select>
+
+      Showing {{ startItem + 1 }}-{{ endItem }} of {{ total }} {{ itemTitle }}
       </span>
     </div>
     
     <div class="pagination-controls">
       <button 
-        class="pagination-btn"
-        :disabled="currentPage === 1"
-        @click="goToPage(currentPage - 1)"
+        class="button"
+        :disabled="currentPageValue === 1"
+        @click="goToPage(currentPageValue - 1)"
         title="Previous page"
       >
         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
@@ -19,11 +32,10 @@
       </button>
 
       
-      <div class="pagination-pages">
         <button 
           v-if="showFirstPage"
-          class="pagination-btn"
-          :class="{ active: currentPage === 1 }"
+          class="button"
+          :class="{ active: currentPageValue === 1 }"
           @click="goToPage(1)"
         >
           1
@@ -34,8 +46,8 @@
         <button 
           v-for="page in visiblePages" 
           :key="page"
-          class="pagination-btn"
-          :class="{ active: currentPage === page }"
+          class="button"
+          :class="{ active: currentPageValue === page }"
           @click="goToPage(page)"
         >
           {{ page }}
@@ -45,18 +57,17 @@
         
         <button 
           v-if="showLastPage"
-          class="pagination-btn"
-          :class="{ active: currentPage === totalPages }"
+          class="button"
+          :class="{ active: currentPageValue === totalPages }"
           @click="goToPage(totalPages)"
         >
-          {{ totalPages }}
-        </button>
-      </div>
+        {{ totalPages }}
+      </button>
       
       <button 
-        class="pagination-btn"
-        :disabled="currentPage === totalPages"
-        @click="goToPage(currentPage + 1)"
+        class="button"
+        :disabled="currentPageValue === totalPages"
+        @click="goToPage(currentPageValue + 1)"
         title="Next page"
       >
         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
@@ -64,21 +75,6 @@
         </svg>
       </button>
     </div>
-    
-    <div class="pagination-size" v-if="canChangePageSize">
-      <label for="page-size">Items per page:</label>
-      <select 
-        id="page-size" 
-        v-model="localPageSize" 
-        @change="handlePageSizeChange"
-        class="page-size-select"
-      >
-        <option value="10">10</option>
-        <option value="25">25</option>
-        <option value="50">50</option>
-        <option value="100">100</option>
-      </select>
-    </div>
   </div>
 </template>
 
@@ -86,10 +82,6 @@
 import { ref, computed, watch } from 'vue'
 
 const props = defineProps({
-  pageSize: {
-    type: Number,
-    default: 25
-  },
   total: {
     type: Number,
     required: true
@@ -100,30 +92,46 @@ const props = defineProps({
   },
   canChangePageSize: {
     type: Boolean,
-    default: false
+    default: true,
   },
   itemTitle: {
     type: String,
     default: 'items'
+  },
+  // Support for v-model binding
+  page: {
+    type: Number,
+    default: 1
+  },
+  pageSize: {
+    type: Number,
+    default: 25
   }
 })
 
-const emit = defineEmits(['page-change', 'page-size-change'])
+const emit = defineEmits(['page-change', 'page-size-change', 'update:page', 'update:pageSize'])
 
 const localPageSize = ref(props.pageSize)
 const localCurrentPage = ref(props.currentPage)
 
+// Computed property to get the current page value (supports both v-model and regular props)
+const currentPageValue = computed(() => {
+  // When using v-model, the page prop will be reactive and change
+  // When using regular props, currentPage will be reactive
+  return props.page
+})
+
 const totalPages = computed(() => Math.ceil(props.total / localPageSize.value))
 
-const startItem = computed(() => (localCurrentPage.value - 1) * localPageSize.value)
-const endItem = computed(() => Math.min(localCurrentPage.value * localPageSize.value, props.total))
+const startItem = computed(() => (currentPageValue.value - 1) * localPageSize.value)
+const endItem = computed(() => Math.min(currentPageValue.value * localPageSize.value, props.total))
 
 const maxVisiblePages = 5
 const visiblePages = computed(() => {
   const pages = []
   const halfVisible = Math.floor(maxVisiblePages / 2)
   
-  let start = Math.max(1, localCurrentPage.value - halfVisible)
+  let start = Math.max(1, currentPageValue.value - halfVisible)
   let end = Math.min(totalPages.value, start + maxVisiblePages - 1)
   
   if (end - start < maxVisiblePages - 1) {
@@ -143,22 +151,29 @@ const showFirstEllipsis = computed(() => visiblePages.value[0] > 2)
 const showLastEllipsis = computed(() => visiblePages.value[visiblePages.value.length - 1] < totalPages.value - 1)
 
 function goToPage(page) {
-  if (page >= 1 && page <= totalPages.value && page !== localCurrentPage.value) {
+  if (page >= 1 && page <= totalPages.value && page !== currentPageValue.value) {
     localCurrentPage.value = page
     emit('page-change', page)
+    emit('update:page', page)
   }
 }
 
 function handlePageSizeChange() {
   localCurrentPage.value = 1
   emit('page-size-change', localPageSize.value)
+  emit('update:pageSize', localPageSize.value)
   emit('page-change', 1)
+  emit('update:page', 1)
 }
 
 watch(() => props.currentPage, (newPage) => {
   localCurrentPage.value = newPage
 })
 
+watch(() => props.page, (newPage) => {
+  localCurrentPage.value = newPage
+})
+
 watch(() => props.pageSize, (newSize) => {
   localPageSize.value = newSize
 })
@@ -187,71 +202,39 @@ watch(() => props.pageSize, (newSize) => {
   gap: 0.5rem;
 }
 
-.pagination-pages {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.pagination-btn {
+.button {
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 2.5rem;
   height: 2.5rem;
-  padding: 0.5rem;
-  border: 1px solid #dee2e6;
-  background: #fff;
-  color: #495057;
-  text-decoration: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 0.875rem;
-}
-
-.pagination-btn:hover:not(:disabled) {
-  background: #e9ecef;
-  border-color: #adb5bd;
-  color: #495057;
-}
-
-.pagination-btn.active {
-  background: #c6d0d7;
-  color: #333;
 }
 
-.pagination-btn:disabled {
+.button:disabled {
   opacity: 0.5;
+  background: transparent;
   cursor: not-allowed;
 }
 
+.button.active {
+  background: #545f69;
+  color: #fff;
+}
+
 .pagination-ellipsis {
   padding: 0.5rem;
   color: #6c757d;
   font-size: 0.875rem;
 }
 
-.pagination-size {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  color: #6c757d;
-}
-
-.page-size-select {
-  padding: 0.25rem 0.5rem;
-  border: 1px solid #dee2e6;
-  border-radius: 4px;
-  background: #fff;
-  font-size: 0.875rem;
+#page-size {
+  background: transparent;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 }
 
-.page-size-select:focus {
-  outline: none;
-  border-color: #5681af;
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+option {
+  background: #545f69;
 }
 
 /* Responsive design */

package/vue/components/Section.vue

@@ -39,3 +39,35 @@ const props = defineProps({
 	},
 });
 </script>
+
+<style scoped>
+:slotted(button):not(.good),
+:slotted(.button):not(.good)
+{
+	background-color: white;
+}
+
+:slotted(button:hover):not(.good),
+:slotted(.button:hover):not(.good)
+{
+	background-color: #f0f0f0;
+}
+
+@media (prefers-color-scheme: dark) {
+	:slotted(button):not(.good),
+	:slotted(.button):not(.good)
+	{
+		background-color: #111;
+		border: 1px solid #222;
+		color: #fff;
+	}
+
+	:slotted(button:hover):not(.good),
+	:slotted(.button:hover):not(.good)
+	{
+		background-color: #222;
+		border: 1px solid #333;
+		color: #fff;
+	}
+}
+</style>

package/vue/components/Sidebar.vue

@@ -5,10 +5,10 @@
 			<div class = "fg1" />
 				<button class="stick-toggle" :aria-pressed="isStuck" :title="isStuck ? 'Unstick sidebar' : 'Stick sidebar'"	@click="toggleStick">
 					<span v-if="isStuck">
-						<HugeiconsIcon :icon="Pin02Icon" width = "1em" height = "1em" />
+						<HugeiconsIcon :icon="Pin02Icon" width = "1em" height = "1em" :strokeWidth = 3 />
 					</span>
 					<span v-else>
-						<HugeiconsIcon :icon="PinIcon" width = "1em" height = "1em" />
+						<HugeiconsIcon :icon="PinIcon" width = "1em" height = "1em" :strokeWidth = 3 />
 					</span>
 				</button>
 			</div>
@@ -24,6 +24,7 @@
 								<span>{{ link.title }}</span>
 							</a>
 						</div>
+						<div v-else-if="link.type === 'html'" v-html="link.html"></div>
 						<router-link v-else :to="link.path" :class="{ active: isActive(link.path) }">
 							<HugeiconsIcon :icon="link.icon" />
 							<span>{{ link.title }}</span>
@@ -94,6 +95,16 @@ function addSeparator(id) {
   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)
 }
@@ -150,6 +161,7 @@ defineExpose({
   addRouterLink,
   addCallback,
   addSeparator,
+  addHtml,
   removeNavigationLink,
   clearNavigationLinks,
   getNavigationLinks,
@@ -171,6 +183,10 @@ li {
 	padding: 0;
 }
 
+button {
+	border: 0;
+}
+
 .navigation-links a {
 	display: flex;
 	align-items: center;

package/vue/views/App.vue

@@ -51,6 +51,7 @@
 		sidebar.value.addSeparator('separator-2');
 		sidebar.value.addCallback('Hello World', 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/TableExample.vue

@@ -11,6 +11,7 @@
 		<Table 
 			 :data = "data" 
 			 :headers = "headers" 
+			 :show-pagination = "true"
 			 >
 			 <template #cell-name="{ row, value }">
 				 <router-link :to="{ name: 'ViewItem', params: { id: row.name } }">
@@ -59,7 +60,61 @@
 			{ name: "Quinn", age: 23, city: "Indianapolis" },
 			{ name: "Rita", age: 37, city: "Seattle" },
 			{ name: "Sam", age: 39, city: "Denver" },
-			{ name: "Tina", age: 21, city: "Washington D.C." }
+			{ name: "Tina", age: 21, city: "Washington D.C." },
+			{ name: "Uma", age: 28, city: "Miami" },
+			{ name: "Victor", age: 30, city: "Portland" },
+			{ name: "Wendy", age: 29, city: "Nashville" },
+			{ name: "Xavier", age: 31, city: "Oklahoma City" },
+			{ name: "Yara", age: 27, city: "Tampa" },
+			{ name: "Zane", age: 32, city: "Albuquerque" },
+			{ name: "Ava", age: 26, city: "Las Vegas" },
+			{ name: "Ben", age: 33, city: "New Orleans" },
+			{ name: "Cara", age: 25, city: "San Francisco" },
+			{ name: "Drew", age: 34, city: "Seattle" },
+			{ name: "Ethan", age: 28, city: "Denver" },
+			{ name: "Fiona", age: 30, city: "Washington D.C." },
+			{ name: "George", age: 29, city: "Miami" },
+			{ name: "Hannah", age: 32, city: "San Diego" },
+			{ name: "Ian", age: 27, city: "Dallas" },
+			{ name: "Jack", age: 31, city: "San Jose" },
+			{ name: "Kathy", age: 26, city: "Austin" },
+			{ name: "Leo", age: 33, city: "Jacksonville" },
+			{ name: "Mia", age: 24, city: "Fort Worth" },
+			{ name: "Nina", age: 38, city: "Columbus" },
+			{ name: "Oscar", age: 36, city: "Charlotte" },
+			{ name: "Paul", age: 34, city: "San Francisco" },
+			{ name: "Quinn", age: 23, city: "Indianapolis" },
+			{ name: "Rita", age: 37, city: "Seattle" },
+			{ name: "Sam", age: 39, city: "Denver" },
+			{ name: "Tina", age: 21, city: "Washington D.C." },
+			{ name: "Uma", age: 28, city: "Miami" },
+			{ name: "Victor", age: 30, city: "Portland" },
+			{ name: "Wendy", age: 29, city: "Nashville" },
+			{ name: "Xavier", age: 31, city: "Oklahoma City" },
+			{ name: "Yara", age: 27, city: "Tampa" },
+			{ name: "Zane", age: 32, city: "Albuquerque" },
+			{ name: "Ava", age: 26, city: "Las Vegas" },
+			{ name: "Ben", age: 33, city: "New Orleans" },
+			{ name: "Cara", age: 25, city: "San Francisco" },
+			{ name: "Drew", age: 34, city: "Seattle" },
+			{ name: "Ethan", age: 28, city: "Denver" },
+			{ name: "Fiona", age: 30, city: "Washington D.C." },
+			{ name: "George", age: 29, city: "Miami" },
+			{ name: "Hannah", age: 32, city: "San Diego" },
+			{ name: "Ian", age: 27, city: "Dallas" },
+			{ name: "Jack", age: 31, city: "San Jose" },
+			{ name: "Kathy", age: 26, city: "Austin" },
+			{ name: "Leo", age: 33, city: "Jacksonville" },
+			{ name: "Mia", age: 24, city: "Fort Worth" },
+			{ name: "Nina", age: 38, city: "Columbus" },
+			{ name: "Oscar", age: 36, city: "Charlotte" },
+			{ name: "Paul", age: 34, city: "San Francisco" },
+			{ name: "Quinn", age: 23, city: "Indianapolis" },
+			{ name: "Rita", age: 37, city: "Seattle" },
+			{ name: "Sam", age: 39, city: "Denver" },
+			{ name: "Tina", age: 21, city: "Washington D.C." },
+			{ name: "Uma", age: 28, city: "Miami" },
+			{ name: "Victor", age: 30, city: "Portland" },
 		]
 	})
 </script>

package/vue/views/Welcome.vue

@@ -10,6 +10,14 @@
 	</Section>
 
 	<Section title = "Lorum" id = "lorem">
+		<template #toolbar>
+			<button>
+				<HugeiconsIcon :icon = "HighlighterIcon" width = "1em" height = "1em" />
+				Highlight</button>
+			<button>Quote</button>
+			<button class = "good">Add</button>
+		</template>
+
 		<p>
 			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -52,4 +60,6 @@
 
 <script setup>
 	import Section from '../components/Section.vue';
+	import { HugeiconsIcon } from '@hugeicons/vue';
+	import { HighlighterIcon } from '@hugeicons/core-free-icons';
 </script>