drab 2.7.0 → 2.8.1

package/dist/components/FullscreenButton.svelte

@@ -9,7 +9,7 @@ Make the document or a specific element fullscreen.
 
 - `classNoscript` - `noscript` class
 - `class` 
-- `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
+- `confirmMessage` - message to display in the `confirm` popup, defaults to empty string `""` -- disabled
 - `id` 
 - `target` - element to make fullscreen (defaults to `document.documentElement` upon mount)
 - `title` 
@@ -24,22 +24,17 @@ Make the document or a specific element fullscreen.
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { FullscreenButton } from "drab";
 
-	let fullscreenDiv;
+	let target: HTMLDivElement;
 </script>
 
-<div>
-	<FullscreenButton class="btn" />
-</div>
+<FullscreenButton class="btn mb-8" />
 
-<div
-	bind:this={fullscreenDiv}
-	class="mt-4 rounded bg-neutral-800 p-4 text-neutral-50"
->
+<div bind:this={target} class="rounded bg-neutral-800 p-4 text-neutral-50">
 	<div class="mb-2">Target element</div>
-	<FullscreenButton target={fullscreenDiv} class="btn btn-s bg-neutral-50">
+	<FullscreenButton {target} class="btn btn-s bg-neutral-50">
 		Enable Element Fullscreen
 	</FullscreenButton>
 </div>
@@ -55,7 +50,7 @@ export let title = "";
 export let target = null;
 export let confirmMessage = "";
 export let classNoscript = "";
-let supported = false;
+let disabled = true;
 let fullscreen = false;
 const onClick = () => {
   if (fullscreen) {
@@ -74,7 +69,7 @@ const onClick = () => {
 };
 onMount(() => {
   if (document.documentElement.requestFullscreen)
-    supported = true;
+    disabled = false;
   if (!target)
     target = document.documentElement;
 });
@@ -84,7 +79,7 @@ onMount(() => {
 
 <button
 	type="button"
-	disabled={!supported}
+	{disabled}
 	on:click={onClick}
 	class={className}
 	{id}
@@ -97,8 +92,4 @@ onMount(() => {
 	{/if}
 </button>
 
-<noscript>
-	<div class={classNoscript}>
-		{messageNoScript}
-	</div>
-</noscript>
+<noscript><div class={classNoscript}>{messageNoScript}</div></noscript>

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

@@ -5,7 +5,7 @@ declare const __propDef: {
         id?: string | undefined;
         title?: string | undefined;
         /** element to make fullscreen (defaults to `document.documentElement` upon mount) */ target?: HTMLElement | null | undefined;
-        /** message to display in the `confirm` popup, set this to empty string `""` to disable `confirm` */ confirmMessage?: string | undefined;
+        /** message to display in the `confirm` popup, defaults to empty string `""` -- disabled */ confirmMessage?: string | undefined;
         /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
@@ -28,7 +28,7 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  *
  * - `classNoscript` - `noscript` class
  * - `class`
- * - `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
+ * - `confirmMessage` - message to display in the `confirm` popup, defaults to empty string `""` -- disabled
  * - `id`
  * - `target` - element to make fullscreen (defaults to `document.documentElement` upon mount)
  * - `title`
@@ -43,22 +43,17 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { FullscreenButton } from "drab";
  *
- * let fullscreenDiv;
+ * let target: HTMLDivElement;
  * </script>
  *
- * <div>
- * <FullscreenButton class="btn" />
- * </div>
+ * <FullscreenButton class="btn mb-8" />
  *
- * <div
- * bind:this={fullscreenDiv}
- * class="mt-4 rounded bg-neutral-800 p-4 text-neutral-50"
- * >
+ * <div bind:this={target} class="rounded bg-neutral-800 p-4 text-neutral-50">
  * <div class="mb-2">Target element</div>
- * <FullscreenButton target={fullscreenDiv} class="btn btn-s bg-neutral-50">
+ * <FullscreenButton {target} class="btn btn-s bg-neutral-50">
  * 	Enable Element Fullscreen
  * </FullscreenButton>
  * </div>

package/dist/components/Popover.svelte

@@ -3,12 +3,12 @@
 
 ### Popover
 
-Displays a popover relatively positioned to the target.
+Displays a popover relatively positioned to the target. Does not require the target to be `position: relative;`.
 
 @props
 
 - `class` 
