[@svelteui/core]: Added Table component

packages/svelteui-core/src/components/Table/Table.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'svelte/elements';
+import { DefaultProps, SvelteUINumberSize } from '$lib/styles';
+
+export interface TableProps<T = HTMLTableElement>
+	extends DefaultProps<T>,
+		HTMLAttributes<HTMLElement> {
+	striped?: boolean;
+	highlightOnHover?: boolean;
+	cellPadding?: SvelteUINumberSize;
+	textAlign?: 'center' | 'right' | 'left';
+	withRowBorder?: boolean;
+	withColumnBorder?: boolean;
+	withTableBorder?: boolean;
+}

packages/svelteui-core/src/components/Table/Table.stories.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+	import { Table } from './index';
+</script>
+
+<Meta title="Components/Table" component={Table} />
+
+<Template let:args>
+	<Table {...args}>
+		<thead>
+			<tr>
+				<th>Project</th>
+				<th>Stars</th>
+				<th>Contributors</th>
+				<th>Forks</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td>freeCodeCamp/freeCodeCamp</td>
+				<td>381k</td>
+				<td>4887</td>
+				<td>35.5k</td>
+			</tr>
+			<tr>
+				<td>EbookFoundation/free-programming-books</td>
+				<td>307k</td>
+				<td>2854</td>
+				<td>59.1k</td>
+			</tr>
+			<tr>
+				<td>sindresorhus/awesome</td>
+				<td>286k</td>
+				<td>576</td>
+				<td>27k</td>
+			</tr>
+			<tr>
+				<td>jwasham/coding-interview-university</td>
+				<td>276k</td>
+				<td>303</td>
+				<td>71.4k</td>
+			</tr>
+			<tr>
+				<td>996icu/996.ICU</td>
+				<td>268k</td>
+				<td>642</td>
+				<td>21.5k</td>
+			</tr>
+		</tbody>
+	</Table>
+</Template>
+
+<Story name="Table" id="tableStory" />

packages/svelteui-core/src/components/Table/Table.styles.ts

@@ -0,0 +1,75 @@
+import { createStyles } from '$lib/styles';
+import type { SvelteUINumberSize } from '$lib/styles';
+
+export interface TableStyleParams {
+	striped: boolean;
+	highlightOnHover: boolean;
+	cellPadding: SvelteUINumberSize;
+	textAlign: 'center' | 'left' | 'right';
+	withRowBorder: boolean;
+	withColumnBorder: boolean;
+	withTableBorder: boolean;
+}
+
+export const padding = {
+	sm: 4,
+	md: 8,
+	lg: 16
+};
+
+export default createStyles(
+	(
+		theme,
+		{
+			highlightOnHover,
+			striped,
+			cellPadding,
+			textAlign,
+			withRowBorder,
+			withColumnBorder,
+			withTableBorder
+		}: TableStyleParams
+	) => {
+		const { themeColor } = theme.fn;
+		return {
+			root: {
+				tableLayout: 'auto',
+				borderCollapse: 'collapse',
+				cursor: highlightOnHover ? 'pointer' : 'default',
+				border: withTableBorder ? `1px solid ${themeColor('gray', 3)}` : '',
+				'& > thead > tr > th, & > tbody > tr > td': {
+					padding:
+						typeof cellPadding === 'number' ? `${cellPadding}px` : `${padding[`${cellPadding}`]}px`,
+					textAlign
+				},
+				'& tr': {
+					borderBottom: withRowBorder ? `1px solid ${themeColor('gray', 3)}` : 'none'
+				},
+				'& td, & th': {
+					borderRight: withColumnBorder ? `1px solid ${themeColor('gray', 3)}` : 'none'
+				},
+				'& tbody tr:last-of-type': {
+					borderBottom: 'none'
+				},
+				'& td:last-of-type': {
+					borderRight: 'none'
+				},
+				'& tr:nth-child(even)': {
+					backgroundColor: striped ? themeColor('gray', 1) : '',
+					darkMode: {
+						backgroundColor: striped ? themeColor('dark', 6) : ''
+					}
+				},
+				'& > tbody > tr:hover': {
+					backgroundColor: highlightOnHover ? themeColor('gray', 2) : '',
+					darkMode: {
+						backgroundColor: highlightOnHover ? themeColor('dark', 5) : ''
+					}
+				},
+				darkMode: {
+					borderColor: themeColor('dark', 4)
+				}
+			}
+		};
+	}
+);

packages/svelteui-core/src/components/Table/Table.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Box } from '../Box';
+	import type { TableProps as $$TableProps } from './Table';
+	import useStyles from './Table.styles';
+
+	interface $$Props extends $$TableProps {}
+
+	export let striped: $$Props['striped'] = false,
+		highlightOnHover: $$Props['highlightOnHover'] = false,
+		className: $$Props['className'] = 'table',
+		cellPadding: $$Props['cellPadding'] = 'sm',
+		textAlign: $$Props['textAlign'] = 'left',
+		withRowBorder: $$Props['withRowBorder'] = true,
+		withColumnBorder: $$Props['withColumnBorder'] = false,
+		withTableBorder: $$Props['withTableBorder'] = false;
+
+	$: ({ cx, classes } = useStyles(
+		{
+			striped,
+			highlightOnHover,
+			cellPadding,
+			textAlign,
+			withRowBorder,
+			withColumnBorder,
+			withTableBorder
+		},
+		{ name: 'Table' }
+	));
+</script>
+
+<Box root="table" class={cx(className, classes.root)}>
+	<slot />
+</Box>

packages/svelteui-core/src/components/Table/index.ts

@@ -0,0 +1,3 @@
+export { default as Table } from './Table.svelte';
+export type { TableStyleParams } from './Table.styles';
+export type { TableProps } from './Table';