@nuraly/lumenui 0.1.0

package/dist/src/components/grid/row.component.js

@@ -0,0 +1,197 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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 { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './row.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { EMPTY_STRING, BREAKPOINTS } from './grid.types.js';
+/**
+ * Row component for grid layout system
+ *
+ * @example
+ * ```html
+ * <!-- Basic row -->
+ * <nr-row>
+ *   <nr-col span="12">Column 1</nr-col>
+ *   <nr-col span="12">Column 2</nr-col>
+ * </nr-row>
+ *
+ * <!-- Row with gutter -->
+ * <nr-row gutter="16">
+ *   <nr-col span="8">Column 1</nr-col>
+ *   <nr-col span="8">Column 2</nr-col>
+ *   <nr-col span="8">Column 3</nr-col>
+ * </nr-row>
+ *
+ * <!-- Responsive gutter -->
+ * <nr-row .gutter=${{ xs: 8, sm: 16, md: 24, lg: 32 }}>
+ *   <nr-col span="6">Column</nr-col>
+ * </nr-row>
+ *
+ * <!-- Alignment and justify -->
+ * <nr-row align="middle" justify="center">
+ *   <nr-col span="6">Centered</nr-col>
+ * </nr-row>
+ * ```
+ *
+ * @slot default - Column elements
+ */
+let NrRowElement = class NrRowElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** Vertical alignment of columns */
+        this.align = EMPTY_STRING;
+        /** Horizontal alignment of columns */
+        this.justify = EMPTY_STRING;
+        /** Grid spacing - number, [horizontal, vertical], or responsive object */
+        this.gutter = 0;
+        /** Allow columns to wrap */
+        this.wrap = true;
+        /** Current breakpoint for responsive gutter */
+        this.currentBreakpoint = "xs" /* GridBreakpoint.XS */;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupResponsiveGutter();
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    /**
+     * Setup responsive gutter based on viewport width
+     */
+    setupResponsiveGutter() {
+        if (typeof this.gutter === 'object' && !Array.isArray(this.gutter)) {
+            this.updateBreakpoint();
+            this.resizeObserver = new ResizeObserver(() => {
+                this.updateBreakpoint();
+            });
+            this.resizeObserver.observe(document.documentElement);
+        }
+    }
+    /**
+     * Update current breakpoint based on window width
+     */
+    updateBreakpoint() {
+        const width = window.innerWidth;
+        if (width >= BREAKPOINTS.xxl) {
+            this.currentBreakpoint = "xxl" /* GridBreakpoint.XXL */;
+        }
+        else if (width >= BREAKPOINTS.xl) {
+            this.currentBreakpoint = "xl" /* GridBreakpoint.XL */;
+        }
+        else if (width >= BREAKPOINTS.lg) {
+            this.currentBreakpoint = "lg" /* GridBreakpoint.LG */;
+        }
+        else if (width >= BREAKPOINTS.md) {
+            this.currentBreakpoint = "md" /* GridBreakpoint.MD */;
+        }
+        else if (width >= BREAKPOINTS.sm) {
+            this.currentBreakpoint = "sm" /* GridBreakpoint.SM */;
+        }
+        else {
+            this.currentBreakpoint = "xs" /* GridBreakpoint.XS */;
+        }
+    }
+    /**
+     * Get the current gutter values [horizontal, vertical]
+     */
+    getGutterValues() {
+        if (typeof this.gutter === 'number') {
+            return [this.gutter, this.gutter];
+        }
+        if (Array.isArray(this.gutter)) {
+            return this.gutter;
+        }
+        // Responsive gutter object
+        const breakpoints = [
+            this.currentBreakpoint,
+            "xl" /* GridBreakpoint.XL */,
+            "lg" /* GridBreakpoint.LG */,
+            "md" /* GridBreakpoint.MD */,
+            "sm" /* GridBreakpoint.SM */,
+            "xs" /* GridBreakpoint.XS */
+        ];
+        for (const bp of breakpoints) {
+            const value = this.gutter[bp];
+            if (value !== undefined) {
+                if (typeof value === 'number') {
+                    return [value, value];
+                }
+                return value;
+            }
+        }
+        return [0, 0];
+    }
+    /**
+     * Get inline styles for row with gutter
+     */
+    getRowStyle() {
+        const [horizontal, vertical] = this.getGutterValues();
+        const styles = {};
+        if (horizontal > 0) {
+            styles['margin-left'] = `-${horizontal / 2}px`;
+            styles['margin-right'] = `-${horizontal / 2}px`;
+        }
+        if (vertical > 0) {
+            styles['row-gap'] = `${vertical}px`;
+        }
+        return styles;
+    }
+    /**
+     * Get gutter context for child columns
+     */
+    getGutterContext() {
+        const [horizontal] = this.getGutterValues();
+        return horizontal;
+    }
+    render() {
+        const rowStyle = this.getRowStyle();
+        const gutter = this.getGutterContext();
+        return html `
+      <div
+        class="nr-row"
+        data-align="${this.align}"
+        data-justify="${this.justify}"
+        data-wrap="${this.wrap}"
+        data-theme="${this.currentTheme}"
+        style="${Object.entries(rowStyle).map(([key, value]) => `${key}: ${value}`).join('; ')}"
+        data-gutter="${gutter}"
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+NrRowElement.styles = styles;
+__decorate([
+    property({ type: String })
+], NrRowElement.prototype, "align", void 0);
+__decorate([
+    property({ type: String })
+], NrRowElement.prototype, "justify", void 0);
+__decorate([
+    property({ type: Object })
+], NrRowElement.prototype, "gutter", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrRowElement.prototype, "wrap", void 0);
+__decorate([
+    state()
+], NrRowElement.prototype, "currentBreakpoint", void 0);
+NrRowElement = __decorate([
+    customElement('nr-row')
+], NrRowElement);
+export { NrRowElement };
+//# sourceMappingURL=row.component.js.map

package/dist/src/components/grid/row.style.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Row component styles for the Grid system
+ * Using shared CSS variables from /src/shared/themes/
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=row.style.d.ts.map

package/dist/src/components/grid/row.style.js

@@ -0,0 +1,68 @@
+import { css } from 'lit';
+/**
+ * Row component styles for the Grid system
+ * Using shared CSS variables from /src/shared/themes/
+ */
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .nr-row {
+    display: flex;
+    flex-flow: row wrap;
+    min-width: 0;
+    
+    /* Theme-aware */
+    color: var(--nuraly-color-text);
+  }
+
+  /* Wrap control */
+  .nr-row[data-wrap="false"] {
+    flex-wrap: nowrap;
+  }
+
+  /* Horizontal alignment (justify-content) */
+  .nr-row[data-justify="start"] {
+    justify-content: flex-start;
+  }
+
+  .nr-row[data-justify="end"] {
+    justify-content: flex-end;
+  }
+
+  .nr-row[data-justify="center"] {
+    justify-content: center;
+  }
+
+  .nr-row[data-justify="space-around"] {
+    justify-content: space-around;
+  }
+
+  .nr-row[data-justify="space-between"] {
+    justify-content: space-between;
+  }
+
+  .nr-row[data-justify="space-evenly"] {
+    justify-content: space-evenly;
+  }
+
+  /* Vertical alignment (align-items) */
+  .nr-row[data-align="top"] {
+    align-items: flex-start;
+  }
+
+  .nr-row[data-align="middle"] {
+    align-items: center;
+  }
+
+  .nr-row[data-align="bottom"] {
+    align-items: flex-end;
+  }
+
+  .nr-row[data-align="stretch"] {
+    align-items: stretch;
+  }
+`;
+//# sourceMappingURL=row.style.js.map