@nuralyui/grid 0.0.5 → 0.0.6
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/bundle.js +4 -4
- package/col.component.d.ts +1 -1
- package/col.component.js.map +1 -1
- package/col.style.js.map +1 -1
- package/grid.types.js.map +1 -1
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
- package/row.component.d.ts +1 -1
- package/row.component.js.map +1 -1
- package/row.style.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -65,14 +65,14 @@ import{css as t,LitElement as a,html as s}from"lit";import{property as e,state a
|
|
|
65
65
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
66
66
|
* SPDX-License-Identifier: MIT
|
|
67
67
|
*/
|
|
68
|
-
var l=function(t,a,s,e){for(var o,r=arguments.length,i=r<3?a:null===e?e=Object.getOwnPropertyDescriptor(a,s):e,d=t.length-1;d>=0;d--)(o=t[d])&&(i=(r<3?o(i):r>3?o(a,s,i):o(a,s))||i);return r>3&&i&&Object.defineProperty(a,s,i),i};let f=class extends(i(a)){constructor(){super(...arguments),this.align="",this.justify="",this.gutter=0,this.wrap=!0,this.currentBreakpoint="xs"}connectedCallback(){super.connectedCallback(),this.setupResponsiveGutter()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.resizeObserver)||void 0===t||t.disconnect()}setupResponsiveGutter(){"object"!=typeof this.gutter||Array.isArray(this.gutter)||(this.updateBreakpoint(),this.resizeObserver=new ResizeObserver((
|
|
68
|
+
var l=function(t,a,s,e){for(var o,r=arguments.length,i=r<3?a:null===e?e=Object.getOwnPropertyDescriptor(a,s):e,d=t.length-1;d>=0;d--)(o=t[d])&&(i=(r<3?o(i):r>3?o(a,s,i):o(a,s))||i);return r>3&&i&&Object.defineProperty(a,s,i),i};let f=class extends(i(a)){constructor(){super(...arguments),this.align="",this.justify="",this.gutter=0,this.wrap=!0,this.currentBreakpoint="xs"}connectedCallback(){super.connectedCallback(),this.setupResponsiveGutter()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.resizeObserver)||void 0===t||t.disconnect()}setupResponsiveGutter(){"object"!=typeof this.gutter||Array.isArray(this.gutter)||(this.updateBreakpoint(),this.resizeObserver=new ResizeObserver(()=>{this.updateBreakpoint()}),this.resizeObserver.observe(document.documentElement))}updateBreakpoint(){const t=window.innerWidth;this.currentBreakpoint=t>=n.xxl?"xxl":t>=n.xl?"xl":t>=n.lg?"lg":t>=n.md?"md":t>=n.sm?"sm":"xs"}getGutterValues(){if("number"==typeof this.gutter)return[this.gutter,this.gutter];if(Array.isArray(this.gutter))return this.gutter;const t=[this.currentBreakpoint,"xl","lg","md","sm","xs"];for(const a of t){const t=this.gutter[a];if(void 0!==t)return"number"==typeof t?[t,t]:t}return[0,0]}getRowStyle(){const[t,a]=this.getGutterValues(),s={};return t>0&&(s["margin-left"]=`-${t/2}px`,s["margin-right"]=`-${t/2}px`),a>0&&(s["row-gap"]=`${a}px`),s}getGutterContext(){const[t]=this.getGutterValues();return t}render(){const t=this.getRowStyle(),a=this.getGutterContext();return s`
|
|
69
69
|
<div
|
|
70
70
|
class="nr-row"
|
|
71
71
|
data-align="${this.align}"
|
|
72
72
|
data-justify="${this.justify}"
|
|
73
73
|
data-wrap="${this.wrap}"
|
|
74
74
|
data-theme="${this.currentTheme}"
|
|
75
|
-
style="${Object.entries(t).map((
|
|
75
|
+
style="${Object.entries(t).map(([t,a])=>`${t}: ${a}`).join("; ")}"
|
|
76
76
|
data-gutter="${a}"
|
|
77
77
|
>
|
|
78
78
|
<slot></slot>
|
|
@@ -192,10 +192,10 @@ var l=function(t,a,s,e){for(var o,r=arguments.length,i=r<3?a:null===e?e=Object.g
|
|
|
192
192
|
* @license
|
|
193
193
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
194
194
|
* SPDX-License-Identifier: MIT
|
|
195
|
-
*/;var u=function(t,a,s,e){for(var o,r=arguments.length,i=r<3?a:null===e?e=Object.getOwnPropertyDescriptor(a,s):e,d=t.length-1;d>=0;d--)(o=t[d])&&(i=(r<3?o(i):r>3?o(a,s,i):o(a,s))||i);return r>3&&i&&Object.defineProperty(a,s,i),i};let m=class extends(i(a)){constructor(){super(...arguments),this.offset=0,this.pull=0,this.push=0,this.flex="",this.currentBreakpoint="xs"}connectedCallback(){super.connectedCallback(),this.setupResponsive()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.resizeObserver)||void 0===t||t.disconnect()}setupResponsive(){this.updateBreakpoint(),this.resizeObserver=new ResizeObserver((
|
|
195
|
+
*/;var u=function(t,a,s,e){for(var o,r=arguments.length,i=r<3?a:null===e?e=Object.getOwnPropertyDescriptor(a,s):e,d=t.length-1;d>=0;d--)(o=t[d])&&(i=(r<3?o(i):r>3?o(a,s,i):o(a,s))||i);return r>3&&i&&Object.defineProperty(a,s,i),i};let m=class extends(i(a)){constructor(){super(...arguments),this.offset=0,this.pull=0,this.push=0,this.flex="",this.currentBreakpoint="xs"}connectedCallback(){super.connectedCallback(),this.setupResponsive()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.resizeObserver)||void 0===t||t.disconnect()}setupResponsive(){this.updateBreakpoint(),this.resizeObserver=new ResizeObserver(()=>{this.updateBreakpoint()}),this.resizeObserver.observe(document.documentElement)}updateBreakpoint(){const t=window.innerWidth;let a;a=t>=n.xxl?"xxl":t>=n.xl?"xl":t>=n.lg?"lg":t>=n.md?"md":t>=n.sm?"sm":"xs",a!==this.currentBreakpoint&&(this.currentBreakpoint=a)}getResponsiveConfig(){const t=[this.currentBreakpoint,"xl","lg","md","sm","xs"];for(const a of t){const t=this[a];if(void 0!==t)return"number"==typeof t?{span:t}:t}return{}}getColProperties(){var t,a,s,e,o;const r=this.getResponsiveConfig();return{span:null!==(t=r.span)&&void 0!==t?t:this.span,offset:null!==(a=r.offset)&&void 0!==a?a:this.offset,order:null!==(s=r.order)&&void 0!==s?s:this.order,pull:null!==(e=r.pull)&&void 0!==e?e:this.pull,push:null!==(o=r.push)&&void 0!==o?o:this.push}}getGutterFromParent(){const t=this.closest("nr-row");if(t){const a=t.getAttribute("data-gutter");return a?parseInt(a,10):0}return 0}getColStyle(){const t={},a=this.getGutterFromParent();return a>0&&(t["padding-left"]=a/2+"px",t["padding-right"]=a/2+"px"),this.flex&&("auto"===this.flex?t.flex="1 1 auto":"none"===this.flex?t.flex="0 0 auto":"number"==typeof this.flex?t.flex=`${this.flex} ${this.flex} auto`:t.flex=this.flex),t}render(){var t;const a=this.getColStyle(),e=this.getColProperties();return this.setAttribute("data-span",(null===(t=e.span)||void 0===t?void 0:t.toString())||""),this.setAttribute("data-offset",e.offset.toString()),void 0!==e.order?this.setAttribute("data-order",e.order.toString()):this.removeAttribute("data-order"),this.setAttribute("data-pull",e.pull.toString()),this.setAttribute("data-push",e.push.toString()),this.setAttribute("data-theme",this.currentTheme),s`
|
|
196
196
|
<div
|
|
197
197
|
class="nr-col"
|
|
198
|
-
style="${Object.entries(a).map((
|
|
198
|
+
style="${Object.entries(a).map(([t,a])=>`${t}: ${a}`).join("; ")}"
|
|
199
199
|
>
|
|
200
200
|
<slot></slot>
|
|
201
201
|
</div>
|
package/col.component.d.ts
CHANGED
|
@@ -92,7 +92,7 @@ export declare class NrColElement extends NrColElement_base {
|
|
|
92
92
|
* Get inline styles for column
|
|
93
93
|
*/
|
|
94
94
|
private getColStyle;
|
|
95
|
-
render(): import("lit").TemplateResult<1>;
|
|
95
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
96
96
|
}
|
|
97
97
|
declare global {
|
|
98
98
|
interface HTMLElementTagNameMap {
|
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 '@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"]}
|
|
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.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"col.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"col.style.js","sourceRoot":"","sources":["../../../../src/components/grid/col.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Column 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 box-sizing: border-box;\n flex-shrink: 0;\n }\n\n .nr-col {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n \n /* Theme-aware */\n color: var(--nuraly-color-text);\n }\n\n /* Column spans (1-24) - Apply flex to :host */\n :host([data-span=\"1\"]) { flex: 0 0 4.16666667%; max-width: 4.16666667%; }\n :host([data-span=\"2\"]) { flex: 0 0 8.33333333%; max-width: 8.33333333%; }\n :host([data-span=\"3\"]) { flex: 0 0 12.5%; max-width: 12.5%; }\n :host([data-span=\"4\"]) { flex: 0 0 16.66666667%; max-width: 16.66666667%; }\n :host([data-span=\"5\"]) { flex: 0 0 20.83333333%; max-width: 20.83333333%; }\n :host([data-span=\"6\"]) { flex: 0 0 25%; max-width: 25%; }\n :host([data-span=\"7\"]) { flex: 0 0 29.16666667%; max-width: 29.16666667%; }\n :host([data-span=\"8\"]) { flex: 0 0 33.33333333%; max-width: 33.33333333%; }\n :host([data-span=\"9\"]) { flex: 0 0 37.5%; max-width: 37.5%; }\n :host([data-span=\"10\"]) { flex: 0 0 41.66666667%; max-width: 41.66666667%; }\n :host([data-span=\"11\"]) { flex: 0 0 45.83333333%; max-width: 45.83333333%; }\n :host([data-span=\"12\"]) { flex: 0 0 50%; max-width: 50%; }\n :host([data-span=\"13\"]) { flex: 0 0 54.16666667%; max-width: 54.16666667%; }\n :host([data-span=\"14\"]) { flex: 0 0 58.33333333%; max-width: 58.33333333%; }\n :host([data-span=\"15\"]) { flex: 0 0 62.5%; max-width: 62.5%; }\n :host([data-span=\"16\"]) { flex: 0 0 66.66666667%; max-width: 66.66666667%; }\n :host([data-span=\"17\"]) { flex: 0 0 70.83333333%; max-width: 70.83333333%; }\n :host([data-span=\"18\"]) { flex: 0 0 75%; max-width: 75%; }\n :host([data-span=\"19\"]) { flex: 0 0 79.16666667%; max-width: 79.16666667%; }\n :host([data-span=\"20\"]) { flex: 0 0 83.33333333%; max-width: 83.33333333%; }\n :host([data-span=\"21\"]) { flex: 0 0 87.5%; max-width: 87.5%; }\n :host([data-span=\"22\"]) { flex: 0 0 91.66666667%; max-width: 91.66666667%; }\n :host([data-span=\"23\"]) { flex: 0 0 95.83333333%; max-width: 95.83333333%; }\n :host([data-span=\"24\"]) { flex: 0 0 100%; max-width: 100%; }\n\n /* Column offsets (0-24) - Apply to :host */\n :host([data-offset=\"0\"]) { margin-left: 0; }\n :host([data-offset=\"1\"]) { margin-left: 4.16666667%; }\n :host([data-offset=\"2\"]) { margin-left: 8.33333333%; }\n :host([data-offset=\"3\"]) { margin-left: 12.5%; }\n :host([data-offset=\"4\"]) { margin-left: 16.66666667%; }\n :host([data-offset=\"5\"]) { margin-left: 20.83333333%; }\n :host([data-offset=\"6\"]) { margin-left: 25%; }\n :host([data-offset=\"7\"]) { margin-left: 29.16666667%; }\n :host([data-offset=\"8\"]) { margin-left: 33.33333333%; }\n :host([data-offset=\"9\"]) { margin-left: 37.5%; }\n :host([data-offset=\"10\"]) { margin-left: 41.66666667%; }\n :host([data-offset=\"11\"]) { margin-left: 45.83333333%; }\n :host([data-offset=\"12\"]) { margin-left: 50%; }\n :host([data-offset=\"13\"]) { margin-left: 54.16666667%; }\n :host([data-offset=\"14\"]) { margin-left: 58.33333333%; }\n :host([data-offset=\"15\"]) { margin-left: 62.5%; }\n :host([data-offset=\"16\"]) { margin-left: 66.66666667%; }\n :host([data-offset=\"17\"]) { margin-left: 70.83333333%; }\n :host([data-offset=\"18\"]) { margin-left: 75%; }\n :host([data-offset=\"19\"]) { margin-left: 79.16666667%; }\n :host([data-offset=\"20\"]) { margin-left: 83.33333333%; }\n :host([data-offset=\"21\"]) { margin-left: 87.5%; }\n :host([data-offset=\"22\"]) { margin-left: 91.66666667%; }\n :host([data-offset=\"23\"]) { margin-left: 95.83333333%; }\n\n /* Order - Apply to :host */\n :host([data-order=\"1\"]) { order: 1; }\n :host([data-order=\"2\"]) { order: 2; }\n :host([data-order=\"3\"]) { order: 3; }\n :host([data-order=\"4\"]) { order: 4; }\n :host([data-order=\"5\"]) { order: 5; }\n :host([data-order=\"6\"]) { order: 6; }\n :host([data-order=\"7\"]) { order: 7; }\n :host([data-order=\"8\"]) { order: 8; }\n :host([data-order=\"9\"]) { order: 9; }\n :host([data-order=\"10\"]) { order: 10; }\n\n /* Pull (right positioning) - Apply to :host */\n :host([data-pull=\"0\"]) { right: auto; }\n :host([data-pull=\"1\"]) { right: 4.16666667%; }\n :host([data-pull=\"2\"]) { right: 8.33333333%; }\n :host([data-pull=\"3\"]) { right: 12.5%; }\n :host([data-pull=\"4\"]) { right: 16.66666667%; }\n :host([data-pull=\"5\"]) { right: 20.83333333%; }\n :host([data-pull=\"6\"]) { right: 25%; }\n :host([data-pull=\"7\"]) { right: 29.16666667%; }\n :host([data-pull=\"8\"]) { right: 33.33333333%; }\n :host([data-pull=\"9\"]) { right: 37.5%; }\n :host([data-pull=\"10\"]) { right: 41.66666667%; }\n :host([data-pull=\"11\"]) { right: 45.83333333%; }\n :host([data-pull=\"12\"]) { right: 50%; }\n\n /* Push (left positioning) - Apply to :host */\n :host([data-push=\"0\"]) { left: auto; }\n :host([data-push=\"1\"]) { left: 4.16666667%; }\n :host([data-push=\"2\"]) { left: 8.33333333%; }\n :host([data-push=\"3\"]) { left: 12.5%; }\n :host([data-push=\"4\"]) { left: 16.66666667%; }\n :host([data-push=\"5\"]) { left: 20.83333333%; }\n :host([data-push=\"6\"]) { left: 25%; }\n :host([data-push=\"7\"]) { left: 29.16666667%; }\n :host([data-push=\"8\"]) { left: 33.33333333%; }\n :host([data-push=\"9\"]) { left: 37.5%; }\n :host([data-push=\"10\"]) { left: 41.66666667%; }\n :host([data-push=\"11\"]) { left: 45.83333333%; }\n :host([data-push=\"12\"]) { left: 50%; }\n`;\n"]}
|
package/grid.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"grid.types.js","sourceRoot":"","sources":["../../../../src/components/grid/grid.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAc/B;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,IAAI;IACR,GAAG,EAAE,IAAI;CACD,CAAC","sourcesContent":["/**\n * Grid system types and constants\n */\n\nexport const EMPTY_STRING = '';\n\n/**\n * Responsive breakpoints matching Ant Design\n */\nexport const enum GridBreakpoint {\n XS = 'xs', // < 576px\n SM = 'sm', // >= 576px\n MD = 'md', // >= 768px\n LG = 'lg', // >= 992px\n XL = 'xl', // >= 1200px\n XXL = 'xxl' // >= 1600px\n}\n\n/**\n * Breakpoint pixel values\n */\nexport const BREAKPOINTS = {\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n xxl: 1600\n} as const;\n\n/**\n * Horizontal alignment of flex items\n */\nexport const enum RowAlign {\n Top = 'top',\n Middle = 'middle',\n Bottom = 'bottom',\n Stretch = 'stretch'\n}\n\n/**\n * Horizontal arrangement of columns\n */\nexport const enum RowJustify {\n Start = 'start',\n End = 'end',\n Center = 'center',\n SpaceAround = 'space-around',\n SpaceBetween = 'space-between',\n SpaceEvenly = 'space-evenly'\n}\n\n/**\n * Gutter configuration - can be number, array, or object\n */\nexport type Gutter = number | [number, number] | Partial<Record<GridBreakpoint, number | [number, number]>>;\n\n/**\n * Column span configuration for responsive breakpoints\n */\nexport interface ColSize {\n span?: number;\n offset?: number;\n order?: number;\n pull?: number;\n push?: number;\n}\n\n/**\n * Responsive column configuration\n */\nexport type ResponsiveCol = number | ColSize;\n\n/**\n * Column configuration for all breakpoints\n */\nexport interface ColResponsive {\n xs?: ResponsiveCol;\n sm?: ResponsiveCol;\n md?: ResponsiveCol;\n lg?: ResponsiveCol;\n xl?: ResponsiveCol;\n xxl?: ResponsiveCol;\n}\n\n/**\n * Flex properties\n */\nexport type FlexType = number | 'none' | 'auto' | string;\n"]}
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './row.component.js';\nexport * from './col.component.js';\nexport * from './grid.types.js';\n"]}
|
package/package.json
CHANGED
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/grid/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,MAAM,CAAC,MAAM,KAAK,GAAG,eAAe,CAAC;IACnC,OAAO,EAAE,QAAQ;IACjB,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,eAAe,CAAC;IACnC,OAAO,EAAE,QAAQ;IACjB,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrRowElement } from './row.component.js';\nimport { NrColElement } from './col.component.js';\nexport const NrRow = createComponent({\n tagName: 'nr-row',\n elementClass: NrRowElement,\n react: React,\n events: {},\n});\nexport const NrCol = createComponent({\n tagName: 'nr-col',\n elementClass: NrColElement,\n react: React,\n events: {},\n});\n"]}
|
package/row.component.d.ts
CHANGED
|
@@ -72,7 +72,7 @@ export declare class NrRowElement extends NrRowElement_base {
|
|
|
72
72
|
* Get gutter context for child columns
|
|
73
73
|
*/
|
|
74
74
|
private getGutterContext;
|
|
75
|
-
render(): import("lit").TemplateResult<1>;
|
|
75
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
76
76
|
}
|
|
77
77
|
declare global {
|
|
78
78
|
interface HTMLElementTagNameMap {
|
package/row.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"row.component.js","sourceRoot":"","sources":["
|
|
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.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"row.style.js","sourceRoot":"","sources":["
|
|
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"]}
|