@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/layout/layout.types.ts

@@ -0,0 +1,90 @@
+/**
+ * Breakpoints for responsive layout
+ */
+export const enum LayoutBreakpoint {
+  XS = 'xs',
+  SM = 'sm',
+  MD = 'md',
+  LG = 'lg',
+  XL = 'xl',
+  XXL = 'xxl',
+}
+
+/**
+ * Breakpoint width values in pixels
+ */
+export const BREAKPOINT_VALUES: Record<LayoutBreakpoint, number> = {
+  [LayoutBreakpoint.XS]: 480,
+  [LayoutBreakpoint.SM]: 576,
+  [LayoutBreakpoint.MD]: 768,
+  [LayoutBreakpoint.LG]: 992,
+  [LayoutBreakpoint.XL]: 1200,
+  [LayoutBreakpoint.XXL]: 1600,
+};
+
+/**
+ * Sider theme options
+ */
+export const enum SiderTheme {
+  Light = 'light',
+  Dark = 'dark',
+}
+
+/**
+ * Sider collapse trigger type
+ */
+export type SiderTrigger = 'default' | null;
+
+/**
+ * Callback for breakpoint changes
+ */
+export type OnBreakpoint = (broken: boolean) => void;
+
+/**
+ * Callback for collapse state changes
+ */
+export type OnCollapse = (collapsed: boolean, type: 'clickTrigger' | 'responsive') => void;
+
+/**
+ * Layout component properties
+ */
+export interface LayoutProps {
+  hasSider?: boolean;
+}
+
+/**
+ * Sider component properties
+ */
+export interface SiderProps {
+  breakpoint?: LayoutBreakpoint;
+  collapsed?: boolean;
+  collapsedWidth?: number;
+  collapsible?: boolean;
+  defaultCollapsed?: boolean;
+  reverseArrow?: boolean;
+  theme?: SiderTheme;
+  trigger?: SiderTrigger;
+  width?: number | string;
+  zeroWidthTriggerStyle?: string;
+  onBreakpoint?: OnBreakpoint;
+  onCollapse?: OnCollapse;
+}
+
+/**
+ * Header component properties
+ */
+export interface HeaderProps {
+  height?: number | string;
+}
+
+/**
+ * Footer component properties
+ */
+export interface FooterProps {
+  padding?: string;
+}
+
+/**
+ * Content component properties
+ */
+export interface ContentProps {}

package/components/ui/nuraly-ui/src/components/layout/react.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { createComponent } from '@lit-labs/react';
+import { NrLayoutElement } from './layout.component.js';
+import { NrHeaderElement } from './header.component.js';
+import { NrFooterElement } from './footer.component.js';
+import { NrSiderElement } from './sider.component.js';
+import { NrContentElement } from './content.component.js';
+
+export const NrLayout = createComponent({
+  tagName: 'nr-layout',
+  elementClass: NrLayoutElement,
+  react: React,
+});
+
+export const NrHeader = createComponent({
+  tagName: 'nr-header',
+  elementClass: NrHeaderElement,
+  react: React,
+});
+
+export const NrFooter = createComponent({
+  tagName: 'nr-footer',
+  elementClass: NrFooterElement,
+  react: React,
+});
+
+export const NrSider = createComponent({
+  tagName: 'nr-sider',
+  elementClass: NrSiderElement,
+  react: React,
+  events: {
+    onCollapse: 'collapse',
+    onBreakpoint: 'breakpoint',
+  },
+});
+
+export const NrContent = createComponent({
+  tagName: 'nr-content',
+  elementClass: NrContentElement,
+  react: React,
+});

package/components/ui/nuraly-ui/src/components/layout/sider.component.ts

@@ -0,0 +1,294 @@
+import { LitElement, html, PropertyValues } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { siderStyles } from './sider.style.js';
+import {
+    LayoutBreakpoint,
+    BREAKPOINT_VALUES,
+    SiderTheme,
+} 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>
+ * ```
+ */
+@customElement('nr-sider')
+export class NrSiderElement extends NuralyUIBaseMixin(LitElement) {
+  static override styles = siderStyles;
+
+  /**
+   * Breakpoint for responsive collapsing
+   */
+  @property({ type: String })
+  breakpoint?: LayoutBreakpoint;
+
+  /**
+   * Current collapsed state (controlled)
+   */
+  @property({ type: Boolean, reflect: true })
+  collapsed = false;
+
+  /**
+   * Width when collapsed. Set to 0 for a special trigger.
+   */
+  @property({ type: Number, attribute: 'collapsed-width' })
+  collapsedWidth = 80;
+
+  /**
+   * Whether the sider can be collapsed
+   */
+  @property({ type: Boolean })
+  collapsible = false;
+
+  /**
+   * Initial collapsed state (uncontrolled)
+   */
+  @property({ type: Boolean, attribute: 'default-collapsed' })
+  defaultCollapsed = false;
+
+  /**
+   * Reverse the arrow direction (for right-side sider)
+   */
+  @property({ type: Boolean, attribute: 'reverse-arrow' })
+  reverseArrow = false;
+
+  /**
+   * Sider theme (light or dark)
+   */
+  @property({ type: String, reflect: true })
+  theme: SiderTheme = SiderTheme.Dark;
+
+  /**
+   * Custom trigger element. Set to null to hide trigger.
+   */
+  @property({ type: String })
+  trigger: 'default' | null = 'default';
+
+  /**
+   * Sider width when expanded
+   */
+  @property({ type: String })
+  width: number | string = 200;
+
+  /**
+   * Custom styles for zero-width trigger
+   */
+  @property({ type: String, attribute: 'zero-width-trigger-style' })
+  zeroWidthTriggerStyle = '';
+
+  /**
+   * Internal state for tracking if breakpoint is active
+   */
+  @state()
+  private belowBreakpoint = false;
+
+  /**
+   * ResizeObserver for responsive behavior
+   */
+  private resizeObserver?: ResizeObserver;
+
+  override connectedCallback(): void {
+    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();
+    }
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+  }
+
+  override updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('breakpoint')) {
+      this.resizeObserver?.disconnect();
+      if (this.breakpoint) {
+        this.setupResizeObserver();
+      }
+    }
+  }
+
+  /**
+   * Setup ResizeObserver for responsive breakpoint behavior
+   */
+  private setupResizeObserver(): void {
+    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
+   */
+  private toggleCollapse(): void {
+    this.collapsed = !this.collapsed;
+    this.dispatchCollapseEvent('clickTrigger');
+  }
+
+  /**
+   * Dispatch collapse event
+   */
+  private dispatchCollapseEvent(type: 'clickTrigger' | 'responsive'): void {
+    this.dispatchEvent(
+      new CustomEvent<{ collapsed: boolean; type: string }>('collapse', {
+        detail: { collapsed: this.collapsed, type },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  /**
+   * Dispatch breakpoint event
+   */
+  private dispatchBreakpointEvent(broken: boolean): void {
+    this.dispatchEvent(
+      new CustomEvent<{ broken: boolean }>('breakpoint', {
+        detail: { broken },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  /**
+   * Get the current width based on collapsed state
+   */
+  private getCurrentWidth(): string {
+    if (this.collapsed) {
+      return `${this.collapsedWidth}px`;
+    }
+    return typeof this.width === 'number' ? `${this.width}px` : this.width.toString();
+  }
+
+  /**
+   * Render the collapse trigger
+   */
+  private 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>
+    `;
+  }
+
+  override 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>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nr-sider': NrSiderElement;
+  }
+}

package/components/ui/nuraly-ui/src/components/layout/sider.style.ts

@@ -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;
+  }
+`;