Styling improvements

package.json

@@ -1,7 +1,7 @@
 {
     "name": "prez-ui",
     "private": true,
-    "version": "4.2.0",
+    "version": "4.3.0",
     "description": "The frontend for Prez, a Linked Data API",
     "main": "index.js",
     "scripts": {

packages/create-prez-app/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-prez-app",
-    "version": "4.2.0",
+    "version": "4.3.0",
     "description": "A starter template for creating your own themed Prez UI instance",
     "license": "BSD-3-Clause",
     "bin": {

packages/create-prez-app/template/package.json

@@ -1,6 +1,6 @@
 {
     "name": "prez-ui-starter",
-    "version": "4.2.0",
+    "version": "4.3.0",
     "private": true,
     "license": "BSD-3-Clause",
     "type": "module",

packages/prez-components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "prez-components",
-    "version": "4.2.0",
+    "version": "4.3.0",
     "description": "A Vue.js component library for rendering RDF data for use with Prez UI",
     "type": "module",
     "license": "BSD-3-Clause",
@@ -61,9 +61,9 @@
         "@types/node": "^24.5.1",
         "@vitejs/plugin-vue": "^6.0.1",
         "concurrently": "^9.2.1",
-        "typescript": "5.9.2",
+        "typescript": "^5.9.2",
         "vite": "^7.1.5",
         "vite-plugin-dts": "^4.5.4",
-        "vue-tsc": "3.0.7"
+        "vue-tsc": "^3.0.7"
     }
 }

packages/prez-components/src/assets/index.css

@@ -141,4 +141,3 @@ a:not(header a):not(nav.main-nav a):not(footer a):not(.btn) {
 a:not(header a):not(nav.main-nav a):not(.btn):hover {
     text-decoration: underline;
 }
-

packages/prez-components/src/components/CopyButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
-import { Copy } from "lucide-vue-next";
+import { Copy, Check } from "lucide-vue-next";
 import { cn } from "@/lib/utils";
 import type { CopyButtonProps } from "@/types";
 import Button from "./ui/button/Button.vue";
@@ -22,8 +22,16 @@ function onClick() {
 </script>
 
 <template>
-    <Button title="Copy to clipboard" @click="onClick" :class="cn('copy-btn', props.class)" aria-label="Copy" :variant="props.variant" :size="props.size">
-        <Copy class="w-4 h-4" />
+    <Button
+	    title="Copy to clipboard"
+	    @click="onClick"
+	    :class="cn('copy-btn', props.class)"
+	    aria-label="Copy"
+	    :variant="props.variant"
+	    :size="props.size"
+    >
+	    <Check v-if="clicked" class="w-4 h-4" />
+        <Copy v-else class="w-4 h-4" />
         <template v-if="!props.iconOnly">{{ clicked ? 'Copied!' : 'Copy' }}</template>
     </Button>
 </template>

packages/prez-components/src/components/Expandable.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref, computed, useTemplateRef } from "vue";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { ExpandableProps } from "@/types";
+
+const props = defineProps<ExpandableProps>();
+
+const wrapper = useTemplateRef("wrapper");
+
+const expanded = ref(false);
+const heightExceeded = computed(() => {
+	if (wrapper.value && wrapper.value.clientHeight && wrapper.value.scrollHeight) {
+		return wrapper.value.clientHeight < wrapper.value.scrollHeight;
+	} else return false;
+});
+</script>
+
+<template>
+	<div :class="cn('', props.class)">
+		<div ref="wrapper" :class="`${expanded ? 'line-clamp-none' : 'line-clamp-5'}`">
+			<slot />
+		</div>
+		<Button v-if="heightExceeded" variant="link" class="float-right text-muted-foreground hover:text-foreground" @click="expanded = !expanded">{{expanded ? 'less' : 'more'}}</Button>
+	</div>
+</template>

packages/prez-components/src/components/ItemLink.vue

@@ -2,7 +2,9 @@
 import { RouterLink } from "vue-router"; 
 import { ExternalLink, MoveRight } from "lucide-vue-next";
 import { ItemLinkProps } from "@/types";
+import { cn } from "@/lib/utils";
 import CopyButton from "./CopyButton.vue";
+import PrezTooltip from "@/components/PrezTooltip.vue";
 
 const props = withDefaults(defineProps<ItemLinkProps>(), {
     target: '_blank',
@@ -49,13 +51,6 @@ const secondaryUrl = props.secondaryTo !== undefined
     ? (typeof(props.secondaryTo) == 'string' ? props.secondaryTo : props.secondaryTo?.value || '')
     : props.to && typeof(props.to) == 'object' ? props.to.value : '';
 
-
-/** determine the secondary link url */
-// const secondaryUrl = usePrimaryLinkOnly ? primaryLink : secondaryLink;
-
-/** determine the primary url */
-// const url = (useSecondaryLinkOnly ? secondaryUrl : primaryLink || secondaryLink) || '';
-
 /** determine the url is an external link */
 const isExtLink = url ? url.startsWith('http') || url.startsWith('mailto') : false;
 
@@ -74,56 +69,57 @@ const isSecondaryExtLink = secondaryUrl ? secondaryUrl.startsWith('http') || sec
 //         }
 //     }
 // };
-
-// const defaultClasses = 'border-b-[2px] hover:no-underline hover:border-primary ' + 
-//     (hideUnderline ? 'border-transparent' : 'border-gray-300 border-dashed hover:border-solid');
-
-const defaultClasses = "item-link";
-
-const linkClass = props.class ? defaultClasses + ' ' + props.class : defaultClasses;
-
 </script>
 
 <template>
     <!-- ItemLink -->
-    <slot name="wrapper" :url="url" :title="props.title" :secondaryUrl="secondaryUrl" :target="target">
-        <span class="inline-flex gap-1 items-center">
-            <template v-if="url && !props.hidePrimaryLink">
-                <a v-if="isExtLink"
-                    :class="linkClass"
-                    :href="url" :title="hideTitle ? undefined : props.title" 
-                    :target="props.target" :rel="props.rel"
-                >
-                    <slot />
-                </a>
-                <RouterLink v-else
-                    :class="linkClass"
-                    :to="url" :title="hideTitle ? undefined : props.title" 
-                >
-                    <slot />
-                </RouterLink>
-            </template>
-            <span v-else>
-                <slot />
-            </span>
-            <template v-if="secondaryUrl && !hideSecondaryLink">
-                <a v-if="isSecondaryExtLink"
-                    :href="secondaryUrl" :title="hideTitle ? undefined : props.title"
-                    :target="props.target" :rel="props.rel"
-                    :class="linkClass"
-                >
-                    <ExternalLink class="w-4 h-4" />
-                </a>
-                <RouterLink v-else 
-                    :to="secondaryUrl" :title="hideTitle ? undefined : props.title"
-                    :class="linkClass"
-                >
-                    <!-- unlikely scenario, but we if our secondary link points internal show an arrow not window out -->
-                    <MoveRight class="w-4 h-4" />
-                </RouterLink>
-            </template>
-
-            <component :is="props._components.copyButton" v-if="props.copyLink" icon-only :value="typeof(copyLink) == 'string' ? copyLink : url || secondaryUrl" size="icon" variant="outline" />
-        </span>
-    </slot>
+	<component :is="!hideTitle && props.title ? PrezTooltip : 'slot'" :tooltip="!hideTitle && props.title ? props.title : undefined">
+		<slot name="wrapper" :url="url" :secondaryUrl="secondaryUrl" :target="target">
+	        <span :class="`inline-flex gap-1 items-center ${!hideTitle && props.title ? 'underline decoration-dashed decoration-muted-foreground' : ''}`">
+	            <template v-if="url && !props.hidePrimaryLink">
+	                <a v-if="isExtLink"
+	                   :class="cn('item-link', props.class)"
+	                   :href="url"
+	                   :target="props.target" :rel="props.rel"
+	                >
+	                    <slot />
+	                </a>
+	                <RouterLink v-else
+	                            :class="cn('item-link', props.class)"
+	                            :to="url"
+	                >
+	                    <slot />
+	                </RouterLink>
+	            </template>
+	            <span v-else :class="cn('item-link', props.class)">
+	                <slot />
+	            </span>
+	            <template v-if="secondaryUrl && !hideSecondaryLink">
+	                <a v-if="isSecondaryExtLink"
+	                   :href="secondaryUrl"
+	                   :target="props.target" :rel="props.rel"
+	                   :class="cn('item-link', props.class)"
+	                >
+	                    <ExternalLink class="w-4 h-4" />
+	                </a>
+	                <RouterLink v-else
+	                            :to="secondaryUrl"
+	                            :class="cn('item-link', props.class)"
+	                >
+	                    <!-- unlikely scenario, but we if our secondary link points internal show an arrow not window out -->
+	                    <MoveRight class="w-4 h-4" />
+	                </RouterLink>
+	            </template>
+
+	            <component
+		            :is="props._components.copyButton"
+		            v-if="props.copyLink"
+		            icon-only
+		            :value="typeof(copyLink) == 'string' ? copyLink : url || secondaryUrl"
+		            size="icon"
+		            variant="outline"
+	            />
+	        </span>
+		</slot>
+	</component>
 </template>

packages/prez-components/src/components/ItemList.vue

@@ -1,11 +1,16 @@
 <script lang="ts" setup>
+import { computed } from "vue";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { ItemListProps } from "@/types";
 import Predicate from "./Predicate.vue";
 import Node from "./Node.vue";
 import Objects from "./Objects.vue";
+import {PrezFocusNode, PrezNode, sortNodesByLabel} from "prez-lib";
+import {Button} from "@/components/ui/button";
+import { ArrowUpDown, ArrowDownAZ, ArrowUpAZ, List } from "lucide-vue-next";
 
 const props = withDefaults(defineProps<ItemListProps>(), {
+	showMembersButton: true,
     _components: () => {
         return {
             predicate: Predicate,
@@ -14,29 +19,92 @@ const props = withDefaults(defineProps<ItemListProps>(), {
         }
     }
 });
-const list = props.list;
+
+const sortBy = defineModel<string>("sortBy", {default: "label"});
+const sortDirection = defineModel<"ASC"|"DESC">("sortDirection", {default: "ASC"});
+
+const sortedList = computed(() => {
+	let sorted: PrezFocusNode[];
+	if (sortBy.value === "label") {
+		sorted = props.list.toSorted(sortNodesByLabel);
+	} else {
+		sorted = props.list.toSorted((a, b) => {
+			if (a.properties && sortBy.value in a.properties && b.properties && sortBy.value in b.properties) {
+				if (a.properties[sortBy.value].objects.every(o => o.termType === "NamedNode") && b.properties[sortBy.value].objects.every(o => o.termType === "NamedNode")) {
+					(a.properties[sortBy.value].objects as PrezNode[]).sort(sortNodesByLabel);
+					(b.properties[sortBy.value].objects as PrezNode[]).sort(sortNodesByLabel);
+					return sortNodesByLabel(a.properties[sortBy.value].objects[0] as PrezNode, b.properties[sortBy.value].objects[0] as PrezNode);
+				} else {
+					a.properties[sortBy.value].objects.sort((ao, bo) => ao.value.localeCompare(bo.value));
+					b.properties[sortBy.value].objects.sort((ao, bo) => ao.value.localeCompare(bo.value));
+					return a.properties[sortBy.value].objects[0].value.localeCompare(b.properties[sortBy.value].objects[0].value);
+				}
+			} else if (a.properties && sortBy.value in a.properties) {
+				return -1;
+			} else if (b.properties && sortBy.value in b.properties) {
+				return 1;
+			} else {
+				return a.value.localeCompare(b.value);
+			}
+		});
+	}
+	if (sortDirection.value === "DESC") {
+		sorted.reverse();
+	}
+	return sorted;
+});
+
+function toggleSort(predicate: string) {
+	if (predicate === sortBy.value) {
+		sortDirection.value = sortDirection.value === "ASC" ? "DESC" : "ASC";
+	} else {
+		sortBy.value = predicate;
+		sortDirection.value = "ASC";
+	}
+}
 </script>
 
 <template>
     <!-- ItemList -->
-    <Table v-if="list" class="item-list min-w-[50rem]">
+    <Table v-if="props.list" class="item-list">
         <TableHeader>
-            <TableRow>
-                <TableHead><b>Item</b></TableHead>
+            <TableRow class="hover:bg-unset">
+                <TableHead>
+	                <div class="flex flex-row items-center gap-2">
+		                <span class="font-bold">Item</span>
+		                <Button :variant="sortBy === 'label' ? 'secondary' : 'ghost'" size="icon" @click="toggleSort('label')">
+			                <template v-if="sortBy === 'label'">
+				                <ArrowDownAZ v-if="sortDirection === 'ASC'" class="size-4" />
+				                <ArrowUpAZ v-else class="size-4" />
+			                </template>
+			                <ArrowUpDown v-else class="size-4" />
+		                </Button>
+	                </div>
+                </TableHead>
                 <template v-if="fields">
                     <TableHead v-for="col in fields">
-                        <b><component :is="props._components.predicate" :predicate="col.node" :objects="[]" /></b>
+	                    <div class="flex flex-row items-center gap-2">
+		                    <span class="font-bold"><component :is="props._components.predicate" :predicate="col.node" :objects="[]" /></span>
+		                    <Button :variant="sortBy === col.node.value ? 'secondary' : 'ghost'" size="icon" @click="toggleSort(col.node.value)">
+			                    <template v-if="sortBy === col.node.value">
+				                    <ArrowDownAZ v-if="sortDirection === 'ASC'" class="size-4" />
+				                    <ArrowUpAZ v-else class="size-4" />
+			                    </template>
+			                    <ArrowUpDown v-else class="size-4" />
+		                    </Button>
+	                    </div>
                     </TableHead>
                 </template>
+	            <TableHead v-if="props.showMembersButton && props.list.some(i => i.members !== undefined)"></TableHead>
             </TableRow>
         </TableHeader>
         <TableBody>
-            <TableRow v-for="item in list" class="hover:bg-unset odd:bg-muted/50">
+            <TableRow v-for="item in sortedList" class="hover:bg-unset odd:bg-muted/50">
                 <TableCell class="whitespace-normal">
                     <component :is="props._components.node" :term="item" variant="item-list" />
                 </TableCell>
                 <template v-if="fields">
-                    <TableCell v-for="col in fields">
+                    <TableCell v-for="col in fields" class="whitespace-normal">
                         <component :is="props._components.objects"
                             v-if="item.properties?.[col.node.value]?.objects"
                             :term="col.node"
@@ -46,6 +114,14 @@ const list = props.list;
                         />
                     </TableCell>
                 </template>
+	            <TableCell v-if="props.showMembersButton && props.list.some(i => i.members !== undefined)">
+		            <Button v-if="item.members" variant="outline" class="float-right max-md:size-9" asChild>
+			            <RouterLink :to="item.members.value">
+				            <span class="max-md:hidden">Members</span>
+				            <List class="size-4 md:hidden" />
+			            </RouterLink>
+		            </Button>
+	            </TableCell>
             </TableRow>
         </TableBody>
     </Table>