sveltacular 0.0.5 → 0.0.6

package/dist/generic/section/section.svelte

@@ -3,6 +3,6 @@
 </section>
 
 <style>section {
-  margin: 0 auto;
-  padding: 0 1rem;
+  padding: 0;
+  margin: 1rem 1rem;
 }</style>

package/dist/layout/flex-col.svelte

@@ -1,9 +1,9 @@
-<script>export let marginY = 1;
-export let marginX = 0;
-export let gap = 1;
+<script>export let marginBottom = "1rem";
+export let marginTop = "1rem";
+export let gap = "1rem";
 </script>
 
-<div style={`margin: ${marginY}rem ${marginX}rem; gap: ${gap}rem`}>
+<div style={`margin: ${marginTop} ${marginBottom}; gap: ${gap}`}>
 	<slot />
 </div>
 

package/dist/layout/flex-col.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        marginY?: number | undefined;
-        marginX?: number | undefined;
-        gap?: number | undefined;
+        marginBottom?: string | number | undefined;
+        marginTop?: string | number | undefined;
+        gap?: string | number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/layout/flex-row.svelte

@@ -1,10 +1,15 @@
-<script>export let gap = 1;
+<script>export let marginBottom = "1rem";
+export let marginTop = "1rem";
+export let gap = "1rem";
 export let layout = "stretch";
 export let size = "full";
 export let wrap = false;
 </script>
 
-<div style={`gap: ${gap}rem`} class="{layout} {size} {wrap ? 'wrap' : 'nowrap'}">
+<div
+	style={`margin: ${marginTop} ${marginBottom}; gap: ${gap}`}
+	class="{layout} {size} {wrap ? 'wrap' : 'nowrap'}"
+>
 	<slot />
 </div>
 
@@ -14,6 +19,7 @@ export let wrap = false;
   justify-content: center;
   align-items: center;
   flex-wrap: nowrap;
+  column-gap: 1rem;
 }
 div *.auto {
   width: auto;

package/dist/layout/flex-row.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        gap?: number | undefined;
+        marginBottom?: string | number | undefined;
+        marginTop?: string | number | undefined;
+        gap?: string | number | undefined;
         layout?: "stretch" | "center" | "end" | "start" | undefined;
         size?: "full" | "auto" | undefined;
         wrap?: boolean | undefined;

package/dist/tables/data-grid.svelte

@@ -8,6 +8,9 @@ import TableHeaderRow from "./table-header-row.svelte";
 import TableHeader from "./table-header.svelte";
 import TableRow from "./table-row.svelte";
 import Table from "./table.svelte";
+import Text from "../typography/text.svelte";
+import TableCaption from "./table-caption.svelte";
+export let caption = "";
 export let data;
 export let cols;
 $:
@@ -15,11 +18,14 @@ $:
 </script>
 
 <Table>
+	{#if caption}
+		<TableCaption>{caption}</TableCaption>
+	{/if}
 	<TableHeader>
 		<TableHeaderRow>
 			{#each cols as col}
 				{#if !col.hide}
-					<TableHeaderCell>{col.label}</TableHeaderCell>
+					<TableHeaderCell type={col.type || typeof data[0][col.key]}>{col.label}</TableHeaderCell>
 				{/if}
 			{/each}
 		</TableHeaderRow>
@@ -29,7 +35,13 @@ $:
 			<TableRow>
 				{#each cols as col}
 					{#if !col.hide}
-						<TableCell>{row[col.key]}</TableCell>
+						<TableCell type={col.type || typeof row[col.key]}>
+							{#if col.format}
+								{col.format(row, col.key)}
+							{:else}
+								{row[col.key]}
+							{/if}
+						</TableCell>
 					{/if}
 				{/each}
 			</TableRow>
@@ -37,7 +49,9 @@ $:
 	</TableBody>
 	<TableFooter>
 		<TableFooterRow>
-			<TableFooterCell colspan={colCount}>Page 1 of 50</TableFooterCell>
+			<TableFooterCell colspan={colCount}>
+				<Text transform="uppercase">Page 1 of 50</Text>
+			</TableFooterCell>
 		</TableFooterRow>
 	</TableFooter>
 </Table>

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

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { DataCol, DataRow } from '../types/data.js';
 declare const __propDef: {
     props: {
+        caption?: string | undefined;
         data: DataRow[];
         cols: DataCol[];
     };

package/dist/tables/table-caption.svelte

@@ -0,0 +1,14 @@
+<caption>
+	<slot />
+</caption>
+
+<style>caption {
+  padding: 0.5rem 0.75rem;
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.25rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-family: sans-serif;
+  text-shadow: 1px 1px 1px black;
+}</style>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  TableCaptionProps */
+/** @typedef {typeof __propDef.events}  TableCaptionEvents */
+/** @typedef {typeof __propDef.slots}  TableCaptionSlots */
+export default class TableCaption extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableCaptionProps = typeof __propDef.props;
+export type TableCaptionEvents = typeof __propDef.events;
+export type TableCaptionSlots = 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

@@ -1,13 +1,19 @@
 <script>export let colspan = 1;
+export let type = void 0;
 </script>
 
-<td {colspan}>
+<td {colspan} class={type}>
 	<slot />
 </td>
 
-<style>
-	td {
-		padding: 0.5rem;
-		font-size: 1rem;
-	}
-</style>
+<style>td {
+  padding: 0.5rem;
+  font-size: 1rem;
+}
+td.currency, td.number {
+  text-align: right;
+}
+td.boolean {
+  text-align: center;
+  text-transform: uppercase;
+}</style>

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

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         colspan?: number | undefined;
+        type?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -8,5 +8,8 @@
 <style>
 	td {
 		padding: 0.5rem;
+		font-size: 0.8rem;
+		font-family: sans-serif;
+		text-shadow: 1px 1px 1px black;
 	}
 </style>

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

@@ -1,18 +1,25 @@
 <script>export let colspan = 1;
+export let type = void 0;
 </script>
 
-<th {colspan}>
+<th {colspan} class={type}>
 	<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>
+<style>th {
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  font-weight: 500;
+  font-size: 0.8rem;
+  font-family: sans-serif;
+  line-height: 1.25rem;
+  letter-spacing: 0.015em;
+  text-transform: uppercase;
+  text-shadow: 1px 1px 1px black;
+}
+th.currency, th.number {
+  text-align: right;
+}
+th.boolean {
+  text-align: center;
+}</style>

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

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         colspan?: number | undefined;
+        type?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/types/data.d.ts

@@ -1,9 +1,9 @@
-export type DataRow = {
-    [key: string]: unknown;
-};
+export type DataRow = Record<string, unknown>;
 export type DataCol = {
     key: string;
     label: string;
+    type?: string;
+    format?: (row: DataRow, key: string) => string;
     hide?: boolean;
 };
 export type Pagination = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"scripts": {
 		"watch": "npm run dev -- --open",
 		"dev": "vite dev",