drab 1.9.3

package/dist/components/FullscreenButton.svelte

@@ -0,0 +1,81 @@
+<!--
+@component
+
+### FullscreenButton
+
+Make the document or a specific element fullscreen.
+
+@props
+
+- `class` 
+- `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
+- `id` 
+- `targetElement` - element to make fullscreen (defaults to `document.documentElement` upon mount)
+- `title` 
+
+@slots
+
+| name       | purpose                                        | default value        |
+| ---------- | ---------------------------------------------- | -------------------- |
+| `enabled`  | content to display when fullscreen is enabled  | `Exit Fullscreen`    |
+| `disabled` | content to display when fullscreen is disabled | `Enabled Fullscreen` |
+
+@example
+
+```svelte
+<script>
+	import { FullscreenButton } from "@rossrobino/components";
+
+	let fullscreenDiv;
+</script>
+
+<FullscreenButton />
+
+<div bind:this={fullscreenDiv}>
+	<div>Target element fullscreen</div>
+	<FullscreenButton targetElement={fullscreenDiv}>
+		<span slot="enabled">Exit Element Fullscreen</span>
+		<span slot="disabled">Enable Element Fullscreen</span>
+	</FullscreenButton>
+</div>
+```
+-->
+
+<script>import { onMount } from "svelte";
+let className = "";
+export { className as class };
+export let id = "";
+export let title = "Fullscreen";
+export let targetElement = null;
+export let confirmMessage = "";
+let fullscreen = false;
+onMount(() => {
+  if (!targetElement)
+    targetElement = document.documentElement;
+});
+const onClick = () => {
+  if (fullscreen) {
+    document.exitFullscreen();
+  } else {
+    if (targetElement && targetElement.requestFullscreen) {
+      if (confirmMessage) {
+        const permission = confirm(confirmMessage);
+        if (permission)
+          targetElement.requestFullscreen();
+      } else {
+        targetElement.requestFullscreen();
+      }
+    }
+  }
+};
+</script>
+
+<svelte:window on:fullscreenchange={() => (fullscreen = !fullscreen)} />
+
+<button on:click={onClick} class={className} {id} {title}>
+	{#if fullscreen}
+		<slot name="enabled">Exit Fullscreen</slot>
+	{:else}
+		<slot name="disabled">Enable Fullscreen</slot>
+	{/if}
+</button>

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

@@ -0,0 +1,63 @@
+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) */ targetElement?: HTMLElement | null | undefined;
+        /** message to display in the `confirm` popup, set this to empty string `""` to disable `confirm` */ confirmMessage?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        enabled: {};
+        disabled: {};
+    };
+};
+export type FullscreenButtonProps = typeof __propDef.props;
+export type FullscreenButtonEvents = typeof __propDef.events;
+export type FullscreenButtonSlots = typeof __propDef.slots;
+/**
+ * ### FullscreenButton
+ *
+ * Make the document or a specific element fullscreen.
+ *
+ * @props
+ *
+ * - `class`
+ * - `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
+ * - `id`
+ * - `targetElement` - element to make fullscreen (defaults to `document.documentElement` upon mount)
+ * - `title`
+ *
+ * @slots
+ *
+ * | name       | purpose                                        | default value        |
+ * | ---------- | ---------------------------------------------- | -------------------- |
+ * | `enabled`  | content to display when fullscreen is enabled  | `Exit Fullscreen`    |
+ * | `disabled` | content to display when fullscreen is disabled | `Enabled Fullscreen` |
+ *
+ * @example
+ *
+ * ```svelte
+ * <script>
+ * import { FullscreenButton } from "@rossrobino/components";
+ *
+ * let fullscreenDiv;
+ * </script>
+ *
+ * <FullscreenButton />
+ *
+ * <div bind:this={fullscreenDiv}>
+ * <div>Target element fullscreen</div>
+ * <FullscreenButton targetElement={fullscreenDiv}>
+ * 	<span slot="enabled">Exit Element Fullscreen</span>
+ * 	<span slot="disabled">Enable Element Fullscreen</span>
+ * </FullscreenButton>
+ * </div>
+ * ```
+ */
+export default class FullscreenButton extends SvelteComponent<FullscreenButtonProps, FullscreenButtonEvents, FullscreenButtonSlots> {
+}
+export {};

