picocrank 1.0.0 → 1.1.1

package/README.md

@@ -2,11 +2,11 @@
   <img alt = "project logo" src = "logo.png" width = "128" />
   <h1>PicoCrank</h1>
 
-  CSS theme for high accessibility and zero dependencies
+  A set of zero dependency 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)
 
 </div>
 
-A set of zero dependency Vue components built on the FemtoCrank global CSS theme.
+* npm: https://www.npmjs.com/package/picocrank

package/index.html

@@ -1,6 +1,8 @@
 <html>
 	<head>
 		<title>PicoCrank</title>
+
+		<link rel = "shortcut icon" href = "logo.png" type = "image/png" />
 	</head>
 
 	<body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {
@@ -19,9 +19,9 @@
     "@hugeicons/core-free-icons": "^1.0.16",
     "@hugeicons/vue": "^1.0.3",
     "@vitejs/plugin-vue": "^6.0.1",
-    "femtocrank": "^2.2.0",
+    "femtocrank": "^2.3.0",
     "unplugin-vue-components": "^29.0.0",
-    "vite": "^6.3.5",
+    "vite": "^7.1.3",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
   },

package/router.js

@@ -5,8 +5,19 @@ import Welcome from './vue/views/Welcome.vue';
 const routes = [
   {
     path: '/',
-    name: 'Home',
+    name: 'Welcome',
     component: Welcome,
+  },
+  {
+    path: '/table-example',
+    name: 'TableExample',
+    component: () => import('./vue/examples/TableExample.vue'),
+  },
+  {
+    path: '/view-item/:id',
+    name: 'ViewItem',
+    component: () => import('./vue/examples/ViewItem.vue'),
+    props: true,
   }
 ];
 

package/vue/components/Header.vue

@@ -1,8 +1,29 @@
 <template>
 	<header>
-		<div class = "image-and-title flex-row">
+		<div class = "image-and-title flex-row" id = "sidebar-button">
 			<img src = "/logo.png" alt = "Logo" class = "logo" />
 			<h1>PicoCrank</h1>
 		</div>
+
+		<Breadcrumbs v-if="breadcrumbs" />
+		
+		<div class = "fg1"></div>
+
+		<div class = "user-info">
+			<span v-if="username">{{ username }}</span>
+		</div>
 	</header>
 </template>
+
+<script setup>
+	const props = defineProps({
+		breadcrumbs: {
+			type: Boolean,
+			default: false,
+		},
+		username: {
+			type: String,
+			default: "",
+		},
+	});
+</script>

package/vue/components/Section.vue

@@ -0,0 +1,24 @@
+<template>
+	<section class = "with-header-and-content">
+		<div class = "section-header">
+			<h2>{{ title }}</h2>
+		</div>
+		<div :class = "padding ? 'section-content padding' : 'section-content'">
+			<slot />
+		</div>
+	</section>
+</template>
+
+<script setup>
+
+const props = defineProps({
+	title: {
+		type: String,
+		default: "Untitled Section",
+	},
+	padding: {
+		type: Boolean,
+		default: true,
+	},
+});
+</script>

package/vue/components/Table.vue

@@ -0,0 +1,129 @@
+<template>
+	<table class = "row-hover">
+		<thead>
+			<th v-for="(header, index) in visibleHeaders" :key="index" @click="toggleSort(header)" :class="{ sortable: header.sortable }">
+				{{ header.label }}
+
+				<span v-if="header.sortable && sortBy === header.key">
+					<span v-if="sortDir === 'asc'">▲</span>
+					<span v-else>▼</span>
+				</span>
+			</th>
+		</thead>
+		<tbody>
+			<tr v-if="pagedItems.length === 0">
+				<td :colspan="visibleHeaders.length">No items found</td>
+			</tr>
+			<tr v-else v-for="(item, index) in pagedItems" :key="index">
+				<td v-for="(header, index) in visibleHeaders" :key="index" :class="{ hidden: header.hidden }">
+					<span v-if = "header.linkFunc">
+						<router-link :to="header.linkFunc(item)" class = "link">
+							{{ item[header.key] }}
+						</router-link>
+					</span>
+					<span v-else>
+						{{ item[header.key] }}
+					</span>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+	<div class = "padding">
+		<Pagination :total = "total" v-model:page="page" v-model:page-size="pageSize" />
+	</div>
+</template>
+
+<script setup>
+	import { ref, computed, onMounted, watch } from 'vue';
+	import Pagination from './Pagination.vue';
+
+    const sortBy = ref(null);
+	const sortDir = ref('asc');
+    const page = ref(1);
+	const pageSize = ref(10);
+
+	const items = ref([])
+
+    const sortedItems = computed(() => {
+		if (!sortBy.value) return [...items.value];
+
+		const col = sortBy.value;
+		
+		return [...items.value].sort((a, b) => {
+		    const av = a[col];
+			const bv = b[col];
+			console.log("sort values", col, av, bv)
+
+            if (av === bv) return 0;
+			if (av === null || av === undefined) return 1;
+			if (bv === null || bv === undefined) return -1;
+			if (typeof av === 'string' && typeof bv === 'string') {
+				return sortDir.value === 'asc' ? av.localeCompare(bv) : bv.localeCompare(av);
+			}
+			if (typeof av === 'number' && typeof bv === 'number') {
+				return sortDir.value === 'asc' ? av - bv : bv - av;
+			}
+			if (typeof av === 'boolean' && typeof bv === 'boolean') {
+				return sortDir.value === 'asc' ? (av ? 1 : 0) - (bv ? 1 : 0) : (bv ? 1 : 0) - (av ? 1 : 0);
+			}
+			if (av < bv) return sortDir.value === 'asc' ? -1 : 1;
+		});
+	});
+
+	watch([sortedItems, pageSize], () => { page.value = 1 });
+
+	const pagedItems = computed(() => {
+		const start = (page.value - 1) * pageSize.value;
+		const ret = sortedItems.value.slice(start, start + pageSize.value);
+
+		return ret
+	});
+
+    const total = computed(() => sortedItems.value.length);
+	const totalPages = computed(() => Math.ceil(total.value / pageSize.value));
+
+    const visibleHeaders = computed(() => {
+		return props.headers.map(header => ({
+			...header,
+			hidden: header.hidden === true,
+		}));
+	});
+
+	const props = defineProps({
+	    headers: {
+			type: Array,
+			default: () => ['id'],
+		},
+		data: {
+			type: Array,
+			default: () => [],
+		},
+	});
+
+	function toggleSort(header) {
+		if (sortBy.value === header.key) {
+		    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc';
+		} else {
+		    sortBy.value = header.key;
+		    sortDir.value = 'asc';
+		}
+
+		console.log(`Sorting by ${sortBy.value} in ${sortDir.value} order`);
+	}
+
+	onMounted(() => {
+	    items.value = props.data;
+	})
+</script>
+
+<style scoped>
+table thead th:hover {
+	cursor: pointer;
+	color: #0366d6;
+}
+
+td:first-child, th:first-child {
+	padding-left: 1rem;
+}
+
+</style>

