@groundbrick/svelte-ui 0.1.1

package/dist/components/EditableTable.svelte

@@ -0,0 +1,647 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Button from './Button.svelte';
+	import Badge from './Badge.svelte';
+	import DurationInput from './DurationInput.svelte';
+	import { formatDuration } from '../utils/duration.js';
+
+	/** Argumentos passados ao editor de célula custom (col.editCell). */
+	export interface EditCellArgs {
+		/** Linha em edição (editingData ou newRowData) */
+		data: Record<string, any>;
+		/** Atualiza um campo da linha em edição */
+		setField: (key: string, value: any) => void;
+		/** Edição em curso (desabilitar inputs) */
+		disabled: boolean;
+		/** Erros de validação por chave */
+		errors: Record<string, string>;
+	}
+
+	export interface EditableColumn {
+		/** Chave do campo no objeto */
+		key: string;
+		/** Título da coluna */
+		title: string;
+		/** Tipo de campo */
+		type: 'text' | 'number' | 'select' | 'badge' | 'duration' | 'custom';
+		/** Largura da coluna */
+		width?: string;
+		/** Campo editável */
+		editable?: boolean;
+		/** Campo obrigatório */
+		required?: boolean;
+		/** Opções para select */
+		options?: Array<{ value: any; label: string }>;
+		/** Valor mínimo para number */
+		min?: number;
+		/** Valor máximo para number */
+		max?: number;
+		/** Step para number */
+		step?: number;
+		/** Função para formatar exibição */
+		format?: (value: any) => string;
+		/** Exibição custom usando a linha inteira (type: 'custom') */
+		render?: (row: any) => string;
+		/** Editor custom usando a linha inteira (type: 'custom') */
+		editCell?: Snippet<[EditCellArgs]>;
+		/** Validação custom; devolve mensagem de erro ou null */
+		validate?: (data: Record<string, any>) => string | null;
+		/** Função para obter variante do badge */
+		badgeVariant?: (value: any) => 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+		/** Placeholder */
+		placeholder?: string;
+	}
+
+	interface EditableTableProps<T> {
+		/** Colunas da tabela */
+		columns: EditableColumn[];
+		/** Dados da tabela */
+		data: T[];
+		/** Callback ao guardar linha */
+		onSave: (row: T, isNew: boolean) => Promise<void>;
+		/** Callback ao apagar linha */
+		onDelete: (row: T) => Promise<void>;
+		/** Factory para nova linha */
+		createNewRow: () => Partial<T>;
+		/** Mensagem quando vazio */
+		emptyMessage?: string;
+		/** Chave única para identificar linhas */
+		rowKey?: string;
+		/** Mostrar loading global */
+		loading?: boolean;
+		/** Snippet para ações extras */
+		rowActions?: Snippet<[T]>;
+		/** Callback quando linha é marcada para exclusão */
+		onMarkDelete?: (row: T) => void;
+	}
+
+	let {
+		columns,
+		data = [],
+		onSave,
+		onDelete,
+		createNewRow,
+		emptyMessage = 'Nenhum registo encontrado',
+		rowKey = 'id',
+		loading = false,
+		rowActions,
+		onMarkDelete
+	}: EditableTableProps<any> = $props();
+
+	// Estado interno
+	let editingRowId: any = $state(null);
+	let editingData: Record<string, any> = $state({});
+	let isAddingNew: boolean = $state(false);
+	let newRowData: Record<string, any> = $state({});
+	let savingRowId: any = $state(null);
+	let deletingRowId: any = $state(null);
+	let errors: Record<string, string> = $state({});
+
+	// Iniciar edição de linha
+	function startEdit(row: any) {
+		editingRowId = row[rowKey];
+		editingData = { ...row };
+		errors = {};
+	}
+
+	// Cancelar edição
+	function cancelEdit() {
+		editingRowId = null;
+		editingData = {};
+		errors = {};
+	}
+
+	// Validar dados
+	function validateRow(rowData: Record<string, any>): boolean {
+		errors = {};
+		let isValid = true;
+
+		for (const col of columns) {
+			if (col.editable !== false && col.required) {
+				const value = rowData[col.key];
+				if (value === null || value === undefined || value === '') {
+					errors[col.key] = 'Campo obrigatório';
+					isValid = false;
+				}
+			}
+
+			if ((col.type === 'number' || col.type === 'duration') && rowData[col.key] !== null && rowData[col.key] !== undefined) {
+				const numValue = Number(rowData[col.key]);
+				if (col.min !== undefined && numValue < col.min) {
+					errors[col.key] = `Valor mínimo: ${col.min}`;
+					isValid = false;
+				}
+				if (col.max !== undefined && numValue > col.max) {
+					errors[col.key] = `Valor máximo: ${col.max}`;
+					isValid = false;
+				}
+			}
+
+			if (col.validate) {
+				const message = col.validate(rowData);
+				if (message) {
+					errors[col.key] = message;
+					isValid = false;
+				}
+			}
+		}
+
+		return isValid;
+	}
+
+	// Guardar edição
+	async function saveEdit() {
+		if (!validateRow(editingData)) return;
+
+		savingRowId = editingRowId;
+		try {
+			await onSave(editingData, false);
+			cancelEdit();
+		} catch (error) {
+			console.error('Erro ao guardar:', error);
+		} finally {
+			savingRowId = null;
+		}
+	}
+
+	// Iniciar adição de nova linha
+	function startAddNew() {
+		isAddingNew = true;
+		newRowData = createNewRow();
+		errors = {};
+	}
+
+	// Cancelar adição
+	function cancelAddNew() {
+		isAddingNew = false;
+		newRowData = {};
+		errors = {};
+	}
+
+	// Guardar nova linha
+	async function saveNewRow() {
+		if (!validateRow(newRowData)) return;
+
+		savingRowId = 'new';
+		try {
+			await onSave(newRowData, true);
+			cancelAddNew();
+		} catch (error) {
+			console.error('Erro ao criar:', error);
+		} finally {
+			savingRowId = null;
+		}
+	}
+
+	// Apagar linha
+	async function deleteRow(row: any) {
+		if (onMarkDelete) {
+			onMarkDelete(row);
+			return;
+		}
+
+		deletingRowId = row[rowKey];
+		try {
+			await onDelete(row);
+		} catch (error) {
+			console.error('Erro ao apagar:', error);
+		} finally {
+			deletingRowId = null;
+		}
+	}
+
+	// Resolve select value: match the string from DOM back to the original option value type
+	function resolveSelectValue(col: EditableColumn, rawValue: string): any {
+		if (!rawValue) return null;
+		const option = col.options?.find(o => String(o.value) === rawValue);
+		return option ? option.value : rawValue;
+	}
+
+	// Atualizar valor na edição
+	function updateEditValue(key: string, value: any) {
+		editingData[key] = value;
+	}
+
+	// Atualizar valor na nova linha
+	function updateNewValue(key: string, value: any) {
+		newRowData[key] = value;
+	}
+
+	// Formatar valor para exibição
+	function formatValue(col: EditableColumn, value: any): string {
+		if (value === null || value === undefined) return '-';
+
+		if (col.format) return col.format(value);
+
+		if (col.type === 'duration') return formatDuration(Number(value));
+
+		if (col.type === 'select' && col.options) {
+			const option = col.options.find(o => o.value === value);
+			return option?.label || String(value);
+		}
+
+		return String(value);
+	}
+
+	// Obter variante do badge
+	function getBadgeVariant(col: EditableColumn, value: any): 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' {
+		if (col.badgeVariant) return col.badgeVariant(value);
+		return 'secondary';
+	}
+</script>
+
+<!-- Editor de uma célula, partilhado entre a linha de edição e a de adição -->
+{#snippet cellEditor(col: EditableColumn, rowData: Record<string, any>, setField: (key: string, value: any) => void, disabled: boolean, idScope: string)}
+	{#if col.type === 'custom' && col.editCell}
+		{@render col.editCell({ data: rowData, setField, disabled, errors })}
+	{:else if col.type === 'select'}
+		<select
+			class="form-select form-select-sm"
+			value={rowData[col.key] ?? ''}
+			onchange={(e) => setField(col.key, resolveSelectValue(col, e.currentTarget.value))}
+			{disabled}
+		>
+			<option value="">{col.placeholder || 'Selecione...'}</option>
+			{#each col.options || [] as option}
+				<option value={option.value}>{option.label}</option>
+			{/each}
+		</select>
+	{:else if col.type === 'number'}
+		<input
+			type="number"
+			class="form-control form-control-sm"
+			value={rowData[col.key] ?? ''}
+			oninput={(e) => setField(col.key, e.currentTarget.value ? Number(e.currentTarget.value) : null)}
+			min={col.min}
+			max={col.max}
+			step={col.step || 1}
+			placeholder={col.placeholder}
+			{disabled}
+		/>
+	{:else if col.type === 'duration'}
+		<DurationInput
+			id={`dur-${idScope}-${col.key}`}
+			size="sm"
+			value={rowData[col.key] ?? null}
+			onchange={(m) => setField(col.key, m)}
+			{disabled}
+		/>
+	{:else}
+		<input
+			type="text"
+			class="form-control form-control-sm"
+			value={rowData[col.key] ?? ''}
+			oninput={(e) => setField(col.key, e.currentTarget.value)}
+			placeholder={col.placeholder}
+			{disabled}
+		/>
+	{/if}
+{/snippet}
+
+<div class="editable-table-wrapper">
+	{#if loading}
+		<div class="loading-overlay">
+			<div class="spinner-border text-primary" role="status">
+				<span class="visually-hidden">A carregar...</span>
+			</div>
+		</div>
+	{/if}
+
+	<div class="table-responsive">
+		<table class="table editable-table">
+			<thead>
+				<tr>
+					{#each columns as col}
+						<th style={col.width ? `width: ${col.width}` : ''}>
+							{col.title}
+							{#if col.required}
+								<span class="text-danger">*</span>
+							{/if}
+						</th>
+					{/each}
+					<th class="actions-column">Ações</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#if data.length === 0 && !isAddingNew}
+					<tr class="empty-row">
+						<td colspan={columns.length + 1}>
+							<div class="empty-message">
+								<i class="bi bi-inbox"></i>
+								<span>{emptyMessage}</span>
+							</div>
+						</td>
+					</tr>
+				{/if}
+
+				{#each data as row (row[rowKey])}
+					{@const isEditing = editingRowId === row[rowKey]}
+					{@const isSaving = savingRowId === row[rowKey]}
+					{@const isDeleting = deletingRowId === row[rowKey]}
+
+					<tr class:editing={isEditing} class:saving={isSaving} class:deleting={isDeleting}>
+						{#each columns as col}
+							<td data-label={col.title} class:has-error={isEditing && errors[col.key]}>
+								{#if isEditing && col.editable !== false}
+									{@render cellEditor(col, editingData, updateEditValue, isSaving, String(editingRowId))}
+									{#if errors[col.key]}
+										<div class="field-error">{errors[col.key]}</div>
+									{/if}
+								{:else if col.type === 'custom'}
+									<span class="cell-value">{col.render ? col.render(row) : formatValue(col, row[col.key])}</span>
+								{:else if col.type === 'badge'}
+									<Badge variant={getBadgeVariant(col, row[col.key])} size="sm">
+										{formatValue(col, row[col.key])}
+									</Badge>
+								{:else}
+									<span class="cell-value">{formatValue(col, row[col.key])}</span>
+								{/if}
+							</td>
+						{/each}
+						<td class="actions-cell" data-label="Ações">
+							{#if isEditing}
+								<div class="action-buttons">
+									<Button
+										variant="success"
+										size="sm"
+										onclick={saveEdit}
+										loading={isSaving}
+										disabled={isSaving}
+									>
+										<i class="bi bi-check-lg"></i>
+									</Button>
+									<Button
+										variant="outline-secondary"
+										size="sm"
+										onclick={cancelEdit}
+										disabled={isSaving}
+									>
+										<i class="bi bi-x-lg"></i>
+									</Button>
+								</div>
+							{:else}
+								<div class="action-buttons">
+									<Button
+										variant="outline-primary"
+										size="sm"
+										onclick={() => startEdit(row)}
+										disabled={editingRowId !== null || isAddingNew || isDeleting}
+									>
+										<i class="bi bi-pencil"></i>
+									</Button>
+									{#if rowActions}
+										{@render rowActions(row)}
+									{/if}
+									<Button
+										variant="outline-danger"
+										size="sm"
+										onclick={() => deleteRow(row)}
+										loading={isDeleting}
+										disabled={editingRowId !== null || isAddingNew || isDeleting}
+									>
+										<i class="bi bi-trash"></i>
+									</Button>
+								</div>
+							{/if}
+						</td>
+					</tr>
+				{/each}
+
+				<!-- Linha para adicionar novo -->
+				{#if isAddingNew}
+					{@const isSaving = savingRowId === 'new'}
+					<tr class="new-row" class:saving={isSaving}>
+						{#each columns as col}
+							<td data-label={col.title} class:has-error={errors[col.key]}>
+								{#if col.editable !== false}
+									{@render cellEditor(col, newRowData, updateNewValue, isSaving, 'new')}
+									{#if errors[col.key]}
+										<div class="field-error">{errors[col.key]}</div>
+									{/if}
+								{:else}
+									<span class="cell-readonly">-</span>
+								{/if}
+							</td>
+						{/each}
+						<td class="actions-cell" data-label="Ações">
+							<div class="action-buttons">
+								<Button
+									variant="success"
+									size="sm"
+									onclick={saveNewRow}
+									loading={isSaving}
+									disabled={isSaving}
+								>
+									<i class="bi bi-check-lg"></i>
+								</Button>
+								<Button
+									variant="outline-secondary"
+									size="sm"
+									onclick={cancelAddNew}
+									disabled={isSaving}
+								>
+									<i class="bi bi-x-lg"></i>
+								</Button>
+							</div>
+						</td>
+					</tr>
+				{/if}
+			</tbody>
+		</table>
+	</div>
+
+	<!-- Botão para adicionar nova linha -->
+	{#if !isAddingNew && editingRowId === null}
+		<div class="add-row-container">
+			<Button
+				variant="outline-primary"
+				size="sm"
+				onclick={startAddNew}
+				disabled={loading}
+			>
+				<i class="bi bi-plus-lg me-1"></i>
+				Adicionar
+			</Button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.editable-table-wrapper {
+		position: relative;
+	}
+
+	.loading-overlay {
+		position: absolute;
+		inset: 0;
+		background: rgba(255, 255, 255, 0.8);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 10;
+		border-radius: var(--radius-md);
+	}
+
+	.table-responsive {
+		overflow-x: auto;
+	}
+
+	.editable-table {
+		width: 100%;
+		margin-bottom: 0;
+		font-size: var(--font-size-sm);
+	}
+
+	.editable-table thead th {
+		background-color: var(--color-gray-50);
+		border-bottom: 2px solid var(--color-gray-200);
+		padding: var(--spacing-sm) var(--spacing-md);
+		font-weight: var(--font-weight-semibold);
+		color: var(--color-gray-700);
+		white-space: nowrap;
+	}
+
+	.editable-table tbody td {
+		padding: var(--spacing-sm) var(--spacing-md);
+		vertical-align: middle;
+		border-bottom: 1px solid var(--color-gray-100);
+	}
+
+	.editable-table tbody tr:hover {
+		background-color: var(--color-gray-50);
+	}
+
+	.editable-table tbody tr.editing {
+		background-color: var(--color-primary-light, #e7f3ff);
+	}
+
+	.editable-table tbody tr.new-row {
+		background-color: var(--color-success-light, #e8f5e9);
+	}
+
+	.editable-table tbody tr.saving {
+		opacity: 0.7;
+		pointer-events: none;
+	}
+
+	.editable-table tbody tr.deleting {
+		opacity: 0.5;
+		background-color: var(--color-danger-light, #ffebee);
+	}
+
+	.actions-column {
+		width: 120px;
+		text-align: center;
+	}
+
+	.actions-cell {
+		text-align: center;
+	}
+
+	.action-buttons {
+		display: flex;
+		gap: var(--spacing-xs);
+		justify-content: center;
+	}
+
+	.cell-value {
+		color: var(--color-gray-800);
+	}
+
+	.cell-readonly {
+		color: var(--color-gray-400);
+		font-style: italic;
+	}
+
+	.empty-row td {
+		padding: var(--spacing-xl) !important;
+	}
+
+	.empty-message {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--spacing-sm);
+		color: var(--color-gray-500);
+	}
+
+	.empty-message i {
+		font-size: 2rem;
+	}
+
+	.add-row-container {
+		padding: var(--spacing-md);
+		border-top: 1px dashed var(--color-gray-200);
+		text-align: center;
+	}
+
+	.has-error {
+		position: relative;
+	}
+
+	.has-error .form-control,
+	.has-error .form-select {
+		border-color: var(--color-danger);
+	}
+
+	.field-error {
+		position: absolute;
+		bottom: -18px;
+		left: 0;
+		font-size: var(--font-size-xs);
+		color: var(--color-danger);
+		white-space: nowrap;
+	}
+
+	/* Inputs dentro da tabela */
+	.editable-table .form-control,
+	.editable-table .form-select {
+		min-width: 80px;
+	}
+
+	.editable-table .form-control:focus,
+	.editable-table .form-select:focus {
+		box-shadow: none;
+		border-color: var(--color-primary);
+	}
+
+	/* Responsivo */
+	@media (max-width: 768px) {
+		.editable-table thead {
+			display: none;
+		}
+
+		.editable-table tbody tr {
+			display: block;
+			margin-bottom: var(--spacing-md);
+			border: 1px solid var(--color-gray-200);
+			border-radius: var(--radius-md);
+		}
+
+		.editable-table tbody td {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			padding: var(--spacing-sm);
+			border-bottom: 1px solid var(--color-gray-100);
+			gap: var(--spacing-sm);
+		}
+
+		.editable-table tbody td::before {
+			content: attr(data-label);
+			font-weight: var(--font-weight-semibold);
+			color: var(--color-gray-600);
+			flex-shrink: 0;
+			min-width: 80px;
+		}
+
+		.actions-cell {
+			justify-content: flex-end !important;
+		}
+
+		.add-row-container {
+			border-top: none;
+			margin-top: var(--spacing-md);
+		}
+	}
+</style>

package/dist/components/EditableTable.svelte.d.ts

@@ -0,0 +1,74 @@
+import type { Snippet } from 'svelte';
+/** Argumentos passados ao editor de célula custom (col.editCell). */
+export interface EditCellArgs {
+    /** Linha em edição (editingData ou newRowData) */
+    data: Record<string, any>;
+    /** Atualiza um campo da linha em edição */
+    setField: (key: string, value: any) => void;
+    /** Edição em curso (desabilitar inputs) */
+    disabled: boolean;
+    /** Erros de validação por chave */
+    errors: Record<string, string>;
+}
+export interface EditableColumn {
+    /** Chave do campo no objeto */
+    key: string;
+    /** Título da coluna */
+    title: string;
+    /** Tipo de campo */
+    type: 'text' | 'number' | 'select' | 'badge' | 'duration' | 'custom';
+    /** Largura da coluna */
+    width?: string;
+    /** Campo editável */
+    editable?: boolean;
+    /** Campo obrigatório */
+    required?: boolean;
+    /** Opções para select */
+    options?: Array<{
+        value: any;
+        label: string;
+    }>;
+    /** Valor mínimo para number */
+    min?: number;
+    /** Valor máximo para number */
+    max?: number;
+    /** Step para number */
+    step?: number;
+    /** Função para formatar exibição */
+    format?: (value: any) => string;
+    /** Exibição custom usando a linha inteira (type: 'custom') */
+    render?: (row: any) => string;
+    /** Editor custom usando a linha inteira (type: 'custom') */
+    editCell?: Snippet<[EditCellArgs]>;
+    /** Validação custom; devolve mensagem de erro ou null */
+    validate?: (data: Record<string, any>) => string | null;
+    /** Função para obter variante do badge */
+    badgeVariant?: (value: any) => 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+    /** Placeholder */
+    placeholder?: string;
+}
+interface EditableTableProps<T> {
+    /** Colunas da tabela */
+    columns: EditableColumn[];
+    /** Dados da tabela */
+    data: T[];
+    /** Callback ao guardar linha */
+    onSave: (row: T, isNew: boolean) => Promise<void>;
+    /** Callback ao apagar linha */
+    onDelete: (row: T) => Promise<void>;
+    /** Factory para nova linha */
+    createNewRow: () => Partial<T>;
+    /** Mensagem quando vazio */
+    emptyMessage?: string;
+    /** Chave única para identificar linhas */
+    rowKey?: string;
+    /** Mostrar loading global */
+    loading?: boolean;
+    /** Snippet para ações extras */
+    rowActions?: Snippet<[T]>;
+    /** Callback quando linha é marcada para exclusão */
+    onMarkDelete?: (row: T) => void;
+}
+declare const EditableTable: import("svelte").Component<EditableTableProps<any>, {}, "">;
+type EditableTable = ReturnType<typeof EditableTable>;
+export default EditableTable;