@jumpgroup/jump-design-system 0.3.30 → 0.3.32
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/cjs/jump-design-system.cjs.js +1 -1
- package/dist/cjs/jump-filter.cjs.entry.js +1 -1
- package/dist/cjs/jump-filter.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-navbar.cjs.entry.js +45 -0
- package/dist/cjs/jump-navbar.cjs.entry.js.map +1 -0
- package/dist/cjs/jump-pagination-table.cjs.entry.js +3 -3
- package/dist/cjs/jump-pagination.cjs.entry.js +3 -3
- package/dist/cjs/jump-quantity.cjs.entry.js +3 -3
- package/dist/cjs/jump-tab-item.cjs.entry.js +3 -4
- package/dist/cjs/jump-tab-item.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/jump-tab.cjs.entry.js +4 -2
- package/dist/cjs/jump-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/jump-filter/jump-filter.css +1 -1
- package/dist/collection/components/jump-navbar/jump-navbar.css +13 -0
- package/dist/collection/components/jump-navbar/jump-navbar.js +260 -0
- package/dist/collection/components/jump-navbar/jump-navbar.js.map +1 -0
- package/dist/collection/components/jump-pagination/jump-pagination.js +3 -3
- package/dist/collection/components/jump-pagination-table/jump-pagination-table.js +3 -3
- package/dist/collection/components/jump-quantity/jump-quantity.js +3 -3
- package/dist/collection/components/jump-tab/jump-tab.css +28 -0
- package/dist/collection/components/jump-tab/jump-tab.js +39 -1
- package/dist/collection/components/jump-tab/jump-tab.js.map +1 -1
- package/dist/collection/components/jump-tab/jump-tab.stories.js +28 -5
- package/dist/collection/components/jump-tab/jump-tab.stories.js.map +1 -1
- package/dist/collection/components/jump-tab-item/jump-tab-item.css +5 -2
- package/dist/collection/components/jump-tab-item/jump-tab-item.js +2 -3
- package/dist/collection/components/jump-tab-item/jump-tab-item.js.map +1 -1
- package/dist/collection/components/jump-tab-panel/jump-tab-panel.js +1 -1
- package/dist/components/jump-filter.js +1 -1
- package/dist/components/jump-filter.js.map +1 -1
- package/dist/components/jump-navbar.d.ts +11 -0
- package/dist/components/jump-navbar.js +84 -0
- package/dist/components/jump-navbar.js.map +1 -0
- package/dist/components/jump-pagination-table.js +3 -3
- package/dist/components/jump-pagination.js +3 -3
- package/dist/components/jump-quantity.js +3 -3
- package/dist/components/jump-tab-item.js +3 -4
- package/dist/components/jump-tab-item.js.map +1 -1
- package/dist/components/jump-tab-panel.js +1 -1
- package/dist/components/jump-tab.js +6 -2
- package/dist/components/jump-tab.js.map +1 -1
- package/dist/esm/jump-design-system.js +1 -1
- package/dist/esm/jump-filter.entry.js +1 -1
- package/dist/esm/jump-filter.entry.js.map +1 -1
- package/dist/esm/jump-navbar.entry.js +41 -0
- package/dist/esm/jump-navbar.entry.js.map +1 -0
- package/dist/esm/jump-pagination-table.entry.js +3 -3
- package/dist/esm/jump-pagination.entry.js +3 -3
- package/dist/esm/jump-quantity.entry.js +3 -3
- package/dist/esm/jump-tab-item.entry.js +3 -4
- package/dist/esm/jump-tab-item.entry.js.map +1 -1
- package/dist/esm/jump-tab-panel.entry.js +1 -1
- package/dist/esm/jump-tab.entry.js +4 -2
- package/dist/esm/jump-tab.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
- package/dist/jump-design-system/p-108990a7.entry.js +2 -0
- package/dist/jump-design-system/p-108990a7.entry.js.map +1 -0
- package/dist/jump-design-system/p-1a8f69e1.entry.js +2 -0
- package/dist/jump-design-system/p-1a8f69e1.entry.js.map +1 -0
- package/dist/jump-design-system/p-2c95396a.entry.js +2 -0
- package/dist/jump-design-system/p-5e08bb4a.entry.js +2 -0
- package/dist/jump-design-system/p-5e08bb4a.entry.js.map +1 -0
- package/dist/jump-design-system/{p-d93e4ed5.entry.js → p-7b854194.entry.js} +2 -2
- package/dist/jump-design-system/{p-3094f68c.entry.js → p-80d94f0f.entry.js} +2 -2
- package/dist/jump-design-system/p-81fdf870.entry.js +2 -0
- package/dist/jump-design-system/p-81fdf870.entry.js.map +1 -0
- package/dist/jump-design-system/{p-f3c9fa96.entry.js → p-dbff34ba.entry.js} +2 -2
- package/dist/jump-design-system-elements.json +71 -0
- package/dist/types/components/jump-navbar/jump-navbar.d.ts +47 -0
- package/dist/types/components/jump-tab/jump-tab.d.ts +5 -0
- package/dist/types/components/jump-tab/jump-tab.stories.d.ts +12 -0
- package/dist/types/components.d.ts +105 -0
- package/package.json +1 -1
- package/dist/jump-design-system/p-188c7c2e.entry.js +0 -2
- package/dist/jump-design-system/p-188c7c2e.entry.js.map +0 -1
- package/dist/jump-design-system/p-21a38875.entry.js +0 -2
- package/dist/jump-design-system/p-21a38875.entry.js.map +0 -1
- package/dist/jump-design-system/p-62b52857.entry.js +0 -2
- package/dist/jump-design-system/p-eebee8f5.entry.js +0 -2
- package/dist/jump-design-system/p-eebee8f5.entry.js.map +0 -1
- /package/dist/jump-design-system/{p-62b52857.entry.js.map → p-2c95396a.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-d93e4ed5.entry.js.map → p-7b854194.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-3094f68c.entry.js.map → p-80d94f0f.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-f3c9fa96.entry.js.map → p-dbff34ba.entry.js.map} +0 -0
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
import { Host, h } from "@stencil/core";
|
|
2
|
+
export class JumpNavbar {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.logo = { image_url: '', alt: '', link: '#', target: '_self' };
|
|
5
|
+
this.navItems = [];
|
|
6
|
+
this.secondaryNavItems = [];
|
|
7
|
+
this.mobileThreshold = 768;
|
|
8
|
+
this.type = 'basic';
|
|
9
|
+
this.navPosition = 'inline';
|
|
10
|
+
this.megaMenuAlignment = 'left';
|
|
11
|
+
this.sticky = false;
|
|
12
|
+
this.stickyThreshold = 0;
|
|
13
|
+
this.mobileLogo = this.logo;
|
|
14
|
+
this.user = null;
|
|
15
|
+
this.isMobile = false;
|
|
16
|
+
}
|
|
17
|
+
handleResize() {
|
|
18
|
+
this.isMobile = window.innerWidth < this.mobileThreshold;
|
|
19
|
+
}
|
|
20
|
+
render() {
|
|
21
|
+
var _a, _b;
|
|
22
|
+
return (h(Host, { key: '87fa483a27dc0314a3fadcc0b7c4cf61013ad98d' }, h("jump-button", { key: 'b2756659bde1018ea284a59d0919729e593364ac', variant: "primary", size: "small", text: true, href: this.logo['link'], target: (_a = this.logo['target']) !== null && _a !== void 0 ? _a : '_self' }, h("img", { key: 'b3b7d8f6028d16d0967d7fdb71068cd9f2a0636c', src: this.logo['image_url'], alt: this.logo['alt'] })), this.isMobile &&
|
|
23
|
+
h("div", { key: '9ff3e44a80259536f2bbb58ccc6be5967a3dc189', class: "MobileMenuOffCanvas" }, h("div", { key: 'c8e35bfbea3eb84d9df53fe8f18fa5cdccfe31c0', class: "MobileMenuOffCanvas__Header" }, "/* TODO: ricerca + pulsante chiusura + profilo utente con immagine */"), h("div", { key: 'ac6ad3c511ce635f4aa541a8326e97a77d3c4f2b', class: "MobileMenuOffCanvas__Navbar" }, this.navbar.cloneNode(true)), h("div", { key: 'f0f1ef266da0efa437c08df92a7d481b68892329', class: "MobileMenuOffCanvas__Footer" }, "/* TODO: langswitcher */", this.mobileLogo &&
|
|
24
|
+
h("jump-button", { key: '6eaa0a821b15ea28e8a8672e03cf51c5e57a1ca1', variant: "primary", size: "small", text: true, href: this.mobileLogo['link'], target: (_b = this.mobileLogo['target']) !== null && _b !== void 0 ? _b : '_self' }, h("img", { key: '7ef8f3187b555bc27172d062fb19a20423409bbc', src: this.mobileLogo['image_url'], alt: this.mobileLogo['alt'] })))), h("nav", { key: 'ab7a9bcbd9e907448a6dc393f1efa32e80752856', ref: (el) => {
|
|
25
|
+
this.navbar = el;
|
|
26
|
+
} }, h("ul", { key: '70c90191941c1b371218a69216f30921c5e097af' }, this.navItems.map((item) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: item.link, target: item.target, class: item.class }, item.text, this.secondaryNavItems.some(secondaryItem => secondaryItem.parent === item.id) &&
|
|
27
|
+
h("jump-icon", { slot: "suffix", library: "lucide", name: "chevron-down", size: "small" })), this.secondaryNavItems.map((secondaryItem) => (secondaryItem.parent === item.id &&
|
|
28
|
+
h("ul", { "data-parent": secondaryItem.parent }, secondaryItem.title &&
|
|
29
|
+
h("h4", null, secondaryItem.title), " /* TODO: utilizzare jump-heading? */", secondaryItem.items.map((subItem) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: subItem.link, target: subItem.target, class: subItem.class }, subItem.text)))))))))))), h("slot", { key: '7edb581eab5c8942b9670129f893e92eefe9b5f3', name: "actions" }, h("slot", { key: '9e1eaf7c15bd2767d78d00a594a28f1d867ebb6d', name: "lang_switcher" }), h("slot", { key: '9cff169f4012c9dc87e9b6b78497f3c0e53dae58', name: "search" }), h("slot", { key: '465d61b9266c7ff12cfd434decd44579b84ab908', name: "buttons" }), h("slot", { key: 'c7e66e9bc83921f327f4f7fe74e3e68ac3d4a44a', name: "cart" }))));
|
|
30
|
+
}
|
|
31
|
+
static get is() { return "jump-navbar"; }
|
|
32
|
+
static get encapsulation() { return "shadow"; }
|
|
33
|
+
static get originalStyleUrls() {
|
|
34
|
+
return {
|
|
35
|
+
"$": ["jump-navbar.scss"]
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
static get styleUrls() {
|
|
39
|
+
return {
|
|
40
|
+
"$": ["jump-navbar.css"]
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
static get properties() {
|
|
44
|
+
return {
|
|
45
|
+
"logo": {
|
|
46
|
+
"type": "unknown",
|
|
47
|
+
"mutable": false,
|
|
48
|
+
"complexType": {
|
|
49
|
+
"original": "{\n image_url: string,\n alt: string,\n link: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n }",
|
|
50
|
+
"resolved": "{ image_url: string; alt: string; link: string; target: \"_blank\" | \"_parent\" | \"_self\" | \"_top\"; }",
|
|
51
|
+
"references": {}
|
|
52
|
+
},
|
|
53
|
+
"required": false,
|
|
54
|
+
"optional": false,
|
|
55
|
+
"docs": {
|
|
56
|
+
"tags": [],
|
|
57
|
+
"text": ""
|
|
58
|
+
},
|
|
59
|
+
"defaultValue": "{ image_url: '', alt: '', link: '#', target: '_self' }"
|
|
60
|
+
},
|
|
61
|
+
"navItems": {
|
|
62
|
+
"type": "unknown",
|
|
63
|
+
"mutable": false,
|
|
64
|
+
"complexType": {
|
|
65
|
+
"original": "Array<{\n id: string,\n text: string,\n link: string,\n class: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n }>",
|
|
66
|
+
"resolved": "{ id: string; text: string; link: string; class: string; target: \"_blank\" | \"_parent\" | \"_self\" | \"_top\"; }[]",
|
|
67
|
+
"references": {
|
|
68
|
+
"Array": {
|
|
69
|
+
"location": "global",
|
|
70
|
+
"id": "global::Array"
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
"required": false,
|
|
75
|
+
"optional": false,
|
|
76
|
+
"docs": {
|
|
77
|
+
"tags": [],
|
|
78
|
+
"text": ""
|
|
79
|
+
},
|
|
80
|
+
"defaultValue": "[]"
|
|
81
|
+
},
|
|
82
|
+
"secondaryNavItems": {
|
|
83
|
+
"type": "unknown",
|
|
84
|
+
"mutable": false,
|
|
85
|
+
"complexType": {
|
|
86
|
+
"original": "Array<{\n parent: string | null,\n title: string | null,\n items: Array<{\n text: string,\n link: string,\n class: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n }>\n }>",
|
|
87
|
+
"resolved": "{ parent: string; title: string; items: { text: string; link: string; class: string; target: \"_blank\" | \"_parent\" | \"_self\" | \"_top\"; }[]; }[]",
|
|
88
|
+
"references": {
|
|
89
|
+
"Array": {
|
|
90
|
+
"location": "global",
|
|
91
|
+
"id": "global::Array"
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
"required": false,
|
|
96
|
+
"optional": false,
|
|
97
|
+
"docs": {
|
|
98
|
+
"tags": [],
|
|
99
|
+
"text": ""
|
|
100
|
+
},
|
|
101
|
+
"defaultValue": "[]"
|
|
102
|
+
},
|
|
103
|
+
"mobileThreshold": {
|
|
104
|
+
"type": "number",
|
|
105
|
+
"mutable": false,
|
|
106
|
+
"complexType": {
|
|
107
|
+
"original": "number",
|
|
108
|
+
"resolved": "number",
|
|
109
|
+
"references": {}
|
|
110
|
+
},
|
|
111
|
+
"required": false,
|
|
112
|
+
"optional": false,
|
|
113
|
+
"docs": {
|
|
114
|
+
"tags": [],
|
|
115
|
+
"text": ""
|
|
116
|
+
},
|
|
117
|
+
"attribute": "mobile-threshold",
|
|
118
|
+
"reflect": false,
|
|
119
|
+
"defaultValue": "768"
|
|
120
|
+
},
|
|
121
|
+
"type": {
|
|
122
|
+
"type": "string",
|
|
123
|
+
"mutable": false,
|
|
124
|
+
"complexType": {
|
|
125
|
+
"original": "'basic' | 'hamburger_left' | 'hamburger_right'",
|
|
126
|
+
"resolved": "\"basic\" | \"hamburger_left\" | \"hamburger_right\"",
|
|
127
|
+
"references": {}
|
|
128
|
+
},
|
|
129
|
+
"required": false,
|
|
130
|
+
"optional": false,
|
|
131
|
+
"docs": {
|
|
132
|
+
"tags": [],
|
|
133
|
+
"text": ""
|
|
134
|
+
},
|
|
135
|
+
"attribute": "type",
|
|
136
|
+
"reflect": false,
|
|
137
|
+
"defaultValue": "'basic'"
|
|
138
|
+
},
|
|
139
|
+
"navPosition": {
|
|
140
|
+
"type": "string",
|
|
141
|
+
"mutable": false,
|
|
142
|
+
"complexType": {
|
|
143
|
+
"original": "'inline' | 'bottom' | 'megamenu'",
|
|
144
|
+
"resolved": "\"bottom\" | \"inline\" | \"megamenu\"",
|
|
145
|
+
"references": {}
|
|
146
|
+
},
|
|
147
|
+
"required": false,
|
|
148
|
+
"optional": false,
|
|
149
|
+
"docs": {
|
|
150
|
+
"tags": [],
|
|
151
|
+
"text": ""
|
|
152
|
+
},
|
|
153
|
+
"attribute": "nav-position",
|
|
154
|
+
"reflect": false,
|
|
155
|
+
"defaultValue": "'inline'"
|
|
156
|
+
},
|
|
157
|
+
"megaMenuAlignment": {
|
|
158
|
+
"type": "string",
|
|
159
|
+
"mutable": false,
|
|
160
|
+
"complexType": {
|
|
161
|
+
"original": "'left' | 'right'",
|
|
162
|
+
"resolved": "\"left\" | \"right\"",
|
|
163
|
+
"references": {}
|
|
164
|
+
},
|
|
165
|
+
"required": false,
|
|
166
|
+
"optional": false,
|
|
167
|
+
"docs": {
|
|
168
|
+
"tags": [],
|
|
169
|
+
"text": ""
|
|
170
|
+
},
|
|
171
|
+
"attribute": "mega-menu-alignment",
|
|
172
|
+
"reflect": false,
|
|
173
|
+
"defaultValue": "'left'"
|
|
174
|
+
},
|
|
175
|
+
"sticky": {
|
|
176
|
+
"type": "boolean",
|
|
177
|
+
"mutable": false,
|
|
178
|
+
"complexType": {
|
|
179
|
+
"original": "boolean",
|
|
180
|
+
"resolved": "boolean",
|
|
181
|
+
"references": {}
|
|
182
|
+
},
|
|
183
|
+
"required": false,
|
|
184
|
+
"optional": false,
|
|
185
|
+
"docs": {
|
|
186
|
+
"tags": [],
|
|
187
|
+
"text": ""
|
|
188
|
+
},
|
|
189
|
+
"attribute": "sticky",
|
|
190
|
+
"reflect": false,
|
|
191
|
+
"defaultValue": "false"
|
|
192
|
+
},
|
|
193
|
+
"stickyThreshold": {
|
|
194
|
+
"type": "number",
|
|
195
|
+
"mutable": false,
|
|
196
|
+
"complexType": {
|
|
197
|
+
"original": "number",
|
|
198
|
+
"resolved": "number",
|
|
199
|
+
"references": {}
|
|
200
|
+
},
|
|
201
|
+
"required": false,
|
|
202
|
+
"optional": false,
|
|
203
|
+
"docs": {
|
|
204
|
+
"tags": [],
|
|
205
|
+
"text": ""
|
|
206
|
+
},
|
|
207
|
+
"attribute": "sticky-threshold",
|
|
208
|
+
"reflect": false,
|
|
209
|
+
"defaultValue": "0"
|
|
210
|
+
},
|
|
211
|
+
"mobileLogo": {
|
|
212
|
+
"type": "unknown",
|
|
213
|
+
"mutable": false,
|
|
214
|
+
"complexType": {
|
|
215
|
+
"original": "{\n image_url: string,\n alt: string,\n link: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n } | null",
|
|
216
|
+
"resolved": "{ image_url: string; alt: string; link: string; target: \"_blank\" | \"_parent\" | \"_self\" | \"_top\"; }",
|
|
217
|
+
"references": {}
|
|
218
|
+
},
|
|
219
|
+
"required": false,
|
|
220
|
+
"optional": false,
|
|
221
|
+
"docs": {
|
|
222
|
+
"tags": [],
|
|
223
|
+
"text": ""
|
|
224
|
+
},
|
|
225
|
+
"defaultValue": "this.logo"
|
|
226
|
+
},
|
|
227
|
+
"user": {
|
|
228
|
+
"type": "unknown",
|
|
229
|
+
"mutable": false,
|
|
230
|
+
"complexType": {
|
|
231
|
+
"original": "{\n image_url: string,\n alt: string,\n link: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n } | null",
|
|
232
|
+
"resolved": "{ image_url: string; alt: string; link: string; target: \"_blank\" | \"_parent\" | \"_self\" | \"_top\"; }",
|
|
233
|
+
"references": {}
|
|
234
|
+
},
|
|
235
|
+
"required": false,
|
|
236
|
+
"optional": false,
|
|
237
|
+
"docs": {
|
|
238
|
+
"tags": [],
|
|
239
|
+
"text": ""
|
|
240
|
+
},
|
|
241
|
+
"defaultValue": "null"
|
|
242
|
+
}
|
|
243
|
+
};
|
|
244
|
+
}
|
|
245
|
+
static get states() {
|
|
246
|
+
return {
|
|
247
|
+
"isMobile": {}
|
|
248
|
+
};
|
|
249
|
+
}
|
|
250
|
+
static get listeners() {
|
|
251
|
+
return [{
|
|
252
|
+
"name": "resize",
|
|
253
|
+
"method": "handleResize",
|
|
254
|
+
"target": "window",
|
|
255
|
+
"capture": false,
|
|
256
|
+
"passive": true
|
|
257
|
+
}];
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
//# sourceMappingURL=jump-navbar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jump-navbar.js","sourceRoot":"","sources":["../../../src/components/jump-navbar/jump-navbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Listen, State } from '@stencil/core';\n\n@Component({\n tag: 'jump-navbar',\n styleUrl: 'jump-navbar.scss',\n shadow: true,\n})\nexport class JumpNavbar {\n @Prop() logo: {\n image_url: string,\n alt: string,\n link: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n } = { image_url: '', alt: '', link: '#', target: '_self' };\n @Prop() navItems: Array<{\n id: string,\n text: string,\n link: string,\n class: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n }> = [];\n @Prop() secondaryNavItems: Array<{\n parent: string | null,\n title: string | null,\n items: Array<{\n text: string,\n link: string,\n class: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n }>\n }> = [];\n @Prop() mobileThreshold: number = 768;\n @Prop() type: 'basic' | 'hamburger_left' | 'hamburger_right' = 'basic';\n @Prop() navPosition: 'inline' | 'bottom' | 'megamenu' = 'inline'; //TODO: Chiedere a Vale se può essere inline + sulla riga sotto mostriamo la tendina oppure è un menu a sé stante quello sotto\n @Prop() megaMenuAlignment: 'left' | 'right' = 'left';\n @Prop() sticky: boolean = false;\n @Prop() stickyThreshold: number = 0; // Possible to get sticky on mobile only after a certain scroll threshold\n @Prop() mobileLogo: {\n image_url: string,\n alt: string,\n link: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n } | null = this.logo;\n @Prop() user : {\n image_url: string,\n alt: string,\n link: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n } | null = null;\n\n @State() isMobile: boolean = false;\n\n navbar: HTMLElement;\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.isMobile = window.innerWidth < this.mobileThreshold;\n }\n\n render() {\n return (\n <Host>\n <jump-button variant=\"primary\" size=\"small\" text href={this.logo['link']}\n target={this.logo['target'] ?? '_self'}>\n <img src={this.logo['image_url']} alt={this.logo['alt']} />\n </jump-button>\n {this.isMobile &&\n <div class=\"MobileMenuOffCanvas\">\n <div class=\"MobileMenuOffCanvas__Header\">\n /* TODO: ricerca + pulsante chiusura + profilo utente con immagine */\n </div>\n <div class=\"MobileMenuOffCanvas__Navbar\">\n {this.navbar.cloneNode(true)}\n </div>\n <div class=\"MobileMenuOffCanvas__Footer\">\n /* TODO: langswitcher */\n {this.mobileLogo &&\n <jump-button variant=\"primary\" size=\"small\" text href={this.mobileLogo['link']}\n target={this.mobileLogo['target'] ?? '_self'}>\n <img src={this.mobileLogo['image_url']} alt={this.mobileLogo['alt']} />\n </jump-button>\n }\n </div>\n </div>}\n <nav ref={(el: HTMLElement) => {\n this.navbar = el;\n }}>\n <ul>\n {this.navItems.map((item) => (\n <li>\n <jump-button variant=\"primary\" size=\"small\" text href={item.link} target={item.target}\n class={item.class}>\n {item.text}\n {this.secondaryNavItems.some(secondaryItem => secondaryItem.parent === item.id) &&\n <jump-icon slot=\"suffix\" library=\"lucide\" name=\"chevron-down\" size=\"small\"></jump-icon>\n }\n </jump-button>\n\n {this.secondaryNavItems.map((secondaryItem) => (\n secondaryItem.parent === item.id &&\n <ul data-parent={secondaryItem.parent}>\n {secondaryItem.title &&\n <h4>{secondaryItem.title}</h4>} /* TODO: utilizzare jump-heading? */\n {secondaryItem.items.map((subItem) => (\n <li>\n <jump-button variant=\"primary\" size=\"small\" text href={subItem.link} target={subItem.target}\n class={subItem.class}>\n {subItem.text}\n </jump-button>\n </li>\n ))}\n </ul>\n ))}\n </li>\n ))}\n </ul>\n </nav>\n <slot name=\"actions\">\n <slot name=\"lang_switcher\"></slot>\n <slot name=\"search\"></slot>\n <slot name=\"buttons\"></slot>\n <slot name=\"cart\"></slot>\n </slot>\n </Host>\n );\n }\n}\n\n"]}
|
|
@@ -22,7 +22,7 @@ export class JumpPagination {
|
|
|
22
22
|
}
|
|
23
23
|
/* --------------------- RENDER ------------------------------- */
|
|
24
24
|
render() {
|
|
25
|
-
return (h(Host, { key: '
|
|
25
|
+
return (h(Host, { key: 'e7b289bce3ef2bcfe2b45135b463feb2390c50a3', class: "JumpPagination" }, h("div", { key: '6559e463bf9d9973dd037f6b6a23f20816ef1882', class: "JumpPagination__Wrapper" }, h("div", { key: '5650bf9580bd470604e8841faf33e6b029549cda', class: "indicators" }, h("div", { key: 'b40e74ede39cd17fd770cf1fc46d46644a86fc63', class: "elements" }, h("span", { key: 'af919f31f94448c99291a830dd35da7169cd24ec' }, h("span", { key: '96b8773daf276e9285b91f06cf6f5fa28a5d6727' }, this.current), " ", this.pagLabel, " ", h("span", { key: 'e7dd92a3a48e23d5c28d1b6e0f3c07cddd837598' }, this.last))), h("div", { key: '1a3338a3e913f9c92a530203f91e93f6085b607c', class: "arrow" }, this.showFirstAndLast &&
|
|
26
26
|
// <button
|
|
27
27
|
// onClick={() => {this.current = 1} }
|
|
28
28
|
// disabled={(this.current === 1) ? true : false}>
|
|
@@ -30,14 +30,14 @@ export class JumpPagination {
|
|
|
30
30
|
// disabled={(this.current === 1) ? true : false}
|
|
31
31
|
// ></jump-icon>
|
|
32
32
|
// </button>
|
|
33
|
-
h("jump-button", { key: '
|
|
33
|
+
h("jump-button", { key: '23075cb5a2513048e7ee690242f0ce5a54c95538', onClick: () => { this.current = 1; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '0e834c3117fca9d2dd593a4b5ceb3934e7eb547a', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: 'fc27582a142ed6051187692f6a31a2c51f91e4af', onClick: () => { this.current--; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'a2998274cf27c33b80f7fd0c917a5583b70ef8f0', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '26d7a56a2a0312cf526dcf9bc432679c756534f1', onClick: () => { this.current++; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '6769d3484fdd63d2fff5268392111137273b9541', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
|
|
34
34
|
// <button
|
|
35
35
|
// onClick={() => {this.current = this.last}}
|
|
36
36
|
// disabled={(this.current === this.last) ? true : false}
|
|
37
37
|
// >
|
|
38
38
|
// <jump-icon library="fa" category="regular" name="chevrons-right" size="small" slot="prefix"></jump-icon>
|
|
39
39
|
// </button>
|
|
40
|
-
h("jump-button", { key: '
|
|
40
|
+
h("jump-button", { key: '7e3c33e8a7c7d7c1dbaeb6009781602023f71133', onClick: () => { this.current = this.last; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '418f61b2481e76f5766a92e6b7c8d0fad5dcd70a', slot: "suffix", name: "chevrons-right" }), " "))))));
|
|
41
41
|
}
|
|
42
42
|
static get is() { return "jump-pagination"; }
|
|
43
43
|
static get encapsulation() { return "shadow"; }
|
|
@@ -70,9 +70,9 @@ export class JumpPaginationTable {
|
|
|
70
70
|
/* --------------------- RENDER ------------------------------- */
|
|
71
71
|
render() {
|
|
72
72
|
var _a;
|
|
73
|
-
return (h(Host, { key: '
|
|
74
|
-
h("jump-button", { key: '
|
|
75
|
-
h("jump-button", { key: '
|
|
73
|
+
return (h(Host, { key: '68cfdc8f670c77a14605e4f151b41e2d551531e5', class: "JumpPaginationTable" }, h("div", { key: '80d51c132999625d22b6e7ed73867e79a043ae99', class: "JumpPaginationTable__Wrapper" }, h("div", { key: '709e412acf386ad3149e7a04208a0ea4948b4f0b', class: "elementsPerPage" }, h("label", { key: '73985f2877b3c242b8deccb68ac11c878780e6ee', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '0def3077b6dc04018aecd2f50b0301bc19c29527', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRangesArray.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: 'c2691bc0e79d043625977b276ac38ec10a41d73b', class: "indicators" }, h("div", { key: 'd9d62ca7b06479244bb396d38fc01dd86236515d', class: "elements" }, h("span", { key: '51ea23a9d77319738404c8b6ead86ea0a9052e1c' }, h("span", { key: '8fd64ef028151ae61c31998f72036ff4c9c9f151' }, this.first), " - ", h("span", { key: 'a001b2a509920566c34a41afb24a823e0445c3e2' }, this.last), " ", this.pagLabel, " ", h("span", { key: '9a27e142353e7d410655f270988183a82c0792a1' }, this.total))), h("div", { key: 'ba778721da92c9147449de9d0869a06d65615602', class: "arrow" }, this.showFirstAndLast &&
|
|
74
|
+
h("jump-button", { key: '76dfd54bfa05a6c33489aa41f9150c793fac5f85', onClick: () => this.doChangePage('first'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '0aee871e37e2e5b5190fc62cd8c8617d209f57ed', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '9e82cf38238d358a4084078b975a3f75bf55e9fe', onClick: () => this.doChangePage('previous'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '7303a4371e0540dfa28feaf4a1f69662b646e64b', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '4bfb0713a9a374c30873e046b7ded26965cfce84', onClick: () => this.doChangePage('next'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '52c929962accd14480152a0dfd2e03904fd79fc4', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
|
|
75
|
+
h("jump-button", { key: '6f0c43ef094c622447cd1095ab70ce6bfd2c464a', onClick: () => this.doChangePage('last'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: 'cb05b4a61efdebf03a17b353f17572d038df251f', slot: "suffix", name: "chevrons-right" }), " "))))));
|
|
76
76
|
}
|
|
77
77
|
static get is() { return "jump-pagination-table"; }
|
|
78
78
|
static get originalStyleUrls() {
|
|
@@ -44,11 +44,11 @@ export class JumpQuantity {
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
|
-
return (h(Host, { key: '
|
|
48
|
-
h("jump-button", { key: '
|
|
47
|
+
return (h(Host, { key: '60bf7e8f2de0ccc25763b9248e9c6ef3d60fcc92', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: '5f29838b2bf5606ed50ee6e09c57b67286f8095f' }, this.label), h("div", { key: 'e6934083f54d1b84748936569b687b725756cac6', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
|
|
48
|
+
h("jump-button", { key: '7687a84784a5fc55c3194dcc36292cff61507cb3', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '2251771f3d182371ee59e09a475b13c9057920c7', library: "lucide", name: "minus", size: "small" })), h("input", { key: '708d3a835e62bc14b1f64bcfe5470b11ad997b1a', ref: (el) => {
|
|
49
49
|
this.inputEl = el;
|
|
50
50
|
}, type: 'number', value: this.value, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
|
|
51
|
-
h("jump-button", { key: '
|
|
51
|
+
h("jump-button", { key: '922c17979037b3849f175def9c5d10d8d4722793', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '84fa52f7203049c7a7793579a8bf3d612dcfba83', library: "lucide", name: "plus", size: "small" })))));
|
|
52
52
|
}
|
|
53
53
|
static get is() { return "jump-quantity"; }
|
|
54
54
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
display: block;
|
|
3
3
|
--jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);
|
|
4
|
+
--jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);
|
|
4
5
|
}
|
|
5
6
|
:host .Wrapper {
|
|
6
7
|
display: flex;
|
|
@@ -9,4 +10,31 @@
|
|
|
9
10
|
:host .Wrapper.rounded {
|
|
10
11
|
border-radius: 50px;
|
|
11
12
|
background-color: #f8f8f8;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
:host(.center) {
|
|
16
|
+
display: flex;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
align-items: center;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
:host(.left) {
|
|
22
|
+
display: flex;
|
|
23
|
+
justify-content: flex-start;
|
|
24
|
+
align-items: center;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:host(.right) {
|
|
28
|
+
display: flex;
|
|
29
|
+
justify-content: flex-end;
|
|
30
|
+
align-items: center;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Stile fullBorder */
|
|
34
|
+
:host(.fullBorder) {
|
|
35
|
+
border-bottom: 1px solid var(--jump-tab-border-color);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
:host(.fullBorder) ::slotted([slot=tab-item]) {
|
|
39
|
+
margin-bottom: -1px;
|
|
12
40
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class JumpTab {
|
|
3
3
|
constructor() {
|
|
4
|
+
this.alignment = 'left';
|
|
5
|
+
this.fullBorder = false;
|
|
4
6
|
this.tabGroupName = undefined;
|
|
5
7
|
this.variant = 'inline';
|
|
6
8
|
}
|
|
@@ -72,7 +74,7 @@ export class JumpTab {
|
|
|
72
74
|
}
|
|
73
75
|
}
|
|
74
76
|
render() {
|
|
75
|
-
return (h(Host, { key: '
|
|
77
|
+
return (h(Host, { key: '12b0209abd23ebbff1779b77bf7a32e0c2070eed', class: "JumpTab" + " " + this.alignment + " " + (this.fullBorder && 'fullBorder'), id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'f9c9158f7c4c61ae42cc1adf125be173288d4aac' }, h("div", { key: '31e61ea8666fa867a6e287729ece824a90b584ff', class: "Wrapper " + this.variant }, h("slot", { key: '2b215a056c8ab946ba8c58269a87b0de2537b759', name: "tab-item" })), h("div", { key: 'e2e0110cc23e5c7e808551f977746fec95466d66' }, h("slot", { key: '15a062d1f5ca5b1f7717b27e1192dbe76e5f8fba', name: "tab-content" })))));
|
|
76
78
|
}
|
|
77
79
|
static get is() { return "jump-tab"; }
|
|
78
80
|
static get encapsulation() { return "shadow"; }
|
|
@@ -88,6 +90,42 @@ export class JumpTab {
|
|
|
88
90
|
}
|
|
89
91
|
static get properties() {
|
|
90
92
|
return {
|
|
93
|
+
"alignment": {
|
|
94
|
+
"type": "string",
|
|
95
|
+
"mutable": false,
|
|
96
|
+
"complexType": {
|
|
97
|
+
"original": "string",
|
|
98
|
+
"resolved": "string",
|
|
99
|
+
"references": {}
|
|
100
|
+
},
|
|
101
|
+
"required": false,
|
|
102
|
+
"optional": false,
|
|
103
|
+
"docs": {
|
|
104
|
+
"tags": [],
|
|
105
|
+
"text": ""
|
|
106
|
+
},
|
|
107
|
+
"attribute": "alignment",
|
|
108
|
+
"reflect": false,
|
|
109
|
+
"defaultValue": "'left'"
|
|
110
|
+
},
|
|
111
|
+
"fullBorder": {
|
|
112
|
+
"type": "boolean",
|
|
113
|
+
"mutable": false,
|
|
114
|
+
"complexType": {
|
|
115
|
+
"original": "boolean",
|
|
116
|
+
"resolved": "boolean",
|
|
117
|
+
"references": {}
|
|
118
|
+
},
|
|
119
|
+
"required": false,
|
|
120
|
+
"optional": false,
|
|
121
|
+
"docs": {
|
|
122
|
+
"tags": [],
|
|
123
|
+
"text": "If true, the jump-tab component have a full bottom border"
|
|
124
|
+
},
|
|
125
|
+
"attribute": "full-border",
|
|
126
|
+
"reflect": false,
|
|
127
|
+
"defaultValue": "false"
|
|
128
|
+
},
|
|
91
129
|
"tabGroupName": {
|
|
92
130
|
"type": "string",
|
|
93
131
|
"mutable": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-tab.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOtF,MAAM,OAAO,OAAO;;
|
|
1
|
+
{"version":3,"file":"jump-tab.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Event, EventEmitter, Prop, h, Listen } from '@stencil/core';\n\n@Component({\n tag: 'jump-tab',\n styleUrl: 'jump-tab.scss',\n shadow: true,\n})\nexport class JumpTab {\n\n JumpTabEl: HTMLElement;\n /* ---------------------- @PROPERTIES ------------------------- */\n @Prop() alignment: string = 'left';\n\n /**\n * If true, the jump-tab component have a full bottom border\n */\n @Prop() fullBorder: boolean = false;\n\n @Prop() tabGroupName: string = undefined;\n\n /**\n * The style of the tab. The same value must be passed to all the items.\n * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n */\n @Prop() variant: string = 'inline';\n\n @Event({ eventName: 'jump-change-activetab'}) setActiveTab: EventEmitter;\n\n @Listen('jump-change-active-tab')\n changeActiveTabHandler(event: CustomEvent) {\n this.setActiveTab.emit(event.detail);\n\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item) => {\n if (item.getAttribute('identifier') === event.detail.id) {\n item.setAttribute('active', '');\n\n if (this.variant === 'sheet') {\n // Aggiungi il bordo ai fratelli dell'elemento attivo tranne l'ultimo\n items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`; // Usa i backticks\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\n // Rimuovi il bordo dal fratello precedente\n let previousSibling = item.previousElementSibling as any;\n if (previousSibling) {\n previousSibling.style.borderRight = '1px solid transparent';\n }\n }\n\n } else {\n item.removeAttribute('active');\n }\n });\n }\n\n let panel = this.JumpTabEl.querySelectorAll('jump-tab-panel');\n if (panel.length > 0) {\n panel.forEach((panel) => {\n if (panel.getAttribute('identifier') === event.detail.id) {\n panel.setAttribute('active', '');\n } else {\n panel.removeAttribute('active');\n }\n });\n }\n }\n\n\n componentDidLoad() {\n console.log('Component has been rendered');\n if(this.variant === 'sheet') {\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n // Seleziona tutti gli elementi jump-tab-item\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item, index) => {\n // Aggiungi bordo destro a tutti tranne:\n // - l'ultimo elemento\n // - l'elemento attivo (avente classe \"active\")\n if (index === items.length - 1 || item.classList.contains('active')) {\n item.style.borderRight = '1px solid transparent';\n } else {\n item.style.borderRight = `1px solid ${primaryColor}`;\n }\n });\n }\n }\n\n }\n\n render() {\n return (\n <Host class={\"JumpTab\" + \" \" + this.alignment + \" \" + (this.fullBorder && 'fullBorder')} id={this.tabGroupName} ref={(el) => {this.JumpTabEl = el;}}> \n <div>\n <div class={\"Wrapper \" + this.variant}>\n <slot name=\"tab-item\"></slot>\n </div>\n <div>\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}"]}
|
|
@@ -13,7 +13,18 @@ export default {
|
|
|
13
13
|
control: 'select',
|
|
14
14
|
options: ['inline', 'boxed', 'sheet', 'rounded'],
|
|
15
15
|
description: 'Stile del tab e di tutti i suoi item',
|
|
16
|
-
}
|
|
16
|
+
},
|
|
17
|
+
alignment: {
|
|
18
|
+
name: 'alignment',
|
|
19
|
+
control: 'select',
|
|
20
|
+
options: ['left', 'center', 'right'],
|
|
21
|
+
description: 'Allineamento delle tab item',
|
|
22
|
+
},
|
|
23
|
+
fullBorder: {
|
|
24
|
+
name: 'full-border',
|
|
25
|
+
control: 'boolean',
|
|
26
|
+
description: 'Se true, il tab ha un bordo inferiore pieno',
|
|
27
|
+
},
|
|
17
28
|
}
|
|
18
29
|
};
|
|
19
30
|
const Template = (args) => {
|
|
@@ -28,16 +39,26 @@ export const TabInline = Template.bind({});
|
|
|
28
39
|
TabInline.args = {
|
|
29
40
|
tabGroupName: 'Tab 1',
|
|
30
41
|
variant: 'inline',
|
|
42
|
+
alignment: 'center'
|
|
31
43
|
};
|
|
32
44
|
export const TabBoxed = Template.bind({});
|
|
33
45
|
TabBoxed.args = {
|
|
34
46
|
tabGroupName: 'Tab 1',
|
|
35
|
-
variant: 'boxed'
|
|
47
|
+
variant: 'boxed',
|
|
48
|
+
alignment: 'left'
|
|
36
49
|
};
|
|
37
50
|
export const TabRounded = Template.bind({});
|
|
38
51
|
TabRounded.args = {
|
|
39
52
|
tabGroupName: 'tabRounded',
|
|
40
|
-
variant: 'rounded'
|
|
53
|
+
variant: 'rounded',
|
|
54
|
+
alignment: 'right'
|
|
55
|
+
};
|
|
56
|
+
export const TabInlineFullBorder = Template.bind({});
|
|
57
|
+
TabInlineFullBorder.args = {
|
|
58
|
+
tabGroupName: 'Tab 1',
|
|
59
|
+
variant: 'inline',
|
|
60
|
+
alignment: 'center',
|
|
61
|
+
fullBorder: true
|
|
41
62
|
};
|
|
42
63
|
const TemplateDisabled = (args) => {
|
|
43
64
|
const attributes = generateAttributesFromArgs(args);
|
|
@@ -50,7 +71,8 @@ const TemplateDisabled = (args) => {
|
|
|
50
71
|
export const OneTabDisabled = TemplateDisabled.bind({});
|
|
51
72
|
OneTabDisabled.args = {
|
|
52
73
|
tabGroupName: 'Tab 1',
|
|
53
|
-
variant: 'boxed'
|
|
74
|
+
variant: 'boxed',
|
|
75
|
+
alignment: 'left'
|
|
54
76
|
};
|
|
55
77
|
const TemplateWithListenerExample = (args, data) => {
|
|
56
78
|
let id = data.id;
|
|
@@ -78,7 +100,8 @@ export const TabInlineWithListener = TemplateWithListenerExample.bind({});
|
|
|
78
100
|
TabInlineWithListener.args = {
|
|
79
101
|
tabGroupName: 'tabInline',
|
|
80
102
|
iconName: 'settings',
|
|
81
|
-
variant: 'inline'
|
|
103
|
+
variant: 'inline',
|
|
104
|
+
alignment: 'center'
|
|
82
105
|
};
|
|
83
106
|
export const TabBoxedWithListener = TemplateWithListenerExample.bind({});
|
|
84
107
|
TabBoxedWithListener.args = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-tab.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACX,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,YAAY,EAAE;YACV,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sBAAsB;SACtC;QACD,OAAO,EAAE;YACL,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC;YAChD,WAAW,EAAE,sCAAsC;SACtD;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACrB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACrD,OAAO,UAAU,CAAC,aAAa,UAAU;uDACU,IAAI,CAAC,OAAO;uDACZ,IAAI,CAAC,OAAO;uDACZ,IAAI,CAAC,OAAO;gBACnD,CAAC,CAAC;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3C,SAAS,CAAC,IAAI,GAAG;IACb,YAAY,EAAE,OAAO;IACrB,OAAO,EAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"jump-tab.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Tab/Tabs',\n tags: ['autodocs'],\n argTypes: {\n tabGroupName: {\n name: 'tab-group-name',\n control: 'text',\n description: 'Indica la tab attiva',\n },\n variant: {\n name: 'variant',\n control: 'select',\n options: ['inline', 'boxed', 'sheet', 'rounded'],\n description: 'Stile del tab e di tutti i suoi item',\n },\n alignment: {\n name: 'alignment',\n control: 'select',\n options: ['left', 'center', 'right'],\n description: 'Allineamento delle tab item',\n },\n fullBorder: {\n name: 'full-border',\n control: 'boolean',\n description: 'Se true, il tab ha un bordo inferiore pieno',\n },\n }\n}\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" variant=${args.variant} active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" variant=${args.variant} label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" variant=${args.variant} label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const TabInline = Template.bind({});\n\nTabInline.args = {\n tabGroupName: 'Tab 1',\n variant: 'inline',\n alignment: 'center' \n};\n\nexport const TabBoxed = Template.bind({});\nTabBoxed.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed',\n alignment: 'left'\n};\n\n\nexport const TabRounded = Template.bind({});\nTabRounded.args = {\n tabGroupName: 'tabRounded',\n variant: 'rounded',\n alignment: 'right'\n};\n\nexport const TabInlineFullBorder = Template.bind({});\nTabInlineFullBorder.args = {\n tabGroupName: 'Tab 1',\n variant: 'inline',\n alignment: 'center',\n fullBorder: true \n};\n\n\nconst TemplateDisabled = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" disabled label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const OneTabDisabled = TemplateDisabled.bind({});\nOneTabDisabled.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed',\n alignment: 'left'\n};\n\nconst TemplateWithListenerExample = (args, data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<div style=\"background-color: #EEEEEE; padding: 2rem;\"><jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab4\" label=\"Tab 4\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>\n <div>La tab attiva ha l'id: <span id=\"active-tab\">loading..<span></div>\n </div>\n <script>\n (function(){\n let container = document.querySelector('#story--${id}');\n container.querySelector('#active-tab').innerText = \"tab1\";\n container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {\n container.querySelector('#active-tab').innerText = ev.detail.id;\n console.log('TemplateWithListenerExample - event:', ev.detail.id);\n });\n })();\n </script>`);\n};\n\nexport const TabInlineWithListener = TemplateWithListenerExample.bind({});\nTabInlineWithListener.args = { \n tabGroupName: 'tabInline',\n iconName: 'settings',\n variant: 'inline',\n alignment: 'center'\n};\n\nexport const TabBoxedWithListener = TemplateWithListenerExample.bind({});\nTabBoxedWithListener.args = { \n tabGroupName: 'tabBoxed',\n iconName: 'settings',\n variant: 'boxed'\n};\n\nexport const TaRoundedWithListener = TemplateWithListenerExample.bind({});\nTaRoundedWithListener.args = { \n tabGroupName: 'tabRounded',\n iconName: 'settings',\n variant: 'rounded'\n};\n\nexport const TabSheetWithListener = TemplateWithListenerExample.bind({});\nTabSheetWithListener.args = { \n tabGroupName: 'tabSheet',\n iconName: 'settings',\n variant: 'sheet'\n};\n\nconst TemplateWithPanel = (args,data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-panel identifier=\"tab1\" active slot=\"tab-content\">Tab 1 content</jump-tab-panel>\n <jump-tab-panel identifier=\"tab2\" slot=\"tab-content\">Tab 2 content</jump-tab-panel>\n <jump-tab-panel identifier=\"tab3\" slot=\"tab-content\">Tab 3 content</jump-tab-panel>\n </jump-tab> <div>La tab attiva ha l'id: <span id=\"active-tab\">loading..<span></div>\n </div><script>\n (function(){\n let container = document.querySelector('#story--${id}');\n container.querySelector('#active-tab').innerText = \"tab1\";\n container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {\n container.querySelector('#active-tab').innerText = ev.detail.id;\n console.log('TemplateWithPanel - event:', ev.detail.id);\n });\n })();\n </script>\n `);\n}\n\nexport const TabInlineWithPanel = TemplateWithPanel.bind({});\n\nTabInlineWithPanel.args = {\n tabGroupName: 'Tab 1',\n variant: 'rounded',\n};"]}
|