picocrank 1.1.3 → 1.2.0

package/package.json

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

package/vue/components/Table.vue

@@ -1,8 +1,8 @@
 <template>
 	<table class = "row-hover">
 		<thead>
-			<th v-for="(header, index) in visibleHeaders" :key="index" @click="toggleSort(header)" :class="{ sortable: header.sortable }">
-				{{ header.label }}
+			<th v-for="(header, index) in visibleHeaders" :key="index" @click="toggleSort(header)" :class="{ sortable: header.sortable }" :style="{ width: header.width || 'auto' }">
+				{{ header.label || header.key }}
 
 				<span v-if="header.sortable" style:= "width: 1.5em; display: inline-block; text-align: center;">
 					<span v-if="sortBy === header.key">
@@ -16,15 +16,18 @@
 			<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">
+			<tr v-else v-for="(row, 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>
+					<component 
+					    v-if="slotFor(header.key)" 
+						:is="slotFor(header.key)" 
+						:class="{ hidden: header.hidden }"
+						:row="row" 
+						:value="row[header.key]"
+						:key="index" 
+					    />
 					<span v-else>
-						{{ item[header.key] }}
+						{{ row[header.key] }}
 					</span>
 				</td>
 			</tr>
@@ -36,7 +39,7 @@
 </template>
 
 <script setup>
-	import { ref, computed, onMounted, watch } from 'vue';
+	import { ref, computed, onMounted, watch, useSlots } from 'vue';
 	import Pagination from './Pagination.vue';
 
     const sortBy = ref(null);
@@ -55,6 +58,14 @@
 		},
 	});
 
+	const slots = useSlots()
+
+	function slotFor(key) {
+	    let s = slots[`cell-${key}`];
+
+	    return s || slots.cell || null;
+	}
+
 	const items = computed(() => {
 	    const arr = [...props.data];
 
@@ -100,10 +111,7 @@
 	const totalPages = computed(() => Math.ceil(total.value / pageSize.value));
 
     const visibleHeaders = computed(() => {
-		return props.headers.map(header => ({
-			...header,
-			hidden: header.hidden === true,
-		}));
+		return props.headers.filter(h => !h.hidden);
 	});
 
 	function toggleSort(header) {

package/vue/examples/TableExample.vue

@@ -12,6 +12,17 @@
 			 :data = "data" 
 			 :headers = "headers" 
 			 >
+			 <template #cell-name="{ row, value }">
+				 <router-link :to="{ name: 'ViewItem', params: { id: row.name } }">
+					 {{ value }}
+				 </router-link>
+			 </template>
+
+			 <template #cell-city="{ row, value }">
+				 <span class = "subtle">
+				 {{ value }}
+				 </span>
+			 </template>
 		</Table>
 	</Section>
 </template>
@@ -20,24 +31,16 @@
 	import { ref, onMounted } from 'vue'
 
 	const headers = ref([
-		{ key: "name", label: "Name", sortable: true, hidden: true, linkFunc: getLink },
-		{ key: "age", label: "Age", sortable: false, hidden: false, linkFunc: null },
-		{ key: "city", label: "City", sortable: true, hidden: false, link: null },
+		{ key: "name", label: "Name", sortable: true, hidden: false, width: "20%" },
+		{ key: "age", label: "Age", sortable: false },
+		{ key: "city", label: "City", sortable: true, width: "200px" },
 	])
 
-
-	function getLink(row) {
-		return {	
-			name: "ViewItem",
-			params: { id: row.name.toLowerCase() }
-		}
-	}
-
 	const data = ref([])
 
 	onMounted(() => {
 		data.value = [
-			{ name: "Alice", age: 30, city: "New York" },
+			{ name: "Alice", age: 30, city: "New York", foo: "bar" },
 			{ name: "Bob", age: 25, city: "Los Angeles" },
 			{ name: "Charlie", age: 35, city: "Chicago" },
 			{ name: "David", age: 28, city: "Houston" },