@rhtml/modifiers 0.0.90 → 0.0.91
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/dist/layout/index.d.ts +1 -1
- package/dist/layout/index.js +3 -3
- package/dist/layout/index.js.map +1 -1
- package/dist/layout/modifiers.d.ts +7 -1
- package/dist/layout/modifiers.js +41 -3
- package/dist/layout/modifiers.js.map +1 -1
- package/package.json +1 -1
- package/src/layout/index.ts +3 -3
- package/src/layout/modifiers.ts +46 -3
package/dist/layout/index.d.ts
CHANGED
package/dist/layout/index.js
CHANGED
|
@@ -16,19 +16,19 @@ let FlexLayout = class FlexLayout extends lit_html_1.LitElement {
|
|
|
16
16
|
OnUpdate() {
|
|
17
17
|
const slot = this.shadowRoot.querySelector('slot');
|
|
18
18
|
for (const div of [...slot === null || slot === void 0 ? void 0 : slot.assignedElements()]) {
|
|
19
|
-
modifiers_1.recursion.call(this.
|
|
19
|
+
modifiers_1.recursion.call(this.child, div);
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
static modifier(template) {
|
|
23
23
|
return lit_html_1.html `
|
|
24
|
-
<flex-layout .
|
|
24
|
+
<flex-layout .child=${this}>${template}</flex-layout>
|
|
25
25
|
`;
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
28
|
__decorate([
|
|
29
29
|
lit_html_1.property(),
|
|
30
30
|
__metadata("design:type", lit_html_1.LitElement)
|
|
31
|
-
], FlexLayout.prototype, "
|
|
31
|
+
], FlexLayout.prototype, "child", void 0);
|
|
32
32
|
FlexLayout = __decorate([
|
|
33
33
|
lit_html_1.Component({
|
|
34
34
|
selector: 'flex-layout',
|
package/dist/layout/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAMwB;AAExB,2CAAwC;AAUxC,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,qBAAU;IAIxC,QAAQ;QACN,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,EAAE,CAAC,EAAE;YAC/C,qBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAMwB;AAExB,2CAAwC;AAUxC,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,qBAAU;IAIxC,QAAQ;QACN,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,EAAE,CAAC,EAAE;YAC/C,qBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,GAAY,CAAC,CAAC;SAC1C;IACH,CAAC;IAEM,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;4BACa,IAAI,IAAI,QAAQ;KACvC,CAAC;IACJ,CAAC;CACF,CAAA;AAdC;IADC,mBAAQ,EAAE;8BACJ,qBAAU;yCAAC;AAFP,UAAU;IARtB,oBAAS,CAAC;QACT,QAAQ,EAAE,aAAa;QACvB,QAAQ;YACN,OAAO,eAAI,CAAA;;KAEV,CAAC;QACJ,CAAC;KACF,CAAC;GACW,UAAU,CAgBtB;AAhBY,gCAAU"}
|
|
@@ -6,12 +6,18 @@ export declare enum Attributes {
|
|
|
6
6
|
FxFlex = "fxFlex",
|
|
7
7
|
FxFlexFill = "fxFlexFill",
|
|
8
8
|
FxLayoutAlign = "fxLayoutAlign",
|
|
9
|
-
FxLayoutGap = "fxLayoutGap"
|
|
9
|
+
FxLayoutGap = "fxLayoutGap",
|
|
10
|
+
FxFlexAlign = "fxFlexAlign",
|
|
11
|
+
FxFlexOffset = "fxFlexOffset",
|
|
12
|
+
FxFlexOrder = "fxFlexOrder"
|
|
10
13
|
}
|
|
11
14
|
export declare const isAttribute: (attr: string) => boolean | string;
|
|
12
15
|
export declare const setFxLayoutAlign: (element: HTMLElement) => void;
|
|
13
16
|
export declare const setChildrensFlexFill: (div: HTMLElement) => void;
|
|
14
17
|
export declare const setChildrensFlex: (div: HTMLElement) => void;
|
|
18
|
+
export declare const setFlexAlign: (div: HTMLElement) => void;
|
|
19
|
+
export declare const setFlexOffset: (div: HTMLElement) => void;
|
|
20
|
+
export declare const setFlexOrder: (div: HTMLElement) => void;
|
|
15
21
|
export declare const subscribeToAttributeChanges: (name: string) => (fn: (element: HTMLElement) => void) => (element: HTMLElement) => void;
|
|
16
22
|
export declare const setFxLayout: (element: HTMLElement) => void;
|
|
17
23
|
export declare function recursion(div: HTMLElement): void;
|
package/dist/layout/modifiers.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.recursion = exports.setFxLayout = exports.subscribeToAttributeChanges = exports.setChildrensFlex = exports.setChildrensFlexFill = exports.setFxLayoutAlign = exports.isAttribute = exports.Attributes = void 0;
|
|
3
|
+
exports.recursion = exports.setFxLayout = exports.subscribeToAttributeChanges = exports.setFlexOrder = exports.setFlexOffset = exports.setFlexAlign = exports.setChildrensFlex = exports.setChildrensFlexFill = exports.setFxLayoutAlign = exports.isAttribute = exports.Attributes = void 0;
|
|
4
4
|
var Attributes;
|
|
5
5
|
(function (Attributes) {
|
|
6
6
|
Attributes["FxLayout"] = "fxLayout";
|
|
@@ -8,6 +8,9 @@ var Attributes;
|
|
|
8
8
|
Attributes["FxFlexFill"] = "fxFlexFill";
|
|
9
9
|
Attributes["FxLayoutAlign"] = "fxLayoutAlign";
|
|
10
10
|
Attributes["FxLayoutGap"] = "fxLayoutGap";
|
|
11
|
+
Attributes["FxFlexAlign"] = "fxFlexAlign";
|
|
12
|
+
Attributes["FxFlexOffset"] = "fxFlexOffset";
|
|
13
|
+
Attributes["FxFlexOrder"] = "fxFlexOrder";
|
|
11
14
|
})(Attributes = exports.Attributes || (exports.Attributes = {}));
|
|
12
15
|
/* TODO we need to update to typescript 4 */
|
|
13
16
|
// export type FxLayoutAlign = `${MainAxis} ${CrossAxis}`;
|
|
@@ -16,8 +19,10 @@ exports.setFxLayoutAlign = (element) => {
|
|
|
16
19
|
const fxLayoutAlign = element.getAttribute(Attributes.FxLayoutAlign);
|
|
17
20
|
if (exports.isAttribute(fxLayoutAlign)) {
|
|
18
21
|
const [mainAxis, crossAxis] = fxLayoutAlign.split(' ');
|
|
19
|
-
element.style['place-content'] =
|
|
20
|
-
|
|
22
|
+
element.style['place-content'] = crossAxis
|
|
23
|
+
? `${crossAxis} ${mainAxis}`
|
|
24
|
+
: `${mainAxis} ${mainAxis}`;
|
|
25
|
+
element.style['align-items'] = crossAxis ? crossAxis : mainAxis;
|
|
21
26
|
}
|
|
22
27
|
element.style['display'] = 'flex';
|
|
23
28
|
};
|
|
@@ -41,6 +46,27 @@ exports.setChildrensFlex = (div) => {
|
|
|
41
46
|
}
|
|
42
47
|
}
|
|
43
48
|
};
|
|
49
|
+
exports.setFlexAlign = (div) => {
|
|
50
|
+
const fxFlexAlign = div.getAttribute(Attributes.FxFlexAlign);
|
|
51
|
+
if (exports.isAttribute(fxFlexAlign)) {
|
|
52
|
+
div.style['align-self'] = fxFlexAlign;
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
exports.setFlexOffset = (div) => {
|
|
56
|
+
const fxFlexOffset = div.getAttribute(Attributes.FxFlexOffset);
|
|
57
|
+
if (exports.isAttribute(fxFlexOffset)) {
|
|
58
|
+
div.style['margin-left'] = fxFlexOffset;
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
exports.setFlexOrder = (div) => {
|
|
62
|
+
const fxFlexOrder = div.getAttribute(Attributes.FxFlexOrder);
|
|
63
|
+
if (exports.isAttribute(fxFlexOrder)) {
|
|
64
|
+
div.style['order'] = fxFlexOrder;
|
|
65
|
+
}
|
|
66
|
+
else {
|
|
67
|
+
div.style['order'] = '0';
|
|
68
|
+
}
|
|
69
|
+
};
|
|
44
70
|
exports.subscribeToAttributeChanges = (name) => (fn) => (element) => {
|
|
45
71
|
fn(element);
|
|
46
72
|
return new MutationObserver(() => fn(element)).observe(element, {
|
|
@@ -65,6 +91,18 @@ function recursion(div) {
|
|
|
65
91
|
const fxLayout = div.getAttribute(Attributes.FxLayout);
|
|
66
92
|
const fxLayoutAlign = div.getAttribute(Attributes.FxLayoutAlign);
|
|
67
93
|
const fxLayoutGap = div.getAttribute(Attributes.FxLayoutGap);
|
|
94
|
+
const fxFlexAlign = div.getAttribute(Attributes.FxFlexAlign);
|
|
95
|
+
const fxFlexOffset = div.getAttribute(Attributes.FxFlexOffset);
|
|
96
|
+
const fxFlexOrder = div.getAttribute(Attributes.FxFlexOrder);
|
|
97
|
+
if (exports.isAttribute(fxFlexOrder)) {
|
|
98
|
+
exports.subscribeToAttributeChanges(Attributes.FxFlexOrder)(exports.setFlexOrder)(div);
|
|
99
|
+
}
|
|
100
|
+
if (exports.isAttribute(fxFlexOffset)) {
|
|
101
|
+
exports.subscribeToAttributeChanges(Attributes.FxFlexAlign)(exports.setFlexOffset)(div);
|
|
102
|
+
}
|
|
103
|
+
if (exports.isAttribute(fxFlexAlign)) {
|
|
104
|
+
exports.subscribeToAttributeChanges(Attributes.FxFlexAlign)(exports.setFlexAlign)(div);
|
|
105
|
+
}
|
|
68
106
|
if (exports.isAttribute(fxFlex)) {
|
|
69
107
|
exports.subscribeToAttributeChanges(Attributes.FxFlex)(exports.setChildrensFlex)(div);
|
|
70
108
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../../src/layout/modifiers.ts"],"names":[],"mappings":";;;AAkBA,IAAY,
|
|
1
|
+
{"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../../src/layout/modifiers.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/layout/index.ts
CHANGED
|
@@ -18,18 +18,18 @@ import { recursion } from './modifiers';
|
|
|
18
18
|
})
|
|
19
19
|
export class FlexLayout extends LitElement {
|
|
20
20
|
@property()
|
|
21
|
-
|
|
21
|
+
child: LitElement;
|
|
22
22
|
|
|
23
23
|
OnUpdate(): void {
|
|
24
24
|
const slot = this.shadowRoot.querySelector('slot');
|
|
25
25
|
for (const div of [...slot?.assignedElements()]) {
|
|
26
|
-
recursion.call(this.
|
|
26
|
+
recursion.call(this.child, div as never);
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
public static modifier(template: TemplateResult): TemplateResult {
|
|
31
31
|
return html`
|
|
32
|
-
<flex-layout .
|
|
32
|
+
<flex-layout .child=${this}>${template}</flex-layout>
|
|
33
33
|
`;
|
|
34
34
|
}
|
|
35
35
|
}
|
package/src/layout/modifiers.ts
CHANGED
|
@@ -21,7 +21,10 @@ export enum Attributes {
|
|
|
21
21
|
FxFlex = 'fxFlex',
|
|
22
22
|
FxFlexFill = 'fxFlexFill',
|
|
23
23
|
FxLayoutAlign = 'fxLayoutAlign',
|
|
24
|
-
FxLayoutGap = 'fxLayoutGap'
|
|
24
|
+
FxLayoutGap = 'fxLayoutGap',
|
|
25
|
+
FxFlexAlign = 'fxFlexAlign',
|
|
26
|
+
FxFlexOffset = 'fxFlexOffset',
|
|
27
|
+
FxFlexOrder = 'fxFlexOrder'
|
|
25
28
|
}
|
|
26
29
|
/* TODO we need to update to typescript 4 */
|
|
27
30
|
// export type FxLayoutAlign = `${MainAxis} ${CrossAxis}`;
|
|
@@ -33,8 +36,10 @@ export const setFxLayoutAlign = (element: HTMLElement) => {
|
|
|
33
36
|
const fxLayoutAlign = element.getAttribute(Attributes.FxLayoutAlign);
|
|
34
37
|
if (isAttribute(fxLayoutAlign)) {
|
|
35
38
|
const [mainAxis, crossAxis] = fxLayoutAlign.split(' ');
|
|
36
|
-
element.style['place-content'] =
|
|
37
|
-
|
|
39
|
+
element.style['place-content'] = crossAxis
|
|
40
|
+
? `${crossAxis} ${mainAxis}`
|
|
41
|
+
: `${mainAxis} ${mainAxis}`;
|
|
42
|
+
element.style['align-items'] = crossAxis ? crossAxis : mainAxis;
|
|
38
43
|
}
|
|
39
44
|
element.style['display'] = 'flex';
|
|
40
45
|
};
|
|
@@ -61,6 +66,29 @@ export const setChildrensFlex = (div: HTMLElement) => {
|
|
|
61
66
|
}
|
|
62
67
|
};
|
|
63
68
|
|
|
69
|
+
export const setFlexAlign = (div: HTMLElement) => {
|
|
70
|
+
const fxFlexAlign = div.getAttribute(Attributes.FxFlexAlign);
|
|
71
|
+
if (isAttribute(fxFlexAlign)) {
|
|
72
|
+
div.style['align-self'] = fxFlexAlign;
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export const setFlexOffset = (div: HTMLElement) => {
|
|
77
|
+
const fxFlexOffset = div.getAttribute(Attributes.FxFlexOffset);
|
|
78
|
+
if (isAttribute(fxFlexOffset)) {
|
|
79
|
+
div.style['margin-left'] = fxFlexOffset;
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
export const setFlexOrder = (div: HTMLElement) => {
|
|
84
|
+
const fxFlexOrder = div.getAttribute(Attributes.FxFlexOrder);
|
|
85
|
+
if (isAttribute(fxFlexOrder)) {
|
|
86
|
+
div.style['order'] = fxFlexOrder;
|
|
87
|
+
} else {
|
|
88
|
+
div.style['order'] = '0';
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
|
|
64
92
|
export const subscribeToAttributeChanges = (name: string) => (
|
|
65
93
|
fn: (element: HTMLElement) => void
|
|
66
94
|
) => (element: HTMLElement) => {
|
|
@@ -89,6 +117,21 @@ export function recursion(div: HTMLElement) {
|
|
|
89
117
|
const fxLayout = div.getAttribute(Attributes.FxLayout);
|
|
90
118
|
const fxLayoutAlign = div.getAttribute(Attributes.FxLayoutAlign);
|
|
91
119
|
const fxLayoutGap = div.getAttribute(Attributes.FxLayoutGap);
|
|
120
|
+
const fxFlexAlign = div.getAttribute(Attributes.FxFlexAlign);
|
|
121
|
+
const fxFlexOffset = div.getAttribute(Attributes.FxFlexOffset);
|
|
122
|
+
const fxFlexOrder = div.getAttribute(Attributes.FxFlexOrder);
|
|
123
|
+
|
|
124
|
+
if (isAttribute(fxFlexOrder)) {
|
|
125
|
+
subscribeToAttributeChanges(Attributes.FxFlexOrder)(setFlexOrder)(div);
|
|
126
|
+
}
|
|
127
|
+
if (isAttribute(fxFlexOffset)) {
|
|
128
|
+
subscribeToAttributeChanges(Attributes.FxFlexAlign)(setFlexOffset)(div);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
if (isAttribute(fxFlexAlign)) {
|
|
132
|
+
subscribeToAttributeChanges(Attributes.FxFlexAlign)(setFlexAlign)(div);
|
|
133
|
+
}
|
|
134
|
+
|
|
92
135
|
if (isAttribute(fxFlex)) {
|
|
93
136
|
subscribeToAttributeChanges(Attributes.FxFlex)(setChildrensFlex)(div);
|
|
94
137
|
}
|