picocrank 1.1.1 → 1.1.2

package/package.json

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

package/vue/components/Section.vue

@@ -1,7 +1,12 @@
 <template>
 	<section class = "with-header-and-content">
-		<div class = "section-header">
-			<h2>{{ title }}</h2>
+		<div class = "section-header flex-row">
+			<div class = "fg1">
+			<h2 :title = "subtitle">{{ title }}</h2>
+			</div>
+			<div role = "toolbar">
+				<slot name="toolbar" />
+			</div>
 		</div>
 		<div :class = "padding ? 'section-content padding' : 'section-content'">
 			<slot />
@@ -20,5 +25,9 @@ const props = defineProps({
 		type: Boolean,
 		default: true,
 	},
+	subtitle: {
+		type: String,
+		default: "",
+	},
 });
 </script>

package/vue/components/Table.vue

@@ -4,9 +4,11 @@
 			<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 v-if="header.sortable" style:= "width: 1.5em; display: inline-block; text-align: center;">
+					<span v-if="sortBy === header.key">
+						<span v-if="sortDir === 'asc'">▲</span>
+						<span v-else-if="sortDir === 'desc'">▼</span>
+					</span>
 				</span>
 			</th>
 		</thead>
@@ -42,7 +44,22 @@
     const page = ref(1);
 	const pageSize = ref(10);
 
-	const items = ref([])
+	const props = defineProps({
+	    headers: {
+			type: Array,
+			default: () => ['id'],
+		},
+		data: {
+			type: Array,
+			default: () => [],
+		},
+	});
+
+	const items = computed(() => {
+	    const arr = [...props.data];
+
+		return arr;
+	})
 
     const sortedItems = computed(() => {
 		if (!sortBy.value) return [...items.value];
@@ -89,18 +106,9 @@
 		}));
 	});
 
-	const props = defineProps({
-	    headers: {
-			type: Array,
-			default: () => ['id'],
-		},
-		data: {
-			type: Array,
-			default: () => [],
-		},
-	});
-
 	function toggleSort(header) {
+		if (!header.sortable) return;
+
 		if (sortBy.value === header.key) {
 		    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc';
 		} else {
@@ -110,14 +118,10 @@
 
 		console.log(`Sorting by ${sortBy.value} in ${sortDir.value} order`);
 	}
-
-	onMounted(() => {
-	    items.value = props.data;
-	})
 </script>
 
 <style scoped>
-table thead th:hover {
+table thead th.sortable:hover {
 	cursor: pointer;
 	color: #0366d6;
 }

package/vue/examples/TableExample.vue

@@ -1,18 +1,27 @@
 <template>
-	<Section title="Table Example" :padding = "false">
+	<Section 
+		title="Table Example" 
+		subtitle="A simple table with sortable columns and pagination"
+		:padding = "false"
+		>
+		 <template #toolbar>
+			 <button>Add Item</button>
+		 </template>
+
 		<Table 
-			:data = "data" 
-			:headers = "headers" 
-			/>
+			 :data = "data" 
+			 :headers = "headers" 
+			 >
+		</Table>
 	</Section>
 </template>
 
 <script setup>
-	import { ref } from 'vue'
+	import { ref, onMounted } 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: "age", label: "Age", sortable: false, hidden: false, linkFunc: null },
 		{ key: "city", label: "City", sortable: true, hidden: false, link: null },
 	])
 
@@ -24,26 +33,30 @@
 		}
 	}
 
-	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." }
-	]
+	const data = ref([])
+
+	onMounted(() => {
+		data.value = [
+			{ 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>