@groundbrick/svelte-ui 0.1.1

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

@@ -0,0 +1,38 @@
+import type { ActionItem, Column } from "./GridView.types.js";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const GridView: $$__sveltets_2_IsomorphicComponent<{
+    data?: any[];
+    columns?: Column[];
+    loading?: boolean;
+    emptyMessage?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    selectable?: boolean;
+    draggable?: boolean;
+    onRowClick?: ((row: any) => void) | undefined;
+    onSelectionChange?: ((selectedRows: any[]) => void) | undefined;
+    onReorder?: ((orderedIds: number[]) => Promise<void>) | undefined;
+    actions?: ActionItem[];
+    paginated?: boolean;
+    pageSize?: number;
+    persistKey?: string | undefined;
+    /** Resolve an image cell value to a URL. Defaults to identity (use value as-is). */ resolveImageUrl?: (value: string, folder?: string) => string;
+    /** Format a date cell value. Defaults to pt-PT locale date. */ formatDate?: (value: any) => string;
+    /** Permission check for row actions. Defaults to allow-all. */ hasPermission?: (permission: string) => boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GridView = InstanceType<typeof GridView>;
+export default GridView;

package/dist/components/GridView.types.d.ts

@@ -0,0 +1,28 @@
+/** Column definition for GridView. */
+export interface Column {
+    key: string;
+    title: string;
+    sortable?: boolean;
+    type?: "text" | "date" | "number" | "image" | "badge" | "custom";
+    width?: string;
+    /** Include in search but don't render in the grid */
+    hidden?: boolean;
+    customRender?: (value: any, row: any) => string;
+    badgeVariant?: (value: any) => "primary" | "secondary" | "success" | "danger" | "warning" | "info";
+    /** For image type: which folder the image is from (passed to resolveImageUrl) */
+    imageFolder?: string;
+    /** For custom type: Svelte component to render */
+    component?: any;
+    /** Props factory for the custom component */
+    componentProps?: (value: any, row: any) => Record<string, any>;
+}
+/** A row action shown in the per-row actions menu. */
+export interface ActionItem {
+    label: string;
+    onClick: (item: any) => void | Promise<void>;
+    icon?: string;
+    /** Permission code checked via the `hasPermission` prop (app-defined). */
+    permission?: string;
+    condition?: (item: any) => boolean;
+    variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info";
+}

package/dist/components/GridView.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/LoadingSpinner.svelte

@@ -0,0 +1,253 @@
+<script lang="ts">
+	interface LoadingSpinnerProps {
+		/** Mensagem de carregamento */
+		message?: string;
+		/** Tamanho do spinner */
+		size?: 'sm' | 'md' | 'lg';
+		/** Variante de cor */
+		variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'gradient';
+		/** Ocupar tela inteira */
+		fullScreen?: boolean;
+		/** Centralizado */
+		centered?: boolean;
+		/** Classes CSS adicionais */
+		class?: string;
+	}
+
+	let {
+		message = 'A carregar...',
+		size = 'md',
+		variant = 'primary',
+		fullScreen = false,
+		centered = true,
+		class: additionalClasses = ''
+	}: LoadingSpinnerProps = $props();
+
+	const sizeClasses: Record<string, string> = {
+		sm: 'ap-spinner-sm',
+		md: 'ap-spinner-md',
+		lg: 'ap-spinner-lg'
+	};
+
+	const variantClasses: Record<string, string> = {
+		primary: 'ap-spinner-primary',
+		secondary: 'ap-spinner-secondary',
+		success: 'ap-spinner-success',
+		danger: 'ap-spinner-danger',
+		warning: 'ap-spinner-warning',
+		info: 'ap-spinner-info',
+		light: 'ap-spinner-light',
+		dark: 'ap-spinner-dark',
+		gradient: 'ap-spinner-gradient'
+	};
+
+	const containerClass = $derived([
+		'ap-loading',
+		fullScreen ? 'ap-loading-fullscreen' : '',
+		centered ? 'ap-loading-centered' : '',
+		additionalClasses
+	].filter(Boolean).join(' '));
+</script>
+
+<div class={containerClass}>
+	<div class="ap-loading-content">
+		<div class="ap-spinner {sizeClasses[size]} {variantClasses[variant]}" role="status">
+			<span class="visually-hidden">{message}</span>
+		</div>
+		{#if message}
+			<p class="ap-loading-message">{message}</p>
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* ============================================
+	   LOADING SPINNER - AgendaPet Design System
+	   ============================================ */
+	.ap-loading {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.ap-loading-centered {
+		padding: var(--spacing-2xl);
+		min-height: 200px;
+	}
+
+	.ap-loading-fullscreen {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		min-height: 100vh;
+		background: rgba(255, 255, 255, 0.95);
+		z-index: var(--z-modal);
+		backdrop-filter: blur(2px);
+	}
+
+	.ap-loading-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--spacing-md);
+	}
+
+	/* ===== SPINNER BASE ===== */
+	.ap-spinner {
+		border: 4px solid rgba(0, 0, 0, 0.1);
+		border-radius: 50%;
+		animation: ap-spin 1s linear infinite;
+		position: relative;
+	}
+
+	.ap-spinner::after {
+		content: '';
+		position: absolute;
+		top: -4px;
+		left: -4px;
+		right: -4px;
+		bottom: -4px;
+		border: 4px solid transparent;
+		border-radius: 50%;
+		animation: ap-spin 1s linear infinite reverse;
+	}
+
+	/* ===== SIZES ===== */
+	.ap-spinner-sm {
+		width: 1.5rem;
+		height: 1.5rem;
+		border-width: 2px;
+	}
+
+	.ap-spinner-sm::after {
+		top: -2px;
+		left: -2px;
+		right: -2px;
+		bottom: -2px;
+		border-width: 2px;
+	}
+
+	.ap-spinner-md {
+		width: 3rem;
+		height: 3rem;
+		border-width: 4px;
+	}
+
+	.ap-spinner-lg {
+		width: 4rem;
+		height: 4rem;
+		border-width: 5px;
+	}
+
+	.ap-spinner-lg::after {
+		top: -5px;
+		left: -5px;
+		right: -5px;
+		bottom: -5px;
+		border-width: 5px;
+	}
+
+	/* ===== COLOR VARIANTS ===== */
+	.ap-spinner-primary {
+		border-left-color: var(--color-primary);
+	}
+
+	.ap-spinner-primary::after {
+		border-top-color: var(--color-primary);
+	}
+
+	.ap-spinner-secondary {
+		border-left-color: var(--color-secondary);
+	}
+
+	.ap-spinner-secondary::after {
+		border-top-color: var(--color-secondary);
+	}
+
+	.ap-spinner-success {
+		border-left-color: var(--color-success);
+	}
+
+	.ap-spinner-success::after {
+		border-top-color: var(--color-success);
+	}
+
+	.ap-spinner-danger {
+		border-left-color: var(--color-danger);
+	}
+
+	.ap-spinner-danger::after {
+		border-top-color: var(--color-danger);
+	}
+
+	.ap-spinner-warning {
+		border-left-color: var(--color-warning);
+	}
+
+	.ap-spinner-warning::after {
+		border-top-color: var(--color-warning);
+	}
+
+	.ap-spinner-info {
+		border-left-color: var(--color-info);
+	}
+
+	.ap-spinner-info::after {
+		border-top-color: var(--color-info);
+	}
+
+	.ap-spinner-light {
+		border-left-color: var(--color-gray-300);
+	}
+
+	.ap-spinner-light::after {
+		border-top-color: var(--color-gray-300);
+	}
+
+	.ap-spinner-dark {
+		border-left-color: var(--color-gray-900);
+	}
+
+	.ap-spinner-dark::after {
+		border-top-color: var(--color-gray-900);
+	}
+
+	/* Gradient variant */
+	.ap-spinner-gradient {
+		border-left-color: #7B3FF2;
+		border-top-color: #15B9FF;
+	}
+
+	.ap-spinner-gradient::after {
+		border-top-color: #E414FF;
+		border-right-color: #7B3FF2;
+	}
+
+	/* ===== MESSAGE ===== */
+	.ap-loading-message {
+		color: var(--color-text-muted);
+		font-size: var(--font-size-sm);
+		margin: 0;
+		font-weight: var(--font-weight-medium);
+	}
+
+	/* ===== ANIMATION ===== */
+	@keyframes ap-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* ===== RESPONSIVE ===== */
+	@media (max-width: 576px) {
+		.ap-loading-centered {
+			padding: var(--spacing-xl);
+		}
+
+		.ap-loading-message {
+			font-size: var(--font-size-xs);
+		}
+	}
+</style>

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

@@ -0,0 +1,17 @@
+interface LoadingSpinnerProps {
+    /** Mensagem de carregamento */
+    message?: string;
+    /** Tamanho do spinner */
+    size?: 'sm' | 'md' | 'lg';
+    /** Variante de cor */
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'gradient';
+    /** Ocupar tela inteira */
+    fullScreen?: boolean;
+    /** Centralizado */
+    centered?: boolean;
+    /** Classes CSS adicionais */
+    class?: string;
+}
+declare const LoadingSpinner: import("svelte").Component<LoadingSpinnerProps, {}, "">;
+type LoadingSpinner = ReturnType<typeof LoadingSpinner>;
+export default LoadingSpinner;