drab 4.1.6 → 5.0.0-beta.0

package/dist/components/FrettedChord.svelte

@@ -1,213 +0,0 @@
-<!--
-@component
-
-### FrettedChord
-
-Generates a fretted chord `svg` for instruments like guitar and ukulele.
-
-Try it out and generate code: [FrettedChord Creator](https://svelte.dev/repl/5771d5c3f3c34137a174c8c402ca0b2d?version=4.2.0)
-
-@props
-
-- `class` 
-- `id` 
-- `name` - name of chord
-- `notes` - list of the positioning of the notes required for the chord
-- `size` - total size of chord square in pixels, defaults to `150`
-- `strings` - total number of strings for the instrument
-
-@example
-
-```svelte
-<script lang="ts">
-	import { FrettedChord } from "drab";
-</script>
-
-<FrettedChord
-	class="font-mono"
-	name="D"
-	notes={[
-		{
-			finger: 0,
-			string: 4,
-			fret: 0,
-		},
-		{
-			finger: 1,
-			string: 3,
-			fret: 2,
-		},
-		{
-			finger: 2,
-			string: 1,
-			fret: 2,
-		},
-		{
-			finger: 3,
-			string: 2,
-			fret: 3,
-		},
-	]}
-/>
-```
--->
-
-<script>let className = "";
-export { className as class };
-export let id = "";
-export let strings = 6;
-export let name = "";
-export let size = 150;
-const boxSize = size * 0.61;
-const offset = (size - boxSize) / 2;
-const strokeWidth = size / 60;
-const stringList = Array.from(Array(strings).keys());
-export let notes = [];
-let notesList = structuredClone(notes);
-const usedStrings = notesList.map((note) => note.string);
-for (let i = 1; i < strings + 1; i++) {
-  if (!usedStrings.includes(i)) {
-    notesList.push({
-      finger: "X",
-      string: i,
-      fret: 0
-    });
-  }
-}
-const frets = notesList.map((note) => note.fret).filter((fret) => fret !== 0);
-if (!frets.length)
-  frets.push(0);
-const highFret = Math.max(...frets);
-const lowFret = Math.min(...frets);
-let fretRange = highFret - lowFret + 1;
-if (fretRange < 5)
-  fretRange = 5;
-let firstFret = lowFret;
-if (firstFret < 4 && highFret < 5) {
-  firstFret = 1;
-  if (lowFret !== 0)
-    fretRange += lowFret - 1;
-  if (lowFret === 2 && highFret < 5)
-    fretRange -= 1;
-  if (lowFret === 3 && highFret < 5)
-    fretRange -= 2;
-} else {
-  notesList.forEach((note) => {
-    if (note.fret !== 0) {
-      note.fret = note.fret - firstFret + 1;
-    }
-  });
-}
-const circleRadius = boxSize / fretRange / 2.3;
-const stringX = (string) => {
-  return boxSize / (strings - 1) * string + offset;
-};
-const fretY = (fret) => {
-  return boxSize / fretRange * fret + offset;
-};
-const noteX = (string) => {
-  return boxSize + offset - boxSize / (strings - 1) * (string - 1);
-};
-const noteY = (fret) => {
-  return boxSize / fretRange * fret + offset / 2 - boxSize / fretRange / 2;
-};
-</script>
-
-{#if notes.length}
-	<svg
-		width={size}
-		height={size}
-		stroke="currentColor"
-		fill="currentColor"
-		class={className}
-		{id}
-	>
-		<title>{name}</title>
-
-		<!-- BACKGROUND -->
-		<rect
-			width={boxSize}
-			height={boxSize}
-			fill="transparent"
-			x={offset}
-			y={offset / 2}
-			stroke-width={strokeWidth}
-		/>
-		<line
-			x1={offset - strokeWidth / 2}
-			y1={offset / 2 - strokeWidth / 2}
-			x2={boxSize + offset + strokeWidth / 2}
-			y2={offset / 2 - strokeWidth / 2}
-			stroke-width={strokeWidth * 2}
-		/>
-
-		<!-- FRETS -->
-		{#each Array.from(Array(fretRange).keys()) as fret}
-			<line
-				x1={offset}
-				y1={fretY(fret) - offset / 2}
-				x2={boxSize + offset}
-				y2={fretY(fret) - offset / 2}
-				stroke-width={strokeWidth}
-				opacity="0.2"
-			/>
-		{/each}
-
-		<!-- STRINGS -->
-		{#each stringList as string}
-			<line
-				x1={stringX(string)}
-				y1={offset / 2}
-				x2={stringX(string)}
-				y2={boxSize + offset / 2}
-				stroke-width={strokeWidth}
-			/>
-		{/each}
-
-		<!-- NOTES -->
-		{#each notesList as note}
-			{#if note.fret !== 0}
-				<circle
-					cx={noteX(note.string)}
-					cy={noteY(note.fret)}
-					r={circleRadius}
-				/>
-			{/if}
-			{#if note.finger !== 0}
-				<!-- RECOMMENDED FINGER -->
-				<text
-					x={noteX(note.string) - size / 50}
-					y={note.fret === 0
-						? offset / 2 - strokeWidth * 2.4
-						: size - offset * 1.1}
-					color="currentColor"
-					fill="currentColor"
-					font-size={size / 13}
-				>
-					{note.finger}
-				</text>
-			{/if}
-		{/each}
-
-		<!-- CHORD NAME -->
-		<text
-			x={offset}
-			y={size - offset / 2.5}
-			font-size={boxSize / 6}
-			font-weight="600"
-		>
-			{name}
-		</text>
-
-		<!-- STARTING FRET -->
-		{#if firstFret > 1}
-			<text
-				x={size - offset / 1.8}
-				y={offset / 2 + boxSize / 7}
-				font-size={size / 13}
-			>
-				{firstFret}f
-			</text>
-		{/if}
-	</svg>
-{/if}

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

@@ -1,79 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        class?: string | undefined;
-        id?: string | undefined;
-        /** total number of strings for the instrument */ strings?: number | undefined;
-        /** name of chord */ name?: string | undefined;
-        /** total size of chord square in pixels, defaults to `150` */ size?: number | undefined;
-        /** list of the positioning of the notes required for the chord */ notes?: {
-            /** recommended finger to use */
-            finger: number | string;
-            /** string number */
-            string: number;
-            /** fret number */
-            fret: number;
-        }[] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FrettedChordProps = typeof __propDef.props;
-export type FrettedChordEvents = typeof __propDef.events;
-export type FrettedChordSlots = typeof __propDef.slots;
-/**
- * ### FrettedChord
- *
- * Generates a fretted chord `svg` for instruments like guitar and ukulele.
- *
- * Try it out and generate code: [FrettedChord Creator](https://svelte.dev/repl/5771d5c3f3c34137a174c8c402ca0b2d?version=4.2.0)
- *
- * @props
- *
- * - `class`
- * - `id`
- * - `name` - name of chord
- * - `notes` - list of the positioning of the notes required for the chord
- * - `size` - total size of chord square in pixels, defaults to `150`
- * - `strings` - total number of strings for the instrument
- *
- * @example
- *
- * ```svelte
- * <script lang="ts">
- * import { FrettedChord } from "drab";
- * </script>
- *
- * <FrettedChord
- * class="font-mono"
- * name="D"
- * notes={[
- * 	{
- * 		finger: 0,
- * 		string: 4,
- * 		fret: 0,
- * 	},
- * 	{
- * 		finger: 1,
- * 		string: 3,
- * 		fret: 2,
- * 	},
- * 	{
- * 		finger: 2,
- * 		string: 1,
- * 		fret: 2,
- * 	},
- * 	{
- * 		finger: 3,
- * 		string: 2,
- * 		fret: 3,
- * 	},
- * ]}
- * />
- * ```
- */
-export default class FrettedChord extends SvelteComponent<FrettedChordProps, FrettedChordEvents, FrettedChordSlots> {
-}
-export {};

package/dist/components/FullscreenButton.svelte

@@ -1,95 +0,0 @@
-<!--
-@component
-
-### FullscreenButton
-
-Make the document or a `target` element fullscreen.
-
-@props
-
-- `class` 
-- `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` 
-
-@slots
-
-| name       | purpose                                        | default value        |
-| ---------- | ---------------------------------------------- | -------------------- |
-| `default`  | content to display when fullscreen is disabled | `Enabled Fullscreen` |
-| `enabled`  | content to display when fullscreen is enabled  | `Exit Fullscreen`    |
-
-@example
-
-```svelte
-<script lang="ts">
-	import { FullscreenButton } from "drab";
-
-	let target: HTMLDivElement;
-</script>
-
-<FullscreenButton class="button button-primary" />
-
-<div bind:this={target} class="card mt-8 bg-muted">
-	<div class="mb-2">Target element</div>
-	<FullscreenButton {target} class="button button-primary">
-		Enable Element Fullscreen
-	</FullscreenButton>
-</div>
-```
--->
-
-<script>import { onMount } from "svelte";
-let className = "";
-export { className as class };
-export let id = "";
-export let title = "";
-export let target = null;
-export let confirmMessage = "";
-let disabled = true;
-let fullscreen = false;
-const onClick = () => {
-  if (fullscreen) {
-    document.exitFullscreen();
-  } else {
-    if (target && target.requestFullscreen) {
-      if (confirmMessage) {
-        const permission = confirm(confirmMessage);
-        if (permission)
-          target.requestFullscreen();
-      } else {
-        target.requestFullscreen();
-      }
-    }
-  }
-};
-const syncFullscreen = () => {
-  fullscreen = document.fullscreenElement !== null;
-};
-onMount(() => {
-  if (document.documentElement.requestFullscreen) {
-    syncFullscreen();
-    disabled = false;
-  }
-  if (!target)
-    target = document.documentElement;
-});
-</script>
-
-<svelte:window on:fullscreenchange={syncFullscreen} />
-
-<button
-	type="button"
-	{disabled}
-	on:click={onClick}
-	class={className}
-	{id}
-	{title}
->
-	{#if fullscreen}
-		<slot name="enabled">Exit Fullscreen</slot>
-	{:else}
-		<slot>Enable Fullscreen</slot>
-	{/if}
-</button>

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

@@ -1,62 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        class?: string | undefined;
-        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, defaults to empty string `""` - disabled */ confirmMessage?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        enabled: {};
-        default: {};
-    };
-};
-export type FullscreenButtonProps = typeof __propDef.props;
-export type FullscreenButtonEvents = typeof __propDef.events;
-export type FullscreenButtonSlots = typeof __propDef.slots;
-/**
- * ### FullscreenButton
- *
- * Make the document or a `target` element fullscreen.
- *
- * @props
- *
- * - `class`
- * - `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`
- *
- * @slots
- *
- * | name       | purpose                                        | default value        |
- * | ---------- | ---------------------------------------------- | -------------------- |
- * | `default`  | content to display when fullscreen is disabled | `Enabled Fullscreen` |
- * | `enabled`  | content to display when fullscreen is enabled  | `Exit Fullscreen`    |
- *
- * @example
- *
- * ```svelte
- * <script lang="ts">
- * import { FullscreenButton } from "drab";
- *
- * let target: HTMLDivElement;
- * </script>
- *
- * <FullscreenButton class="button button-primary" />
- *
- * <div bind:this={target} class="card mt-8 bg-muted">
- * <div class="mb-2">Target element</div>
- * <FullscreenButton {target} class="button button-primary">
- * 	Enable Element Fullscreen
- * </FullscreenButton>
- * </div>
- * ```
- */
-export default class FullscreenButton extends SvelteComponent<FullscreenButtonProps, FullscreenButtonEvents, FullscreenButtonSlots> {
-}
-export {};

package/dist/components/Popover.svelte

@@ -1,153 +0,0 @@
-<!--
-@component
-
-### Popover
-
-Displays a popover in relation to the `target`. 
-
-- Does not require the target to be `position: relative;`
-- Adjusts position in case the popover renders outside of the viewport
-
-@props
-
-- `class` 
-- `display` - shows / hides the popover
-- `id` 
-- `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
-
-@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="button button-primary"
-	type="button"
-	bind:this={target}
-	on:click={open}
->
-	Open
-</button>
-
-<Popover {target} bind:display class="p-2">
-	<div class="card flex w-48 flex-col gap-2 p-2 shadow-md">
-		<div class="font-bold">Bottom</div>
-		<button class="button button-secondary" on:click={close}>Close</button>
-		<button class="button button-secondary" on:click={close}>Close</button>
-		<button class="button button-secondary" on:click={close}>Close</button>
-	</div>
-</Popover>
-```
--->
-
-<script>import { prefersReducedMotion } from "../util/accessibility";
-import { duration, start } from "../util/transition";
-import { onMount, tick } from "svelte";
-import { scale } from "svelte/transition";
-let className = "";
-export { className as class };
-export let id = "";
-export let display = true;
-export let position = "b";
-export let target;
-export let transition = { duration, start };
-let popover;
-let coordinates = { x: 0, y: 0 };
-const setPosition = async () => {
-  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 {
-    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();
-  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 + extraMargin;
-  }
-  if (popoverRect.y < 0) {
-    coordinates.y += Math.abs(popoverRect.y) + extraMargin;
-  } else if (popoverRect.y + popover.offsetHeight > window.innerHeight) {
-    coordinates.y -= popoverRect.y + popover.offsetHeight - window.innerHeight;
-  }
-};
-const onKeyDown = (e) => {
-  if (e.key === "Escape") {
-    display = false;
-  }
-};
-$:
-  if (target && popover)
-    setPosition();
-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;
-		margin: 0;
-	}
-</style>

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

@@ -1,80 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type ScaleParams } from "svelte/transition";
-declare const __propDef: {
-    props: {
-        class?: string | undefined;
-        id?: string | undefined;
-        /** shows / hides the popover */ display?: boolean | 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;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type PopoverProps = typeof __propDef.props;
-export type PopoverEvents = typeof __propDef.events;
-export type PopoverSlots = typeof __propDef.slots;
-/**
- * ### Popover
- *
- * Displays a popover in relation to the `target`.
- *
- * - Does not require the target to be `position: relative;`
- * - Adjusts position in case the popover renders outside of the viewport
- *
- * @props
- *
- * - `class`
- * - `display` - shows / hides the popover
- * - `id`
- * - `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
- *
- * @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="button button-primary"
- * type="button"
- * bind:this={target}
- * on:click={open}
- * >
- * Open
- * </button>
- *
- * <Popover {target} bind:display class="p-2">
- * <div class="card flex w-48 flex-col gap-2 p-2 shadow-md">
- * 	<div class="font-bold">Bottom</div>
- * 	<button class="button button-secondary" on:click={close}>Close</button>
- * 	<button class="button button-secondary" on:click={close}>Close</button>
- * 	<button class="button button-secondary" on:click={close}>Close</button>
- * </div>
- * </Popover>
- * ```
- */
-export default class Popover extends SvelteComponent<PopoverProps, PopoverEvents, PopoverSlots> {
-}
-export {};