ui-svelte 0.1.0

package/dist/hooks/use-fetch.svelte.js

@@ -0,0 +1,38 @@
+export const useFetch = (config) => {
+    let loading = $state(false);
+    const request = async (body) => {
+        loading = true;
+        try {
+            const token = localStorage.getItem('auth_token');
+            const response = await fetch(config.url, {
+                method: 'GET',
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                    ...config.headers
+                },
+                body: body ? JSON.stringify(body) : undefined
+            });
+            if (!response.ok)
+                throw new Error('Network response was not ok');
+            const data = await response.json();
+            config.onSuccess?.(data);
+        }
+        catch (err) {
+            if (err instanceof Error) {
+                config.onError?.(err.message);
+            }
+            else {
+                config.onError?.(String(err));
+            }
+        }
+        finally {
+            loading = false;
+        }
+    };
+    return {
+        get loading() {
+            return loading;
+        },
+        request
+    };
+};

package/dist/hooks/use-form.svelte.d.ts

@@ -0,0 +1,31 @@
+export type ValidationRuleType = 'email' | 'required' | `min:${number}` | `max:${number}` | 'url' | 'phone' | `pattern:${string}` | 'alphanumeric' | 'numeric' | 'alpha' | `matches:${string}` | `custom:${string}` | 'strongPassword' | 'creditCard' | 'date' | `minWords:${number}` | `maxWords:${number}`;
+export interface ValidationRule {
+    rule: ValidationRuleType;
+    message: string;
+}
+export interface ValidationRules {
+    [field: string]: ValidationRule[];
+}
+export interface FormConfig {
+    validationRules: ValidationRules;
+    url: string;
+    method: 'POST' | 'PUT' | 'PATCH';
+    headers?: Record<string, string>;
+    onError?: (errors: Record<string, string>) => void;
+    onSuccess?: (response: any) => void;
+    transformData?: (data: Record<string, any>) => any;
+    showToast?: boolean;
+    errorTitle?: string;
+    errorDescription?: string;
+    errorIcon?: string;
+    successTitle?: string;
+    successDescription?: string;
+    successIcon?: string;
+    resetOnSuccess?: boolean;
+}
+export declare const useForm: (config: FormConfig) => {
+    state: HTMLFormElement;
+    readonly errors: Record<string, string>;
+    readonly isSubmitting: boolean;
+    reset: () => void;
+};

package/dist/hooks/use-form.svelte.js

@@ -0,0 +1,110 @@
+import { toast } from '../stores/toast.svelte.js';
+import { validateSchema } from '../utils/validate-schema.js';
+export const useForm = (config) => {
+    let state = $state();
+    let errors = $state({});
+    let isSubmitting = $state(false);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        state = e.target;
+        const formData = new FormData(state);
+        let data = Object.fromEntries(formData.entries());
+        errors = validateSchema(data, config.validationRules);
+        if (Object.keys(errors).length > 0) {
+            config.onError?.(errors);
+            return;
+        }
+        if (config.transformData) {
+            data = config.transformData(data);
+        }
+        let url = config.url;
+        isSubmitting = true;
+        try {
+            const mergedHeaders = {
+                'Content-Type': 'application/json',
+                ...config?.headers
+            };
+            const response = await fetch(url, {
+                method: config.method,
+                headers: mergedHeaders,
+                body: JSON.stringify(data)
+            });
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                errors = errorData.errors || { general: 'An error occurred' };
+                if (config.showToast) {
+                    toast.show({
+                        title: config.errorTitle || 'Error',
+                        description: config.errorDescription || 'An error occurred while submitting the form.',
+                        status: 'danger',
+                        duration: 3000
+                    });
+                }
+                config.onError?.(errors);
+                return;
+            }
+            const result = await response.json();
+            if (config.showToast) {
+                toast.show({
+                    title: config.successTitle || 'Success',
+                    description: config.successDescription || 'Form submitted successfully.',
+                    status: 'success',
+                    duration: 3000
+                });
+            }
+            config.onSuccess?.(result);
+            if (config.resetOnSuccess) {
+                state.reset();
+            }
+        }
+        catch (error) {
+            errors = { general: 'Network error occurred' };
+            if (config.showToast) {
+                toast.show({
+                    title: config.errorTitle || 'Error',
+                    description: config.errorDescription || 'An error occurred while submitting the form.',
+                    status: 'danger',
+                    duration: 3000
+                });
+            }
+            config.onError?.(errors);
+        }
+        finally {
+            isSubmitting = false;
+        }
+    };
+    const handleInput = (e) => {
+        const input = e.target;
+        const fieldName = input.name;
+        if (errors[fieldName]) {
+            delete errors[fieldName];
+        }
+    };
+    const reset = () => {
+        state?.reset();
+        errors = {};
+    };
+    $effect(() => {
+        state?.addEventListener('submit', handleSubmit);
+        state?.addEventListener('input', handleInput);
+        return () => {
+            state?.removeEventListener('submit', handleSubmit);
+            state?.removeEventListener('input', handleInput);
+        };
+    });
+    return {
+        get state() {
+            return state;
+        },
+        set state(value) {
+            state = value;
+        },
+        get errors() {
+            return errors;
+        },
+        get isSubmitting() {
+            return isSubmitting;
+        },
+        reset
+    };
+};

