@massimo-cassandro/minimo 1.5.0 → 1.5.1

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 (8) hide show
  1. package/design-tokens/modal-popup.minimo.tokens.jsonc +44 -0
  2. package/design-tokens-src/modal-popup.minimo.tokens.mjs +44 -0
  3. package/index.js +1 -0
  4. package/package.json +1 -1
  5. package/src/components/modal-popup/modal-popup.js +6 -3
  6. package/src/components/modal-popup/modal-popup.module.css +23 -7
  7. package/src/custom-properties.css +8 -0
  8. package/src/utilities/dom-builder/dom-builder.js +4 -1
package/design-tokens/modal-popup.minimo.tokens.jsonc CHANGED
@@ -33,6 +33,50 @@
33
33
  "$type": "dimension",
34
34
  "$value": "1.6rem"
35
35
  }
36
+ },
37
+ "header": {
38
+ "padding": {
39
+ "$type": "dimension",
40
+ "$value": "{size.xs}"
41
+ },
42
+ "color": {
43
+ "$type": "color",
44
+ "$value": "{text.color}"
45
+ },
46
+ "background": {
47
+ "color": {
48
+ "$type": "color",
49
+ "$value": "#ddd"
50
+ }
51
+ },
52
+ "font": {
53
+ "size": {
54
+ "$type": "dimension",
55
+ "$value": "{font.size.xl}"
56
+ }
57
+ }
58
+ },
59
+ "footer": {
60
+ "padding": {
61
+ "$type": "dimension",
62
+ "$value": "{size.xs}"
63
+ },
64
+ "color": {
65
+ "$type": "color",
66
+ "$value": "{text.color}"
67
+ },
68
+ "background": {
69
+ "color": {
70
+ "$type": "color",
71
+ "$value": "#ddd"
72
+ }
73
+ },
74
+ "font": {
75
+ "size": {
76
+ "$type": "dimension",
77
+ "$value": "{font.size.base}"
78
+ }
79
+ }
36
80
  }
37
81
  }
38
82
  }
package/design-tokens-src/modal-popup.minimo.tokens.mjs CHANGED
@@ -29,6 +29,50 @@ export default {
29
29
  $value: '1.6rem'
30
30
  }
31
31
 
32
+ },
33
+ header: {
34
+ padding: {
35
+ $type: 'dimension',
36
+ $value: '{size.xs}',
37
+ },
38
+ color: {
39
+ $type: 'color',
40
+ $value: '{text.color}'
41
+ },
42
+ background: {
43
+ color: {
44
+ $type: 'color',
45
+ $value: '#ddd'
46
+ }
47
+ },
48
+ font: {
49
+ size: {
50
+ $type: 'dimension',
51
+ $value: '{font.size.xl}'
52
+ }
53
+ }
54
+ },
55
+ footer: {
56
+ padding: {
57
+ $type: 'dimension',
58
+ $value: '{size.xs}',
59
+ },
60
+ color: {
61
+ $type: 'color',
62
+ $value: '{text.color}'
63
+ },
64
+ background: {
65
+ color: {
66
+ $type: 'color',
67
+ $value: '#ddd'
68
+ }
69
+ },
70
+ font: {
71
+ size: {
72
+ $type: 'dimension',
73
+ $value: '{font.size.base}'
74
+ }
75
+ }
32
76
  }
33
77
  }
34
78
  };
package/index.js CHANGED
@@ -15,4 +15,5 @@ export { innerNav } from './src/components/inner-nav/inner-nav.js';
15
15
  export { overlay, removeOverlay } from './src/components/overlay/overlay.js';
16
16
  export { sf_macro } from './src/components/sf-macro/sf-macro.js';
17
17
  export { snackbar } from './src/components/snackbar/snackbar.js';
18
+ export { modalPopup } from './src/components/modal-popup/modal-popup.js';
18
19
  export { unsplashPageJS } from './src/components/unsplash-page/unsplash-page.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@massimo-cassandro/minimo",
3
- "version": "1.5.0",
3
+ "version": "1.5.1",
4
4
  "description": "Light css framework & utilities",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/massimo-cassandro/minimo#readme",
package/src/components/modal-popup/modal-popup.js CHANGED
@@ -6,6 +6,9 @@ import * as styles from './modal-popup.module.css';
6
6
 
7
7
  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
8
8
 
9
+
10
+ // TODO testare la modalità iframe
11
+
9
12
  let dialogEl, dialogContentEl;
10
13
 
