@nuralyui/container 0.0.1 → 0.0.2
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.component.js","sourceRoot":"","sources":["../../../../src/components/container/container.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 } from 'lit/decorators.js';\nimport { styles } from './container.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport type {\n Gap\n} from './container.types.js';\n\n/**\n * Container layout component for wrapping content with configurable layout options\n *\n * @example\n * ```html\n * <!-- Basic container -->\n * <nr-container>\n * <div>Content</div>\n * </nr-container>\n *\n * <!-- Boxed centered container -->\n * <nr-container layout=\"boxed\" size=\"lg\">\n * <div>Centered content with max-width</div>\n * </nr-container>\n *\n * <!-- Vertical container with gap -->\n * <nr-container direction=\"column\" gap=\"16\">\n * <div>Item 1</div>\n * <div>Item 2</div>\n * </nr-container>\n *\n * <!-- Centered content -->\n * <nr-container justify=\"center\" align=\"center\">\n * <div>Centered content</div>\n * </nr-container>\n * ```\n *\n * @slot default - Container content\n */\n@customElement('nr-container')\nexport class NrContainerElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /** Layout type: fluid (full width), boxed (centered with max-width), or fixed */\n @property({ type: String })\n layout: 'fluid' | 'boxed' | 'fixed' = 'fluid';\n\n /** Flex direction: row or column */\n @property({ type: String })\n direction: 'row' | 'column' = 'column';\n\n /** Size preset for boxed/fixed layouts */\n @property({ type: String })\n size: 'sm' | 'md' | 'lg' | 'xl' | 'full' = 'lg';\n\n /** Padding preset */\n @property({ type: String })\n padding: 'none' | 'sm' | 'md' | 'lg' | '' = '';\n\n /** Justify content alignment */\n @property({ type: String })\n justify: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | '' = '';\n\n /** Align items alignment */\n @property({ type: String })\n align: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' | '' = '';\n\n /** Gap between items - can be preset string, number (px), or [horizontal, vertical] */\n @property({ type: Object })\n gap: Gap = 0;\n\n /** Enable flex wrap */\n @property({ type: Boolean })\n wrap = false;\n\n /** Custom width (overrides size preset) */\n @property({ type: String })\n width = '';\n\n /** Custom height */\n @property({ type: String })\n height = '';\n\n /** Custom min-height */\n @property({ type: String, attribute: 'min-height' })\n minHeight = '';\n\n /** Class to apply to inner container (for component styles) */\n @property({ type: String, attribute: 'inner-class' })\n innerClass = '';\n\n /**\n * Convert gap value to CSS value\n */\n private getGapValue(value: Gap): string {\n if (typeof value === 'number') {\n return `${value}px`;\n }\n\n if (typeof value === 'string') {\n switch (value) {\n case 'small':\n return 'var(--nuraly-spacing-2, 8px)';\n case 'medium':\n return 'var(--nuraly-spacing-3, 16px)';\n case 'large':\n return 'var(--nuraly-spacing-4, 24px)';\n default:\n return value;\n }\n }\n\n return '0';\n }\n\n /**\n * Get gap styles for container\n */\n private getGapStyles(): Record<string, string> {\n const styles: Record<string, string> = {};\n\n if (Array.isArray(this.gap)) {\n const [horizontal, vertical] = this.gap;\n styles['column-gap'] = this.getGapValue(horizontal);\n styles['row-gap'] = this.getGapValue(vertical);\n } else if (this.gap) {\n styles['gap'] = this.getGapValue(this.gap);\n }\n\n return styles;\n }\n\n /**\n * Get all inline styles for inner container\n */\n private getContainerStyles(): string {\n const styles: Record<string, string> = {\n ...this.getGapStyles()\n };\n\n // Width is handled on host element, not inner container\n\n if (this.height) {\n styles['height'] = this.height;\n }\n\n if (this.minHeight) {\n styles['min-height'] = this.minHeight;\n }\n\n return Object.entries(styles)\n .map(([key, value]) => `${key}: ${value}`)\n .join('; ');\n }\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n\n // Update host styles based on layout\n if (this.layout === 'boxed') {\n // Boxed: host is centered with max-width\n if (this.width) {\n this.style.maxWidth = this.width;\n this.style.width = '';\n } else {\n this.style.maxWidth = '';\n }\n this.style.marginInline = 'auto';\n } else if (this.width) {\n this.style.width = this.width;\n this.style.maxWidth = this.width;\n this.style.marginInline = '';\n } else if (this.layout === 'fluid') {\n this.style.width = '100%';\n this.style.maxWidth = '';\n this.style.marginInline = '';\n } else if (this.direction === 'row' && this.layout === 'fixed') {\n this.style.width = 'fit-content';\n this.style.maxWidth = '';\n this.style.marginInline = '';\n } else {\n this.style.width = '100%';\n this.style.maxWidth = '';\n this.style.marginInline = '';\n }\n }\n\n override render() {\n const containerStyles = this.getContainerStyles();\n const classes = this.innerClass ? `nr-container ${this.innerClass}` : 'nr-container';\n\n return html`\n <div\n class=\"${classes}\"\n part=\"container\"\n data-layout=\"${this.layout}\"\n data-direction=\"${this.direction}\"\n data-size=\"${this.layout !== 'fluid' ? this.size : ''}\"\n data-padding=\"${this.padding}\"\n data-justify=\"${this.justify}\"\n data-align=\"${this.align}\"\n data-wrap=\"${this.wrap}\"\n data-theme=\"${this.currentTheme}\"\n style=\"${containerStyles}\"\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-container': NrContainerElement;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"container.component.js","sourceRoot":"","sources":["../../../../src/components/container/container.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 } from 'lit/decorators.js';\nimport { styles } from './container.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport type {\n Gap\n} from './container.types.js';\n\n/**\n * Container layout component for wrapping content with configurable layout options\n *\n * @example\n * ```html\n * <!-- Basic container -->\n * <nr-container>\n * <div>Content</div>\n * </nr-container>\n *\n * <!-- Boxed centered container -->\n * <nr-container layout=\"boxed\" size=\"lg\">\n * <div>Centered content with max-width</div>\n * </nr-container>\n *\n * <!-- Vertical container with gap -->\n * <nr-container direction=\"column\" gap=\"16\">\n * <div>Item 1</div>\n * <div>Item 2</div>\n * </nr-container>\n *\n * <!-- Centered content -->\n * <nr-container justify=\"center\" align=\"center\">\n * <div>Centered content</div>\n * </nr-container>\n * ```\n *\n * @slot default - Container content\n */\n@customElement('nr-container')\nexport class NrContainerElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /** Layout type: fluid (full width), boxed (centered with max-width), or fixed */\n @property({ type: String })\n layout: 'fluid' | 'boxed' | 'fixed' = 'fluid';\n\n /** Flex direction: row or column */\n @property({ type: String })\n direction: 'row' | 'column' = 'column';\n\n /** Size preset for boxed/fixed layouts */\n @property({ type: String })\n size: 'sm' | 'md' | 'lg' | 'xl' | 'full' = 'lg';\n\n /** Padding preset */\n @property({ type: String })\n padding: 'none' | 'sm' | 'md' | 'lg' | '' = '';\n\n /** Justify content alignment */\n @property({ type: String })\n justify: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | '' = '';\n\n /** Align items alignment */\n @property({ type: String })\n align: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' | '' = '';\n\n /** Gap between items - can be preset string, number (px), or [horizontal, vertical] */\n @property({ type: Object })\n gap: Gap = 0;\n\n /** Enable flex wrap */\n @property({ type: Boolean })\n wrap = false;\n\n /** Custom width (overrides size preset) */\n @property({ type: String })\n width = '';\n\n /** Custom height */\n @property({ type: String })\n height = '';\n\n /** Custom min-height */\n @property({ type: String, attribute: 'min-height' })\n minHeight = '';\n\n /** Class to apply to inner container (for component styles) */\n @property({ type: String, attribute: 'inner-class' })\n innerClass = '';\n\n /**\n * Convert gap value to CSS value\n */\n private getGapValue(value: Gap): string {\n if (typeof value === 'number') {\n return `${value}px`;\n }\n\n if (typeof value === 'string') {\n switch (value) {\n case 'small':\n return 'var(--nuraly-spacing-2, 8px)';\n case 'medium':\n return 'var(--nuraly-spacing-3, 16px)';\n case 'large':\n return 'var(--nuraly-spacing-4, 24px)';\n default:\n return value;\n }\n }\n\n return '0';\n }\n\n /**\n * Get gap styles for container\n */\n private getGapStyles(): Record<string, string> {\n const styles: Record<string, string> = {};\n\n if (Array.isArray(this.gap)) {\n const [horizontal, vertical] = this.gap;\n styles['column-gap'] = this.getGapValue(horizontal);\n styles['row-gap'] = this.getGapValue(vertical);\n } else if (this.gap) {\n styles['gap'] = this.getGapValue(this.gap);\n }\n\n return styles;\n }\n\n /**\n * Get all inline styles for inner container\n */\n private getContainerStyles(): string {\n const styles: Record<string, string> = {\n ...this.getGapStyles()\n };\n\n // Width is handled on host element, not inner container\n\n if (this.height) {\n styles['height'] = this.height;\n }\n\n if (this.minHeight) {\n styles['min-height'] = this.minHeight;\n }\n\n return Object.entries(styles)\n .map(([key, value]) => `${key}: ${value}`)\n .join('; ');\n }\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n\n // Update host styles based on layout\n if (this.layout === 'boxed') {\n // Boxed: host is centered with max-width\n if (this.width) {\n this.style.maxWidth = this.width;\n this.style.width = '';\n } else {\n this.style.maxWidth = '';\n }\n this.style.marginInline = 'auto';\n } else if (this.width) {\n this.style.width = this.width;\n this.style.maxWidth = this.width;\n this.style.marginInline = '';\n } else if (this.layout === 'fluid') {\n this.style.width = '100%';\n this.style.maxWidth = '';\n this.style.marginInline = '';\n } else if (this.direction === 'row' && this.layout === 'fixed') {\n this.style.width = 'fit-content';\n this.style.maxWidth = '';\n this.style.marginInline = '';\n } else {\n this.style.width = '100%';\n this.style.maxWidth = '';\n this.style.marginInline = '';\n }\n }\n\n override render() {\n const containerStyles = this.getContainerStyles();\n const classes = this.innerClass ? `nr-container ${this.innerClass}` : 'nr-container';\n\n return html`\n <div\n class=\"${classes}\"\n part=\"container\"\n data-layout=\"${this.layout}\"\n data-direction=\"${this.direction}\"\n data-size=\"${this.layout !== 'fluid' ? this.size : ''}\"\n data-padding=\"${this.padding}\"\n data-justify=\"${this.justify}\"\n data-align=\"${this.align}\"\n data-wrap=\"${this.wrap}\"\n data-theme=\"${this.currentTheme}\"\n style=\"${containerStyles}\"\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-container': NrContainerElement;\n }\n}\n"]}
|
package/container.types.d.ts
CHANGED
|
@@ -63,5 +63,5 @@ export declare const enum ContainerAlign {
|
|
|
63
63
|
/**
|
|
64
64
|
* Gap configuration - can be string preset, number (px), or array [horizontal, vertical]
|
|
65
65
|
*/
|
|
66
|
-
export type Gap = 'small' | 'medium' | 'large' | number | string | [number | string, number | string];
|
|
66
|
+
export declare type Gap = 'small' | 'medium' | 'large' | number | string | [number | string, number | string];
|
|
67
67
|
//# sourceMappingURL=container.types.d.ts.map
|