sveltacular 0.0.1

package/dist/tables/data-grid.svelte

@@ -0,0 +1,43 @@
+<script>import TableBody from "./table-body.svelte";
+import TableCell from "./table-cell.svelte";
+import TableFooterCell from "./table-footer-cell.svelte";
+import TableFooterRow from "./table-footer-row.svelte";
+import TableFooter from "./table-footer.svelte";
+import TableHeaderCell from "./table-header-cell.svelte";
+import TableHeaderRow from "./table-header-row.svelte";
+import TableHeader from "./table-header.svelte";
+import TableRow from "./table-row.svelte";
+import Table from "./table.svelte";
+export let data;
+export let cols;
+$:
+  colCount = Math.max(1, cols.filter((col) => !col.hide).length);
+</script>
+
+<Table>
+	<TableHeader>
+		<TableHeaderRow>
+			{#each cols as col}
+				{#if !col.hide}
+					<TableHeaderCell>{col.label}</TableHeaderCell>
+				{/if}
+			{/each}
+		</TableHeaderRow>
+	</TableHeader>
+	<TableBody>
+		{#each data as row}
+			<TableRow>
+				{#each cols as col}
+					{#if !col.hide}
+						<TableCell>{row[col.key]}</TableCell>
+					{/if}
+				{/each}
+			</TableRow>
+		{/each}
+	</TableBody>
+	<TableFooter>
+		<TableFooterRow>
+			<TableFooterCell colspan={colCount}>Page 1 of 50</TableFooterCell>
+		</TableFooterRow>
+	</TableFooter>
+</Table>

package/dist/tables/data-grid.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { DataCol, DataRow } from '../../types/data.js';
+declare const __propDef: {
+    props: {
+        data: DataRow[];
+        cols: DataCol[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DataGridProps = typeof __propDef.props;
+export type DataGridEvents = typeof __propDef.events;
+export type DataGridSlots = typeof __propDef.slots;
+export default class DataGrid extends SvelteComponent<DataGridProps, DataGridEvents, DataGridSlots> {
+}
+export {};

package/dist/tables/table-body.svelte

@@ -0,0 +1,3 @@
+<tbody>
+	<slot />
+</tbody>

package/dist/tables/table-body.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  TableBodyProps */
+/** @typedef {typeof __propDef.events}  TableBodyEvents */
+/** @typedef {typeof __propDef.slots}  TableBodySlots */
+export default class TableBody extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableBodyProps = typeof __propDef.props;
+export type TableBodyEvents = typeof __propDef.events;
+export type TableBodySlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/tables/table-cell.svelte

@@ -0,0 +1,13 @@
+<script>export let colspan = 1;
+</script>
+
+<td {colspan}>
+	<slot />
+</td>
+
+<style>
+	td {
+		padding: 0.5rem;
+		font-size: 1rem;
+	}
+</style>

package/dist/tables/table-cell.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        colspan?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TableCellProps = typeof __propDef.props;
+export type TableCellEvents = typeof __propDef.events;
+export type TableCellSlots = typeof __propDef.slots;
+export default class TableCell extends SvelteComponent<TableCellProps, TableCellEvents, TableCellSlots> {
+}
+export {};

package/dist/tables/table-footer-cell.svelte

@@ -0,0 +1,12 @@
+<script>export let colspan = 1;
+</script>
+
+<td {colspan}>
+	<slot />
+</td>
+
+<style>
+	td {
+		padding: 0.5rem;
+	}
+</style>

package/dist/tables/table-footer-cell.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        colspan?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TableFooterCellProps = typeof __propDef.props;
+export type TableFooterCellEvents = typeof __propDef.events;
+export type TableFooterCellSlots = typeof __propDef.slots;
+export default class TableFooterCell extends SvelteComponent<TableFooterCellProps, TableFooterCellEvents, TableFooterCellSlots> {
+}
+export {};

package/dist/tables/table-footer-row.svelte

@@ -0,0 +1,3 @@
+<tr>
+	<slot />
+</tr>

package/dist/tables/table-footer-row.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  TableFooterRowProps */
+/** @typedef {typeof __propDef.events}  TableFooterRowEvents */
+/** @typedef {typeof __propDef.slots}  TableFooterRowSlots */
+export default class TableFooterRow extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableFooterRowProps = typeof __propDef.props;
+export type TableFooterRowEvents = typeof __propDef.events;
+export type TableFooterRowSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/tables/table-footer.svelte

@@ -0,0 +1,11 @@
+<tfoot>
+	<slot />
+</tfoot>
+
+<style>
+	tfoot {
+		border-top: solid 0.1rem #000;
+		border-bottom: solid 0.1rem #000;
+		font-size: 0.75rem;
+	}
+</style>

package/dist/tables/table-footer.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  TableFooterProps */
+/** @typedef {typeof __propDef.events}  TableFooterEvents */
+/** @typedef {typeof __propDef.slots}  TableFooterSlots */
+export default class TableFooter extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableFooterProps = typeof __propDef.props;
+export type TableFooterEvents = typeof __propDef.events;
+export type TableFooterSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/tables/table-header-cell.svelte

@@ -0,0 +1,18 @@
+<script>export let colspan = 1;
+</script>
+
+<th {colspan}>
+	<slot />
+</th>
+
+<style>
+	th {
+		text-align: left;
+		padding: 0.5rem 0.75rem;
+		font-weight: 500;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		letter-spacing: 0.015em;
+		text-transform: uppercase;
+	}
+</style>

package/dist/tables/table-header-cell.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        colspan?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TableHeaderCellProps = typeof __propDef.props;
+export type TableHeaderCellEvents = typeof __propDef.events;
+export type TableHeaderCellSlots = typeof __propDef.slots;
+export default class TableHeaderCell extends SvelteComponent<TableHeaderCellProps, TableHeaderCellEvents, TableHeaderCellSlots> {
+}
+export {};

package/dist/tables/table-header-row.svelte

@@ -0,0 +1,4 @@
+<tr>
+	<slot />
+</tr>
+

package/dist/tables/table-header-row.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  TableHeaderRowProps */
+/** @typedef {typeof __propDef.events}  TableHeaderRowEvents */
+/** @typedef {typeof __propDef.slots}  TableHeaderRowSlots */
+export default class TableHeaderRow extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableHeaderRowProps = typeof __propDef.props;
+export type TableHeaderRowEvents = typeof __propDef.events;
+export type TableHeaderRowSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/tables/table-header.svelte

@@ -0,0 +1,14 @@
+<thead>
+	<slot />
+</thead>
+
+<style>
+	thead {
+		display: table-header-group;
+		vertical-align: middle;
+		background: #333;
+		color: #fff;
+		border-top: solid 0.1rem #000;
+		border-bottom: solid 0.1rem #000;
+	}
+</style>

package/dist/tables/table-header.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  TableHeaderProps */
+/** @typedef {typeof __propDef.events}  TableHeaderEvents */
+/** @typedef {typeof __propDef.slots}  TableHeaderSlots */
+export default class TableHeader extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableHeaderProps = typeof __propDef.props;
+export type TableHeaderEvents = typeof __propDef.events;
+export type TableHeaderSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/tables/table-row.svelte

@@ -0,0 +1,15 @@
+<tr>
+	<slot />
+</tr>
+
+<style>
+	tr {
+		background-color: #fff;
+		color: #333;
+		border-bottom: solid 1px #000;
+	}
+
+	tr:nth-of-type(odd) {
+		background-color: #cecece;
+	}
+</style>

package/dist/tables/table-row.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  TableRowProps */
+/** @typedef {typeof __propDef.events}  TableRowEvents */
+/** @typedef {typeof __propDef.slots}  TableRowSlots */
+export default class TableRow extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableRowProps = typeof __propDef.props;
+export type TableRowEvents = typeof __propDef.events;
+export type TableRowSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/tables/table.svelte

@@ -0,0 +1,10 @@
+<table>
+	<slot />
+</table>
+
+<style>
+	table {
+		width: 100%;
+		border-collapse: collapse;
+	}
+</style>

package/dist/tables/table.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  TableProps */
+/** @typedef {typeof __propDef.events}  TableEvents */
+/** @typedef {typeof __propDef.slots}  TableSlots */
+export default class Table extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package.json

@@ -0,0 +1,73 @@
+{
+	"name": "sveltacular",
+	"version": "0.0.1",
+	"scripts": {
+		"watch": "npm run dev -- --open",
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test": "vitest",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@storybook/addon-essentials": "^7.2.3",
+		"@storybook/addon-interactions": "^7.2.3",
+		"@storybook/addon-links": "^7.2.3",
+		"@storybook/addon-svelte-csf": "^3.0.7",
+		"@storybook/blocks": "^7.2.3",
+		"@storybook/preset-scss": "^1.0.3",
+		"@storybook/svelte": "^7.2.3",
+		"@storybook/sveltekit": "^7.2.3",
+		"@storybook/testing-library": "^0.2.0",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"@sveltejs/package": "^2.0.0",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"css-loader": "^6.8.1",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-storybook": "^0.6.13",
+		"eslint-plugin-svelte": "^2.30.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.10.1",
+		"publint": "^0.1.9",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"sass": "^1.65.1",
+		"sass-loader": "^13.3.2",
+		"storybook": "^7.2.3",
+		"storybook-dark-mode": "^3.0.1",
+		"style-loader": "^3.3.3",
+		"svelte": "^4.0.5",
+		"svelte-check": "^3.4.3",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2",
+		"vitest": "^0.34.0"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module"
+}