@sakoa/ui 0.1.0

package/dist/components/ui/table/STableSkeleton.d.ts

@@ -0,0 +1,29 @@
+interface Props {
+    /** Number of skeleton rows to show */
+    rows?: number;
+    /** Number of columns (auto-detected from context if available) */
+    columns?: number;
+    /** Show selection column */
+    showSelection?: boolean;
+    /** Show actions column */
+    showActions?: boolean;
+    /** Custom class for skeleton rows */
+    skeletonClass?: string;
+    /** Animation style */
+    animation?: 'shimmer' | 'pulse' | 'none';
+    /** Progressive loading - stagger row appearance */
+    progressive?: boolean;
+    /** Delay between progressive rows (ms) */
+    progressiveDelay?: number;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    animation: "shimmer" | "pulse" | "none";
+    columns: number;
+    rows: number;
+    skeletonClass: string;
+    showSelection: boolean;
+    showActions: boolean;
+    progressive: boolean;
+    progressiveDelay: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/ui/table/index.d.ts

@@ -0,0 +1,98 @@
+import { InjectionKey, Ref, ComputedRef } from 'vue';
+/** Table design variants */
+export type TableVariant = 'default' | 'compact' | 'bordered' | 'striped' | 'minimal';
+/** Table size presets */
+export type TableSize = 'sm' | 'md' | 'lg';
+/** Sort direction */
+export type SortDirection = 'asc' | 'desc' | null;
+/** Column alignment */
+export type ColumnAlign = 'left' | 'center' | 'right';
+/** Selection mode */
+export type SelectionMode = 'none' | 'single' | 'multiple';
+/** Column definition */
+export interface TableColumn<T = unknown> {
+    /** Unique key for the column */
+    key: string;
+    /** Display label for header */
+    label?: string;
+    /** Data accessor - can be a key of T or a function */
+    accessor?: keyof T | ((row: T, index: number) => unknown);
+    /** Column width (CSS value) */
+    width?: string;
+    /** Minimum width */
+    minWidth?: string;
+    /** Maximum width */
+    maxWidth?: string;
+    /** Text alignment */
+    align?: ColumnAlign;
+    /** Whether column is sortable */
+    sortable?: boolean;
+    /** Custom sort function */
+    sortFn?: (a: T, b: T, direction: SortDirection) => number;
+    /** Whether column is visible */
+    visible?: boolean;
+    /** Sticky column position */
+    sticky?: 'left' | 'right';
+    /** Custom header class */
+    headerClass?: string;
+    /** Custom cell class */
+    cellClass?: string;
+    /** Render priority for responsive hiding */
+    priority?: number;
+}
+/** Sort state */
+export interface SortState {
+    column: string | null;
+    direction: SortDirection;
+}
+/** Pagination state */
+export interface PaginationState {
+    page: number;
+    pageSize: number;
+    total: number;
+}
+/** Row data with meta */
+export interface TableRowData<T = unknown> {
+    data: T;
+    index: number;
+    originalIndex: number;
+    selected: boolean;
+    expanded: boolean;
+}
+/** Context provided to table children */
+export interface SDataTableContext<T = unknown> {
+    variant: TableVariant;
+    size: TableSize;
+    selectionMode: SelectionMode;
+    loading: Ref<boolean>;
+    hoverable: boolean;
+    stickyHeader: boolean;
+    animateRows: boolean;
+    columns: Ref<TableColumn<T>[]>;
+    visibleColumns: ComputedRef<TableColumn<T>[]>;
+    sortState: Ref<SortState>;
+    selectedKeys: Ref<Set<string | number>>;
+    expandedKeys: Ref<Set<string | number>>;
+    getRowKey: (row: T, index: number) => string | number;
+    toggleSort: (column: string) => void;
+    toggleRowSelection: (key: string | number) => void;
+    toggleAllSelection: () => void;
+    toggleRowExpansion: (key: string | number) => void;
+    isRowSelected: (key: string | number) => boolean;
+    isRowExpanded: (key: string | number) => boolean;
+    isAllSelected: ComputedRef<boolean>;
+    isSomeSelected: ComputedRef<boolean>;
+    showColumn: (key: string) => void;
+    hideColumn: (key: string) => void;
+    toggleColumn: (key: string) => void;
+}
+export declare const SDataTableContextKey: InjectionKey<SDataTableContext>;
+export { default as SDataTable } from './SDataTable';
+export { default as STableHeader } from './STableHeader';
+export { default as STableBody } from './STableBody';
+export { default as STableRow } from './STableRow';
+export { default as STableCell } from './STableCell';
+export { default as STableColumn } from './STableColumn';
+export { default as STableSkeleton } from './STableSkeleton';
+export { default as STableEmpty } from './STableEmpty';
+export { useDataTable } from './useDataTable';

package/dist/components/ui/table/useDataTable.d.ts

@@ -0,0 +1,80 @@
+import { Ref, ComputedRef } from 'vue';
+import { TableColumn, SortState, SortDirection, PaginationState } from './index';
+export interface UseDataTableOptions<T> {
+    /** Initial data */
+    data?: T[] | Ref<T[]>;
+    /** Column definitions */
+    columns?: TableColumn<T>[] | Ref<TableColumn<T>[]>;
+    /** Function to get unique key from row */
+    rowKey?: keyof T | ((row: T, index: number) => string | number);
+    /** Initial sort state */
+    initialSort?: SortState;
+    /** Enable pagination */
+    pagination?: boolean | Partial<PaginationState>;
+    /** Enable selection */
+    selection?: boolean;
+    /** Enable multi-select */
+    multiSelect?: boolean;
+    /** Enable row expansion */
+    expandable?: boolean;
+    /** Async data loader */
+    loader?: (params: DataLoaderParams) => Promise<DataLoaderResult<T>>;
+    /** Debounce delay for async operations */
+    debounce?: number;
+}
+export interface DataLoaderParams {
+    page: number;
+    pageSize: number;
+    sort: SortState;
+    filters?: Record<string, unknown>;
+}
+export interface DataLoaderResult<T> {
+    data: T[];
+    total: number;
+}
+export interface UseDataTableReturn<T> {
+    data: Ref<T[]>;
+    processedData: ComputedRef<T[]>;
+    paginatedData: ComputedRef<T[]>;
+    columns: Ref<TableColumn<T>[]>;
+    visibleColumns: ComputedRef<TableColumn<T>[]>;
+    sortState: Ref<SortState>;
+    toggleSort: (columnKey: string) => void;
+    setSort: (columnKey: string, direction: SortDirection) => void;
+    clearSort: () => void;
+    selectedKeys: Ref<Set<string | number>>;
+    selectedRows: ComputedRef<T[]>;
+    toggleRowSelection: (key: string | number) => void;
+    selectRow: (key: string | number) => void;
+    deselectRow: (key: string | number) => void;
+    selectAll: () => void;
+    deselectAll: () => void;
+    toggleAllSelection: () => void;
+    isRowSelected: (key: string | number) => boolean;
+    isAllSelected: ComputedRef<boolean>;
+    isSomeSelected: ComputedRef<boolean>;
+    expandedKeys: Ref<Set<string | number>>;
+    toggleRowExpansion: (key: string | number) => void;
+    expandRow: (key: string | number) => void;
+    collapseRow: (key: string | number) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    isRowExpanded: (key: string | number) => boolean;
+    pagination: Ref<PaginationState>;
+    totalPages: ComputedRef<number>;
+    goToPage: (page: number) => void;
+    nextPage: () => void;
+    prevPage: () => void;
+    setPageSize: (size: number) => void;
+    showColumn: (key: string) => void;
+    hideColumn: (key: string) => void;
+    toggleColumn: (key: string) => void;
+    setColumnVisibility: (key: string, visible: boolean) => void;
+    loading: Ref<boolean>;
+    error: Ref<Error | null>;
+    getRowKey: (row: T, index: number) => string | number;
+    refresh: () => Promise<void>;
+    setData: (newData: T[]) => void;
+}
+export declare function useDataTable<T extends Record<string, unknown>>(options?: UseDataTableOptions<T>): UseDataTableReturn<T>;
+export default useDataTable;

package/dist/components/ui/tabs/STabPane.d.ts

@@ -0,0 +1,31 @@
+interface Props {
+    /** Unique tab identifier (required) */
+    name: string | number;
+    /** Tab label text (required) */
+    tab: string;
+    /** Optional MDI icon name (without mdi- prefix) */
+    icon?: string;
+    /** Disable this tab */
+    disabled?: boolean;
+    /** Override parent closable setting */
+    closable?: boolean;
+    /** Additional classes for this tab button */
+    tabClass?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ui/tabs/STabsContent.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    value: string | number;
+    class?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ui/tabs/STabsIndicator.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    color?: string;
+    class?: string;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    class: string;
+    color: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/components/ui/tabs/STabsTrigger.d.ts

@@ -0,0 +1,28 @@
+interface Props {
+    value: string | number;
+    disabled?: boolean;
+    class?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            active: boolean;
+            disabled: boolean;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    disabled: boolean;
+    class: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ui/tabs/index.d.ts

@@ -0,0 +1,6 @@
+export { default as STabs } from './STabs';
+export { default as STabPane } from './STabPane';
+export { default as STabsList } from './STabsList';
+export { default as STabsTrigger } from './STabsTrigger';
+export { default as STabsContent } from './STabsContent';
+export { default as STabsIndicator } from './STabsIndicator';

package/dist/components/ui/toast/SToast.d.ts

@@ -0,0 +1,49 @@
+import { ToastType } from '../../../composables/useToast';
+export interface Props {
+    /** Unique toast ID */
+    id: string;
+    /** Toast type */
+    type: ToastType;
+    /** Toast title */
+    title?: string;
+    /** Toast description */
+    description?: string;
+    /** Duration in ms (for display purposes) */
+    duration?: number;
+    /** Show progress bar */
+    showProgress?: boolean;
+    /** Show close button */
+    closable?: boolean;
+    /** Icon name or false to hide */
+    icon?: string | boolean;
+    /** Custom color for custom type */
+    color?: string;
+    /** Progress percentage (0-100) */
+    progress?: number;
+    /** Whether toast is paused */
+    paused?: boolean;
+    /** Custom component to render */
+    component?: object;
+    /** Props for custom component */
+    componentProps?: Record<string, unknown>;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: () => any;
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    closable: boolean;
+    icon: string | boolean;
+    progress: number;
+    title: string;
+    duration: number;
+    component: object;
+    color: string;
+    description: string;
+    showProgress: boolean;
+    paused: boolean;
+    componentProps: Record<string, unknown>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/ui/toast/SToastContainer.d.ts

@@ -0,0 +1,21 @@
+import { ToastPosition } from '../../../composables/useToast';
+export interface Props {
+    /** Position to render toasts (defaults to global config) */
+    position?: ToastPosition;
+    /** Maximum toasts to show (defaults to global config) */
+    maxToasts?: number;
+    /** Gap between toasts in px */
+    gap?: number;
+    /** Teleport target */
+    teleport?: boolean | string;
+    /** Z-index for the container */
+    zIndex?: number;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    position: ToastPosition;
+    zIndex: number;
+    teleport: boolean | string;
+    gap: number;
+    maxToasts: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/ui/toast/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SToast } from './SToast';
+export { default as SToastContainer } from './SToastContainer';

package/dist/composables/useAsync.d.ts

@@ -0,0 +1,134 @@
+import { Ref, DeepReadonly } from 'vue';
+export interface UseAsyncOptions<T> {
+    /** Execute immediately on mount */
+    immediate?: boolean;
+    /** Number of retry attempts on failure */
+    retry?: number;
+    /** Delay between retry attempts in ms */
+    retryDelay?: number;
+    /** Cache the result and prevent duplicate requests */
+    cache?: boolean;
+    /** Callback when the async operation succeeds */
+    onSuccess?: (data: T) => void;
+    /** Callback when the async operation fails */
+    onError?: (error: Error) => void;
+    /** Callback when the async operation finishes (success or error) */
+    onFinally?: () => void;
+    /** Reset error state before each execution */
+    resetOnExecute?: boolean;
+    /** Throw error instead of catching it */
+    throwOnError?: boolean;
+}
+export interface UseAsyncReturn<T, P extends any[]> {
+    /** The result data */
+    data: DeepReadonly<Ref<T | null>>;
+    /** Whether the async operation is in progress */
+    loading: DeepReadonly<Ref<boolean>>;
+    /** Error from the last failed operation */
+    error: DeepReadonly<Ref<Error | null>>;
+    /** Whether the operation has been executed at least once */
+    isFinished: DeepReadonly<Ref<boolean>>;
+    /** Whether the last execution was successful */
+    isSuccess: DeepReadonly<Ref<boolean>>;
+    /** Execute the async function */
+    execute: (...args: P) => Promise<T | null>;
+    /** Retry the last execution */
+    retry: () => Promise<T | null>;
+    /** Reset the state */
+    reset: () => void;
+    /** Abort the current execution */
+    abort: () => void;
+    /** Whether the operation is currently aborted */
+    isAborted: DeepReadonly<Ref<boolean>>;
+}
+export type AsyncFn<T, P extends any[]> = (...args: P) => Promise<T>;
+/**
+ * Clear the async cache
+ */
+export declare function clearAsyncCache(): void;
+/**
+ * Handle async operations with automatic loading/error state management.
+ *
+ * @example
+ * // Basic usage
+ * const { data, loading, error, execute } = useAsync(async () => {
+ *   const response = await fetch('/api/users')
+ *   return response.json()
+ * })
+ *
+ * // Execute on button click
+ * <button @click="execute" :disabled="loading">
+ *   {{ loading ? 'Loading...' : 'Fetch Users' }}
+ * </button>
+ *
+ * @example
+ * // With immediate execution
+ * const { data, loading } = useAsync(fetchUsers, {
+ *   immediate: true,
+ *   onSuccess: (users) => console.log('Loaded', users.length, 'users')
+ * })
+ *
+ * @example
+ * // With retry logic
+ * const { data, execute, retry, error } = useAsync(
+ *   async (id: string) => fetchUser(id),
+ *   {
+ *     retry: 3,
+ *     retryDelay: 1000,
+ *     onError: (err) => console.error('Failed after 3 retries:', err)
+ *   }
+ * )
+ *
+ * // Retry the last call
+ * <button v-if="error" @click="retry">Retry</button>
+ *
+ * @example
+ * // With abort controller
+ * const { data, execute, abort, isAborted } = useAsync(
+ *   async (signal: AbortSignal) => {
+ *     const response = await fetch('/api/data', { signal })
+ *     return response.json()
+ *   }
+ * )
+ *
+ * // Cancel ongoing request
+ * <button @click="abort">Cancel</button>
+ *
+ * @example
+ * // With caching
+ * const { data, execute } = useAsync(fetchData, { cache: true })
+ *
+ * // Second call returns cached result
+ * await execute('same-args')
+ * await execute('same-args') // Uses cache
+ */
+export declare function useAsync<T, P extends any[] = []>(asyncFn: AsyncFn<T, P>, options?: UseAsyncOptions<T>): UseAsyncReturn<T, P>;
+/**
+ * Create a lazy async composable that only executes when called.
+ * This is an alias for useAsync with immediate: false.
+ *
+ * @example
+ * const { data, execute, loading } = useLazyAsync(fetchUser)
+ *
+ * // Execute with parameters
+ * const user = await execute(userId)
+ */
+export declare function useLazyAsync<T, P extends any[] = []>(asyncFn: AsyncFn<T, P>, options?: Omit<UseAsyncOptions<T>, 'immediate'>): UseAsyncReturn<T, P>;
+/**
+ * Execute an async function with loading state management.
+ * Returns a promise that resolves to the result.
+ *
+ * @example
+ * const { loading, run } = useAsyncState()
+ *
+ * const result = await run(async () => {
+ *   const response = await fetch('/api/data')
+ *   return response.json()
+ * })
+ */
+export declare function useAsyncState(): {
+    loading: Readonly<Ref<boolean, boolean>>;
+    error: Readonly<Ref<Error | null, Error | null>>;
+    run: <T>(fn: () => Promise<T>) => Promise<T | null>;
+};
+export default useAsync;

package/dist/composables/useClickOutside.d.ts

@@ -0,0 +1,69 @@
+import { MaybeRef } from 'vue';
+export type MaybeElementRef = MaybeRef<HTMLElement | null | undefined>;
+export interface ClickOutsideOptions {
+    /** Elements to exclude from triggering the callback */
+    exclude?: MaybeElementRef[];
+    /** Whether to trigger callback on Escape key press */
+    triggerOnEscape?: boolean;
+    /** Whether the handler is active */
+    enabled?: MaybeRef<boolean>;
+    /** Event to listen for */
+    event?: 'click' | 'mousedown' | 'mouseup' | 'pointerdown' | 'pointerup';
+    /** Whether to use capture phase */
+    capture?: boolean;
+}
+export type ClickOutsideHandler = (event: MouseEvent | KeyboardEvent) => void;
+export interface UseClickOutsideReturn {
+    /** Stop listening for click outside events */
+    stop: () => void;
+    /** Start listening for click outside events */
+    start: () => void;
+    /** Whether the listener is currently active */
+    isActive: boolean;
+}
+/**
+ * Detect clicks outside an element
+ *
+ * @example
+ * // Basic usage
+ * const targetRef = ref<HTMLElement>()
+ *
+ * useClickOutside(targetRef, () => {
+ *   console.log('Clicked outside!')
+ * })
+ *
+ * @example
+ * // With options
+ * const dropdownRef = ref<HTMLElement>()
+ * const buttonRef = ref<HTMLElement>()
+ *
+ * useClickOutside(dropdownRef, () => {
+ *   closeDropdown()
+ * }, {
+ *   exclude: [buttonRef],
+ *   triggerOnEscape: true
+ * })
+ *
+ * @example
+ * // Multiple targets
+ * const refs = [ref<HTMLElement>(), ref<HTMLElement>()]
+ *
+ * useClickOutside(refs, () => {
+ *   closeAll()
+ * })
+ */
+export declare function useClickOutside(target: MaybeElementRef | MaybeElementRef[], handler: ClickOutsideHandler, options?: ClickOutsideOptions): UseClickOutsideReturn;
+/**
+ * Directive-style helper for click outside
+ *
+ * @example
+ * const { onClickOutside } = createClickOutsideHandler(() => {
+ *   isOpen.value = false
+ * })
+ *
+ * // Use in template: @clickoutside="onClickOutside"
+ */
+export declare function createClickOutsideHandler(handler: ClickOutsideHandler): {
+    onClickOutside: ClickOutsideHandler;
+};
+export default useClickOutside;

package/dist/composables/useClipboard.d.ts

@@ -0,0 +1,46 @@
+export interface CopyOptions {
+    /** Show toast notification on copy */
+    showToast?: boolean;
+    /** Custom success message for toast */
+    successMessage?: string;
+    /** Custom error message for toast */
+    errorMessage?: string;
+}
+export interface ClipboardState {
+    /** Whether the last copy was successful */
+    copied: boolean;
+    /** The last copied text */
+    text: string | null;
+    /** Any error from the last operation */
+    error: Error | null;
+}
+export interface UseClipboardReturn {
+    /** Copy text to clipboard */
+    copy: (text: string, options?: CopyOptions) => Promise<boolean>;
+    /** Copy text content from an element */
+    copyFromElement: (element: HTMLElement | null, options?: CopyOptions) => Promise<boolean>;
+    /** Whether the Clipboard API is supported */
+    isSupported: boolean;
+    /** Last copied state */
+    state: ClipboardState;
+    /** Reset the state */
+    reset: () => void;
+}
+/**
+ * Clipboard composable for copying text
+ *
+ * @example
+ * const clipboard = useClipboard()
+ *
+ * // Basic usage
+ * await clipboard.copy('Hello, World!')
+ *
+ * // With toast notification
+ * await clipboard.copy('Hello, World!', { showToast: true })
+ *
+ * // Copy from element
+ * const elementRef = ref<HTMLElement>()
+ * await clipboard.copyFromElement(elementRef.value)
+ */
+export declare function useClipboard(): UseClipboardReturn;
+export default useClipboard;