package/dist/hooks/use-localstorage.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare const useLocalStorage: (key: string, initialValue: any) => {
+    value: string;
+};

package/dist/hooks/use-localstorage.svelte.js

@@ -0,0 +1,26 @@
+import { onMount } from 'svelte';
+export const useLocalStorage = (key, initialValue) => {
+    let value = $state(initialValue);
+    onMount(() => {
+        const currentValue = localStorage.getItem(key);
+        if (currentValue)
+            value = JSON.parse(currentValue);
+    });
+    const save = () => {
+        if (value) {
+            localStorage.setItem(key, JSON.stringify(value));
+        }
+        else {
+            localStorage.removeItem(key);
+        }
+    };
+    return {
+        get value() {
+            return value;
+        },
+        set value(v) {
+            value = v;
+            save();
+        }
+    };
+};

package/dist/hooks/use-scroll.svelte.d.ts

@@ -0,0 +1,6 @@
+export declare const useScroll: () => {
+    readonly scrollY: number;
+    readonly scrollX: number;
+    readonly isScrolled: boolean;
+    setThreshold: (value: number) => void;
+};

package/dist/hooks/use-scroll.svelte.js

@@ -0,0 +1,34 @@
+export const useScroll = () => {
+    let scrollY = $state(0);
+    let scrollX = $state(0);
+    let isScrolled = $state(false);
+    let threshold = $state(100);
+    const updateScrollPosition = () => {
+        scrollY = window.scrollY;
+        scrollX = window.scrollX;
+        isScrolled = scrollY > threshold;
+    };
+    const setThreshold = (value) => {
+        threshold = value;
+        isScrolled = scrollY > threshold;
+    };
+    $effect(() => {
+        updateScrollPosition();
+        window.addEventListener('scroll', updateScrollPosition);
+        return () => {
+            window.removeEventListener('scroll', updateScrollPosition);
+        };
+    });
+    return {
+        get scrollY() {
+            return scrollY;
+        },
+        get scrollX() {
+            return scrollX;
+        },
+        get isScrolled() {
+            return isScrolled;
+        },
+        setThreshold
+    };
+};

package/dist/hooks/use-search.svelte.d.ts