-- `display` - if `eventType="click"`, controls the display
+- `display` - shows / hides the popover
 - `id` 
 - `position` - where the popover is displayed in relation to the target
 - `target` - target element to position the popover in relation to
@@ -19,7 +19,6 @@ Displays a popover relatively positioned to the target.
 | name       | purpose                         | default value |
 | ---------- | ------------------------------- | ------------- |
 | `default`  | default                         | Popover       |
-| `button`   | button contents                 | Open          |
 
 @example
 
@@ -27,8 +26,7 @@ Displays a popover relatively positioned to the target.
 <script lang="ts">
 	import { Popover } from "drab";
 
-	let button: HTMLButtonElement;
-	let hoverButton: HTMLButtonElement;
+	let target: HTMLButtonElement;
 
 	let display = false;
 </script>
@@ -36,13 +34,13 @@ Displays a popover relatively positioned to the target.
 <button
 	class="btn"
 	type="button"
-	bind:this={button}
+	bind:this={target}
 	on:click={() => (display = !display)}
 >
 	{display ? "Close" : "Open"}
 </button>
 
-<Popover target={button} bind:display class="p-2">
+<Popover {target} bind:display class="p-2">
 	<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
 		<div class="font-bold">Bottom</div>
 		<button class="btn">Button</button>
@@ -83,8 +81,8 @@ const setPosition = async () => {
     }
   }
   const targetRect = target.getBoundingClientRect();
