diff --git a/packages/core/src/lib/context-menu/context-menu-item.svelte b/packages/core/src/lib/context-menu/context-menu-item.svelte index 320714af4..4867ca057 100644 --- a/packages/core/src/lib/context-menu/context-menu-item.svelte +++ b/packages/core/src/lib/context-menu/context-menu-item.svelte @@ -1,3 +1,11 @@ + + + + + + + + + + +
stuffstuffsstufffss
diff --git a/packages/core/src/lib/table/table.spec.ts b/packages/core/src/lib/table/table.spec.ts new file mode 100644 index 000000000..623f8ea00 --- /dev/null +++ b/packages/core/src/lib/table/table.spec.ts @@ -0,0 +1,35 @@ +import { describe, it, expect } from 'vitest'; +import { render, screen } from '@testing-library/svelte'; +import Table from './table.svelte'; +import TableWith3Cols from './table.spec.svelte'; + +describe('Table', () => { + it('Renders default variant', () => { + render(Table); + expect(screen.getByRole('table')).toBeVisible(); + expect(screen.getByRole('table')).toHaveClass('table-auto'); + }); + + it('Renders auto variant', () => { + render(Table, { variant: 'auto' }); + expect(screen.getByRole('table')).toBeVisible(); + expect(screen.getByRole('table')).toHaveClass('table-auto'); + }); + + it('Renders fixed variant', () => { + render(Table, { variant: 'fixed' }); + expect(screen.getByRole('table')).toBeVisible(); + expect(screen.getByRole('table')).toHaveClass('table-fixed'); + }); + + it('Renders columns with widths set by cols attribute', () => { + const cols = ['20%', '30%', '50%']; + render(TableWith3Cols, { cols }); + + for (const [i, width] of cols.entries()) { + const col = screen.getByTestId(`col-${i}`); + expect(col).toBeVisible(); + expect(col).toHaveStyle(`width:${width}`); + } + }); +}); diff --git a/packages/core/src/lib/table/table.svelte b/packages/core/src/lib/table/table.svelte new file mode 100644 index 000000000..6d3e8bfdf --- /dev/null +++ b/packages/core/src/lib/table/table.svelte @@ -0,0 +1,63 @@ + + + + + + + + + + {#each cols as col, index} + + {/each} + + +
+ + diff --git a/packages/core/src/lib/table/tbody.svelte b/packages/core/src/lib/table/tbody.svelte new file mode 100644 index 000000000..98fec5d31 --- /dev/null +++ b/packages/core/src/lib/table/tbody.svelte @@ -0,0 +1,30 @@ + + + + + + + + + + diff --git a/packages/core/src/lib/table/td.svelte b/packages/core/src/lib/table/td.svelte new file mode 100644 index 000000000..d04c5d7bc --- /dev/null +++ b/packages/core/src/lib/table/td.svelte @@ -0,0 +1,36 @@ + + + + + + + + + + diff --git a/packages/core/src/lib/table/th.svelte b/packages/core/src/lib/table/th.svelte new file mode 100644 index 000000000..b6359e815 --- /dev/null +++ b/packages/core/src/lib/table/th.svelte @@ -0,0 +1,35 @@ + + + + + + + + + + diff --git a/packages/core/src/lib/table/thead.svelte b/packages/core/src/lib/table/thead.svelte new file mode 100644 index 000000000..2228b196f --- /dev/null +++ b/packages/core/src/lib/table/thead.svelte @@ -0,0 +1,34 @@ + + + + + + + + + + diff --git a/packages/core/src/lib/table/tr.spec.svelte b/packages/core/src/lib/table/tr.spec.svelte new file mode 100644 index 000000000..1f3a94c79 --- /dev/null +++ b/packages/core/src/lib/table/tr.spec.svelte @@ -0,0 +1,19 @@ + + + + + data + diff --git a/packages/core/src/lib/table/tr.spec.ts b/packages/core/src/lib/table/tr.spec.ts new file mode 100644 index 000000000..20c5c62d5 --- /dev/null +++ b/packages/core/src/lib/table/tr.spec.ts @@ -0,0 +1,39 @@ +import { describe, it, expect } from 'vitest'; +import { render, screen } from '@testing-library/svelte'; +import TR from './tr.svelte'; +import TRWithTD from './tr.spec.svelte'; + +describe('TR', () => { + it('Renders default variant', () => { + render(TR); + expect(screen.getByRole('row')).toBeVisible(); + expect(screen.getByRole('row')).toHaveClass('border-b'); + }); + + it('Renders success variant', () => { + render(TR, { variant: 'success' }); + expect(screen.getByRole('row')).toBeVisible(); + expect(screen.getByRole('row')).toHaveClass( + 'text-green-700 bg-green-50 border-green-100' + ); + }); + + it('Renders disabled variant', () => { + render(TR, { variant: 'disabled' }); + expect(screen.getByRole('row')).toBeVisible(); + expect(screen.getByRole('row')).toHaveClass('text-gray-500 bg-gray-50'); + }); + + it('Renders error variant', () => { + render(TR, { variant: 'error' }); + expect(screen.getByRole('row')).toBeVisible(); + expect(screen.getByRole('row')).toHaveClass( + 'text-red-500 bg-red-50 border-red-100' + ); + }); + + it('Renders table data', () => { + render(TRWithTD); + expect(screen.getByText('data')); + }); +}); diff --git a/packages/core/src/lib/table/tr.svelte b/packages/core/src/lib/table/tr.svelte new file mode 100644 index 000000000..26841d43c --- /dev/null +++ b/packages/core/src/lib/table/tr.svelte @@ -0,0 +1,44 @@ + + + + + + + + + + diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte index 882ca09ea..9cd93a11d 100644 --- a/packages/core/src/routes/+page.svelte +++ b/packages/core/src/routes/+page.svelte @@ -14,6 +14,12 @@ import Switch from '$lib/switch.svelte'; import Radio from '$lib/radio.svelte'; import Tooltip from '$lib/tooltip.svelte'; import TextInput from '$lib/input/text-input.svelte'; +import Table from '$lib/table/table.svelte'; +import TBody from '$lib/table/tbody.svelte'; +import TD from '$lib/table/td.svelte'; +import TH from '$lib/table/th.svelte'; +import THead from '$lib/table/thead.svelte'; +import TR from '$lib/table/tr.svelte'; let buttonClickedTimes = 0; @@ -413,4 +419,30 @@ let buttonClickedTimes = 0; variant="danger" /> + + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderAnother header
stuffstuffs
stuffstuffs
stuffstuffs
stuffstuffs
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json index 0ea796bf5..4cbd0d9b9 100644 --- a/packages/core/tsconfig.json +++ b/packages/core/tsconfig.json @@ -5,6 +5,7 @@ ], "compilerOptions": { "types": ["svelte", "vite/client", "vitest"], - "noEmit": true + "noEmit": true, + "downlevelIteration": true } }