package/dist/components/ShareButton.svelte

@@ -0,0 +1,66 @@
+<!--
+@component
+
+### ShareButton
+
+Uses the navigator api to share or copy a url link depending on browser support.
+
+@props
+
+- `class` 
+- `id` 
+- `text` - prefixed text in share message
+- `title` - title of share message and button attribute
+- `url` - url to be shared
+
+@slots
+
+| name       | purpose                         | default value |
+| ---------- | ------------------------------- | ------------- |
+| `default`  | default                         | `Share`       |
+| `complete` | displays after copy is complete | `Copied`      |
+
+@example
+
+```svelte
+<script>
+    import { ShareButton } from "@rossrobino/components";
+</script>
+
+<ShareButton
+	text="Check out this page: "
+	title="@rossrobino/components"
+    url="https://components.robino.dev"
+/>
+```
+-->
+
+<script>let className = "";
+export { className as class };
+export let id = "";
+export let text = "";
+export let url;
+export let title = url.split("/").splice(-1)[0];
+let complete = false;
+const onClick = async () => {
+  try {
+    if (navigator.canShare) {
+      await navigator.share({ text, url, title });
+    } else {
+      await navigator.clipboard.writeText(url);
+      complete = true;
+      setTimeout(() => complete = false, 800);
+    }
+  } catch (error) {
+    console.log(error);
+  }
+};
+</script>
+
+<button on:click={onClick} class={className} {id} {title}>
+	{#if complete}
+		<slot name="complete">Copied</slot>
+	{:else}
+		<slot>Share</slot>
+	{/if}
+</button>

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

@@ -0,0 +1,57 @@
+import { SvelteComponent } from "svelte";
+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 */ title?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        complete: {};
+        default: {};
+    };
+};
+export type ShareButtonProps = typeof __propDef.props;
+export type ShareButtonEvents = typeof __propDef.events;
+export type ShareButtonSlots = typeof __propDef.slots;
+/**
+ * ### ShareButton
+ *
+ * Uses the navigator api to share or copy a url link depending on browser support.
+ *
+ * @props
+ *
+ * - `class`
+ * - `id`
+ * - `text` - prefixed text in share message
+ * - `title` - title of share message and button attribute
+ * - `url` - url to be shared
+ *
+ * @slots
+ *
+ * | name       | purpose                         | default value |
+ * | ---------- | ------------------------------- | ------------- |
+ * | `default`  | default                         | `Share`       |
+ * | `complete` | displays after copy is complete | `Copied`      |
+ *
+ * @example
+ *
+ * ```svelte
+ * <script>
+ *    import { ShareButton } from "@rossrobino/components";
+ * </script>
+ *
+ * <ShareButton
+ * text="Check out this page: "
+ * title="@rossrobino/components"
+ *    url="https://components.robino.dev"
+ * />
+ * ```
+ */
+export default class ShareButton extends SvelteComponent<ShareButtonProps, ShareButtonEvents, ShareButtonSlots> {
+}
+export {};

package/dist/components/YouTube.svelte

@@ -0,0 +1,47 @@
+<!--
+@component
+
+### YouTube
+
+Embeds a YouTube video into a website with the video `uid`, using [www.youtube-nocookie.com](https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode).
+
+@props
+
+- `autoplay` - auto-plays the video
+- `class` 
+- `id` 
+- `start` - start time (seconds)
+- `title` 
+- `uid` - unique YouTube id
+
+@example
+
+```svelte
+<script>
+	import { YouTube } from "@rossrobino/components";
+</script>
+
+<YouTube title="Video Title" uid="youtube_uid" />
+```
+-->
+
+<script>let className = "";
+export { className as class };
+export let id = "";
+export let uid;
+export let title = "";
+export let autoplay = false;
+export let start = 0;
+</script>
+
+<iframe
+	class={className}
+	{id}
+	src="https://www.youtube-nocookie.com/embed/{uid}?start={start}{autoplay
+		? '&autoplay=1'
+		: ''}"
+	{title}
+	frameborder="0"
+	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+	allowfullscreen
+/>

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

