mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-11 04:38:18 +00:00
Release beta 7 with Drawer component
This commit is contained in:
Ronan Berder
@@ -2,6 +2,23 @@
|
||||
|
||||
## Unreleased
|
||||
|
||||
## [1.0.0-beta.7] - 2026-06-25
|
||||
|
||||
### Added
|
||||
|
||||
- Added a beta Drawer component with native `<dialog>` markup, side placement, animated close behavior, backdrop and Escape handling, style-pack visuals, JavaScript entrypoints, and docs.
|
||||
|
||||
### Changed
|
||||
|
||||
- Updated the docs dependency to `reallysimpledocs@^1.0.2`.
|
||||
- Marked Chart and Drawer as beta components in the docs navigation.
|
||||
- Promoted the Chart docs warning from alpha to beta.
|
||||
- Updated installation CDN examples for `basecoat-css@1.0.0-beta.7`.
|
||||
|
||||
### Fixed
|
||||
|
||||
- Aligned Drawer examples more closely with upstream shadcn/ui while avoiding Chart API coupling in Drawer docs.
|
||||
|
||||
## [1.0.0-beta.6] - 2026-06-23
|
||||
|
||||
### Changed
|
||||
|
||||
@@ -4,8 +4,8 @@ import chartExamplesSource from "../site/chart-examples.js?raw"
|
||||
|
||||
# Chart
|
||||
|
||||
<Callout type="warning" title="Alpha API" icon="triangle-alert">
|
||||
Chart support is alpha. The JavaScript API, generated markup, and option names may change before the stable 1.0 release.
|
||||
<Callout type="warning" title="Beta API" icon="triangle-alert">
|
||||
Chart support is beta. The JavaScript API, generated markup, and option names may change before the stable 1.0 release.
|
||||
</Callout>
|
||||
|
||||
Use Chart.js with Basecoat defaults for themed colors, external tooltips, and optional generated legends.
|
||||
|
||||
@@ -0,0 +1,312 @@
|
||||
# Drawer
|
||||
|
||||
<Preview>
|
||||
<button type="button" class="btn" data-variant="outline" onclick="document.getElementById('demo-drawer').showModal()">Open Drawer</button>
|
||||
<dialog id="demo-drawer" class="drawer" aria-labelledby="demo-drawer-title" aria-describedby="demo-drawer-description">
|
||||
<article>
|
||||
<header class="mx-auto w-full max-w-sm">
|
||||
<h2 id="demo-drawer-title">Move Goal</h2>
|
||||
<p id="demo-drawer-description">Set your daily activity goal.</p>
|
||||
</header>
|
||||
<section class="px-4">
|
||||
<div class="mx-auto w-full max-w-sm">
|
||||
<div class="flex items-center justify-center gap-6">
|
||||
<button type="button" class="btn rounded-full" data-variant="outline" data-size="icon-sm" aria-label="Decrease"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14" /></svg></button>
|
||||
<div class="text-center">
|
||||
<div class="text-7xl font-bold">350</div>
|
||||
<div class="text-muted-foreground text-xs uppercase">Calories/day</div>
|
||||
</div>
|
||||
<button type="button" class="btn rounded-full" data-variant="outline" data-size="icon-sm" aria-label="Increase"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14" /><path d="M12 5v14" /></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="mx-auto w-full max-w-sm">
|
||||
<button type="button" class="btn" onclick="this.closest('dialog').close()">Submit</button>
|
||||
<button type="button" class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
</Preview>
|
||||
|
||||
## Usage
|
||||
|
||||
<Steps>
|
||||
<Step title="Include CSS">
|
||||
|
||||
Import Tailwind and one full Basecoat style bundle.
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
@import "basecoat-css/vega.css";
|
||||
```
|
||||
|
||||
Or import only the base CSS, Drawer component CSS, and one style pack.
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
@import "basecoat-css/base.css";
|
||||
@import "basecoat-css/components/drawer.css";
|
||||
@import "basecoat-css/styles/vega.css";
|
||||
```
|
||||
|
||||
Using CDN or bundler imports? See the [Installation page](/installation).
|
||||
|
||||
</Step>
|
||||
<Step title="Include JavaScript">
|
||||
|
||||
Copy or serve the full Basecoat JavaScript bundle.
|
||||
|
||||
```html
|
||||
<script src="/assets/js/all.min.js" defer></script>
|
||||
```
|
||||
|
||||
Or copy or serve the Basecoat runtime and Drawer script.
|
||||
|
||||
```html
|
||||
<script src="/assets/js/basecoat.min.js" defer></script>
|
||||
<script src="/assets/js/drawer.min.js" defer></script>
|
||||
```
|
||||
|
||||
Using CDN or bundler imports? See the [Installation page](/installation).
|
||||
|
||||
</Step>
|
||||
<Step title="Add your drawer HTML">
|
||||
|
||||
Basecoat maps shadcn/ui's Vaul Drawer to a native `<dialog>` element. This keeps modality, focus handling, and inert page content in the browser platform. The Drawer script adds safe backdrop-click close and lets the exit animation finish before calling the native close. Drag gestures, snap points, and the drag handle are intentionally not included.
|
||||
|
||||
```html
|
||||
<button type="button" class="btn" data-variant="outline" onclick="document.getElementById('demo-drawer').showModal()">Open Drawer</button>
|
||||
<dialog id="demo-drawer" class="drawer" aria-labelledby="demo-drawer-title" aria-describedby="demo-drawer-description">
|
||||
<article>
|
||||
<header class="mx-auto w-full max-w-sm">
|
||||
<h2 id="demo-drawer-title">Move Goal</h2>
|
||||
<p id="demo-drawer-description">Set your daily activity goal.</p>
|
||||
</header>
|
||||
<section class="px-4">
|
||||
<div class="mx-auto w-full max-w-sm">
|
||||
<div class="flex items-center justify-center gap-6">
|
||||
<button type="button" class="btn rounded-full" data-variant="outline" data-size="icon-sm" aria-label="Decrease">...</button>
|
||||
<div class="text-center">
|
||||
<div class="text-7xl font-bold">350</div>
|
||||
<div class="text-muted-foreground text-xs uppercase">Calories/day</div>
|
||||
</div>
|
||||
<button type="button" class="btn rounded-full" data-variant="outline" data-size="icon-sm" aria-label="Increase">...</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="mx-auto w-full max-w-sm">
|
||||
<button type="button" class="btn" onclick="this.closest('dialog').close()">Submit</button>
|
||||
<button type="button" class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
```
|
||||
|
||||
</Step>
|
||||
</Steps>
|
||||
|
||||
### HTML structure
|
||||
|
||||
<Callout type="warning" title="No drag handle" icon="triangle-alert">
|
||||
Basecoat does not implement Vaul's drag-to-close gesture, snap points, or drag handle. Drawers close with outside click, Escape, or explicit close controls.
|
||||
</Callout>
|
||||
|
||||
<dl>
|
||||
<dt><code><button type="button" onclick="drawer.showModal()"></code> <span class="badge" data-variant="secondary">Optional</span></dt>
|
||||
<dd>Trigger button. Basecoat intentionally uses the native <code>HTMLDialogElement.showModal()</code> method.</dd>
|
||||
<dt><code><dialog class="drawer" data-side="bottom|top|left|right"></code></dt>
|
||||
<dd>
|
||||
Native modal drawer. Omit <code>data-side</code> for the default bottom drawer. Add <code>aria-labelledby</code> and <code>aria-describedby</code> when title and description are present. JavaScript adds the <code>data-drawer-initialized</code> flag and manages animated close behavior.
|
||||
<dl>
|
||||
<dt><code><article></code></dt>
|
||||
<dd>
|
||||
Drawer content surface.
|
||||
<dl>
|
||||
<dt><code><header></code> <span class="badge" data-variant="secondary">Optional</span></dt>
|
||||
<dd>Drawer header with a title and optional description.</dd>
|
||||
<dt><code><section></code> <span class="badge" data-variant="secondary">Optional</span></dt>
|
||||
<dd>Scrollable body/content area.</dd>
|
||||
<dt><code><footer></code> <span class="badge" data-variant="secondary">Optional</span></dt>
|
||||
<dd>Action area pinned after the drawer body.</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
## Examples
|
||||
|
||||
### Sides
|
||||
|
||||
Use `data-side` to set the viewport side. Available values are `top`, `right`, `bottom`, and `left`.
|
||||
|
||||
<Preview>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button type="button" class="btn" data-variant="outline" onclick="document.getElementById('drawer-side-top').showModal()">Top</button>
|
||||
<button type="button" class="btn" data-variant="outline" onclick="document.getElementById('drawer-side-right').showModal()">Right</button>
|
||||
<button type="button" class="btn" data-variant="outline" onclick="document.getElementById('drawer-side-bottom').showModal()">Bottom</button>
|
||||
<button type="button" class="btn" data-variant="outline" onclick="document.getElementById('drawer-side-left').showModal()">Left</button>
|
||||
</div>
|
||||
<dialog id="drawer-side-top" class="drawer" data-side="top" aria-labelledby="drawer-side-top-title" aria-describedby="drawer-side-top-description">
|
||||
<article class="max-h-[50vh]">
|
||||
<header>
|
||||
<h2 id="drawer-side-top-title">Move Goal</h2>
|
||||
<p id="drawer-side-top-description">Set your daily activity goal.</p>
|
||||
</header>
|
||||
<section class="px-4">
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<button type="button" class="btn" onclick="this.closest('dialog').close()">Submit</button>
|
||||
<button type="button" class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
<dialog id="drawer-side-right" class="drawer" data-side="right" aria-labelledby="drawer-side-right-title" aria-describedby="drawer-side-right-description">
|
||||
<article>
|
||||
<header>
|
||||
<h2 id="drawer-side-right-title">Move Goal</h2>
|
||||
<p id="drawer-side-right-description">Set your daily activity goal.</p>
|
||||
</header>
|
||||
<section class="px-4">
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<button type="button" class="btn" onclick="this.closest('dialog').close()">Submit</button>
|
||||
<button type="button" class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
<dialog id="drawer-side-bottom" class="drawer" data-side="bottom" aria-labelledby="drawer-side-bottom-title" aria-describedby="drawer-side-bottom-description">
|
||||
<article class="max-h-[50vh]">
|
||||
<header>
|
||||
<h2 id="drawer-side-bottom-title">Move Goal</h2>
|
||||
<p id="drawer-side-bottom-description">Set your daily activity goal.</p>
|
||||
</header>
|
||||
<section class="px-4">
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<button type="button" class="btn" onclick="this.closest('dialog').close()">Submit</button>
|
||||
<button type="button" class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
<dialog id="drawer-side-left" class="drawer" data-side="left" aria-labelledby="drawer-side-left-title" aria-describedby="drawer-side-left-description">
|
||||
<article>
|
||||
<header>
|
||||
<h2 id="drawer-side-left-title">Move Goal</h2>
|
||||
<p id="drawer-side-left-description">Set your daily activity goal.</p>
|
||||
</header>
|
||||
<section class="px-4">
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<button type="button" class="btn" onclick="this.closest('dialog').close()">Submit</button>
|
||||
<button type="button" class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
</Preview>
|
||||
|
||||
### Scrollable content
|
||||
|
||||
Keep actions visible while the drawer body scrolls.
|
||||
|
||||
<Preview>
|
||||
<button type="button" class="btn" data-variant="outline" onclick="document.getElementById('drawer-scrollable').showModal()">Scrollable Content</button>
|
||||
<dialog id="drawer-scrollable" class="drawer" data-side="right" aria-labelledby="drawer-scrollable-title" aria-describedby="drawer-scrollable-description">
|
||||
<article>
|
||||
<header>
|
||||
<h2 id="drawer-scrollable-title">Move Goal</h2>
|
||||
<p id="drawer-scrollable-description">Set your daily activity goal.</p>
|
||||
</header>
|
||||
<section class="px-4">
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<button type="button" class="btn" onclick="this.closest('dialog').close()">Submit</button>
|
||||
<button type="button" class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
</Preview>
|
||||
|
||||
### RTL
|
||||
|
||||
Drawer sides are physical viewport sides. Content spacing and text alignment follow document direction.
|
||||
|
||||
<Preview>
|
||||
<div dir="rtl">
|
||||
<button type="button" class="btn" data-variant="outline" onclick="document.getElementById('drawer-rtl').showModal()">فتح الدرج</button>
|
||||
<dialog id="drawer-rtl" class="drawer" aria-labelledby="drawer-rtl-title" aria-describedby="drawer-rtl-description">
|
||||
<article>
|
||||
<header class="mx-auto w-full max-w-sm">
|
||||
<h2 id="drawer-rtl-title">نقل الهدف</h2>
|
||||
<p id="drawer-rtl-description">حدد هدف نشاطك اليومي.</p>
|
||||
</header>
|
||||
<section class="px-4">
|
||||
<div class="mx-auto w-full max-w-sm">
|
||||
<div class="flex items-center justify-center gap-6">
|
||||
<button type="button" class="btn rounded-full" data-variant="outline" data-size="icon-sm" aria-label="تقليل"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14" /></svg></button>
|
||||
<div class="text-center">
|
||||
<div class="text-7xl font-bold">٣٥٠</div>
|
||||
<div class="text-muted-foreground text-xs uppercase">سعرات حرارية/يوم</div>
|
||||
</div>
|
||||
<button type="button" class="btn rounded-full" data-variant="outline" data-size="icon-sm" aria-label="زيادة"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14" /><path d="M12 5v14" /></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="mx-auto w-full max-w-sm">
|
||||
<button type="button" class="btn" onclick="this.closest('dialog').close()">إرسال</button>
|
||||
<button type="button" class="btn" data-variant="outline" onclick="this.closest('dialog').close()">إلغاء</button>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
</div>
|
||||
</Preview>
|
||||
+6
-1
@@ -68,12 +68,17 @@
|
||||
{
|
||||
"type": "item",
|
||||
"slug": "components/chart",
|
||||
"badge": "Alpha"
|
||||
"badge": "Beta"
|
||||
},
|
||||
"components/checkbox",
|
||||
"components/combobox",
|
||||
"components/command",
|
||||
"components/dialog",
|
||||
{
|
||||
"type": "item",
|
||||
"slug": "components/drawer",
|
||||
"badge": "Beta"
|
||||
},
|
||||
"components/dropdown-menu",
|
||||
"components/empty",
|
||||
"components/field",
|
||||
|
||||
@@ -10,13 +10,13 @@ Basecoat can be used from a CDN or installed with npm. Use the CDN for simple st
|
||||
Use the default bundled stylesheet. It is an alias for the Vega style bundle.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.6/dist/basecoat.cdn.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.7/dist/basecoat.cdn.min.css" />
|
||||
```
|
||||
|
||||
You can also use one of the named style bundles: `vega`, `nova`, `maia`, `lyra`, `mira`, `luma`, `sera`, or `rhea`.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.6/dist/basecoat-maia.cdn.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.7/dist/basecoat-maia.cdn.min.css" />
|
||||
```
|
||||
|
||||
</Step>
|
||||
@@ -25,15 +25,15 @@ You can also use one of the named style bundles: `vega`, `nova`, `maia`, `lyra`,
|
||||
Most components are CSS-only. Interactive components need JavaScript. Use the all-in-one bundle when file size is not a concern.
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.6/dist/js/all.min.js" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.7/dist/js/all.min.js" defer></script>
|
||||
```
|
||||
|
||||
Or load the Basecoat runtime once, then only the component scripts you use.
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.6/dist/js/basecoat.min.js" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.6/dist/js/dropdown-menu.min.js" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.6/dist/js/select.min.js" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.7/dist/js/basecoat.min.js" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.7/dist/js/dropdown-menu.min.js" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.7/dist/js/select.min.js" defer></script>
|
||||
```
|
||||
|
||||
</Step>
|
||||
@@ -203,6 +203,7 @@ These components need JavaScript for behavior:
|
||||
|
||||
- [Combobox](/components/combobox)
|
||||
- [Command](/components/command)
|
||||
- [Drawer](/components/drawer)
|
||||
- [Dropdown Menu](/components/dropdown-menu)
|
||||
- [Popover](/components/popover)
|
||||
- [Select](/components/select)
|
||||
|
||||
Generated
+8
-8
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "basecoat",
|
||||
"version": "1.0.0-beta.6",
|
||||
"version": "1.0.0-beta.7",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "basecoat",
|
||||
"version": "1.0.0-beta.6",
|
||||
"version": "1.0.0-beta.7",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"packages/*"
|
||||
@@ -20,7 +20,7 @@
|
||||
"lucide-static": "^1.17.0",
|
||||
"nunjucks": "^3.2.4",
|
||||
"prettier": "^3.5.3",
|
||||
"reallysimpledocs": "^1.0.1",
|
||||
"reallysimpledocs": "^1.0.2",
|
||||
"tailwindcss": "^4.1.17",
|
||||
"terser": "^5.42.0",
|
||||
"wrangler": "^4.50.0"
|
||||
@@ -7823,9 +7823,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/reallysimpledocs": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/reallysimpledocs/-/reallysimpledocs-1.0.1.tgz",
|
||||
"integrity": "sha512-a0ekB68JP/khU8MXnwEql/jyO+NUi25EyfDgtlIQCpRFfuUgsY9b0U1eewBpsmUfxznqvNG4oBkUcRBfydcM2g==",
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/reallysimpledocs/-/reallysimpledocs-1.0.2.tgz",
|
||||
"integrity": "sha512-nAPX+sc02/zfGQb3+6eILRLtK0OwLDTdfv1DXDeCCgUSEN4hMNBjsZLYMMvXAshYxvCHv41Tmj5xY6gquKcVhA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@astrojs/markdown-remark": "^7.2.0",
|
||||
@@ -9883,7 +9883,7 @@
|
||||
},
|
||||
"packages/cli": {
|
||||
"name": "basecoat-cli",
|
||||
"version": "1.0.0-beta.6",
|
||||
"version": "1.0.0-beta.7",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"commander": "^13.1.0",
|
||||
@@ -9896,7 +9896,7 @@
|
||||
},
|
||||
"packages/css": {
|
||||
"name": "basecoat-css",
|
||||
"version": "1.0.0-beta.6",
|
||||
"version": "1.0.0-beta.7",
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "basecoat",
|
||||
"version": "1.0.0-beta.6",
|
||||
"version": "1.0.0-beta.7",
|
||||
"description": "shadcn/ui for the rest of us",
|
||||
"author": "hunvreus",
|
||||
"type": "module",
|
||||
@@ -49,7 +49,7 @@
|
||||
"lucide-static": "^1.17.0",
|
||||
"nunjucks": "^3.2.4",
|
||||
"prettier": "^3.5.3",
|
||||
"reallysimpledocs": "^1.0.1",
|
||||
"reallysimpledocs": "^1.0.2",
|
||||
"tailwindcss": "^4.1.17",
|
||||
"terser": "^5.42.0",
|
||||
"wrangler": "^4.50.0"
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "basecoat-cli",
|
||||
"version": "1.0.0-beta.6",
|
||||
"version": "1.0.0-beta.7",
|
||||
"description": "Add Basecoat components to your project",
|
||||
"author": "hunvreus",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"bin": {
|
||||
"basecoat-cli": "./dist/index.js"
|
||||
"basecoat-cli": "dist/index.js"
|
||||
},
|
||||
"files": [
|
||||
"dist/"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "basecoat-css",
|
||||
"version": "1.0.0-beta.6",
|
||||
"version": "1.0.0-beta.7",
|
||||
"description": "Tailwind CSS for Basecoat components",
|
||||
"author": {
|
||||
"name": "hunvreus",
|
||||
@@ -52,6 +52,8 @@
|
||||
"./command.min": "./dist/js/command.min.js",
|
||||
"./dropdown-menu": "./dist/js/dropdown-menu.js",
|
||||
"./dropdown-menu.min": "./dist/js/dropdown-menu.min.js",
|
||||
"./drawer": "./dist/js/drawer.js",
|
||||
"./drawer.min": "./dist/js/drawer.min.js",
|
||||
"./popover": "./dist/js/popover.js",
|
||||
"./popover.min": "./dist/js/popover.min.js",
|
||||
"./range": "./dist/js/range.js",
|
||||
|
||||
+1
-1
@@ -125,7 +125,7 @@ async function build() {
|
||||
|
||||
// Create combined component files
|
||||
console.log('Creating combined component files...');
|
||||
const componentsToCombine = ['basecoat.js', 'accordion.js', 'command.js', 'combobox.js', 'dropdown-menu.js', 'popover.js', 'range.js', 'select.js', 'sidebar.js', 'tabs.js', 'toast.js'];
|
||||
const componentsToCombine = ['basecoat.js', 'accordion.js', 'command.js', 'combobox.js', 'drawer.js', 'dropdown-menu.js', 'popover.js', 'range.js', 'select.js', 'sidebar.js', 'tabs.js', 'toast.js'];
|
||||
const componentPaths = componentsToCombine.map(f => path.join(srcJsDir, f));
|
||||
|
||||
// Create non-minified bundle
|
||||
|
||||
@@ -19,6 +19,7 @@ const componentOrder = [
|
||||
'command',
|
||||
'combobox',
|
||||
'dialog',
|
||||
'drawer',
|
||||
'dropdown-menu',
|
||||
'empty',
|
||||
'field',
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
@import "./components/command.css";
|
||||
@import "./components/combobox.css";
|
||||
@import "./components/dialog.css";
|
||||
@import "./components/drawer.css";
|
||||
@import "./components/dropdown-menu.css";
|
||||
@import "./components/empty.css";
|
||||
@import "./components/field.css";
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
/* Drawer */
|
||||
@layer components {
|
||||
.drawer {
|
||||
@apply fixed inset-0 m-0 size-auto max-h-none max-w-none overflow-visible bg-transparent p-0 text-inherit opacity-0 transition-all transition-discrete duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] backdrop:opacity-0 backdrop:transition-all backdrop:transition-discrete backdrop:duration-500 backdrop:ease-[cubic-bezier(0.32,0.72,0,1)];
|
||||
|
||||
> * {
|
||||
@apply fixed z-50 flex h-auto flex-col transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform outline-hidden;
|
||||
}
|
||||
|
||||
&:not([data-side]) > *,
|
||||
&[data-side='bottom'] > * {
|
||||
@apply inset-x-0 bottom-0 mt-24 max-h-[80vh] translate-y-full;
|
||||
}
|
||||
|
||||
&[data-side='top'] > * {
|
||||
@apply inset-x-0 top-0 mb-24 max-h-[80vh] -translate-y-full;
|
||||
}
|
||||
|
||||
&[data-side='left'] > * {
|
||||
@apply inset-y-0 left-0 w-3/4 max-w-sm -translate-x-full;
|
||||
}
|
||||
|
||||
&[data-side='right'] > * {
|
||||
@apply inset-y-0 right-0 w-3/4 max-w-sm translate-x-full;
|
||||
}
|
||||
|
||||
&[data-closing] {
|
||||
@apply opacity-0 backdrop:opacity-0;
|
||||
}
|
||||
|
||||
&[data-closing]:not([data-side]) > *,
|
||||
&[data-closing][data-side='bottom'] > * {
|
||||
@apply translate-y-full;
|
||||
}
|
||||
|
||||
&[data-closing][data-side='top'] > * {
|
||||
@apply -translate-y-full;
|
||||
}
|
||||
|
||||
&[data-closing][data-side='left'] > * {
|
||||
@apply -translate-x-full;
|
||||
}
|
||||
|
||||
&[data-closing][data-side='right'] > * {
|
||||
@apply translate-x-full;
|
||||
}
|
||||
|
||||
&:is([open], :popover-open):not([data-closing]) {
|
||||
@apply opacity-100 backdrop:opacity-100;
|
||||
|
||||
> * {
|
||||
@apply translate-x-0 translate-y-0;
|
||||
}
|
||||
|
||||
@starting-style {
|
||||
@apply opacity-0 backdrop:opacity-0;
|
||||
|
||||
&:not([data-side]) > *,
|
||||
&[data-side='bottom'] > * {
|
||||
@apply translate-y-full;
|
||||
}
|
||||
|
||||
&[data-side='top'] > * {
|
||||
@apply -translate-y-full;
|
||||
}
|
||||
|
||||
&[data-side='left'] > * {
|
||||
@apply -translate-x-full;
|
||||
}
|
||||
|
||||
&[data-side='right'] > * {
|
||||
@apply translate-x-full;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> * > header {
|
||||
@apply flex flex-col;
|
||||
}
|
||||
|
||||
> * > section {
|
||||
@apply min-h-0 flex-1 overflow-y-auto;
|
||||
}
|
||||
|
||||
> * > footer {
|
||||
@apply mt-auto flex flex-col;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -589,6 +589,39 @@
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
/* Drawer */
|
||||
.drawer::backdrop {
|
||||
@apply bg-black/30 backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.drawer > * {
|
||||
@apply before:bg-popover before:border-border relative bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:shadow-xl;
|
||||
}
|
||||
|
||||
.drawer > * > header {
|
||||
@apply gap-0.5 p-4 text-start md:gap-1.5;
|
||||
}
|
||||
|
||||
.drawer:not([data-side]) > * > header,
|
||||
.drawer[data-side='bottom'] > * > header,
|
||||
.drawer[data-side='top'] > * > header {
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.drawer > * > footer {
|
||||
@apply gap-2 p-4;
|
||||
}
|
||||
|
||||
.drawer > * > header > h2,
|
||||
.drawer > * > [data-title] {
|
||||
@apply text-lg font-semibold leading-none tracking-tight;
|
||||
}
|
||||
|
||||
.drawer > * > header > p,
|
||||
.drawer > * > [data-description] {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu > [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 min-w-48 gap-0 overflow-x-hidden overflow-y-auto rounded-3xl p-1.5 shadow-lg ring-1 duration-100;
|
||||
|
||||
@@ -565,6 +565,56 @@
|
||||
@apply text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
/* Drawer */
|
||||
.drawer::backdrop {
|
||||
@apply bg-black/10 backdrop-blur-xs;
|
||||
}
|
||||
|
||||
.drawer > * {
|
||||
@apply bg-popover text-popover-foreground text-xs/relaxed;
|
||||
}
|
||||
|
||||
.drawer:not([data-side]) > *,
|
||||
.drawer[data-side='bottom'] > * {
|
||||
@apply rounded-none border-t;
|
||||
}
|
||||
|
||||
.drawer[data-side='top'] > * {
|
||||
@apply rounded-none border-b;
|
||||
}
|
||||
|
||||
.drawer[data-side='left'] > * {
|
||||
@apply rounded-none border-r;
|
||||
}
|
||||
|
||||
.drawer[data-side='right'] > * {
|
||||
@apply rounded-none border-l;
|
||||
}
|
||||
|
||||
.drawer > * > header {
|
||||
@apply gap-0.5 p-4 text-start;
|
||||
}
|
||||
|
||||
.drawer:not([data-side]) > * > header,
|
||||
.drawer[data-side='bottom'] > * > header,
|
||||
.drawer[data-side='top'] > * > header {
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.drawer > * > footer {
|
||||
@apply gap-2 p-4;
|
||||
}
|
||||
|
||||
.drawer > * > header > h2,
|
||||
.drawer > * > [data-title] {
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
|
||||
.drawer > * > header > p,
|
||||
.drawer > * > [data-description] {
|
||||
@apply text-muted-foreground text-xs/relaxed;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu > [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-none p-0 shadow-md ring-1 duration-100;
|
||||
|
||||
@@ -577,6 +577,39 @@
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
/* Drawer */
|
||||
.drawer::backdrop {
|
||||
@apply bg-black/80 backdrop-blur-xs;
|
||||
}
|
||||
|
||||
.drawer > * {
|
||||
@apply before:bg-popover text-popover-foreground before:border-border relative bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border;
|
||||
}
|
||||
|
||||
.drawer > * > header {
|
||||
@apply gap-0.5 p-4 text-start md:gap-1.5;
|
||||
}
|
||||
|
||||
.drawer:not([data-side]) > * > header,
|
||||
.drawer[data-side='bottom'] > * > header,
|
||||
.drawer[data-side='top'] > * > header {
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.drawer > * > footer {
|
||||
@apply gap-2 p-4;
|
||||
}
|
||||
|
||||
.drawer > * > header > h2,
|
||||
.drawer > * > [data-title] {
|
||||
@apply text-lg font-semibold leading-none tracking-tight;
|
||||
}
|
||||
|
||||
.drawer > * > header > p,
|
||||
.drawer > * > [data-description] {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu > [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 min-w-48 gap-0 overflow-x-hidden overflow-y-auto rounded-2xl p-1 shadow-2xl ring-1 duration-100;
|
||||
|
||||
@@ -581,6 +581,39 @@
|
||||
@apply text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
/* Drawer */
|
||||
.drawer::backdrop {
|
||||
@apply bg-black/80 backdrop-blur-xs;
|
||||
}
|
||||
|
||||
.drawer > * {
|
||||
@apply before:bg-popover text-popover-foreground before:border-border relative bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border;
|
||||
}
|
||||
|
||||
.drawer > * > header {
|
||||
@apply gap-1 p-4 text-start;
|
||||
}
|
||||
|
||||
.drawer:not([data-side]) > * > header,
|
||||
.drawer[data-side='bottom'] > * > header,
|
||||
.drawer[data-side='top'] > * > header {
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.drawer > * > footer {
|
||||
@apply gap-2 p-4;
|
||||
}
|
||||
|
||||
.drawer > * > header > h2,
|
||||
.drawer > * > [data-title] {
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
|
||||
.drawer > * > header > p,
|
||||
.drawer > * > [data-description] {
|
||||
@apply text-muted-foreground text-xs/relaxed;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu > [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100;
|
||||
|
||||
@@ -573,6 +573,56 @@
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
/* Drawer */
|
||||
.drawer::backdrop {
|
||||
@apply bg-black/10 backdrop-blur-xs;
|
||||
}
|
||||
|
||||
.drawer > * {
|
||||
@apply bg-popover text-popover-foreground text-sm;
|
||||
}
|
||||
|
||||
.drawer:not([data-side]) > *,
|
||||
.drawer[data-side='bottom'] > * {
|
||||
@apply rounded-t-xl border-t;
|
||||
}
|
||||
|
||||
.drawer[data-side='top'] > * {
|
||||
@apply rounded-b-xl border-b;
|
||||
}
|
||||
|
||||
.drawer[data-side='left'] > * {
|
||||
@apply rounded-r-xl border-r;
|
||||
}
|
||||
|
||||
.drawer[data-side='right'] > * {
|
||||
@apply rounded-l-xl border-l;
|
||||
}
|
||||
|
||||
.drawer > * > header {
|
||||
@apply gap-0.5 p-4 text-start;
|
||||
}
|
||||
|
||||
.drawer:not([data-side]) > * > header,
|
||||
.drawer[data-side='bottom'] > * > header,
|
||||
.drawer[data-side='top'] > * > header {
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.drawer > * > footer {
|
||||
@apply gap-2 p-4;
|
||||
}
|
||||
|
||||
.drawer > * > header > h2,
|
||||
.drawer > * > [data-title] {
|
||||
@apply text-lg font-semibold leading-none tracking-tight;
|
||||
}
|
||||
|
||||
.drawer > * > header > p,
|
||||
.drawer > * > [data-description] {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu > [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100;
|
||||
|
||||
@@ -589,6 +589,39 @@
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
/* Drawer */
|
||||
.drawer::backdrop {
|
||||
@apply bg-black/30 backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.drawer > * {
|
||||
@apply before:bg-popover before:border-border relative bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-[min(var(--radius-4xl),24px)] before:border before:shadow-xl;
|
||||
}
|
||||
|
||||
.drawer > * > header {
|
||||
@apply gap-0.5 p-4 text-start md:gap-1.5;
|
||||
}
|
||||
|
||||
.drawer:not([data-side]) > * > header,
|
||||
.drawer[data-side='bottom'] > * > header,
|
||||
.drawer[data-side='top'] > * > header {
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.drawer > * > footer {
|
||||
@apply gap-2 p-4;
|
||||
}
|
||||
|
||||
.drawer > * > header > h2,
|
||||
.drawer > * > [data-title] {
|
||||
@apply text-lg font-semibold leading-none tracking-tight;
|
||||
}
|
||||
|
||||
.drawer > * > header > p,
|
||||
.drawer > * > [data-description] {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu > [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-2xl p-1 shadow-lg ring-1 duration-100;
|
||||
|
||||
@@ -593,6 +593,56 @@
|
||||
@apply text-muted-foreground mt-0.5 text-sm leading-relaxed text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
/* Drawer */
|
||||
.drawer::backdrop {
|
||||
@apply bg-black/20 backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.drawer > * {
|
||||
@apply bg-popover text-popover-foreground text-sm;
|
||||
}
|
||||
|
||||
.drawer:not([data-side]) > *,
|
||||
.drawer[data-side='bottom'] > * {
|
||||
@apply rounded-none border-t;
|
||||
}
|
||||
|
||||
.drawer[data-side='top'] > * {
|
||||
@apply rounded-none border-b;
|
||||
}
|
||||
|
||||
.drawer[data-side='left'] > * {
|
||||
@apply rounded-none border-r;
|
||||
}
|
||||
|
||||
.drawer[data-side='right'] > * {
|
||||
@apply rounded-none border-l;
|
||||
}
|
||||
|
||||
.drawer > * > header {
|
||||
@apply gap-1 p-4 text-start md:gap-2;
|
||||
}
|
||||
|
||||
.drawer:not([data-side]) > * > header,
|
||||
.drawer[data-side='bottom'] > * > header,
|
||||
.drawer[data-side='top'] > * > header {
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.drawer > * > footer {
|
||||
@apply gap-2 p-4;
|
||||
}
|
||||
|
||||
.drawer > * > header > h2,
|
||||
.drawer > * > [data-title] {
|
||||
@apply text-lg font-semibold tracking-wider uppercase;
|
||||
}
|
||||
|
||||
.drawer > * > header > p,
|
||||
.drawer > * > [data-description] {
|
||||
@apply text-muted-foreground mt-0.5 text-sm leading-relaxed;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu > [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 min-w-48 gap-0 overflow-x-hidden overflow-y-auto rounded-none p-1.5 shadow-md ring-1 duration-100;
|
||||
|
||||
@@ -573,6 +573,56 @@
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
/* Drawer */
|
||||
.drawer::backdrop {
|
||||
@apply bg-black/10 backdrop-blur-xs;
|
||||
}
|
||||
|
||||
.drawer > * {
|
||||
@apply bg-popover text-popover-foreground text-sm;
|
||||
}
|
||||
|
||||
.drawer:not([data-side]) > *,
|
||||
.drawer[data-side='bottom'] > * {
|
||||
@apply rounded-t-xl border-t;
|
||||
}
|
||||
|
||||
.drawer[data-side='top'] > * {
|
||||
@apply rounded-b-xl border-b;
|
||||
}
|
||||
|
||||
.drawer[data-side='left'] > * {
|
||||
@apply rounded-r-xl border-r;
|
||||
}
|
||||
|
||||
.drawer[data-side='right'] > * {
|
||||
@apply rounded-l-xl border-l;
|
||||
}
|
||||
|
||||
.drawer > * > header {
|
||||
@apply gap-0.5 p-4 text-start md:gap-1.5;
|
||||
}
|
||||
|
||||
.drawer:not([data-side]) > * > header,
|
||||
.drawer[data-side='bottom'] > * > header,
|
||||
.drawer[data-side='top'] > * > header {
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.drawer > * > footer {
|
||||
@apply gap-2 p-4;
|
||||
}
|
||||
|
||||
.drawer > * > header > h2,
|
||||
.drawer > * > [data-title] {
|
||||
@apply text-lg font-semibold leading-none tracking-tight;
|
||||
}
|
||||
|
||||
.drawer > * > header > p,
|
||||
.drawer > * > [data-description] {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu > [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 duration-100;
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
(() => {
|
||||
const toMs = (value) => {
|
||||
if (!value) return 0;
|
||||
const trimmed = value.trim();
|
||||
if (trimmed.endsWith('ms')) return parseFloat(trimmed) || 0;
|
||||
if (trimmed.endsWith('s')) return (parseFloat(trimmed) || 0) * 1000;
|
||||
return parseFloat(trimmed) || 0;
|
||||
};
|
||||
|
||||
const maxTransitionMs = (element) => {
|
||||
if (!element) return 0;
|
||||
const styles = getComputedStyle(element);
|
||||
const durations = styles.transitionDuration.split(',').map(toMs);
|
||||
const delays = styles.transitionDelay.split(',').map(toMs);
|
||||
return Math.max(0, ...durations.map((duration, index) => duration + (delays[index] || delays[0] || 0)));
|
||||
};
|
||||
|
||||
const initDrawer = (drawer) => {
|
||||
if (drawer.dataset.drawerInitialized) return;
|
||||
|
||||
const nativeClose = drawer.close.bind(drawer);
|
||||
let pointerStartedOnBackdrop = false;
|
||||
let closeTimer = null;
|
||||
|
||||
const finishClose = (returnValue) => {
|
||||
window.clearTimeout(closeTimer);
|
||||
closeTimer = null;
|
||||
drawer.removeAttribute('data-closing');
|
||||
nativeClose(returnValue);
|
||||
};
|
||||
|
||||
drawer.close = (returnValue = '') => {
|
||||
if (!drawer.open) return;
|
||||
if (drawer.dataset.closing) return;
|
||||
|
||||
const content = drawer.firstElementChild;
|
||||
const duration = maxTransitionMs(content);
|
||||
|
||||
if (duration === 0 || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
finishClose(returnValue);
|
||||
return;
|
||||
}
|
||||
|
||||
drawer.dataset.closing = 'true';
|
||||
closeTimer = window.setTimeout(() => finishClose(returnValue), duration + 50);
|
||||
};
|
||||
|
||||
const handleCancel = (event) => {
|
||||
event.preventDefault();
|
||||
drawer.close();
|
||||
};
|
||||
|
||||
const handlePointerDown = (event) => {
|
||||
pointerStartedOnBackdrop = event.target === drawer;
|
||||
};
|
||||
|
||||
const handlePointerUp = (event) => {
|
||||
if (pointerStartedOnBackdrop && event.target === drawer) {
|
||||
drawer.close();
|
||||
}
|
||||
pointerStartedOnBackdrop = false;
|
||||
};
|
||||
|
||||
drawer.addEventListener('cancel', handleCancel);
|
||||
drawer.addEventListener('pointerdown', handlePointerDown);
|
||||
drawer.addEventListener('pointerup', handlePointerUp);
|
||||
|
||||
drawer._destroy = () => {
|
||||
window.clearTimeout(closeTimer);
|
||||
drawer.removeEventListener('cancel', handleCancel);
|
||||
drawer.removeEventListener('pointerdown', handlePointerDown);
|
||||
drawer.removeEventListener('pointerup', handlePointerUp);
|
||||
drawer.close = nativeClose;
|
||||
delete drawer._destroy;
|
||||
};
|
||||
|
||||
drawer.dataset.drawerInitialized = 'true';
|
||||
drawer.dispatchEvent(new CustomEvent('basecoat:initialized'));
|
||||
};
|
||||
|
||||
if (window.basecoat) {
|
||||
window.basecoat.register('drawer', '.drawer:not([data-drawer-initialized])', initDrawer);
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user