@supersoniks/concorde 2.0.2 → 2.0.4
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/README.md +1 -0
- package/concorde-core.bundle.js +748 -690
- package/concorde-core.es.js +3903 -3123
- package/core/_types/types.d.ts +2 -4
- package/core/components/functional/date/date.d.ts +4 -2
- package/core/components/functional/date/date.js +28 -13
- package/core/components/functional/fetch/fetch.d.ts +9 -10
- package/core/components/functional/fetch/fetch.js +21 -5
- package/core/components/functional/list/list.d.ts +7 -10
- package/core/components/functional/list/list.js +19 -4
- package/core/components/functional/queue/queue.d.ts +3 -2
- package/core/components/functional/queue/queue.js +71 -61
- package/core/components/functional/router/router.d.ts +1 -0
- package/core/components/functional/router/router.js +14 -3
- package/core/components/functional/sdui/sdui.d.ts +2 -7
- package/core/components/functional/submit/submit.js +11 -4
- package/core/components/ui/_css/scroll.js +13 -11
- package/core/components/ui/_css/size.js +1 -1
- package/core/components/ui/alert/alert.d.ts +14 -3
- package/core/components/ui/alert/alert.js +34 -4
- package/core/components/ui/badge/badge.js +10 -3
- package/core/components/ui/button/button.d.ts +19 -10
- package/core/components/ui/button/button.js +77 -22
- package/core/components/ui/captcha/captcha.d.ts +5 -4
- package/core/components/ui/captcha/captcha.js +33 -9
- package/core/components/ui/divider/divider.d.ts +2 -0
- package/core/components/ui/divider/divider.js +17 -2
- package/core/components/ui/form/checkbox/checkbox.d.ts +24 -9
- package/core/components/ui/form/checkbox/checkbox.js +4 -6
- package/core/components/ui/form/css/form-control.js +40 -7
- package/core/components/ui/form/fieldset/fieldset.d.ts +1 -0
- package/core/components/ui/form/fieldset/fieldset.js +14 -1
- package/core/components/ui/form/fieldset/legend-description.js +3 -3
- package/core/components/ui/form/fieldset/legend.js +2 -8
- package/core/components/ui/form/input/input.d.ts +4 -5
- package/core/components/ui/form/input/input.js +17 -13
- package/core/components/ui/form/input-autocomplete/input-autocomplete.d.ts +3 -5
- package/core/components/ui/form/input-autocomplete/input-autocomplete.js +9 -9
- package/core/components/ui/form/select/select.d.ts +4 -1
- package/core/components/ui/form/select/select.js +25 -18
- package/core/components/ui/form/textarea/textarea.d.ts +4 -5
- package/core/components/ui/form/textarea/textarea.js +19 -10
- package/core/components/ui/group/group.js +3 -3
- package/core/components/ui/icon/icon.js +2 -1
- package/core/components/ui/icon/icons.d.ts +0 -4
- package/core/components/ui/icon/icons.js +3 -16
- package/core/components/ui/link/link.d.ts +5 -2
- package/core/components/ui/link/link.js +31 -2
- package/core/components/ui/loader/loader.d.ts +4 -1
- package/core/components/ui/loader/loader.js +11 -3
- package/core/components/ui/loader/styles/inline.js +14 -16
- package/core/components/ui/menu/menu-item.js +2 -1
- package/core/components/ui/menu/menu.js +6 -22
- package/core/components/ui/modal/modal-close.js +2 -1
- package/core/components/ui/modal/modal.d.ts +13 -1
- package/core/components/ui/modal/modal.js +70 -10
- package/core/components/ui/pop/pop.d.ts +9 -3
- package/core/components/ui/pop/pop.js +46 -23
- package/core/components/ui/table/table-tr.d.ts +10 -2
- package/core/components/ui/table/table-tr.js +30 -2
- package/core/components/ui/table/table.d.ts +1 -0
- package/core/components/ui/table/table.js +7 -1
- package/core/components/ui/theme/theme-collection/core-variables.js +8 -19
- package/core/components/ui/theme/theme.d.ts +6 -0
- package/core/components/ui/theme/theme.js +11 -13
- package/core/components/ui/toast/message-subscriber.d.ts +0 -8
- package/core/components/ui/toast/message-subscriber.js +0 -46
- package/core/components/ui/toast/toast-item.js +31 -40
- package/core/components/ui/toast/toast.d.ts +5 -1
- package/core/components/ui/toast/toast.js +80 -13
- package/core/components/ui/tooltip/tooltip.d.ts +3 -1
- package/core/components/ui/tooltip/tooltip.js +22 -0
- package/core/core.d.ts +1 -0
- package/core/core.js +1 -0
- package/core/decorators/Subscriber.d.ts +3 -3
- package/core/decorators/Subscriber.js +66 -23
- package/core/directives/DataProvider.d.ts +12 -7
- package/core/directives/DataProvider.js +23 -8
- package/core/directives/Wording.d.ts +42 -0
- package/core/directives/Wording.js +202 -0
- package/core/mixins/Fetcher.d.ts +8 -11
- package/core/mixins/Fetcher.js +38 -22
- package/core/mixins/FormCheckable.d.ts +1 -4
- package/core/mixins/FormElement.d.ts +1 -0
- package/core/mixins/FormElement.js +3 -6
- package/core/mixins/FormInput.d.ts +3 -5
- package/core/mixins/FormInput.js +4 -0
- package/core/mixins/Subscriber.d.ts +0 -4
- package/core/mixins/Subscriber.js +13 -89
- package/core/mixins/TemplatesContainer.js +9 -0
- package/core/utils/Format.d.ts +1 -0
- package/core/utils/Format.js +16 -0
- package/core/utils/HTML.d.ts +13 -0
- package/core/utils/HTML.js +42 -3
- package/core/utils/Objects.d.ts +1 -0
- package/core/utils/Objects.js +5 -0
- package/core/utils/PublisherProxy.d.ts +16 -10
- package/core/utils/PublisherProxy.js +112 -74
- package/core/utils/Utils.d.ts +1 -0
- package/core/utils/Utils.js +5 -0
- package/core/utils/api.d.ts +26 -0
- package/core/utils/api.js +135 -3
- package/core/utils/url-pattern.d.ts +2 -0
- package/core/utils/url-pattern.js +2 -0
- package/mixins.d.ts +6 -16
- package/package.json +9 -2
package/core/_types/types.d.ts
CHANGED
|
@@ -21,10 +21,8 @@ export type MixinArgsType = any;
|
|
|
21
21
|
export type PrimitiveType = string | number | boolean | bigint | undefined | null | symbol;
|
|
22
22
|
export type PublisherInterface<T = PublisherContentType> = Publisher<T> & any;
|
|
23
23
|
export type CoreJSType = string | number | boolean | null | {
|
|
24
|
-
[property: string]: CoreJSType;
|
|
24
|
+
[property: string | number | symbol]: CoreJSType;
|
|
25
25
|
} | CoreJSType[];
|
|
26
26
|
export type TypeAndRecordOfType<U> = U & Record<string | number, U>;
|
|
27
|
-
export type PublisherContentType =
|
|
28
|
-
__value?: CoreJSType;
|
|
29
|
-
};
|
|
27
|
+
export type PublisherContentType = unknown;
|
|
30
28
|
export type HTMLFormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
2
|
type DateTimeFormatPartExtended = {
|
|
3
3
|
hidden?: boolean;
|
|
4
4
|
source?: string;
|
|
@@ -19,6 +19,7 @@ export declare class SonicDate extends SonicDate_base {
|
|
|
19
19
|
start_date_string: string | null;
|
|
20
20
|
end_date_string: string | null;
|
|
21
21
|
start_date: number;
|
|
22
|
+
hide_hours: boolean;
|
|
22
23
|
end_date: number;
|
|
23
24
|
era: "narrow" | "short" | "long" | "";
|
|
24
25
|
year: "numeric" | "2-digit";
|
|
@@ -26,6 +27,7 @@ export declare class SonicDate extends SonicDate_base {
|
|
|
26
27
|
day: "numeric" | "2-digit";
|
|
27
28
|
weekday: "narrow" | "short" | "long" | "hidden";
|
|
28
29
|
hour: "numeric" | "2-digit" | "hidden";
|
|
30
|
+
hour12: boolean;
|
|
29
31
|
minute: "numeric" | "2-digit" | "hidden";
|
|
30
32
|
language: string;
|
|
31
33
|
renderIf: boolean;
|
|
@@ -38,6 +40,6 @@ export declare class SonicDate extends SonicDate_base {
|
|
|
38
40
|
*/
|
|
39
41
|
getDatesParts(start_date: number, end_date: number, options: Intl.DateTimeFormatOptions): DateTimeFormatPartExtended[];
|
|
40
42
|
dateStringToSeconds(dateString: string): number;
|
|
41
|
-
render(): import("lit-html").
|
|
43
|
+
render(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html").UnsafeHTMLDirective>;
|
|
42
44
|
}
|
|
43
45
|
export {};
|
|
@@ -8,8 +8,9 @@ import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
|
|
|
8
8
|
import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesContainer";
|
|
9
9
|
import Format from "@supersoniks/concorde/core/utils/Format";
|
|
10
10
|
import HTML from "@supersoniks/concorde/core/utils/HTML";
|
|
11
|
-
import {
|
|
11
|
+
import { LitElement, nothing } from "lit";
|
|
12
12
|
import { customElement, property } from "lit/decorators.js";
|
|
13
|
+
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
13
14
|
const tagName = "sonic-date";
|
|
14
15
|
let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement)) {
|
|
15
16
|
constructor() {
|
|
@@ -24,6 +25,7 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
|
|
|
24
25
|
this.start_date_string = null;
|
|
25
26
|
this.end_date_string = null;
|
|
26
27
|
this.start_date = 0;
|
|
28
|
+
this.hide_hours = false;
|
|
27
29
|
this.end_date = 0;
|
|
28
30
|
this.era = "";
|
|
29
31
|
this.year = "numeric";
|
|
@@ -31,6 +33,7 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
|
|
|
31
33
|
this.day = "2-digit";
|
|
32
34
|
this.weekday = "short";
|
|
33
35
|
this.hour = "2-digit";
|
|
36
|
+
this.hour12 = false;
|
|
34
37
|
this.minute = "2-digit";
|
|
35
38
|
this.language = "";
|
|
36
39
|
this.renderIf = true;
|
|
@@ -44,10 +47,10 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
|
|
|
44
47
|
return this._wording_billet_periode_validite;
|
|
45
48
|
}
|
|
46
49
|
set wording_billet_periode_validite(value) {
|
|
50
|
+
if (!value)
|
|
51
|
+
value = "Du %s au %s";
|
|
47
52
|
this._wording_billet_periode_validite = value;
|
|
48
|
-
this.duAu = this.wording_billet_periode_validite
|
|
49
|
-
.split("%s")
|
|
50
|
-
.map((str) => str.trim());
|
|
53
|
+
this.duAu = this.wording_billet_periode_validite?.split("%s").map((str) => str.trim());
|
|
51
54
|
this.duAu.pop();
|
|
52
55
|
this.requestUpdate();
|
|
53
56
|
}
|
|
@@ -70,7 +73,7 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
|
|
|
70
73
|
//
|
|
71
74
|
//on affiche pas l'heure si les dates sont les mêmes
|
|
72
75
|
const isSameDay = start.toDateString() == end.toDateString();
|
|
73
|
-
if (!isSameDay) {
|
|
76
|
+
if (!isSameDay || this.hide_hours) {
|
|
74
77
|
delete options.hour;
|
|
75
78
|
delete options.minute;
|
|
76
79
|
}
|
|
@@ -78,9 +81,7 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
|
|
|
78
81
|
parts = format.formatRangeToParts(start, end);
|
|
79
82
|
//on affiche du au uniquement si on a deux dates différentes
|
|
80
83
|
if (!isSameDay) {
|
|
81
|
-
const to = parts.find((part) => part.type == "literal" &&
|
|
82
|
-
part.source == "shared" &&
|
|
83
|
-
part.value.trim().length > 0);
|
|
84
|
+
const to = parts.find((part) => part.type == "literal" && part.source == "shared" && part.value.trim().length > 0);
|
|
84
85
|
if (to) {
|
|
85
86
|
to.value = " " + this.duAu[1] + " ";
|
|
86
87
|
to.type = "to";
|
|
@@ -99,7 +100,9 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
|
|
|
99
100
|
}
|
|
100
101
|
//En mode design on cache les ","
|
|
101
102
|
if (this.designMode) {
|
|
102
|
-
parts.forEach((part) => (part.hidden = part.value.trim() == ","));
|
|
103
|
+
// parts.forEach((part) => (part.hidden = part.value.trim() == ","));
|
|
104
|
+
// replace all "," by " "
|
|
105
|
+
parts.forEach((part) => (part.value = part.value.replace(/,/g, " ")));
|
|
103
106
|
}
|
|
104
107
|
parts[0].value = Format.ucFirst(parts[0].value);
|
|
105
108
|
return parts.filter((p) => p.hidden !== true);
|
|
@@ -137,6 +140,7 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
|
|
|
137
140
|
year: this.year,
|
|
138
141
|
month: this.month,
|
|
139
142
|
day: this.day,
|
|
143
|
+
hour12: this.hour12,
|
|
140
144
|
};
|
|
141
145
|
if (this.weekday !== "hidden")
|
|
142
146
|
options.weekday = this.weekday;
|
|
@@ -152,17 +156,22 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
|
|
|
152
156
|
* On récupère les différentes partie affichées en vu de l'injection dans le template
|
|
153
157
|
*/
|
|
154
158
|
const parts = this.getDatesParts(this.start_date, this.end_date, options);
|
|
155
|
-
return
|
|
159
|
+
return unsafeHTML(`${parts
|
|
160
|
+
.map((part) => {
|
|
156
161
|
const template = this.templateParts[part.type];
|
|
157
162
|
if (template) {
|
|
158
163
|
const clone = document.importNode(template.content, true);
|
|
159
164
|
const child = clone.children[0];
|
|
160
165
|
if (child.innerText.trim() == "")
|
|
161
166
|
child.innerText = part.value;
|
|
162
|
-
return
|
|
167
|
+
return child.outerHTML;
|
|
163
168
|
}
|
|
164
|
-
|
|
165
|
-
|
|
169
|
+
const span = document.createElement("span");
|
|
170
|
+
span.innerText = part.value;
|
|
171
|
+
span.className = part.type;
|
|
172
|
+
return `<span class="${part.type}">${part.value}</span>`;
|
|
173
|
+
})
|
|
174
|
+
.join("")}`);
|
|
166
175
|
}
|
|
167
176
|
};
|
|
168
177
|
__decorate([
|
|
@@ -189,6 +198,9 @@ __decorate([
|
|
|
189
198
|
__decorate([
|
|
190
199
|
property({ type: Number })
|
|
191
200
|
], SonicDate.prototype, "start_date", void 0);
|
|
201
|
+
__decorate([
|
|
202
|
+
property({ type: Boolean })
|
|
203
|
+
], SonicDate.prototype, "hide_hours", void 0);
|
|
192
204
|
__decorate([
|
|
193
205
|
property({ type: Number })
|
|
194
206
|
], SonicDate.prototype, "end_date", void 0);
|
|
@@ -210,6 +222,9 @@ __decorate([
|
|
|
210
222
|
__decorate([
|
|
211
223
|
property({ type: String })
|
|
212
224
|
], SonicDate.prototype, "hour", void 0);
|
|
225
|
+
__decorate([
|
|
226
|
+
property({ type: Boolean })
|
|
227
|
+
], SonicDate.prototype, "hour12", void 0);
|
|
213
228
|
__decorate([
|
|
214
229
|
property({ type: String })
|
|
215
230
|
], SonicDate.prototype, "minute", void 0);
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
/// <reference types="node" />
|
|
2
|
-
import { LitElement } from "lit";
|
|
2
|
+
import { LitElement, nothing } from "lit";
|
|
3
|
+
import { LoaderMode } from "../../ui/loader/loader";
|
|
4
|
+
import { DirectiveResult } from "lit/async-directive";
|
|
3
5
|
declare const Fetch_base: {
|
|
4
6
|
new (...args: any[]): {
|
|
5
7
|
api: import("../../../utils/api").default | null;
|
|
@@ -7,12 +9,11 @@ declare const Fetch_base: {
|
|
|
7
9
|
isFirstLoad: boolean;
|
|
8
10
|
isLoading: boolean;
|
|
9
11
|
lazyLoad?: boolean | undefined;
|
|
10
|
-
noLoader?: boolean | undefined;
|
|
11
12
|
iObserver: IntersectionObserver | null;
|
|
12
|
-
isDefaultLoaderEnabled: boolean;
|
|
13
13
|
isFetchEnabled: boolean;
|
|
14
|
+
fetchedData: any;
|
|
14
15
|
_endPoint: string;
|
|
15
|
-
props:
|
|
16
|
+
props: import("../../../utils/api").ResultTypeInterface | null;
|
|
16
17
|
endPoint: string;
|
|
17
18
|
requestId: number;
|
|
18
19
|
refetchEveryMs: number;
|
|
@@ -49,12 +50,8 @@ declare const Fetch_base: {
|
|
|
49
50
|
getAttribute(name: string): string;
|
|
50
51
|
hasAttribute(attributeName: string): boolean;
|
|
51
52
|
getBoundingClientRect(): DOMRect;
|
|
52
|
-
onConnected(callback: (component: any) => void): void;
|
|
53
|
-
offConnected(callback: (component: any) => void): void;
|
|
54
|
-
onDisconnected(callback: (component: any) => void): void;
|
|
55
|
-
offDisconnected(callback: (component: any) => void): void;
|
|
56
53
|
};
|
|
57
|
-
} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../_types/types").CoreJSType>) & typeof LitElement;
|
|
54
|
+
} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../_types/types").CoreJSType>) & (new (...args: any[]) => import("../../../mixins/TemplatesContainer").TemplatesContainerInterface) & typeof LitElement;
|
|
58
55
|
/**
|
|
59
56
|
* ###Fetch charge un contenu via un appel d'api web.
|
|
60
57
|
* Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
|
|
@@ -83,12 +80,14 @@ declare const Fetch_base: {
|
|
|
83
80
|
* | token | Fetcher ou un de ses parents | A fournir à la place des autres attributs si on le possède | q<d34gb | null |
|
|
84
81
|
|
|
85
82
|
#### Autres choses utiles
|
|
86
|
-
* * L'attribut *noLoader* du composant permet de désactiver l'affichage du loader par défaut.
|
|
87
83
|
* * On peut appeler la methode invalidate() sur le publisher associé au composant pour declencher le rechargement des données.
|
|
88
84
|
* * endPoint est une propriété réctive, par conséquent, sa modification, manuelle via template ou data binbding provoque la mise à jour du contenu.
|
|
89
85
|
*/
|
|
90
86
|
export declare class Fetch extends Fetch_base {
|
|
91
87
|
static styles: import("lit").CSSResult[];
|
|
88
|
+
loader?: LoaderMode | true | "";
|
|
89
|
+
renderLoader(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
90
|
+
renderSkeleton(): DirectiveResult<import("lit-html/directive").DirectiveClass>;
|
|
92
91
|
render(): import("lit-html").TemplateResult<1>;
|
|
93
92
|
}
|
|
94
93
|
export {};
|
|
@@ -4,10 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
import { css, html, LitElement } from "lit";
|
|
8
|
-
import { customElement } from "lit/decorators.js";
|
|
7
|
+
import { css, html, LitElement, nothing } from "lit";
|
|
8
|
+
import { customElement, property } from "lit/decorators.js";
|
|
9
9
|
import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
|
|
10
10
|
import Fetcher from "@supersoniks/concorde/core/mixins/Fetcher";
|
|
11
|
+
import { TemplatesContainer } from "@supersoniks/concorde/mixins";
|
|
12
|
+
import { templateContent } from "lit/directives/template-content.js";
|
|
11
13
|
const tagName = "sonic-fetch"; // For Astro.build
|
|
12
14
|
/**
|
|
13
15
|
* ###Fetch charge un contenu via un appel d'api web.
|
|
@@ -37,13 +39,24 @@ const tagName = "sonic-fetch"; // For Astro.build
|
|
|
37
39
|
* | token | Fetcher ou un de ses parents | A fournir à la place des autres attributs si on le possède | q<d34gb | null |
|
|
38
40
|
|
|
39
41
|
#### Autres choses utiles
|
|
40
|
-
* * L'attribut *noLoader* du composant permet de désactiver l'affichage du loader par défaut.
|
|
41
42
|
* * On peut appeler la methode invalidate() sur le publisher associé au composant pour declencher le rechargement des données.
|
|
42
43
|
* * endPoint est une propriété réctive, par conséquent, sa modification, manuelle via template ou data binbding provoque la mise à jour du contenu.
|
|
43
44
|
*/
|
|
44
|
-
let Fetch = class Fetch extends Fetcher(Subscriber(LitElement)) {
|
|
45
|
+
let Fetch = class Fetch extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
|
|
46
|
+
renderLoader() {
|
|
47
|
+
if (!(this.isLoading && this.loader !== undefined))
|
|
48
|
+
return nothing;
|
|
49
|
+
const loader = this.loader === true || this.loader === "" ? "fixed" : this.loader;
|
|
50
|
+
return html `<sonic-loader mode=${loader}></sonic-loader>`;
|
|
51
|
+
}
|
|
52
|
+
renderSkeleton() {
|
|
53
|
+
const template = this.templateParts["skeleton"];
|
|
54
|
+
if (!(this.isLoading && template))
|
|
55
|
+
return nothing;
|
|
56
|
+
return templateContent(template);
|
|
57
|
+
}
|
|
45
58
|
render() {
|
|
46
|
-
return html `<slot></slot
|
|
59
|
+
return html ` ${this.renderSkeleton()} ${this.renderLoader()} ${!this.isLoading ? html `<slot></slot>` : nothing} `;
|
|
47
60
|
}
|
|
48
61
|
};
|
|
49
62
|
Fetch.styles = [
|
|
@@ -53,6 +66,9 @@ Fetch.styles = [
|
|
|
53
66
|
}
|
|
54
67
|
`,
|
|
55
68
|
];
|
|
69
|
+
__decorate([
|
|
70
|
+
property()
|
|
71
|
+
], Fetch.prototype, "loader", void 0);
|
|
56
72
|
Fetch = __decorate([
|
|
57
73
|
customElement(tagName)
|
|
58
74
|
], Fetch);
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
/// <reference types="node" />
|
|
2
|
-
import { LitElement } from "lit";
|
|
2
|
+
import { LitElement, nothing } from "lit";
|
|
3
3
|
import "@supersoniks/concorde/core/components/ui/loader/loader";
|
|
4
4
|
import "@supersoniks/concorde/core/components/functional/subscriber/subscriber";
|
|
5
5
|
import { DirectiveResult } from "lit/directive";
|
|
6
6
|
import { TemplateContentDirective } from "lit/directives/template-content.js";
|
|
7
7
|
import { TemplateResult } from "lit";
|
|
8
|
+
import { LoaderMode } from "@supersoniks/concorde/core/components/ui/loader/loader";
|
|
8
9
|
/**
|
|
9
10
|
* ### List boucle sur sa propriété "props" et crée des éléments a partir des données en bouclant également sur ses templates.
|
|
10
11
|
*
|
|
@@ -44,12 +45,11 @@ declare const List_base: {
|
|
|
44
45
|
isFirstLoad: boolean;
|
|
45
46
|
isLoading: boolean;
|
|
46
47
|
lazyLoad?: boolean | undefined;
|
|
47
|
-
noLoader?: boolean | undefined;
|
|
48
48
|
iObserver: IntersectionObserver | null;
|
|
49
|
-
isDefaultLoaderEnabled: boolean;
|
|
50
49
|
isFetchEnabled: boolean;
|
|
50
|
+
fetchedData: any;
|
|
51
51
|
_endPoint: string;
|
|
52
|
-
props:
|
|
52
|
+
props: import("../../../utils/api").ResultTypeInterface | null;
|
|
53
53
|
endPoint: string;
|
|
54
54
|
requestId: number;
|
|
55
55
|
refetchEveryMs: number;
|
|
@@ -86,10 +86,6 @@ declare const List_base: {
|
|
|
86
86
|
getAttribute(name: string): string;
|
|
87
87
|
hasAttribute(attributeName: string): boolean;
|
|
88
88
|
getBoundingClientRect(): DOMRect;
|
|
89
|
-
onConnected(callback: (component: any) => void): void;
|
|
90
|
-
offConnected(callback: (component: any) => void): void;
|
|
91
|
-
onDisconnected(callback: (component: any) => void): void;
|
|
92
|
-
offDisconnected(callback: (component: any) => void): void;
|
|
93
89
|
};
|
|
94
90
|
} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../_types/types").CoreJSType>) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/TemplatesContainer").TemplatesContainerInterface) & typeof LitElement;
|
|
95
91
|
export declare class List extends List_base {
|
|
@@ -103,15 +99,16 @@ export declare class List extends List_base {
|
|
|
103
99
|
* La propriété idKey est utilisé repérer les lignes de manière unique si pour les item de la liste item[this.idKey] n'existe pas, alors l'index est utilisé
|
|
104
100
|
*/
|
|
105
101
|
idKey: string;
|
|
102
|
+
loader?: LoaderMode | true | "";
|
|
106
103
|
limit: number;
|
|
107
104
|
offset: number;
|
|
108
105
|
connectedCallback(): void;
|
|
109
106
|
disconnectedCallback(): void;
|
|
107
|
+
renderLoader(): TemplateResult<1> | typeof nothing;
|
|
108
|
+
renderSkeleton(): DirectiveResult<import("lit-html/directive").DirectiveClass>;
|
|
110
109
|
renderLoadingState(): DirectiveResult<typeof TemplateContentDirective> | TemplateResult;
|
|
111
110
|
renderNoResultState(): TemplateResult<1>;
|
|
112
111
|
formatProps(): (import("../../../_types/types").CoreJSType[] & {
|
|
113
|
-
__value?: import("../../../_types/types").CoreJSType | undefined;
|
|
114
|
-
} & {
|
|
115
112
|
_sonic_http_response_?: Response | undefined;
|
|
116
113
|
text?: string | undefined;
|
|
117
114
|
}) | null;
|
|
@@ -32,7 +32,6 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
|
|
|
32
32
|
connectedCallback() {
|
|
33
33
|
this.noShadowDom = "";
|
|
34
34
|
this.defferedDebug = this.hasAttribute("debug") || null;
|
|
35
|
-
this.isDefaultLoaderEnabled = false;
|
|
36
35
|
this.isFetchEnabled = this.hasAttribute("fetch");
|
|
37
36
|
if (this.isFetchEnabled)
|
|
38
37
|
this.isLoading = true;
|
|
@@ -41,10 +40,23 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
|
|
|
41
40
|
disconnectedCallback() {
|
|
42
41
|
super.disconnectedCallback();
|
|
43
42
|
}
|
|
43
|
+
renderLoader() {
|
|
44
|
+
if (!(this.isLoading && this.loader !== undefined))
|
|
45
|
+
return nothing;
|
|
46
|
+
const template = this.templateParts["skeleton"];
|
|
47
|
+
if (template)
|
|
48
|
+
return nothing;
|
|
49
|
+
const loader = this.loader === true || this.loader === "" ? "fixed" : this.loader;
|
|
50
|
+
return html `<sonic-loader mode=${loader}></sonic-loader>`;
|
|
51
|
+
}
|
|
52
|
+
renderSkeleton() {
|
|
53
|
+
const template = this.templateParts["skeleton"];
|
|
54
|
+
if (!(this.isLoading && template))
|
|
55
|
+
return nothing;
|
|
56
|
+
return templateContent(template);
|
|
57
|
+
}
|
|
44
58
|
renderLoadingState() {
|
|
45
|
-
return this.
|
|
46
|
-
? templateContent(this.templateParts["skeleton"])
|
|
47
|
-
: html `<sonic-loader mode="inline"></sonic-loader>`;
|
|
59
|
+
return html `${this.renderSkeleton()} ${this.renderLoader()}`;
|
|
48
60
|
}
|
|
49
61
|
renderNoResultState() {
|
|
50
62
|
return html ` <div
|
|
@@ -187,6 +199,9 @@ __decorate([
|
|
|
187
199
|
__decorate([
|
|
188
200
|
property({ type: String })
|
|
189
201
|
], List.prototype, "idKey", void 0);
|
|
202
|
+
__decorate([
|
|
203
|
+
property()
|
|
204
|
+
], List.prototype, "loader", void 0);
|
|
190
205
|
__decorate([
|
|
191
206
|
property()
|
|
192
207
|
], List.prototype, "limit", void 0);
|
|
@@ -10,6 +10,7 @@ type QueueItem = {
|
|
|
10
10
|
};
|
|
11
11
|
type QueueProps = QueueItem[] & {
|
|
12
12
|
resultCount?: number;
|
|
13
|
+
lastFetchedData?: unknown;
|
|
13
14
|
};
|
|
14
15
|
declare const Queue_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<QueueProps>) & typeof LitElement;
|
|
15
16
|
/**
|
|
@@ -44,10 +45,11 @@ export default class Queue extends Queue_base {
|
|
|
44
45
|
filterPublisher: PublisherProxy | null;
|
|
45
46
|
configFilter(): void;
|
|
46
47
|
filterTimeoutId?: ReturnType<typeof setTimeout>;
|
|
48
|
+
filterTimeoutMs: number;
|
|
47
49
|
searchHash: string;
|
|
48
50
|
requestId: number;
|
|
49
51
|
isFirstRequest: boolean;
|
|
50
|
-
updateFilteredContent()
|
|
52
|
+
updateFilteredContent: () => void;
|
|
51
53
|
/**
|
|
52
54
|
* Cette expression est utilisée comme modèle par le composant Queue pour renseigngner le dataProvider de la [liste](./?path=/docs/core-components-functional-list-list--basic) créée.
|
|
53
55
|
* * l'expression *$offset* est alors remplacée par le numéro de l'élément à partir duquel démarrer
|
|
@@ -56,7 +58,6 @@ export default class Queue extends Queue_base {
|
|
|
56
58
|
*/
|
|
57
59
|
dataProviderExpression: string;
|
|
58
60
|
idKey: string;
|
|
59
|
-
currentScrollPosition: number | undefined;
|
|
60
61
|
resetDuration(): void;
|
|
61
62
|
listDataProviders: string[];
|
|
62
63
|
nextHadEvent: boolean;
|
|
@@ -46,9 +46,52 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
|
|
|
46
46
|
this.instanceId = 0;
|
|
47
47
|
this.localStorage = "disabled";
|
|
48
48
|
this.filterPublisher = null;
|
|
49
|
+
this.filterTimeoutMs = 400;
|
|
49
50
|
this.searchHash = "";
|
|
50
51
|
this.requestId = 0;
|
|
51
52
|
this.isFirstRequest = true;
|
|
53
|
+
this.updateFilteredContent = () => {
|
|
54
|
+
/**
|
|
55
|
+
* On ne lance la recherche que si le hash de recherche est différent
|
|
56
|
+
*/
|
|
57
|
+
const dataProvider = this.dataProviderExpression;
|
|
58
|
+
const split = dataProvider.split("?");
|
|
59
|
+
split.shift();
|
|
60
|
+
const searchParams = new URLSearchParams(split.join("?"));
|
|
61
|
+
const filterData = this.filterPublisher?.get();
|
|
62
|
+
const filteredFieldsArray = this.filteredFields.split(" ");
|
|
63
|
+
for (const f in filterData) {
|
|
64
|
+
let value = filterData[f];
|
|
65
|
+
if (Array.isArray(value))
|
|
66
|
+
value = value.filter((v) => v !== null);
|
|
67
|
+
if ((this.filteredFields && !filteredFieldsArray.includes(f)) || value == null || value.toString() === "")
|
|
68
|
+
continue;
|
|
69
|
+
searchParams.set(f, filterData[f].toString());
|
|
70
|
+
}
|
|
71
|
+
const searchHash = searchParams.toString();
|
|
72
|
+
if (searchHash == this.searchHash && !this.isFirstRequest)
|
|
73
|
+
return;
|
|
74
|
+
this.searchHash = searchHash;
|
|
75
|
+
/**
|
|
76
|
+
* on reset les données avant de lancer la requète
|
|
77
|
+
*/
|
|
78
|
+
for (const dataProvider of this.listDataProviders) {
|
|
79
|
+
PublisherManager.delete(dataProvider);
|
|
80
|
+
// this.publisher.lastFetchedData = {};
|
|
81
|
+
}
|
|
82
|
+
this.listDataProviders = [];
|
|
83
|
+
clearTimeout(this.filterTimeoutId);
|
|
84
|
+
this.filterTimeoutId = setTimeout(async () => {
|
|
85
|
+
const count = this.resultCount;
|
|
86
|
+
this.props = null;
|
|
87
|
+
//On garde le décompte au cas ou il n'y aurait pas rechargement
|
|
88
|
+
this.requestId++;
|
|
89
|
+
this.resultCount = count;
|
|
90
|
+
await PublisherManager.getInstance().isLocalStrorageReady;
|
|
91
|
+
window.requestAnimationFrame(() => this.next());
|
|
92
|
+
}, this.isFirstRequest ? 0 : this.filterTimeoutMs);
|
|
93
|
+
this.isFirstRequest = false;
|
|
94
|
+
};
|
|
52
95
|
/**
|
|
53
96
|
* Cette expression est utilisée comme modèle par le composant Queue pour renseigngner le dataProvider de la [liste](./?path=/docs/core-components-functional-list-list--basic) créée.
|
|
54
97
|
* * l'expression *$offset* est alors remplacée par le numéro de l'élément à partir duquel démarrer
|
|
@@ -57,20 +100,33 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
|
|
|
57
100
|
*/
|
|
58
101
|
this.dataProviderExpression = "";
|
|
59
102
|
this.idKey = "id";
|
|
60
|
-
this.currentScrollPosition = undefined;
|
|
61
103
|
this.listDataProviders = [];
|
|
62
104
|
this.nextHadEvent = false;
|
|
63
105
|
}
|
|
64
106
|
disconnectedCallback() {
|
|
65
107
|
for (const dataProvider of this.listDataProviders) {
|
|
66
108
|
PublisherManager.delete(dataProvider);
|
|
109
|
+
this.listDataProviders = [];
|
|
67
110
|
}
|
|
111
|
+
this.filterPublisher?.offInternalMutation(this.updateFilteredContent);
|
|
112
|
+
// reset internal state
|
|
113
|
+
this.props = null;
|
|
114
|
+
this.limit = 5;
|
|
115
|
+
this.offset = 0;
|
|
116
|
+
this.resultCount = 0;
|
|
117
|
+
this.searchHash = "";
|
|
118
|
+
this.requestId = 0;
|
|
119
|
+
this.isFirstRequest = true;
|
|
120
|
+
this.nextHadEvent = false;
|
|
121
|
+
this.publisher.set({});
|
|
68
122
|
super.disconnectedCallback();
|
|
69
123
|
return;
|
|
70
124
|
}
|
|
71
125
|
async connectedCallback() {
|
|
72
126
|
this.instanceId = Queue_1.instanceCounter++;
|
|
73
127
|
this.localStorage = this.getAttribute("localStorage") || this.localStorage;
|
|
128
|
+
this.filterTimeoutMs = parseInt(this.getAttribute("filterTimeoutMs") || "400");
|
|
129
|
+
//On supprime l'attribut car une queue ne doi pas être en localstorage, ce sont ses sous composants list qui doivent l'être
|
|
74
130
|
this.removeAttribute("localStorage");
|
|
75
131
|
this.noShadowDom = "";
|
|
76
132
|
this.defferedDebug = this.hasAttribute("debug") || null;
|
|
@@ -81,11 +137,12 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
|
|
|
81
137
|
this.dataProviderExpression = HTML.getAncestorAttributeValue(this.parentElement, "dataProvider") || "";
|
|
82
138
|
}
|
|
83
139
|
super.connectedCallback();
|
|
140
|
+
this.publisher.set({});
|
|
84
141
|
this.key = this.getAttribute("key");
|
|
142
|
+
await PublisherManager.getInstance().isLocalStrorageReady;
|
|
85
143
|
if (!this.templates)
|
|
86
144
|
this.templates = Array.from(this.querySelectorAll("template"));
|
|
87
145
|
this.lastRequestTime = new Date().getTime();
|
|
88
|
-
await PublisherManager.getInstance().isLocalStrorageReady;
|
|
89
146
|
this.configFilter();
|
|
90
147
|
}
|
|
91
148
|
configFilter() {
|
|
@@ -95,50 +152,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
|
|
|
95
152
|
return;
|
|
96
153
|
}
|
|
97
154
|
this.filterPublisher = PublisherManager.getInstance().get(dataFilterProvider);
|
|
98
|
-
this.filterPublisher?.onInternalMutation(
|
|
99
|
-
this.updateFilteredContent();
|
|
100
|
-
});
|
|
101
|
-
}
|
|
102
|
-
updateFilteredContent() {
|
|
103
|
-
/**
|
|
104
|
-
* On ne lance la recherche que si le hash de recherche est différent
|
|
105
|
-
*/
|
|
106
|
-
const dataProvider = this.dataProviderExpression;
|
|
107
|
-
const split = dataProvider.split("?");
|
|
108
|
-
split.shift();
|
|
109
|
-
const searchParams = new URLSearchParams(split.join("?"));
|
|
110
|
-
const filterData = this.filterPublisher?.get();
|
|
111
|
-
const filteredFieldsArray = this.filteredFields.split(" ");
|
|
112
|
-
for (const f in filterData) {
|
|
113
|
-
let value = filterData[f];
|
|
114
|
-
if (Array.isArray(value))
|
|
115
|
-
value = value.filter((v) => v !== null);
|
|
116
|
-
if ((this.filteredFields && !filteredFieldsArray.includes(f)) || value == null || value.toString() === "")
|
|
117
|
-
continue;
|
|
118
|
-
searchParams.set(f, filterData[f].toString());
|
|
119
|
-
}
|
|
120
|
-
const searchHash = searchParams.toString();
|
|
121
|
-
if (searchHash == this.searchHash && !this.isFirstRequest)
|
|
122
|
-
return;
|
|
123
|
-
this.searchHash = searchHash;
|
|
124
|
-
/**
|
|
125
|
-
* on reset les données avant de lancer la requète
|
|
126
|
-
*/
|
|
127
|
-
for (const dataProvider of this.listDataProviders) {
|
|
128
|
-
PublisherManager.delete(dataProvider);
|
|
129
|
-
}
|
|
130
|
-
this.listDataProviders = [];
|
|
131
|
-
clearTimeout(this.filterTimeoutId);
|
|
132
|
-
this.filterTimeoutId = setTimeout(async () => {
|
|
133
|
-
const count = this.resultCount;
|
|
134
|
-
this.props = null;
|
|
135
|
-
//On garde le décompte au cas ou il n'y aurait pas rechargement
|
|
136
|
-
this.requestId++;
|
|
137
|
-
this.resultCount = count;
|
|
138
|
-
await PublisherManager.getInstance().isLocalStrorageReady;
|
|
139
|
-
window.requestAnimationFrame(() => this.next());
|
|
140
|
-
}, this.isFirstRequest ? 0 : 400);
|
|
141
|
-
this.isFirstRequest = false;
|
|
155
|
+
this.filterPublisher?.onInternalMutation(this.updateFilteredContent);
|
|
142
156
|
}
|
|
143
157
|
resetDuration() {
|
|
144
158
|
this.lastRequestTime = new Date().getTime();
|
|
@@ -153,21 +167,25 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
|
|
|
153
167
|
* */
|
|
154
168
|
if (!this.nextHadEvent && e) {
|
|
155
169
|
this.publisher.resultCount = 0;
|
|
170
|
+
// this.publisher.lastFetchedData = {};
|
|
156
171
|
this.resultCount = 0;
|
|
157
172
|
}
|
|
158
173
|
this.nextHadEvent = !!e;
|
|
159
174
|
if (e) {
|
|
175
|
+
this.publisher.lastFetchedData = e.detail.fetchedData;
|
|
160
176
|
if (e.detail.requestId < this.requestId)
|
|
161
177
|
return;
|
|
162
178
|
this.resultCount += e.detail.props.length;
|
|
163
179
|
if (!e.detail.isFirstLoad || !e.detail.props.length || this.dataProviderExpression.indexOf("$offset") == -1) {
|
|
164
180
|
this.publisher.resultCount = this.resultCount;
|
|
181
|
+
// this.publisher.lastFetchedData = {};
|
|
165
182
|
return;
|
|
166
183
|
}
|
|
167
184
|
}
|
|
168
185
|
if (!Array.isArray(this.props)) {
|
|
169
186
|
const newProps = [];
|
|
170
187
|
newProps.resultCount = this.resultCount;
|
|
188
|
+
newProps.lastFetchedData = e?.detail.fetchedData || {};
|
|
171
189
|
this.props = newProps;
|
|
172
190
|
}
|
|
173
191
|
else {
|
|
@@ -184,7 +202,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
|
|
|
184
202
|
this.limit = 15;
|
|
185
203
|
let dataProvider = this.dataProviderExpression.replace("$offset", offset + "").replace("$limit", this.limit + "");
|
|
186
204
|
const split = dataProvider.split("?");
|
|
187
|
-
|
|
205
|
+
let endpoint = split.shift();
|
|
188
206
|
const searchParams = new URLSearchParams(split.join("?"));
|
|
189
207
|
const filterData = this.filterPublisher?.get();
|
|
190
208
|
const filteredFieldsArray = this.filteredFields.split(" ");
|
|
@@ -195,34 +213,25 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
|
|
|
195
213
|
}
|
|
196
214
|
if (!this.searchHash)
|
|
197
215
|
this.searchHash = searchParams.toString();
|
|
198
|
-
|
|
216
|
+
endpoint = endpoint + "?" + searchParams.toString();
|
|
217
|
+
dataProvider = dataProvider + "_item_from_queue_" + this.instanceId;
|
|
199
218
|
this.listDataProviders.push(dataProvider);
|
|
200
|
-
// this.currentScrollPosition = document.scrollingElement?.scrollTop;
|
|
201
219
|
const newProps = [
|
|
202
220
|
...this.props,
|
|
203
221
|
{
|
|
204
222
|
id: searchParams.toString() + "/" + this.props.length,
|
|
205
|
-
dataProvider: dataProvider
|
|
206
|
-
endPoint:
|
|
223
|
+
dataProvider: dataProvider,
|
|
224
|
+
endPoint: endpoint,
|
|
207
225
|
offset: offset,
|
|
208
226
|
limit: this.limit,
|
|
209
227
|
},
|
|
210
228
|
];
|
|
211
229
|
newProps.resultCount = this.resultCount;
|
|
230
|
+
newProps.lastFetchedData = e?.detail.fetchedData || {};
|
|
212
231
|
this.props = newProps;
|
|
213
232
|
this.lastRequestTime = new Date().getTime();
|
|
214
233
|
}
|
|
215
234
|
render() {
|
|
216
|
-
/**
|
|
217
|
-
* supression du retablisment de la scroll pos.
|
|
218
|
-
**/
|
|
219
|
-
// if (this.currentScrollPosition) {
|
|
220
|
-
// window.requestAnimationFrame(() => {
|
|
221
|
-
// if (document.scrollingElement && this.currentScrollPosition != undefined)
|
|
222
|
-
// document.scrollingElement.scrollTop = this.currentScrollPosition;
|
|
223
|
-
// this.currentScrollPosition = undefined;
|
|
224
|
-
// });
|
|
225
|
-
// }
|
|
226
235
|
if (!Array.isArray(this.props))
|
|
227
236
|
return nothing;
|
|
228
237
|
let lazyload = !this.noLazyload;
|
|
@@ -235,6 +244,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
|
|
|
235
244
|
return html `
|
|
236
245
|
<sonic-list
|
|
237
246
|
fetch
|
|
247
|
+
loader="inline"
|
|
238
248
|
cache=${this.cache}
|
|
239
249
|
displayContents
|
|
240
250
|
lazyBoundsRatio=${this.lazyBoundsRatio}
|
|
@@ -16,6 +16,7 @@ declare const SonicRouter_base: (new (...args: any[]) => import("@supersoniks/co
|
|
|
16
16
|
*/
|
|
17
17
|
export declare class SonicRouter extends SonicRouter_base {
|
|
18
18
|
templateValueAttribute: string;
|
|
19
|
+
fallBackRoute?: string;
|
|
19
20
|
connectedCallback(): void;
|
|
20
21
|
disconnectedCallback(): void;
|
|
21
22
|
private _location;
|