@getmicdrop/svelte-components 5.5.1 → 5.5.5

package/dist/patterns/data/DataList.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DataList.spec.d.ts.map

package/dist/patterns/data/DataList.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataList.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/data/DataList.spec.js"],"names":[],"mappings":""}

package/dist/patterns/data/DataList.spec.js

@@ -0,0 +1,158 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import DataList from './DataList.svelte';
+
+describe('DataList Component', () => {
+  test('renders a ul element', () => {
+    const { container } = render(DataList);
+    expect(container.querySelector('ul')).toBeInTheDocument();
+  });
+
+  test('has role="list"', () => {
+    const { container } = render(DataList);
+    const list = container.querySelector('ul');
+    expect(list).toHaveAttribute('role', 'list');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(DataList, { props: { class: 'custom-list' } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('custom-list');
+  });
+});
+
+describe('DataList Dividers', () => {
+  test('dividers are enabled by default', () => {
+    const { container } = render(DataList);
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('divide-y');
+    expect(list).toHaveClass('divide-gray-200');
+  });
+
+  test('dividers=true shows divide classes', () => {
+    const { container } = render(DataList, { props: { dividers: true } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('divide-y');
+    expect(list).toHaveClass('divide-gray-200');
+  });
+
+  test('dividers=false removes divide classes', () => {
+    const { container } = render(DataList, { props: { dividers: false } });
+    const list = container.querySelector('ul');
+    expect(list).not.toHaveClass('divide-y');
+    expect(list).not.toHaveClass('divide-gray-200');
+  });
+
+  test('dividers have dark mode class', () => {
+    const { container } = render(DataList, { props: { dividers: true } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('dark:divide-gray-700');
+  });
+});
+
+describe('DataList Gap', () => {
+  test('gap defaults to 0 (no space class)', () => {
+    const { container } = render(DataList);
+    const list = container.querySelector('ul');
+    // With gap 0, dividers are shown instead of spacing
+    expect(list).toHaveClass('divide-y');
+  });
+
+  test('gap > 0 adds space-y class', () => {
+    const { container } = render(DataList, { props: { gap: 4 } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('space-y-4');
+  });
+
+  test('gap > 0 removes dividers', () => {
+    const { container } = render(DataList, { props: { gap: 4, dividers: true } });
+    const list = container.querySelector('ul');
+    // When gap > 0, dividers are disabled
+    expect(list).not.toHaveClass('divide-y');
+  });
+
+  test('gap 2 applies space-y-2', () => {
+    const { container } = render(DataList, { props: { gap: 2 } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('space-y-2');
+  });
+
+  test('gap 6 applies space-y-6', () => {
+    const { container } = render(DataList, { props: { gap: 6 } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('space-y-6');
+  });
+});
+
+describe('DataList Items', () => {
+  test('renders without items', () => {
+    const { container } = render(DataList);
+    expect(container.querySelector('ul')).toBeInTheDocument();
+  });
+
+  test('accepts items array', () => {
+    const { container } = render(DataList, { props: { items: ['a', 'b', 'c'] } });
+    expect(container.querySelector('ul')).toBeInTheDocument();
+  });
+
+  test('empty items array renders children', () => {
+    const { container } = render(DataList, { props: { items: [] } });
+    expect(container.querySelector('ul')).toBeInTheDocument();
+  });
+});
+
+describe('DataList Li Elements', () => {
+  test('items render inside li elements', () => {
+    const { container } = render(DataList, { props: { items: ['item1', 'item2'] } });
+    const listItems = container.querySelectorAll('li');
+    expect(listItems.length).toBe(2);
+  });
+
+  test('li elements have py-3 padding', () => {
+    const { container } = render(DataList, { props: { items: ['item1'] } });
+    const listItem = container.querySelector('li');
+    expect(listItem).toHaveClass('py-3');
+  });
+
+  test('first li has first:pt-0', () => {
+    const { container } = render(DataList, { props: { items: ['item1'] } });
+    const listItem = container.querySelector('li');
+    expect(listItem).toHaveClass('first:pt-0');
+  });
+
+  test('last li has last:pb-0', () => {
+    const { container } = render(DataList, { props: { items: ['item1'] } });
+    const listItem = container.querySelector('li');
+    expect(listItem).toHaveClass('last:pb-0');
+  });
+});
+
+describe('DataList Accessibility', () => {
+  test('ul has role="list" for screen readers', () => {
+    const { container } = render(DataList);
+    const list = container.querySelector('ul');
+    expect(list).toHaveAttribute('role', 'list');
+  });
+});
+
+describe('DataList Combinations', () => {
+  test('dividers=true with gap=0 shows dividers', () => {
+    const { container } = render(DataList, { props: { dividers: true, gap: 0 } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('divide-y');
+  });
+
+  test('dividers=false with gap=0 shows no styling', () => {
+    const { container } = render(DataList, { props: { dividers: false, gap: 0 } });
+    const list = container.querySelector('ul');
+    expect(list).not.toHaveClass('divide-y');
+    expect(list).not.toHaveClass('space-y-0');
+  });
+
+  test('dividers=true with gap>0 uses gap, not dividers', () => {
+    const { container } = render(DataList, { props: { dividers: true, gap: 4 } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('space-y-4');
+    expect(list).not.toHaveClass('divide-y');
+  });
+});

package/dist/patterns/data/DataList.svelte

@@ -1,24 +1,24 @@
-<script>
-  let {
-    items = [],
-    dividers = true,
-    gap = 0,
-    class: className = '',
-    children,
-  } = $props();
-
-  let gapClass = $derived(gap > 0 ? `space-y-${gap}` : '');
-  let dividerClass = $derived(dividers && gap === 0 ? 'divide-y divide-gray-200 dark:divide-gray-700' : '');
-</script>
-
-<ul class="{dividerClass} {gapClass} {className}" role="list">
-  {#if items.length > 0}
-    {#each items as item, index}
-      <li class="py-3 first:pt-0 last:pb-0">
-        {@render children?.(item, index)}
-      </li>
-    {/each}
-  {:else}
-    {@render children?.()}
-  {/if}
-</ul>
+<script>
+  let {
+    items = [],
+    dividers = true,
+    gap = 0,
+    class: className = '',
+    children,
+  } = $props();
+
+  let gapClass = $derived(gap > 0 ? `space-y-${gap}` : '');
+  let dividerClass = $derived(dividers && gap === 0 ? 'divide-y divide-gray-200 dark:divide-gray-700' : '');
+</script>
+
+<ul class="{dividerClass} {gapClass} {className}" role="list">
+  {#if items.length > 0}
+    {#each items as item, index}
+      <li class="py-3 first:pt-0 last:pb-0">
+        {@render children?.(item, index)}
+      </li>
+    {/each}
+  {:else}
+    {@render children?.()}
+  {/if}
+</ul>

package/dist/patterns/data/DataTable.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DataTable.spec.d.ts.map

package/dist/patterns/data/DataTable.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/data/DataTable.spec.js"],"names":[],"mappings":""}

package/dist/patterns/data/DataTable.spec.js

@@ -0,0 +1,196 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/svelte';
+import DataTable from './DataTable.svelte';
+
+describe('DataTable Component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders a table element', () => {
+    const { container } = render(DataTable);
+    const table = container.querySelector('table');
+    expect(table).toBeInTheDocument();
+  });
+
+  it('renders with default classes', () => {
+    const { container } = render(DataTable);
+    const wrapper = container.querySelector('.overflow-x-auto');
+    expect(wrapper).toBeInTheDocument();
+    expect(wrapper).toHaveClass('rounded-lg', 'border', 'border-gray-200');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(DataTable, { props: { class: 'my-custom-class' } });
+    const wrapper = container.querySelector('.overflow-x-auto');
+    expect(wrapper).toHaveClass('my-custom-class');
+  });
+
+  describe('striped prop', () => {
+    it('does not apply striped classes by default', () => {
+      const { container } = render(DataTable);
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).not.toContain('[&>tr:nth-child(odd)]');
+    });
+
+    it('applies striped classes when striped is true', () => {
+      const { container } = render(DataTable, { props: { striped: true } });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-gray-50');
+    });
+  });
+
+  describe('hoverable prop', () => {
+    it('applies hover classes by default', () => {
+      const { container } = render(DataTable);
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('[&>tr]:hover:bg-gray-50');
+    });
+
+    it('does not apply hover classes when hoverable is false', () => {
+      const { container } = render(DataTable, { props: { hoverable: false } });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).not.toContain('[&>tr]:hover:bg-gray-50');
+    });
+  });
+
+  describe('bordered prop', () => {
+    it('does not apply bordered classes by default', () => {
+      const { container } = render(DataTable);
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).not.toContain('[&_td]:border-x');
+    });
+
+    it('applies bordered classes when bordered is true', () => {
+      const { container } = render(DataTable, { props: { bordered: true } });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('[&_td]:border-x');
+    });
+  });
+
+  describe('size prop', () => {
+    it('uses md size by default', () => {
+      const { container } = render(DataTable);
+      const table = container.querySelector('table');
+      expect(table).toBeInTheDocument();
+      // Size is passed to snippets, so we verify the table renders
+    });
+
+    it('accepts sm size', () => {
+      const { container } = render(DataTable, { props: { size: 'sm' } });
+      const table = container.querySelector('table');
+      expect(table).toBeInTheDocument();
+    });
+
+    it('accepts lg size', () => {
+      const { container } = render(DataTable, { props: { size: 'lg' } });
+      const table = container.querySelector('table');
+      expect(table).toBeInTheDocument();
+    });
+
+    it('falls back to md for invalid size', () => {
+      const { container } = render(DataTable, { props: { size: 'invalid' } });
+      const table = container.querySelector('table');
+      expect(table).toBeInTheDocument();
+    });
+  });
+
+  describe('table structure', () => {
+    it('renders tbody element', () => {
+      const { container } = render(DataTable);
+      const tbody = container.querySelector('tbody');
+      expect(tbody).toBeInTheDocument();
+    });
+
+    it('tbody has divide styles', () => {
+      const { container } = render(DataTable);
+      const tbody = container.querySelector('tbody');
+      expect(tbody).toHaveClass('divide-y', 'divide-gray-200');
+    });
+
+    it('table has full width', () => {
+      const { container } = render(DataTable);
+      const table = container.querySelector('table');
+      expect(table).toHaveClass('w-full');
+    });
+
+    it('table has left text alignment', () => {
+      const { container } = render(DataTable);
+      const table = container.querySelector('table');
+      expect(table).toHaveClass('text-left');
+    });
+  });
+
+  describe('dark mode support', () => {
+    it('includes dark mode border classes', () => {
+      const { container } = render(DataTable);
+      const wrapper = container.querySelector('.overflow-x-auto');
+      expect(wrapper.className).toContain('dark:border-gray-700');
+    });
+
+    it('includes dark mode divide classes on tbody', () => {
+      const { container } = render(DataTable);
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('dark:divide-gray-700');
+    });
+
+    it('includes dark mode striped classes when enabled', () => {
+      const { container } = render(DataTable, { props: { striped: true } });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('dark:[&>tr:nth-child(odd)]:bg-gray-800');
+    });
+
+    it('includes dark mode hover classes when enabled', () => {
+      const { container } = render(DataTable, { props: { hoverable: true } });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('dark:[&>tr]:hover:bg-gray-700');
+    });
+
+    it('includes dark mode bordered classes when enabled', () => {
+      const { container } = render(DataTable, { props: { bordered: true } });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('dark:[&_td]:border-gray-700');
+    });
+  });
+
+  describe('combination of props', () => {
+    it('can combine striped and bordered', () => {
+      const { container } = render(DataTable, { props: { striped: true, bordered: true } });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-gray-50');
+      expect(tbody.className).toContain('[&_td]:border-x');
+    });
+
+    it('can combine all visual props', () => {
+      const { container } = render(DataTable, {
+        props: {
+          striped: true,
+          bordered: true,
+          hoverable: true,
+          size: 'lg',
+          class: 'test-class'
+        }
+      });
+      const wrapper = container.querySelector('.overflow-x-auto');
+      expect(wrapper).toHaveClass('test-class');
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-gray-50');
+      expect(tbody.className).toContain('[&_td]:border-x');
+      expect(tbody.className).toContain('[&>tr]:hover:bg-gray-50');
+    });
+
+    it('can disable all visual effects', () => {
+      const { container } = render(DataTable, {
+        props: {
+          striped: false,
+          bordered: false,
+          hoverable: false
+        }
+      });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).not.toContain('[&>tr:nth-child(odd)]');
+      expect(tbody.className).not.toContain('[&_td]:border-x');
+      expect(tbody.className).not.toContain('[&>tr]:hover');
+    });
+  });
+});

package/dist/patterns/data/DataTable.svelte

@@ -1,39 +1,39 @@
-<script>
-  import { typography } from '../../tokens/typography';
-
-  let {
-    striped = false,
-    hoverable = true,
-    bordered = false,
-    size = 'md',
-    class: className = '',
-    header,
-    children,
-  } = $props();
-
-  const sizeClasses = {
-    sm: 'px-3 py-2 text-xs',
-    md: 'px-4 py-3 text-sm',
-    lg: 'px-6 py-4 text-base'
-  };
-
-  let cellSize = $derived(sizeClasses[size] || sizeClasses.md);
-</script>
-
-<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700 {className}">
-  <table class={`w-full text-left ${typography.textMuted}`}>
-    {#if header}
-      <thead class={`text-xs uppercase bg-gray-50 dark:bg-gray-700 ${typography.textMuted}`}>
-        {@render header(cellSize)}
-      </thead>
-    {/if}
-
-    <tbody class="divide-y divide-gray-200 dark:divide-gray-700 {striped ? '[&>tr:nth-child(odd)]:bg-gray-50 dark:[&>tr:nth-child(odd)]:bg-gray-800' : ''} {hoverable ? '[&>tr]:hover:bg-gray-50 dark:[&>tr]:hover:bg-gray-700' : ''} {bordered ? '[&_td]:border-x [&_td]:border-gray-200 dark:[&_td]:border-gray-700' : ''}">
-      {@render children?.(cellSize)}
-    </tbody>
-  </table>
-</div>
-
+<script>
+  import { typography } from '../../tokens/typography';
+
+  let {
+    striped = false,
+    hoverable = true,
+    bordered = false,
+    size = 'md',
+    class: className = '',
+    header,
+    children,
+  } = $props();
+
+  const sizeClasses = {
+    sm: 'px-3 py-2 text-xs',
+    md: 'px-4 py-3 text-sm',
+    lg: 'px-6 py-4 text-base'
+  };
+
+  let cellSize = $derived(sizeClasses[size] || sizeClasses.md);
+</script>
+
+<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700 {className}">
+  <table class={`w-full text-left ${typography.textMuted}`}>
+    {#if header}
+      <thead class={`text-xs uppercase bg-gray-50 dark:bg-gray-700 ${typography.textMuted}`}>
+        {@render header(cellSize)}
+      </thead>
+    {/if}
+
+    <tbody class="divide-y divide-gray-200 dark:divide-gray-700 {striped ? '[&>tr:nth-child(odd)]:bg-gray-50 dark:[&>tr:nth-child(odd)]:bg-gray-800' : ''} {hoverable ? '[&>tr]:hover:bg-gray-50 dark:[&>tr]:hover:bg-gray-700' : ''} {bordered ? '[&_td]:border-x [&_td]:border-gray-200 dark:[&_td]:border-gray-700' : ''}">
+      {@render children?.(cellSize)}
+    </tbody>
+  </table>
+</div>
+
 <style>
   :global(table th),
   :global(table td) {