├── .changeset └── config.json ├── .github └── workflows │ └── release.yml ├── .gitignore ├── .prettierignore ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── apps └── docs │ ├── .gitignore │ ├── package.json │ ├── public │ └── circle.svg │ ├── src │ ├── client │ │ ├── +page.html │ │ ├── main.ts │ │ └── tailwind.css │ ├── drab.d.ts │ ├── env.d.ts │ ├── lib │ │ ├── code-controls.ts │ │ └── md.ts │ ├── md.d.ts │ ├── pages │ │ ├── contributing.md │ │ ├── custom.md │ │ ├── docs │ │ │ ├── docs.tsx │ │ │ ├── elements │ │ │ │ ├── announcer │ │ │ │ │ └── index.html │ │ │ │ ├── contextmenu │ │ │ │ │ └── index.html │ │ │ │ ├── dialog │ │ │ │ │ └── index.html │ │ │ │ ├── editor │ │ │ │ │ └── index.html │ │ │ │ ├── fullscreen │ │ │ │ │ └── index.html │ │ │ │ ├── intersect │ │ │ │ │ └── index.html │ │ │ │ ├── prefetch │ │ │ │ │ └── index.html │ │ │ │ ├── share │ │ │ │ │ └── index.html │ │ │ │ ├── tablesort │ │ │ │ │ └── index.html │ │ │ │ ├── tabs │ │ │ │ │ └── index.html │ │ │ │ └── wakelock │ │ │ │ │ └── index.html │ │ │ ├── generated │ │ │ │ ├── README.md │ │ │ │ ├── classes │ │ │ │ │ ├── announcer.md │ │ │ │ │ ├── contextmenu.md │ │ │ │ │ ├── dialog.md │ │ │ │ │ ├── editor.md │ │ │ │ │ ├── fullscreen.md │ │ │ │ │ ├── intersect.md │ │ │ │ │ ├── prefetch.md │ │ │ │ │ ├── share.md │ │ │ │ │ ├── tablesort.md │ │ │ │ │ ├── tabs.md │ │ │ │ │ └── wakelock.md │ │ │ │ ├── interfaces │ │ │ │ │ ├── AnnouncerAttributes.md │ │ │ │ │ ├── ContextMenuAttributes.md │ │ │ │ │ ├── DialogAttributes.md │ │ │ │ │ ├── EditorAttributes.md │ │ │ │ │ ├── EditorTriggerAttributes.md │ │ │ │ │ ├── FullscreenAttributes.md │ │ │ │ │ ├── IntersectAttributes.md │ │ │ │ │ ├── PrefetchAttributes.md │ │ │ │ │ ├── TableSortAttributes.md │ │ │ │ │ ├── TableSortTriggerAttributes.md │ │ │ │ │ ├── TabsAttributes.md │ │ │ │ │ └── WakeLockAttributes.md │ │ │ │ └── type-aliases │ │ │ │ │ ├── ContentElement.md │ │ │ │ │ └── ShareAttributes.md │ │ │ └── styles │ │ │ │ ├── accordion │ │ │ │ ├── index.html │ │ │ │ └── index.md │ │ │ │ ├── carousel │ │ │ │ ├── index.html │ │ │ │ └── index.md │ │ │ │ ├── popover │ │ │ │ ├── index.html │ │ │ │ └── index.md │ │ │ │ ├── separator │ │ │ │ ├── index.html │ │ │ │ └── index.md │ │ │ │ └── skiplink │ │ │ │ ├── index.html │ │ │ │ └── index.md │ │ ├── frameworks.md │ │ ├── getting-started.md │ │ └── index.md │ ├── server │ │ ├── +app.tsx │ │ └── layout.tsx │ └── ui │ │ ├── home-link.tsx │ │ ├── nav.tsx │ │ └── skip-link.tsx │ ├── tsconfig.json │ └── vite.config.ts ├── package-lock.json ├── package.json ├── packages └── drab │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ ├── announcer │ │ ├── define.ts │ │ └── index.ts │ ├── base │ │ └── index.ts │ ├── contextmenu │ │ ├── define.ts │ │ └── index.ts │ ├── define.ts │ ├── dialog │ │ ├── define.ts │ │ └── index.ts │ ├── editor │ │ ├── define.ts │ │ └── index.ts │ ├── fullscreen │ │ ├── define.ts │ │ └── index.ts │ ├── index.ts │ ├── intersect │ │ ├── define.ts │ │ └── index.ts │ ├── prefetch │ │ ├── define.ts │ │ └── index.ts │ ├── share │ │ ├── define.ts │ │ └── index.ts │ ├── tablesort │ │ ├── define.ts │ │ └── index.ts │ ├── tabs │ │ ├── define.ts │ │ └── index.ts │ ├── types │ │ └── index.ts │ ├── util │ │ ├── define.ts │ │ └── validate.ts │ └── wakelock │ │ ├── define.ts │ │ └── index.ts │ └── tsconfig.json ├── prettier.config.js ├── scripts ├── doc.js └── tsconfig.json ├── turbo.json └── typedoc.config.js /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "public", 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch", 10 | "ignore": ["drab-docs"] 11 | } 12 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | workflow_dispatch: 8 | 9 | concurrency: ${{ github.workflow }}-${{ github.ref }} 10 | 11 | jobs: 12 | release: 13 | name: Release 14 | runs-on: ubuntu-latest 15 | steps: 16 | - name: Checkout Repo 17 | uses: actions/checkout@v4 18 | 19 | - name: Setup Node.js 20 | uses: actions/setup-node@v4 21 | with: 22 | node-version: 22.x 23 | 24 | - name: Install Dependencies 25 | run: npm i 26 | 27 | - name: Create Release Pull Request and Publish to npm 28 | id: changesets 29 | uses: changesets/action@v1 30 | with: 31 | publish: npm run release 32 | env: 33 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 34 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 35 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | .env 5 | .env.* 6 | !.env.example 7 | .turbo 8 | logs 9 | *.log 10 | npm-debug.log* 11 | .vercel 12 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | [Contributing guide](https://drab.robino.dev/contributing) 2 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Ross Robino 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Interactivity for You 2 | 3 | drab is a JavaScript library that provides interactive custom elements that can be used on any website. 4 | 5 | [Read the documentation](https://drab.robino.dev) to get started. 6 | -------------------------------------------------------------------------------- /apps/docs/.gitignore: -------------------------------------------------------------------------------- 1 | logs 2 | *.log 3 | npm-debug.log* 4 | node_modules 5 | dist 6 | .env 7 | .env.* 8 | *.local 9 | .vscode/* 10 | !.vscode/extensions.json 11 | .DS_Store 12 | .vercel 13 | -------------------------------------------------------------------------------- /apps/docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "drab-docs", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite --host", 8 | "check": "tsc", 9 | "build": "vite build", 10 | "preview": "vite preview" 11 | }, 12 | "devDependencies": { 13 | "@domcojs/vercel": "^2.0.1", 14 | "@iconify-json/lucide": "^1.2.45", 15 | "@iconify/tailwind4": "^1.0.6", 16 | "@robino/md": "^3.2.6", 17 | "@tailwindcss/vite": "^4.1.8", 18 | "domco": "^4.1.3", 19 | "tailwindcss": "^4.1.8", 20 | "vite": "^6.3.5" 21 | }, 22 | "dependencies": { 23 | "drab": "*", 24 | "ovr": "^2.0.2", 25 | "uico": "^0.10.1", 26 | "zod": "^3.25.34" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /apps/docs/public/circle.svg: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /apps/docs/src/client/+page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /apps/docs/src/client/main.ts: -------------------------------------------------------------------------------- 1 | import "drab/define"; 2 | 3 | customElements.define( 4 | "on-this-page", 5 | class extends HTMLElement { 6 | connectedCallback() { 7 | const h2 = document.createElement("h2"); 8 | h2.classList.add("mt-0", "text-lg", "mb-2"); 9 | const top = document.createElement("a"); 10 | top.href = "#"; 11 | top.textContent = "On this page"; 12 | h2.append(top); 13 | 14 | const ul = document.createElement("ul"); 15 | ul.classList.add("pl-0"); 16 | 17 | const article = document.querySelector("article"); 18 | const headings = article?.querySelectorAll("h2, h3"); 19 | 20 | if (headings?.length) { 21 | headings.forEach((heading) => { 22 | if (heading.id) { 23 | const li = document.createElement("li"); 24 | li.classList.add("pl-0"); 25 | const a = document.createElement("a"); 26 | a.href = `#${heading.id}`; 27 | a.textContent = heading.textContent; 28 | li.append(a); 29 | if (heading.tagName === "H3") { 30 | const nestedLi = document.createElement("li"); 31 | nestedLi.classList.add("list-none"); 32 | const nestedUl = document.createElement("ul"); 33 | nestedUl.classList.add("my-0"); 34 | nestedUl.append(li); 35 | nestedLi.append(nestedUl); 36 | ul.append(nestedLi); 37 | } else { 38 | li.classList.add("list-none"); 39 | ul.append(li); 40 | } 41 | } 42 | }); 43 | 44 | this.append(h2); 45 | this.append(ul); 46 | } 47 | } 48 | }, 49 | ); 50 | -------------------------------------------------------------------------------- /apps/docs/src/client/tailwind.css: -------------------------------------------------------------------------------- 1 | @layer theme, base, components, utilities; 2 | 3 | @import "uico"; 4 | @import "tailwindcss/theme.css" layer(theme); 5 | @import "tailwindcss/utilities.css" layer(utilities); 6 | 7 | @plugin "@iconify/tailwind4" { 8 | scale: 1.25; 9 | } 10 | 11 | @theme { 12 | --color-background: var(--background); 13 | --color-foreground: var(--foreground); 14 | --color-heading-foreground: var(--heading-foreground); 15 | --color-base-50: var(--base-50); 16 | --color-base-100: var(--base-100); 17 | --color-base-200: var(--base-200); 18 | --color-base-300: var(--base-300); 19 | --color-base-400: var(--base-400); 20 | --color-base-500: var(--base-500); 21 | --color-base-600: var(--base-600); 22 | --color-base-700: var(--base-700); 23 | --color-base-800: var(--base-800); 24 | --color-base-900: var(--base-900); 25 | --color-base-950: var(--base-950); 26 | --color-muted: var(--muted-background); 27 | --color-muted-foreground: var(--muted-foreground); 28 | --color-primary: var(--primary-background); 29 | --color-primary-foreground: var(--primary-foreground); 30 | --color-secondary: var(--secondary-background); 31 | --color-secondary-foreground: var(--secondary-foreground); 32 | --color-accent: var(--accent-background); 33 | --color-accent-foreground: var(--accent-foreground); 34 | --color-destructive: var(--destructive-background); 35 | --color-destructive-foreground: var(--destructive-foreground); 36 | 37 | --font-sans: var(--font-family-sans); 38 | --font-mono: var(--font-family-mono); 39 | --font-old-style: 40 | "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif; 41 | 42 | --text-xs: var(--font-size-1); 43 | --text-xs--line-height: var(--line-height-1); 44 | --text-xs--letter-spacing: var(--letter-spacing-1); 45 | --text-sm: var(--font-size-2); 46 | --text-sm--line-height: var(--line-height-2); 47 | --text-base: var(--font-size-3); 48 | --text-base--line-height: ar(--line-height-3); 49 | --text-lg: var(--font-size-4); 50 | --text-lg--line-height: var(--line-height-4); 51 | --text-xl: var(--font-size-5); 52 | --text-xl--line-height: var(--line-height-5); 53 | --text-2xl: var(--font-size-6); 54 | --text-2xl--line-height: var(--line-height-6); 55 | --text-3xl: var(--font-size-7); 56 | --text-3xl--line-height: var(--line-height-6); 57 | --text-4xl: var(--font-size-8); 58 | --text-4xl--line-height: var(--line-height-9); 59 | --text-5xl: var(--font-size-9); 60 | --text-5xl--line-height: var(--line-height-10); 61 | --text-6xl: var(--font-size-10); 62 | 63 | --radius-xs: calc(var(--border-radius) / 3); 64 | --radius-sm: calc(var(--border-radius) / 1.5); 65 | --radius-md: var(--border-radius); 66 | --radius-lg: calc(var(--border-radius) * 1.33); 67 | --radius-xl: calc(var(--border-radius) * 2); 68 | --radius-2xl: calc(var(--border-radius) * 2.66); 69 | --radius-3xl: calc(var(--border-radius) * 4); 70 | --radius-4xl: calc(var(--border-radius) * 5.33); 71 | } 72 | 73 | @layer base { 74 | :root { 75 | --base: #6b7280; 76 | 77 | --shiki-foreground: var(--base-100); 78 | --shiki-background: var(--base-900); 79 | --shiki-token-constant: var(--base-50); 80 | --shiki-token-string: var(--base-300); 81 | --shiki-token-comment: var(--base-400); 82 | --shiki-token-keyword: var(--base-400); 83 | --shiki-token-parameter: var(--base-300); 84 | --shiki-token-function: var(--base-300); 85 | --shiki-token-string-expression: var(--base-200); 86 | --shiki-token-punctuation: var(--base-500); 87 | --shiki-token-link: var(--base-300); 88 | 89 | scrollbar-gutter: stable; 90 | } 91 | 92 | * { 93 | border-color: light-dark(var(--base-300), var(--base-700)); 94 | scroll-padding-block-start: calc(var(--spacing) * 20); 95 | 96 | @media (min-width: 1024px) { 97 | scroll-padding-block-start: calc(var(--spacing) * 4); 98 | } 99 | } 100 | 101 | p code, 102 | li code { 103 | @apply border-base-200 dark:border-base-800 border shadow-xs; 104 | } 105 | 106 | .button, 107 | button { 108 | @apply shadow-xs transition-transform active:scale-99 active:shadow-none dark:shadow-black/75; 109 | } 110 | 111 | .ghost { 112 | @apply shadow-none; 113 | } 114 | 115 | h1 { 116 | @apply text-shadow-xs; 117 | } 118 | } 119 | 120 | @layer components { 121 | pre { 122 | margin: 0; 123 | @apply rounded-none px-6 sm:rounded-b-sm sm:px-4; 124 | } 125 | 126 | blockquote { 127 | padding: 0; 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /apps/docs/src/drab.d.ts: -------------------------------------------------------------------------------- 1 | import type { Elements } from "drab/types"; 2 | import type { JSX } from "ovr"; 3 | 4 | declare module "ovr" { 5 | namespace JSX { 6 | interface IntrinsicElements 7 | extends Elements {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /apps/docs/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /apps/docs/src/lib/code-controls.ts: -------------------------------------------------------------------------------- 1 | import type { PluginSimple } from "markdown-it"; 2 | import type MarkdownIt from "markdown-it"; 3 | import { escape } from "ovr"; 4 | 5 | export const codeControls: PluginSimple = (md: MarkdownIt) => { 6 | const defaultFence = 7 | md.renderer.rules.fence ?? md.renderer.renderToken.bind(md.renderer); 8 | 9 | md.renderer.rules.fence = (tokens, i, opts, env, self) => { 10 | const token = tokens[i]; 11 | 12 | if (!token?.markup?.startsWith("`")) 13 | return defaultFence(tokens, i, opts, env, self); 14 | 15 | const code = defaultFence(tokens, i, opts, env, self); 16 | const lang = token.info?.trim().split(/\s+/)[0] ?? ""; 17 | const escaped = escape(token.content, true); 18 | 19 | return /* html */ ` 20 |
21 |
22 |
${lang}
23 | ${Share(escaped)} 24 |
25 | ${code} 26 |
27 | `.trim(); 28 | }; 29 | }; 30 | 31 | const Share = (value: string) => 32 | /* html */ ` 33 | 34 | 47 | 48 | `.trim(); 49 | -------------------------------------------------------------------------------- /apps/docs/src/lib/md.ts: -------------------------------------------------------------------------------- 1 | import { codeControls } from "./code-controls"; 2 | import { Processor, type Options } from "@robino/md"; 3 | import langAstro from "shiki/langs/astro.mjs"; 4 | import langBash from "shiki/langs/bash.mjs"; 5 | import langHtml from "shiki/langs/html.mjs"; 6 | import langSvelte from "shiki/langs/svelte.mjs"; 7 | import langTs from "shiki/langs/ts.mjs"; 8 | import langTsx from "shiki/langs/tsx.mjs"; 9 | import langVue from "shiki/langs/vue.mjs"; 10 | import * as z from "zod"; 11 | 12 | export const options: Options = { 13 | highlighter: { 14 | langs: [ 15 | langHtml, 16 | langTs, 17 | langBash, 18 | langTsx, 19 | langSvelte, 20 | langVue, 21 | langAstro, 22 | ], 23 | }, 24 | plugins: [codeControls], 25 | }; 26 | 27 | export const processor = new Processor(options); 28 | 29 | export const FrontmatterSchema = z.object({ 30 | title: z.string().optional(), 31 | description: z.string().optional(), 32 | }); 33 | -------------------------------------------------------------------------------- /apps/docs/src/md.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.md" { 2 | import type { Heading } from "@robino/md"; 3 | 4 | export const html: string; 5 | export const article: string; 6 | export const headings: Heading[]; 7 | } 8 | -------------------------------------------------------------------------------- /apps/docs/src/pages/contributing.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Contributing 3 | description: How to contribute to drab. 4 | --- 5 | 6 | # Contributing 7 | 8 | Find an bug or have an idea? Create an issue on [GitHub](https://github.com/rossrobino/drab). 9 | 10 | drab is licensed under the [MIT License](https://github.com/rossrobino/drab/blob/main/LICENSE.md). 11 | 12 | Since this is a headless library, simple elements like a badge that can be easily created with HTML and CSS are not included in the JavaScript library, there are references to [CSS only elements](/styles/details/) in the styles section. 13 | 14 | ## Local development 15 | 16 | This library is built with TypeScript, the documentation site is built with Vite. 17 | 18 | To set up your development environment locally you'll need to have NodeJS installed on your computer. Then follow these steps: 19 | 20 | 1. Clone the [repository](https://github.com/rossrobino/drab). 21 | 2. Install dependencies with npm. 22 | 3. Start the development server, this will start `tsc` and `vite dev` together when run from the root directory. 23 | 24 | ```bash 25 | git clone https://github.com/rossrobino/drab.git 26 | cd drab 27 | npm i 28 | npm run dev 29 | ``` 30 | 31 | ## Making changes 32 | 33 | 1. Each element is housed in `packages/drab/src/`---in most cases, each element extends a combinations of mixins from `drab/base`. 34 | 2. Each element also has a `define.ts` file where it is imported and defined. 35 | 3. Examples demos are contained in `apps/docs/pages/`. 36 | 4. For new elements: 37 | 1. Export the element from `packages/drab/src/index.ts`. 38 | 2. Import the `define` module in `packages/drab/src/define.ts`. 39 | 3. Add the element's attribute types to `packages/drab/src/types/index.ts`. 40 | 4. Add the element's entry points to `package.json`. 41 | 5. Run `npm run doc` to document your element with [TypeDoc](https://typedoc.org/). 42 | 6. Run `npm run build && npm run preview` to verify your build. 43 | -------------------------------------------------------------------------------- /apps/docs/src/pages/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Create Your Own Custom Elements 3 | description: How to create your own custom elements with drab. 4 | --- 5 | 6 | # Create Your Own Custom Elements 7 | 8 | If you want to create your own HTML web components using drab, you can use the mixins from the `drab/base` module. 9 | 10 | [Mixins](https://www.typescriptlang.org/docs/handbook/mixins.html) allow you to enhance your own custom elements with any number of drab's base classes. By using mixins each element only includes the features it needs, keeping the bundle size as small as possible. 11 | 12 | Each mixin can be used in combination with any of the other mixins by passing one into the next in any order. For example, you can create your own element that uses the properties from the `Lifecycle` and `Trigger` mixins: 13 | 14 | ```ts 15 | import { Lifecycle, Trigger } from "drab/base"; 16 | 17 | class MyElement extends Lifecycle(Trigger()) { 18 | // now MyElement has all of the properties from the 19 | // Lifecycle and Trigger mixins 20 | } 21 | ``` 22 | 23 | --- 24 | 25 | Each base mixin is outlined in more detail below. 26 | 27 | ## Lifecycle 28 | 29 | Use the `Lifecycle` mixin for easy setup and teardown inside your custom elements. It ensures event listeners are safely removed when your element leaves the DOM, and allows you to override lifecycle hooks. 30 | 31 | `mount` is delayed until the next [microtask](https://developer.mozilla.org/en-US/docs/Web/API/Window/queueMicrotask) to play nicer with JS frameworks that lazily render HTML. For example, you can add an event listener to the children after this element is client-side rendered. 32 | 33 | ```ts 34 | import { Lifecycle } from "drab/base"; 35 | 36 | class MyElement extends Lifecycle() { 37 | constructor() { 38 | super(); 39 | } 40 | 41 | override mount() { 42 | console.log("Connected to the page"); 43 | 44 | this.safeListener("keydown", (e) => { 45 | // global event listener (removed when destroyed) 46 | console.log("Key down detected!", e.key); 47 | }); 48 | } 49 | 50 | override destroy() { 51 | console.log("Removed from the page!"); 52 | } 53 | } 54 | 55 | customElements.define("my-element", MyElement); 56 | ``` 57 | 58 | ## Trigger 59 | 60 | The `Trigger` mixin lets your element easily find, validate, and listen to internal elements (such as buttons that trigger an action). 61 | 62 | ```ts 63 | import { Lifecycle, Trigger } from "drab/base"; 64 | 65 | class MyElement extends Lifecycle(Trigger()) { 66 | constructor() { 67 | super(); 68 | } 69 | 70 | override mount() { 71 | this.triggers(); // list of triggers found within the element 72 | const buttons = this.triggers(HTMLButtonElement); // validated to be buttons 73 | 74 | // helper to add an event listener to all triggers 75 | this.listener(() => console.log("hello world!")); 76 | this.listener("mouseover", () => console.log("hovered")); 77 | } 78 | } 79 | ``` 80 | 81 | ## Content 82 | 83 | The `Content` mixin helps your component identify (and optionally swap) the main content area. You can swap content out with the `swap` method. 84 | 85 | ```ts 86 | import { Lifecycle, Trigger, Content } from "drab/base"; 87 | 88 | class MyElement extends Lifecycle(Trigger(Content())) { 89 | constructor() { 90 | super(); 91 | } 92 | 93 | override mount() { 94 | this.content(); // content found within the element 95 | const div = this.content(HTMLDivElement); // validated to be a div 96 | 97 | // swaps the content with the swap target element's content 98 | this.listener(() => this.swap()); 99 | } 100 | } 101 | ``` 102 | 103 | ## Announce 104 | 105 | The Announce mixin allows your element to broadcast [ARIA live region](https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1) announcements, improving accessibility for screen reader users. A single ARIA live region is created with the [`Announcer`](/elements/announcer/) element and reused to create announcements. 106 | 107 | This might not be necessary for all elements, be sure to test with a screen reader to see if a custom announcement needed. 108 | 109 | ```ts 110 | import { Lifecycle, Trigger, Content, Announce } from "drab/base"; 111 | 112 | class MyElement extends Lifecycle(Trigger(Content(Announce()))) { 113 | constructor() { 114 | super(); 115 | } 116 | 117 | override mount() { 118 | this.listener(() => this.announce("Action confirmed!")); 119 | } 120 | } 121 | ``` 122 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/docs.tsx: -------------------------------------------------------------------------------- 1 | import { processor } from "@/lib/md"; 2 | 3 | const elementDoc = import.meta.glob("./generated/classes/*", { 4 | query: "?raw", 5 | import: "default", 6 | eager: true, 7 | }); 8 | 9 | const styleDoc = import.meta.glob("./styles/**/*.md", { 10 | query: "?raw", 11 | import: "default", 12 | eager: true, 13 | }); 14 | 15 | export const Docs = async (props: { name: string; demo: string }) => { 16 | const { name, demo } = props; 17 | 18 | const elementMd = elementDoc[`./generated/classes/${name}.md`]; 19 | const styleMd = styleDoc[`./styles/${name}/index.md`]; 20 | 21 | const { html: demoHtml } = await processor.process( 22 | `\`\`\`html\n${demo}\`\`\``, 23 | ); 24 | 25 | const { html: docs } = await processor.process( 26 | `## Overview\n\n${elementMd ? elementMd : styleMd}`, 27 | ); 28 | 29 | const install = elementMd 30 | ? ( 31 | await processor.process( 32 | `\`\`\`js\nimport "drab/${name}/define";\n\`\`\``, 33 | ) 34 | ).html 35 | : ""; 36 | 37 | return ( 38 | <> 39 |

{name}

40 |
44 |
{demo}
45 |
46 |
47 | {install} 48 | {demoHtml} 49 | {docs} 50 |
51 | 52 | ); 53 | }; 54 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/elements/announcer/index.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 |
Activate your screen reader to hear the greeting.
13 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/elements/contextmenu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/elements/dialog/index.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 8 |
9 |

