sveltacular 0.0.76 → 1.0.0

package/dist/test-utils/mock-helpers.js

@@ -0,0 +1,165 @@
+/**
+ * Mock helpers for testing
+ */
+import { vi, beforeEach, afterEach } from 'vitest';
+/**
+ * Mock a function with optional implementation
+ */
+export function mockFunction(implementation) {
+    return implementation ? vi.fn(implementation) : vi.fn();
+}
+/**
+ * Mock console methods to suppress output during tests
+ */
+export function mockConsole() {
+    const originalConsole = { ...console };
+    beforeEach(() => {
+        console.log = vi.fn();
+        console.warn = vi.fn();
+        console.error = vi.fn();
+        console.info = vi.fn();
+    });
+    afterEach(() => {
+        Object.assign(console, originalConsole);
+    });
+}
+/**
+ * Mock fetch API
+ */
+export function mockFetch(response, options) {
+    const mockResponse = {
+        ok: options?.ok ?? true,
+        status: options?.status ?? 200,
+        json: async () => response,
+        text: async () => JSON.stringify(response),
+        blob: async () => new Blob([JSON.stringify(response)]),
+        arrayBuffer: async () => new ArrayBuffer(0)
+    };
+    global.fetch = vi.fn().mockResolvedValue(mockResponse);
+    return global.fetch;
+}
+/**
+ * Mock setTimeout/setInterval for testing
+ */
+export function mockTimers() {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+}
+/**
+ * Mock Date.now() for consistent timestamps
+ */
+export function mockDateNow(timestamp = 1609459200000) {
+    const originalDateNow = Date.now;
+    beforeEach(() => {
+        Date.now = vi.fn(() => timestamp);
+    });
+    afterEach(() => {
+        Date.now = originalDateNow;
+    });
+}
+/**
+ * Mock window.location
+ */
+export function mockLocation(url = 'http://localhost:3000') {
+    delete window.location;
+    window.location = new URL(url);
+}
+/**
+ * Mock clipboard API
+ */
+export function mockClipboard() {
+    const mockClipboard = {
+        writeText: vi.fn().mockResolvedValue(undefined),
+        readText: vi.fn().mockResolvedValue(''),
+        write: vi.fn().mockResolvedValue(undefined),
+        read: vi.fn().mockResolvedValue([])
+    };
+    Object.defineProperty(navigator, 'clipboard', {
+        value: mockClipboard,
+        writable: true
+    });
+    return mockClipboard;
+}
+/**
+ * Mock getBoundingClientRect for positioning tests
+ */
+export function mockGetBoundingClientRect(element, rect) {
+    const defaultRect = {
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 50,
+        top: 0,
+        right: 100,
+        bottom: 50,
+        left: 0,
+        toJSON: () => ({})
+    };
+    element.getBoundingClientRect = vi.fn(() => ({ ...defaultRect, ...rect }));
+}
+/**
+ * Mock viewport size
+ */
+export function mockViewport(width = 1024, height = 768) {
+    Object.defineProperty(window, 'innerWidth', {
+        writable: true,
+        configurable: true,
+        value: width
+    });
+    Object.defineProperty(window, 'innerHeight', {
+        writable: true,
+        configurable: true,
+        value: height
+    });
+    // Trigger resize event
+    window.dispatchEvent(new Event('resize'));
+}
+/**
+ * Mock media query
+ */
+export function mockMediaQuery(query, matches = true) {
+    const mockMatchMedia = vi.fn().mockImplementation((q) => ({
+        matches: q === query ? matches : false,
+        media: q,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn()
+    }));
+    Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: mockMatchMedia
+    });
+    return mockMatchMedia;
+}
+/**
+ * Mock prefers-reduced-motion
+ */
+export function mockPrefersReducedMotion(enabled = true) {
+    mockMediaQuery('(prefers-reduced-motion: reduce)', enabled);
+}
+/**
+ * Mock prefers-color-scheme
+ */
+export function mockPrefersColorScheme(scheme = 'light') {
+    mockMediaQuery(`(prefers-color-scheme: ${scheme})`, true);
+}
+/**
+ * Create a mock file for file input testing
+ */
+export function createMockFile(name = 'test.txt', content = 'test content', type = 'text/plain') {
+    const blob = new Blob([content], { type });
+    return new File([blob], name, { type });
+}
+/**
+ * Create multiple mock files
+ */
+export function createMockFiles(count = 3) {
+    return Array.from({ length: count }, (_, i) => createMockFile(`file${i + 1}.txt`, `Content ${i + 1}`));
+}

