mypgs 1.1.2 → 1.1.5

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 (24) hide show
  1. package/README.md +124 -11
  2. package/assets/javascript/components/_dropdown.js +3 -2
  3. package/assets/javascript/components/_stepTabs.js +1 -1
  4. package/assets/javascript/pgs.d.ts +47 -16
  5. package/assets/scss/components/_dropdown.scss +19 -26
  6. package/assets/scss/components/_tooltip.scss +9 -1
  7. package/assets/scss/mixin/_mx-button.scss +12 -12
  8. package/dist/css/index.css +86 -88
  9. package/dist/css/index.css.map +1 -1
  10. package/dist/css/index.min.css +1 -1
  11. package/dist/index.d.ts +45 -15
  12. package/dist/javascript/index.js +4 -3
  13. package/dist/javascript/index.js.map +1 -1
  14. package/dist/javascript/index.min.js +1 -1
  15. package/package.json +1 -1
  16. package/pgs-html-suggestions.vsix +0 -0
  17. package/templates/components/md-button.html +13 -7
  18. package/templates/components/md-card.html +11 -9
  19. package/templates/components/md-dropdown.html +1 -1
  20. package/templates/components/md-modal.html +4 -4
  21. package/templates/components/md-stepTabs.html +3 -3
  22. package/templates/components/md-tooltip.html +1 -0
  23. package/templates/demo.css +4 -0
  24. package/templates/demo.js +2 -2
package/README.md CHANGED
@@ -1,8 +1,12 @@
1
1
  # MyPGS
2
2
 
3
- Libreria frontend con asset JavaScript e CSS precompilati per i componenti e i pattern MyPGS.
3
+ Libreria frontend condivisa per componenti, layout e pattern basati sull'attributo `pgs`.
4
4
 
5
- ## Installazione
5
+ Contiene sorgenti SCSS, mixin, comportamenti JavaScript, template HTML di esempio e asset compilati pronti all'uso. Puo' essere usata sia importando direttamente CSS e JavaScript compilati, sia importando gli SCSS sorgenti dentro il build del progetto che la utilizza.
6
+
7
+ ## Installazione come dipendenza
8
+
9
+ Da registry npm, se pubblicata:
6
10
 
7
11
  ```bash
8
12
  npm install mypgs
@@ -10,24 +14,133 @@ npm install mypgs
10
14
 
11
15
  ## Utilizzo
12
16
 
13
- Importa gli asset compilati nel tuo progetto:
17
+ ### JavaScript
18
+
19
+ Importa la libreria nell'entrypoint JavaScript del progetto:
14
20
 
15
21
  ```js
