@riducms/admin 0.2.2 → 0.3.0

package/src/features/collections/collection-list-filter-popover.svelte

@@ -1,238 +0,0 @@
-<script lang="ts">
-	import type { AdminI18n } from "@riducms/plugin";
-	import type { SchemaField } from "@riducms/protocol";
-	import ListFilterIcon from "~icons/lucide/list-filter";
-	import XIcon from "~icons/lucide/x";
-
-	import { Button, buttonVariants } from "@admin/components/ui/button";
-	import { DateValueControl } from "@admin/components/ui/date-value-control";
-	import { Input } from "@admin/components/ui/input";
-	import { Popover, PopoverContent, PopoverTrigger } from "@admin/components/ui/popover";
-	import { Select, SelectContent, SelectItem, SelectTrigger } from "@admin/components/ui/select";
-	import {
-		filterOperatorLabel,
-		filterOperatorsFor,
-		type ListFilter,
-		type ListFilterOperator,
-	} from "@admin/features/collections/list-workspace";
-
-	let {
-		i18n,
-		fields,
-		filters,
-		canReadField,
-		onFiltersChange,
-	}: {
-		i18n: AdminI18n;
-		fields: readonly SchemaField[];
-		filters: readonly ListFilter[];
-		canReadField: (path: string) => boolean;
-		onFiltersChange: (filters: readonly ListFilter[]) => void;
-	} = $props();
-
-	let fieldName = $state("");
-	let operator = $state<ListFilterOperator>("equals");
-	let value = $state("");
-	const readableFields = $derived(fields.filter((candidate) => canReadField(candidate.path)));
-	const field = $derived(readableFields.find((candidate) => candidate.path === fieldName));
-	const selectedFieldLabel = $derived(field?.admin.label ?? i18n.t("collections:chooseField"));
-	const selectedOperatorLabel = $derived(
-		field === undefined ? i18n.t("collections:chooseOperator") : filterOperatorLabel(operator, i18n)
-	);
-	const booleanValueOptions = $derived(
-		operator === "exists"
-			? [
-					{ value: "true", label: i18n.t("collections:hasValue") },
-					{ value: "false", label: i18n.t("collections:isEmpty") },
-				]
-			: field?.type === "checkbox"
-				? [
-						{ value: "true", label: i18n.t("collections:enabled") },
-						{ value: "false", label: i18n.t("collections:disabled") },
-					]
-				: []
-	);
-
-	$effect(() => {
-		if (fieldName !== "" && !readableFields.some((candidate) => candidate.path === fieldName)) {
-			fieldName = "";
-			operator = "equals";
-			value = "";
-		}
-	});
-
-	function selectField(name: string) {
-		fieldName = name;
-		const selected = readableFields.find((candidate) => candidate.path === name);
-		operator = selected === undefined ? "equals" : (filterOperatorsFor(selected)[0] ?? "equals");
-		value = "";
-	}
-
-	function selectOperator(next: string) {
-		operator = next as ListFilterOperator;
-	}
-
-	function addFilter() {
-		if (field === undefined) return;
-		const filterValue = operator === "exists" ? value || "true" : value;
-		if (operator !== "exists" && filterValue === "" && field?.type !== "text-list") return;
-		onFiltersChange([...filters, { field: field.path, operator, value: filterValue }]);
-		value = "";
-	}
-
-	function removeFilter(index: number) {
-		onFiltersChange(filters.filter((_, candidate) => candidate !== index));
-	}
-</script>
-
-<Popover>
-	<PopoverTrigger
-		class={buttonVariants({
-			variant: "outline",
-			class: ["h-[31px] gap-1.75 px-3", filters.length > 0 && "border-primary/30 text-primary"],
-		})}
-	>
-		<ListFilterIcon class="size-3 text-foreground-faint" />
-		{i18n.t("collections:filters")}
-		{#if filters.length > 0}<span class="font-mono text-[9px]">
-				{i18n.formatNumber(filters.length)}
-			</span>{/if}
-	</PopoverTrigger>
-	<PopoverContent align="start" class="w-[360px] gap-2 p-3">
-		<p class="font-mono text-[9px] tracking-[0.14em] text-foreground-faint uppercase">
-			{i18n.t("collections:filterDocuments")}
-		</p>
-		<label class="grid gap-1 text-[11px] text-foreground-muted">
-			{i18n.t("collections:field")}
-			<Select type="single" value={fieldName} onValueChange={selectField}>
-				<SelectTrigger size="toolbar" class="w-full" aria-label={i18n.t("collections:filterField")}>
-					<span class={fieldName === "" ? "text-foreground-placeholder" : undefined}>
-						{selectedFieldLabel}
-					</span>
-				</SelectTrigger>
-				<SelectContent>
-					<SelectItem value="" label={i18n.t("collections:chooseField")} />
-					{#each readableFields as candidate (candidate.id)}
-						<SelectItem value={candidate.path} label={candidate.admin.label} />
-					{/each}
-				</SelectContent>
-			</Select>
-		</label>
-		{#if field !== undefined}
-			<div class="grid grid-cols-[1fr_1fr] gap-2">
-				<label class="grid gap-1 text-[11px] text-foreground-muted">
-					{i18n.t("collections:operator")}
-					<Select type="single" value={operator} onValueChange={selectOperator}>
-						<SelectTrigger
-							size="toolbar"
-							class="w-full"
-							aria-label={i18n.t("collections:filterOperator")}
-						>
-							{selectedOperatorLabel}
-						</SelectTrigger>
-						<SelectContent>
-							{#each filterOperatorsFor(field) as candidate}
-								<SelectItem value={candidate} label={filterOperatorLabel(candidate, i18n)} />
-							{/each}
-						</SelectContent>
-					</Select>
-				</label>
-				<label class="grid gap-1 text-[11px] text-foreground-muted">
-					{i18n.t("collections:value")}
-					{#if booleanValueOptions.length > 0}
-						<Select type="single" {value} onValueChange={(next) => (value = next)}>
-							<SelectTrigger
-								size="toolbar"
-								class="w-full"
-								aria-label={i18n.t("collections:filterValue")}
-							>
-								{booleanValueOptions.find((option) => option.value === value)?.label ??
-									booleanValueOptions[0]?.label}
-							</SelectTrigger>
-							<SelectContent>
-								{#each booleanValueOptions as option (option.value)}
-									<SelectItem value={option.value} label={option.label} />
-								{/each}
-							</SelectContent>
-						</Select>
-					{:else if field.type === "select" || field.type === "radio"}
-						<Select type="single" {value} onValueChange={(next) => (value = next)}>
-							<SelectTrigger
-								size="toolbar"
-								class="w-full"
-								aria-label={i18n.t("collections:filterValue")}
-							>
-								<span class={value === "" ? "text-foreground-placeholder" : undefined}>
-									{field.select?.options.find((option) => option.value === value)?.label ??
-										i18n.t("collections:chooseValue")}
-								</span>
-							</SelectTrigger>
-							<SelectContent>
-								<SelectItem value="" label={i18n.t("collections:chooseValue")} />
-								{#each field.select?.options ?? [] as option}
-									<SelectItem value={option.value} label={option.label} />
-								{/each}
-							</SelectContent>
-						</Select>
-					{:else if field.type === "date"}
-						<DateValueControl
-							id={`collection-filter-${field.id}`}
-							appearance={field.date?.format}
-							{value}
-							label={i18n.t("collections:filterValue")}
-							size="toolbar"
-							onValueChange={(next) => (value = next)}
-						/>
-					{:else}
-						<Input
-							aria-label={i18n.t("collections:filterValue")}
-							type={field.type === "number" || field.type === "number-list" ? "number" : "text"}
-							class="h-8"
-							bind:value
-						/>
-					{/if}
-				</label>
-			</div>
-			<Button
-				size="sm"
-				class="w-full"
-				disabled={operator !== "exists" && value === ""}
-				onclick={addFilter}
-			>
-				{i18n.t("collections:addFilter")}
-			</Button>
-		{/if}
-		{#if filters.length > 0}
-			<div class="grid gap-1 border-t border-control-border pt-2">
-				{#each filters as filter, index (`${filter.field}:${filter.operator}:${index}`)}
-					<div class="flex items-center gap-2 rounded-[3px] bg-control px-2 py-1.5 text-[11px]">
-						<span class="min-w-0 flex-1 truncate">
-							{i18n.t("collections:filterSummary", {
-								field:
-									fields.find((candidate) => candidate.path === filter.field)?.admin.label ??
-									filter.field,
-								operator: filterOperatorLabel(filter.operator, i18n),
-								value:
-									filter.operator === "exists"
-										? filter.value === "false"
-											? i18n.t("general:no")
-											: i18n.t("general:yes")
-										: filter.value,
-							})}
-						</span>
-						<Button
-							variant="ghost"
-							size="icon-xs"
-							aria-label={i18n.t("collections:removeFilter", {
-								index: i18n.formatNumber(index + 1),
-							})}
-							onclick={() => removeFilter(index)}
-						>
-							<XIcon class="size-3" />
-						</Button>
-					</div>
-				{/each}
-			</div>
-		{/if}
-	</PopoverContent>
-</Popover>

package/src/features/collections/collection-list-workspace-toolbar.svelte

@@ -1,409 +0,0 @@
-<script lang="ts">
-	import type { SchemaField } from "@riducms/protocol";
-	import type { Snippet } from "svelte";
-	import Columns3Icon from "~icons/lucide/columns-3";
-	import ListTreeIcon from "~icons/lucide/list-tree";
-	import SaveIcon from "~icons/lucide/save";
-	import SearchIcon from "~icons/lucide/search";
-	import SlidersHorizontalIcon from "~icons/lucide/sliders-horizontal";
-	import XIcon from "~icons/lucide/x";
-
-	import { Button, buttonVariants } from "@admin/components/ui/button";
-	import { Checkbox } from "@admin/components/ui/checkbox";
-	import { Input } from "@admin/components/ui/input";
-	import { Popover, PopoverContent, PopoverTrigger } from "@admin/components/ui/popover";
-	import { Select, SelectContent, SelectItem, SelectTrigger } from "@admin/components/ui/select";
-	import type { AdminDocument } from "@admin/core/api/admin-client";
-	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
-	import CollectionListFilterPopover from "@admin/features/collections/collection-list-filter-popover.svelte";
-	import type { CollectionListPreset } from "@admin/features/collections/collection-list-preferences-controller.svelte";
-	import {
-		listPageSizes,
-		type ListFilter,
-		type ListPageSize,
-	} from "@admin/features/collections/list-workspace";
-
-	const runtime = getAdminRuntime();
-
-	let {
-		slug,
-		query,
-		searchLabel,
-		searchInput = $bindable<HTMLInputElement | null>(null),
-		filterFields,
-		filters,
-		canReadField,
-		folders,
-		requestedFolder,
-		manageFoldersLink,
-		showFolder = false,
-		showHierarchy = false,
-		hierarchy = false,
-		sessionActive = false,
-		presets,
-		presetsPending = false,
-		statusColumnAvailable,
-		availableColumnFields,
-		visibleColumns,
-		showStatus,
-		showID,
-		showCreated,
-		showUpdated,
-		pageSize,
-		onSearch,
-		onClearSearch,
-		onFiltersChange,
-		onSelectFolder,
-		onSelectView,
-		onSavePreset,
-		onApplyPreset,
-		onDeletePreset,
-		onToggleColumn,
-		onToggleStatus,
-		onToggleID,
-		onToggleCreated,
-		onToggleUpdated,
-		onSelectPageSize,
-	}: {
-		slug: string;
-		query: string;
-		searchLabel: string;
-		searchInput?: HTMLInputElement | null;
-		filterFields: readonly SchemaField[];
-		filters: readonly ListFilter[];
-		canReadField: (path: string) => boolean;
-		folders: readonly AdminDocument[];
-		requestedFolder: string;
-		manageFoldersLink?: Snippet;
-		showFolder?: boolean;
-		showHierarchy?: boolean;
-		hierarchy?: boolean;
-		sessionActive?: boolean;
-		presets: readonly CollectionListPreset[];
-		presetsPending?: boolean;
-		statusColumnAvailable: boolean;
-		availableColumnFields: readonly SchemaField[];
-		visibleColumns: readonly SchemaField[];
-		showStatus: boolean;
-		showID: boolean;
-		showCreated: boolean;
-		showUpdated: boolean;
-		pageSize: ListPageSize;
-		onSearch: (value: string) => void;
-		onClearSearch: () => void;
-		onFiltersChange: (filters: readonly ListFilter[]) => void;
-		onSelectFolder: (folder: string) => void;
-		onSelectView: (view: "list" | "hierarchy") => void;
-		onSavePreset: (name: string) => Promise<boolean>;
-		onApplyPreset: (preset: CollectionListPreset) => void;
-		onDeletePreset: (name: string) => void;
-		onToggleColumn: (path: string, show: boolean) => void;
-		onToggleStatus: (show: boolean) => void;
-		onToggleID: (show: boolean) => void;
-		onToggleCreated: (show: boolean) => void;
-		onToggleUpdated: (show: boolean) => void;
-		onSelectPageSize: (size: ListPageSize) => void;
-	} = $props();
-
-	let presetName = $state("");
-	const sortedPresets = $derived(
-		[...presets].sort((left, right) =>
-			left.name.localeCompare(right.name, runtime.i18n.language, {
-				numeric: true,
-				sensitivity: "base",
-			})
-		)
-	);
-	const sortedFolders = $derived(
-		[...folders].sort((left, right) =>
-			folderLabel(left).localeCompare(folderLabel(right), runtime.i18n.language, {
-				numeric: true,
-				sensitivity: "base",
-			})
-		)
-	);
-	const selectedFolderLabel = $derived(
-		requestedFolder === ""
-			? runtime.i18n.t("collections:allFolders")
-			: String(
-					folders.find((folder) => folder.id === requestedFolder)?.name ??
-						folders.find((folder) => folder.id === requestedFolder)?.title ??
-						requestedFolder
-				)
-	);
-
-	function folderLabel(folder: AdminDocument) {
-		return String(folder.name ?? folder.title ?? folder.id);
-	}
-
-	async function savePreset() {
-		if (await onSavePreset(presetName)) presetName = "";
-	}
-</script>
-
-<div
-	class="mt-5 flex flex-wrap items-center gap-2 rounded-[3px] bg-control p-2"
-	data-slot="collection-list-workspace-toolbar"
->
-	<div class="relative min-w-52 flex-1 sm:max-w-[320px]">
-		<SearchIcon
-			class="pointer-events-none absolute top-1/2 start-3.5 size-3.5 -translate-y-1/2 text-foreground-faint"
-			aria-hidden="true"
-		/>
-		<label class="sr-only" for="collection-search">{searchLabel}</label>
-		<Input
-			id="collection-search"
-			bind:ref={searchInput}
-			type="search"
-			class="h-[31px] border-control-border bg-background px-8 text-[12.5px]"
-			value={query}
-			oninput={(event) => onSearch(event.currentTarget.value)}
-			placeholder={runtime.i18n.t("collections:searchPlaceholder", { label: searchLabel })}
-		/>
-		{#if query !== ""}
-			<Button
-				variant="ghost"
-				size="icon-xs"
-				class="absolute top-1/2 end-1.5 -translate-y-1/2"
-				onclick={onClearSearch}
-				aria-label={runtime.i18n.t("collections:clearSearch")}
-			>
-				<XIcon class="size-3" />
-			</Button>
-		{/if}
-	</div>
-
-	<div class="ms-auto flex flex-wrap items-center justify-end gap-2">
-		{#if filterFields.length > 0}
-			{#key slug}
-				<CollectionListFilterPopover
-					i18n={runtime.i18n}
-					fields={filterFields}
-					{filters}
-					{canReadField}
-					{onFiltersChange}
-				/>
-			{/key}
-		{/if}
-
-		<Popover>
-			<PopoverTrigger
-				class={buttonVariants({ variant: "outline", class: "h-[31px] gap-1.75 px-3" })}
-			>
-				<Columns3Icon class="size-3 text-foreground-faint" />
-				{runtime.i18n.t("collections:columns")}
-			</PopoverTrigger>
-			<PopoverContent align="end" class="w-44 gap-1 p-2">
-				<p class="px-2 pt-1 pb-1 text-[11px] font-medium text-foreground-muted">
-					{runtime.i18n.t("collections:columns")}
-				</p>
-				{#if statusColumnAvailable}
-					<label
-						class="flex h-9 cursor-pointer items-center gap-2.5 rounded-[3px] px-2 text-[13px] text-foreground-muted hover:bg-control hover:text-foreground-strong"
-					>
-						<Checkbox
-							checked={showStatus}
-							onCheckedChange={onToggleStatus}
-							aria-label={runtime.i18n.t("collections:showStatusColumn")}
-						/>
-						{runtime.i18n.t("collections:status")}
-					</label>
-				{/if}
-				{#each availableColumnFields as field (field.id)}
-					{#if canReadField(field.path)}
-						<label
-							class="flex h-9 cursor-pointer items-center gap-2.5 rounded-[3px] px-2 text-[13px] text-foreground-muted hover:bg-control hover:text-foreground-strong"
-						>
-							<Checkbox
-								checked={visibleColumns.some((candidate) => candidate.path === field.path)}
-								onCheckedChange={(checked) => onToggleColumn(field.path, checked)}
-								aria-label={runtime.i18n.t("collections:showColumn", {
-									label: field.admin.label,
-								})}
-							/>
-							<span class="truncate">{field.admin.label}</span>
-						</label>
-					{/if}
-				{/each}
-				<label
-					class="flex h-9 cursor-pointer items-center gap-2.5 rounded-[3px] px-2 text-[13px] text-foreground-muted hover:bg-control hover:text-foreground-strong"
-				>
-					<Checkbox
-						checked={showID}
-						onCheckedChange={onToggleID}
-						aria-label={runtime.i18n.t("collections:showIDColumn")}
-					/>
-					ID
-				</label>
-				<label
-					class="flex h-9 cursor-pointer items-center gap-2.5 rounded-[3px] px-2 text-[13px] text-foreground-muted hover:bg-control hover:text-foreground-strong"
-				>
-					<Checkbox
-						checked={showCreated}
-						onCheckedChange={onToggleCreated}
-						aria-label={runtime.i18n.t("collections:showCreatedColumn")}
-					/>
-					{runtime.i18n.t("collections:created")}
-				</label>
-				<label
-					class="flex h-9 cursor-pointer items-center gap-2.5 rounded-[3px] px-2 text-[13px] text-foreground-muted hover:bg-control hover:text-foreground-strong"
-				>
-					<Checkbox
-						checked={showUpdated}
-						onCheckedChange={onToggleUpdated}
-						aria-label={runtime.i18n.t("collections:showUpdatedColumn")}
-					/>
-					{runtime.i18n.t("collections:updated")}
-				</label>
-			</PopoverContent>
-		</Popover>
-
-		{#if sessionActive}
-			<Popover>
-				<PopoverTrigger
-					class={buttonVariants({ variant: "outline", class: "h-[31px] gap-1.75 px-3" })}
-				>
-					<SaveIcon class="size-3" />
-					{runtime.i18n.t("collections:savedViews")}
-				</PopoverTrigger>
-				<PopoverContent align="end" class="w-56 gap-1 p-2">
-					<form
-						class="flex gap-1"
-						onsubmit={(event) => {
-							event.preventDefault();
-							void savePreset();
-						}}
-					>
-						<Input
-							bind:value={presetName}
-							aria-label={runtime.i18n.t("collections:savedViewName")}
-							placeholder={runtime.i18n.t("collections:viewName")}
-							class="h-8 min-w-0"
-						/>
-						<Button
-							type="submit"
-							size="sm"
-							class="h-8"
-							disabled={presetName.trim() === "" || presetsPending}
-						>
-							{runtime.i18n.t("general:save")}
-						</Button>
-					</form>
-					{#each sortedPresets as preset (preset.name)}
-						<div class="flex items-center gap-1">
-							<button
-								class="min-w-0 flex-1 truncate rounded-[3px] px-2 py-1.5 text-start text-[12.5px] hover:bg-control"
-								onclick={() => onApplyPreset(preset)}
-							>
-								{preset.name}
-							</button>
-							<Button
-								variant="ghost"
-								size="icon-xs"
-								aria-label={runtime.i18n.t("collections:deleteSavedView", {
-									name: preset.name,
-								})}
-								onclick={() => onDeletePreset(preset.name)}
-							>
-								<XIcon class="size-3" />
-							</Button>
-						</div>
-					{/each}
-				</PopoverContent>
-			</Popover>
-		{/if}
-
-		<Popover>
-			<PopoverTrigger
-				class={buttonVariants({ variant: "outline", class: "h-[31px] gap-1.75 px-3" })}
-			>
-				<SlidersHorizontalIcon class="size-3" />
-				{runtime.i18n.t("general:more")}
-			</PopoverTrigger>
-			<PopoverContent align="end" class="w-64 gap-4 p-3">
-				{#if showFolder}
-					<div class="grid gap-2">
-						<label class="text-[11px] font-medium text-foreground-muted" for="folder-filter">
-							{runtime.i18n.t("collections:folder")}
-						</label>
-						<Select type="single" value={requestedFolder} onValueChange={onSelectFolder}>
-							<SelectTrigger
-								id="folder-filter"
-								size="toolbar"
-								aria-label={runtime.i18n.t("collections:folder")}
-							>
-								{selectedFolderLabel}
-							</SelectTrigger>
-							<SelectContent>
-								<SelectItem value="" label={runtime.i18n.t("collections:allFolders")} />
-								{#each sortedFolders as folder (folder.id)}
-									<SelectItem value={folder.id} label={folderLabel(folder)} />
-								{/each}
-							</SelectContent>
-						</Select>
-						{#if manageFoldersLink !== undefined}{@render manageFoldersLink()}{/if}
-					</div>
-				{/if}
-				{#if showHierarchy}
-					<div class="grid gap-2">
-						<p class="text-[11px] font-medium text-foreground-muted">
-							{runtime.i18n.t("collections:view")}
-						</p>
-						<div
-							class="flex rounded-[3px] border border-control-border bg-background p-0.5"
-							aria-label={runtime.i18n.t("collections:collectionView")}
-						>
-							<Button
-								variant="ghost"
-								size="sm"
-								class="h-7 flex-1"
-								aria-pressed={!hierarchy}
-								onclick={() => onSelectView("list")}
-							>
-								{runtime.i18n.t("collections:listView")}
-							</Button>
-							<Button
-								variant="ghost"
-								size="sm"
-								class="h-7 flex-1"
-								aria-pressed={hierarchy}
-								onclick={() => onSelectView("hierarchy")}
-							>
-								<ListTreeIcon class="size-3" />
-								{runtime.i18n.t("collections:hierarchy")}
-							</Button>
-						</div>
-					</div>
-				{/if}
-				<div class="grid gap-2">
-					<label class="text-[11px] font-medium text-foreground-muted" for="page-size">
-						{runtime.i18n.t("collections:pageSize")}
-					</label>
-					<Select
-						type="single"
-						value={String(pageSize)}
-						onValueChange={(next) => onSelectPageSize(Number(next) as ListPageSize)}
-					>
-						<SelectTrigger
-							id="page-size"
-							size="toolbar"
-							aria-label={runtime.i18n.t("collections:documentsPerPage")}
-						>
-							{runtime.i18n.t("collections:perPage", {
-								count: runtime.i18n.formatNumber(pageSize),
-							})}
-						</SelectTrigger>
-						<SelectContent>
-							{#each listPageSizes as size}<SelectItem
-									value={String(size)}
-									label={runtime.i18n.t("collections:perPage", {
-										count: runtime.i18n.formatNumber(size),
-									})}
-								/>{/each}
-						</SelectContent>
-					</Select>
-				</div>
-			</PopoverContent>
-		</Popover>
-	</div>
-</div>

package/src/features/collections/collection-table-skeleton.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-	import { Skeleton } from "@admin/components/ui/skeleton";
-	import { Table, TableBody, TableCell, TableRow } from "@admin/components/ui/table";
-	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
-
-	const runtime = getAdminRuntime();
-
-	let {
-		showStatus,
-		showID,
-		showCreated,
-		showUpdated,
-	}: {
-		showStatus: boolean;
-		showID: boolean;
-		showCreated: boolean;
-		showUpdated: boolean;
-	} = $props();
-	const widths = ["w-[46%]", "w-[61%]", "w-[38%]", "w-[54%]", "w-[43%]"];
-</script>
-
-<Table
-	class="min-w-[640px] border-collapse text-start"
-	aria-label={runtime.i18n.t("collections:loadingDocuments")}
->
-	<TableBody>
-		{#each widths as width (width)}
-			<TableRow>
-				<TableCell class="w-7 px-2.5"><Skeleton class="size-4" /></TableCell>
-				<TableCell>
-					<Skeleton class="h-3.5 {width}" />
-				</TableCell>
-				{#if showStatus}
-					<TableCell class="w-36"><Skeleton class="h-3 w-20" /></TableCell>
-				{/if}
-				{#if showID}<TableCell><Skeleton class="h-2.5 w-20" /></TableCell>{/if}
-				{#if showCreated}<TableCell><Skeleton class="h-2.5 w-16" /></TableCell>{/if}
-				{#if showUpdated}
-					<TableCell class="w-28"><Skeleton class="ms-auto h-2.5 w-16" /></TableCell>
-				{/if}
-			</TableRow>
-		{/each}
-	</TableBody>
-</Table>