package/dist/test-utils/render-helpers.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Render helpers for testing Svelte components
+ */
+import { type RenderResult } from '@testing-library/svelte';
+import type { ComponentProps, Component } from 'svelte';
+/**
+ * Enhanced render function with common test setup
+ */
+export declare function render<T extends Component>(component: T, options?: ComponentProps<T> & {
+    props?: ComponentProps<T>;
+}): RenderResult<T>;
+/**
+ * Wait for Svelte to update the DOM
+ */
+export declare function waitForSvelte(): Promise<void>;
+/**
+ * Wait for multiple ticks (useful for animations or complex updates)
+ */
+export declare function waitForTicks(count?: number): Promise<void>;
+/**
+ * Wait for an element to appear in the DOM
+ */
+export declare function waitForElement(selector: string, timeout?: number): Promise<Element>;
+/**
+ * Wait for an element to disappear from the DOM
+ */
+export declare function waitForElementToBeRemoved(selector: string, timeout?: number): Promise<void>;
+/**
+ * Simulate keyboard event
+ */
+export declare function createKeyboardEvent(type: 'keydown' | 'keyup' | 'keypress', key: string, options?: KeyboardEventInit): KeyboardEvent;
+/**
+ * Simulate mouse event
+ */
+export declare function createMouseEvent(type: string, options?: MouseEventInit): MouseEvent;
+/**
+ * Simulate focus event
+ */
+export declare function createFocusEvent(type: 'focus' | 'blur' | 'focusin' | 'focusout', options?: FocusEventInit): FocusEvent;
+/**
+ * Get computed styles for an element
+ */
+export declare function getComputedStyle(element: Element): CSSStyleDeclaration;
+/**
+ * Check if element has class
+ */
+export declare function hasClass(element: Element, className: string): boolean;
+/**
+ * Check if element is visible
+ */
+export declare function isVisible(element: HTMLElement): boolean;
+/**
+ * Check if element is disabled
+ */
+export declare function isDisabled(element: HTMLElement): boolean;

package/dist/test-utils/render-helpers.js

@@ -0,0 +1,114 @@
+/**
+ * Render helpers for testing Svelte components
+ */
+import { render as testingLibraryRender } from '@testing-library/svelte';
+import { tick } from 'svelte';
+/**
+ * Enhanced render function with common test setup
+ */
+export function render(component, options) {
+    const { props, ...rest } = options || {};
+    // @ts-expect-error - Testing library types are complex
+    return testingLibraryRender(component, { props: props || rest });
+}
+/**
+ * Wait for Svelte to update the DOM
+ */
+export async function waitForSvelte() {
+    await tick();
+}
+/**
+ * Wait for multiple ticks (useful for animations or complex updates)
+ */
+export async function waitForTicks(count = 2) {
+    for (let i = 0; i < count; i++) {
+        await tick();
+    }
+}
+/**
+ * Wait for an element to appear in the DOM
+ */
+export async function waitForElement(selector, timeout = 1000) {
+    const startTime = Date.now();
+    while (Date.now() - startTime < timeout) {
+        const element = document.querySelector(selector);
+        if (element) {
+            return element;
+        }
+        await new Promise(resolve => setTimeout(resolve, 50));
+    }
+    throw new Error(`Element "${selector}" not found within ${timeout}ms`);
+}
+/**
+ * Wait for an element to disappear from the DOM
+ */
+export async function waitForElementToBeRemoved(selector, timeout = 1000) {
+    const startTime = Date.now();
+    while (Date.now() - startTime < timeout) {
+        const element = document.querySelector(selector);
+        if (!element) {
+            return;
+        }
+        await new Promise(resolve => setTimeout(resolve, 50));
+    }
+    throw new Error(`Element "${selector}" still present after ${timeout}ms`);
+}
+/**
+ * Simulate keyboard event
+ */
+export function createKeyboardEvent(type, key, options) {
+    return new KeyboardEvent(type, {
+        key,
+        bubbles: true,
+        cancelable: true,
+        ...options
+    });
+}
+/**
+ * Simulate mouse event
+ */
+export function createMouseEvent(type, options) {
+    return new MouseEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        ...options
+    });
+}
+/**
+ * Simulate focus event
+ */
+export function createFocusEvent(type, options) {
+    return new FocusEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        ...options
+    });
+}
+/**
+ * Get computed styles for an element
+ */
+export function getComputedStyle(element) {
+    return window.getComputedStyle(element);
+}
+/**
+ * Check if element has class
+ */
+export function hasClass(element, className) {
+    return element.classList.contains(className);
+}
+/**
+ * Check if element is visible
+ */
+export function isVisible(element) {
+    const style = window.getComputedStyle(element);
+    return (style.display !== 'none' &&
+        style.visibility !== 'hidden' &&
+        style.opacity !== '0');
+}
+/**
+ * Check if element is disabled
+ */
+export function isDisabled(element) {
+    return (element.hasAttribute('disabled') ||
+        element.getAttribute('aria-disabled') === 'true');
+}