16
- import "mypgs";
17
- import "mypgs/style.css";
22
+ import * as mypgs from "mypgs";
23
+ ```
24
+
25
+ L'entrypoint di MyPGS inizializza:
26
+
27
+ - helper globale `pgs`
28
+ - dark mode
29
+ - gestione oggetti PGS
30
+ - accordion
31
+ - dropdown
32
+ - menu
33
+ - modali
34
+ - slides
35
+ - steps
36
+ - step tabs
37
+ - notifiche
38
+ - header
39
+ - cookie consent
40
+
41
+ Il bundle finale viene generato dal progetto che importa `mypgs`, in base alla propria configurazione Webpack o al proprio bundler.
42
+
43
+ ### SCSS
44
+
45
+ Per integrare MyPGS nel build SCSS del progetto, importa mixin e stili sorgenti da `node_modules`:
46
+
47
+ ```scss
48
+ @import "../../node_modules/mypgs/assets/scss/mixin/mixin.scss";
49
+ @import "../../node_modules/mypgs/assets/scss/index.scss";
18
50
  ```
19
51
 
20
- Lo script inizializza le funzionalita' globali della libreria ed espone `pgs` su `globalThis`.
52
+ Se servono solo i mixin, importa solo il file dedicato:
53
+
54
+ ```scss
55
+ @import "../../node_modules/mypgs/assets/scss/mixin/mixin.scss";
56
+ ```
57
+
58
+ Molti layout, componenti e pattern sono inclusi sotto `[pgs~=initP]`, quindi il markup principale deve abilitare la libreria così:
59
+
60
+ ```html
61
+ <html pgs="htmlBase initP">
62
+ <body pgs="bodyBase bodyImg bodyText bodyHeading">
63
+ ```
64
+
65
+ ## Markup PGS
66
+
67
+ I componenti vengono attivati usando token nell'attributo `pgs`, per esempio:
68
+
69
+ ```html
70
+ <nav pgs="menuHorizontal"></nav>
71
+ <button pgs="button modal-button"></button>
72
+ <div pgs="accordion">
73
+ <button pgs="accordion-button"></button>
74
+ <div pgs="accordion-content"></div>
75
+ </div>
76
+ ```
77
+
78
+ Gli stessi token devono restare coerenti tra markup, SCSS e JavaScript.
21
79
 
22
80
  ## Contenuto del pacchetto
23
81
 
24
- - `dist/javascript/index.js`
25
- - `dist/javascript/index.min.js`
26
- - `dist/css/index.css`
27
- - `dist/css/index.min.css`
82
+ - `assets/scss/`: sorgenti SCSS, mixin, base, layout, componenti e pattern
83
+ - `assets/javascript/`: sorgenti JavaScript dei comportamenti PGS
84
+ - `templates/`: esempi HTML dei componenti e dei layout
85
+ - `dist/javascript/index.js`: bundle JavaScript non minificato
86
+ - `dist/javascript/index.min.js`: bundle JavaScript minificato
87
+ - `dist/css/index.css`: CSS compilato non minificato
88
+ - `dist/css/index.min.css`: CSS compilato minificato
89
+ - `dist/index.d.ts`: dichiarazioni TypeScript esportate dal pacchetto
90
+
91
+ ## Export npm
92
+
93
+ Il pacchetto espone:
94
+
95
+ ```json
96
+ {
97
+ ".": "./dist/javascript/index.js",
98
+ "./style.css": "./dist/css/index.css",
99
+ "./style.min.css": "./dist/css/index.min.css"
100
+ }
101
+ ```
102
+
103
+ Uso diretto degli asset compilati:
104
+
105
+ ```js
106
+ import "mypgs";
107
+ import "mypgs/style.css";
108
+ ```
109
+
110
+ In alternativa, puoi importare gli SCSS sorgenti direttamente nel build del progetto quando vuoi ottenere un unico CSS finale.
28
111
 
29
112
  ## Sviluppo
30
113
 
114
+ Build una tantum:
115
+
31
116
  ```bash
