drab 2.1.0 → 2.2.0

package/dist/components/Accordion.svelte

@@ -0,0 +1,164 @@
+<!--
+@component
+
+### Accordion
+
+Displays a list of `details` elements.
+
+@props
+
+- `autoClose` - if true, other items close when a new one is opened
+- `classDetails` - class of the `div` around each `details` element
+- `classIcon` - class of the `div` around the icon
+- `classSlot` - class of all the `slot` elements
+- `classSummary` - class of all the `summary` elements
+- `class` 
+- `content` - array of `AccordionContent` elements
+- `icon` 
+- `id` 
+- `transition` - rotates the icon, slides the content, defaults to empty object, set to false to remove
+
+@slots
+
+Pass components into the `content` prop if needed. `AccordionContent` has `summary` and `slot` attributes of type `string | ComponentType`.
+
+@example
+
+```svelte
+<script>
+    import { Accordion } from "drab";
+</script>
+
+<Accordion
+	content={[
+		{ summary: "Is it accessible?", slot: "Yes." },
+		{
+			summary: "Is it styled?",
+			slot: "Nope, style with global styles.",
+		},
+		{
+			summary: "Is it animated?",
+			slot: "Yes, with the transition prop.",
+		},
+		{ summary: "Does it work without Javascript?", slot: "Yes." },
+	]}
+/>
+```
+-->
+
+<script context="module"></script>
+
+<script>import { onMount } from "svelte";
+import { slide } from "svelte/transition";
+import { prefersReducedMotion } from "../util/accessibility";
+let className = "";
+export { className as class };
+export let id = "";
+export let content;
+export let icon = "";
+export let classDetails = "";
+export let classSummary = "";
+export let classSlot = "";
+export let classIcon = "";
+export let transition = {};
+export let autoClose = true;
+let clientJs = false;
+for (const item of content) {
+  if (!item.classContentDetails)
+    item.classContentDetails = "";
+  if (!item.classContentSlot)
+    item.classContentSlot = "";
+  if (!item.classContentSummary)
+    item.classContentSummary = "";
+}
+const toggleOpen = (i) => {
+  content[i].open = !content[i].open;
+  if (autoClose) {
+    for (let j = 0; j < content.length; j++) {
+      const item = content[j];
+      if (j !== i)
+        item.open = false;
+    }
+  }
+};
+onMount(() => {
+  clientJs = true;
+  if (prefersReducedMotion())
+    transition = false;
+});
+</script>
+
+<div class="transition"></div>
+
+<div class={className} {id}>
+	{#each content as { classContentDetails, summary, classContentSummary, slot, classContentSlot, open }, i}
+		<div class="{classDetails} {classContentDetails}">
+			<details bind:open>
+				<!-- svelte-ignore a11y-no-redundant-roles -->
+				<summary
+					role="button"
+					tabindex="0"
+					class={classSummary}
+					on:click={(e) => {
+						e.preventDefault();
+						toggleOpen(i);
+					}}
+					on:keydown={(e) => {
+						if (e.key === "Enter") {
+							e.preventDefault();
+							toggleOpen(i);
+						}
+					}}
+				>
+					{#if typeof summary !== "string"}
+						<svelte:component this={summary} class={classContentSummary} />
+					{:else}
+						<span class={classContentSummary}>{summary}</span>
+					{/if}
+					{#if icon}
+						<div
+							class={classIcon}
+							class:db-rotate-180={open}
+							class:db-transition={transition}
+						>
+							{#if typeof icon !== "string"}
+								<svelte:component this={icon} />
+							{:else}
+								<span>{icon}</span>
+							{/if}
+						</div>
+					{/if}
+				</summary>
+				{#if !clientJs || !transition}
+					<div class={classSlot}>
+						{#if typeof slot !== "string"}
+							<svelte:component this={slot} class={classContentSlot} />
+						{:else}
+							<div class={classContentSlot}>{slot}</div>
+						{/if}
+					</div>
+				{/if}
+			</details>
+			{#if clientJs && open && transition}
+				<div transition:slide={transition} class={classSlot}>
+					{#if typeof slot !== "string"}
+						<svelte:component this={slot} class={classContentSlot} />
+					{:else}
+						<div class={classContentSlot}>{slot}</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.db-rotate-180 {
+		transform: rotate(180deg);
+	}
+	.db-transition {
+		transition-property: transform;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		transition-duration: 150ms;
+	}
+</style>

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

@@ -0,0 +1,86 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentType } from "svelte";
+export interface AccordionContent {
+    /** `details` element class */
+    classContentDetails?: string;
+    /** content of the `summary` element */
+    summary: string | ComponentType;
+    /** `summary` element class */
+    classContentSummary?: string;
+    /** content of the `slot` */
+    slot: string | ComponentType;
+    /** `slot` element class */
+    classContentSlot?: string;
+    /** controls whether the slotted content is displayed */
+    open?: boolean;
+}
+import { type SlideParams } from "svelte/transition";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        id?: string | undefined;
+        /** array of `AccordionContent` elements */ content: AccordionContent[];
+        icon?: string | ComponentType | undefined;
+        /** class of the `div` around each `details` element */ classDetails?: string | undefined;
+        /** class of all the `summary` elements */ classSummary?: string | undefined;
+        /** class of all the `slot` elements */ classSlot?: string | undefined;
+        /** class of the `div` around the icon */ classIcon?: string | undefined;
+        /** rotates the icon, slides the content, defaults to empty object, set to false to remove */ transition?: false | SlideParams | undefined;
+        /** if true, other items close when a new one is opened */ autoClose?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AccordionProps = typeof __propDef.props;
+export type AccordionEvents = typeof __propDef.events;
+export type AccordionSlots = typeof __propDef.slots;
+/**
+ * ### Accordion
+ *
+ * Displays a list of `details` elements.
+ *
+ * @props
+ *
+ * - `autoClose` - if true, other items close when a new one is opened
+ * - `classDetails` - class of the `div` around each `details` element
+ * - `classIcon` - class of the `div` around the icon
+ * - `classSlot` - class of all the `slot` elements
+ * - `classSummary` - class of all the `summary` elements
+ * - `class`
+ * - `content` - array of `AccordionContent` elements
+ * - `icon`
+ * - `id`
+ * - `transition` - rotates the icon, slides the content, defaults to empty object, set to false to remove
+ *
+ * @slots
+ *
+ * Pass components into the `content` prop if needed. `AccordionContent` has `summary` and `slot` attributes of type `string | ComponentType`.
+ *
+ * @example
+ *
+ * ```svelte
+ * <script>
+ *    import { Accordion } from "drab";
+ * </script>
+ *
+ * <Accordion
+ * content={[
+ * 	{ summary: "Is it accessible?", slot: "Yes." },
+ * 	{
+ * 		summary: "Is it styled?",
+ * 		slot: "Nope, style with global styles.",
+ * 	},
+ * 	{
+ * 		summary: "Is it animated?",
+ * 		slot: "Yes, with the transition prop.",
+ * 	},
+ * 	{ summary: "Does it work without Javascript?", slot: "Yes." },
+ * ]}
+ * />
+ * ```
+ */
+export default class Accordion extends SvelteComponent<AccordionProps, AccordionEvents, AccordionSlots> {
+}
+export {};

package/dist/components/ContextMenu.svelte

@@ -91,6 +91,7 @@ onMount(() => {
 	style:opacity={display ? "100%" : "0%"}
 	style:top="{coordinates.y}px"
 	style:left="{coordinates.x}px"
+	inert={display ? false : true}
 >
 	<slot>Context Menu</slot>
 </div>

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

@@ -1,4 +1,5 @@
 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
@@ -18,7 +19,6 @@ export interface EditorContentElement {
     /** class to apply to the specific button */
     class?: string;
 }
-import { type ComponentType } from "svelte";
 declare const __propDef: {
     props: {
         /** an array of content elements for the controls */ contentElements?: EditorContentElement[] | undefined;

package/dist/components/FullscreenButton.svelte

@@ -51,7 +51,7 @@ export let title = "Fullscreen";
 export let targetElement = null;
 export let confirmMessage = "";
 export let classNoscript = "";
-let clientJs = false;
+let supported = false;
 let fullscreen = false;
 const onClick = () => {
   if (fullscreen) {
@@ -69,7 +69,8 @@ const onClick = () => {
   }
 };
 onMount(() => {
-  clientJs = true;
+  if (document.documentElement.requestFullscreen)
+    supported = true;
   if (!targetElement)
     targetElement = document.documentElement;
 });
@@ -77,7 +78,7 @@ onMount(() => {
 
 <svelte:window on:fullscreenchange={() => (fullscreen = !fullscreen)} />
 
-<button disabled={!clientJs} on:click={onClick} class={className} {id} {title}>
+<button disabled={!supported} on:click={onClick} class={className} {id} {title}>
 	{#if fullscreen}
 		<slot name="enabled">Exit Fullscreen</slot>
 	{:else}

package/dist/components/Popover.svelte

@@ -130,6 +130,7 @@ onMount(() => {
 		class:db-type-hover={clientEventType === "hover"}
 		style:top="{coordinates.y}px"
 		style:left="{coordinates.x}px"
+		inert={clientEventType === "hover" || display ? false : true}
 	>
 		<slot>Popover</slot>
 	</div>

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import Accordion from "./components/Accordion.svelte";
+import type { AccordionContent } from "./components/Accordion.svelte";
 import Chord from "./components/Chord.svelte";
 import type { ChordNote } from "./components/Chord.svelte";
 import ContextMenu from "./components/ContextMenu.svelte";
@@ -10,4 +12,4 @@ import FullscreenButton from "./components/FullscreenButton.svelte";
 import Popover from "./components/Popover.svelte";
 import ShareButton from "./components/ShareButton.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, YouTube, };
+export { Accordion, type AccordionContent, Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, YouTube, };

package/dist/index.js

@@ -1,3 +1,4 @@
+import Accordion from "./components/Accordion.svelte";
 import Chord from "./components/Chord.svelte";
 import ContextMenu from "./components/ContextMenu.svelte";
 import CopyButton from "./components/CopyButton.svelte";
@@ -7,4 +8,4 @@ import FullscreenButton from "./components/FullscreenButton.svelte";
 import Popover from "./components/Popover.svelte";
 import ShareButton from "./components/ShareButton.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, YouTube, };
+export { Accordion, Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, YouTube, };

package/dist/util/accessibility.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Checks to see if the user prefers reduced motion
+ *
+ * @returns `true` if the user prefers reduced motion
+ */
+export declare const prefersReducedMotion: () => boolean;

package/dist/util/accessibility.js

@@ -0,0 +1,11 @@
+/**
+ * Checks to see if the user prefers reduced motion
+ *
+ * @returns `true` if the user prefers reduced motion
+ */
+export const prefersReducedMotion = () => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    if (mediaQuery.matches)
+        return true;
+    return false;
+};

package/package.json

@@ -1,11 +1,12 @@
 {
 	"name": "drab",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"description": "An unstyled Svelte component library",
 	"keywords": [
 		"components",
 		"Svelte",
 		"SvelteKit",
+		"Accordion",
 		"Chord",
 		"ContextMenu",
 		"Copy",
@@ -34,7 +35,7 @@
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
 		"pub": "npm publish --access public",
-		"doc": "node src/lib/util/buildDocs.js"
+		"doc": "node scripts/buildDocs.js"
 	},
 	"exports": {
 		".": {
@@ -60,6 +61,7 @@
 		"eslint": "^8.46.0",
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-svelte": "^2.32.4",
+		"marked": "^7.0.2",
 		"postcss": "^8.4.27",
 		"prettier": "^3.0.1",
 		"prettier-plugin-svelte": "^3.0.3",

package/dist/util/buildDocs.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/util/buildDocs.js

@@ -1,3 +0,0 @@
-import { documentPropsDir } from "./documentProps.js";
-
-documentPropsDir("./src/lib/components");

package/dist/util/documentProps.d.ts

@@ -1,2 +0,0 @@
-export function documentPropsDir(dir: string): Promise<void>;
-export function documentProps(path: string): Promise<void>;

package/dist/util/documentProps.js

@@ -1,86 +0,0 @@
-import fs from "fs/promises";
-import path from "path";
-
-/**
- * Runs `documentProps` over a given directory
- *
- * @param {string} dir path to directory
- */
-export const documentPropsDir = async (dir) => {
-	const files = await fs.readdir(dir);
-	for (const file of files) {
-		if (path.extname(file) === ".svelte") {
-			documentProps(path.join(dir, file));
-		}
-	}
-};
-
-/**
- * - Finds "@props" in a component
- * - If found, overwrites the docs with the generated docs
- *
- * @param {string} path path to component
- */
-export const documentProps = async (path) => {
-	const code = await fs.readFile(path, "utf-8");
-	const lines = code.split("\n");
-	const docs = getPropDocs(lines);
-	for (let i = 0; i < lines.length; i++) {
-		const line = lines[i].trim();
-		if (line.startsWith("@props")) {
-			for (let j = i + 1; j < lines.length; j++) {
-				// for the following lines...
-				const checkLine = lines[j].trim();
-				if (
-					checkLine.startsWith("@") ||
-					checkLine.startsWith("-->") ||
-					checkLine.startsWith("#") ||
-					checkLine.startsWith("|")
-				) {
-					// delete current / add new
-					lines.splice(i + 1, j - i - 1, docs);
-					// join back together
-					const documented = lines.join("\n");
-					await fs.writeFile(path, documented);
-					console.log("Documented " + path);
-					break;
-				}
-			}
-			break;
-		}
-		if (i === lines.length - 1) {
-			// last line
-			console.log("No `@props` found for " + path);
-		}
-	}
-};
-
-/**
- * - Finds the props and JSDoc comments
- *
- * @param {string[]} lines lines of code
- */
-const getPropDocs = (lines) => {
-	const docs = ["\n"];
-	for (let i = 0; i < lines.length; i++) {
-		const line = lines[i].trim();
-		const isClass = line === "export { className as class };";
-		if (line.startsWith("export let ") || isClass) {
-			let propName = line.split(" ")[2];
-			if (isClass) {
-				propName = "class";
-			}
-			if (propName.endsWith(":")) propName = propName.slice(0, -1);
-			const previousLine = lines[i - 1].trim();
-			let jsDoc = "";
-			if (previousLine.endsWith("*/")) {
-				if (previousLine.startsWith("/**")) {
-					jsDoc = "- " + previousLine.slice(3, -2).trim();
-				}
-			}
-			docs.push(`- \`${propName}\` ${jsDoc}\n`);
-		}
-	}
-	docs.sort();
-	return docs.join("");
-};