[@svelteui/core]: Added Table component

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

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

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

@@ -0,0 +1,12 @@
+<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} />
+</Template>
+
+<Story name="Table" id="tableStory" />

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

@@ -0,0 +1,42 @@
+import { createStyles } from '$lib/styles';
+import type { SvelteUINumberSize } from '$lib/styles';
+
+export interface TableStyleParams {
+	withBorder: boolean;
+	striped: boolean;
+	highlightOnHover: boolean;
+	cellPadding: SvelteUINumberSize;
+	textAlign: 'center' | 'left' | 'right';
+}
+
+export const padding = {
+	sm: 4,
+	md: 8,
+	lg: 16
+};
+
+export default createStyles(
+	(theme, { withBorder, highlightOnHover, striped, cellPadding, textAlign }: TableStyleParams) => {
+		const { themeColor } = theme.fn;
+		return {
+			root: {
+				borderCollapse: 'collapse',
+				cursor: highlightOnHover ? 'pointer' : 'default',
+				border: withBorder ? `1px solid ${themeColor('gray', 6)}` : '',
+				borderStyle: withBorder ? '' : 'hidden',
+				'& > * > th, & > * > td': {
+					padding:
+						typeof cellPadding === 'number' ? `${cellPadding}px` : `${padding[`${cellPadding}`]}px`,
+					border: `1px solid ${themeColor('gray', 6)}`,
+					textAlign
+				},
+				'& > tr:nth-child(even)': {
+					backgroundColor: striped ? themeColor('gray', 9) : ''
+				},
+				'& > tr:hover': {
+					backgroundColor: highlightOnHover ? themeColor('gray', 9) : ''
+				}
+			}
+		};
+	}
+);

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

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

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';