Headless custom element library
MIT License
Dialog
remove-body-scroll
attribute to remove the scroll on document.body
when the dialog is open.Full Changelog: https://github.com/rossrobino/drab/compare/5.3.6...5.4.0
Published by rossrobino 8 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/5.3.5...5.3.6
Prefetch
Related issue: https://github.com/WICG/nav-speculation/issues/162#issuecomment-1977818473
Published by rossrobino 8 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/5.3.4...5.3.5
Prefetch
supports
checks since speculation rules are a progressive enhancement.Published by rossrobino 8 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/5.3.3...5.3.4
Prefetch
link
tag for prefetch even when prerendering as a fallback in case speculations rules fails.Published by rossrobino 8 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/5.3.2...5.3.3
Prefetch
fetch
with low priority instead of link
tag for prefetch when Speculation Rules is not supported.Dialog
click-outside-close
attribute to Dialog type.Published by rossrobino 8 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/5.3.1...5.3.2
click-outside-close
attribute to the dialog element.Published by rossrobino 8 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/5.3.0...5.3.1
Published by rossrobino 8 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/5.2.3...5.3.0
Published by rossrobino 8 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/5.2.2...5.2.3
Published by rossrobino 8 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/5.2.1...5.2.2
Published by rossrobino 9 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/5.2.0...5.2.1
Published by rossrobino 9 months ago
Prefetch
element to progressively enhance HTMLAnchorElement
s and prefetch content before user navigation. Uses the platform link
tag or optionally the experimental Speculation Rules API if supported to run client-side JS on the prefetched page in advance.Full Changelog: https://github.com/rossrobino/drab/compare/5.1.0...5.2.0
Published by rossrobino 9 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/5.0.2...5.1.0
Published by rossrobino 9 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/5.0.1...5.0.2
Published by rossrobino 9 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/5.0.0...5.0.1
This version adds attribute types for each custom element to provide auto-complete for JSX frameworks like React and Solid.
Types are included in the same entry point as the element as {ElementName}Attributes
.
Published by rossrobino 9 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/4.1.7...5.0.0
Version 5 converts the library from Svelte components to custom elements.
Since drab already required users to provide most of the HTML via slots, the benefit of using Svelte to author the components was outweighed by the benefits of using custom elements, primarily the fact that custom elements can be used in any framework.
drab's custom elements do not use the shadow DOM, so the contents of each element can still be server-side rendered with a framework. drab also works with client side rendering, drab pushes back the execution of connectedCallback
to the end of the micro-task queue so frameworks like Svelte render the HTML within the custom element before connectedCallback
.
I appreciate all of the interest in the library, I hope these updates will enable it to reach a broader range of users and projects.
Example to convert a drab 4 Svelte component to utilize drab 5. See the docs for updated examples of each component.
<script lang="ts">
import { Editor } from "drab";
</script>
<Editor
classButton="button button-primary"
classControls="flex gap-2"
classTextarea="input h-36 mb-2"
placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
contentElements={[
{
title: "Bullet",
text: "- ",
display: "block",
icon: "Bullet",
},
{
title: "Italic",
text: "*",
display: "wrap",
icon: "Italic",
key: "i",
class: "italic",
},
{
title: "Anchor",
text: "[text](href)",
display: "inline",
icon: "Anchor",
key: "[",
},
]}
/>
Ensure custom elements are being imported and defined in the browser only, since window
is not available on the server. In Svelte, you can utilize onMount
. This import only needs to run once for the element to be defined and used anywhere.
Instead of defining props with JavaScript, each prop is defined using HTML attributes instead. This authoring constraint has resulted in a much more consistent API that gives you complete access to the underlying markup. For example, you can see that you have more control over how each button is displayed and where it is rendered in relation to the textarea
.
Instead of using slot props, drab identifies trigger
and content
elements via CSS selectors (default data-trigger
and data-content
), inspired by libraries such as Radix and Melt UI.
This also frees you from styling the components through props, you can now style the content of these elements however you like.
<script>
import { onMount } from "svelte";
// only execute on the client
onMount(async () => {
// only define once
if (!customElements.get("drab-editor")) {
const { Editor } = await import("drab/editor");
customElements.define("drab-editor", Editor);
}
});
</script>
<drab-editor>
<textarea
data-content
class="input mb-2 h-36"
placeholder="asterisk: ctrl+i, anchor: ctrl+["
></textarea>
<div class="flex gap-2">
<button
data-trigger
data-value="- "
data-type="block"
data-key="i"
class="button button-primary"
>
Bullet
</button>
<button
data-trigger
data-value="*"
data-type="wrap"
class="button button-primary italic"
>
Italic
</button>
<button
data-trigger
data-value="[text](href)"
data-type="inline"
data-key="["
class="button button-primary"
>
Anchor
</button>
</div>
</drab-editor>
drab now uses the Web Animations API instead of Svelte's animations.
Each deprecated component is linked to a REPL to copy and paste if you need it.
You can also all of the version 4 components on GitHub. Most of them don't have many imports, so you can easily copy and paste into your project if you don't want to upgrade to v5.
Sheet
has been replaced with a more general purpose Dialog
which animates the native HTMLDialogElement
.Details
has improved accessibility by animating the content of the HTMLDetailsElement
instead of creating a copy outside of the content.Popover
now animates the Popover API instead of using a custom JS solution (not supported in FireFox currently).TableSort
, and no longer has pagination.Besides the configuration, the functionality of other components remain unchanged.
Published by rossrobino 10 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/4.1.6...4.1.7
Fixes component type for Editor.
Published by rossrobino 11 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/4.1.5...4.1.6
Published by rossrobino 11 months ago
Full Changelog: https://github.com/rossrobino/drab/compare/4.1.4...4.1.5
Published by rossrobino about 1 year ago
Full Changelog: https://github.com/rossrobino/drab/compare/4.1.3...4.1.4