Dialog

10 | 13 |
14 |

15 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 16 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 17 | veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 18 | commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 19 | velit esse cillum dolore eu fugiat nulla pariatur. 20 |

21 | 22 | 23 | 24 | 25 | 26 | 30 |
31 |

Dialog

32 | 35 |
36 |

37 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 38 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 39 | veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 40 | commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 41 | velit esse cillum dolore eu fugiat nulla pariatur. 42 |

43 | 44 | 45 | 46 | 47 | 48 | 52 |
53 |
54 |

Dialog

55 | 58 |
59 |

60 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 61 | eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 62 | minim veniam, quis nostrud exercitation ullamco laboris nisi ut 63 | aliquip ex ea commodo consequat. Duis aute irure dolor in 64 | reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 65 | pariatur. 66 |

67 |
68 | 69 | 70 |
71 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/elements/editor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 7 |
8 | 16 | 24 | 32 | 40 | 49 |
50 | 51 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/elements/fullscreen/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 10 |
11 | 12 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/elements/intersect/index.html: -------------------------------------------------------------------------------- 1 | 2 |
6 |

7 | Scroll down, when part of this trigger moves out of the viewport, the 8 | data-intersect 9 | attribute will be removed and the color will change. 10 |

11 |
12 |
16 | 17 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/elements/prefetch/index.html: -------------------------------------------------------------------------------- 1 | 2 | Hover to prefetch 3 | 4 | 5 | 6 |
7 | 8 | Prerender when visible 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/elements/share/index.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 12 | 13 | 14 | 15 | 29 | 30 |
31 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/elements/tablesort/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 11 | 18 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
6 | Make 7 | 9 | Model 10 | 16 | Year 17 | 23 | AWD 24 |
FordModel A1931false
FordBronco1970true
HondaCR-V2011true
SubaruOutback2021true
VolvoXC-402024true
60 | 61 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/elements/tabs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 15 | 16 |
19 |
About
20 |
Projects
21 |
Account
22 |
23 | 24 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/elements/wakelock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/generated/README.md: -------------------------------------------------------------------------------- 1 | ## Classes 2 | 3 | - [Announcer](/PUBLIC_PATH/classes/Announcer.md) 4 | - [ContextMenu](/PUBLIC_PATH/classes/ContextMenu.md) 5 | - [Dialog](/PUBLIC_PATH/classes/Dialog.md) 6 | - [Editor](/PUBLIC_PATH/classes/Editor.md) 7 | - [Fullscreen](/PUBLIC_PATH/classes/Fullscreen.md) 8 | - [Intersect](/PUBLIC_PATH/classes/Intersect.md) 9 | - [Prefetch](/PUBLIC_PATH/classes/Prefetch.md) 10 | - [Share](/PUBLIC_PATH/classes/Share.md) 11 | - [TableSort](/PUBLIC_PATH/classes/TableSort.md) 12 | - [Tabs](/PUBLIC_PATH/classes/Tabs.md) 13 | - [WakeLock](/PUBLIC_PATH/classes/WakeLock.md) 14 | 15 | ## Interfaces 16 | 17 | - [AnnouncerAttributes](/PUBLIC_PATH/interfaces/AnnouncerAttributes.md) 18 | - [ContextMenuAttributes](/PUBLIC_PATH/interfaces/ContextMenuAttributes.md) 19 | - [DialogAttributes](/PUBLIC_PATH/interfaces/DialogAttributes.md) 20 | - [EditorAttributes](/PUBLIC_PATH/interfaces/EditorAttributes.md) 21 | - [EditorTriggerAttributes](/PUBLIC_PATH/interfaces/EditorTriggerAttributes.md) 22 | - [FullscreenAttributes](/PUBLIC_PATH/interfaces/FullscreenAttributes.md) 23 | - [IntersectAttributes](/PUBLIC_PATH/interfaces/IntersectAttributes.md) 24 | - [PrefetchAttributes](/PUBLIC_PATH/interfaces/PrefetchAttributes.md) 25 | - [TableSortAttributes](/PUBLIC_PATH/interfaces/TableSortAttributes.md) 26 | - [TableSortTriggerAttributes](/PUBLIC_PATH/interfaces/TableSortTriggerAttributes.md) 27 | - [TabsAttributes](/PUBLIC_PATH/interfaces/TabsAttributes.md) 28 | - [WakeLockAttributes](/PUBLIC_PATH/interfaces/WakeLockAttributes.md) 29 | 30 | ## Type Aliases 31 | 32 | - [ContentElement](/PUBLIC_PATH/type-aliases/ContentElement.md) 33 | - [ShareAttributes](/PUBLIC_PATH/type-aliases/ShareAttributes.md) 34 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/generated/classes/announcer.md: -------------------------------------------------------------------------------- 1 | Defined in: [announcer/index.ts:40](https://github.com/rossrobino/components/blob/main/packages/drab/src/announcer/index.ts#L40) 2 | 3 | Use the `Announcer` element to create a visually hidden ARIA live region 4 | that announces content changes to screen readers. Use this element when you 5 | need to announce changes to screen readers that something has changed. If changed 6 | element is visible on the page, add the appropriate ARIA live attribute to the 7 | visible element instead of using this announcer. 8 | 9 | It's recommended to create this element with JavaScript using the `Announcer.init` method, 10 | then you can reuse the same announcer throughout the application to 11 | [avoid duplicate regions](https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/#limit-the-number-of-live-regions-on-the-page) 12 | (see below). 13 | 14 | ### Attributes 15 | 16 | `aria-live` 17 | 18 | By default, the announcer is created with the 19 | [`polite` ARIA live attribute](https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/#1.-using-the-aria-live-attribute). 20 | 21 | ## Example 22 | 23 | ```ts 24 | import { Announcer } from "drab/announcer"; 25 | 26 | // creates and appends a new announcer to the body element 27 | const announcer = Announcer.init(); 28 | 29 | // create announcement 30 | announcer.announce("message"); 31 | ``` 32 | 33 | > The `Base` element creates a single `Announcer` to share between all elements 34 | > that can be accessed through `this.announce`. If you are using one of drab's other 35 | > elements you can call `announce` directly on the element to announce changes. 36 | 37 | ## Constructors 38 | 39 | 40 | 41 | ### Constructor 42 | 43 | > **new Announcer**(): `Announcer` 44 | 45 | Defined in: [announcer/index.ts:41](https://github.com/rossrobino/components/blob/main/packages/drab/src/announcer/index.ts#L41) 46 | 47 | #### Returns 48 | 49 | `Announcer` 50 | 51 | #### Overrides 52 | 53 | `HTMLElement.constructor` 54 | 55 | ## Methods 56 | 57 | 58 | 59 | ### announce() 60 | 61 | > **announce**(`message`): `void` 62 | 63 | Defined in: [announcer/index.ts:62](https://github.com/rossrobino/components/blob/main/packages/drab/src/announcer/index.ts#L62) 64 | 65 | #### Parameters 66 | 67 | ##### message 68 | 69 | `string` 70 | 71 | message to announce to screen readers 72 | 73 | #### Returns 74 | 75 | `void` 76 | 77 | --- 78 | 79 | 80 | 81 | ### connectedCallback() 82 | 83 | > **connectedCallback**(): `void` 84 | 85 | Defined in: [announcer/index.ts:45](https://github.com/rossrobino/components/blob/main/packages/drab/src/announcer/index.ts#L45) 86 | 87 | #### Returns 88 | 89 | `void` 90 | 91 | --- 92 | 93 | 94 | 95 | ### init() 96 | 97 | > `static` **init**(): `Announcer` 98 | 99 | Defined in: [announcer/index.ts:79](https://github.com/rossrobino/components/blob/main/packages/drab/src/announcer/index.ts#L79) 100 | 101 | Helper method to create a new `Announcer` element named `drab-announcer` 102 | and append the element to the `` tag. If an announcer already exists 103 | on the page it will return the existing element. 104 | 105 | #### Returns 106 | 107 | `Announcer` 108 | 109 | the created or existing `Announcer` element 110 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/generated/classes/contextmenu.md: -------------------------------------------------------------------------------- 1 | Defined in: [contextmenu/index.ts:16](https://github.com/rossrobino/components/blob/main/packages/drab/src/contextmenu/index.ts#L16) 2 | 3 | Displays content when the `trigger` element is right clicked, or long pressed on mobile. 4 | 5 | ## Constructors 6 | 7 | 8 | 9 | ### Constructor 10 | 11 | > **new ContextMenu**(): `ContextMenu` 12 | 13 | Defined in: [contextmenu/index.ts:20](https://github.com/rossrobino/components/blob/main/packages/drab/src/contextmenu/index.ts#L20) 14 | 15 | #### Returns 16 | 17 | `ContextMenu` 18 | 19 | #### Overrides 20 | 21 | `Lifecycle(Trigger(Content())).constructor` 22 | 23 | ## Accessors 24 | 25 | 26 | 27 | ### event 28 | 29 | #### Get Signature 30 | 31 | > **get** **event**(): keyof `HTMLElementEventMap` 32 | 33 | Defined in: [base/index.ts:120](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L120) 34 | 35 | Event for the `trigger` to execute. 36 | 37 | For example, set to `"mouseover"` to execute the event when the user hovers the mouse over the `trigger`, instead of when they click it. 38 | 39 | ##### Default 40 | 41 | ```ts 42 | "click"; 43 | ``` 44 | 45 | ##### Returns 46 | 47 | keyof `HTMLElementEventMap` 48 | 49 | #### Set Signature 50 | 51 | > **set** **event**(`value`): `void` 52 | 53 | Defined in: [base/index.ts:126](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L126) 54 | 55 | ##### Parameters 56 | 57 | ###### value 58 | 59 | keyof `HTMLElementEventMap` 60 | 61 | ##### Returns 62 | 63 | `void` 64 | 65 | #### Inherited from 66 | 67 | `Lifecycle(Trigger(Content())).event` 68 | 69 | ## Methods 70 | 71 | 72 | 73 | ### connectedCallback() 74 | 75 | > **connectedCallback**(): `void` 76 | 77 | Defined in: [base/index.ts:76](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L76) 78 | 79 | Called when custom element is added to the page. 80 | 81 | #### Returns 82 | 83 | `void` 84 | 85 | #### Inherited from 86 | 87 | `Lifecycle(Trigger(Content())).connectedCallback` 88 | 89 | --- 90 | 91 | 92 | 93 | ### content() 94 | 95 | #### Call Signature 96 | 97 | > **content**\<`T`\>(`instance`): `T` 98 | 99 | Defined in: [base/index.ts:215](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L215) 100 | 101 | ##### Type Parameters 102 | 103 | ###### T 104 | 105 | `T` _extends_ `HTMLElement` 106 | 107 | ##### Parameters 108 | 109 | ###### instance 110 | 111 | `Constructor`\<`T`\> 112 | 113 | The instance of the desired element to validate against, 114 | ex: `HTMLDialogElement`. Defaults to `HTMLElement`. 115 | 116 | ##### Returns 117 | 118 | `T` 119 | 120 | The element that matches the `content` selector. 121 | 122 | ##### Default 123 | 124 | ```ts 125 | this.querySelector("[data-content]"); 126 | ``` 127 | 128 | ##### Inherited from 129 | 130 | `Lifecycle(Trigger(Content())).content` 131 | 132 | #### Call Signature 133 | 134 | > **content**(): `HTMLElement` 135 | 136 | Defined in: [base/index.ts:216](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L216) 137 | 138 | ##### Returns 139 | 140 | `HTMLElement` 141 | 142 | The element that matches the `content` selector. 143 | 144 | ##### Default 145 | 146 | ```ts 147 | this.querySelector("[data-content]"); 148 | ``` 149 | 150 | ##### Inherited from 151 | 152 | `Lifecycle(Trigger(Content())).content` 153 | 154 | --- 155 | 156 | 157 | 158 | ### destroy() 159 | 160 | > **destroy**(): `void` 161 | 162 | Defined in: [base/index.ts:83](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L83) 163 | 164 | Passed into `disconnectedCallback`, since `Base` needs to run `disconnectedCallback` as well. It is overridden in each element that needs to run `disconnectedCallback`. 165 | 166 | #### Returns 167 | 168 | `void` 169 | 170 | #### Inherited from 171 | 172 | `Lifecycle(Trigger(Content())).destroy` 173 | 174 | --- 175 | 176 | 177 | 178 | ### disconnectedCallback() 179 | 180 | > **disconnectedCallback**(): `void` 181 | 182 | Defined in: [base/index.ts:86](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L86) 183 | 184 | Called when custom element is removed from the page. 185 | 186 | #### Returns 187 | 188 | `void` 189 | 190 | #### Inherited from 191 | 192 | `Lifecycle(Trigger(Content())).disconnectedCallback` 193 | 194 | --- 195 | 196 | 197 | 198 | ### hide() 199 | 200 | > **hide**(): `void` 201 | 202 | Defined in: [contextmenu/index.ts:62](https://github.com/rossrobino/components/blob/main/packages/drab/src/contextmenu/index.ts#L62) 203 | 204 | #### Returns 205 | 206 | `void` 207 | 208 | --- 209 | 210 | 211 | 212 | ### listener() 213 | 214 | #### Call Signature 215 | 216 | > **listener**\<`T`\>(`listener`, `options?`): `void` 217 | 218 | Defined in: [base/index.ts:152](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L152) 219 | 220 | ##### Type Parameters 221 | 222 | ###### T 223 | 224 | `T` _extends_ keyof `HTMLElementEventMap` 225 | 226 | ##### Parameters 227 | 228 | ###### listener 229 | 230 | `Listener`\<`T`\> 231 | 232 | Listener to attach to all of the `trigger` elements. 233 | 234 | ###### options? 235 | 236 | `AddEventListenerOptions` 237 | 238 | ##### Returns 239 | 240 | `void` 241 | 242 | ##### Inherited from 243 | 244 | `Lifecycle(Trigger(Content())).listener` 245 | 246 | #### Call Signature 247 | 248 | > **listener**\<`T`\>(`type`, `listener`, `options?`): `void` 249 | 250 | Defined in: [base/index.ts:161](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L161) 251 | 252 | ##### Type Parameters 253 | 254 | ###### T 255 | 256 | `T` _extends_ keyof `HTMLElementEventMap` 257 | 258 | ##### Parameters 259 | 260 | ###### type 261 | 262 | `T` 263 | 264 | Event type. 265 | 266 | ###### listener 267 | 268 | `Listener`\<`T`\> 269 | 270 | Listener to attach to all of the `trigger` elements. 271 | 272 | ###### options? 273 | 274 | `AddEventListenerOptions` 275 | 276 | ##### Returns 277 | 278 | `void` 279 | 280 | ##### Inherited from 281 | 282 | `Lifecycle(Trigger(Content())).listener` 283 | 284 | --- 285 | 286 | 287 | 288 | ### mount() 289 | 290 | > **mount**(): `void` 291 | 292 | Defined in: [contextmenu/index.ts:66](https://github.com/rossrobino/components/blob/main/packages/drab/src/contextmenu/index.ts#L66) 293 | 294 | Passed into `queueMicrotask` in `connectedCallback`. 295 | It is overridden in each component that needs to run `connectedCallback`. 296 | 297 | The reason for this is to make these elements work better with frameworks like Svelte. 298 | For SSR this isn't necessary, but when client side rendering, the HTML within the 299 | custom element isn't available before `connectedCallback` is called. By waiting until 300 | the next microtask, the HTML content is available---then for example, listeners can 301 | be attached to elements inside. 302 | 303 | #### Returns 304 | 305 | `void` 306 | 307 | #### Overrides 308 | 309 | `Lifecycle(Trigger(Content())).mount` 310 | 311 | --- 312 | 313 | 314 | 315 | ### safeListener() 316 | 317 | #### Call Signature 318 | 319 | > **safeListener**\<`T`\>(`type`, `listener`, `element?`, `options?`): `void` 320 | 321 | Defined in: [base/index.ts:35](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L35) 322 | 323 | Wrapper around `addEventListener` that ensures when the element is 324 | removed from the DOM, these event listeners are cleaned up. 325 | 326 | ##### Type Parameters 327 | 328 | ###### T 329 | 330 | `T` _extends_ keyof `HTMLElementEventMap` 331 | 332 | ##### Parameters 333 | 334 | ###### type 335 | 336 | `T` 337 | 338 | Event listener type - ex: `"keydown"` 339 | 340 | ###### listener 341 | 342 | (`this`, `event`) => `any` 343 | 344 | Listener to add to the target. 345 | 346 | ###### element? 347 | 348 | `HTMLElement` 349 | 350 | ###### options? 351 | 352 | `AddEventListenerOptions` 353 | 354 | Other options sans `signal`. 355 | 356 | ##### Returns 357 | 358 | `void` 359 | 360 | ##### Inherited from 361 | 362 | `Lifecycle(Trigger(Content())).safeListener` 363 | 364 | #### Call Signature 365 | 366 | > **safeListener**\<`T`\>(`type`, `listener`, `document`, `options?`): `void` 367 | 368 | Defined in: [base/index.ts:41](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L41) 369 | 370 | Wrapper around `addEventListener` that ensures when the element is 371 | removed from the DOM, these event listeners are cleaned up. 372 | 373 | ##### Type Parameters 374 | 375 | ###### T 376 | 377 | `T` _extends_ keyof `DocumentEventMap` 378 | 379 | ##### Parameters 380 | 381 | ###### type 382 | 383 | `T` 384 | 385 | Event listener type - ex: `"keydown"` 386 | 387 | ###### listener 388 | 389 | (`this`, `event`) => `any` 390 | 391 | Listener to add to the target. 392 | 393 | ###### document 394 | 395 | `Document` 396 | 397 | ###### options? 398 | 399 | `AddEventListenerOptions` 400 | 401 | Other options sans `signal`. 402 | 403 | ##### Returns 404 | 405 | `void` 406 | 407 | ##### Inherited from 408 | 409 | `Lifecycle(Trigger(Content())).safeListener` 410 | 411 | #### Call Signature 412 | 413 | > **safeListener**\<`T`\>(`type`, `listener`, `window`, `options?`): `void` 414 | 415 | Defined in: [base/index.ts:47](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L47) 416 | 417 | Wrapper around `addEventListener` that ensures when the element is 418 | removed from the DOM, these event listeners are cleaned up. 419 | 420 | ##### Type Parameters 421 | 422 | ###### T 423 | 424 | `T` _extends_ keyof `WindowEventMap` 425 | 426 | ##### Parameters 427 | 428 | ###### type 429 | 430 | `T` 431 | 432 | Event listener type - ex: `"keydown"` 433 | 434 | ###### listener 435 | 436 | (`this`, `event`) => `any` 437 | 438 | Listener to add to the target. 439 | 440 | ###### window 441 | 442 | `Window` 443 | 444 | ###### options? 445 | 446 | `AddEventListenerOptions` 447 | 448 | Other options sans `signal`. 449 | 450 | ##### Returns 451 | 452 | `void` 453 | 454 | ##### Inherited from 455 | 456 | `Lifecycle(Trigger(Content())).safeListener` 457 | 458 | --- 459 | 460 | 461 | 462 | ### show() 463 | 464 | > **show**(`e`): `void` 465 | 466 | Defined in: [contextmenu/index.ts:30](https://github.com/rossrobino/components/blob/main/packages/drab/src/contextmenu/index.ts#L30) 467 | 468 | #### Parameters 469 | 470 | ##### e 471 | 472 | `MouseEvent` | `TouchEvent` 473 | 474 | #### Returns 475 | 476 | `void` 477 | 478 | --- 479 | 480 | 481 | 482 | ### swap() 483 | 484 | > **swap**(`revert`): `void` 485 | 486 | Defined in: [base/index.ts:231](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L231) 487 | 488 | Finds the `HTMLElement | HTMLTemplateElement` via the `swap` selector and 489 | swaps `this.content()` with the content of the element found. 490 | 491 | #### Parameters 492 | 493 | ##### revert 494 | 495 | Wait time (ms) before swapping back, set to `false` to not revert. 496 | default: `800` 497 | 498 | `number` | `false` 499 | 500 | #### Returns 501 | 502 | `void` 503 | 504 | #### Inherited from 505 | 506 | `Lifecycle(Trigger(Content())).swap` 507 | 508 | --- 509 | 510 | 511 | 512 | ### triggers() 513 | 514 | #### Call Signature 515 | 516 | > **triggers**\<`T`\>(`instance`): `NodeListOf`\<`T`\> 517 | 518 | Defined in: [base/index.ts:136](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L136) 519 | 520 | ##### Type Parameters 521 | 522 | ###### T 523 | 524 | `T` _extends_ `HTMLElement` 525 | 526 | ##### Parameters 527 | 528 | ###### instance 529 | 530 | `Constructor`\<`T`\> 531 | 532 | The instance of the desired element to validate against, 533 | ex: `HTMLButtonElement`. Defaults to `HTMLElement`. 534 | 535 | ##### Returns 536 | 537 | `NodeListOf`\<`T`\> 538 | 539 | All of the elements that match the `trigger` selector. 540 | 541 | ##### Default 542 | 543 | ```ts 544 | this.querySelectorAll("[data-trigger]"); 545 | ``` 546 | 547 | ##### Inherited from 548 | 549 | `Lifecycle(Trigger(Content())).triggers` 550 | 551 | #### Call Signature 552 | 553 | > **triggers**(): `NodeListOf`\<`HTMLElement`\> 554 | 555 | Defined in: [base/index.ts:137](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L137) 556 | 557 | ##### Returns 558 | 559 | `NodeListOf`\<`HTMLElement`\> 560 | 561 | All of the elements that match the `trigger` selector. 562 | 563 | ##### Default 564 | 565 | ```ts 566 | this.querySelectorAll("[data-trigger]"); 567 | ``` 568 | 569 | ##### Inherited from 570 | 571 | `Lifecycle(Trigger(Content())).triggers` 572 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/generated/classes/fullscreen.md: -------------------------------------------------------------------------------- 1 | Defined in: [fullscreen/index.ts:18](https://github.com/rossrobino/components/blob/main/packages/drab/src/fullscreen/index.ts#L18) 2 | 3 | Toggles the `documentElement` or `content` element to fullscreen mode. 4 | 5 | Disables the `trigger` if fullscreen is not supported. 6 | 7 | ## Constructors 8 | 9 | 10 | 11 | ### Constructor 12 | 13 | > **new Fullscreen**(): `Fullscreen` 14 | 15 | Defined in: [fullscreen/index.ts:19](https://github.com/rossrobino/components/blob/main/packages/drab/src/fullscreen/index.ts#L19) 16 | 17 | #### Returns 18 | 19 | `Fullscreen` 20 | 21 | #### Overrides 22 | 23 | `Lifecycle(Trigger(Content())).constructor` 24 | 25 | ## Accessors 26 | 27 | 28 | 29 | ### event 30 | 31 | #### Get Signature 32 | 33 | > **get** **event**(): keyof `HTMLElementEventMap` 34 | 35 | Defined in: [base/index.ts:120](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L120) 36 | 37 | Event for the `trigger` to execute. 38 | 39 | For example, set to `"mouseover"` to execute the event when the user hovers the mouse over the `trigger`, instead of when they click it. 40 | 41 | ##### Default 42 | 43 | ```ts 44 | "click"; 45 | ``` 46 | 47 | ##### Returns 48 | 49 | keyof `HTMLElementEventMap` 50 | 51 | #### Set Signature 52 | 53 | > **set** **event**(`value`): `void` 54 | 55 | Defined in: [base/index.ts:126](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L126) 56 | 57 | ##### Parameters 58 | 59 | ###### value 60 | 61 | keyof `HTMLElementEventMap` 62 | 63 | ##### Returns 64 | 65 | `void` 66 | 67 | #### Inherited from 68 | 69 | `Lifecycle(Trigger(Content())).event` 70 | 71 | ## Methods 72 | 73 | 74 | 75 | ### connectedCallback() 76 | 77 | > **connectedCallback**(): `void` 78 | 79 | Defined in: [base/index.ts:76](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L76) 80 | 81 | Called when custom element is added to the page. 82 | 83 | #### Returns 84 | 85 | `void` 86 | 87 | #### Inherited from 88 | 89 | `Lifecycle(Trigger(Content())).connectedCallback` 90 | 91 | --- 92 | 93 | 94 | 95 | ### content() 96 | 97 | #### Call Signature 98 | 99 | > **content**\<`T`\>(`instance`): `T` 100 | 101 | Defined in: [base/index.ts:215](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L215) 102 | 103 | ##### Type Parameters 104 | 105 | ###### T 106 | 107 | `T` _extends_ `HTMLElement` 108 | 109 | ##### Parameters 110 | 111 | ###### instance 112 | 113 | `Constructor`\<`T`\> 114 | 115 | The instance of the desired element to validate against, 116 | ex: `HTMLDialogElement`. Defaults to `HTMLElement`. 117 | 118 | ##### Returns 119 | 120 | `T` 121 | 122 | The element that matches the `content` selector. 123 | 124 | ##### Default 125 | 126 | ```ts 127 | this.querySelector("[data-content]"); 128 | ``` 129 | 130 | ##### Inherited from 131 | 132 | `Lifecycle(Trigger(Content())).content` 133 | 134 | #### Call Signature 135 | 136 | > **content**(): `HTMLElement` 137 | 138 | Defined in: [base/index.ts:216](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L216) 139 | 140 | ##### Returns 141 | 142 | `HTMLElement` 143 | 144 | The element that matches the `content` selector. 145 | 146 | ##### Default 147 | 148 | ```ts 149 | this.querySelector("[data-content]"); 150 | ``` 151 | 152 | ##### Inherited from 153 | 154 | `Lifecycle(Trigger(Content())).content` 155 | 156 | --- 157 | 158 | 159 | 160 | ### destroy() 161 | 162 | > **destroy**(): `void` 163 | 164 | Defined in: [base/index.ts:83](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L83) 165 | 166 | Passed into `disconnectedCallback`, since `Base` needs to run `disconnectedCallback` as well. It is overridden in each element that needs to run `disconnectedCallback`. 167 | 168 | #### Returns 169 | 170 | `void` 171 | 172 | #### Inherited from 173 | 174 | `Lifecycle(Trigger(Content())).destroy` 175 | 176 | --- 177 | 178 | 179 | 180 | ### disconnectedCallback() 181 | 182 | > **disconnectedCallback**(): `void` 183 | 184 | Defined in: [base/index.ts:86](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L86) 185 | 186 | Called when custom element is removed from the page. 187 | 188 | #### Returns 189 | 190 | `void` 191 | 192 | #### Inherited from 193 | 194 | `Lifecycle(Trigger(Content())).disconnectedCallback` 195 | 196 | --- 197 | 198 | 199 | 200 | ### listener() 201 | 202 | #### Call Signature 203 | 204 | > **listener**\<`T`\>(`listener`, `options?`): `void` 205 | 206 | Defined in: [base/index.ts:152](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L152) 207 | 208 | ##### Type Parameters 209 | 210 | ###### T 211 | 212 | `T` _extends_ keyof `HTMLElementEventMap` 213 | 214 | ##### Parameters 215 | 216 | ###### listener 217 | 218 | `Listener`\<`T`\> 219 | 220 | Listener to attach to all of the `trigger` elements. 221 | 222 | ###### options? 223 | 224 | `AddEventListenerOptions` 225 | 226 | ##### Returns 227 | 228 | `void` 229 | 230 | ##### Inherited from 231 | 232 | `Lifecycle(Trigger(Content())).listener` 233 | 234 | #### Call Signature 235 | 236 | > **listener**\<`T`\>(`type`, `listener`, `options?`): `void` 237 | 238 | Defined in: [base/index.ts:161](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L161) 239 | 240 | ##### Type Parameters 241 | 242 | ###### T 243 | 244 | `T` _extends_ keyof `HTMLElementEventMap` 245 | 246 | ##### Parameters 247 | 248 | ###### type 249 | 250 | `T` 251 | 252 | Event type. 253 | 254 | ###### listener 255 | 256 | `Listener`\<`T`\> 257 | 258 | Listener to attach to all of the `trigger` elements. 259 | 260 | ###### options? 261 | 262 | `AddEventListenerOptions` 263 | 264 | ##### Returns 265 | 266 | `void` 267 | 268 | ##### Inherited from 269 | 270 | `Lifecycle(Trigger(Content())).listener` 271 | 272 | --- 273 | 274 | 275 | 276 | ### mount() 277 | 278 | > **mount**(): `void` 279 | 280 | Defined in: [fullscreen/index.ts:50](https://github.com/rossrobino/components/blob/main/packages/drab/src/fullscreen/index.ts#L50) 281 | 282 | Passed into `queueMicrotask` in `connectedCallback`. 283 | It is overridden in each component that needs to run `connectedCallback`. 284 | 285 | The reason for this is to make these elements work better with frameworks like Svelte. 286 | For SSR this isn't necessary, but when client side rendering, the HTML within the 287 | custom element isn't available before `connectedCallback` is called. By waiting until 288 | the next microtask, the HTML content is available---then for example, listeners can 289 | be attached to elements inside. 290 | 291 | #### Returns 292 | 293 | `void` 294 | 295 | #### Overrides 296 | 297 | `Lifecycle(Trigger(Content())).mount` 298 | 299 | --- 300 | 301 | 302 | 303 | ### safeListener() 304 | 305 | #### Call Signature 306 | 307 | > **safeListener**\<`T`\>(`type`, `listener`, `element?`, `options?`): `void` 308 | 309 | Defined in: [base/index.ts:35](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L35) 310 | 311 | Wrapper around `addEventListener` that ensures when the element is 312 | removed from the DOM, these event listeners are cleaned up. 313 | 314 | ##### Type Parameters 315 | 316 | ###### T 317 | 318 | `T` _extends_ keyof `HTMLElementEventMap` 319 | 320 | ##### Parameters 321 | 322 | ###### type 323 | 324 | `T` 325 | 326 | Event listener type - ex: `"keydown"` 327 | 328 | ###### listener 329 | 330 | (`this`, `event`) => `any` 331 | 332 | Listener to add to the target. 333 | 334 | ###### element? 335 | 336 | `HTMLElement` 337 | 338 | ###### options? 339 | 340 | `AddEventListenerOptions` 341 | 342 | Other options sans `signal`. 343 | 344 | ##### Returns 345 | 346 | `void` 347 | 348 | ##### Inherited from 349 | 350 | `Lifecycle(Trigger(Content())).safeListener` 351 | 352 | #### Call Signature 353 | 354 | > **safeListener**\<`T`\>(`type`, `listener`, `document`, `options?`): `void` 355 | 356 | Defined in: [base/index.ts:41](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L41) 357 | 358 | Wrapper around `addEventListener` that ensures when the element is 359 | removed from the DOM, these event listeners are cleaned up. 360 | 361 | ##### Type Parameters 362 | 363 | ###### T 364 | 365 | `T` _extends_ keyof `DocumentEventMap` 366 | 367 | ##### Parameters 368 | 369 | ###### type 370 | 371 | `T` 372 | 373 | Event listener type - ex: `"keydown"` 374 | 375 | ###### listener 376 | 377 | (`this`, `event`) => `any` 378 | 379 | Listener to add to the target. 380 | 381 | ###### document 382 | 383 | `Document` 384 | 385 | ###### options? 386 | 387 | `AddEventListenerOptions` 388 | 389 | Other options sans `signal`. 390 | 391 | ##### Returns 392 | 393 | `void` 394 | 395 | ##### Inherited from 396 | 397 | `Lifecycle(Trigger(Content())).safeListener` 398 | 399 | #### Call Signature 400 | 401 | > **safeListener**\<`T`\>(`type`, `listener`, `window`, `options?`): `void` 402 | 403 | Defined in: [base/index.ts:47](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L47) 404 | 405 | Wrapper around `addEventListener` that ensures when the element is 406 | removed from the DOM, these event listeners are cleaned up. 407 | 408 | ##### Type Parameters 409 | 410 | ###### T 411 | 412 | `T` _extends_ keyof `WindowEventMap` 413 | 414 | ##### Parameters 415 | 416 | ###### type 417 | 418 | `T` 419 | 420 | Event listener type - ex: `"keydown"` 421 | 422 | ###### listener 423 | 424 | (`this`, `event`) => `any` 425 | 426 | Listener to add to the target. 427 | 428 | ###### window 429 | 430 | `Window` 431 | 432 | ###### options? 433 | 434 | `AddEventListenerOptions` 435 | 436 | Other options sans `signal`. 437 | 438 | ##### Returns 439 | 440 | `void` 441 | 442 | ##### Inherited from 443 | 444 | `Lifecycle(Trigger(Content())).safeListener` 445 | 446 | --- 447 | 448 | 449 | 450 | ### swap() 451 | 452 | > **swap**(`revert`): `void` 453 | 454 | Defined in: [base/index.ts:231](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L231) 455 | 456 | Finds the `HTMLElement | HTMLTemplateElement` via the `swap` selector and 457 | swaps `this.content()` with the content of the element found. 458 | 459 | #### Parameters 460 | 461 | ##### revert 462 | 463 | Wait time (ms) before swapping back, set to `false` to not revert. 464 | default: `800` 465 | 466 | `number` | `false` 467 | 468 | #### Returns 469 | 470 | `void` 471 | 472 | #### Inherited from 473 | 474 | `Lifecycle(Trigger(Content())).swap` 475 | 476 | --- 477 | 478 | 479 | 480 | ### toggle() 481 | 482 | > **toggle**(): `void` 483 | 484 | Defined in: [fullscreen/index.ts:38](https://github.com/rossrobino/components/blob/main/packages/drab/src/fullscreen/index.ts#L38) 485 | 486 | Enables or disables fullscreen mode based on the current state. 487 | 488 | #### Returns 489 | 490 | `void` 491 | 492 | --- 493 | 494 | 495 | 496 | ### triggers() 497 | 498 | #### Call Signature 499 | 500 | > **triggers**\<`T`\>(`instance`): `NodeListOf`\<`T`\> 501 | 502 | Defined in: [base/index.ts:136](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L136) 503 | 504 | ##### Type Parameters 505 | 506 | ###### T 507 | 508 | `T` _extends_ `HTMLElement` 509 | 510 | ##### Parameters 511 | 512 | ###### instance 513 | 514 | `Constructor`\<`T`\> 515 | 516 | The instance of the desired element to validate against, 517 | ex: `HTMLButtonElement`. Defaults to `HTMLElement`. 518 | 519 | ##### Returns 520 | 521 | `NodeListOf`\<`T`\> 522 | 523 | All of the elements that match the `trigger` selector. 524 | 525 | ##### Default 526 | 527 | ```ts 528 | this.querySelectorAll("[data-trigger]"); 529 | ``` 530 | 531 | ##### Inherited from 532 | 533 | `Lifecycle(Trigger(Content())).triggers` 534 | 535 | #### Call Signature 536 | 537 | > **triggers**(): `NodeListOf`\<`HTMLElement`\> 538 | 539 | Defined in: [base/index.ts:137](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L137) 540 | 541 | ##### Returns 542 | 543 | `NodeListOf`\<`HTMLElement`\> 544 | 545 | All of the elements that match the `trigger` selector. 546 | 547 | ##### Default 548 | 549 | ```ts 550 | this.querySelectorAll("[data-trigger]"); 551 | ``` 552 | 553 | ##### Inherited from 554 | 555 | `Lifecycle(Trigger(Content())).triggers` 556 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/generated/classes/intersect.md: -------------------------------------------------------------------------------- 1 | Defined in: [intersect/index.ts:38](https://github.com/rossrobino/components/blob/main/packages/drab/src/intersect/index.ts#L38) 2 | 3 | Uses the 4 | [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) 5 | to add a `data-intersect` attribute to `content` when the `trigger` is intersecting. 6 | 7 | ### Events 8 | 9 | `intersect` 10 | 11 | Fired when the `trigger` enters the viewport. 12 | 13 | `exit` 14 | 15 | Fired when the `trigger` exits the viewport. 16 | 17 | ### Attributes 18 | 19 | `threshold` 20 | 21 | Specify a `threshold` between `0` and `1` to determine how much of the 22 | `trigger` should be visible for the intersection to occur. 23 | 24 | ## Constructors 25 | 26 | 27 | 28 | ### Constructor 29 | 30 | > **new Intersect**(): `Intersect` 31 | 32 | Defined in: [intersect/index.ts:39](https://github.com/rossrobino/components/blob/main/packages/drab/src/intersect/index.ts#L39) 33 | 34 | #### Returns 35 | 36 | `Intersect` 37 | 38 | #### Overrides 39 | 40 | `Lifecycle(Trigger(Content())).constructor` 41 | 42 | ## Accessors 43 | 44 | 45 | 46 | ### event 47 | 48 | #### Get Signature 49 | 50 | > **get** **event**(): keyof `HTMLElementEventMap` 51 | 52 | Defined in: [base/index.ts:120](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L120) 53 | 54 | Event for the `trigger` to execute. 55 | 56 | For example, set to `"mouseover"` to execute the event when the user hovers the mouse over the `trigger`, instead of when they click it. 57 | 58 | ##### Default 59 | 60 | ```ts 61 | "click"; 62 | ``` 63 | 64 | ##### Returns 65 | 66 | keyof `HTMLElementEventMap` 67 | 68 | #### Set Signature 69 | 70 | > **set** **event**(`value`): `void` 71 | 72 | Defined in: [base/index.ts:126](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L126) 73 | 74 | ##### Parameters 75 | 76 | ###### value 77 | 78 | keyof `HTMLElementEventMap` 79 | 80 | ##### Returns 81 | 82 | `void` 83 | 84 | #### Inherited from 85 | 86 | `Lifecycle(Trigger(Content())).event` 87 | 88 | ## Methods 89 | 90 | 91 | 92 | ### connectedCallback() 93 | 94 | > **connectedCallback**(): `void` 95 | 96 | Defined in: [base/index.ts:76](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L76) 97 | 98 | Called when custom element is added to the page. 99 | 100 | #### Returns 101 | 102 | `void` 103 | 104 | #### Inherited from 105 | 106 | `Lifecycle(Trigger(Content())).connectedCallback` 107 | 108 | --- 109 | 110 | 111 | 112 | ### content() 113 | 114 | #### Call Signature 115 | 116 | > **content**\<`T`\>(`instance`): `T` 117 | 118 | Defined in: [base/index.ts:215](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L215) 119 | 120 | ##### Type Parameters 121 | 122 | ###### T 123 | 124 | `T` _extends_ `HTMLElement` 125 | 126 | ##### Parameters 127 | 128 | ###### instance 129 | 130 | `Constructor`\<`T`\> 131 | 132 | The instance of the desired element to validate against, 133 | ex: `HTMLDialogElement`. Defaults to `HTMLElement`. 134 | 135 | ##### Returns 136 | 137 | `T` 138 | 139 | The element that matches the `content` selector. 140 | 141 | ##### Default 142 | 143 | ```ts 144 | this.querySelector("[data-content]"); 145 | ``` 146 | 147 | ##### Inherited from 148 | 149 | `Lifecycle(Trigger(Content())).content` 150 | 151 | #### Call Signature 152 | 153 | > **content**(): `HTMLElement` 154 | 155 | Defined in: [base/index.ts:216](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L216) 156 | 157 | ##### Returns 158 | 159 | `HTMLElement` 160 | 161 | The element that matches the `content` selector. 162 | 163 | ##### Default 164 | 165 | ```ts 166 | this.querySelector("[data-content]"); 167 | ``` 168 | 169 | ##### Inherited from 170 | 171 | `Lifecycle(Trigger(Content())).content` 172 | 173 | --- 174 | 175 | 176 | 177 | ### destroy() 178 | 179 | > **destroy**(): `void` 180 | 181 | Defined in: [base/index.ts:83](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L83) 182 | 183 | Passed into `disconnectedCallback`, since `Base` needs to run `disconnectedCallback` as well. It is overridden in each element that needs to run `disconnectedCallback`. 184 | 185 | #### Returns 186 | 187 | `void` 188 | 189 | #### Inherited from 190 | 191 | `Lifecycle(Trigger(Content())).destroy` 192 | 193 | --- 194 | 195 | 196 | 197 | ### disconnectedCallback() 198 | 199 | > **disconnectedCallback**(): `void` 200 | 201 | Defined in: [base/index.ts:86](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L86) 202 | 203 | Called when custom element is removed from the page. 204 | 205 | #### Returns 206 | 207 | `void` 208 | 209 | #### Inherited from 210 | 211 | `Lifecycle(Trigger(Content())).disconnectedCallback` 212 | 213 | --- 214 | 215 | 216 | 217 | ### listener() 218 | 219 | #### Call Signature 220 | 221 | > **listener**\<`T`\>(`listener`, `options?`): `void` 222 | 223 | Defined in: [base/index.ts:152](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L152) 224 | 225 | ##### Type Parameters 226 | 227 | ###### T 228 | 229 | `T` _extends_ keyof `HTMLElementEventMap` 230 | 231 | ##### Parameters 232 | 233 | ###### listener 234 | 235 | `Listener`\<`T`\> 236 | 237 | Listener to attach to all of the `trigger` elements. 238 | 239 | ###### options? 240 | 241 | `AddEventListenerOptions` 242 | 243 | ##### Returns 244 | 245 | `void` 246 | 247 | ##### Inherited from 248 | 249 | `Lifecycle(Trigger(Content())).listener` 250 | 251 | #### Call Signature 252 | 253 | > **listener**\<`T`\>(`type`, `listener`, `options?`): `void` 254 | 255 | Defined in: [base/index.ts:161](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L161) 256 | 257 | ##### Type Parameters 258 | 259 | ###### T 260 | 261 | `T` _extends_ keyof `HTMLElementEventMap` 262 | 263 | ##### Parameters 264 | 265 | ###### type 266 | 267 | `T` 268 | 269 | Event type. 270 | 271 | ###### listener 272 | 273 | `Listener`\<`T`\> 274 | 275 | Listener to attach to all of the `trigger` elements. 276 | 277 | ###### options? 278 | 279 | `AddEventListenerOptions` 280 | 281 | ##### Returns 282 | 283 | `void` 284 | 285 | ##### Inherited from 286 | 287 | `Lifecycle(Trigger(Content())).listener` 288 | 289 | --- 290 | 291 | 292 | 293 | ### mount() 294 | 295 | > **mount**(): `void` 296 | 297 | Defined in: [intersect/index.ts:54](https://github.com/rossrobino/components/blob/main/packages/drab/src/intersect/index.ts#L54) 298 | 299 | Passed into `queueMicrotask` in `connectedCallback`. 300 | It is overridden in each component that needs to run `connectedCallback`. 301 | 302 | The reason for this is to make these elements work better with frameworks like Svelte. 303 | For SSR this isn't necessary, but when client side rendering, the HTML within the 304 | custom element isn't available before `connectedCallback` is called. By waiting until 305 | the next microtask, the HTML content is available---then for example, listeners can 306 | be attached to elements inside. 307 | 308 | #### Returns 309 | 310 | `void` 311 | 312 | #### Overrides 313 | 314 | `Lifecycle(Trigger(Content())).mount` 315 | 316 | --- 317 | 318 | 319 | 320 | ### safeListener() 321 | 322 | #### Call Signature 323 | 324 | > **safeListener**\<`T`\>(`type`, `listener`, `element?`, `options?`): `void` 325 | 326 | Defined in: [base/index.ts:35](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L35) 327 | 328 | Wrapper around `addEventListener` that ensures when the element is 329 | removed from the DOM, these event listeners are cleaned up. 330 | 331 | ##### Type Parameters 332 | 333 | ###### T 334 | 335 | `T` _extends_ keyof `HTMLElementEventMap` 336 | 337 | ##### Parameters 338 | 339 | ###### type 340 | 341 | `T` 342 | 343 | Event listener type - ex: `"keydown"` 344 | 345 | ###### listener 346 | 347 | (`this`, `event`) => `any` 348 | 349 | Listener to add to the target. 350 | 351 | ###### element? 352 | 353 | `HTMLElement` 354 | 355 | ###### options? 356 | 357 | `AddEventListenerOptions` 358 | 359 | Other options sans `signal`. 360 | 361 | ##### Returns 362 | 363 | `void` 364 | 365 | ##### Inherited from 366 | 367 | `Lifecycle(Trigger(Content())).safeListener` 368 | 369 | #### Call Signature 370 | 371 | > **safeListener**\<`T`\>(`type`, `listener`, `document`, `options?`): `void` 372 | 373 | Defined in: [base/index.ts:41](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L41) 374 | 375 | Wrapper around `addEventListener` that ensures when the element is 376 | removed from the DOM, these event listeners are cleaned up. 377 | 378 | ##### Type Parameters 379 | 380 | ###### T 381 | 382 | `T` _extends_ keyof `DocumentEventMap` 383 | 384 | ##### Parameters 385 | 386 | ###### type 387 | 388 | `T` 389 | 390 | Event listener type - ex: `"keydown"` 391 | 392 | ###### listener 393 | 394 | (`this`, `event`) => `any` 395 | 396 | Listener to add to the target. 397 | 398 | ###### document 399 | 400 | `Document` 401 | 402 | ###### options? 403 | 404 | `AddEventListenerOptions` 405 | 406 | Other options sans `signal`. 407 | 408 | ##### Returns 409 | 410 | `void` 411 | 412 | ##### Inherited from 413 | 414 | `Lifecycle(Trigger(Content())).safeListener` 415 | 416 | #### Call Signature 417 | 418 | > **safeListener**\<`T`\>(`type`, `listener`, `window`, `options?`): `void` 419 | 420 | Defined in: [base/index.ts:47](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L47) 421 | 422 | Wrapper around `addEventListener` that ensures when the element is 423 | removed from the DOM, these event listeners are cleaned up. 424 | 425 | ##### Type Parameters 426 | 427 | ###### T 428 | 429 | `T` _extends_ keyof `WindowEventMap` 430 | 431 | ##### Parameters 432 | 433 | ###### type 434 | 435 | `T` 436 | 437 | Event listener type - ex: `"keydown"` 438 | 439 | ###### listener 440 | 441 | (`this`, `event`) => `any` 442 | 443 | Listener to add to the target. 444 | 445 | ###### window 446 | 447 | `Window` 448 | 449 | ###### options? 450 | 451 | `AddEventListenerOptions` 452 | 453 | Other options sans `signal`. 454 | 455 | ##### Returns 456 | 457 | `void` 458 | 459 | ##### Inherited from 460 | 461 | `Lifecycle(Trigger(Content())).safeListener` 462 | 463 | --- 464 | 465 | 466 | 467 | ### swap() 468 | 469 | > **swap**(`revert`): `void` 470 | 471 | Defined in: [base/index.ts:231](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L231) 472 | 473 | Finds the `HTMLElement | HTMLTemplateElement` via the `swap` selector and 474 | swaps `this.content()` with the content of the element found. 475 | 476 | #### Parameters 477 | 478 | ##### revert 479 | 480 | Wait time (ms) before swapping back, set to `false` to not revert. 481 | default: `800` 482 | 483 | `number` | `false` 484 | 485 | #### Returns 486 | 487 | `void` 488 | 489 | #### Inherited from 490 | 491 | `Lifecycle(Trigger(Content())).swap` 492 | 493 | --- 494 | 495 | 496 | 497 | ### triggers() 498 | 499 | #### Call Signature 500 | 501 | > **triggers**\<`T`\>(`instance`): `NodeListOf`\<`T`\> 502 | 503 | Defined in: [base/index.ts:136](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L136) 504 | 505 | ##### Type Parameters 506 | 507 | ###### T 508 | 509 | `T` _extends_ `HTMLElement` 510 | 511 | ##### Parameters 512 | 513 | ###### instance 514 | 515 | `Constructor`\<`T`\> 516 | 517 | The instance of the desired element to validate against, 518 | ex: `HTMLButtonElement`. Defaults to `HTMLElement`. 519 | 520 | ##### Returns 521 | 522 | `NodeListOf`\<`T`\> 523 | 524 | All of the elements that match the `trigger` selector. 525 | 526 | ##### Default 527 | 528 | ```ts 529 | this.querySelectorAll("[data-trigger]"); 530 | ``` 531 | 532 | ##### Inherited from 533 | 534 | `Lifecycle(Trigger(Content())).triggers` 535 | 536 | #### Call Signature 537 | 538 | > **triggers**(): `NodeListOf`\<`HTMLElement`\> 539 | 540 | Defined in: [base/index.ts:137](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L137) 541 | 542 | ##### Returns 543 | 544 | `NodeListOf`\<`HTMLElement`\> 545 | 546 | All of the elements that match the `trigger` selector. 547 | 548 | ##### Default 549 | 550 | ```ts 551 | this.querySelectorAll("[data-trigger]"); 552 | ``` 553 | 554 | ##### Inherited from 555 | 556 | `Lifecycle(Trigger(Content())).triggers` 557 | -------------------------------------------------------------------------------- /apps/docs/src/pages/docs/generated/classes/prefetch.md: -------------------------------------------------------------------------------- 1 | Defined in: [prefetch/index.ts:73](https://github.com/rossrobino/components/blob/main/packages/drab/src/prefetch/index.ts#L73) 2 | 3 | The `Prefetch` element can prefetch a url, or enhance the `HTMLAnchorElement` by loading the HTML for a page before it is navigated to. This element speeds up the navigation for multi-page applications (MPAs). 4 | 5 | If you are using a framework that already has a prefetch feature or uses a client side router, it is best to use the framework's feature instead of this element to ensure prefetching is working in accordance with the router. 6 | 7 | ### Attributes 8 | 9 | `strategy` 10 | 11 | Set the `strategy` attribute to specify the when the prefetch will take place. 12 | 13 | - `"hover"` - (default) After `mouseover`, `focus`, or `touchstart` for > 200ms 14 | - `"visible"` - Uses an intersection observer to prefetch when the anchor is within the viewport. 15 | - `"load"` - Immediately prefetches when the element is loaded, use carefully. 16 | 17 | `prerender` 18 | 19 | Use the `prerender` attribute to use the Speculation Rules API when supported to prerender on the client. This allows you to run client side JavaScript in advance instead of only fetching the HTML. 20 | 21 | Browsers that do not support will still use `` instead. 22 | 23 | [Speculation Rules Reference](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API) 24 | 25 | `url` 26 | 27 | Add a `url` attribute to immediately prefetch a url without having to provide 28 | (or in addition to) `trigger` anchor elements. 29 | 30 | This element can be deprecated once the Speculation Rules API is supported across browsers. The API will be able to prefetch assets in a similar way with the `source: "document"` and `eagerness` features, and will work without JavaScript. 31 | 32 | ## Constructors 33 | 34 | 35 | 36 | ### Constructor 37 | 38 | > **new Prefetch**(): `Prefetch` 39 | 40 | Defined in: [prefetch/index.ts:76](https://github.com/rossrobino/components/blob/main/packages/drab/src/prefetch/index.ts#L76) 41 | 42 | #### Returns 43 | 44 | `Prefetch` 45 | 46 | #### Overrides 47 | 48 | `Lifecycle(Trigger()).constructor` 49 | 50 | ## Accessors 51 | 52 | 53 | 54 | ### event 55 | 56 | #### Get Signature 57 | 58 | > **get** **event**(): keyof `HTMLElementEventMap` 59 | 60 | Defined in: [base/index.ts:120](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L120) 61 | 62 | Event for the `trigger` to execute. 63 | 64 | For example, set to `"mouseover"` to execute the event when the user hovers the mouse over the `trigger`, instead of when they click it. 65 | 66 | ##### Default 67 | 68 | ```ts 69 | "click"; 70 | ``` 71 | 72 | ##### Returns 73 | 74 | keyof `HTMLElementEventMap` 75 | 76 | #### Set Signature 77 | 78 | > **set** **event**(`value`): `void` 79 | 80 | Defined in: [base/index.ts:126](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L126) 81 | 82 | ##### Parameters 83 | 84 | ###### value 85 | 86 | keyof `HTMLElementEventMap` 87 | 88 | ##### Returns 89 | 90 | `void` 91 | 92 | #### Inherited from 93 | 94 | `Lifecycle(Trigger()).event` 95 | 96 | ## Methods 97 | 98 | 99 | 100 | ### connectedCallback() 101 | 102 | > **connectedCallback**(): `void` 103 | 104 | Defined in: [base/index.ts:76](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L76) 105 | 106 | Called when custom element is added to the page. 107 | 108 | #### Returns 109 | 110 | `void` 111 | 112 | #### Inherited from 113 | 114 | `Lifecycle(Trigger()).connectedCallback` 115 | 116 | --- 117 | 118 | 119 | 120 | ### destroy() 121 | 122 | > **destroy**(): `void` 123 | 124 | Defined in: [base/index.ts:83](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L83) 125 | 126 | Passed into `disconnectedCallback`, since `Base` needs to run `disconnectedCallback` as well. It is overridden in each element that needs to run `disconnectedCallback`. 127 | 128 | #### Returns 129 | 130 | `void` 131 | 132 | #### Inherited from 133 | 134 | `Lifecycle(Trigger()).destroy` 135 | 136 | --- 137 | 138 | 139 | 140 | ### disconnectedCallback() 141 | 142 | > **disconnectedCallback**(): `void` 143 | 144 | Defined in: [base/index.ts:86](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L86) 145 | 146 | Called when custom element is removed from the page. 147 | 148 | #### Returns 149 | 150 | `void` 151 | 152 | #### Inherited from 153 | 154 | `Lifecycle(Trigger()).disconnectedCallback` 155 | 156 | --- 157 | 158 | 159 | 160 | ### listener() 161 | 162 | #### Call Signature 163 | 164 | > **listener**\<`T`\>(`listener`, `options?`): `void` 165 | 166 | Defined in: [base/index.ts:152](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L152) 167 | 168 | ##### Type Parameters 169 | 170 | ###### T 171 | 172 | `T` _extends_ keyof `HTMLElementEventMap` 173 | 174 | ##### Parameters 175 | 176 | ###### listener 177 | 178 | `Listener`\<`T`\> 179 | 180 | Listener to attach to all of the `trigger` elements. 181 | 182 | ###### options? 183 | 184 | `AddEventListenerOptions` 185 | 186 | ##### Returns 187 | 188 | `void` 189 | 190 | ##### Inherited from 191 | 192 | `Lifecycle(Trigger()).listener` 193 | 194 | #### Call Signature 195 | 196 | > **listener**\<`T`\>(`type`, `listener`, `options?`): `void` 197 | 198 | Defined in: [base/index.ts:161](https://github.com/rossrobino/components/blob/main/packages/drab/src/base/index.ts#L161) 199 | 200 | ##### Type Parameters 201 | 202 | ###### T 203 | 204 | `T` _extends_ keyof `HTMLElementEventMap` 205 | 206 | ##### Parameters 207 | 208 | ###### type 209 | 210 | `T` 211 | 212 | Event type. 213 | 214 | ###### listener 215 | 216 | `Listener`\<`T`\> 217 | 218 | Listener to attach to all of the `trigger` elements. 219 | 220 | ###### options? 221 | 222 | `AddEventListenerOptions` 223 | 224 | ##### Returns 225 | 226 | `void` 227 | 228 | ##### Inherited from 229 | 230 | `Lifecycle(Trigger()).listener` 231 | 232 | --- 233 | 234 | 235 | 236 | ### mount() 237 | 238 | > **mount**(): `void` 239 | 240 | Defined in: [prefetch/index.ts:143](https://github.com/rossrobino/components/blob/main/packages/drab/src/prefetch/index.ts#L143) 241 | 242 | Passed into `queueMicrotask` in `connectedCallback`. 243 | It is overridden in each component that needs to run `connectedCallback`. 244 | 245 | The reason for this is to make these elements work better with frameworks like Svelte. 246 | For SSR this isn't necessary, but when client side rendering, the HTML within the 247 | custom element isn't available before `connectedCallback` is called. By waiting until 248 | the next microtask, the HTML content is available---then for example, listeners can 249 | be attached to elements inside. 250 | 251 | #### Returns 252 | 253 | `void` 254 | 255 | #### Overrides 256 | 257 | `Lifecycle(Trigger()).mount` 258 | 259 | --- 260 | 261 | 262 | 263 | ### prefetch() 264 | 265 | > **prefetch**(`options`): `void` 266 | 267 | Defined in: [prefetch/index.ts:101](https://github.com/rossrobino/components/blob/main/packages/drab/src/prefetch/index.ts#L101) 268 | 269 | Appends `` or ` 37 | 38 | ... 39 | ``` 40 | 41 | ### Enhance 42 | 43 | ```js 44 | // app/elements/my-dialog.mjs 45 | export default function MyDialog({ html }) { 46 | return html` 47 | ... 48 | 49 | `; 50 | } 51 | ``` 52 | 53 | ```js 54 | // app/browser/drab-dialog.mjs 55 | import "drab/dialog/define"; 56 | ``` 57 | 58 | ### React 59 | 60 | ```tsx 61 | "use client"; 62 | 63 | // dialog.tsx 64 | import { useEffect } from "react"; 65 | 66 | export default function Dialog() { 67 | useEffect(() => { 68 | import("drab/dialog/define"); 69 | }, []); 70 | 71 | return ...; 72 | } 73 | ``` 74 | 75 | ```ts 76 | // drab.d.ts 77 | import type { Elements } from "drab/types"; 78 | import type { HTMLAttributes } from "react"; 79 | 80 | declare module "react" { 81 | namespace JSX { 82 | interface IntrinsicElements extends Elements> {} 83 | } 84 | } 85 | ``` 86 | 87 | ### Solid 88 | 89 | ```tsx 90 | // dialog.tsx 91 | import { onMount } from "solid-js"; 92 | 93 | export default function Dialog() { 94 | onMount(() => { 95 | import("drab/dialog/define"); 96 | }); 97 | 98 | return ...; 99 | } 100 | ``` 101 | 102 | ```ts 103 | // drab.d.ts 104 | import type { Elements } from "drab/types"; 105 | import "solid-js"; 106 | 107 | declare module "solid-js" { 108 | namespace JSX { 109 | interface IntrinsicElements 110 | extends Elements> {} 111 | } 112 | } 113 | ``` 114 | 115 | ### Svelte 116 | 117 | ```svelte 118 | 119 | 126 | 127 | ... 128 | ``` 129 | 130 | ```ts 131 | // drab.d.ts 132 | import type { Elements } from "drab/types"; 133 | 134 | declare module "svelte/elements" { 135 | export interface SvelteHTMLElements 136 | extends Elements> {} 137 | } 138 | 139 | export {}; 140 | ``` 141 | 142 | ### Vue 143 | 144 | ```vue 145 | 146 | 151 | 152 | 155 | ``` 156 | 157 | ```js 158 | // nuxt.config.ts 159 | export default defineNuxtConfig({ 160 | vue: { compilerOptions: { isCustomElement: (tag) => tag.includes("-") } }, 161 | }); 162 | ``` 163 | -------------------------------------------------------------------------------- /apps/docs/src/pages/getting-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Getting Started 3 | description: How to start using drab custom elements. 4 | --- 5 | 6 | # Getting Started 7 | 8 | ## Install 9 | 10 | You can install drab from [npm](https://www.npmjs.com/package/drab) and import the custom elements from the package, or add a `