Core package: tiny-drawer

What the package provides

tiny-drawer ships a TinyDrawer class, bundled TypeScript declarations, ESM and CJS builds, a UMD bundle, CSS outputs, and an optional tiny-engine-core adapter. Version 1.2.0 adds the object-based scroll-full configuration API on top of the earlier outside-click and fullscreen behavior controls.

Vanilla usage

Create a drawer with a host container and configure placement, size, drag behavior, close rules, content, scroll-full behavior, and mount targets from one options object.

import { TinyDrawer } from "tiny-drawer";
import "tiny-drawer/dist/tiny-drawer.css";

const drawer = new TinyDrawer("#app", {
  position: "bottom",
  size: "40%",
  minSize: "20%",
  maxSize: "90%",
  draggable: true,
  backdrop: true,
  closeOnEscape: true,
  content: "<div>Typed content</div>",
});

drawer.open();

TypeScript usage

The package exports typed options so you can keep the constructor configuration checked at compile time.

import { TinyDrawer, type TinyDrawerOptions } from "tiny-drawer";

const options: TinyDrawerOptions = {
  position: "right",
  size: "40%",
  content: "<div>Typed content</div>",
};

const drawer = new TinyDrawer("#panel", options);

Methods

The published class exposes open(), close(), toggle(), destroy(), setContent(), setPosition(), setSize(), getSize(), and isOpen().

Events and callbacks

Use lifecycle callbacks in the options object, or listen for custom events on the original parent container when you want DOM-level integration.

const container = document.querySelector("#app");

container?.addEventListener("tiny-drawer:open", (event) => {
  console.log("opened", event.detail.instance);
});

container?.addEventListener("tiny-drawer:drag-end", (event) => {
  console.log("final size", event.detail.size);
});

Behavior notes

The current package supports top, right, bottom, and left placement. Draggable resizing uses pointer events, requestAnimationFrame, and clamps values between minSizeand maxSize.

In 1.2.0, scroll-full behavior is configured through onScrollFull itself. You can still use onScrollFull: truefor the default behavior, or pass an object such as { backDrop: true, drawer: false, scrollTarget: ".custom-selector" } when only specific scroll regions should trigger fullscreen expansion. The core package also keeps outSideClickClose for boundary-aware closing, and the default mount target stays on document.body unless you provide parentContainer.

1.2.0 scroll-full update

If you are upgrading from 1.1.0, this is the main API change to note:

For the full constructor option list, method reference, and event names, continue to the Features & Props page.

Optional tiny-engine-core adapter

If your runtime already uses tiny-engine-core, the package exposes an adapter factory instead of forcing that dependency into every installation.

import { createTinyEngineDrawer } from "tiny-drawer";

const plugin = createTinyEngineDrawer(core, {
  backdrop: true,
});

plugin.install();

const drawer = core.drawer?.("#app", {
  content: "<div>Installed from tiny-engine-core</div>",
});