drab 2.8.4 → 2.8.6

package/dist/components/Editor.svelte

@@ -11,7 +11,6 @@
 
 - `classButton` - `class` of all the `button` elements
 - `classControls` - `class` of the `div` that wraps the controls
-- `classNoscript` - `noscript` class
 - `classTextarea` - `class` of the `textarea` element
 - `contentElements` - an array of `EditorContentElement`s for the controls
 - `idControls` - `id` of the `div` that wraps the controls
@@ -25,46 +24,43 @@
 @example
 
 ```svelte
-<script lang="ts">
-	import { Editor } from "drab";
-</script>
-
-<Editor
-	classButton="btn"
-	classControls="flex gap-2"
-	classTextarea="border w-full h-36 p-2 rounded"
-	placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
-	contentElements={[
-		{
-			name: "Bullet",
-			text: "- ",
-			display: "block",
-			icon: "Bullet",
-		},
-		{
-			name: "Asterisk",
-			text: "*",
-			display: "wrap",
-			icon: "Asterisk",
-			key: "i",
-			class: "italic",
-		},
-		{
-			name: "Anchor",
-			text: "[text](href)",
-			display: "inline",
-			icon: "Anchor",
-			key: "[",
-		},
-	]}
-/>
+<script lang="ts">
+	import { Editor } from "drab";
+</script>
+
+<Editor
+	classButton="btn"
+	classControls="flex gap-2"
+	classTextarea="border w-full h-36 p-2 rounded mb-2"
+	placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
+	contentElements={[
+		{
+			name: "Bullet",
+			text: "- ",
+			display: "block",
+			icon: "Bullet",
+		},
+		{
+			name: "Italic",
+			text: "*",
+			display: "wrap",
+			icon: "Italic",
+			key: "i",
+			class: "italic",
+		},
+		{
+			name: "Anchor",
+			text: "[text](href)",
+			display: "inline",
+			icon: "Anchor",
+			key: "[",
+		},
+	]}
+/>
 ```
 -->
 
-<script context="module"></script>
-
 <script>import { onMount } from "svelte";
-import { messageNoScript } from "../util/messages";
 export let contentElements = [];
 export let valueTextarea = "";
 export let placeholderTextarea = "";
@@ -83,7 +79,6 @@ export let keyPairs = {
   '"': '"',
   "`": "`"
 };
