drab 6.5.0 → 7.0.0

package/dist/wakelock/index.js

@@ -1,4 +1,4 @@
-import { Base } from "../base/index.js";
+import { Announce, Content, Lifecycle, Trigger, } from "../base/index.js";
 /**
  * `WakeLock` uses the
  * [WakeLock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API)
@@ -7,7 +7,6 @@ import { Base } from "../base/index.js";
  * that needs to stay on, or you are displaying a QR code.
  *
  * - Use `content` and `swap` elements to adjust the UI based on the current state.
- * - `request` and `release` methods are provided to set the WakeLock with JavaScript.
  * - `trigger` is disabled if not supported.
  * - WakeLock is released when the element is removed from the DOM.
  *
@@ -24,8 +23,8 @@ import { Base } from "../base/index.js";
  * WakeLock can be toggled with a `trigger`, or will be requested if the element has
  * a `locked` attribute when connected.
  */
-export class WakeLock extends Base {
-    wakeLock = null;
+export class WakeLock extends Lifecycle(Trigger(Content(Announce()))) {
+    #wakeLock = null;
     constructor() {
         super();
     }
@@ -34,7 +33,8 @@ export class WakeLock extends Base {
         return "wakeLock" in navigator;
     }
     /**
-     * the `auto-lock` attribute controls whether an active WakeLock should be restored when navigating back to the page.
+     * the `auto-lock` attribute controls whether an active WakeLock should be restored when navigating back to
+     *  the page.
      */
     get #autoLock() {
         return this.hasAttribute("auto-lock");
@@ -42,42 +42,42 @@ export class WakeLock extends Base {
     /** Requests WakeLock on the current page. */
     async request() {
         if (this.#wakeLockSupported() && document.visibilityState === "visible") {
-            this.wakeLock = await navigator.wakeLock.request("screen");
+            this.#wakeLock = await navigator.wakeLock.request("screen");
             this.setAttribute("locked", "");
             this.announce("screen wake lock activated");
-            this.swapContent(false);
-            this.wakeLock.addEventListener("release", () => {
+            this.swap(false);
+            this.#wakeLock.addEventListener("release", () => {
                 this.removeAttribute("locked");
                 this.announce("screen wake lock deactivated");
-                this.swapContent(false);
+                this.swap(false);
                 if (!this.#autoLock) {
                     // set to null is required, used to determine if screen should be
                     // locked again, see visibilitychange listener
-                    this.wakeLock = null;
+                    this.#wakeLock = null;
                 }
             });
         }
     }
     /** Releases the WakeLock, sets `this.wakeLock` to null. */
     async release() {
-        await this.wakeLock?.release();
-        this.wakeLock = null;
+        await this.#wakeLock?.release();
+        this.#wakeLock = null;
     }
     mount() {
         // lock on mount if the `locked` attribute is present
         if (this.hasAttribute("locked")) {
             this.request();
         }
-        this.triggerListener(() => {
+        this.listener(() => {
             // toggle
-            if (this.wakeLock) {
+            if (this.#wakeLock) {
                 this.release();
             }
             else {
                 this.request();
             }
         });
-        for (const trigger of this.getTrigger()) {
+        for (const trigger of this.triggers()) {
             if (!this.#wakeLockSupported() && "disabled" in trigger) {
                 // disable `trigger` if not supported
                 trigger.disabled = true;
@@ -88,7 +88,7 @@ export class WakeLock extends Base {
                 // When the tab is not visible, the wakeLock is automatically released.
                 // This requests it back if it exists, if it is `null`, that
                 // means it was removed. In which case, it shouldn't be requested again.
-                if (this.wakeLock) {
+                if (this.#wakeLock) {
                     this.request();
                 }
             }, document);

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "drab",
 	"description": "Interactivity for You",
-	"version": "6.5.0",
+	"version": "7.0.0",
 	"homepage": "https://drab.robino.dev",
 	"license": "MIT",
 	"author": {
@@ -12,7 +12,6 @@
 		"web components",
 		"custom elements",
 		"contextmenu",
-		"copy",
 		"dialog",
 		"editor",
 		"fullscreen",
@@ -20,8 +19,8 @@
 		"prefetch",
 		"share",
 		"tablesort",
-		"wakelock",
-		"youtube"
+		"tabs",
+		"wakelock"
 	],
 	"repository": {
 		"type": "git",
@@ -54,10 +53,6 @@
 			"types": "./dist/base/index.d.ts",
 			"default": "./dist/base/index.js"
 		},
-		"./base/define": {
-			"types": "./dist/base/define.d.ts",
-			"default": "./dist/base/define.js"
-		},
 		"./breakpoint": {
 			"types": "./dist/breakpoint/index.d.ts",
 			"default": "./dist/breakpoint/index.js"
@@ -74,14 +69,6 @@
 			"types": "./dist/contextmenu/define.d.ts",
 			"default": "./dist/contextmenu/define.js"
 		},
-		"./copy": {
-			"types": "./dist/copy/index.d.ts",
-			"default": "./dist/copy/index.js"
-		},
-		"./copy/define": {
-			"types": "./dist/copy/define.d.ts",
-			"default": "./dist/copy/define.js"
-		},
 		"./dialog": {
 			"types": "./dist/dialog/index.d.ts",
 			"default": "./dist/dialog/index.js"
@@ -138,6 +125,17 @@
 			"types": "./dist/tablesort/define.d.ts",
 			"default": "./dist/tablesort/define.js"
 		},
+		"./tabs": {
+			"types": "./dist/tabs/index.d.ts",
+			"default": "./dist/tabs/index.js"
+		},
+		"./tabs/define": {
+			"types": "./dist/tabs/define.d.ts",
+			"default": "./dist/tabs/define.js"
+		},
+		"./types": {
+			"types": "./dist/types/index.d.ts"
+		},
 		"./wakelock": {
 			"types": "./dist/wakelock/index.d.ts",
 			"default": "./dist/wakelock/index.js"
@@ -145,14 +143,6 @@
 		"./wakelock/define": {
 			"types": "./dist/wakelock/define.d.ts",
 			"default": "./dist/wakelock/define.js"
-		},
-		"./youtube": {
-			"types": "./dist/youtube/index.d.ts",
-			"default": "./dist/youtube/index.js"
-		},
-		"./youtube/define": {
-			"types": "./dist/youtube/define.d.ts",
-			"default": "./dist/youtube/define.js"
 		}
 	},
 	"files": [

package/dist/base/define.js

@@ -1,3 +0,0 @@
-import { define } from "../util/define.js";
-import { Base } from "./index.js";
-define("drab-base", Base);

package/dist/copy/define.d.ts

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

package/dist/copy/define.js

@@ -1,3 +0,0 @@
-import { define } from "../util/define.js";
-import { Copy } from "./index.js";
-define("drab-copy", Copy);

package/dist/copy/index.d.ts

@@ -1,30 +0,0 @@
-import { Base, type BaseAttributes } from "../base/index.js";
-export type CopyAttributes = BaseAttributes & {
-    value: string;
-};
-/**
- * Uses the
- * [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText)
- * to copy text.
- *
- * ### Attributes
- *
- * `value`
- *
- * Text to copy.
- */
-export declare class Copy extends Base {
-    constructor();
-    /**
-     * The value to copy.
-     *
-     * @default ""
-     */
-    get value(): string;
-    set value(value: string);
-    /**
-     * @param value The `value` to copy
-     */
-    copy(value?: string): Promise<void>;
-    mount(): void;
-}

package/dist/copy/index.js

@@ -1,39 +0,0 @@
-import { Base } from "../base/index.js";
-/**
- * Uses the
- * [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText)
- * to copy text.
- *
- * ### Attributes
- *
- * `value`
- *
- * Text to copy.
- */
-export class Copy extends Base {
-    constructor() {
-        super();
-    }
-    /**
-     * The value to copy.
-     *
-     * @default ""
-     */
-    get value() {
-        return this.getAttribute("value") ?? "";
-    }
-    set value(value) {
-        this.setAttribute("value", value);
-    }
-    /**
-     * @param value The `value` to copy
-     */
-    copy(value = this.value) {
-        this.announce("copied text to clipboard");
-        this.swapContent();
-        return navigator.clipboard.writeText(value);
-    }
-    mount() {
-        this.triggerListener(() => this.copy());
-    }
-}

package/dist/youtube/define.d.ts

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

package/dist/youtube/define.js

@@ -1,3 +0,0 @@
-import { define } from "../util/define.js";
-import { YouTube } from "./index.js";
-define("drab-youtube", YouTube);

package/dist/youtube/index.d.ts

@@ -1,31 +0,0 @@
-import { Base, type BaseAttributes } from "../base/index.js";
-export type YouTubeAttributes = BaseAttributes & {
-    autoplay?: boolean;
-    start?: number;
-    uid: string;
-};
-/**
- * Embeds a YouTube video iframe into a website with the video uid, using www.youtube-nocookie.com.
- */
-export declare class YouTube extends Base {
-    static observedAttributes: readonly ["autoplay", "start", "uid"];
-    constructor();
-    /** The `HTMLIFrameElement` within the element. */
-    get iframe(): HTMLIFrameElement;
-    /** Whether the video should start playing when loaded. */
-    get autoplay(): boolean;
-    set autoplay(value: boolean);
-    /** The start time of the video (seconds). */
-    get start(): string;
-    set start(value: string);
-    /**
-     * The video's YouTube uid, found within the url of the video.
-     *
-     * For example if the video url is https://youtu.be/gouiY85kD2o,
-     * the `uid` is `"gouiY85kD2o"`.
-     */
-    get uid(): string;
-    set uid(v: string);
-    mount(): void;
-    attributeChangedCallback(): void;
-}

package/dist/youtube/index.js

@@ -1,56 +0,0 @@
-import { Base } from "../base/index.js";
-/**
- * Embeds a YouTube video iframe into a website with the video uid, using www.youtube-nocookie.com.
- */
-export class YouTube extends Base {
-    static observedAttributes = ["autoplay", "start", "uid"];
-    constructor() {
-        super();
-    }
-    /** The `HTMLIFrameElement` within the element. */
-    get iframe() {
-        return this.getContent(HTMLIFrameElement);
-    }
-    /** Whether the video should start playing when loaded. */
-    get autoplay() {
-        return this.hasAttribute("autoplay");
-    }
-    set autoplay(value) {
-        if (value)
-            this.setAttribute("autoplay", "");
-        else
-            this.removeAttribute("autoplay");
-    }
-    /** The start time of the video (seconds). */
-    get start() {
-        return this.getAttribute("start") ?? "0";
-    }
-    set start(value) {
-        this.setAttribute("start", value);
-    }
-    /**
-     * The video's YouTube uid, found within the url of the video.
-     *
-     * For example if the video url is https://youtu.be/gouiY85kD2o,
-     * the `uid` is `"gouiY85kD2o"`.
-     */
-    get uid() {
-        const uid = this.getAttribute("uid");
-        if (!uid)
-            throw new Error("YouTube: missing `uid` attribute.");
-        return uid;
-    }
-    set uid(v) {
-        this.setAttribute("uid", v);
-    }
-    mount() {
-        this.iframe.allowFullscreen = true;
-        this.iframe.allow =
-            "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
-    }
-    attributeChangedCallback() {
-        queueMicrotask(() => {
-            this.iframe.src = `https://www.youtube-nocookie.com/embed/${this.uid}?start=${this.start}${this.autoplay ? "&autoplay=1" : ""}`;
-        });
-    }
-}