76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import type { TableColumn } from "@nuxt/ui";
|
|
|
|
const UBadge = resolveComponent("UBadge");
|
|
|
|
const props = defineProps<{
|
|
data: Link[];
|
|
status: "pending" | "idle" | "success" | "error";
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
edit: [link: Link];
|
|
delete: [link: Link];
|
|
}>();
|
|
|
|
const UButton = resolveComponent("UButton");
|
|
|
|
const columns: TableColumn<Link>[] = [
|
|
{ accessorKey: "name", header: "Name" },
|
|
{ accessorKey: "path", header: "Path" },
|
|
{
|
|
accessorKey: "url",
|
|
header: "URL",
|
|
cell: ({ row }) =>
|
|
h("a", {
|
|
href: row.original.url,
|
|
target: "_blank",
|
|
class: "text-primary hover:underline truncate max-w-xs block",
|
|
},
|
|
row.original.url,
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "disabled",
|
|
header: "Status",
|
|
cell: ({ row }) =>
|
|
h(UBadge, {
|
|
label: row.original.disabled ? "Disabled" : "Active",
|
|
color: row.original.disabled ? "error" : "success",
|
|
variant: "subtle",
|
|
}),
|
|
},
|
|
{
|
|
id: "actions",
|
|
cell: ({ row }) =>
|
|
h("div", { class: "flex justify-end gap-1" }, [
|
|
h(UButton, {
|
|
icon: "i-lucide-pencil",
|
|
variant: "ghost",
|
|
size: "sm",
|
|
onClick: () => emit("edit", row.original),
|
|
}),
|
|
h(UButton, {
|
|
icon: "i-lucide-trash-2",
|
|
variant: "ghost",
|
|
size: "sm",
|
|
color: "error",
|
|
onClick: () => emit("delete", row.original),
|
|
}),
|
|
]),
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<UTable
|
|
:data="data"
|
|
:columns="columns"
|
|
:loading="status === 'pending' || status === 'idle'"
|
|
>
|
|
<template #empty>
|
|
{{ status === "pending" || status === "idle" ? "Loading..." : "No data" }}
|
|
</template>
|
|
</UTable>
|
|
</template>
|