11
14
  function closeDialog() {
@@ -104,7 +107,7 @@ export function modalPopup({
104
107
  className: styles.contentWrapper,
105
108
  children: [
106
109
  {
107
- classname: styles.header,
110
+ className: styles.header,
108
111
  condition: headerContent != null,
109
112
  content: headerContent
110
113
  },
@@ -137,7 +140,7 @@ export function modalPopup({
137
140
  (async () => {
138
141
  const response = await fetch(ajaxUrl),
139
142
  data = await response.json();
140
-
143
+ el.innerHTML = '';
141
144
  ajaxCallback(data, dialogContentEl);
142
145
  })();
143
146
 
@@ -152,7 +155,7 @@ export function modalPopup({
152
155
  },
153
156
  },
154
157
  {
155
- classname: styles.footer,
158
+ className: styles.footer,
156
159
  condition: footerContent != null,
157
160
  content: footerContent
158
161
  },
package/src/components/modal-popup/modal-popup.module.css CHANGED
@@ -4,11 +4,13 @@ NB:
4
4
  but can be set with a desired value caso per caso
5
5
 
6
6
  */
7
+
7
8
  .dialog {
8
9
 
9
10
  position: fixed;
10
11
 
11
- display: block;
12
+ display: flex;
13
+ flex-direction: column;
12
14
 
13
15
  width: var(--_modal-popup-width, max-content);
14
16
  min-width: 400px;
@@ -46,17 +48,19 @@ but can be set with a desired value caso per caso
46
48
 
47
49
  .contentWrapper {
48
50
  display: flex;
51
+ flex: 1;
49
52
  flex-flow: column nowrap;
50
53
  gap: 0;
51
- align-items: flex-start;
54
+ align-items: stretch;
52
55
  justify-content: flex-start;
56
+ min-height: 0;
53
57
  }
54
58
 
55
59
 
56
60
  .content {
57
61
  flex: 1;
58
- width: 100%;
59
- height: 100%;
62
+ /* width: 100%;
63
+ height: 100%; */
60
64
  min-height: 0;
61
65
  padding: var(--size-base) var(--size-sm) var(--size-sm);
62
66
  overflow-x: hidden;
@@ -78,11 +82,23 @@ but can be set with a desired value caso per caso
78
82
  border: none;
79
83
  }
80
84
 
81
-
82
85
  .header {
83
-
86
+ padding: var(--modal-popup-header-padding);
87
+ font-size: var(--modal-popup-header-font-size);
88
+ color: var(--modal-popup-header-color);
89
+ background-color: var(--modal-popup-header-background-color);
90
+ border-radius: var(--modal-popup-border-radius) var(--modal-popup-border-radius) 0 0;
84
91
  }
85
-
86
92
  .footer {
93
+ padding: var(--modal-popup-footer-padding);
94
+ font-size: var(--modal-popup-footer-font-size);
95
+ color: var(--modal-popup-footer-color);
96
+ background-color: var(--modal-popup-footer-background-color);
97
+ border-radius: 0 0 var(--modal-popup-border-radius) var(--modal-popup-border-radius);
98
+ }
87
99
 
100
+ .header, .footer {
101
+ * {
102
+ color: inherit;
103
+ }
88
104
  }
package/src/custom-properties.css CHANGED
@@ -194,6 +194,14 @@
194
194
  --modal-popup-border-radius: var(--size-base);
195
195
  --modal-popup-btn-close-size: 1.6rem;
196
196
  --modal-popup-drop-shadow: 0 0 .75rem .125rem rgb(0 0 0 / .25);
197
+ --modal-popup-footer-background-color: #ddd;
198
+ --modal-popup-footer-color: var(--text-color);
199
+ --modal-popup-footer-font-size: var(--font-size-base);
200
+ --modal-popup-footer-padding: var(--size-xs);
201
+ --modal-popup-header-background-color: #ddd;
202
+ --modal-popup-header-color: var(--text-color);
203
+ --modal-popup-header-font-size: var(--font-size-xl);
204
+ --modal-popup-header-padding: var(--size-xs);
197
205
  --neutral-100: #666;
198
206
  --neutral-100-fg: #fff;
199
207
  --overlay-color: rgb(0 0 0 / .6);
package/src/utilities/dom-builder/dom-builder.js CHANGED
@@ -23,7 +23,7 @@ import { parseDomString } from './parseDomString.js';
23
23
  * className: 'xxx' | ['class1', 'class2'], // anche `class`
24
24
  * id: 'element-id',
25
25
  * attrs: [attr_name, attr_value] | [[...], [...]] | {name: value},
26
- * content: 'xxx' | 123 | function | Element,
26
+ * content: 'xxx' | 123 | domBuilder Array | function | Element,
27
27
  * condition: true | false,
28
28
  * callback: el => ...,
29
29
  * children: [...]
@@ -137,6 +137,9 @@ export function domBuilder(structureArray = [], parent, options = {}) {
137
137
  if (typeof item.content === 'function') {
138
138
  content = item.content();
139
139
 
140
+ } else if (Array.isArray(item.content)) {
141
+ content = domBuilder(item.content);
142
+
140
143
  } else if (item.content != null) {
141
144
  content = String(item.content);
142
145
  }