drab 4.1.6 → 5.0.0-beta.0

package/dist/components/DataTable.svelte

@@ -1,208 +0,0 @@
-<!--
-@component
-
-### DataTable
-
-Data table to display an array of objects. Works with zero configuration, just pass an array of objects into the `data` prop.
-
-- Set the `maxRows` prop to enable pagination, bind to `currentPage` to navigate (see second example below)
-- Provides sorting for `number`, `string`, `boolean`, and `Date`
-- Strings are sorted using `Intl.Collator`
-- Style or modify the rendering of data with slot props
-- `numberOfPages` is calculated and sent back through the `controls` slot
-
-@props
-
-- `ascending` - current sort order
-- `classTbodyTr` - `tbody tr` class
-- `classTbody` - `tbody` class
-- `classTd` - `td` class
-- `classTh` - `th` class
-- `classTheadTr` - `thead tr` class
-- `classThead` - `thead` class
-- `classTr` - `tr` class
-- `class` 
-- `currentPage` - current page index, defaults to `0`
-- `data` - an array of items to render in the table
-- `id` 
-- `keys` - table columns to include in the table, in order. Defaults to first item's keys
-- `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
-- `sortBy` - key (column) to sort by, defaults to first key
-
-@slots
-
-| name       | purpose                                                          | default value | slot props                      |
-| ---------- | ---------------------------------------------------------------- | ------------- | ------------------------------- |
-| `controls` | helper that passes back `maxRows` and calculated `numberOfPages` | empty         | `maxRows`, `numberOfPages`      |
-| `td`       | td contents                                                      | `value`       | `item`, `key`, `sortBy` `value` |
-| `th`       | th contents                                                      | `key`         | `key`, `sortBy`                 |
-
-@example
-
-```svelte
-<script lang="ts">
-	import type { ComponentProps } from "svelte";
-	import { DataTable } from "drab";
-
-	let currentPage = 0;
-
-	const data: ComponentProps<DataTable>["data"] = [
-		{ make: "Honda", model: "CR-V", year: 2011, awd: true },
-		{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
-		{ make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
-		{ make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
-		{ make: "Ford", model: "Model A", year: 1931, awd: false },
-		{ make: "Subaru", model: "Outback", year: 2021, awd: true },
-		{ make: "Ford", model: "Bronco", year: 1970, awd: true },
-		{ make: "GMC", model: "Acadia", year: 2008, awd: true },
-		{ make: "BMW", model: "X3", year: 2023, awd: true },
-	];
-</script>
-
-<DataTable {data} class="mb-12" />
-
-<DataTable
-	{data}
-	bind:currentPage
-	sortBy="year"
-	maxRows={4}
-	class="tabular-nums"
-	classTh="cursor-pointer capitalize"
-	classTbodyTr="transition hover:bg-muted"
->
-	<svelte:fragment slot="th" let:key let:sortBy>
-		<span class:uppercase={key === "awd"} class:underline={key === sortBy}>
-			{key}
-		</span>
-	</svelte:fragment>
-	<svelte:fragment slot="td" let:value>
-		{#if typeof value === "boolean"}
-			{value ? "Yes" : "No"}
-		{:else}
-			{value}
-		{/if}
-	</svelte:fragment>
-	<svelte:fragment slot="controls" let:maxRows let:numberOfPages>
-		{#if maxRows}
-			<div class="flex items-center justify-between gap-4">
-				<div class="min-w-fit">{currentPage + 1} / {numberOfPages}</div>
-				<div class="flex gap-2">
-					<button
-						type="button"
-						class="button button-primary"
-						disabled={currentPage < 1}
-						on:click={() => currentPage--}
-					>
-						Previous
-					</button>
-					<button
-						type="button"
-						class="button button-primary"
-						disabled={currentPage >= numberOfPages - 1}
-						on:click={() => currentPage++}
-					>
-						Next
-					</button>
-				</div>
-			</div>
-		{/if}
-	</svelte:fragment>
-</DataTable>
-```
--->
-
-<script>let className = "";
-export { className as class };
-export let id = "";
-export let data;
-export let keys = Object.keys(data[0]);
-export let sortBy = keys[0];
-export let ascending = true;
-export let classThead = "";
-export let classTbody = "";
-export let classTr = "";
-export let classTheadTr = "";
-export let classTbodyTr = "";
-export let classTh = "";
-export let classTd = "";
-export let maxRows = 0;
-export let currentPage = 0;
-$:
-  numberOfPages = Math.floor(data.length / maxRows) + 1;
-const sort = (key, toggleAscending = true) => {
-  if (key === sortBy && toggleAscending) {
-    ascending = !ascending;
-  } else {
-    ascending = true;
-  }
-  const collator = new Intl.Collator();
-  data.sort((a, b) => {
-    const aVal = a[key];
-    const bVal = b[key];
-    if (typeof aVal === "number" && typeof bVal === "number") {
-      if (ascending) {
-        return aVal - bVal;
-      } else {
-        return bVal - aVal;
-      }
-    } else if (typeof aVal === "string" && typeof bVal === "string") {
-      if (ascending) {
-        return collator.compare(aVal, bVal);
-      } else {
-        return collator.compare(bVal, aVal);
-      }
-    } else if (aVal instanceof Date && bVal instanceof Date) {
-      if (ascending) {
-        return aVal.getTime() - bVal.getTime();
-      } else {
-        return bVal.getTime() - aVal.getTime();
-      }
-    } else {
-      if (ascending) {
-        return aVal === bVal ? 0 : aVal ? -1 : 1;
-      } else {
-        return aVal === bVal ? 0 : aVal ? 1 : -1;
-      }
-    }
-  });
-  data = data;
-  sortBy = key;
-};
-const showRow = (i, currentPage2) => {
-  if (!maxRows)
-    return true;
-  const overMin = i >= maxRows * currentPage2;
-  const underMax = i < maxRows * (currentPage2 + 1);
-  return overMin && underMax;
-};
-sort(sortBy, false);
-</script>
-
-<table class={className} {id}>
-	<thead class={classThead}>
-		<tr class="{classTr} {classTheadTr}">
-			{#each keys as key}
-				<th class={classTh} on:click={() => sort(key)}>
-					<slot name="th" {key} {sortBy}>{key}</slot>
-				</th>
-			{/each}
-		</tr>
-	</thead>
-	<tbody class={classTbody}>
-		{#each data as item, i}
-			{#if showRow(i, currentPage)}
-				<tr class="{classTr} {classTbodyTr}">
-					{#each keys as key}
-						<td class={classTd}>
-							<slot name="td" {item} {key} {sortBy} value={item[key]}>
-								{item[key]}
-							</slot>
-						</td>
-					{/each}
-				</tr>
-			{/if}
-		{/each}
-	</tbody>
-</table>
-
-<slot name="controls" {maxRows} {numberOfPages} />

package/dist/components/DataTable.svelte.d.ts

@@ -1,155 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        class?: string | undefined;
-        id?: string | undefined;
-        /** an array of items to render in the table */ data: Record<string | number, string | number | boolean | Date | null | undefined>[];
-        /** table columns to include in the table, in order. Defaults to first item's keys */ keys?: string[] | undefined;
-        /** key (column) to sort by, defaults to first key */ sortBy?: string | undefined;
-        /** current sort order */ ascending?: boolean | undefined;
-        /** `thead` class */ classThead?: string | undefined;
-        /** `tbody` class */ classTbody?: string | undefined;
-        /** `tr` class */ classTr?: string | undefined;
-        /** `thead tr` class */ classTheadTr?: string | undefined;
-        /** `tbody tr` class */ classTbodyTr?: string | undefined;
-        /** `th` class */ classTh?: string | undefined;
-        /** `td` class */ classTd?: string | undefined;
-        /** maximum number of rows to show on each page, defaults to `0` - no pagination */ maxRows?: number | undefined;
-        /** current page index, defaults to `0` */ currentPage?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        th: {
-            key: string;
-            sortBy: string;
-        };
-        td: {
-            item: Record<string | number, string | number | boolean | Date | null | undefined>;
-            key: string;
-            sortBy: string;
-            value: string | number | boolean | Date | null | undefined;
-        };
-        controls: {
-            maxRows: number;
-            numberOfPages: number;
-        };
-    };
-};
-export type DataTableProps = typeof __propDef.props;
-export type DataTableEvents = typeof __propDef.events;
-export type DataTableSlots = typeof __propDef.slots;
-/**
- * ### DataTable
- *
- * Data table to display an array of objects. Works with zero configuration, just pass an array of objects into the `data` prop.
- *
- * - Set the `maxRows` prop to enable pagination, bind to `currentPage` to navigate (see second example below)
- * - Provides sorting for `number`, `string`, `boolean`, and `Date`
- * - Strings are sorted using `Intl.Collator`
- * - Style or modify the rendering of data with slot props
- * - `numberOfPages` is calculated and sent back through the `controls` slot
- *
- * @props
- *
- * - `ascending` - current sort order
- * - `classTbodyTr` - `tbody tr` class
- * - `classTbody` - `tbody` class
- * - `classTd` - `td` class
- * - `classTh` - `th` class
- * - `classTheadTr` - `thead tr` class
- * - `classThead` - `thead` class
- * - `classTr` - `tr` class
- * - `class`
- * - `currentPage` - current page index, defaults to `0`
- * - `data` - an array of items to render in the table
- * - `id`
- * - `keys` - table columns to include in the table, in order. Defaults to first item's keys
- * - `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
- * - `sortBy` - key (column) to sort by, defaults to first key
- *
- * @slots
- *
- * | name       | purpose                                                          | default value | slot props                      |
- * | ---------- | ---------------------------------------------------------------- | ------------- | ------------------------------- |
- * | `controls` | helper that passes back `maxRows` and calculated `numberOfPages` | empty         | `maxRows`, `numberOfPages`      |
- * | `td`       | td contents                                                      | `value`       | `item`, `key`, `sortBy` `value` |
- * | `th`       | th contents                                                      | `key`         | `key`, `sortBy`                 |
- *
- * @example
- *
- * ```svelte
- * <script lang="ts">
- * import type { ComponentProps } from "svelte";
- * import { DataTable } from "drab";
- *
- * let currentPage = 0;
- *
- * const data: ComponentProps<DataTable>["data"] = [
- * 	{ make: "Honda", model: "CR-V", year: 2011, awd: true },
- * 	{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
- * 	{ make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
- * 	{ make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
- * 	{ make: "Ford", model: "Model A", year: 1931, awd: false },
- * 	{ make: "Subaru", model: "Outback", year: 2021, awd: true },
- * 	{ make: "Ford", model: "Bronco", year: 1970, awd: true },
- * 	{ make: "GMC", model: "Acadia", year: 2008, awd: true },
- * 	{ make: "BMW", model: "X3", year: 2023, awd: true },
- * ];
- * </script>
- *
- * <DataTable {data} class="mb-12" />
- *
- * <DataTable
- * {data}
- * bind:currentPage
- * sortBy="year"
- * maxRows={4}
- * class="tabular-nums"
- * classTh="cursor-pointer capitalize"
- * classTbodyTr="transition hover:bg-muted"
- * >
- * <svelte:fragment slot="th" let:key let:sortBy>
- * 	<span class:uppercase={key === "awd"} class:underline={key === sortBy}>
- * 		{key}
- * 	</span>
- * </svelte:fragment>
- * <svelte:fragment slot="td" let:value>
- * 	{#if typeof value === "boolean"}
- * 		{value ? "Yes" : "No"}
- * 	{:else}
- * 		{value}
- * 	{/if}
- * </svelte:fragment>
- * <svelte:fragment slot="controls" let:maxRows let:numberOfPages>
- * 	{#if maxRows}
- * 		<div class="flex items-center justify-between gap-4">
- * 			<div class="min-w-fit">{currentPage + 1} / {numberOfPages}</div>
- * 			<div class="flex gap-2">
- * 				<button
- * 					type="button"
- * 					class="button button-primary"
- * 					disabled={currentPage < 1}
- * 					on:click={() => currentPage--}
- * 				>
- * 					Previous
- * 				</button>
- * 				<button
- * 					type="button"
- * 					class="button button-primary"
- * 					disabled={currentPage >= numberOfPages - 1}
- * 					on:click={() => currentPage++}
- * 				>
- * 					Next
- * 				</button>
- * 			</div>
- * 		</div>
- * 	{/if}
- * </svelte:fragment>
- * </DataTable>
- * ```
- */
-export default class DataTable extends SvelteComponent<DataTableProps, DataTableEvents, DataTableSlots> {
-}
-export {};

package/dist/components/Details.svelte

@@ -1,101 +0,0 @@
-<!--
-@component
-
-### Details
-
-Displays a `details` element with helpful defaults and transitions. Can be used to make an accordion, or a collapse.
-
-@props
-
-- `class` 
-- `id` 
-- `open` 
-- `transition` - slides the content, set to `false` to remove
-
-@slots
-
-| name      | purpose                         | default value  | slot props |
-| --------- | ------------------------------- | -------------- | ---------- |
-| `summary` | `summary` element contents      | empty          | `open`     |
-| `content` | contents when details is `open` | empty          | none       |
-
-@example
-
-```svelte
-<script lang="ts">
-	import { Details } from "drab";
-	import Chevron from "../../site/svg/Chevron.svelte";
-</script>
-
-<Details class="border-b">
-	<svelte:fragment slot="summary" let:open>
-		<div class="link flex items-center justify-between gap-8 p-4">
-			<div>Does it work without JavaScript?</div>
-			<div class="transition" class:rotate-180={open}>
-				<Chevron />
-			</div>
-		</div>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<div class="px-4 pb-4">Yes.</div>
-	</svelte:fragment>
-</Details>
-```
--->
-
-<script>import { onMount } from "svelte";
-import { slide } from "svelte/transition";
-import { prefersReducedMotion } from "../util/accessibility";
-import { duration } from "../util/transition";
-let className = "";
-export { className as class };
-export let id = "";
-export let transition = { duration };
-export let open = false;
-let clientJs = false;
-const toggleOpen = () => {
-  open = !open;
-};
-onMount(() => {
-  clientJs = true;
-  if (prefersReducedMotion())
-    transition = false;
-});
-</script>
-
-<div class={className} {id}>
-	<details bind:open>
-		<!-- svelte-ignore a11y-no-redundant-roles -->
-		<summary
-			role="button"
-			tabindex="0"
-			on:click|preventDefault={toggleOpen}
-			on:keydown={(e) => {
-				if (e.key === "Enter") {
-					e.preventDefault();
-					toggleOpen();
-				}
-			}}
-		>
-			<slot name="summary" {open} />
-		</summary>
-		{#if !clientJs || !transition}
-			<slot name="content" />
-		{/if}
-	</details>
-	{#if clientJs && open && transition}
-		<!-- outside the details for the transition -->
-		<div transition:slide={transition}>
-			<slot name="content" />
-		</div>
-	{/if}
-</div>
-
-<style>
-	summary {
-		list-style: none;
-	}
-	summary::-webkit-details-marker {
-		display: none;
-	}
-</style>

package/dist/components/Details.svelte.d.ts

@@ -1,67 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type SlideParams } from "svelte/transition";
-declare const __propDef: {
-    props: {
-        class?: string | undefined;
-        id?: string | undefined;
-        /** slides the content, set to `false` to remove */ transition?: false | SlideParams | undefined;
-        open?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        summary: {
-            open: boolean;
-        };
-        content: {};
-    };
-};
-export type DetailsProps = typeof __propDef.props;
-export type DetailsEvents = typeof __propDef.events;
-export type DetailsSlots = typeof __propDef.slots;
-/**
- * ### Details
- *
- * Displays a `details` element with helpful defaults and transitions. Can be used to make an accordion, or a collapse.
- *
- * @props
- *
- * - `class`
- * - `id`
- * - `open`
- * - `transition` - slides the content, set to `false` to remove
- *
- * @slots
- *
- * | name      | purpose                         | default value  | slot props |
- * | --------- | ------------------------------- | -------------- | ---------- |
- * | `summary` | `summary` element contents      | empty          | `open`     |
- * | `content` | contents when details is `open` | empty          | none       |
- *
- * @example
- *
- * ```svelte
- * <script lang="ts">
- * import { Details } from "drab";
- * import Chevron from "../../site/svg/Chevron.svelte";
- * </script>
- *
- * <Details class="border-b">
- * <svelte:fragment slot="summary" let:open>
- * 	<div class="link flex items-center justify-between gap-8 p-4">
- * 		<div>Does it work without JavaScript?</div>
- * 		<div class="transition" class:rotate-180={open}>
- * 			<Chevron />
- * 		</div>
- * 	</div>
- * </svelte:fragment>
- * <svelte:fragment slot="content">
- * 	<div class="px-4 pb-4">Yes.</div>
- * </svelte:fragment>
- * </Details>
- * ```
- */
-export default class Details extends SvelteComponent<DetailsProps, DetailsEvents, DetailsSlots> {
-}
-export {};