@nuralyui/grid 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/col.component.d.ts +1 -1
- package/col.component.js +1 -1
- package/col.component.js.map +1 -1
- package/col.style.d.ts +0 -0
- package/col.style.js +0 -0
- package/col.style.js.map +0 -0
- package/grid.types.d.ts +0 -0
- package/grid.types.js +0 -0
- package/grid.types.js.map +0 -0
- package/index.d.ts +0 -0
- package/index.js +0 -0
- package/index.js.map +0 -0
- package/package.json +4 -4
- package/react.d.ts +0 -0
- package/react.js +0 -0
- package/react.js.map +0 -0
- package/row.component.d.ts +1 -1
- package/row.component.js +1 -1
- package/row.component.js.map +1 -1
- package/row.style.d.ts +0 -0
- package/row.style.js +0 -0
- package/row.style.js.map +0 -0
package/col.component.d.ts
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { LitElement } from 'lit';
|
|
7
7
|
import { ColSize, FlexType } from './grid.types.js';
|
|
8
|
-
declare const NrColElement_base: (new (...args: any[]) => import("
|
|
8
|
+
declare const NrColElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
9
9
|
/**
|
|
10
10
|
* Column component for grid layout system
|
|
11
11
|
*
|
package/col.component.js
CHANGED
|
@@ -12,7 +12,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
12
12
|
import { html, LitElement } from 'lit';
|
|
13
13
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
14
14
|
import { styles } from './col.style.js';
|
|
15
|
-
import { NuralyUIBaseMixin } from '
|
|
15
|
+
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
16
16
|
import { BREAKPOINTS, EMPTY_STRING } from './grid.types.js';
|
|
17
17
|
/**
|
|
18
18
|
* Column component for grid layout system
|
package/col.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"col.component.js","sourceRoot":"","sources":["../../../src/components/grid/col.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 './col.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { ColSize, FlexType, GridBreakpoint, BREAKPOINTS, EMPTY_STRING } from './grid.types.js';\n\n/**\n * Column component for grid layout system\n * \n * @example\n * ```html\n * <!-- Basic column with span -->\n * <nr-col span=\"12\">Half width</nr-col>\n * <nr-col span=\"8\">8/24 width</nr-col>\n * \n * <!-- Column with offset -->\n * <nr-col span=\"12\" offset=\"6\">Offset by 6</nr-col>\n * \n * <!-- Responsive column -->\n * <nr-col \n * xs=\"24\" \n * sm=\"12\" \n * md=\"8\" \n * lg=\"6\"\n * >Responsive</nr-col>\n * \n * <!-- Column with order -->\n * <nr-col span=\"6\" order=\"4\">Last</nr-col>\n * <nr-col span=\"6\" order=\"1\">First</nr-col>\n * \n * <!-- Flex column -->\n * <nr-col flex=\"auto\">Auto flex</nr-col>\n * <nr-col flex=\"1\">Flex 1</nr-col>\n * ```\n * \n * @slot default - Column content\n */\n@customElement('nr-col')\nexport class NrColElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /** Number of columns to span (out of 24) */\n @property({ type: Number })\n span?: number;\n\n /** Number of columns to offset */\n @property({ type: Number })\n offset = 0;\n\n /** Order of the column */\n @property({ type: Number })\n order?: number;\n\n /** Number of columns to pull */\n @property({ type: Number })\n pull = 0;\n\n /** Number of columns to push */\n @property({ type: Number })\n push = 0;\n\n /** Flex layout style */\n @property({ type: String })\n flex: FlexType | '' = EMPTY_STRING;\n\n /** Extra small devices (<576px) */\n @property({ type: Object })\n xs?: number | ColSize;\n\n /** Small devices (≥576px) */\n @property({ type: Object })\n sm?: number | ColSize;\n\n /** Medium devices (≥768px) */\n @property({ type: Object })\n md?: number | ColSize;\n\n /** Large devices (≥992px) */\n @property({ type: Object })\n lg?: number | ColSize;\n\n /** Extra large devices (≥1200px) */\n @property({ type: Object })\n xl?: number | ColSize;\n\n /** Extra extra large devices (≥1600px) */\n @property({ type: Object })\n xxl?: number | ColSize;\n\n /** Current breakpoint */\n @state()\n private currentBreakpoint: GridBreakpoint = GridBreakpoint.XS;\n\n private resizeObserver?: ResizeObserver;\n\n override connectedCallback() {\n super.connectedCallback();\n this.setupResponsive();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver?.disconnect();\n }\n\n /**\n * Setup responsive breakpoint detection\n */\n private setupResponsive() {\n this.updateBreakpoint();\n \n this.resizeObserver = new ResizeObserver(() => {\n this.updateBreakpoint();\n });\n \n this.resizeObserver.observe(document.documentElement);\n }\n\n /**\n * Update current breakpoint based on window width\n */\n private updateBreakpoint() {\n const width = window.innerWidth;\n let newBreakpoint: GridBreakpoint;\n \n if (width >= BREAKPOINTS.xxl) {\n newBreakpoint = GridBreakpoint.XXL;\n } else if (width >= BREAKPOINTS.xl) {\n newBreakpoint = GridBreakpoint.XL;\n } else if (width >= BREAKPOINTS.lg) {\n newBreakpoint = GridBreakpoint.LG;\n } else if (width >= BREAKPOINTS.md) {\n newBreakpoint = GridBreakpoint.MD;\n } else if (width >= BREAKPOINTS.sm) {\n newBreakpoint = GridBreakpoint.SM;\n } else {\n newBreakpoint = GridBreakpoint.XS;\n }\n \n if (newBreakpoint !== this.currentBreakpoint) {\n this.currentBreakpoint = newBreakpoint;\n }\n }\n\n /**\n * Get responsive configuration for current breakpoint\n */\n private getResponsiveConfig(): ColSize {\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[bp];\n if (value !== undefined) {\n if (typeof value === 'number') {\n return { span: value };\n }\n return value;\n }\n }\n \n return {};\n }\n\n /**\n * Get computed column properties\n */\n private getColProperties() {\n const responsive = this.getResponsiveConfig();\n \n return {\n span: responsive.span ?? this.span,\n offset: responsive.offset ?? this.offset,\n order: responsive.order ?? this.order,\n pull: responsive.pull ?? this.pull,\n push: responsive.push ?? this.push\n };\n }\n\n /**\n * Get gutter from parent row\n */\n private getGutterFromParent(): number {\n const parent = this.closest('nr-row');\n if (parent) {\n const gutter = parent.getAttribute('data-gutter');\n return gutter ? parseInt(gutter, 10) : 0;\n }\n return 0;\n }\n\n /**\n * Get inline styles for column\n */\n private getColStyle() {\n const styles: Record<string, string> = {};\n const gutter = this.getGutterFromParent();\n \n if (gutter > 0) {\n styles['padding-left'] = `${gutter / 2}px`;\n styles['padding-right'] = `${gutter / 2}px`;\n }\n \n if (this.flex) {\n if (this.flex === 'auto') {\n styles['flex'] = '1 1 auto';\n } else if (this.flex === 'none') {\n styles['flex'] = '0 0 auto';\n } else if (typeof this.flex === 'number') {\n styles['flex'] = `${this.flex} ${this.flex} auto`;\n } else {\n styles['flex'] = this.flex;\n }\n }\n \n return styles;\n }\n\n override render() {\n const colStyle = this.getColStyle();\n const props = this.getColProperties();\n\n // Apply data attributes to :host for proper styling\n this.setAttribute('data-span', props.span?.toString() || '');\n this.setAttribute('data-offset', props.offset.toString());\n if (props.order !== undefined) {\n this.setAttribute('data-order', props.order.toString());\n } else {\n this.removeAttribute('data-order');\n }\n this.setAttribute('data-pull', props.pull.toString());\n this.setAttribute('data-push', props.push.toString());\n this.setAttribute('data-theme', this.currentTheme);\n\n return html`\n <div\n class=\"nr-col\"\n style=\"${Object.entries(colStyle).map(([key, value]) => `${key}: ${value}`).join('; ')}\"\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-col': NrColElement;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"col.component.js","sourceRoot":"","sources":["../../../src/components/grid/col.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 './col.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { ColSize, FlexType, GridBreakpoint, BREAKPOINTS, EMPTY_STRING } from './grid.types.js';\n\n/**\n * Column component for grid layout system\n * \n * @example\n * ```html\n * <!-- Basic column with span -->\n * <nr-col span=\"12\">Half width</nr-col>\n * <nr-col span=\"8\">8/24 width</nr-col>\n * \n * <!-- Column with offset -->\n * <nr-col span=\"12\" offset=\"6\">Offset by 6</nr-col>\n * \n * <!-- Responsive column -->\n * <nr-col \n * xs=\"24\" \n * sm=\"12\" \n * md=\"8\" \n * lg=\"6\"\n * >Responsive</nr-col>\n * \n * <!-- Column with order -->\n * <nr-col span=\"6\" order=\"4\">Last</nr-col>\n * <nr-col span=\"6\" order=\"1\">First</nr-col>\n * \n * <!-- Flex column -->\n * <nr-col flex=\"auto\">Auto flex</nr-col>\n * <nr-col flex=\"1\">Flex 1</nr-col>\n * ```\n * \n * @slot default - Column content\n */\n@customElement('nr-col')\nexport class NrColElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /** Number of columns to span (out of 24) */\n @property({ type: Number })\n span?: number;\n\n /** Number of columns to offset */\n @property({ type: Number })\n offset = 0;\n\n /** Order of the column */\n @property({ type: Number })\n order?: number;\n\n /** Number of columns to pull */\n @property({ type: Number })\n pull = 0;\n\n /** Number of columns to push */\n @property({ type: Number })\n push = 0;\n\n /** Flex layout style */\n @property({ type: String })\n flex: FlexType | '' = EMPTY_STRING;\n\n /** Extra small devices (<576px) */\n @property({ type: Object })\n xs?: number | ColSize;\n\n /** Small devices (≥576px) */\n @property({ type: Object })\n sm?: number | ColSize;\n\n /** Medium devices (≥768px) */\n @property({ type: Object })\n md?: number | ColSize;\n\n /** Large devices (≥992px) */\n @property({ type: Object })\n lg?: number | ColSize;\n\n /** Extra large devices (≥1200px) */\n @property({ type: Object })\n xl?: number | ColSize;\n\n /** Extra extra large devices (≥1600px) */\n @property({ type: Object })\n xxl?: number | ColSize;\n\n /** Current breakpoint */\n @state()\n private currentBreakpoint: GridBreakpoint = GridBreakpoint.XS;\n\n private resizeObserver?: ResizeObserver;\n\n override connectedCallback() {\n super.connectedCallback();\n this.setupResponsive();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver?.disconnect();\n }\n\n /**\n * Setup responsive breakpoint detection\n */\n private setupResponsive() {\n this.updateBreakpoint();\n \n this.resizeObserver = new ResizeObserver(() => {\n this.updateBreakpoint();\n });\n \n this.resizeObserver.observe(document.documentElement);\n }\n\n /**\n * Update current breakpoint based on window width\n */\n private updateBreakpoint() {\n const width = window.innerWidth;\n let newBreakpoint: GridBreakpoint;\n \n if (width >= BREAKPOINTS.xxl) {\n newBreakpoint = GridBreakpoint.XXL;\n } else if (width >= BREAKPOINTS.xl) {\n newBreakpoint = GridBreakpoint.XL;\n } else if (width >= BREAKPOINTS.lg) {\n newBreakpoint = GridBreakpoint.LG;\n } else if (width >= BREAKPOINTS.md) {\n newBreakpoint = GridBreakpoint.MD;\n } else if (width >= BREAKPOINTS.sm) {\n newBreakpoint = GridBreakpoint.SM;\n } else {\n newBreakpoint = GridBreakpoint.XS;\n }\n \n if (newBreakpoint !== this.currentBreakpoint) {\n this.currentBreakpoint = newBreakpoint;\n }\n }\n\n /**\n * Get responsive configuration for current breakpoint\n */\n private getResponsiveConfig(): ColSize {\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[bp];\n if (value !== undefined) {\n if (typeof value === 'number') {\n return { span: value };\n }\n return value;\n }\n }\n \n return {};\n }\n\n /**\n * Get computed column properties\n */\n private getColProperties() {\n const responsive = this.getResponsiveConfig();\n \n return {\n span: responsive.span ?? this.span,\n offset: responsive.offset ?? this.offset,\n order: responsive.order ?? this.order,\n pull: responsive.pull ?? this.pull,\n push: responsive.push ?? this.push\n };\n }\n\n /**\n * Get gutter from parent row\n */\n private getGutterFromParent(): number {\n const parent = this.closest('nr-row');\n if (parent) {\n const gutter = parent.getAttribute('data-gutter');\n return gutter ? parseInt(gutter, 10) : 0;\n }\n return 0;\n }\n\n /**\n * Get inline styles for column\n */\n private getColStyle() {\n const styles: Record<string, string> = {};\n const gutter = this.getGutterFromParent();\n \n if (gutter > 0) {\n styles['padding-left'] = `${gutter / 2}px`;\n styles['padding-right'] = `${gutter / 2}px`;\n }\n \n if (this.flex) {\n if (this.flex === 'auto') {\n styles['flex'] = '1 1 auto';\n } else if (this.flex === 'none') {\n styles['flex'] = '0 0 auto';\n } else if (typeof this.flex === 'number') {\n styles['flex'] = `${this.flex} ${this.flex} auto`;\n } else {\n styles['flex'] = this.flex;\n }\n }\n \n return styles;\n }\n\n override render() {\n const colStyle = this.getColStyle();\n const props = this.getColProperties();\n\n // Apply data attributes to :host for proper styling\n this.setAttribute('data-span', props.span?.toString() || '');\n this.setAttribute('data-offset', props.offset.toString());\n if (props.order !== undefined) {\n this.setAttribute('data-order', props.order.toString());\n } else {\n this.removeAttribute('data-order');\n }\n this.setAttribute('data-pull', props.pull.toString());\n this.setAttribute('data-push', props.push.toString());\n this.setAttribute('data-theme', this.currentTheme);\n\n return html`\n <div\n class=\"nr-col\"\n style=\"${Object.entries(colStyle).map(([key, value]) => `${key}: ${value}`).join('; ')}\"\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-col': NrColElement;\n }\n}\n"]}
|
package/col.style.d.ts
CHANGED
|
File without changes
|
package/col.style.js
CHANGED
|
File without changes
|
package/col.style.js.map
CHANGED
|
File without changes
|
package/grid.types.d.ts
CHANGED
|
File without changes
|
package/grid.types.js
CHANGED
|
File without changes
|
package/grid.types.js.map
CHANGED
|
File without changes
|
package/index.d.ts
CHANGED
|
File without changes
|
package/index.js
CHANGED
|
File without changes
|
package/index.js.map
CHANGED
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nuralyui/grid",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "Grid layout system (Row and Col) components for NuralyUI library",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
},
|
|
25
25
|
"repository": {
|
|
26
26
|
"type": "git",
|
|
27
|
-
"url": "https://github.com/
|
|
27
|
+
"url": "https://github.com/Nuralyio/NuralyUI.git",
|
|
28
28
|
"directory": "src/components/grid"
|
|
29
29
|
},
|
|
30
30
|
"keywords": [
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"author": "Nuraly, Laabidi Aymen",
|
|
44
44
|
"license": "MIT",
|
|
45
45
|
"bugs": {
|
|
46
|
-
"url": "https://github.com/
|
|
46
|
+
"url": "https://github.com/Nuralyio/NuralyUI/issues"
|
|
47
47
|
},
|
|
48
|
-
"homepage": "https://github.com/
|
|
48
|
+
"homepage": "https://github.com/Nuralyio/NuralyUI#readme",
|
|
49
49
|
"publishConfig": {
|
|
50
50
|
"access": "public"
|
|
51
51
|
}
|
package/react.d.ts
CHANGED
|
File without changes
|
package/react.js
CHANGED
|
File without changes
|
package/react.js.map
CHANGED
|
File without changes
|
package/row.component.d.ts
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { LitElement } from 'lit';
|
|
7
7
|
import { RowAlign, RowJustify, Gutter } from './grid.types.js';
|
|
8
|
-
declare const NrRowElement_base: (new (...args: any[]) => import("
|
|
8
|
+
declare const NrRowElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
9
9
|
/**
|
|
10
10
|
* Row component for grid layout system
|
|
11
11
|
*
|
package/row.component.js
CHANGED
|
@@ -12,7 +12,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
12
12
|
import { html, LitElement } from 'lit';
|
|
13
13
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
14
14
|
import { styles } from './row.style.js';
|
|
15
|
-
import { NuralyUIBaseMixin } from '
|
|
15
|
+
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
16
16
|
import { EMPTY_STRING, BREAKPOINTS } from './grid.types.js';
|
|
17
17
|
/**
|
|
18
18
|
* Row component for grid layout system
|
package/row.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"row.component.js","sourceRoot":"","sources":["../../../src/components/grid/row.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,
|
|
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 '@nuralyui/common/mixins';\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
CHANGED
|
File without changes
|
package/row.style.js
CHANGED
|
File without changes
|
package/row.style.js.map
CHANGED
|
File without changes
|