@nuralyui/grid 0.0.1

package/row.component.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { RowAlign, RowJustify, Gutter } from './grid.types.js';
+declare const NrRowElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+/**
+ * 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
+ */
+export declare class NrRowElement extends NrRowElement_base {
+    static styles: import("lit").CSSResult;
+    /** Vertical alignment of columns */
+    align: RowAlign | '';
+    /** Horizontal alignment of columns */
+    justify: RowJustify | '';
+    /** Grid spacing - number, [horizontal, vertical], or responsive object */
+    gutter: Gutter;
+    /** Allow columns to wrap */
+    wrap: boolean;
+    /** Current breakpoint for responsive gutter */
+    private currentBreakpoint;
+    private resizeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Setup responsive gutter based on viewport width
+     */
+    private setupResponsiveGutter;
+    /**
+     * Update current breakpoint based on window width
+     */
+    private updateBreakpoint;
+    /**
+     * Get the current gutter values [horizontal, vertical]
+     */
+    private getGutterValues;
+    /**
+     * Get inline styles for row with gutter
+     */
+    private getRowStyle;
+    /**
+     * Get gutter context for child columns
+     */
+    private getGutterContext;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-row': NrRowElement;
+    }
+}
+export {};
+//# sourceMappingURL=row.component.d.ts.map

package/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 '../../shared/base-mixin.js';
+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/row.component.js.map

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

package/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/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

package/row.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.style.js","sourceRoot":"","sources":["../../../src/components/grid/row.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Row component styles for the Grid system\n * Using shared CSS variables from /src/shared/themes/\n */\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .nr-row {\n    display: flex;\n    flex-flow: row wrap;\n    min-width: 0;\n    \n    /* Theme-aware */\n    color: var(--nuraly-color-text);\n  }\n\n  /* Wrap control */\n  .nr-row[data-wrap=\"false\"] {\n    flex-wrap: nowrap;\n  }\n\n  /* Horizontal alignment (justify-content) */\n  .nr-row[data-justify=\"start\"] {\n    justify-content: flex-start;\n  }\n\n  .nr-row[data-justify=\"end\"] {\n    justify-content: flex-end;\n  }\n\n  .nr-row[data-justify=\"center\"] {\n    justify-content: center;\n  }\n\n  .nr-row[data-justify=\"space-around\"] {\n    justify-content: space-around;\n  }\n\n  .nr-row[data-justify=\"space-between\"] {\n    justify-content: space-between;\n  }\n\n  .nr-row[data-justify=\"space-evenly\"] {\n    justify-content: space-evenly;\n  }\n\n  /* Vertical alignment (align-items) */\n  .nr-row[data-align=\"top\"] {\n    align-items: flex-start;\n  }\n\n  .nr-row[data-align=\"middle\"] {\n    align-items: center;\n  }\n\n  .nr-row[data-align=\"bottom\"] {\n    align-items: flex-end;\n  }\n\n  .nr-row[data-align=\"stretch\"] {\n    align-items: stretch;\n  }\n`;\n"]}