@@ -0,0 +1,45 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        id?: string | undefined;
+        /** unique YouTube id */ uid: string;
+        title?: string | undefined;
+        /** auto-plays the video */ autoplay?: boolean | undefined;
+        /** start time (seconds) */ start?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type YouTubeProps = typeof __propDef.props;
+export type YouTubeEvents = typeof __propDef.events;
+export type YouTubeSlots = typeof __propDef.slots;
+/**
+ * ### YouTube
+ *
+ * Embeds a YouTube video into a website with the video `uid`, using [www.youtube-nocookie.com](https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode).
+ *
+ * @props
+ *
+ * - `autoplay` - auto-plays the video
+ * - `class`
+ * - `id`
+ * - `start` - start time (seconds)
+ * - `title`
+ * - `uid` - unique YouTube id
+ *
+ * @example
+ *
+ * ```svelte
+ * <script>
+ * import { YouTube } from "@rossrobino/components";
+ * </script>
+ *
+ * <YouTube title="Video Title" uid="youtube_uid" />
+ * ```
+ */
+export default class YouTube extends SvelteComponent<YouTubeProps, YouTubeEvents, YouTubeSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import Chord from "./components/Chord.svelte";
+import CopyButton from "./components/CopyButton.svelte";
+import DataTable from "./components/DataTable.svelte";
+import type { DataTableRow } from "./components/DataTable.svelte";
+import Editor from "./components/Editor.svelte";
+import type { EditorContentElement } from "./components/Editor.svelte";
+import FullscreenButton from "./components/FullscreenButton.svelte";
+import ShareButton from "./components/ShareButton.svelte";
+import YouTube from "./components/YouTube.svelte";
+export { Chord, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, ShareButton, YouTube, };

package/dist/index.js

@@ -0,0 +1,8 @@
+import Chord from "./components/Chord.svelte";
+import CopyButton from "./components/CopyButton.svelte";
+import DataTable from "./components/DataTable.svelte";
+import Editor from "./components/Editor.svelte";
+import FullscreenButton from "./components/FullscreenButton.svelte";
+import ShareButton from "./components/ShareButton.svelte";
+import YouTube from "./components/YouTube.svelte";
+export { Chord, CopyButton, DataTable, Editor, FullscreenButton, ShareButton, YouTube, };

package/dist/util/buildDocs.d.ts

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

package/dist/util/buildDocs.js

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

package/dist/util/documentProps.d.ts

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

package/dist/util/documentProps.js

@@ -0,0 +1,86 @@
+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("");
+};

package/package.json

@@ -0,0 +1,74 @@
+{
+	"name": "drab",
+	"version": "1.9.3",
+	"description": "An unstyled Svelte component library",
+	"keywords": [
+		"components",
+		"Svelte",
+		"SvelteKit",
+		"Chord",
+		"Copy",
+		"DataTable",
+		"Editor",
+		"Fullscreen",
+		"Share",
+		"YouTube"
+	],
+	"homepage": "https://drab.robino.dev",
+	"license": "MIT",
+	"author": {
+		"name": "Ross Robino",
+		"url": "https://robino.dev"
+	},
+	"repository": "github:rossrobino/drab",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "node src/lib/util/buildDocs.js && vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
+		"pub": "npm publish --access public"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"dependencies": {
+		"svelte": "^4.1.2"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-vercel": "^3.0.3",
+		"@sveltejs/kit": "^1.22.4",
+		"@sveltejs/package": "^2.2.0",
+		"@tailwindcss/typography": "^0.5.9",
+		"@types/node": "^20.4.9",
+		"@typescript-eslint/eslint-plugin": "^6.3.0",
+		"@typescript-eslint/parser": "^6.3.0",
+		"autoprefixer": "^10.4.14",
+		"eslint": "^8.46.0",
+		"eslint-config-prettier": "^9.0.0",
+		"eslint-plugin-svelte": "^2.32.4",
+		"postcss": "^8.4.27",
+		"prettier": "^3.0.1",
+		"prettier-plugin-svelte": "^3.0.3",
+		"prettier-plugin-tailwindcss": "^0.4.1",
+		"publint": "^0.2.0",
+		"svelte-check": "^3.4.6",
+		"tailwindcss": "^3.3.3",
+		"tslib": "^2.6.1",
+		"typescript": "^5.1.6",
+		"vite": "^4.4.9"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module"
+}