package/dist/test-utils/setup.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Vitest setup file
+ * Runs before all test files
+ */
+import '@testing-library/jest-dom';

package/dist/test-utils/setup.js

@@ -0,0 +1,91 @@
+/**
+ * Vitest setup file
+ * Runs before all test files
+ */
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(), // deprecated
+        removeListener: vi.fn(), // deprecated
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn()
+    }))
+});
+// Mock IntersectionObserver
+global.IntersectionObserver = class IntersectionObserver {
+    constructor() { }
+    disconnect() { }
+    observe() { }
+    takeRecords() {
+        return [];
+    }
+    unobserve() { }
+};
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+    constructor() { }
+    disconnect() { }
+    observe() { }
+    unobserve() { }
+};
+// Mock requestAnimationFrame
+global.requestAnimationFrame = (cb) => {
+    return setTimeout(cb, 0);
+};
+global.cancelAnimationFrame = (id) => {
+    clearTimeout(id);
+};
+// Mock scrollTo
+window.scrollTo = vi.fn();
+// Mock localStorage
+const localStorageMock = (() => {
+    let store = {};
+    return {
+        getItem: (key) => store[key] || null,
+        setItem: (key, value) => {
+            store[key] = value.toString();
+        },
+        removeItem: (key) => {
+            delete store[key];
+        },
+        clear: () => {
+            store = {};
+        }
+    };
+})();
+Object.defineProperty(window, 'localStorage', {
+    value: localStorageMock
+});
+// Mock sessionStorage
+const sessionStorageMock = (() => {
+    let store = {};
+    return {
+        getItem: (key) => store[key] || null,
+        setItem: (key, value) => {
+            store[key] = value.toString();
+        },
+        removeItem: (key) => {
+            delete store[key];
+        },
+        clear: () => {
+            store = {};
+        }
+    };
+})();
+Object.defineProperty(window, 'sessionStorage', {
+    value: sessionStorageMock
+});
+// Reset mocks after each test
+import { afterEach } from 'vitest';
+afterEach(() => {
+    vi.clearAllMocks();
+    localStorageMock.clear();
+    sessionStorageMock.clear();
+});

package/dist/test-utils/test-data.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Test data fixtures for component testing
+ */
+import type { MenuOption } from '../types/form.js';
+type MenuItem = MenuOption;
+type ListItem = {
+    id: string;
+    label: string;
+    value: string;
+};
+/**
+ * Sample menu items for testing
+ */
+export declare const mockMenuItems: MenuItem[];
+/**
+ * Sample list items for testing
+ */
+export declare const mockListItems: ListItem[];
+/**
+ * Large dataset for virtual scrolling tests
+ */
+export declare function generateLargeDataset(count?: number): ListItem[];
+/**
+ * Sample form data for testing
+ */
+export declare const mockFormData: {
+    text: string;
+    email: string;
+    number: number;
+    date: string;
+    checkbox: boolean;
+    radio: string;
+    select: string;
+    textarea: string;
+};
+/**
+ * Sample user data for testing
+ */
+export declare const mockUsers: {
+    id: number;
+    name: string;
+    email: string;
+    role: string;
+}[];
+/**
+ * Sample table data for testing
+ */
+export declare const mockTableData: {
+    columns: {
+        id: string;
+        label: string;
+        sortable: boolean;
+    }[];
+    rows: {
+        id: number;
+        name: string;
+        email: string;
+        role: string;
+    }[];
+};
+/**
+ * Sample navigation items for testing
+ */
+export declare const mockNavItems: {
+    id: string;
+    label: string;
+    href: string;
+    icon: string;
+}[];
+/**
+ * Sample breadcrumb items for testing
+ */
+export declare const mockBreadcrumbs: ({
+    label: string;
+    href: string;
+} | {
+    label: string;
+    href?: undefined;
+})[];
+/**
+ * Sample tab items for testing
+ */
+export declare const mockTabs: ({
+    id: string;
+    label: string;
+    content: string;
+    disabled?: undefined;
+} | {
+    id: string;
+    label: string;
+    content: string;
+    disabled: boolean;
+})[];
+/**
+ * Sample color options for testing
+ */
+export declare const mockColors: {
+    id: string;
+    label: string;
+    value: string;
+}[];
+export {};

package/dist/test-utils/test-data.js