-export let classNoscript = "";
 let clientJs = false;
 let textArea;
 contentElements.forEach((el) => {
@@ -379,9 +374,3 @@ onMount(() => clientJs = true);
 		</button>
 	{/each}
 </div>
-
-<noscript>
-	<div class={classNoscript}>
-		{messageNoScript}
-	</div>
-</noscript>

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

@@ -1,27 +1,21 @@
 import { SvelteComponent } from "svelte";
-import type { ComponentType } from "svelte";
-/**
- * - `EditorContentElement` to pass into the `contentElements` array prop
- * - `contentElements` prop creates a list of button controls to insert
- * text into the `TextAreaElement`
- */
-export interface EditorContentElement {
-    /** name of element */
-    name: string;
-    /** text to add */
-    text: string;
-    /** controls how the text is added */
-    display: "inline" | "block" | "wrap";
-    /** contents of the `button` */
-    icon: string | ComponentType;
-    /** keyboard shortcut */
-    key?: string;
-    /** class to apply to the specific `button` */
-    class?: string;
-}
+import { type ComponentType } from "svelte";
 declare const __propDef: {
     props: {
-        /** an array of `EditorContentElement`s for the controls */ contentElements?: EditorContentElement[] | undefined;
+        /** an array of `EditorContentElement`s for the controls */ contentElements?: {
+            /** name of element */
+            name: string;
+            /** text to add */
+            text: string;
+            /** controls how the text is added */
+            display: "inline" | "block" | "wrap";
+            /** contents of the `button` */
+            icon: string | ComponentType;
+            /** keyboard shortcut */
+            key?: string | undefined;
+            /** class to apply to the specific `button` */
+            class?: string | undefined;
+        }[] | undefined;
         /** `value` of the `textarea` element */ valueTextarea?: string | undefined;
         /** `placeholder` of the `textarea` element */ placeholderTextarea?: string | undefined;
         /** `class` of the `textarea` element */ classTextarea?: string | undefined;
@@ -34,7 +28,6 @@ declare const __propDef: {
         /** keys that will auto-close if typed, value is their closing character */ keyPairs?: {
             [key: string]: string;
         } | undefined;
-        /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
         input: Event;
@@ -57,7 +50,6 @@ export type EditorSlots = typeof __propDef.slots;
  *
  * - `classButton` - `class` of all the `button` elements
  * - `classControls` - `class` of the `div` that wraps the controls
- * - `classNoscript` - `noscript` class
  * - `classTextarea` - `class` of the `textarea` element
  * - `contentElements` - an array of `EditorContentElement`s for the controls
  * - `idControls` - `id` of the `div` that wraps the controls
@@ -78,7 +70,7 @@ export type EditorSlots = typeof __propDef.slots;
  * <Editor
  * classButton="btn"
  * classControls="flex gap-2"
- * classTextarea="border w-full h-36 p-2 rounded"
+ * classTextarea="border w-full h-36 p-2 rounded mb-2"
  * placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
  * contentElements={[
  * 	{
@@ -88,10 +80,10 @@ export type EditorSlots = typeof __propDef.slots;
  * 		icon: "Bullet",
  * 	},
  * 	{
- * 		name: "Asterisk",
+ * 		name: "Italic",
  * 		text: "*",
  * 		display: "wrap",
- * 		icon: "Asterisk",
+ * 		icon: "Italic",
  * 		key: "i",
  * 		class: "italic",
  * 	},

package/dist/components/FullscreenButton.svelte

@@ -7,7 +7,6 @@ Make the document or a specific element fullscreen.
 
 @props
 
-- `classNoscript` - `noscript` class
 - `class` 
 - `confirmMessage` - message to display in the `confirm` popup, defaults to empty string `""` -- disabled
 - `id` 
@@ -24,32 +23,30 @@ Make the document or a specific element fullscreen.
 @example
 
 ```svelte
-<script lang="ts">
-	import { FullscreenButton } from "drab";
-
-	let target: HTMLDivElement;
-</script>
-
-<FullscreenButton class="btn" />
-
-<div bind:this={target} class="mt-8 rounded bg-neutral-800 p-4 text-neutral-50">
-	<div class="mb-2">Target element</div>
-	<FullscreenButton {target} class="btn btn-s bg-neutral-50">
-		Enable Element Fullscreen
-	</FullscreenButton>
-</div>
+<script lang="ts">
+	import { FullscreenButton } from "drab";
+
+	let target: HTMLDivElement;
+</script>
+
+<FullscreenButton class="btn" />
+
+<div bind:this={target} class="mt-8 rounded bg-neutral-800 p-4 text-neutral-50">
+	<div class="mb-2">Target element</div>
+	<FullscreenButton {target} class="btn btn-s bg-neutral-50">
+		Enable Element Fullscreen
+	</FullscreenButton>
+</div>
 ```
 -->
 
 <script>import { onMount } from "svelte";
-import { messageNoScript } from "../util/messages";
 let className = "";
 export { className as class };
 export let id = "";
 export let title = "";
 export let target = null;
 export let confirmMessage = "";
-export let classNoscript = "";
 let disabled = true;
 let fullscreen = false;
 const onClick = () => {
@@ -91,5 +88,3 @@ onMount(() => {
 		<slot>Enable Fullscreen</slot>
 	{/if}
 </button>
-
-<noscript><div class={classNoscript}>{messageNoScript}</div></noscript>

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

@@ -6,7 +6,6 @@ declare const __propDef: {
         title?: string | undefined;
         /** element to make fullscreen (defaults to `document.documentElement` upon mount) */ target?: HTMLElement | null | undefined;
         /** message to display in the `confirm` popup, defaults to empty string `""` -- disabled */ confirmMessage?: string | undefined;
-        /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -26,7 +25,6 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `classNoscript` - `noscript` class
  * - `class`
  * - `confirmMessage` - message to display in the `confirm` popup, defaults to empty string `""` -- disabled
  * - `id`

package/dist/components/Popover.svelte

@@ -1,11 +1,11 @@
-<!--
-@component
-
-### Popover
-
-Displays a popover relatively positioned to the target. Does not require the target to be `position: relative;`.
-
-@props
+<!--
+@component
+
+### Popover
+
+Displays a popover relatively positioned to the target. Does not require the target to be `position: relative;`.
+
+@props
 
 - `class` 
 - `display` - shows / hides the popover
@@ -14,41 +14,41 @@ Displays a popover relatively positioned to the target. Does not require the tar
 - `target` - target element to position the popover in relation to
 - `transition` - scales the popover, set to `false` to disable
 
-@slots
-
-| name       | purpose                         | default value |
-| ---------- | ------------------------------- | ------------- |
-| `default`  | default                         | Popover       |
-
-@example
+@slots
+
+| name       | purpose                         | default value |
+| ---------- | ------------------------------- | ------------- |
+| `default`  | default                         | Popover       |
+
+@example
 
 ```svelte
-<script lang="ts">
-	import { Popover } from "drab";
-
-	let target: HTMLButtonElement;
-
-	let display = false;
-
-	const open = () => (display = true);
-	const close = () => (display = false);
-</script>
-
-<button class="btn" type="button" bind:this={target} on:click={open}>
-	Open
-</button>
-
-<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" on:click={close}>Close</button>
-		<button class="btn" on:click={close}>Close</button>
-		<button class="btn" on:click={close}>Close</button>
-	</div>
-</Popover>
+<script lang="ts">
+	import { Popover } from "drab";
+
+	let target: HTMLButtonElement;
+
+	let display = false;
+
+	const open = () => (display = true);
+	const close = () => (display = false);
+</script>
+
+<button class="btn" type="button" bind:this={target} on:click={open}>
+	Open
+</button>
+
+<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" on:click={close}>Close</button>
+		<button class="btn" on:click={close}>Close</button>
+		<button class="btn" on:click={close}>Close</button>
+	</div>
+</Popover>
 ```
--->
-
+-->
+
 <script>import { prefersReducedMotion } from "../util/accessibility";
 import { duration, start } from "../util/transition";
 import { onMount, tick } from "svelte";
@@ -106,26 +106,26 @@ onMount(() => {
   if (prefersReducedMotion())
     transition = false;
 });
-</script>
-
-<svelte:body on:keydown={onKeyDown} />
-
-{#if display}
-	<div
-		role="dialog"
-		bind:this={popover}
-		class={className}
-		{id}
-		style:top="{coordinates.y}px"
-		style:left="{coordinates.x}px"
-		transition:scale={transition ? transition : { duration: 0 }}
-	>
-		<slot>Popover</slot>
-	</div>
-{/if}
-
-<style>
-	div {
-		position: absolute;
-	}
-</style>
+</script>
+
+<svelte:body on:keydown={onKeyDown} />
+
+{#if display}
+	<div
+		role="dialog"
+		bind:this={popover}
+		class={className}
+		{id}
+		style:top="{coordinates.y}px"
+		style:left="{coordinates.x}px"
+		transition:scale={transition ? transition : { duration: 0 }}
+	>
+		<slot>Popover</slot>
+	</div>
+{/if}
+
+<style>
+	div {
+		position: absolute;
+	}
+</style>

package/dist/components/ShareButton.svelte

@@ -30,50 +30,49 @@ Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Naviga
 @example
 
 ```svelte
-<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>
-	<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 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>
+	<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 = "";
@@ -127,8 +126,6 @@ onMount(() => clientJs = true);
 
 <a href="/" bind:this={downloadAnchor} style:display="none">Download</a>
 
-<noscript>
-	<span class={classNoscript}>
-		{shareData.url ? shareData.url : messageNoScript}
-	</span>
-</noscript>
+{#if shareData.url}
+	<noscript><span class={classNoscript}>{shareData.url}</span></noscript>
+{/if}