drab 3.0.1 → 3.0.3

package/dist/components/CopyButton.svelte

@@ -3,13 +3,12 @@
 
 ### CopyButton
 
-Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard) to copy data to the clipboard. Falls back to `writeText` if `write` is not supported and `blob.type` is text. If JavaScript is disabled, the button is disabled and `blobParts.join()` is displayed after the button if `blob.type` is text.
+Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard) to copy data to the clipboard. Falls back to `writeText` if `write` is not supported and `blob.type` is text.
 
 @props
 
 - `blobParts` - array of `BlobParts` to copy - [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob#parameters)
 - `blob` - use a blob in instead of `blobParts` and `options`, defaults to `new Blob(blobParts, options)`
-- `classNoscript` - `noscript` class
 - `class` 
 - `id` 
 - `options` - defaults to `{ type: "text/plain" }` - [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob#parameters)
@@ -27,9 +26,13 @@ Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipbo
 ```svelte
 <script lang="ts">
 	import { CopyButton } from "drab";
+
+	let value = "Text to copy";
 </script>
 
-<CopyButton class="btn" blobParts={["Text to copy"]} />
+<input class="input mb-4" type="text" bind:value />
+
+<CopyButton class="btn" blobParts={[value]} />
 ```
 -->
 
@@ -42,13 +45,14 @@ export let title = "";
 export let options = { type: "text/plain" };
 export let blobParts = void 0;
 export let blob = new Blob(blobParts, options);
-export let classNoscript = "";
 let disabled = true;
 let complete = false;
+let blobText;
+const setBlobText = async (blob2) => blobText = await blob2.text();
 const writeSupport = () => "write" in navigator.clipboard;
-const typeText = blob.type.startsWith("text");
 const canWriteText = () => {
   const writeTextSupport = "writeText" in navigator.clipboard;
+  const typeText = blob.type.startsWith("text");
   return writeTextSupport && typeText;
 };
 const copyText = async () => {
@@ -57,7 +61,7 @@ const copyText = async () => {
       const data = [new ClipboardItem({ [blob.type]: blob })];
       await navigator.clipboard.write(data);
     } else if (canWriteText()) {
-      await navigator.clipboard.writeText(blobParts ? blobParts.join() : "");
+      await navigator.clipboard.writeText(blobText);
     }
     complete = true;
     setTimeout(() => complete = false, delay);
@@ -65,10 +69,15 @@ const copyText = async () => {
     console.error(error);
   }
 };
-onMount(() => {
+onMount(async () => {
   if (writeSupport() || canWriteText())
     disabled = false;
 });
+$:
+  if (blobParts)
+    blob = new Blob(blobParts, options);
+$:
+  setBlobText(blob);
 </script>
 
 <button
@@ -85,9 +94,3 @@ onMount(() => {
 		<slot>Copy</slot>
 	{/if}
 </button>
-
-{#if typeText}
-	<noscript>
-		<span class={classNoscript}>{blobParts ? blobParts.join() : ""}</span>
-	</noscript>
-{/if}

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

@@ -7,7 +7,6 @@ declare const __propDef: {
         /** defaults to `{ type: "text/plain" }` - [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob#parameters) */ options?: BlobPropertyBag | undefined;
         /** array of `BlobParts` to copy - [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob#parameters) */ blobParts?: BlobPart[] | undefined;
         /** use a blob in instead of `blobParts` and `options`, defaults to `new Blob(blobParts, options)` */ blob?: Blob | undefined;
-        /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -23,13 +22,12 @@ export type CopyButtonSlots = typeof __propDef.slots;
 /**
  * ### CopyButton
  *
- * Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard) to copy data to the clipboard. Falls back to `writeText` if `write` is not supported and `blob.type` is text. If JavaScript is disabled, the button is disabled and `blobParts.join()` is displayed after the button if `blob.type` is text.
+ * Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard) to copy data to the clipboard. Falls back to `writeText` if `write` is not supported and `blob.type` is text.
  *
  * @props
  *
  * - `blobParts` - array of `BlobParts` to copy - [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob#parameters)
  * - `blob` - use a blob in instead of `blobParts` and `options`, defaults to `new Blob(blobParts, options)`
- * - `classNoscript` - `noscript` class
  * - `class`
  * - `id`
  * - `options` - defaults to `{ type: "text/plain" }` - [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob#parameters)
@@ -47,9 +45,13 @@ export type CopyButtonSlots = typeof __propDef.slots;
  * ```svelte
  * <script lang="ts">
  * import { CopyButton } from "drab";
+ *
+ * let value = "Text to copy";
  * </script>
  *
- * <CopyButton class="btn" blobParts={["Text to copy"]} />
+ * <input class="input mb-4" type="text" bind:value />
+ *
+ * <CopyButton class="btn" blobParts={[value]} />
  * ```
  */
 export default class CopyButton extends SvelteComponent<CopyButtonProps, CopyButtonEvents, CopyButtonSlots> {

package/dist/components/Editor.svelte

@@ -21,6 +21,12 @@
 - `selectionStartTextarea` - `selectionStart` value of the `textarea`
 - `valueTextarea` - `value` of the `textarea` element
 
+@Events
+
+| name    | event                   |
+| ------- | ----------------------- |
+| `input` | forward from `textarea` |
+
 @example
 
 ```svelte

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

@@ -60,6 +60,12 @@ export type EditorSlots = typeof __propDef.slots;
  * - `selectionStartTextarea` - `selectionStart` value of the `textarea`
  * - `valueTextarea` - `value` of the `textarea` element
  *
+ * @Events
+ *
+ * | name    | event                   |
+ * | ------- | ----------------------- |
+ * | `input` | forward from `textarea` |
+ *
  * @example
  *
  * ```svelte

package/dist/components/Popover.svelte

@@ -13,7 +13,7 @@ Displays a popover in relation to the `target`.
 - `class` 
 - `display` - shows / hides the popover
 - `id` 
-- `position` - where the popover is displayed in relation to the `target`
+- `position` - where the popover is displayed in relation to the `target`, ex: `br` is bottom, right aligned
 - `target` - target element to position the popover in relation to
 - `transition` - scales the popover, set to `false` to disable
 
@@ -66,33 +66,46 @@ export let transition = { duration, start };
 let popover;
 let coordinates = { x: 0, y: 0 };
 const setPosition = async () => {
-  if (position === "t" || position === "b") {
-    coordinates.x = target.offsetWidth / 2 - popover.offsetWidth / 2;
-    if (position === "t") {
+  if (position.startsWith("t") || position.startsWith("b")) {
+    if (position.startsWith("t")) {
       coordinates.y = -popover.offsetHeight;
     } else {
       coordinates.y = target.offsetHeight;
     }
+    if (position.endsWith("l")) {
+      coordinates.x = 0;
+    } else if (position.endsWith("r")) {
+      coordinates.x = target.offsetWidth - popover.offsetWidth;
+    } else {
+      coordinates.x = target.offsetWidth / 2 - popover.offsetWidth / 2;
+    }
   } else {
-    coordinates.y = target.offsetHeight / 2 - popover.offsetHeight / 2;
-    if (position === "l") {
+    if (position.startsWith("l")) {
       coordinates.x = -popover.offsetWidth;
     } else {
       coordinates.x = target.offsetWidth;
     }
+    if (position.endsWith("t")) {
+      coordinates.y = 0;
+    } else if (position.endsWith("b")) {
+      coordinates.y = target.offsetHeight - popover.offsetHeight;
+    } else {
+      coordinates.y = target.offsetHeight / 2 - popover.offsetHeight / 2;
+    }
   }
   const targetRect = target.getBoundingClientRect();
   coordinates.x += targetRect.x + window.scrollX;
   coordinates.y += targetRect.y + window.scrollY;
   await tick();
   const popoverRect = popover.getBoundingClientRect();
-  if (popoverRect.x < 0) {
-    coordinates.x += Math.abs(popoverRect.x);
+  const extraMargin = 10;
+  if (popoverRect.x < extraMargin) {
+    coordinates.x += Math.abs(popoverRect.x) + extraMargin;
   } else if (popoverRect.x + popover.offsetWidth > window.innerWidth) {
-    coordinates.x -= popoverRect.x + popover.offsetWidth - window.innerWidth + 16;
+    coordinates.x -= popoverRect.x + popover.offsetWidth - window.innerWidth + extraMargin;
   }
   if (popoverRect.y < 0) {
-    coordinates.y += Math.abs(popoverRect.y);
+    coordinates.y += Math.abs(popoverRect.y) + extraMargin;
   } else if (popoverRect.y + popover.offsetHeight > window.innerHeight) {
     coordinates.y -= popoverRect.y + popover.offsetHeight - window.innerHeight;
   }
@@ -130,5 +143,6 @@ onMount(() => {
 <style>
 	div {
 		position: absolute;
+		margin: 0;
 	}
 </style>

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

@@ -5,7 +5,7 @@ declare const __propDef: {
         class?: string | undefined;
         id?: string | undefined;
         /** shows / hides the popover */ display?: boolean | undefined;
-        /** where the popover is displayed in relation to the `target` */ position?: "t" | "b" | "l" | "r" | undefined;
+        /** where the popover is displayed in relation to the `target`, ex: `br` is bottom, right aligned */ position?: ("tr" | "tl" | "t" | "rt" | "r" | "rb" | "br" | "b" | "bl" | "lb" | "l" | "lt") | undefined;
         /** target element to position the popover in relation to */ target: HTMLElement;
         /** scales the popover, set to `false` to disable */ transition?: false | ScaleParams | undefined;
     };
@@ -32,7 +32,7 @@ export type PopoverSlots = typeof __propDef.slots;
  * - `class`
  * - `display` - shows / hides the popover
  * - `id`
- * - `position` - where the popover is displayed in relation to the `target`
+ * - `position` - where the popover is displayed in relation to the `target`, ex: `br` is bottom, right aligned
  * - `target` - target element to position the popover in relation to
  * - `transition` - scales the popover, set to `false` to disable
  *

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         /** sheet class - not the backdrop */ classSheet?: string | undefined;
         /** controls whether the sheet is displayed*/ display?: boolean | undefined;
         /** blurs the entire component, set to `false` to remove */ transition?: false | BlurParams | undefined;
-        /** determines the position of sheet */ position?: "t" | "b" | "l" | "r" | undefined;
+        /** determines the position of sheet */ position?: "t" | "r" | "b" | "l" | undefined;
         /** max width/height of sheet based on the `side` - can also use css instead */ maxSize?: number | undefined;
         /** flies the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "3.0.1",
+	"version": "3.0.3",
 	"description": "An Unstyled Svelte Component Library",
 	"keywords": [
 		"components",