native-document 1.0.199 → 1.0.200

package/components.js

@@ -5,6 +5,7 @@ export * from './src/components/badge/index';
 export * from './src/components/breadcrumb/index';
 export * from './src/components/button/index';
 export * from './src/components/card/index';
+export * from './src/components/drawer/index';
 export * from './src/components/context-menu/index';
 export * from './src/components/divider/index';
 export * from './src/components/dropdown/index';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.199",
+  "version": "1.0.200",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/src/components/drawer/Drawer.js

@@ -0,0 +1,344 @@
+import BaseComponent from '../BaseComponent';
+import HasEventEmitter from '../../core/utils/HasEventEmitter';
+import DebugManager from '../../core/utils/debug-manager';
+
+/**
+ * Side panel that slides in from an edge of the screen, with an overlay behind it.
+ * Supports position (left, right, top, bottom), size, closable, footer actions,
+ * and open/close lifecycle events.
+ *
+ *
+ * @example
+ * const drawer = new Drawer(Div('Drawer body content'))
+ *     .title('Create ticket')
+ *     .subtitle('This ticket will be visible for sale immediately')
+ *     .position('right')
+ *     .size('400px')
+ *     .closable(true)
+ *     .overlay(true)
+ *     .action('Cancel', (_, instance) => instance.close())
+ *     .action('Create ticket', () => console.log('create'), 'primary')
+ *     .onClose(() => console.log('closed'));
+ *
+ * Drawer.use((description, instance) => {
+ *     // description.content, description.position, description.actions...
+ *     return Div({ class: `drawer drawer--${description.position}` }, description.content);
+ * });
+ *
+ * @constructor
+ * @param {NdChild} content
+ * @param {GlobalAttributes} [props={}]
+ */
+export default function Drawer(content = null, props = {}) {
+    if(!(this instanceof Drawer)) {
+        return new Drawer(content, props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        title: null,
+        subtitle: null,
+        content,
+        position: 'right',
+        size: '400px',
+        overlay: true,
+        closeOnOverlayClick: true,
+        closable: true,
+        actions: [],
+        renderContent: null,
+        renderFooter: null,
+        renderHeader: null,
+        backdrop: true,
+        isOpen: null,
+        props,
+    };
+    this.aria = {
+        'role': 'dialog',
+        'aria-modal': 'true',
+        'aria-hidden': 'true',
+    };
+}
+
+Drawer.defaultTemplate = null;
+
+/**
+ * Registers the render template for Drawer.
+ * @param {(description: {
+ *     title: NdChild|null,
+ *     subtitle: NdChild|null,
+ *     content: NdChild,
+ *     position: 'left'|'right'|'top'|'bottom',
+ *     size: string,
+ *     overlay: boolean,
+ *     closeOnOverlayClick: boolean,
+ *     closable: boolean,
+ *     actions: Array<{ label: NdChild, handler: Function|null, variant: string|null }>,
+ *     props: GlobalAttributes,
+ * }, instance: Drawer) => NdChild} template
+ */
+Drawer.use = function(template) {
+    Drawer.defaultTemplate = template;
+};
+
+BaseComponent.extends(Drawer);
+BaseComponent.use(Drawer, HasEventEmitter);
+
+/**
+ * @param {string} name
+ * @param {(d: Drawer) => Drawer} callback
+ */
+Drawer.preset = function(name, callback) {
+    if (Drawer.prototype[name] || Drawer[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exist in Drawer.`);
+        return;
+    }
+    Drawer[name] = (content, props) => callback(new Drawer(content, props));
+};
+
+/**
+ * @param {Record<string, (d: Drawer) => Drawer>} presets
+ */
+Drawer.presets = function(presets) {
+    for (const name in presets) {
+        Drawer.preset(name, presets[name]);
+    }
+};
+
+/**
+ * Sets which edge the drawer slides in from
+ * @param {'left'|'right'|'top'|'bottom'} position
+ * @returns {this}
+ */
+Drawer.prototype.position = function(position) {
+    this.$description.position = position;
+    return this;
+};
+
+/**
+ * Sets the drawer to slide in from the left
+ * @returns {this}
+ */
+Drawer.prototype.atLeft = function() {
+    return this.position('left');
+};
+
+/**
+ * Sets the drawer to slide in from the right
+ * @returns {this}
+ */
+Drawer.prototype.atRight = function() {
+    return this.position('right');
+};
+
+/**
+ * Sets the drawer to slide in from the top
+ * @returns {this}
+ */
+Drawer.prototype.atTop = function() {
+    return this.position('top');
+};
+
+/**
+ * Sets the drawer to slide in from the bottom
+ * @returns {this}
+ */
+Drawer.prototype.atBottom = function() {
+    return this.position('bottom');
+};
+
+/**
+ * Sets the width (for left/right) or height (for top/bottom) of the drawer
+ * @param {string} size - e.g. '400px', '30%'
+ * @returns {this}
+ */
+Drawer.prototype.size = function(size) {
+    this.$description.size = size;
+    return this;
+};
+
+/**
+ * Sets the title of the drawer header
+ * @param {ValidChildren} title
+ * @returns {this}
+ */
+Drawer.prototype.title = function(title) {
+    this.$description.title = title;
+    return this;
+};
+
+/**
+ * Sets the subtitle shown under the title
+ * @param {ValidChildren} subtitle
+ * @returns {this}
+ */
+Drawer.prototype.subtitle = function(subtitle) {
+    this.$description.subtitle = subtitle;
+    return this;
+};
+
+/**
+ * Sets the content of the drawer
+ * @param {ValidChildren} content
+ * @returns {this}
+ */
+Drawer.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+/**
+ * Sets the content render function
+ * @param {Function} callback
+ * @returns {this}
+ */
+Drawer.prototype.renderContent = function(callback) {
+    this.$description.renderContent = callback;
+    return this;
+};
+
+/**
+ * Sets the footer render function (defaults to the action buttons row)
+ * @param {Function} callback
+ * @returns {this}
+ */
+Drawer.prototype.renderFooter = function(callback) {
+    this.$description.renderFooter = callback;
+    return this;
+};
+
+
+/**
+ * Sets the header render function (defaults titl, subtitle and close button)
+ * @param {Function} callback
+ * @returns {this}
+ */
+Drawer.prototype.renderHeader = function(callback) {
+    this.$description.renderHeader = callback;
+};
+
+/**
+ * Whether to render a dimmed overlay behind the drawer
+ * @param {boolean} [overlay=true]
+ * @returns {this}
+ */
+Drawer.prototype.overlay = function(overlay = true) {
+    this.$description.overlay = !!overlay;
+    return this;
+};
+
+/**
+ * @param {Boolean} backdrop
+ * @return {this}
+ */
+Drawer.prototype.overlay = function(backdrop = true) {
+    this.$description.backdrop = !!backdrop;
+    return this;
+};
+
+/**
+ * Whether clicking the overlay closes the drawer
+ * @param {boolean} [closeOnOverlayClick=true]
+ * @returns {this}
+ */
+Drawer.prototype.closeOnOverlayClick = function(closeOnOverlayClick = true) {
+    this.$description.closeOnOverlayClick = !!closeOnOverlayClick;
+    return this;
+};
+
+/**
+ * Whether the drawer shows a close (x) button and can be dismissed
+ * @param {boolean} [closable=true]
+ * @returns {this}
+ */
+Drawer.prototype.closable = function(closable = true) {
+    this.$description.closable = !!closable;
+    if(closable) {
+        this.showIf(closable);
+    }
+    return this;
+};
+
+/**
+ * @param {Observable} observable
+ * @return {Drawer}
+ */
+Drawer.prototype.isOpen = function(observable) {
+    this.$description.isOpen = observable;
+    observable.subscribe((isOpen) => {
+        this.emit(isOpen ? 'open' : 'close');
+    });
+    return this;
+};
+
+/**
+ * Clears all footer action buttons
+ * @returns {this}
+ */
+Drawer.prototype.clearActions = function() {
+    this.$description.actions = [];
+    return this;
+};
+
+/**
+ * Adds an action button to the drawer footer
+ * @param {string} label - The button label
+ * @param {Function} handler - The click handler
+ * @param {?string} variant - The button variant style (e.g. 'primary', 'secondary')
+ * @returns {this}
+ */
+Drawer.prototype.action = function(label, handler, variant = null) {
+    handler = handler || ((_, instance) => instance.close());
+    this.$description.actions.push({ label, handler, variant });
+    return this;
+};
+
+/**
+ * Opens the drawer
+ */
+Drawer.prototype.open = function() {
+    if(this.$description.isOpen.val() === true) {
+        return;
+    }
+    this.$description.isOpen.set(true);
+};
+
+/**
+ * Closes the drawer
+ */
+Drawer.prototype.close = function() {
+    if(this.$description.isOpen.val() === false) {
+        return;
+    }
+    this.$description.isOpen.set(false);
+};
+
+/**
+ * Alias for open()
+ */
+Drawer.prototype.show = Drawer.prototype.open;
+
+/**
+ * Alias for close()
+ */
+Drawer.prototype.hide = Drawer.prototype.close;
+
+/**
+ * Registers a handler for the open event
+ * @param {(instance: Drawer) => void} handler
+ * @returns {this}
+ */
+Drawer.prototype.onOpen = function(handler) {
+    this.on('open', handler);
+    return this;
+};
+
+/**
+ * Registers a handler for the close event
+ * @param {(instance: Drawer) => void} handler
+ * @returns {this}
+ */
+Drawer.prototype.onClose = function(handler) {
+    this.on('close', handler);
+    return this;
+};

package/src/components/drawer/index.js

@@ -0,0 +1,7 @@
+import Drawer from './Drawer';
+
+
+
+export {
+    Drawer,
+};

package/src/components/drawer/types/Drawer.d.ts

@@ -0,0 +1,61 @@
+import type {Observable, ValidChild} from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { BaseComponent } from '../../BaseComponent';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type DrawerDescription = {
+    title: ValidChild | null;
+    subtitle: ValidChild | null;
+    content: ValidChild;
+    position: 'left' | 'right' | 'top' | 'bottom';
+    size: string;
+    overlay: boolean;
+    closeOnOverlayClick: boolean;
+    closable: boolean;
+    actions: Array<{
+        label: ValidChild;
+        handler: ((event: Event, instance: DrawerInterface) => void) | null;
+        variant: string | null;
+    }>;
+    contentRender: ((desc: DrawerDescription, instance: DrawerInterface) => ValidChild) | null;
+    footerRender: ((desc: DrawerDescription, instance: DrawerInterface) => ValidChild) | null;
+    visible: ObservableItem<boolean> | null;
+    props: GlobalAttributes;
+};
+
+export interface DrawerInterface extends BaseComponent {
+    position(position: 'left' | 'right' | 'top' | 'bottom'): this;
+    atLeft(): this;
+    atRight(): this;
+    atTop(): this;
+    atBottom(): this;
+    size(size: string): this;
+    title(title: ValidChild): this;
+    subtitle(subtitle: ValidChild): this;
+    content(content: ValidChild): this;
+    renderContent(template: (description: DrawerDescription, instance: DrawerInterface) => ValidChild): this;
+    renderFooter(template: (description: DrawerDescription, instance: DrawerInterface) => ValidChild): this;
+    renderHeader(template: (description: DrawerDescription, instance: DrawerInterface) => ValidChild): this;
+    overlay(overlay?: boolean): this;
+    closeOnOverlayClick(closeOnOverlayClick?: boolean): this;
+    closable(closable?: boolean): this;
+    isOpen(closable: Observable<Boolean>): this;
+    clearActions(): this;
+    action(label: string, handler?: ((event: Event, instance: DrawerInterface) => void) | null, variant?: string | null): this;
+    open(): void;
+    close(): void;
+    show(): void;
+    hide(): void;
+    onOpen(handler: (instance: DrawerInterface) => void): this;
+    onClose(handler: (instance: DrawerInterface) => void): this;
+}
+
+
+export declare function Drawer(props?: Record<string, unknown>, content?: ValidChild): DrawerInterface;
+export declare namespace Drawer {
+
+    function use(template: (description: DrawerDescription, instance: DrawerInterface) => ValidChild): void;
+    function preset(name: string, callback: (instance: DrawerInterface) => DrawerInterface): void;
+    function presets(presets: Record<string, (instance: DrawerInterface) => DrawerInterface>): void;
+
+}

package/src/components/index.d.ts

@@ -162,6 +162,7 @@ export type { ToastWarning, ToastWarningInterface } from './toast/types/ToastWar
 
 // --- Tooltip -----------------------------------------------------------------
 export type { Tooltip, TooltipInterface, TooltipDescription } from './tooltip/types/Tooltip';
+export type { Drawer, DrawerDescription, DrawerInterface } from './drawer/types/Drawer';
 
 
 // --- Icon -----------------------------------------------------------------

package/src/ui/components/drawer/DrawerRender.js

@@ -0,0 +1,76 @@
+import {Aside, Div, H2, Header, Paragraph, Button, Footer, ShowIf} from '../../../core/elements';
+import { $ } from '../../../core/data/Observable';
+
+import './drawer.css';
+
+export default function DrawerRender($desc, instance) {
+    const $isOpen = $desc.isOpen ?? $(false);
+    if(!$desc.isOpen) {
+        instance.isOpen($isOpen);
+    }
+
+    const props = instance.getEditableProps();
+    props.class.add('drawer-container');
+
+    if($desc.backdrop) {
+        props.class.add('drawer-has-backdrop');
+    }
+    props.class.add('at-'+$desc.position);
+    props.class.add('is-open', $isOpen);
+
+    const closeFn = () => {
+        $isOpen.set(false);
+    };
+
+    return ShowIf($isOpen, () => {
+        return Div({ ...instance.resolveProps() }, [
+            $desc.backdrop ? Div({ class: 'drawer-backdrop' }) : null,
+
+            Aside({ class: 'drawer-panel' },
+                Div({ class: 'drawer-panel-container' }, [
+                    Header({ class: 'drawer-header' }, buildDrawerHeader($desc, instance, closeFn)),
+                    buildDrawerBody($desc, instance, closeFn),
+                    buildDrawerFooter($desc, instance, closeFn),
+                ])
+            ),
+        ]);
+    });
+}
+
+const buildDrawerHeader = ($desc, instance, closeFn) => {
+    if($desc.renderHeader) {
+        return $desc.renderHeader($desc, instance, closeFn);
+    }
+
+    if(!($desc.title || $desc.subtitle) && !$desc.closable) {
+        return null;
+    }
+
+    return [
+        Div({ class: 'drawer-title-container' }, [
+            H2({ class: 'drawer-title' }, $desc.title),
+            $desc.subtitle ? Paragraph({ class: 'drawer-sub-title' }, $desc.subtitle) : null,
+        ]),
+        $desc.closable
+            ? Button({ type: 'button', class: 'drawer-close', 'aria-label': 'Close menu' }, 'X').onClick(closeFn)
+            : null,
+    ];
+};
+
+const buildDrawerBody = ($desc, instance, closeFn) => {
+    if($desc.renderContent) {
+        return Div({ class: 'drawer-body' }, $desc.renderContent($desc, instance, closeFn));
+    }
+
+    return Div({ class: 'drawer-body' }, $desc.content);
+};
+
+const buildDrawerFooter = ($desc, instance, closeFn) => {
+    if($desc.renderFooter) {
+        return Footer({ class: 'drawer-footer' }, $desc.renderFooter($desc, instance, closeFn));
+    }
+    if($desc.footerContent) {
+        return Footer({ class: 'drawer-footer' }, $desc.footerContent);
+    }
+    return null;
+};

package/src/ui/components/drawer/drawer.css

@@ -0,0 +1,178 @@
+.drawer-container {
+    position: fixed;
+    z-index: 1000;
+    display: none;
+    inset: 0;
+    pointer-events: none
+}
+
+.drawer-container.is-open {
+    display: block;
+    pointer-events: auto;
+}
+
+
+/* Backdrop ------------------------------------------------------------------------------------------*/
+.drawer-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, var(--opacity-backdrop));
+    transition: opacity 0.25s ease;
+}
+
+/* Panel ------------------------------------------------------------------------------------------*/
+.drawer-panel {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    transition: transform 0.3s ease;
+    max-width: 100%;
+    max-height: 100%;
+    display: flex;
+    width: 450px;
+}
+
+.drawer-panel-container {
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1;
+    display: flex;
+    background: var(--gray-lite-4);
+    border-radius: var(--radius-large);
+    margin: var(--space-cozy);
+    border: 10px solid hsl(from var(--gray-lite-1) h s l / .5);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+}
+
+
+/* Positions ------------------------------------------------------------------------------------------*/
+/* Right */
+.drawer-container.at-right .drawer-panel {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    transform: translateX(100%);
+}
+.drawer-container.at-right.is-open .drawer-panel {
+    transform: translateX(0);
+}
+
+/* Left */
+.drawer-container.at-left .drawer-panel {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 360px;
+    transform: translateX(-100%);
+}
+.drawer-container.at-left.is-open .drawer-panel {
+    transform: translateX(0);
+}
+
+/* Top */
+.drawer-container.at-top .drawer-panel {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: unset;
+    /*min-height: 280px;*/
+    width: 100%;
+    transform: translateY(-100%);
+}
+.drawer-container.at-top.is-open .drawer-panel {
+    transform: translateY(0);
+}
+
+/* Bottom */
+.drawer-container.at-bottom .drawer-panel {
+    top: unset;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    /*min-height: 300px;*/
+    transform: translateY(100%);
+}
+.drawer-container.at-bottom.is-open .drawer-panel {
+    transform: translateY(0);
+}
+
+.drawer-container.drawer-overlay .drawer-panel {
+    z-index: 2;
+}
+
+/* Header -----------------------------------------------------------------------------------------------*/
+
+.drawer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 20px;
+    flex-shrink: 0;
+}
+
+.drawer-title-container {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+
+.drawer-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #111;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.drawer-sub-title {
+    margin: 0;
+    font-size: 13px;
+    color: #6b7280;
+}
+
+.drawer-close {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    font-size: 16px;
+    line-height: 1;
+    cursor: pointer;
+    color: #6b7280;
+    transition: background 0.15s ease, color 0.15s ease;
+    border-radius: var(--radius-round);
+}
+
+.drawer-close:hover {
+    background: #f3f4f6;
+    color: #111;
+}
+
+/* Body ------------------------------------------------------------------------------------------*/
+.drawer-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    background: var(--gray-lite-3);
+    margin: var(--space-cozy);
+    border-radius: var(--radius-large);
+}
+
+/* Footer ------------------------------------------------------------------------------------------*/
+.drawer-footer {
+    flex-shrink: 0;
+    padding: 16px 20px;
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin: var(--space-cozy);
+}

package/src/ui/index.js

@@ -44,6 +44,7 @@ export { default as ListItemRender } from './components/list/item/ListItemRender
 export { default as ListDividerRender } from './components/list/divider/ListDividerRender';
 
 export { default as CardRender } from './components/card/CardRender';
+export { default as DrawerRender } from './components/drawer/DrawerRender';
 
 
 export { default as TablerIconRender } from './components/icon/tabler/TablerIconRender';