@rhtml/modifiers 0.0.90 → 0.0.93

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.
Files changed (9) hide show
  1. package/dist/layout/index.d.ts +2 -1
  2. package/dist/layout/index.js +9 -4
  3. package/dist/layout/index.js.map +1 -1
  4. package/dist/layout/modifiers.d.ts +7 -1
  5. package/dist/layout/modifiers.js +49 -3
  6. package/dist/layout/modifiers.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/layout/index.ts +9 -4
  9. package/src/layout/modifiers.ts +54 -3
package/dist/layout/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { LitElement, TemplateResult } from '@rxdi/lit-html';
2
2
  export declare class FlexLayout extends LitElement {
3
- self: LitElement;
3
+ child: LitElement;
4
4
  OnUpdate(): void;
5
+ private updateAttributes;
5
6
  static modifier(template: TemplateResult): TemplateResult;
6
7
  }
package/dist/layout/index.js CHANGED
@@ -14,21 +14,26 @@ const lit_html_1 = require("@rxdi/lit-html");
14
14
  const modifiers_1 = require("./modifiers");
15
15
  let FlexLayout = class FlexLayout extends lit_html_1.LitElement {
16
16
  OnUpdate() {
17
+ this.updateAttributes();
18
+ }
19
+ updateAttributes() {
20
+ var _a;
17
21
  const slot = this.shadowRoot.querySelector('slot');
18
- for (const div of [...slot === null || slot === void 0 ? void 0 : slot.assignedElements()]) {
19
- modifiers_1.recursion.call(this.self, div);
22
+ const elements = (_a = slot === null || slot === void 0 ? void 0 : slot.assignedElements()) !== null && _a !== void 0 ? _a : [];
23
+ for (const element of elements) {
24
+ modifiers_1.recursion.call(this.child, element);
20
25
  }
21
26
  }
22
27
  static modifier(template) {
23
28
  return lit_html_1.html `
24
- <flex-layout .self=${this}>${template}</flex-layout>
29
+ <flex-layout .child=${this}>${template}</flex-layout>
25
30
  `;
26
31
  }
27
32
  };
28
33
  __decorate([
29
34
  lit_html_1.property(),
30
35
  __metadata("design:type", lit_html_1.LitElement)
31
- ], FlexLayout.prototype, "self", void 0);
36
+ ], FlexLayout.prototype, "child", void 0);
32
37
  FlexLayout = __decorate([
33
38
  lit_html_1.Component({
34
39
  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,IAAI,EAAE,GAAY,CAAC,CAAC;SACzC;IACH,CAAC;IAEM,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;2BACY,IAAI,IAAI,QAAQ;KACtC,CAAC;IACJ,CAAC;CACF,CAAA;AAdC;IADC,mBAAQ,EAAE;8BACL,qBAAU;wCAAC;AAFN,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"}
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,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,gBAAgB;;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,MAAM,QAAQ,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,qCAAM,EAAE,CAAC;QAChD,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE;YAC9B,qBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;SACrC;IACH,CAAC;IAEM,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;4BACa,IAAI,IAAI,QAAQ;KACvC,CAAC;IACJ,CAAC;CACF,CAAA;AAnBC;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,CAqBtB;AArBY,gCAAU"}
package/dist/layout/modifiers.d.ts CHANGED
@@ -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'] = `${crossAxis} ${mainAxis}`;
20
- element.style['align-items'] = crossAxis;
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
  }
@@ -72,6 +110,14 @@ function recursion(div) {
72
110
  exports.subscribeToAttributeChanges(Attributes.FxFlexFill)(exports.setChildrensFlexFill)(div);
73
111
  }
74
112
  if (exports.isAttribute(fxLayout)) {
113
+ const observer = new MutationObserver(() => {
114
+ observer.disconnect();
115
+ recursion.call(this, div);
116
+ });
117
+ observer.observe(div, {
118
+ subtree: true,
119
+ childList: true
120
+ });
75
121
  exports.subscribeToAttributeChanges(Attributes.FxLayout)(exports.setFxLayout)(div);
76
122
  }
77
123
  if (exports.isAttribute(fxLayoutAlign)) {
package/dist/layout/modifiers.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../../src/layout/modifiers.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../../src/layout/modifiers.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rhtml/modifiers",
3
- "version": "0.0.90",
3
+ "version": "0.0.93",
4
4
  "description": "Reactive HyperText Markup Language",
5
5
  "scripts": {
6
6
  "start": "npx parcel ./examples/index.html --out-dir build/examples",
package/src/layout/index.ts CHANGED
@@ -18,18 +18,23 @@ import { recursion } from './modifiers';
18
18
  })
19
19
  export class FlexLayout extends LitElement {
20
20
  @property()
21
- self: LitElement;
21
+ child: LitElement;
22
22
 
23
23
  OnUpdate(): void {
24
+ this.updateAttributes();
25
+ }
26
+
27
+ private updateAttributes() {
24
28
  const slot = this.shadowRoot.querySelector('slot');
25
- for (const div of [...slot?.assignedElements()]) {
26
- recursion.call(this.self, div as never);
29
+ const elements = slot?.assignedElements() ?? [];
30
+ for (const element of elements) {
31
+ recursion.call(this.child, element);
27
32
  }
28
33
  }
29
34
 
30
35
  public static modifier(template: TemplateResult): TemplateResult {
31
36
  return html`
32
- <flex-layout .self=${this}>${template}</flex-layout>
37
+ <flex-layout .child=${this}>${template}</flex-layout>
33
38
  `;
34
39
  }
35
40
  }
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'] = `${crossAxis} ${mainAxis}`;
37
- element.style['align-items'] = crossAxis;
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
  }
@@ -100,6 +143,14 @@ export function recursion(div: HTMLElement) {
100
143
  }
101
144
 
102
145
  if (isAttribute(fxLayout)) {
146
+ const observer = new MutationObserver(() => {
147
+ observer.disconnect();
148
+ recursion.call(this, div);
149
+ });
150
+ observer.observe(div, {
151
+ subtree: true,
152
+ childList: true
153
+ });
103
154
  subscribeToAttributeChanges(Attributes.FxLayout)(setFxLayout)(div);
104
155
  }
105
156