@nuralyui/layout 0.0.1

package/sider.component.js

@@ -0,0 +1,273 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { siderStyles } from './sider.style.js';
+import { BREAKPOINT_VALUES, } from './layout.types.js';
+/**
+ * # Sider Component
+ *
+ * The sidebar component with collapsible functionality, theme support, and responsive behavior.
+ * Must be placed inside a Layout component.
+ *
+ * @element nr-sider
+ *
+ * @slot - Default slot for sider content (usually navigation menu)
+ * @slot trigger - Custom trigger slot (overrides default trigger)
+ *
+ * @fires collapse - Fired when the sider is collapsed or expanded
+ * @fires breakpoint - Fired when the breakpoint is triggered
+ *
+ * @csspart sider - The sider container element
+ * @csspart trigger - The collapse trigger element
+ *
+ * @example
+ * ```html
+ * <nr-layout has-sider>
+ *   <nr-sider collapsible breakpoint="lg">
+ *     <nav>Navigation Menu</nav>
+ *   </nr-sider>
+ *   <nr-content>Content</nr-content>
+ * </nr-layout>
+ * ```
+ */
+let NrSiderElement = class NrSiderElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Current collapsed state (controlled)
+         */
+        this.collapsed = false;
+        /**
+         * Width when collapsed. Set to 0 for a special trigger.
+         */
+        this.collapsedWidth = 80;
+        /**
+         * Whether the sider can be collapsed
+         */
+        this.collapsible = false;
+        /**
+         * Initial collapsed state (uncontrolled)
+         */
+        this.defaultCollapsed = false;
+        /**
+         * Reverse the arrow direction (for right-side sider)
+         */
+        this.reverseArrow = false;
+        /**
+         * Sider theme (light or dark)
+         */
+        this.theme = "dark" /* SiderTheme.Dark */;
+        /**
+         * Custom trigger element. Set to null to hide trigger.
+         */
+        this.trigger = 'default';
+        /**
+         * Sider width when expanded
+         */
+        this.width = 200;
+        /**
+         * Custom styles for zero-width trigger
+         */
+        this.zeroWidthTriggerStyle = '';
+        /**
+         * Internal state for tracking if breakpoint is active
+         */
+        this.belowBreakpoint = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Set initial collapsed state
+        if (this.defaultCollapsed && !this.hasAttribute('collapsed')) {
+            this.collapsed = true;
+        }
+        // Setup resize observer for breakpoint
+        if (this.breakpoint) {
+            this.setupResizeObserver();
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    updated(changedProperties) {
+        var _a;
+        super.updated(changedProperties);
+        if (changedProperties.has('breakpoint')) {
+            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            if (this.breakpoint) {
+                this.setupResizeObserver();
+            }
+        }
+    }
+    /**
+     * Setup ResizeObserver for responsive breakpoint behavior
+     */
+    setupResizeObserver() {
+        if (!this.breakpoint)
+            return;
+        const breakpointValue = BREAKPOINT_VALUES[this.breakpoint];
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const width = entry.contentRect.width;
+                const shouldBeCollapsed = width < breakpointValue;
+                if (shouldBeCollapsed !== this.belowBreakpoint) {
+                    this.belowBreakpoint = shouldBeCollapsed;
+                    // Auto-collapse when below breakpoint
+                    if (this.collapsible && shouldBeCollapsed !== this.collapsed) {
+                        this.collapsed = shouldBeCollapsed;
+                        this.dispatchCollapseEvent('responsive');
+                    }
+                    // Dispatch breakpoint event
+                    this.dispatchBreakpointEvent(shouldBeCollapsed);
+                }
+            }
+        });
+        // Observe the parent layout or document body
+        const target = this.closest('nr-layout') || document.body;
+        this.resizeObserver.observe(target);
+    }
+    /**
+     * Toggle collapsed state
+     */
+    toggleCollapse() {
+        this.collapsed = !this.collapsed;
+        this.dispatchCollapseEvent('clickTrigger');
+    }
+    /**
+     * Dispatch collapse event
+     */
+    dispatchCollapseEvent(type) {
+        this.dispatchEvent(new CustomEvent('collapse', {
+            detail: { collapsed: this.collapsed, type },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Dispatch breakpoint event
+     */
+    dispatchBreakpointEvent(broken) {
+        this.dispatchEvent(new CustomEvent('breakpoint', {
+            detail: { broken },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Get the current width based on collapsed state
+     */
+    getCurrentWidth() {
+        if (this.collapsed) {
+            return `${this.collapsedWidth}px`;
+        }
+        return typeof this.width === 'number' ? `${this.width}px` : this.width.toString();
+    }
+    /**
+     * Render the collapse trigger
+     */
+    renderTrigger() {
+        if (this.trigger === null || !this.collapsible) {
+            return null;
+        }
+        // Check for custom trigger slot
+        const hasCustomTrigger = this.querySelector('[slot="trigger"]');
+        if (hasCustomTrigger) {
+            return html `<slot name="trigger"></slot>`;
+        }
+        // Zero-width trigger (special trigger when collapsedWidth is 0)
+        if (this.collapsedWidth === 0 && this.collapsed) {
+            return html `
+        <div
+          class="nr-sider-zero-width-trigger"
+          part="trigger"
+          style=${this.zeroWidthTriggerStyle}
+          @click=${this.toggleCollapse}
+        >
+          <span class="trigger-icon">${this.reverseArrow ? '◀' : '▶'}</span>
+        </div>
+      `;
+        }
+        // Default trigger
+        return html `
+      <div
+        class="nr-sider-trigger"
+        part="trigger"
+        @click=${this.toggleCollapse}
+      >
+        <span class="trigger-icon">
+          ${this.collapsed
+            ? (this.reverseArrow ? '◀' : '▶')
+            : (this.reverseArrow ? '▶' : '◀')}
+        </span>
+      </div>
+    `;
+    }
+    render() {
+        const classes = {
+            'nr-sider': true,
+            'nr-sider-collapsed': this.collapsed,
+            'nr-sider-has-trigger': this.collapsible && this.trigger !== null,
+            'nr-sider-below-breakpoint': this.belowBreakpoint,
+            'nr-sider-zero-width': this.collapsed && this.collapsedWidth === 0,
+        };
+        return html `
+      <aside
+        class=${classMap(classes)}
+        part="sider"
+        style="width: ${this.getCurrentWidth()}; flex: 0 0 ${this.getCurrentWidth()};"
+      >
+        <div class="nr-sider-children">
+          <slot></slot>
+        </div>
+        ${this.renderTrigger()}
+      </aside>
+    `;
+    }
+};
+NrSiderElement.styles = siderStyles;
+__decorate([
+    property({ type: String })
+], NrSiderElement.prototype, "breakpoint", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrSiderElement.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Number, attribute: 'collapsed-width' })
+], NrSiderElement.prototype, "collapsedWidth", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrSiderElement.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'default-collapsed' })
+], NrSiderElement.prototype, "defaultCollapsed", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'reverse-arrow' })
+], NrSiderElement.prototype, "reverseArrow", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NrSiderElement.prototype, "theme", void 0);
+__decorate([
+    property({ type: String })
+], NrSiderElement.prototype, "trigger", void 0);
+__decorate([
+    property({ type: String })
+], NrSiderElement.prototype, "width", void 0);
+__decorate([
+    property({ type: String, attribute: 'zero-width-trigger-style' })
+], NrSiderElement.prototype, "zeroWidthTriggerStyle", void 0);
+__decorate([
+    state()
+], NrSiderElement.prototype, "belowBreakpoint", void 0);
+NrSiderElement = __decorate([
+    customElement('nr-sider')
+], NrSiderElement);
+export { NrSiderElement };
+//# sourceMappingURL=sider.component.js.map