@@ -0,0 +1,49 @@
+export interface SearchOption {
+    id: string | number;
+    label: string;
+    description?: string;
+    icon?: string;
+    src?: string;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+export interface SearchState {
+    options: SearchOption[];
+    isLoading: boolean;
+    isLoadingMore: boolean;
+    hasMore: boolean;
+    error: any;
+    search: string;
+    selectedValue: string | number | null;
+    selectedOption: SearchOption | null;
+    currentPage: number;
+    totalResults: number;
+    setSearch: (query: string) => void;
+    setSelectedValue: (value: string | number | null) => void;
+    refresh: () => void;
+    reset: () => void;
+    setOptions: (newOptions: SearchOption[]) => void;
+    loadMore: () => Promise<void>;
+}
+export interface SearchResponse {
+    options: SearchOption[];
+    total?: number;
+    hasMore?: boolean;
+}
+export interface SearchConfig {
+    url?: string;
+    options?: SearchOption[];
+    initialSearch?: string;
+    initialValue?: string | number | null;
+    headers?: Record<string, string>;
+    transformData?: (data: any, search: string) => SearchResponse;
+    onError?: (error: any) => void;
+    onSuccess?: (response: SearchResponse) => void;
+    debounceSearch?: number;
+    clientSide?: boolean;
+    minSearchLength?: number;
+    buildQueryParams?: (search: string, page: number) => Record<string, string>;
+    pageSize?: number;
+    enablePagination?: boolean;
+}
+export declare const useSearch: (config: SearchConfig) => SearchState;

package/dist/hooks/use-search.svelte.js

@@ -0,0 +1,229 @@
+export const useSearch = (config) => {
+    const isManualMode = !config.url || config.clientSide;
+    const pageSize = config.pageSize ?? 20;
+    const enablePagination = config.enablePagination ?? true;
+    let allOptions = $state(config.options ?? []);
+    let options = $state([]);
+    let search = $state(config.initialSearch ?? '');
+    let selectedValue = $state(config.initialValue ?? null);
+    let isLoading = $state(false);
+    let isLoadingMore = $state(false);
+    let hasMore = $state(false);
+    let error = $state(null);
+    let currentPage = $state(0);
+    let totalResults = $state(0);
+    let debounceTimeout;
+    const buildUrl = (page = 0) => {
+        if (!config.url)
+            return '';
+        const params = new URLSearchParams();
+        if (config.buildQueryParams) {
+            const customParams = config.buildQueryParams(search, page);
+            Object.entries(customParams).forEach(([key, value]) => {
+                if (value !== undefined && value !== null && value !== '') {
+                    params.append(key, value);
+                }
+            });
+        }
+        else {
+            if (search)
+                params.append('search', search);
+            if (enablePagination) {
+                params.append('limit', String(pageSize));
+                params.append('skip', String(page * pageSize));
+            }
+        }
+        return `${config.url}?${params.toString()}`;
+    };
+    const processClientSideData = () => {
+        let processedOptions = [...allOptions];
+        if (search) {
+            const lowerSearch = search.toLowerCase();
+            processedOptions = processedOptions.filter((option) => {
+                return (option.label.toLowerCase().includes(lowerSearch) ||
+                    String(option.id).toLowerCase().includes(lowerSearch) ||
+                    (option.description && option.description.toLowerCase().includes(lowerSearch)));
+            });
+        }
+        // Client-side pagination
+        if (enablePagination) {
+            const start = 0;
+            const end = (currentPage + 1) * pageSize;
+            options = processedOptions.slice(start, end);
+            hasMore = end < processedOptions.length;
+            totalResults = processedOptions.length;
+        }
+        else {
+            options = processedOptions;
+            hasMore = false;
+            totalResults = processedOptions.length;
+        }
+    };
+    const fetchData = async (page = 0, append = false) => {
+        if (isManualMode) {
+            processClientSideData();
+            return;
+        }
+        if (config.minSearchLength && search.length < config.minSearchLength) {
+            options = [];
+            hasMore = false;
+            totalResults = 0;
+            return;
+        }
+        if (append) {
+            isLoadingMore = true;
+        }
+        else {
+            isLoading = true;
+        }
+        error = null;
+        try {
+            const response = await fetch(buildUrl(page), {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                    ...config.headers
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const result = await response.json();
+            const searchResponse = config.transformData ? config.transformData(result, search) : result;
+            if (append) {
+                options = [...options, ...searchResponse.options];
+            }
+            else {
+                options = searchResponse.options;
+            }
+            // Determinar si hay más resultados
+            if (searchResponse.hasMore !== undefined) {
+                hasMore = searchResponse.hasMore;
+            }
+            else if (searchResponse.total !== undefined) {
+                totalResults = searchResponse.total;
+                hasMore = options.length < searchResponse.total;
+            }
+            else {
+                // Si no hay info de total, asumimos que hay más si recibimos pageSize resultados
+                hasMore = searchResponse.options.length >= pageSize;
+            }
+            config.onSuccess?.(searchResponse);
+        }
+        catch (err) {
+            error = err;
+            config.onError?.(err);
+        }
+        finally {
+            isLoading = false;
+            isLoadingMore = false;
+        }
+    };
+    const debouncedFetch = () => {
+        if (config.debounceSearch && config.debounceSearch > 0) {
+            clearTimeout(debounceTimeout);
+            debounceTimeout = setTimeout(() => {
+                currentPage = 0;
+                fetchData(0, false);
+            }, config.debounceSearch);
+        }
+        else {
+            currentPage = 0;
+            fetchData(0, false);
+        }
+    };
+    $effect(() => {
+        if (isManualMode) {
+            search;
+            allOptions;
+            processClientSideData();
+        }
+        else {
+            search;
+            debouncedFetch();
+        }
+        return () => {
+            clearTimeout(debounceTimeout);
+        };
+    });
+    const setSearch = (query) => {
+        search = query;
+        currentPage = 0;
+    };
+    const setSelectedValue = (value) => {
+        selectedValue = value;
+    };
+    const setOptions = (newOptions) => {
+        allOptions = newOptions;
+        currentPage = 0;
+    };
+    const refresh = () => {
+        currentPage = 0;
+        if (isManualMode) {
+            processClientSideData();
+        }
+        else {
+            fetchData(0, false);
+        }
+    };
+    const reset = () => {
+        search = config.initialSearch ?? '';
+        selectedValue = config.initialValue ?? null;
+        currentPage = 0;
+        if (isManualMode) {
+            processClientSideData();
+        }
+    };
+    const loadMore = async () => {
+        if (!hasMore || isLoadingMore || isLoading)
+            return;
+        currentPage += 1;
+        if (isManualMode) {
+            processClientSideData();
+        }
+        else {
+            await fetchData(currentPage, true);
+        }
+    };
+    return {
+        get options() {
+            return options;
+        },
+        get search() {
+            return search;
+        },
+        set search(value) {
+            search = value;
+        },
+        get selectedValue() {
+            return selectedValue;
+        },
+        get selectedOption() {
+            return options.find((opt) => opt.id === selectedValue) ?? null;
+        },
+        get isLoading() {
+            return isLoading;
+        },
+        get isLoadingMore() {
+            return isLoadingMore;
+        },
+        get hasMore() {
+            return hasMore;
+        },
+        get error() {
+            return error;
+        },
+        get currentPage() {
+            return currentPage;
+        },
+        get totalResults() {
+            return totalResults;
+        },
+        setSearch,
+        setSelectedValue,
+        refresh,
+        reset,
+        setOptions,
+        loadMore
+    };
+};

package/dist/hooks/use-table.svelte.d.ts

@@ -0,0 +1,85 @@
+import type { Snippet } from 'svelte';
+interface Column {
+    label: string;
+    field: string;
+    sortable?: boolean;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    render?: Snippet<[any]>;
+}
+export interface TableState {
+    data: any[];
+    isLoading: boolean;
+    error: any;
+    sortBy?: string;
+    sortOrder: 'ASC' | 'DESC';
+    setSort: (column: string, order?: 'ASC' | 'DESC') => void;
+    page?: number;
+    totalPages?: number;
+    total?: number;
+    hasNextPage?: boolean;
+    hasPrevPage?: boolean;
+    nextPage?: () => void;
+    prevPage?: () => void;
+    goToPage?: (page: number) => void;
+    columns: Column[];
+    setPage: (newPage: number) => void;
+    setPageSize: (newPageSize: number) => void;
+    setSearch: (query: string) => void;
+    refresh: () => void;
+    reset: () => void;
+    pageSize: number;
+    search: string;
+    updateData: (newData: any[]) => void;
+    selectable: boolean;
+    rowKey: string;
+    selectedRows: any[];
+    selectedKeys: Set<string | number>;
+    isAllSelected: boolean;
+    isIndeterminate: boolean;
+    selectRow: (row: any) => void;
+    deselectRow: (row: any) => void;
+    toggleRow: (row: any) => void;
+    selectAll: () => void;
+    deselectAll: () => void;
+    toggleAll: () => void;
+    isRowSelected: (row: any) => boolean;
+    clearSelection: () => void;
+}
+export type TableParams = {
+    page?: number;
+    pageSize?: number;
+    sortBy?: string;
+    sortOrder?: 'ASC' | 'DESC';
+    search?: string;
+    offset?: number;
+    limit?: number;
+};
+export interface PaginatedResponse {
+    data: any[];
+    total: number;
+    page: number;
+    pageSize: number;
+    totalPages: number;
+}
+export type TableConfig = {
+    columns: Column[];
+    data?: any[];
+    url?: string;
+    queryParams?: (params: TableParams) => Record<string, string>;
+    initialPage?: number;
+    initialPageSize?: number;
+    initialSortBy?: string;
+    initialSortOrder?: 'ASC' | 'DESC';
+    initialSearch?: string;
+    headers?: Record<string, string>;
+    parseResponse?: (data: any, params: TableParams) => PaginatedResponse;
+    onError?: (error: any) => void;
+    onSuccess?: (response: PaginatedResponse) => void;
+    debounceSearch?: number;
+    selectable?: boolean;
+    rowKey?: string;
+    onSelectionChange?: (selectedRows: any[]) => void;
+};
+export declare const useTable: (config: TableConfig) => TableState;
+export {};