sveltacular 0.0.75 → 0.0.76

package/dist/navigation/dropdown-button/dropdown-button.svelte

@@ -1,20 +1,27 @@
 <script>import { AngleUpIcon } from "../../index.js";
+import { hasContext } from "svelte";
 export let open = false;
-export let text;
+export let text = void 0;
 export let style = "standard";
 export let icon = "arrow";
 const onClick = () => {
   open = !open;
 };
+$:
+  hasText = text && text.length > 0;
 </script>
 
 <div class="dropdown-button {style} icon-{icon}" class:open>
-	<button on:click={onClick}>
-		<div class="text">
-			{text}
-		</div>
+	<button on:click={onClick} class:hasText>
+		{#if hasText}
+			<div class="text">
+				{text}
+			</div>
+		{/if}
 		<div class="icon">
-			<AngleUpIcon />
+			<span>
+				<AngleUpIcon />
+			</span>
 		</div>
 	</button>
 	{#if open}
@@ -30,7 +37,7 @@ const onClick = () => {
 }
 .dropdown-button button {
   width: 100%;
-  min-width: 10rem;
+  min-width: 7rem;
   position: relative;
   text-align: left;
   cursor: pointer;
@@ -45,7 +52,6 @@ const onClick = () => {
   line-height: 1.25rem;
   padding: 0.5rem 1rem;
   font-family: var(--base-font-family, sans-serif);
-  text-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5);
   background-color: var(--button-secondary-bg, #555);
   border-color: var(--button-secondary-border, #aaa);
   color: var(--button-secondary-fg, #fff);
@@ -54,11 +60,22 @@ const onClick = () => {
   background-color: var(--button-secondary-hover-bg, #333);
   color: var(--button-secondary-hover-fg, #fff);
 }
-.dropdown-button button .text {
-  padding-right: 2rem;
-}
 .dropdown-button button .icon {
   display: block;
+  text-align: center;
+  line-height: 1.5rem;
+}
+.dropdown-button button .icon span {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+}
+.dropdown-button button.hasText .text {
+  padding-right: 2rem;
+  min-height: 1.5rem;
+  line-height: 1.5rem;
+}
+.dropdown-button button.hasText .icon {
   position: absolute;
   top: 0;
   right: 0;
@@ -73,8 +90,11 @@ const onClick = () => {
   min-width: 100%;
   background-color: #fff;
   color: #000;
-  border: 1px solid #ccc;
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--button-secondary-border, #aaa);
   z-index: 999;
+  text-align: center;
 }
 .dropdown-button.open .icon {
   transition: transform 0.3s linear;

package/dist/navigation/dropdown-button/dropdown-button.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         open?: boolean | undefined;
-        text: string;
+        text?: string | undefined;
         style?: "ghost" | "standard" | undefined;
         icon?: "none" | "arrow" | undefined;
     };

package/dist/tables/data-grid.svelte

@@ -9,10 +9,12 @@ 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 DropdownItem from "../generic/dropdown-item/dropdown-item.svelte";
 import Empty from "../generic/empty/empty.svelte";
 import Pill from "../generic/pill/pill.svelte";
 import FolderOpenIcon from "../icons/folder-open-icon.svelte";
 import { formatDateTime } from "../index.js";
+import DropdownButton from "../navigation/dropdown-button/dropdown-button.svelte";
 import Pagination from "../navigation/pagination/pagination.svelte";
 import Loading from "../placeholders/loading.svelte";
 import TableCaption from "./table-caption.svelte";
@@ -21,7 +23,7 @@ export let captionAlign = "center";
 export let rows = void 0;
 export let cols;
 export let pagination = void 0;
-export let actions = [];
+export let actions = void 0;
 export let onPageChange = null;
 const getColType = (col) => {
   if (col.type)
@@ -74,7 +76,7 @@ const filterRows = () => {
   return rows.filter((_row, index) => index >= startIndex && index < endIndex);
 };
 $:
-  hasActionCol = actions.length > 0;
+  hasActionCol = actions?.items && actions.items.length > 0;
 $:
   colCount = Math.max(1, cols.filter((col) => !col.hide).length) + (hasActionCol ? 1 : 0);
 $:
@@ -122,7 +124,7 @@ $:
 							<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]}
+								{: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]}
@@ -134,11 +136,25 @@ $:
 							</TableCell>
 						{/if}
 					{/each}
-					{#if hasActionCol}
+					{#if hasActionCol && actions}
 						<TableCell type="actions">
-							{#each actions as action}
-								<Button collapse={true} size="sm" type="button" on:click={() => action.onClick(row)}>{action.text}</Button>
-							{/each}
+							{#if actions.type === 'dropdown'}
+								<DropdownButton text={actions.text ?? ''} style="ghost">
+									{#each actions.items as action}
+										<DropdownItem on:click={() => action.onClick(row)}>{action.text}</DropdownItem>
+									{/each}
+								</DropdownButton>
+							{:else}
+								{#each actions.items as action}
+									<Button
+										collapse={true}
+										size="sm"
+										type="button"
+										style={actions.type == 'link' ? 'link' : 'secondary'}
+										on:click={() => action.onClick(row)}>{action.text}</Button
+									>
+								{/each}
+							{/if}
 						</TableCell>
 					{/if}
 				</TableRow>

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

@@ -8,9 +8,13 @@ declare const __propDef: {
         cols: DataCol[];
         pagination?: PaginationProperties | undefined;
         actions?: {
-            text: string;
-            onClick: (row: JsonObject) => unknown;
-        }[] | undefined;
+            text?: string | undefined;
+            type?: string | undefined;
+            items: {
+                text: string;
+                onClick: (row: JsonObject) => unknown;
+            }[];
+        } | undefined;
         /**
              * Handle page change, which should return the new filtered/fetched rows.
              */ onPageChange?: ((pagination: PaginationProperties) => Promise<JsonObject[]>) | null | undefined;

package/package.json

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