-  coordinates.x += targetRect.x;
-  coordinates.y += targetRect.y;
+  coordinates.x += targetRect.x + window.scrollX;
+  coordinates.y += targetRect.y + window.scrollY;
   await tick();
   const popoverRect = popover.getBoundingClientRect();
   if (popoverRect.x < 0) {

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

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
-        /** if `eventType="click"`, controls the display */ display?: boolean | undefined;
+        /** shows / hides the popover */ display?: boolean | undefined;
         /** where the popover is displayed in relation to the target */ position?: "top" | "bottom" | "left" | "right" | undefined;
         /** target element to position the popover in relation to */ target: HTMLElement;
         /** fades in and out, set to false to disable */ transition?: false | FadeParams | undefined;
@@ -22,12 +22,12 @@ export type PopoverSlots = typeof __propDef.slots;
 /**
  * ### Popover
  *
- * Displays a popover relatively positioned to the target.
+ * Displays a popover relatively positioned to the target. Does not require the target to be `position: relative;`.
  *
  * @props
  *
  * - `class`
- * - `display` - if `eventType="click"`, controls the display
+ * - `display` - shows / hides the popover
  * - `id`
  * - `position` - where the popover is displayed in relation to the target
  * - `target` - target element to position the popover in relation to
@@ -38,7 +38,6 @@ export type PopoverSlots = typeof __propDef.slots;
  * | name       | purpose                         | default value |
  * | ---------- | ------------------------------- | ------------- |
  * | `default`  | default                         | Popover       |
- * | `button`   | button contents                 | Open          |
  *
  * @example
  *
@@ -46,8 +45,7 @@ export type PopoverSlots = typeof __propDef.slots;
  * <script lang="ts">
  * import { Popover } from "drab";
  *
- * let button: HTMLButtonElement;
- * let hoverButton: HTMLButtonElement;
+ * let target: HTMLButtonElement;
  *
  * let display = false;
  * </script>
@@ -55,13 +53,13 @@ export type PopoverSlots = typeof __propDef.slots;
  * <button
  * class="btn"
  * type="button"
- * bind:this={button}
+ * bind:this={target}
  * on:click={() => (display = !display)}
  * >
  * {display ? "Close" : "Open"}
  * </button>
  *
- * <Popover target={button} bind:display class="p-2">
+ * <Popover {target} bind:display class="p-2">
  * <div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
  * 	<div class="font-bold">Bottom</div>
  * 	<button class="btn">Button</button>

package/dist/components/ShareButton.svelte

@@ -3,16 +3,22 @@
 
 ### ShareButton
 
-Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) or the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) 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](https://developer.mozilla.org/en-US/docs/Web/API/Naviga
 @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](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) or the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) 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

@@ -3,7 +3,7 @@
 
 ### Sheet
 
-Creates a sheet element based on the `position` provided.
+Creates a sheet element based on the `position` provided. `maxSize` is set to width or height of the sheet depending on the `position` provided. The `transition` is calculated based on the `position` and `maxSize` of the sheet.
 
 @props
 
@@ -13,8 +13,8 @@ Creates a sheet element based on the `position` provided.
 - `id` 
 - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
 - `position` - determines the position of sheet
-- `transitionSheet` - slides the sheet, set to `false` to remove
-- `transition` - fades the entire component, set to `false` to remove
+- `transitionSheet` - flys the sheet, set to `false` to remove
+- `transition` - blurs the entire component, set to `false` to remove
 
 @slots
 
@@ -31,16 +31,15 @@ Creates a sheet element based on the `position` provided.
 	let display = false;
 </script>
 
-<div>
-	<button type="button" class="btn" on:click={() => (display = true)}>
-		Open
-	</button>
-</div>
+<button type="button" class="btn" on:click={() => (display = true)}>
+	Open
+</button>
 
 <Sheet
 	bind:display
 	class="bg-neutral-50/80 backdrop-blur"
 	classSheet="p-4 shadow bg-white"
+	position="right"
 >
 	<div class="mb-4 flex items-center justify-between">
 		<h2 class="my-0">Sheet</h2>
@@ -61,7 +60,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";
@@ -72,7 +71,7 @@ export let id = "";
 export let classSheet = "";
 export let display = false;
 export let transition = { duration };
-export let position = "right";
+export let position = "left";
 export let maxSize = 488;
 export let transitionSheet = { duration };
 let sheet;
@@ -106,7 +105,7 @@ onMount(() => {
 
 {#if display}
 	<div
-		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"}
@@ -120,11 +119,7 @@ onMount(() => {
 			style={position === "top" || position === "bottom"
 				? `max-height: ${maxSize}px;`
 				: `max-width: ${maxSize}px`}
-			class="d-sheet {classSheet}"
-			class:d-sheet-bottom={position === "bottom"}
-			class:d-sheet-top={position === "top"}
-			class:d-sheet-left={position === "left"}
-			class:d-sheet-right={position === "right"}
+			class={classSheet}
 		>
 			<slot>Content</slot>
 		</div>
@@ -155,23 +150,4 @@ onMount(() => {
 	.d-backdrop-right {
 		flex-direction: row-reverse;
 	}
-	.d-sheet {
-		margin: auto;
-	}
-	.d-sheet-bottom {
-		margin-bottom: 0;
-		width: 100%;
-	}
-	.d-sheet-top {
-		margin-top: 0;
-		width: 100%;
-	}
-	.d-sheet-right {
-		margin-right: 0;
-		height: 100%;
-	}
-	.d-sheet-left {
-		margin-left: 0;
-		height: 100%;
-	}
 </style>

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

@@ -1,15 +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;
         /** 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;
+        /** flys the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,7 +24,7 @@ export type SheetSlots = typeof __propDef.slots;
 /**
  * ### Sheet
  *
- * Creates a sheet element based on the `position` provided.
+ * Creates a sheet element based on the `position` provided. `maxSize` is set to width or height of the sheet depending on the `position` provided. The `transition` is calculated based on the `position` and `maxSize` of the sheet.
  *
  * @props
  *
@@ -34,8 +34,8 @@ export type SheetSlots = typeof __propDef.slots;
  * - `id`
  * - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
  * - `position` - determines the position of sheet
- * - `transitionSheet` - slides the sheet, set to `false` to remove
- * - `transition` - fades the entire component, set to `false` to remove
+ * - `transitionSheet` - flys the sheet, set to `false` to remove
+ * - `transition` - blurs the entire component, set to `false` to remove
  *
  * @slots
  *
@@ -52,16 +52,15 @@ export type SheetSlots = typeof __propDef.slots;
  * let display = false;
  * </script>
  *
- * <div>
  * <button type="button" class="btn" on:click={() => (display = true)}>
- * 	Open
+ * Open
  * </button>
- * </div>
  *
  * <Sheet
  * bind:display
  * class="bg-neutral-50/80 backdrop-blur"
  * classSheet="p-4 shadow bg-white"
+ * position="right"
  * >
  * <div class="mb-4 flex items-center justify-between">
  * 	<h2 class="my-0">Sheet</h2>