drab 2.6.1 → 2.8.0

package/dist/components/ShareButton.svelte

@@ -3,16 +3,22 @@
 
 ### ShareButton
 
-Uses the navigator api to share or copy a url link depending on browser support.
+Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) to share data. Progressively enhances according to browser support.
+
+- If the browser cannot share the provided data:
+	- `url` - uses the the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy
+	- `files` - uses a hidden `anchor` element to download the first file in the `files` array
+- If no JavaScript:
+	- `button` is disabled
+	- `url` - displayed after the button
 
 @props
 
 - `classNoscript` - `noscript` class
 - `class` 
 - `id` 
-- `text` - prefixed text in share message
-- `title` - title of share message and `button` attribute, defaults to end of url
-- `url` - url to be shared
+- `shareData` - [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
+- `title` 
 
 @slots
 
@@ -24,43 +30,81 @@ Uses the navigator api to share or copy a url link depending on browser support.
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { ShareButton } from "drab";
+
+	let fileInput: HTMLInputElement;
+
+	let fileShareData: ShareData;
+
+	const onInput = () => {
+		if (fileInput.files) {
+			fileShareData.files = [fileInput.files[0]];
+		}
+	};
 </script>
 
+<ShareButton
+	class="btn mb-8"
+	shareData={{
+		text: "Check out this page: ",
+		title: "drab",
+		url: "https://drab.robino.dev",
+	}}
+>
+	Share URL
+</ShareButton>
+
 <div>
-	<ShareButton
-		class="btn"
-		text="Check out this page: "
-		title="drab"
-		url="https://drab.robino.dev"
+	<label class="label" for="fileInput">Upload File</label>
+	<input
+		type="file"
+		id="fileInput"
+		class="input mb-4"
+		bind:this={fileInput}
+		on:input={onInput}
 	/>
+	<ShareButton class="btn" bind:shareData={fileShareData}>
+		Share File
+	</ShareButton>
 </div>
 ```
 -->
 
 <script>import { onMount } from "svelte";
 import { delay } from "../util/delay";
+import { messageNoScript } from "../util/messages";
 let className = "";
 export { className as class };
 export let id = "";
-export let text = "";
-export let url;
-export let title = url.split("/").splice(-1)[0];
+export let title = "";
+export let shareData = {};
+let downloadAnchor;
 export let classNoscript = "";
 let clientJs = false;
 let complete = false;
 const onClick = async () => {
-  try {
-    if (navigator.canShare) {
-      await navigator.share({ text, url, title });
-    } else {
-      await navigator.clipboard.writeText(url);
+  if (navigator.canShare && navigator.canShare(shareData)) {
+    try {
+      await navigator.share(shareData);
+    } catch (error) {
+      if (error.name !== "AbortError") {
+        console.error(error);
+      }
+    }
+  } else if (shareData.url) {
+    try {
+      await navigator.clipboard.writeText(shareData.url);
       complete = true;
       setTimeout(() => complete = false, delay);
+    } catch (error) {
+      console.error(error);
     }
-  } catch (error) {
-    console.log(error);
+  } else if (shareData.files) {
+    const file = shareData.files[0];
+    downloadAnchor.download = file.name;
+    downloadAnchor.href = URL.createObjectURL(file);
+    downloadAnchor.click();
   }
 };
 onMount(() => clientJs = true);
@@ -68,7 +112,7 @@ onMount(() => clientJs = true);
 
 <button
 	type="button"
-	disabled={!clientJs}
+	disabled={!clientJs || (!shareData.url && !shareData.files)}
 	on:click={onClick}
 	class={className}
 	{id}
@@ -81,4 +125,10 @@ onMount(() => clientJs = true);
 	{/if}
 </button>
 
-<noscript><span class={classNoscript}>{url}</span></noscript>
+<a href="/" bind:this={downloadAnchor} style:display="none">Download</a>
+
+<noscript>
+	<span class={classNoscript}>
+		{shareData.url ? shareData.url : messageNoScript}
+	</span>
+</noscript>

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

@@ -3,9 +3,8 @@ declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
-        /** prefixed text in share message */ text?: string | undefined;
-        /** url to be shared */ url: string;
-        /** title of share message and `button` attribute, defaults to end of url */ title?: string | undefined;
+        title?: string | undefined;
+        /** [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) */ shareData?: ShareData | undefined;
         /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
@@ -22,16 +21,22 @@ export type ShareButtonSlots = typeof __propDef.slots;
 /**
  * ### ShareButton
  *
- * Uses the navigator api to share or copy a url link depending on browser support.
+ * Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) to share data. Progressively enhances according to browser support.
+ *
+ * - If the browser cannot share the provided data:
+ * - `url` - uses the the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy
+ * - `files` - uses a hidden `anchor` element to download the first file in the `files` array
+ * - If no JavaScript:
+ * - `button` is disabled
+ * - `url` - displayed after the button
  *
  * @props
  *
  * - `classNoscript` - `noscript` class
  * - `class`
  * - `id`
- * - `text` - prefixed text in share message
- * - `title` - title of share message and `button` attribute, defaults to end of url
- * - `url` - url to be shared
+ * - `shareData` - [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
+ * - `title`
  *
  * @slots
  *
@@ -43,17 +48,43 @@ export type ShareButtonSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { ShareButton } from "drab";
+ *
+ * let fileInput: HTMLInputElement;
+ *
+ * let fileShareData: ShareData;
+ *
+ * const onInput = () => {
+ * 	if (fileInput.files) {
+ * 		fileShareData.files = [fileInput.files[0]];
+ * 	}
+ * };
  * </script>
  *
- * <div>
  * <ShareButton
- * 	class="btn"
- * 	text="Check out this page: "
- * 	title="drab"
- * 	url="https://drab.robino.dev"
+ * class="btn mb-8"
+ * shareData={{
+ * 	text: "Check out this page: ",
+ * 	title: "drab",
+ * 	url: "https://drab.robino.dev",
+ * }}
+ * >
+ * Share URL
+ * </ShareButton>
+ *
+ * <div>
+ * <label class="label" for="fileInput">Upload File</label>
+ * <input
+ * 	type="file"
+ * 	id="fileInput"
+ * 	class="input mb-4"
+ * 	bind:this={fileInput}
+ * 	on:input={onInput}
  * />
+ * <ShareButton class="btn" bind:shareData={fileShareData}>
+ * 	Share File
+ * </ShareButton>
  * </div>
  * ```
  */

package/dist/components/Sheet.svelte

@@ -11,11 +11,10 @@ Creates a sheet element based on the `position` provided.
 - `class` 
 - `display` - controls whether the sheet is displayed
 - `id` 
-- `onClickClose` - close on click, defaults to `false` - only closes if clicked outside
+- `maxSize` - max width/height of sheet based on the `side` - can also use css instead
 - `position` - determines the position of sheet
-- `size` - width/height of sheet based on the `side` - can also use css instead
 - `transitionSheet` - slides the sheet, set to `false` to remove
-- `transition` - fades the entire component, set to `false` to remove
+- `transition` - blurs the entire component, set to `false` to remove
 
 @slots
 
@@ -28,7 +27,6 @@ Creates a sheet element based on the `position` provided.
 ```svelte
 <script lang="ts">
 	import { Sheet } from "drab";
-	import { X } from "../../site/svg/X.svelte";
 
 	let display = false;
 </script>
@@ -46,13 +44,8 @@ Creates a sheet element based on the `position` provided.
 >
 	<div class="mb-4 flex items-center justify-between">
 		<h2 class="my-0">Sheet</h2>
-		<button
-			type="button"
-			title="Close"
-			class="btn btn-s"
-			on:click={() => (display = false)}
-		>
-			<X />
+		<button type="button" class="btn btn-s" on:click={() => (display = false)}>
+			Close
 		</button>
 	</div>
 	<div>
@@ -68,7 +61,7 @@ Creates a sheet element based on the `position` provided.
 
 <script>import { onMount } from "svelte";
 import {
-  fade,
+  blur,
   fly
 } from "svelte/transition";
 import { prefersReducedMotion } from "../util/accessibility";
@@ -79,16 +72,10 @@ export let id = "";
 export let classSheet = "";
 export let display = false;
 export let transition = { duration };
-export let position = "right";
-export let size = 488;
+export let position = "left";
+export let maxSize = 488;
 export let transitionSheet = { duration };
-export let onClickClose = false;
 let sheet;
-const clickOutside = (e) => {
-  if (e.target instanceof Node && !sheet.contains(e.target) || onClickClose) {
-    display = false;
-  }
-};
 const onKeyDown = (e) => {
   if (e.key === "Escape") {
     display = false;
@@ -96,13 +83,13 @@ const onKeyDown = (e) => {
 };
 if (transitionSheet && !transitionSheet.x && !transitionSheet.y) {
   if (position === "bottom") {
-    transitionSheet.y = size;
+    transitionSheet.y = maxSize;
   } else if (position === "top") {
-    transitionSheet.y = -size;
+    transitionSheet.y = -maxSize;
   } else if (position === "right") {
-    transitionSheet.x = size;
+    transitionSheet.x = maxSize;
   } else {
-    transitionSheet.x = -size;
+    transitionSheet.x = -maxSize;
   }
 }
 onMount(() => {
@@ -119,12 +106,11 @@ onMount(() => {
 
 {#if display}
 	<div
-		role="button"
-		tabindex="0"
-		on:click={clickOutside}
-		on:keydown={onKeyDown}
-		transition:fade={transition ? transition : { duration: 0 }}
+		transition:blur={transition ? transition : { duration: 0 }}
 		class="d-backdrop {className}"
+		class:d-backdrop-bottom={position === "bottom"}
+		class:d-backdrop-top={position === "top"}
+		class:d-backdrop-right={position === "right"}
 		{id}
 	>
 		<div
@@ -132,48 +118,37 @@ onMount(() => {
 			bind:this={sheet}
 			transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
 			style={position === "top" || position === "bottom"
-				? `max-height: ${size}px;`
-				: `max-width: ${size}px`}
-			class="d-sheet {classSheet}"
-			class:d-bottom={position === "bottom"}
-			class:d-top={position === "top"}
-			class:d-left={position === "left"}
-			class:d-right={position === "right"}
+				? `max-height: ${maxSize}px;`
+				: `max-width: ${maxSize}px`}
+			class={classSheet}
 		>
 			<slot>Content</slot>
 		</div>
+		<button title="Close" on:click={() => (display = false)}></button>
 	</div>
 {/if}
 
 <style>
+	button {
+		flex-grow: 1;
+	}
 	.d-backdrop {
 		position: fixed;
-		display: grid;
+		display: flex;
 		z-index: 40;
 		top: 0;
 		bottom: 0;
 		left: 0;
 		right: 0;
 		overflow: hidden;
-		cursor: default;
-	}
-	.d-sheet {
-		margin: auto;
-	}
-	.d-bottom {
-		margin-bottom: 0;
-		width: 100%;
 	}
-	.d-top {
-		margin-top: 0;
-		width: 100%;
+	.d-backdrop-bottom {
+		flex-direction: column-reverse;
 	}
-	.d-right {
-		margin-right: 0;
-		height: 100%;
+	.d-backdrop-top {
+		flex-direction: column;
 	}
-	.d-left {
-		margin-left: 0;
-		height: 100%;
+	.d-backdrop-right {
+		flex-direction: row-reverse;
 	}
 </style>

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

@@ -1,16 +1,15 @@
 import { SvelteComponent } from "svelte";
-import { type FadeParams, type FlyParams } from "svelte/transition";
+import { type BlurParams, type FlyParams } from "svelte/transition";
 declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
         /** sheet class - not the backdrop */ classSheet?: string | undefined;
         /** controls whether the sheet is displayed*/ display?: boolean | undefined;
-        /** fades the entire component, set to `false` to remove */ transition?: false | FadeParams | undefined;
+        /** blurs the entire component, set to `false` to remove */ transition?: false | BlurParams | undefined;
         /** determines the position of sheet */ position?: "top" | "bottom" | "left" | "right" | undefined;
-        /** width/height of sheet based on the `side` - can also use css instead */ size?: number | undefined;
+        /** max width/height of sheet based on the `side` - can also use css instead */ maxSize?: number | undefined;
         /** slides the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
-        /** close on click, defaults to `false` - only closes if clicked outside */ onClickClose?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -33,11 +32,10 @@ export type SheetSlots = typeof __propDef.slots;
  * - `class`
  * - `display` - controls whether the sheet is displayed
  * - `id`
- * - `onClickClose` - close on click, defaults to `false` - only closes if clicked outside
+ * - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
  * - `position` - determines the position of sheet
- * - `size` - width/height of sheet based on the `side` - can also use css instead
  * - `transitionSheet` - slides the sheet, set to `false` to remove
- * - `transition` - fades the entire component, set to `false` to remove
+ * - `transition` - blurs the entire component, set to `false` to remove
  *
  * @slots
  *
@@ -50,7 +48,6 @@ export type SheetSlots = typeof __propDef.slots;
  * ```svelte
  * <script lang="ts">
  * import { Sheet } from "drab";
- * import { X } from "../../site/svg/X.svelte";
  *
  * let display = false;
  * </script>
@@ -68,13 +65,8 @@ export type SheetSlots = typeof __propDef.slots;
  * >
  * <div class="mb-4 flex items-center justify-between">
  * 	<h2 class="my-0">Sheet</h2>
- * 	<button
- * 		type="button"
- * 		title="Close"
- * 		class="btn btn-s"
- * 		on:click={() => (display = false)}
- * 	>
- * 		<X />
+ * 	<button type="button" class="btn btn-s" on:click={() => (display = false)}>
+ * 		Close
  * 	</button>
  * </div>
  * <div>

package/dist/components/Tabs.svelte

@@ -3,7 +3,7 @@
 
 ### Tabs
 
-Displays tabs and the active tab's content.
+Displays tabs and the selected tab's content.
 
 @props
 
@@ -15,15 +15,16 @@ Displays tabs and the active tab's content.
 - `classTab` - class of all title `button`s
 - `class` 
 - `id` 
-- `selectedIndex` - index of selected tab, defaults to 0
-- `tabs` - array of tabs
+- `selectedIndex` - index of selected tab, defaults to `0`
+- `tabs` - array of `TabsTab` objects
+- `transition` - fades the panel content, set to `false` to remove
 
 @slots
 
-| name      | purpose               | default value      | slot props      |
-| --------- | --------------------- | ------------------ | --------------- |
-| `default` | active item's content | `activeItem.panel` | `activeItem`    |
-| `tab`     | title of each tab     | `item.tab`         | `item`, `index` |
+| name    | purpose            | default value       | slot props             |
+| ------- | ------------------ | ------------------- | ---------------------- |
+| `panel` | active tab's panel | `selectedTab.panel` | `selectedTab`, `index` |
+| `tab`   | title of each tab  | `tab.tab`           | `tab`, `index`         |
 
 @example
 
@@ -35,10 +36,10 @@ Displays tabs and the active tab's content.
 
 <Tabs
 	class="mb-4"
-	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
-	classTab="btn btn-s rounded-sm p-1"
-	classTabActive="bg-white text-neutral-950"
-	classTabInactive="bg-neutral-200 text-neutral-500"
+	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
+	classTab="btn btn-s p-2"
+	classTabActive="bg-white text-neutral-950 shadow"
+	classTabInactive="bg-neutral-200 text-neutral-600"
 	classTabPanel="py-2"
 	tabs={[
 		{ tab: "Tab", panel: "Content" },
@@ -47,10 +48,10 @@ Displays tabs and the active tab's content.
 />
 
 <Tabs
-	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
-	classTab="btn btn-s rounded-sm p-1"
-	classTabActive="bg-white text-neutral-950"
-	classTabInactive="bg-neutral-200 text-neutral-500"
+	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
+	classTab="btn btn-s p-2"
+	classTabActive="bg-white text-neutral-950 shadow"
+	classTabInactive="bg-neutral-200 text-neutral-600"
 	classTabPanel="py-2"
 	tabs={[
 		{ tab: "Tab", panel: "Generated indexes" },
@@ -60,16 +61,17 @@ Displays tabs and the active tab's content.
 			data: { component: FullscreenButton },
 		},
 	]}
-	let:selectedTab
 >
-	<svelte:fragment slot="tab" let:item let:index>
-		{item.tab}
+	<svelte:fragment slot="tab" let:tab let:index>
+		{tab.tab}
 		{index + 1}
 	</svelte:fragment>
-	<div class="mb-2">{selectedTab.panel}</div>
-	{#if selectedTab.data?.component}
-		<svelte:component this={selectedTab.data.component} class="btn" />
-	{/if}
+	<svelte:fragment slot="panel" let:selectedTab>
+		<div class="mb-2">{selectedTab.panel}</div>
+		{#if selectedTab.data?.component}
+			<svelte:component this={selectedTab.data.component} class="btn" />
+		{/if}
+	</svelte:fragment>
 </Tabs>
 ```
 -->
@@ -78,6 +80,9 @@ Displays tabs and the active tab's content.
 
 <script>import { onMount } from "svelte";
 import { messageNoScript } from "../util/messages";
+import { fade } from "svelte/transition";
+import { duration } from "../util/transition";
+import { prefersReducedMotion } from "../util/accessibility";
 let className = "";
 export { className as class };
 export let id = "";
@@ -89,33 +94,45 @@ export let classNoscript = "";
 export let classTabPanel = "";
 export let tabs;
 export let selectedIndex = 0;
+export let transition = { duration };
 let clientJs = false;
-$:
-  selectedTab = tabs[selectedIndex];
-onMount(() => clientJs = true);
+onMount(() => {
+  if (prefersReducedMotion()) {
+    if (transition)
+      transition.duration = 0;
+  }
+  clientJs = true;
+});
+const panelId = "tabPanel-" + Math.random().toString().substring(2, 8);
 </script>
 
 <div class={className} {id}>
 	<div class={classTabList} role="tablist">
-		{#each tabs as item, index}
+		{#each tabs as tab, index}
 			<button
 				role="tab"
 				tabindex={index === selectedIndex ? 0 : -1}
 				aria-selected={index === selectedIndex}
-				aria-controls="tabpanel"
+				aria-controls={panelId}
 				disabled={!clientJs}
 				class="{classTab} {selectedIndex === index
 					? classTabActive
 					: ''} {selectedIndex !== index ? classTabInactive : ''}"
 				on:click={() => (selectedIndex = index)}
 			>
-				<slot name="tab" {item} {index}>{item.tab}</slot>
+				<slot name="tab" {tab} {index}>{tab.tab}</slot>
 			</button>
 		{/each}
 	</div>
-	<div class={classTabPanel} role="tabpanel" id="tabpanel">
-		<slot {selectedTab}>{selectedTab.panel}</slot>
-	</div>
+	{#each tabs as tab, index}
+		{#if index === selectedIndex}
+			<div class={classTabPanel} role="tabpanel" id={panelId}>
+				<div in:fade={transition ? transition : { duration: 0 }}>
+					<slot name="panel" selectedTab={tab} {index}>{tab.panel}</slot>
+				</div>
+			</div>
+		{/if}
+	{/each}
 	<noscript>
 		<div class={classNoscript}>{messageNoScript}</div>
 	</noscript>