ui-svelte 0.1.0

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

@@ -0,0 +1,362 @@
+export const useTable = (config) => {
+    const isManualMode = !!config.data;
+    let allData = $state(config.data ?? []);
+    let data = $state([]);
+    let total = $state(0);
+    let page = $state(config.initialPage ?? 1);
+    let pageSize = $state(config.initialPageSize ?? 10);
+    let sortBy = $state(config.initialSortBy);
+    let sortOrder = $state(config.initialSortOrder ?? 'ASC');
+    let search = $state(config.initialSearch ?? '');
+    let isLoading = $state(false);
+    let error = $state(null);
+    const selectable = config.selectable ?? false;
+    const rowKey = config.rowKey ?? 'id';
+    let selectedKeys = $state(new Set());
+    let debounceTimeout;
+    const getRowKey = (row) => {
+        return row[rowKey];
+    };
+    const selectedRows = $derived.by(() => {
+        if (!selectable)
+            return [];
+        return data.filter((row) => selectedKeys.has(getRowKey(row)));
+    });
+    const isAllSelected = $derived.by(() => {
+        if (!selectable || data.length === 0)
+            return false;
+        return data.every((row) => selectedKeys.has(getRowKey(row)));
+    });
+    const isIndeterminate = $derived.by(() => {
+        if (!selectable || data.length === 0)
+            return false;
+        const someSelected = data.some((row) => selectedKeys.has(getRowKey(row)));
+        return someSelected && !isAllSelected;
+    });
+    const buildUrl = () => {
+        if (!config.url)
+            return '';
+        const url = config.url;
+        if (!config.queryParams) {
+            return url;
+        }
+        const params = new URLSearchParams();
+        const tableParams = {
+            page,
+            pageSize,
+            sortBy,
+            sortOrder,
+            search,
+            offset: (page - 1) * pageSize,
+            limit: pageSize
+        };
+        const customParams = config.queryParams(tableParams);
+        Object.entries(customParams).forEach(([key, value]) => {
+            if (value !== undefined && value !== null && value !== '') {
+                params.append(key, value);
+            }
+        });
+        return `${url}?${params.toString()}`;
+    };
+    const processClientSideData = () => {
+        let processedData = [...allData];
+        if (search) {
+            processedData = processedData.filter((item) => {
+                return config.columns.some((column) => {
+                    const value = item[column.field];
+                    return String(value).toLowerCase().includes(search.toLowerCase());
+                });
+            });
+        }
+        if (sortBy) {
+            processedData.sort((a, b) => {
+                const aVal = a[sortBy];
+                const bVal = b[sortBy];
+                if (aVal === bVal)
+                    return 0;
+                const comparison = aVal > bVal ? 1 : -1;
+                return sortOrder === 'ASC' ? comparison : -comparison;
+            });
+        }
+        total = processedData.length;
+        const startIndex = (page - 1) * pageSize;
+        const endIndex = startIndex + pageSize;
+        data = processedData.slice(startIndex, endIndex);
+    };
+    const fetchData = async () => {
+        if (isManualMode) {
+            processClientSideData();
+            return;
+        }
+        isLoading = true;
+        error = null;
+        try {
+            const response = await fetch(buildUrl(), {
+                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 tableParams = {
+                page,
+                pageSize,
+                sortBy,
+                sortOrder,
+                search,
+                offset: (page - 1) * pageSize,
+                limit: pageSize
+            };
+            const paginatedData = config.parseResponse
+                ? config.parseResponse(result, tableParams)
+                : result;
+            data = paginatedData.data;
+            total = paginatedData.total;
+            if (paginatedData.page !== undefined)
+                page = paginatedData.page;
+            if (paginatedData.pageSize !== undefined)
+                pageSize = paginatedData.pageSize;
+            config.onSuccess?.(paginatedData);
+        }
+        catch (err) {
+            error = err;
+            config.onError?.(err);
+        }
+        finally {
+            isLoading = false;
+        }
+    };
+    const debouncedFetch = () => {
+        if (config.debounceSearch && config.debounceSearch > 0) {
+            clearTimeout(debounceTimeout);
+            debounceTimeout = setTimeout(() => {
+                fetchData();
+            }, config.debounceSearch);
+        }
+        else {
+            fetchData();
+        }
+    };
+    $effect(() => {
+        if (isManualMode) {
+            page;
+            pageSize;
+            sortBy;
+            sortOrder;
+            search;
+            allData;
+            processClientSideData();
+        }
+        else {
+            page;
+            pageSize;
+            sortBy;
+            sortOrder;
+            search;
+            debouncedFetch();
+        }
+        return () => {
+            clearTimeout(debounceTimeout);
+        };
+    });
+    $effect(() => {
+        if (selectable && config.onSelectionChange) {
+            config.onSelectionChange(selectedRows);
+        }
+    });
+    const setPage = (newPage) => {
+        page = newPage;
+    };
+    const setPageSize = (newPageSize) => {
+        pageSize = newPageSize;
+        page = 1;
+    };
+    const setSort = (column, order) => {
+        sortBy = column;
+        sortOrder = order ?? (sortBy === column && sortOrder === 'ASC' ? 'DESC' : 'ASC');
+    };
+    const setSearch = (query) => {
+        search = query;
+        page = 1;
+    };
+    const updateData = (newData) => {
+        allData = newData;
+        page = 1;
+    };
+    const refresh = () => {
+        if (isManualMode) {
+            processClientSideData();
+        }
+        else {
+            fetchData();
+        }
+    };
+    const reset = () => {
+        page = config.initialPage ?? 1;
+        pageSize = config.initialPageSize ?? 10;
+        sortBy = config.initialSortBy;
+        sortOrder = config.initialSortOrder ?? 'ASC';
+        search = config.initialSearch ?? '';
+        selectedKeys = new Set();
+    };
+    const nextPage = () => {
+        if (page < Math.ceil(total / pageSize)) {
+            page++;
+        }
+    };
+    const prevPage = () => {
+        if (page > 1) {
+            page--;
+        }
+    };
+    const goToPage = (targetPage) => {
+        const maxPages = Math.ceil(total / pageSize);
+        if (targetPage >= 1 && targetPage <= maxPages) {
+            page = targetPage;
+        }
+    };
+    const selectRow = (row) => {
+        if (!selectable)
+            return;
+        const key = getRowKey(row);
+        selectedKeys = new Set(selectedKeys).add(key);
+    };
+    const deselectRow = (row) => {
+        if (!selectable)
+            return;
+        const key = getRowKey(row);
+        const newSet = new Set(selectedKeys);
+        newSet.delete(key);
+        selectedKeys = newSet;
+    };
+    const toggleRow = (row) => {
+        if (!selectable)
+            return;
+        const key = getRowKey(row);
+        if (selectedKeys.has(key)) {
+            deselectRow(row);
+        }
+        else {
+            selectRow(row);
+        }
+    };
+    const selectAll = () => {
+        if (!selectable)
+            return;
+        const newSet = new Set(selectedKeys);
+        data.forEach((row) => {
+            newSet.add(getRowKey(row));
+        });
+        selectedKeys = newSet;
+    };
+    const deselectAll = () => {
+        if (!selectable)
+            return;
+        const newSet = new Set(selectedKeys);
+        data.forEach((row) => {
+            newSet.delete(getRowKey(row));
+        });
+        selectedKeys = newSet;
+    };
+    const toggleAll = () => {
+        if (!selectable)
+            return;
+        if (isAllSelected) {
+            deselectAll();
+        }
+        else {
+            selectAll();
+        }
+    };
+    const isRowSelected = (row) => {
+        if (!selectable)
+            return false;
+        return selectedKeys.has(getRowKey(row));
+    };
+    const clearSelection = () => {
+        if (!selectable)
+            return;
+        selectedKeys = new Set();
+    };
+    return {
+        get data() {
+            return data;
+        },
+        get total() {
+            return total;
+        },
+        get page() {
+            return page;
+        },
+        get pageSize() {
+            return pageSize;
+        },
+        get sortBy() {
+            return sortBy;
+        },
+        get sortOrder() {
+            return sortOrder;
+        },
+        get search() {
+            return search;
+        },
+        get isLoading() {
+            return isLoading;
+        },
+        get error() {
+            return error;
+        },
+        get totalPages() {
+            return Math.ceil(total / pageSize);
+        },
+        get hasNextPage() {
+            return page < Math.ceil(total / pageSize);
+        },
+        get hasPrevPage() {
+            return page > 1;
+        },
+        get columns() {
+            return config.columns;
+        },
+        get selectable() {
+            return selectable;
+        },
+        get rowKey() {
+            return rowKey;
+        },
+        get selectedRows() {
+            return selectedRows;
+        },
+        get selectedKeys() {
+            return selectedKeys;
+        },
+        get isAllSelected() {
+            return isAllSelected;
+        },
+        get isIndeterminate() {
+            return isIndeterminate;
+        },
+        setPage,
+        setPageSize,
+        setSort,
+        setSearch,
+        refresh,
+        reset,
+        nextPage,
+        prevPage,
+        goToPage,
+        updateData,
+        selectRow,
+        deselectRow,
+        toggleRow,
+        selectAll,
+        deselectAll,
+        toggleAll,
+        isRowSelected,
+        clearSelection
+    };
+};

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

@@ -0,0 +1,18 @@
+export interface WebSocketConfig {
+    url: string;
+    protocols?: string | string[];
+    reconnect?: boolean;
+    reconnectInterval?: number;
+    reconnectAttempts?: number;
+    onOpen?: (event: Event) => void;
+    onMessage?: (data: any) => void;
+    onError?: (error: string) => void;
+    onClose?: (event: CloseEvent) => void;
+}
+export declare const useWebSocket: (config: WebSocketConfig) => {
+    readonly isConnected: boolean;
+    readonly reconnectCount: number;
+    connect: () => void;
+    send: (data: any) => void;
+    close: (code?: number, reason?: string) => void;
+};

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

@@ -0,0 +1,79 @@
+export const useWebSocket = (config) => {
+    let ws = $state(null);
+    let isConnected = $state(false);
+    let reconnectCount = $state(0);
+    let reconnectTimeoutId = null;
+    const { url, protocols, reconnect = true, reconnectInterval = 3000, reconnectAttempts = 5 } = config;
+    const connect = () => {
+        try {
+            const token = localStorage.getItem('auth_token');
+            const wsUrl = token ? `${url}?token=${token}` : url;
+            ws = new WebSocket(wsUrl, protocols);
+            ws.onopen = (event) => {
+                isConnected = true;
+                reconnectCount = 0;
+                config.onOpen?.(event);
+            };
+            ws.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+                    config.onMessage?.(data);
+                }
+                catch {
+                    config.onMessage?.(event.data);
+                }
+            };
+            ws.onerror = () => {
+                config.onError?.('WebSocket error occurred');
+            };
+            ws.onclose = (event) => {
+                isConnected = false;
+                config.onClose?.(event);
+                if (reconnect && reconnectCount < reconnectAttempts) {
+                    reconnectTimeoutId = window.setTimeout(() => {
+                        reconnectCount++;
+                        connect();
+                    }, reconnectInterval);
+                }
+            };
+        }
+        catch (err) {
+            if (err instanceof Error) {
+                config.onError?.(err.message);
+            }
+            else {
+                config.onError?.(String(err));
+            }
+        }
+    };
+    const send = (data) => {
+        if (ws && isConnected) {
+            const message = typeof data === 'string' ? data : JSON.stringify(data);
+            ws.send(message);
+        }
+        else {
+            config.onError?.('WebSocket is not connected');
+        }
+    };
+    const close = (code, reason) => {
+        if (reconnectTimeoutId) {
+            clearTimeout(reconnectTimeoutId);
+            reconnectTimeoutId = null;
+        }
+        if (ws) {
+            ws.close(code, reason);
+            ws = null;
+        }
+    };
+    return {
+        get isConnected() {
+            return isConnected;
+        },
+        get reconnectCount() {
+            return reconnectCount;
+        },
+        connect,
+        send,
+        close
+    };
+};

package/dist/icons/index.d.ts

@@ -0,0 +1,132 @@
+export declare const ArrowDown24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const ArrowLeft24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const ArrowRight24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const ArrowSortDownLines24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const ArrowSortUpLines24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const ArrowUp24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Attach24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Camera24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const CheckmarkCircle24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Checkmark24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const ChevronDown24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const ChevronRight24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Copy24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Delete24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const DismissCircle24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Dismiss24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Info24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const DotsMoveIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const MaximizeSquareMinimalisticLinearIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Microphone2LinearIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const MoonStarsLinearIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const MoreVertical24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const SpeakerMute24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Pause24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const PictureInPicture24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Play24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Record24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Search24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Send24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Speaker24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const RecordStop24RegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Sun2LinearIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const Warning24RegularIcon: {
+    body: string;
+    viewbox: string;
+};