32
- npm run build
117
+ npm run start
33
118
  ```
119
+
120
+ Build in watch mode:
121
+
122
+ ```bash
123
+ npm run "start watch"
124
+ ```
125
+
126
+ Per preparare un archivio locale installabile in un altro progetto:
127
+
128
+ ```bash
129
+ npm pack
130
+ ```
131
+
132
+ Quando modifichi MyPGS e vuoi provarlo in un progetto che la usa:
133
+
134
+ 1. ricompila MyPGS con `npm run start`
135
+ 2. crea un nuovo archivio con `npm pack`
136
+ 3. copia o aggiorna il `.tgz` usato dal progetto
137
+ 4. esegui `npm install` nel progetto
138
+ 5. ricompila il progetto
139
+
140
+ ## Convenzioni
141
+
142
+ - Usa l'attributo `pgs` per collegare markup, CSS e JavaScript.
143
+ - Mantieni i token PGS coerenti tra template HTML, componenti, moduli e script.
144
+ - Metti in MyPGS solo stili e comportamenti riutilizzabili.
145
+ - Mantieni nel progetto finale gli stili e le personalizzazioni specifiche.
146
+ - Esporta in `dist/` prima di creare il pacchetto locale `.tgz`.
package/assets/javascript/components/_dropdown.js CHANGED
@@ -34,9 +34,10 @@ export function pgs_dropdown() {
34
34
  CSS.supports("position-anchor: --dropdown-anchor") &&
35
35
  CSS.supports("position-area: bottom") &&
36
36
  CSS.supports("top: anchor(bottom)");
37
+ const USE_FALLBACK_POSITIONING = pgs(DROPDOWN).contains("tooltip") || !HAS_ANCHOR_POSITIONING;
37
38
 
38
39
  const updatePopoverPosition = () => {
39
- if (HAS_ANCHOR_POSITIONING) return;
40
+ if (!USE_FALLBACK_POSITIONING) return;
40
41
 
41
42
  const buttonRect = BUTTON.getBoundingClientRect();
42
43
  const style = getComputedStyle(DROPDOWN);
@@ -71,7 +72,7 @@ export function pgs_dropdown() {
71
72
  };
72
73
 
73
74
  BUTTON.addEventListener("click", e => {
74
- if (HAS_ANCHOR_POSITIONING) return;
75
+ if (!USE_FALLBACK_POSITIONING) return;
75
76
 
76
77
  e.preventDefault();
77
78
  if (CONTENT.matches(":popover-open")) {
package/assets/javascript/components/_stepTabs.js CHANGED
@@ -29,7 +29,7 @@ export function PGS_stepTabs() {
29
29
  dots.innerHTML = "";
30
30
 
31
31
  allTab.forEach((tab, index) => {
32
- const iconClass = tab.getAttribute("data-tab-icon") || "fa-circle";
32
+ const iconClass = pgs(tab).option.getValueBrackets("tabIcon") || "fa-circle";
33
33
  const dot = document.createElement("button");
34
34
  dot.type = "button";
35
35
  pgs(dot).add("stepTabs-dots-dot");
package/assets/javascript/pgs.d.ts CHANGED
@@ -1,23 +1,54 @@
1
1
  declare global {
2
- interface PgsBag {
3
- add: (...values: string[]) => void;
4
- remove: (...values: string[]) => void;
5
- toggle: (value: string) => boolean;
6
- contains: (value: string) => boolean;
7
- value: string;
8
- querySelector: (value: string | string[]) => Element | null;
9
- querySelectorAll: (value: string | string[]) => NodeListOf<Element>;
2
+ type PgsSelectorValue = string | string[];
3
+ type PgsStateValue = string | string[];
4
+
5
+ interface PgsQueryableApi {
6
+ querySelector(value: PgsSelectorValue): Element | null;
7
+ querySelectorAll(value: PgsSelectorValue): NodeListOf<Element>;
8
+ }
9
+
10
+ interface PgsStateApi {
11
+ (...values: PgsStateValue[]): PgsStateApi;
12
+ add(...values: PgsStateValue[]): PgsStateApi;
13
+ remove(...values: PgsStateValue[]): PgsStateApi;
14
+ toggle(value: string, force?: boolean): boolean;
15
+ contains(value: string): boolean;
16
+ value: string | null;
10
17
  }
11
18
 
12
- interface Element {
13
- pgs: PgsBag;
19
+ interface PgsOptionApi {
20
+ contains(key: string): boolean;
21
+ getValueBrackets(key: string): string | undefined;
22
+ value: string | null;
14
23
  }
15
24
 
16
- interface Document {
17
- pgs: {
18
- querySelector: (value: string | string[]) => Element | null;
19
- querySelectorAll: (value: string | string[]) => NodeListOf<Element>;
20
- };
25
+ interface PgsElementApi extends PgsQueryableApi {
26
+ (): PgsElementApi;
27
+ add(...values: string[]): PgsElementApi;
28
+ remove(...values: string[]): PgsElementApi;
29
+ toggle(value: string, force?: boolean): boolean;
30
+ contains(value: string): boolean;
31
+ value: string | null;
32
+ state: PgsStateApi;
33
+ option: PgsOptionApi;
34
+ modules: PgsOptionApi;
21
35
  }
36
+
37
+ interface PgsDocumentApi extends PgsQueryableApi {
38
+ (): PgsDocumentApi;
39
+ }
40
+
41
+ type PgsApi = PgsElementApi | PgsDocumentApi;
42
+
43
+ interface PgsFunction {
44
+ (root: Document): PgsDocumentApi;
45
+ (root: Element): PgsElementApi;
46
+ (root: Document | Element): PgsApi;
47
+ }
48
+
49
+ interface PgsBag extends PgsElementApi {}
50
+
51
+ var pgs: PgsFunction;
22
52
  }
23
- export {};
53
+
54
+ export {};
package/assets/scss/components/_dropdown.scss CHANGED
@@ -14,15 +14,25 @@
14
14
  position: relative;
15
15
  display: inline-block;
16
16
 
17
+ &[pgs-state~=open] {
18
+ [pgs~="dropdown-content"] {
19
+ transition: opacity .3s ease;
20
+ opacity: 1;
21
+ pointer-events: auto;
22
+
23
+ &::backdrop {
24
+ background: var(--backdrop);
25
+ }
26
+ }
27
+ }
28
+
17
29
  //= CONTENT
18
30
  [pgs~="dropdown-content"] {
19
- visibility: hidden;
31
+ // start view
32
+ display: flex;
20
33
  opacity: 0;
21
- max-height: 0;
22
- transition:
23
- opacity 200ms ease-in-out,
24
- visibility 200ms ease-in-out,
25
- max-height 100ms ease-in-out;
34
+ pointer-events: none;
35
+ // end view
26
36
  transition-behavior: allow-discrete;
27
37
  border: none;
28
38
  border-radius: calc(var(--border-radius-input) + var(--dropdown-padding));
@@ -33,9 +43,9 @@
33
43
  background: var(--dropdown-background);
34
44
  overflow: initial;
35
45
  z-index: -1;
36
- // overflow: clip;
46
+ margin-top: var(--dropdown-offset);
47
+ padding: var(--dropdown-padding);
37
48
  @include flexColumn;
38
- height: 0;
39
49
 
40
50
  &::before {
41
51
  content: "";
@@ -49,19 +59,6 @@
49
59
  pointer-events: none;
50
60
  z-index: 0;
51
61
  }
52
-
53
- &:popover-open {
54
- margin-top: var(--dropdown-offset);
55
- padding: var(--dropdown-padding);
56
- visibility: visible;
57
- opacity: 1;
58
- max-height: max-content;
59
- height: unset;
60
-
61
- &::backdrop {
62
- background: var(--backdrop);
63
- }
64
- }
65
62
  }
66
63
 
67
64
  //-(LEGACY (default fallback)
@@ -74,10 +71,6 @@
74
71
  right: auto;
75
72
  max-height: var(--dropdown-fallback-max-height);
76
73
  overflow: visible;
77
-
78
- &:popover-open {
79
- margin-top: 0;
80
- }
81
74
  }
82
75
  }
83
76
 
@@ -103,4 +96,4 @@
103
96
  }
104
97
  }
105
98
  }
106
- }
99
+ }
package/assets/scss/components/_tooltip.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  [pgs~="tooltip"][pgs~="dropdown"] {
2
2
  --dropdown-position-right: center;
3
3
  --dropdown-maxwidth: 400px;
4
+ --dropdown-padding: 15px;
4
5
 
5
6
  [pgs~="tooltip-button"][pgs~="dropdown-button"] {
6
7
  // --button-background: var(--color-black);
@@ -8,6 +9,13 @@
8
9
  }
9
10
 
10
11
  [pgs~="tooltip-content"][pgs~="dropdown-content"]:popover-open {
11
- padding: 15px;
12
+ position: fixed;
13
+ position-anchor: unset;
14
+ position-area: unset;
15
+ inset: auto;
16
+ top: var(--dropdown-fallback-top);
17
+ left: var(--dropdown-fallback-left);
18
+ right: auto;
19
+ margin-top: 0;
12
20
  }
13
21
  }
package/assets/scss/mixin/_mx-button.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  --button-background#{$for}: #{$background};
12
12
  color: var(--button-color#{$for});
13
13
  background: var(--button-background#{$for});
14
-
14
+
15
15
  &:is(a) {
16
16
  color: var(--button-color#{$for});
17
17
  }
@@ -46,11 +46,11 @@
46
46
  outline: var(--button-border);
47
47
  border-radius: var(--border-radius-input);
48
48
  display: flex;
49
- gap: calc(var(--button-size)/2);
49
+ gap: calc(var(--button-size)/1.5);
50
50
  align-items: center;
51
51
  padding: var(--button-padding);
52
- width: max-content;
53
52
  height: max-content;
53
+ width: max-content;
54
54
  margin-block: auto;
55
55
 
56
56
  //== onlyIcon
@@ -74,7 +74,7 @@
74
74
 
75
75
  @else {
76
76
  $button-right: calc(var(--button-size) * 2);
77
- $button-left: calc(var(--button-size) * 1.4);
77
+ $button-left: calc(var(--button-size) * 1.5);
78
78
 
79
79
  &:has(i) {
80
80
  --button-padding-right: #{$button-right};
@@ -158,7 +158,7 @@
158
158
  aspect-ratio: 1;
159
159
  }
160
160
 
161
- //== Button BIG
161
+ //= Button BIG
162
162
  @mixin buttonBig($hover: true) {
163
163
  @include button($hover);
164
164
  position: relative;
@@ -183,20 +183,20 @@
183
183
  }
184
184
 
185
185
  //= Button CLOSE
186
- @mixin buttonClose {
186
+ @mixin buttonClose($important: false) {
187
187
  @include button(true, true);
188
- --button-background: var(--color-error-background);
189
- --button-color: var(--color-error);
188
+ --button-background: var(--color-primary-soft);
190
189
  --button-size: 1rem;
191
190
  --button-icon-size: 1.3rem;
192
191
  aspect-ratio: 1;
193
192
  height: max-content;
194
193
 
195
- &:hover {}
196
-
197
- i {
198
- color: var(--color-error);
194
+ @if($important ==true) {
195
+ --button-background: var(--color-error-background);
196
+ --button-color: var(--color-error);
199
197
  }
198
+
199
+ &:hover {}
200
200
  }
201
201
 
202
202
  //= button header