package/vue/examples/TableExample.vue

@@ -0,0 +1,49 @@
+<template>
+	<Section title="Table Example" :padding = "false">
+		<Table 
+			:data = "data" 
+			:headers = "headers" 
+			/>
+	</Section>
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+
+	const headers = ref([
+		{ key: "name", label: "Name", sortable: true, hidden: true, linkFunc: getLink },
+		{ key: "age", label: "Age", sortable: true, hidden: false, linkFunc: null },
+		{ key: "city", label: "City", sortable: true, hidden: false, link: null },
+	])
+
+
+	function getLink(row) {
+		return {	
+			name: "ViewItem",
+			params: { id: row.name.toLowerCase() }
+		}
+	}
+
+	const data = [
+		{ name: "Alice", age: 30, city: "New York" },
+		{ name: "Bob", age: 25, city: "Los Angeles" },
+		{ name: "Charlie", age: 35, city: "Chicago" },
+		{ name: "David", age: 28, city: "Houston" },
+		{ name: "Eve", age: 22, city: "Phoenix" },
+		{ name: "Frank", age: 40, city: "Philadelphia" },
+		{ name: "Grace", age: 29, city: "San Antonio" },
+		{ 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." }
+	]
+</script>

package/vue/examples/ViewItem.vue

@@ -0,0 +1,5 @@
+<template>
+	<Section title="View Item" padding>
+		View Item
+	</Section>
+</template>

package/vue/views/App.vue

@@ -1,19 +1,18 @@
 <template>
-	<Header />
+	<Header username = "Guest" breadcrumbs />
+		<div id = "layout">
+			<Sidebar ref = "sidebar" />
 
-	<div id = "layout">
-		<Sidebar ref = "sidebar" />
-
-		<main>
 			<div id = "content">
-				<router-view />
+				<main>
+					<router-view />
+				</main>
 
 				<footer>
 					<span>PicoCrank</span>
 				</footer>
 			</div>
-		</main>
-	</div>
+		</div>
 </template>
 
 <script setup>
@@ -24,9 +23,16 @@
 
 	onMounted(() => {
 		sidebar.value.addNavigationLink({
+		    id: 'welcome',
 			title: "Welcome",
 			path: "/",
 		})
+		sidebar.value.addNavigationLink({
+		    id: 'table-example',
+			title: "Table Example",
+			path: "/table-example",
+		})	
+
 		sidebar.value.open();
 		sidebar.value.stick();
 	});

package/vue/views/Welcome.vue

@@ -1,16 +1,16 @@
 <template>
-	<section class = "with-header-and-content">
-		<div class = "section-header">
-			Welcome
-		</div>
-		<div class = "section-content">
-			<p>
-				Welcome to Femtocrank, a web-based tool for analyzing and visualizing the performance of your code.
-				To get started, you can either upload a file or paste your code directly into the editor.
-			</p>
-			<p>
-				For more information on how to use Femtocrank, please refer to the <a href = "/docs">documentation</a>.
-			</p>
-		</div>
-	</section>
+	<Section title = "Welcome">
+		<p>
+			Welcome to Femtocrank, a web-based tool for analyzing and visualizing the performance of your code.
+			To get started, you can either upload a file or paste your code directly into the editor.
+		</p>
+		<p>
+			For more information on how to use Femtocrank, please refer to the <a href = "/docs">documentation</a>.
+		</p>
+	</Section>
+
 </template>
+
+<script setup>
+	import Section from '../components/Section.vue';
+</script>