diff --git a/packages/core/package.json b/packages/core/package.json index 436f28362..1a2c3c53f 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@viamrobotics/prime-core", - "version": "0.0.12", + "version": "0.0.13", "publishConfig": { "access": "public" }, diff --git a/packages/core/src/lib/collapse.spec.svelte b/packages/core/src/lib/collapse.spec.svelte index a0e498df3..856a1753d 100644 --- a/packages/core/src/lib/collapse.spec.svelte +++ b/packages/core/src/lib/collapse.spec.svelte @@ -10,38 +10,65 @@
- -
One is the loneliest number.
+ +
+ One is the loneliest number. +
- - -
Two can be as bad as one, its the loneliest number since the number one.
+ + +
+ Two can be as bad as one, its the loneliest number since the number one. +
- + + +
- - -
Three is company.
- + Three is company. +
+ - + + +
- - -
I am number 4.
- -
\ No newline at end of file + I am number 4. +
+ + diff --git a/packages/core/src/lib/collapse.svelte b/packages/core/src/lib/collapse.svelte index fb9c7c983..2be6e0fdd 100644 --- a/packages/core/src/lib/collapse.svelte +++ b/packages/core/src/lib/collapse.svelte @@ -31,8 +31,8 @@ export let open = false; type Events = { /** Fires when the collapse is toggled */ - toggle: boolean -} + toggle: boolean; +}; const dispatch = createEventDispatcher(); @@ -47,11 +47,11 @@ const handleClick = () => { role="button" aria-label="Toggle Content" tabindex="0" - class="w-full py-2 px-4 flex items-center justify-between text-default cursor-pointer border border-light bg-white" + class="flex w-full cursor-pointer items-center justify-between border border-light bg-white px-4 py-2 text-default" on:click={handleClick} on:keyup|preventDefault={handleClick} > -
+
{#if title}

{title}

{/if} @@ -59,24 +59,21 @@ const handleClick = () => {
-
+
- -
+ })} + > + +
{#if open} - + {/if} 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 a9b683e6d..1c9fb3023 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 @@ +
diff --git a/packages/core/src/lib/input/numeric-input.svelte b/packages/core/src/lib/input/numeric-input.svelte index b2b662142..e9862ea35 100644 --- a/packages/core/src/lib/input/numeric-input.svelte +++ b/packages/core/src/lib/input/numeric-input.svelte @@ -33,7 +33,6 @@ export let input: HTMLInputElement | undefined = undefined; $: isNumber = type === 'number'; $: pattern = isNumber ? '^([-+,0-9.]+)' : '[0-9]+'; - diff --git a/packages/core/src/lib/input/slider-input.svelte b/packages/core/src/lib/input/slider-input.svelte index 5943e3908..6b986cf1f 100644 --- a/packages/core/src/lib/input/slider-input.svelte +++ b/packages/core/src/lib/input/slider-input.svelte @@ -146,9 +146,9 @@ const handlePointerDown = async (event: PointerEvent) => { {type} {step} {...$$restProps} - style='padding-left: 0.75rem;' + style="padding-left: 0.75rem;" bind:value - bind:input={input} + bind:input on:input on:keydown /> @@ -159,7 +159,7 @@ const handlePointerDown = async (event: PointerEvent) => { {#if isDragging}
+ + +``` +--> + + + + + + + + + diff --git a/packages/core/src/lib/table/table-cell.svelte b/packages/core/src/lib/table/table-cell.svelte new file mode 100644 index 000000000..a2c7b04b3 --- /dev/null +++ b/packages/core/src/lib/table/table-cell.svelte @@ -0,0 +1,37 @@ + + + + + + + + + + diff --git a/packages/core/src/lib/table/table-header-cell.svelte b/packages/core/src/lib/table/table-header-cell.svelte new file mode 100644 index 000000000..b4556e549 --- /dev/null +++ b/packages/core/src/lib/table/table-header-cell.svelte @@ -0,0 +1,36 @@ + + + + + + + + + + diff --git a/packages/core/src/lib/table/table-header.svelte b/packages/core/src/lib/table/table-header.svelte new file mode 100644 index 000000000..bca1bd857 --- /dev/null +++ b/packages/core/src/lib/table/table-header.svelte @@ -0,0 +1,35 @@ + + + + + + + + + + diff --git a/packages/core/src/lib/table/table-row.spec.svelte b/packages/core/src/lib/table/table-row.spec.svelte new file mode 100644 index 000000000..98d1437d5 --- /dev/null +++ b/packages/core/src/lib/table/table-row.spec.svelte @@ -0,0 +1,19 @@ + + + + + data + diff --git a/packages/core/src/lib/table/table-row.spec.ts b/packages/core/src/lib/table/table-row.spec.ts new file mode 100644 index 000000000..fe565f9b0 --- /dev/null +++ b/packages/core/src/lib/table/table-row.spec.ts @@ -0,0 +1,39 @@ +import { describe, it, expect } from 'vitest'; +import { render, screen } from '@testing-library/svelte'; +import TableRow from './table-row.svelte'; +import TableRowWithTableCell from './table-row.spec.svelte'; + +describe('TR', () => { + it('Renders default variant', () => { + render(TableRow); + expect(screen.getByRole('row')).toBeVisible(); + expect(screen.getByRole('row')).toHaveClass('border-b'); + }); + + it('Renders success variant', () => { + render(TableRow, { 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(TableRow, { variant: 'disabled' }); + expect(screen.getByRole('row')).toBeVisible(); + expect(screen.getByRole('row')).toHaveClass('text-gray-500 bg-gray-50'); + }); + + it('Renders error variant', () => { + render(TableRow, { 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(TableRowWithTableCell); + expect(screen.getByText('data')); + }); +}); diff --git a/packages/core/src/lib/table/table-row.svelte b/packages/core/src/lib/table/table-row.svelte new file mode 100644 index 000000000..dd7365664 --- /dev/null +++ b/packages/core/src/lib/table/table-row.svelte @@ -0,0 +1,45 @@ + + + + + + + + + + diff --git a/packages/core/src/lib/table/table.spec.svelte b/packages/core/src/lib/table/table.spec.svelte new file mode 100644 index 000000000..e825b89bb --- /dev/null +++ b/packages/core/src/lib/table/table.spec.svelte @@ -0,0 +1,29 @@ + + + + + + + stuff + stuffs + stufffss + + +
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..c361a323c --- /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%']; + const { container } = render(TableWith3Cols, { cols }); + + for (const [i, width] of cols.entries()) { + const col = container.querySelectorAll('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..439dbd7b4 --- /dev/null +++ b/packages/core/src/lib/table/table.svelte @@ -0,0 +1,61 @@ + + + + + + + + + + {#each cols as col} + + {/each} + + +
+ + diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte index 3420c214c..141920654 100644 --- a/packages/core/src/routes/+page.svelte +++ b/packages/core/src/routes/+page.svelte @@ -19,6 +19,12 @@ import Tooltip from '$lib/tooltip.svelte'; import TextInput from '$lib/input/text-input.svelte'; import NumericInput from '$lib/input/numeric-input.svelte'; import SliderInput from '$lib/input/slider-input.svelte'; +import Table from '$lib/table/table.svelte'; +import TableBody from '$lib/table/table-body.svelte'; +import TableCell from '$lib/table/table-cell.svelte'; +import TableHeaderCell from '$lib/table/table-header-cell.svelte'; +import TableHeader from '$lib/table/table-header.svelte'; +import TableRow from '$lib/table/table-row.svelte'; let buttonClickedTimes = 0; @@ -90,25 +96,64 @@ let buttonClickedTimes = 0;
- -
Motor one was conceived and executed at Bell Labs in 1972 under the guidance of lead director Dennis Richie and Supervisor Wallace Breen.
+ +
+ Motor one was conceived and executed at Bell Labs in 1972 under the + guidance of lead director Dennis Richie and Supervisor Wallace Breen. +
- - - -
Motor one was conceived and executed at Bell Labs in 1972 under the guidance of lead director Dennis Richie and Supervisor Wallace Breen.
+ + + +
+ Motor one was conceived and executed at Bell Labs in 1972 under the + guidance of lead director Dennis Richie and Supervisor Wallace Breen. +
- - - - -
Motor one was conceived and executed at Bell Labs in 1972 under the guidance of lead director Dennis Richie and Supervisor Wallace Breen.
+ + + + +
+ Motor one was conceived and executed at Bell Labs in 1972 under the + guidance of lead director Dennis Richie and Supervisor Wallace Breen. +
- - - - -
Motor one was conceived and executed at Bell Labs in 1972 under the guidance of lead director Dennis Richie and Supervisor Wallace Breen.
+ + + + +
+ Motor one was conceived and executed at Bell Labs in 1972 under the + guidance of lead director Dennis Richie and Supervisor Wallace Breen. +
@@ -479,6 +524,36 @@ let buttonClickedTimes = 0; variant="danger" /> + + + + + headerheaderheader (mario underwater theme) + Another header + + + + the mitochondria is the powerhouse of the tablecell + stuffs + + + stuff + stuffs + + + stuff + stuffs + + + stuff + stuffs + + +
diff --git a/packages/storybook/src/stories/table/table.stories.mdx b/packages/storybook/src/stories/table/table.stories.mdx new file mode 100644 index 000000000..db971ba33 --- /dev/null +++ b/packages/storybook/src/stories/table/table.stories.mdx @@ -0,0 +1,39 @@ +import { Canvas, Meta, Story } from '@storybook/addon-docs'; +import Table from './table.svelte'; + + + +# Table + +Used to tabular data. + + + + {(props) => ({ + Component: Table, + props, + })} + + diff --git a/packages/storybook/src/stories/table/table.svelte b/packages/storybook/src/stories/table/table.svelte new file mode 100644 index 000000000..1aa15c5f5 --- /dev/null +++ b/packages/storybook/src/stories/table/table.svelte @@ -0,0 +1,67 @@ + + + + + + Name + Address + Overlylongunbrokenheader + Phone + + + + + John Connor + 42 Terminal Ave + Someunbrokenlongtextthingamajig + 555-555-5555 + + + + P Sherman + 42 Wallaby Way + x + 555-555-5555 + + + + John Connor + 42 Terminal Ave + Someunbrokenlongtextthingamajig + 555-555-5555 + + + + John Connor + 42 Terminal Ave + Someunbrokenlongtextthingamajig + 555-555-5555 + + + + John Connor + 42 Terminal Ave + Someunbrokenlongtextthingamajig + 555-555-5555 + + +