@nuralyui/flex 0.0.4 → 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 +109 -2
- package/flex.component.d.ts +1 -1
- package/flex.component.js.map +1 -1
- package/flex.style.js.map +1 -1
- package/flex.types.js.map +1 -1
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -1,7 +1,114 @@
|
|
|
1
|
-
import{css as e,LitElement as t,html as r}from"lit";import{property as n,customElement as i}from"lit/decorators.js";import{NuralyUIBaseMixin as a}from"@nuralyui/common/mixins";const
|
|
1
|
+
import{css as e,LitElement as t,html as r}from"lit";import{property as n,customElement as i}from"lit/decorators.js";import{NuralyUIBaseMixin as a}from"@nuralyui/common/mixins";const l=e`
|
|
2
|
+
:host {
|
|
3
|
+
display: block;
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.nr-flex {
|
|
8
|
+
display: flex;
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
|
|
11
|
+
/* Theme-aware */
|
|
12
|
+
color: var(--nuraly-color-text);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* Inline flex */
|
|
16
|
+
.nr-flex[data-inline="true"] {
|
|
17
|
+
display: inline-flex;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* Flex direction */
|
|
21
|
+
.nr-flex[data-direction="row"] {
|
|
22
|
+
flex-direction: row;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.nr-flex[data-direction="row-reverse"] {
|
|
26
|
+
flex-direction: row-reverse;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.nr-flex[data-direction="column"] {
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.nr-flex[data-direction="column-reverse"] {
|
|
34
|
+
flex-direction: column-reverse;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Flex wrap */
|
|
38
|
+
.nr-flex[data-wrap="nowrap"] {
|
|
39
|
+
flex-wrap: nowrap;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.nr-flex[data-wrap="wrap"] {
|
|
43
|
+
flex-wrap: wrap;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.nr-flex[data-wrap="wrap-reverse"] {
|
|
47
|
+
flex-wrap: wrap-reverse;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Justify content */
|
|
51
|
+
.nr-flex[data-justify="flex-start"] {
|
|
52
|
+
justify-content: flex-start;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.nr-flex[data-justify="flex-end"] {
|
|
56
|
+
justify-content: flex-end;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.nr-flex[data-justify="center"] {
|
|
60
|
+
justify-content: center;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.nr-flex[data-justify="space-between"] {
|
|
64
|
+
justify-content: space-between;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.nr-flex[data-justify="space-around"] {
|
|
68
|
+
justify-content: space-around;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.nr-flex[data-justify="space-evenly"] {
|
|
72
|
+
justify-content: space-evenly;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Align items */
|
|
76
|
+
.nr-flex[data-align="flex-start"] {
|
|
77
|
+
align-items: flex-start;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.nr-flex[data-align="flex-end"] {
|
|
81
|
+
align-items: flex-end;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.nr-flex[data-align="center"] {
|
|
85
|
+
align-items: center;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.nr-flex[data-align="baseline"] {
|
|
89
|
+
align-items: baseline;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.nr-flex[data-align="stretch"] {
|
|
93
|
+
align-items: stretch;
|
|
94
|
+
}
|
|
95
|
+
`,s="";
|
|
2
96
|
/**
|
|
3
97
|
* @license
|
|
4
98
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
5
99
|
* SPDX-License-Identifier: MIT
|
|
6
100
|
*/
|
|
7
|
-
var o=function(e,t,r,n){for(var i,a=arguments.length,
|
|
101
|
+
var o=function(e,t,r,n){for(var i,a=arguments.length,l=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n,s=e.length-1;s>=0;s--)(i=e[s])&&(l=(a<3?i(l):a>3?i(t,r,l):i(t,r))||l);return a>3&&l&&Object.defineProperty(t,r,l),l};let f=class extends(a(t)){constructor(){super(...arguments),this.direction="row",this.vertical=!1,this.wrap="nowrap",this.justify="",this.align="",this.gap=0,this.inline=!1,this.flex=""}getFlexDirection(){return this.vertical?"column":this.direction}getGapValue(e){if("number"==typeof e)return`${e}px`;if("string"==typeof e)switch(e){case"small":return"var(--nuraly-spacing-2, 8px)";case"medium":return"var(--nuraly-spacing-3, 16px)";case"large":return"var(--nuraly-spacing-4, 24px)";default:return e}return"0"}getGapStyles(){const e={};if(Array.isArray(this.gap)){const[t,r]=this.gap;e["column-gap"]=this.getGapValue(t),e["row-gap"]=this.getGapValue(r)}else this.gap&&(e.gap=this.getGapValue(this.gap));return e}getFlexStyles(){const e=Object.assign({},this.getGapStyles());return this.flex&&(e.flex=this.flex),Object.entries(e).map(([e,t])=>`${e}: ${t}`).join("; ")}render(){const e=this.getFlexDirection(),t=this.getFlexStyles();return r`
|
|
102
|
+
<div
|
|
103
|
+
class="nr-flex"
|
|
104
|
+
data-direction="${e}"
|
|
105
|
+
data-wrap="${this.wrap}"
|
|
106
|
+
data-justify="${this.justify}"
|
|
107
|
+
data-align="${this.align}"
|
|
108
|
+
data-inline="${this.inline}"
|
|
109
|
+
data-theme="${this.currentTheme}"
|
|
110
|
+
style="${t}"
|
|
111
|
+
>
|
|
112
|
+
<slot></slot>
|
|
113
|
+
</div>
|
|
114
|
+
`}};f.styles=l,o([n({type:String})],f.prototype,"direction",void 0),o([n({type:Boolean})],f.prototype,"vertical",void 0),o([n({type:String})],f.prototype,"wrap",void 0),o([n({type:String})],f.prototype,"justify",void 0),o([n({type:String})],f.prototype,"align",void 0),o([n({type:Object})],f.prototype,"gap",void 0),o([n({type:Boolean})],f.prototype,"inline",void 0),o([n({type:String})],f.prototype,"flex",void 0),f=o([i("nr-flex")],f);export{s as EMPTY_STRING,f as NrFlexElement};
|
package/flex.component.d.ts
CHANGED
|
@@ -78,7 +78,7 @@ export declare class NrFlexElement extends NrFlexElement_base {
|
|
|
78
78
|
* Get all inline styles for flex container
|
|
79
79
|
*/
|
|
80
80
|
private getFlexStyles;
|
|
81
|
-
render(): import("lit").TemplateResult<1>;
|
|
81
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
82
82
|
}
|
|
83
83
|
declare global {
|
|
84
84
|
interface HTMLElementTagNameMap {
|
package/flex.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flex.component.js","sourceRoot":"","sources":["
|
|
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.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flex.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"flex.style.js","sourceRoot":"","sources":["../../../../src/components/flex/flex.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Flex component styles\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 }\n\n .nr-flex {\n display: flex;\n box-sizing: border-box;\n \n /* Theme-aware */\n color: var(--nuraly-color-text);\n }\n\n /* Inline flex */\n .nr-flex[data-inline=\"true\"] {\n display: inline-flex;\n }\n\n /* Flex direction */\n .nr-flex[data-direction=\"row\"] {\n flex-direction: row;\n }\n\n .nr-flex[data-direction=\"row-reverse\"] {\n flex-direction: row-reverse;\n }\n\n .nr-flex[data-direction=\"column\"] {\n flex-direction: column;\n }\n\n .nr-flex[data-direction=\"column-reverse\"] {\n flex-direction: column-reverse;\n }\n\n /* Flex wrap */\n .nr-flex[data-wrap=\"nowrap\"] {\n flex-wrap: nowrap;\n }\n\n .nr-flex[data-wrap=\"wrap\"] {\n flex-wrap: wrap;\n }\n\n .nr-flex[data-wrap=\"wrap-reverse\"] {\n flex-wrap: wrap-reverse;\n }\n\n /* Justify content */\n .nr-flex[data-justify=\"flex-start\"] {\n justify-content: flex-start;\n }\n\n .nr-flex[data-justify=\"flex-end\"] {\n justify-content: flex-end;\n }\n\n .nr-flex[data-justify=\"center\"] {\n justify-content: center;\n }\n\n .nr-flex[data-justify=\"space-between\"] {\n justify-content: space-between;\n }\n\n .nr-flex[data-justify=\"space-around\"] {\n justify-content: space-around;\n }\n\n .nr-flex[data-justify=\"space-evenly\"] {\n justify-content: space-evenly;\n }\n\n /* Align items */\n .nr-flex[data-align=\"flex-start\"] {\n align-items: flex-start;\n }\n\n .nr-flex[data-align=\"flex-end\"] {\n align-items: flex-end;\n }\n\n .nr-flex[data-align=\"center\"] {\n align-items: center;\n }\n\n .nr-flex[data-align=\"baseline\"] {\n align-items: baseline;\n }\n\n .nr-flex[data-align=\"stretch\"] {\n align-items: stretch;\n }\n`;\n"]}
|
package/flex.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flex.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"flex.types.js","sourceRoot":"","sources":["../../../../src/components/flex/flex.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["/**\n * Flex component types and constants\n */\n\nexport const EMPTY_STRING = '';\n\n/**\n * Flex direction\n */\nexport const enum FlexDirection {\n Row = 'row',\n RowReverse = 'row-reverse',\n Column = 'column',\n ColumnReverse = 'column-reverse'\n}\n\n/**\n * Flex wrap behavior\n */\nexport const enum FlexWrap {\n NoWrap = 'nowrap',\n Wrap = 'wrap',\n WrapReverse = 'wrap-reverse'\n}\n\n/**\n * Justify content alignment\n */\nexport const enum FlexJustify {\n FlexStart = 'flex-start',\n FlexEnd = 'flex-end',\n Center = 'center',\n SpaceBetween = 'space-between',\n SpaceAround = 'space-around',\n SpaceEvenly = 'space-evenly'\n}\n\n/**\n * Align items alignment\n */\nexport const enum FlexAlign {\n FlexStart = 'flex-start',\n FlexEnd = 'flex-end',\n Center = 'center',\n Baseline = 'baseline',\n Stretch = 'stretch'\n}\n\n/**\n * Gap size presets\n */\nexport const enum FlexGap {\n Small = 'small',\n Medium = 'medium',\n Large = 'large'\n}\n\n/**\n * Gap configuration - can be string preset, number (px), or array [horizontal, vertical]\n */\nexport type Gap = FlexGap | number | string | [number | string, number | string];\n\n/**\n * Flex item configuration\n */\nexport interface FlexItemConfig {\n flex?: string | number;\n order?: number;\n alignSelf?: FlexAlign | 'auto';\n}\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/flex/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './flex.component.js';\nexport * from './flex.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/flex/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC;IACpC,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrFlexElement } from './flex.component.js';\nexport const NrFlex = createComponent({\n tagName: 'nr-flex',\n elementClass: NrFlexElement,\n react: React,\n events: {},\n});\n"]}
|