package/sider.style.d.ts

@@ -0,0 +1,2 @@
+export declare const siderStyles: import("lit").CSSResult;
+//# sourceMappingURL=sider.style.d.ts.map

package/sider.style.js

@@ -0,0 +1,104 @@
+import { css } from 'lit';
+export const siderStyles = css `
+  :host {
+    display: block;
+    position: relative;
+  }
+
+  .nr-sider {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    background: var(--nuraly-layout-sider-background);
+    color: var(--nuraly-layout-sider-text);
+    border-right: 1px solid var(--nuraly-layout-sider-border);
+    transition: var(--nuraly-layout-sider-transition);
+  }
+
+  :host([theme='light']) .nr-sider {
+    background: var(--nuraly-layout-sider-light-background);
+    color: var(--nuraly-layout-sider-light-text);
+    border-right: 1px solid var(--nuraly-layout-sider-light-border);
+  }
+
+  .nr-sider-children {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  .nr-sider-trigger {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--nuraly-layout-trigger-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--nuraly-layout-trigger-background);
+    color: var(--nuraly-layout-trigger-text);
+    cursor: pointer;
+    transition: var(--nuraly-layout-transition);
+    border-top: 1px solid var(--nuraly-layout-trigger-border);
+    border-radius: var(--nuraly-layout-trigger-border-radius);
+  }
+
+  :host([theme='light']) .nr-sider-trigger {
+    background: var(--nuraly-layout-trigger-light-background);
+    color: var(--nuraly-layout-trigger-light-text);
+    border-top: 1px solid var(--nuraly-layout-trigger-light-border);
+  }
+
+  .nr-sider-trigger:hover {
+    background: var(--nuraly-layout-trigger-background-hover);
+  }
+
+  :host([theme='light']) .nr-sider-trigger:hover {
+    background: var(--nuraly-layout-trigger-light-background-hover);
+  }
+
+  .nr-sider-zero-width-trigger {
+    position: absolute;
+    top: 64px;
+    right: calc(-1 * var(--nuraly-layout-zero-trigger-width));
+    width: var(--nuraly-layout-zero-trigger-width);
+    height: var(--nuraly-layout-zero-trigger-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--nuraly-layout-zero-trigger-background);
+    color: var(--nuraly-layout-zero-trigger-text);
+    cursor: pointer;
+    transition: var(--nuraly-layout-transition);
+    border-radius: var(--nuraly-layout-zero-trigger-border-radius);
+    box-shadow: var(--nuraly-layout-zero-trigger-shadow);
+    z-index: 1;
+  }
+
+  :host([theme='light']) .nr-sider-zero-width-trigger {
+    background: var(--nuraly-layout-zero-trigger-background);
+    color: var(--nuraly-layout-zero-trigger-text);
+  }
+
+  .nr-sider-zero-width-trigger:hover {
+    background: var(--nuraly-layout-zero-trigger-background-hover);
+  }
+
+  .trigger-icon {
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  .nr-sider-collapsed {
+    overflow: hidden;
+  }
+
+  .nr-sider-zero-width {
+    width: 0 !important;
+    min-width: 0 !important;
+    flex: 0 0 0 !important;
+  }
+`;
+//# sourceMappingURL=sider.style.js.map