@nuralyui/flex 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/flex.component.d.ts +1 -1
- package/flex.component.js +1 -1
- package/flex.component.js.map +1 -1
- package/flex.style.d.ts +0 -0
- package/flex.style.js +0 -0
- package/flex.style.js.map +0 -0
- package/flex.types.d.ts +0 -0
- package/flex.types.js +0 -0
- package/flex.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/flex.component.d.ts
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { LitElement } from 'lit';
|
|
7
7
|
import { FlexDirection, FlexWrap, FlexJustify, FlexAlign, Gap } from './flex.types.js';
|
|
8
|
-
declare const NrFlexElement_base: (new (...args: any[]) => import("
|
|
8
|
+
declare const NrFlexElement_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
|
* Flex layout component for flexible box layouts
|
|
11
11
|
*
|
package/flex.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 } from 'lit/decorators.js';
|
|
14
14
|
import { styles } from './flex.style.js';
|
|
15
|
-
import { NuralyUIBaseMixin } from '
|
|
15
|
+
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
16
16
|
import { EMPTY_STRING } from './flex.types.js';
|
|
17
17
|
/**
|
|
18
18
|
* Flex layout component for flexible box layouts
|
package/flex.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flex.component.js","sourceRoot":"","sources":["../../../src/components/flex/flex.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"flex.component.js","sourceRoot":"","sources":["../../../src/components/flex/flex.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 './flex.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport {\n FlexDirection,\n FlexWrap,\n FlexJustify,\n FlexAlign,\n FlexGap,\n Gap,\n EMPTY_STRING\n} from './flex.types.js';\n\n/**\n * Flex layout component for flexible box layouts\n * \n * @example\n * ```html\n * <!-- Basic flex -->\n * <nr-flex>\n * <div>Item 1</div>\n * <div>Item 2</div>\n * <div>Item 3</div>\n * </nr-flex>\n * \n * <!-- Flex with gap -->\n * <nr-flex gap=\"medium\">\n * <div>Item 1</div>\n * <div>Item 2</div>\n * </nr-flex>\n * \n * <!-- Centered flex -->\n * <nr-flex justify=\"center\" align=\"center\">\n * <div>Centered content</div>\n * </nr-flex>\n * \n * <!-- Column layout with gap -->\n * <nr-flex vertical gap=\"16\">\n * <div>Item 1</div>\n * <div>Item 2</div>\n * </nr-flex>\n * \n * <!-- Responsive gap -->\n * <nr-flex .gap=${[16, 24]}>\n * <div>Item 1</div>\n * <div>Item 2</div>\n * </nr-flex>\n * ```\n * \n * @slot default - Flex items\n */\n@customElement('nr-flex')\nexport class NrFlexElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /** Flex direction (shorthand: use vertical prop for column) */\n @property({ type: String })\n direction: FlexDirection = FlexDirection.Row;\n\n /** Shorthand for flex-direction: column */\n @property({ type: Boolean })\n vertical = false;\n\n /** Flex wrap behavior */\n @property({ type: String })\n wrap: FlexWrap = FlexWrap.NoWrap;\n\n /** Justify content alignment */\n @property({ type: String })\n justify: FlexJustify | '' = EMPTY_STRING;\n\n /** Align items alignment */\n @property({ type: String })\n align: FlexAlign | '' = EMPTY_STRING;\n\n /** Gap between flex items - can be preset string, number (px), or [horizontal, vertical] */\n @property({ type: Object })\n gap: Gap = 0;\n\n /** Make flex container inline */\n @property({ type: Boolean })\n inline = false;\n\n /** Custom flex CSS value (e.g., \"1\", \"auto\", \"none\") */\n @property({ type: String })\n flex: string | '' = EMPTY_STRING;\n\n /**\n * Get computed flex direction\n */\n private getFlexDirection(): FlexDirection {\n return this.vertical ? FlexDirection.Column : this.direction;\n }\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 // Check if it's a preset\n switch (value) {\n case FlexGap.Small:\n return 'var(--nuraly-spacing-2, 8px)';\n case FlexGap.Medium:\n return 'var(--nuraly-spacing-3, 16px)';\n case FlexGap.Large:\n return 'var(--nuraly-spacing-4, 24px)';\n default:\n return value; // Use as-is (could be CSS variable or custom value)\n }\n }\n \n return '0';\n }\n\n /**\n * Get gap styles for flex 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 flex container\n */\n private getFlexStyles(): string {\n const styles: Record<string, string> = {\n ...this.getGapStyles()\n };\n \n if (this.flex) {\n styles['flex'] = this.flex;\n }\n \n return Object.entries(styles)\n .map(([key, value]) => `${key}: ${value}`)\n .join('; ');\n }\n\n override render() {\n const flexDirection = this.getFlexDirection();\n const flexStyles = this.getFlexStyles();\n\n return html`\n <div\n class=\"nr-flex\"\n data-direction=\"${flexDirection}\"\n data-wrap=\"${this.wrap}\"\n data-justify=\"${this.justify}\"\n data-align=\"${this.align}\"\n data-inline=\"${this.inline}\"\n data-theme=\"${this.currentTheme}\"\n style=\"${flexStyles}\"\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-flex': NrFlexElement;\n }\n}\n"]}
|
package/flex.style.d.ts
CHANGED
|
File without changes
|
package/flex.style.js
CHANGED
|
File without changes
|
package/flex.style.js.map
CHANGED
|
File without changes
|
package/flex.types.d.ts
CHANGED
|
File without changes
|
package/flex.types.js
CHANGED
|
File without changes
|
package/flex.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/flex",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "Flex layout component 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/flex"
|
|
29
29
|
},
|
|
30
30
|
"keywords": [
|
|
@@ -40,9 +40,9 @@
|
|
|
40
40
|
"author": "Nuraly, Laabidi Aymen",
|
|
41
41
|
"license": "MIT",
|
|
42
42
|
"bugs": {
|
|
43
|
-
"url": "https://github.com/
|
|
43
|
+
"url": "https://github.com/Nuralyio/NuralyUI/issues"
|
|
44
44
|
},
|
|
45
|
-
"homepage": "https://github.com/
|
|
45
|
+
"homepage": "https://github.com/Nuralyio/NuralyUI#readme",
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"access": "public"
|
|
48
48
|
}
|
package/react.d.ts
CHANGED
|
File without changes
|
package/react.js
CHANGED
|
File without changes
|
package/react.js.map
CHANGED
|
File without changes
|