sveltacular 0.0.63 → 0.0.65

package/dist/generic/list/list-item.svelte

@@ -1,5 +1,23 @@
-<script></script>
+<script>import { getContext } from "svelte";
+import { listContext } from "./list.js";
+const ctx = getContext(listContext);
+const listStyle = ctx.style || "none";
+</script>
 
-<li>
+<li class="{listStyle}">
     <slot />
-</li>
+</li>
+
+
+<style>
+	li.striped {
+        background-color: var(--list-row-bg, #fff);
+		color: var(--list-row-fg, #000);
+        padding: 0.5rem;
+
+        &:nth-of-type(odd) {
+            background-color: var(--list-row-alt-bg, #eee);
+            color: var(--list-row-alt-fg, #000);
+        }
+	}
+</style>

package/dist/generic/list/list.d.ts

@@ -0,0 +1,5 @@
+export type ListStyle = 'none' | 'disc' | 'circle' | 'square' | 'decimal' | 'decimal-leading-zero' | 'striped';
+export interface ListContext {
+    style: ListStyle;
+}
+export declare const listContext = "listContext";

package/dist/generic/list/list.js

@@ -0,0 +1 @@
+export const listContext = 'listContext';

package/dist/generic/list/list.svelte

@@ -1,5 +1,11 @@
-<script>export let type = "unordered";
+<script>import { setContext } from "svelte";
+import { listContext } from "./list.js";
+export let type = "unordered";
 export let style = "none";
+const ctx = {
+  style
+};
+setContext(listContext, ctx);
 </script>
 
 {#if type === 'unordered'}
@@ -14,6 +20,12 @@ export let style = "none";
 
 <style>.none {
   list-style-type: none;
+  padding-left: 0.5rem;
+}
+
+.striped {
+  list-style-type: none;
+  padding-left: 0;
 }
 
 .disc {

package/dist/generic/list/list.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponent } from "svelte";
+import { type ListStyle } from "./list.js";
 declare const __propDef: {
     props: {
         type?: "unordered" | "ordered" | undefined;
-        style?: "none" | "circle" | "square" | "disc" | "decimal" | "decimal-leading-zero" | undefined;
+        style?: ListStyle | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/generic/pill/pill.svelte

@@ -1,8 +1,10 @@
 <script>export let size = "md";
 export let style = "standard";
+export let shape = "rounded";
+export let fill = "solid";
 </script>
 
-<span class="pill {size} {style}">
+<span class="pill {size} {style} {shape} {fill}">
 	<slot />
 </span>
 
@@ -33,4 +35,30 @@ export let style = "standard";
 }
 .pill.square {
   border-radius: 0;
+}
+.pill.outline {
+  background-color: transparent;
+  border: 1px solid #4a5568;
+  color: #4a5568;
+}
+.pill.circular {
+  border-radius: 50%;
+}
+.pill.positive {
+  background-color: #0a5200;
+  color: #fff;
+}
+.pill.positive.outline {
+  background-color: transparent;
+  border: 1px solid #0a5200;
+  color: #0a5200;
+}
+.pill.negative {
+  background-color: #570000;
+  color: #fff;
+}
+.pill.negative.outline {
+  background-color: transparent;
+  border: 1px solid #570000;
+  color: #570000;
 }</style>

package/dist/generic/pill/pill.svelte.d.ts

@@ -3,7 +3,9 @@ import type { FormFieldSizeOptions } from '../../types/form.js';
 declare const __propDef: {
     props: {
         size?: FormFieldSizeOptions | undefined;
-        style?: "standard" | "badge" | "square" | undefined;
+        style?: "positive" | "negative" | "standard" | undefined;
+        shape?: "circular" | "square" | "rounded" | "badge" | undefined;
+        fill?: "outline" | "solid" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/icons/check-icon.svelte

@@ -1,3 +1,5 @@
+
+
 <svg
 	class="w-6 h-6 text-gray-800 dark:text-white"
 	aria-hidden="true"

package/dist/tables/data-grid.svelte

@@ -8,17 +8,19 @@ 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 Button from "../forms/button/button.svelte";
 import Empty from "../generic/empty/empty.svelte";
+import Pill from "../generic/pill/pill.svelte";
 import FolderOpenIcon from "../icons/folder-open-icon.svelte";
 import Pagination from "../navigation/pagination/pagination.svelte";
 import Loading from "../placeholders/loading.svelte";
 import TableCaption from "./table-caption.svelte";
-export let caption = "";
+export let captionSide = "top";
+export let captionAlign = "center";
 export let rows = void 0;
 export let cols;
 export let pagination = void 0;
-export let editRow = void 0;
-export let deleteRow = void 0;
+export let actions = [];
 export let onPageChange = null;
 const getColType = (col) => {
   if (col.type)
@@ -27,14 +29,6 @@ const getColType = (col) => {
     return "string";
   return typeof rows[0][col.key];
 };
-const clickEdit = async (row) => {
-  if (editRow)
-    await editRow(row);
-};
-const clickDelete = async (row) => {
-  if (deleteRow)
-    await deleteRow(row);
-};
 const format = (row, key) => {
   const col = cols.find((col2) => col2.key === key);
   if (!col)
@@ -71,9 +65,9 @@ const filterRows = () => {
   return rows.filter((_row, index) => index >= startIndex && index < endIndex);
 };
 $:
-  hasActionRow = editRow || deleteRow;
+  hasActionCol = actions.length > 0;
 $:
-  colCount = Math.max(1, cols.filter((col) => !col.hide).length) + (hasActionRow ? 1 : 0);
+  colCount = Math.max(1, cols.filter((col) => !col.hide).length) + (hasActionCol ? 1 : 0);
 $:
   totalPages = pagination && rows ? calculateTotalPages() : 1;
 $:
@@ -81,8 +75,8 @@ $:
 </script>
 
 <Table>
-	{#if caption}
-		<TableCaption>{caption}</TableCaption>
+	{#if $$slots.default}
+		<TableCaption side={captionSide} align={captionAlign}><slot /></TableCaption>
 	{/if}
 	<TableHeader>
 		<TableHeaderRow>
@@ -91,7 +85,7 @@ $:
 					<TableHeaderCell type={getColType(col)} width={col.width}>{col.label}</TableHeaderCell>
 				{/if}
 			{/each}
-			{#if hasActionRow}
+			{#if hasActionCol}
 				<TableHeaderCell type="string" />
 			{/if}
 		</TableHeaderRow>
@@ -119,20 +113,23 @@ $:
 							<TableCell type={col.type || typeof row[col.key]} width={col.width}>
 								{#if col.link}
 									<a href={col.link(row, col.key)}>{format(row, col.key)}</a>
+								{:else if col.type == 'email' && row[col.key]}
+									<a href={`mailto:${row[col.key]}`}>{format(row, col.key)}</a>
+								{:else if col.type == 'check'}
+									{#if row[col.key]}
+										<Pill shape="circular" style="positive">✔</Pill>
+									{/if}
 								{:else}
 									{format(row, col.key)}
 								{/if}
 							</TableCell>
 						{/if}
 					{/each}
-					{#if hasActionRow}
+					{#if hasActionCol}
 						<TableCell type="actions">
-							{#if editRow}
-								<button type="button" on:click={() => clickEdit(row)}>Edit</button>
-							{/if}
-							{#if deleteRow}
-								<button type="button" on:click={() => clickDelete(row)}>Delete</button>
-							{/if}
+							{#each actions as action}
+								<Button collapse={true} size="sm" type="button" on:click={() => action.onClick(row)}>{action.text}</Button>
+							{/each}
 						</TableCell>
 					{/if}
 				</TableRow>
@@ -164,20 +161,9 @@ $:
 }
 
 a {
-  color: var(--table-link-fg, #00f);
+  color: var(--table-link-fg, rgb(0, 0, 200));
   text-decoration: none;
 }
 a:hover {
   text-decoration: underline;
-}
-
-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--table-link-fg, #00f);
-  text-decoration: none;
-}
-button:hover {
-  text-decoration: underline;
 }</style>

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

@@ -2,12 +2,15 @@ import { SvelteComponent } from "svelte";
 import type { DataCol, DataRow, PaginationProperties } from '../types/data.js';
 declare const __propDef: {
     props: {
-        caption?: string | undefined;
+        captionSide?: "top" | "bottom" | undefined;
+        captionAlign?: "center" | "left" | "right" | undefined;
         rows?: DataRow[] | undefined;
         cols: DataCol[];
         pagination?: PaginationProperties | undefined;
-        editRow?: ((row: DataRow) => unknown) | undefined;
-        deleteRow?: ((row: DataRow) => unknown) | undefined;
+        actions?: {
+            text: string;
+            onClick: (row: DataRow) => unknown;
+        }[] | undefined;
         /**
              * Handle page change, which should return the new filtered/fetched rows.
              */ onPageChange?: ((pagination: PaginationProperties) => Promise<DataRow[]>) | null | undefined;
@@ -15,7 +18,9 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type DataGridProps = typeof __propDef.props;
 export type DataGridEvents = typeof __propDef.events;

package/dist/tables/table-caption.svelte

@@ -1,4 +1,8 @@
-<caption>
+<script>export let side = "top";
+export let align = "center";
+</script>
+
+<caption class="{side} {align}">
 	<slot />
 </caption>
 
@@ -11,4 +15,15 @@
   text-transform: uppercase;
   font-family: sans-serif;
   text-shadow: 1px 1px 1px black;
+  text-align: center;
+  caption-side: top;
+}
+caption.bottom {
+  caption-side: bottom;
+}
+caption.left {
+  text-align: left;
+}
+caption.right {
+  text-align: right;
 }</style>

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

@@ -1,21 +1,8 @@
-/** @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;
+        side?: "top" | "bottom" | undefined;
+        align?: "center" | "left" | "right" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type TableCaptionProps = typeof __propDef.props;
+export type TableCaptionEvents = typeof __propDef.events;
+export type TableCaptionSlots = typeof __propDef.slots;
+export default class TableCaption extends SvelteComponent<TableCaptionProps, TableCaptionEvents, TableCaptionSlots> {
+}
 export {};

package/dist/tables/table-cell.svelte

@@ -17,7 +17,7 @@ $:
 td.currency, td.number {
   text-align: right;
 }
-td.boolean {
+td.check, td.boolean {
   text-align: center;
   text-transform: uppercase;
 }

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

@@ -3,7 +3,6 @@ export let type = void 0;
 export let width = void 0;
 $:
   styleProperties = [
-    `text-align: ${type === "currency" || type === "number" ? "right" : type === "boolean" ? "center" : "left"}`,
     "text-overflow: ellipsis",
     "overflow: hidden",
     `width: ${width ? width : "auto"}`
@@ -24,11 +23,12 @@ $:
   letter-spacing: 0.015em;
   text-transform: uppercase;
   text-shadow: 1px 1px 1px black;
+  text-align: left;
 }
 th.currency, th.number {
   text-align: right;
 }
-th.boolean {
+th.check, th.boolean {
   text-align: center;
 }
 th:last-child {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.63",
+	"version": "0.0.65",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",