@@ -0,0 +1,99 @@
+/**
+ * Test data fixtures for component testing
+ */
+/**
+ * Sample menu items for testing
+ */
+export const mockMenuItems = [
+    { id: '1', label: 'Option 1', name: 'Option 1', value: 'option1' },
+    { id: '2', label: 'Option 2', name: 'Option 2', value: 'option2' },
+    { id: '3', label: 'Option 3', name: 'Option 3', value: 'option3', disabled: true },
+    { id: '4', label: 'Option 4', name: 'Option 4', value: 'option4' }
+];
+/**
+ * Sample list items for testing
+ */
+export const mockListItems = [
+    { id: '1', label: 'Item 1', value: 'item1' },
+    { id: '2', label: 'Item 2', value: 'item2' },
+    { id: '3', label: 'Item 3', value: 'item3' },
+    { id: '4', label: 'Item 4', value: 'item4' },
+    { id: '5', label: 'Item 5', value: 'item5' }
+];
+/**
+ * Large dataset for virtual scrolling tests
+ */
+export function generateLargeDataset(count = 1000) {
+    return Array.from({ length: count }, (_, i) => ({
+        id: `item-${i}`,
+        label: `Item ${i + 1}`,
+        value: `item${i + 1}`
+    }));
+}
+/**
+ * Sample form data for testing
+ */
+export const mockFormData = {
+    text: 'Sample text',
+    email: 'test@example.com',
+    number: 42,
+    date: '2024-01-01',
+    checkbox: true,
+    radio: 'option1',
+    select: 'option2',
+    textarea: 'Multi-line\ntext content'
+};
+/**
+ * Sample user data for testing
+ */
+export const mockUsers = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'admin' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'user' },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'user' }
+];
+/**
+ * Sample table data for testing
+ */
+export const mockTableData = {
+    columns: [
+        { id: 'id', label: 'ID', sortable: true },
+        { id: 'name', label: 'Name', sortable: true },
+        { id: 'email', label: 'Email', sortable: true },
+        { id: 'role', label: 'Role', sortable: false }
+    ],
+    rows: mockUsers
+};
+/**
+ * Sample navigation items for testing
+ */
+export const mockNavItems = [
+    { id: 'home', label: 'Home', href: '/', icon: 'home' },
+    { id: 'about', label: 'About', href: '/about', icon: 'info' },
+    { id: 'contact', label: 'Contact', href: '/contact', icon: 'envelope' }
+];
+/**
+ * Sample breadcrumb items for testing
+ */
+export const mockBreadcrumbs = [
+    { label: 'Home', href: '/' },
+    { label: 'Products', href: '/products' },
+    { label: 'Electronics', href: '/products/electronics' },
+    { label: 'Laptops' }
+];
+/**
+ * Sample tab items for testing
+ */
+export const mockTabs = [
+    { id: 'tab1', label: 'Tab 1', content: 'Content 1' },
+    { id: 'tab2', label: 'Tab 2', content: 'Content 2' },
+    { id: 'tab3', label: 'Tab 3', content: 'Content 3', disabled: true }
+];
+/**
+ * Sample color options for testing
+ */
+export const mockColors = [
+    { id: 'red', label: 'Red', value: '#ff0000' },
+    { id: 'green', label: 'Green', value: '#00ff00' },
+    { id: 'blue', label: 'Blue', value: '#0000ff' },
+    { id: 'yellow', label: 'Yellow', value: '#ffff00' }
+];

package/dist/timeline/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Timeline } from './timeline.svelte';
+export { default as TimelineItem } from './timeline-item.svelte';

package/dist/timeline/index.js

@@ -0,0 +1,2 @@
+export { default as Timeline } from './timeline.svelte';
+export { default as TimelineItem } from './timeline-item.svelte';

package/dist/timeline/timeline-item.svelte

@@ -1,20 +1,37 @@
-<script>import DateTime from "../generic/date/date-time.svelte";
-export let dateType = "datetime";
-export let dateStyle = "medium";
-export let iconSize = "md";
-export let date = void 0;
-export let title = void 0;
-export let summary = void 0;
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import DateTime from '../generic/date/date-time.svelte';
+	import type { DateTimeVariant, DateType } from '../types/date.js';
+
+	let {
+		dateType = 'datetime' as DateType,
+		dateStyle = 'medium' as DateTimeVariant,
+		iconSize = 'md' as 'sm' | 'md' | 'lg',
+		date = undefined,
+		title = undefined,
+		summary = undefined,
+		icon = undefined
+	}: {
+		dateType?: DateType;
+		dateStyle?: DateTimeVariant;
+		iconSize?: 'sm' | 'md' | 'lg';
+		date?: string | number | Date;
+		title?: string;
+		summary?: string;
+		icon?: Snippet;
+	} = $props();
 </script>
 
 <li class="icon-{iconSize}">
 	<div class="timeline-icon">
-		<slot name="icon" />
+		{#if icon}
+			{@render icon?.()}
+		{/if}
 	</div>
 	<div class="content">
 		{#if date}
 			<div class="date">
-				<DateTime value={date} type={dateType} style={dateStyle} />
+				<DateTime value={date} type={dateType} variant={dateStyle} />
 			</div>
 		{/if}
 		{#if title}