@sentropic/design-system-vue 0.20.0 → 0.20.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AppHeader.d.ts +14 -0
- package/dist/AppHeader.d.ts.map +1 -1
- package/dist/AppHeader.js +8 -1
- package/dist/AppHeader.js.map +1 -1
- package/dist/IdentityMenu.d.ts +17 -1
- package/dist/IdentityMenu.d.ts.map +1 -1
- package/dist/IdentityMenu.js +72 -18
- package/dist/IdentityMenu.js.map +1 -1
- package/dist/LanguageToggle.d.ts +15 -1
- package/dist/LanguageToggle.d.ts.map +1 -1
- package/dist/LanguageToggle.js +20 -9
- package/dist/LanguageToggle.js.map +1 -1
- package/package.json +1 -1
package/dist/AppHeader.d.ts
CHANGED
|
@@ -2,6 +2,11 @@ export type AppHeaderProps = {
|
|
|
2
2
|
compact?: boolean;
|
|
3
3
|
menuOpen?: boolean;
|
|
4
4
|
menuLabel?: string;
|
|
5
|
+
/**
|
|
6
|
+
* Id du tiroir, partagé entre `aria-controls` (burger) et `id` (drawer).
|
|
7
|
+
* Auto-généré et stable si non fourni.
|
|
8
|
+
*/
|
|
9
|
+
drawerId?: string;
|
|
5
10
|
class?: string;
|
|
6
11
|
};
|
|
7
12
|
export declare const AppHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
@@ -17,6 +22,10 @@ export declare const AppHeader: import("vue").DefineComponent<import("vue").Extr
|
|
|
17
22
|
type: StringConstructor;
|
|
18
23
|
default: string;
|
|
19
24
|
};
|
|
25
|
+
drawerId: {
|
|
26
|
+
type: StringConstructor;
|
|
27
|
+
default: undefined;
|
|
28
|
+
};
|
|
20
29
|
class: {
|
|
21
30
|
type: StringConstructor;
|
|
22
31
|
default: undefined;
|
|
@@ -38,6 +47,10 @@ export declare const AppHeader: import("vue").DefineComponent<import("vue").Extr
|
|
|
38
47
|
type: StringConstructor;
|
|
39
48
|
default: string;
|
|
40
49
|
};
|
|
50
|
+
drawerId: {
|
|
51
|
+
type: StringConstructor;
|
|
52
|
+
default: undefined;
|
|
53
|
+
};
|
|
41
54
|
class: {
|
|
42
55
|
type: StringConstructor;
|
|
43
56
|
default: undefined;
|
|
@@ -49,5 +62,6 @@ export declare const AppHeader: import("vue").DefineComponent<import("vue").Extr
|
|
|
49
62
|
compact: boolean;
|
|
50
63
|
menuOpen: boolean;
|
|
51
64
|
menuLabel: string;
|
|
65
|
+
drawerId: string;
|
|
52
66
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
53
67
|
//# sourceMappingURL=AppHeader.d.ts.map
|
package/dist/AppHeader.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../src/AppHeader.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../src/AppHeader.ts"],"names":[],"mappings":"AAOA,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAgDF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAmEpB,CAAC"}
|
package/dist/AppHeader.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { defineComponent, h } from "vue";
|
|
2
2
|
import { classNames } from "./classNames.js";
|
|
3
|
+
// Compteur module pour générer un id de tiroir stable, déterministe et
|
|
4
|
+
// SSR-safe (pas de crypto). Aligné sur le pattern des 3 fw.
|
|
5
|
+
let appHeaderIdCounter = 0;
|
|
3
6
|
// Icônes lucide reproduites en SVG inline (mêmes paths que @lucide/svelte) pour
|
|
4
7
|
// conserver une parité stricte sans dépendance lucide-vue-next.
|
|
5
8
|
function MenuIcon() {
|
|
@@ -42,11 +45,14 @@ export const AppHeader = defineComponent({
|
|
|
42
45
|
compact: { type: Boolean, default: false },
|
|
43
46
|
menuOpen: { type: Boolean, default: false },
|
|
44
47
|
menuLabel: { type: String, default: "Menu" },
|
|
48
|
+
drawerId: { type: String, default: undefined },
|
|
45
49
|
class: { type: String, default: undefined },
|
|
46
50
|
},
|
|
47
51
|
emits: ["menuToggle"],
|
|
48
52
|
setup(props, { slots, emit }) {
|
|
49
53
|
const onToggle = () => emit("menuToggle");
|
|
54
|
+
// Id stable du tiroir : prop fournie sinon compteur module (SSR-safe).
|
|
55
|
+
const resolvedDrawerId = props.drawerId ?? `st-appHeader-drawer-${++appHeaderIdCounter}`;
|
|
50
56
|
return () => {
|
|
51
57
|
const bar = h("div", { class: "st-appHeader__bar" }, [
|
|
52
58
|
props.compact
|
|
@@ -56,6 +62,7 @@ export const AppHeader = defineComponent({
|
|
|
56
62
|
class: "st-appHeader__burgerButton",
|
|
57
63
|
"aria-label": props.menuLabel,
|
|
58
64
|
"aria-expanded": props.menuOpen ? "true" : "false",
|
|
65
|
+
"aria-controls": resolvedDrawerId,
|
|
59
66
|
"aria-haspopup": "menu",
|
|
60
67
|
onClick: onToggle,
|
|
61
68
|
}, [props.menuOpen ? XIcon() : MenuIcon()]),
|
|
@@ -78,7 +85,7 @@ export const AppHeader = defineComponent({
|
|
|
78
85
|
"aria-label": props.menuLabel,
|
|
79
86
|
onClick: onToggle,
|
|
80
87
|
}),
|
|
81
|
-
h("aside", { class: "st-appHeader__drawer" }, slots.drawer()),
|
|
88
|
+
h("aside", { id: resolvedDrawerId, class: "st-appHeader__drawer" }, slots.drawer()),
|
|
82
89
|
];
|
|
83
90
|
}
|
|
84
91
|
return header;
|
package/dist/AppHeader.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../src/AppHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../src/AppHeader.ts"],"names":[],"mappings":"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"}
|
package/dist/IdentityMenu.d.ts
CHANGED
|
@@ -6,6 +6,11 @@ export type IdentityUser = {
|
|
|
6
6
|
export type IdentityMenuProps = {
|
|
7
7
|
user?: IdentityUser | null;
|
|
8
8
|
isAuthenticated?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* État ouvert du dropdown (optionnellement contrôlé). Si fourni, le parent
|
|
11
|
+
* contrôle ; sinon le composant gère un état interne. Aligné sur les 3 fw.
|
|
12
|
+
*/
|
|
13
|
+
open?: boolean;
|
|
9
14
|
devicesHref?: string;
|
|
10
15
|
settingsHref?: string;
|
|
11
16
|
loginLabel?: string;
|
|
@@ -26,6 +31,10 @@ export declare const IdentityMenu: import("vue").DefineComponent<import("vue").E
|
|
|
26
31
|
type: BooleanConstructor;
|
|
27
32
|
default: boolean;
|
|
28
33
|
};
|
|
34
|
+
open: {
|
|
35
|
+
type: BooleanConstructor;
|
|
36
|
+
default: undefined;
|
|
37
|
+
};
|
|
29
38
|
devicesHref: {
|
|
30
39
|
type: StringConstructor;
|
|
31
40
|
default: string;
|
|
@@ -60,7 +69,7 @@ export declare const IdentityMenu: import("vue").DefineComponent<import("vue").E
|
|
|
60
69
|
};
|
|
61
70
|
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
62
71
|
[key: string]: any;
|
|
63
|
-
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("login" | "logout")[], "login" | "logout", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
72
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:open" | "login" | "logout" | "openChange")[], "update:open" | "login" | "logout" | "openChange", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
64
73
|
user: {
|
|
65
74
|
type: () => IdentityUser | null;
|
|
66
75
|
default: null;
|
|
@@ -69,6 +78,10 @@ export declare const IdentityMenu: import("vue").DefineComponent<import("vue").E
|
|
|
69
78
|
type: BooleanConstructor;
|
|
70
79
|
default: boolean;
|
|
71
80
|
};
|
|
81
|
+
open: {
|
|
82
|
+
type: BooleanConstructor;
|
|
83
|
+
default: undefined;
|
|
84
|
+
};
|
|
72
85
|
devicesHref: {
|
|
73
86
|
type: StringConstructor;
|
|
74
87
|
default: string;
|
|
@@ -102,9 +115,12 @@ export declare const IdentityMenu: import("vue").DefineComponent<import("vue").E
|
|
|
102
115
|
default: undefined;
|
|
103
116
|
};
|
|
104
117
|
}>> & Readonly<{
|
|
118
|
+
"onUpdate:open"?: ((...args: any[]) => any) | undefined;
|
|
105
119
|
onLogin?: ((...args: any[]) => any) | undefined;
|
|
106
120
|
onLogout?: ((...args: any[]) => any) | undefined;
|
|
121
|
+
onOpenChange?: ((...args: any[]) => any) | undefined;
|
|
107
122
|
}>, {
|
|
123
|
+
open: boolean;
|
|
108
124
|
class: string;
|
|
109
125
|
variant: "accordion" | "dropdown";
|
|
110
126
|
user: IdentityUser | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IdentityMenu.d.ts","sourceRoot":"","sources":["../src/IdentityMenu.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,0EAA0E;AAC1E,wBAAgB,eAAe,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAG7E;AAyBD,eAAO,MAAM,YAAY;;cAGG,MAAM,YAAY,GAAG,IAAI
|
|
1
|
+
{"version":3,"file":"IdentityMenu.d.ts","sourceRoot":"","sources":["../src/IdentityMenu.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,0EAA0E;AAC1E,wBAAgB,eAAe,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAG7E;AAyBD,eAAO,MAAM,YAAY;;cAGG,MAAM,YAAY,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAUtB,MAAM,UAAU,GAAG,WAAW;;;;;;;;;;;cAVjC,MAAM,YAAY,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAUtB,MAAM,UAAU,GAAG,WAAW;;;;;;;;;;;;;;;;;;;;;;;;4EA0O3D,CAAC"}
|
package/dist/IdentityMenu.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
|
|
1
|
+
import { computed, defineComponent, h, nextTick, onBeforeUnmount, ref, watch } from "vue";
|
|
2
2
|
import { classNames } from "./classNames.js";
|
|
3
3
|
/** Première lettre du displayName, en majuscule (calque de la source). */
|
|
4
4
|
export function identityInitial(user) {
|
|
@@ -25,6 +25,8 @@ export const IdentityMenu = defineComponent({
|
|
|
25
25
|
props: {
|
|
26
26
|
user: { type: Object, default: null },
|
|
27
27
|
isAuthenticated: { type: Boolean, default: false },
|
|
28
|
+
// `default: undefined` permet de distinguer contrôlé / non-contrôlé.
|
|
29
|
+
open: { type: Boolean, default: undefined },
|
|
28
30
|
devicesHref: { type: String, default: "#" },
|
|
29
31
|
settingsHref: { type: String, default: "#" },
|
|
30
32
|
loginLabel: { type: String, default: "Se connecter" },
|
|
@@ -34,20 +36,39 @@ export const IdentityMenu = defineComponent({
|
|
|
34
36
|
variant: { type: String, default: "dropdown" },
|
|
35
37
|
class: { type: String, default: undefined },
|
|
36
38
|
},
|
|
37
|
-
|
|
39
|
+
// `openChange` notifie le parent (pattern contrôlé/non-contrôlé, aligné 3 fw).
|
|
40
|
+
// `update:open` permet aussi un v-model:open idiomatique côté Vue.
|
|
41
|
+
emits: ["login", "logout", "openChange", "update:open"],
|
|
38
42
|
setup(props, { emit }) {
|
|
39
|
-
|
|
43
|
+
// Pattern contrôlé/non-contrôlé, IDENTIQUE aux 3 fw : si `open` est fourni
|
|
44
|
+
// en prop, le parent contrôle ; sinon un état interne prend le relais.
|
|
45
|
+
const internalOpen = ref(false);
|
|
46
|
+
const isOpen = computed(() => (props.open === undefined ? internalOpen.value : props.open));
|
|
47
|
+
const setOpen = (next) => {
|
|
48
|
+
if (props.open === undefined)
|
|
49
|
+
internalOpen.value = next;
|
|
50
|
+
emit("openChange", next);
|
|
51
|
+
emit("update:open", next);
|
|
52
|
+
};
|
|
40
53
|
const rootEl = ref(null);
|
|
41
54
|
const triggerEl = ref(null);
|
|
55
|
+
// Quel item focuser à la prochaine ouverture : "first" (défaut) ou "last".
|
|
56
|
+
let pendingFocus = "first";
|
|
42
57
|
const onPointerDown = (event) => {
|
|
43
58
|
const target = event.target;
|
|
44
|
-
if (
|
|
45
|
-
|
|
59
|
+
if (isOpen.value && rootEl.value && target && !rootEl.value.contains(target)) {
|
|
60
|
+
// Clic extérieur : ferme ET restaure le focus sur le trigger.
|
|
61
|
+
setOpen(false);
|
|
62
|
+
triggerEl.value?.focus();
|
|
46
63
|
}
|
|
47
64
|
};
|
|
48
|
-
watch(
|
|
65
|
+
watch(isOpen, (value) => {
|
|
49
66
|
if (value) {
|
|
50
67
|
document.addEventListener("pointerdown", onPointerDown);
|
|
68
|
+
// À l'ouverture : focus le 1er item (ou le dernier sur ArrowUp).
|
|
69
|
+
const which = pendingFocus;
|
|
70
|
+
void nextTick(() => focusItem(which === "last" ? -1 : 0));
|
|
71
|
+
pendingFocus = "first";
|
|
51
72
|
}
|
|
52
73
|
else {
|
|
53
74
|
document.removeEventListener("pointerdown", onPointerDown);
|
|
@@ -63,19 +84,30 @@ export const IdentityMenu = defineComponent({
|
|
|
63
84
|
items[((index % len) + len) % len]?.focus();
|
|
64
85
|
};
|
|
65
86
|
const closeAndFocusTrigger = () => {
|
|
66
|
-
|
|
87
|
+
setOpen(false);
|
|
67
88
|
triggerEl.value?.focus();
|
|
68
89
|
};
|
|
69
90
|
const onTriggerKeyDown = (event) => {
|
|
70
91
|
if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
|
|
71
92
|
event.preventDefault();
|
|
72
|
-
|
|
73
|
-
|
|
93
|
+
pendingFocus = "first";
|
|
94
|
+
if (isOpen.value)
|
|
95
|
+
void nextTick(() => focusItem(0));
|
|
96
|
+
else
|
|
97
|
+
setOpen(true);
|
|
74
98
|
}
|
|
75
99
|
else if (event.key === "ArrowUp") {
|
|
76
100
|
event.preventDefault();
|
|
77
|
-
|
|
78
|
-
|
|
101
|
+
pendingFocus = "last";
|
|
102
|
+
if (isOpen.value)
|
|
103
|
+
void nextTick(() => focusItem(-1));
|
|
104
|
+
else
|
|
105
|
+
setOpen(true);
|
|
106
|
+
}
|
|
107
|
+
else if (event.key === "Escape" && isOpen.value) {
|
|
108
|
+
// Esc ferme aussi depuis le trigger (global au composant ouvert).
|
|
109
|
+
event.preventDefault();
|
|
110
|
+
closeAndFocusTrigger();
|
|
79
111
|
}
|
|
80
112
|
};
|
|
81
113
|
const onMenuKeyDown = (event) => {
|
|
@@ -97,11 +129,30 @@ export const IdentityMenu = defineComponent({
|
|
|
97
129
|
event.preventDefault();
|
|
98
130
|
focusItem(items.length - 1);
|
|
99
131
|
}
|
|
132
|
+
else if (event.key === "Tab") {
|
|
133
|
+
// Piège de focus : Tab/Shift+Tab bouclent DANS le menu.
|
|
134
|
+
if (!items.length)
|
|
135
|
+
return;
|
|
136
|
+
event.preventDefault();
|
|
137
|
+
focusItem(current + (event.shiftKey ? -1 : 1));
|
|
138
|
+
}
|
|
100
139
|
else if (event.key === "Escape") {
|
|
101
140
|
event.preventDefault();
|
|
102
141
|
closeAndFocusTrigger();
|
|
103
142
|
}
|
|
104
143
|
};
|
|
144
|
+
// Enter/Space activent l'item courant. Sur un <a>, on suit le href via un
|
|
145
|
+
// clic natif (preventDefault sur Space pour éviter le scroll).
|
|
146
|
+
const onItemKeyDown = (event) => {
|
|
147
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
148
|
+
event.preventDefault();
|
|
149
|
+
event.currentTarget.click();
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
const selectAndClose = () => {
|
|
153
|
+
setOpen(false);
|
|
154
|
+
triggerEl.value?.focus();
|
|
155
|
+
};
|
|
105
156
|
return () => {
|
|
106
157
|
const user = props.user;
|
|
107
158
|
if (!(props.isAuthenticated && user)) {
|
|
@@ -121,9 +172,9 @@ export const IdentityMenu = defineComponent({
|
|
|
121
172
|
ref: triggerEl,
|
|
122
173
|
class: "st-identityMenu__trigger",
|
|
123
174
|
"aria-haspopup": "menu",
|
|
124
|
-
"aria-expanded":
|
|
175
|
+
"aria-expanded": isOpen.value ? "true" : "false",
|
|
125
176
|
"aria-label": `Compte de ${displayName}`,
|
|
126
|
-
onClick: () => (
|
|
177
|
+
onClick: () => setOpen(!isOpen.value),
|
|
127
178
|
onKeydown: onTriggerKeyDown,
|
|
128
179
|
}, [
|
|
129
180
|
h("span", { class: "st-identityMenu__avatar", "aria-hidden": "true" }, identityInitial(user)),
|
|
@@ -133,9 +184,9 @@ export const IdentityMenu = defineComponent({
|
|
|
133
184
|
? h("span", { class: "st-identityMenu__email" }, user.email)
|
|
134
185
|
: null,
|
|
135
186
|
]),
|
|
136
|
-
ChevronDownIcon(
|
|
187
|
+
ChevronDownIcon(isOpen.value),
|
|
137
188
|
]),
|
|
138
|
-
|
|
189
|
+
isOpen.value
|
|
139
190
|
? h("div", {
|
|
140
191
|
class: "st-identityMenu__menu",
|
|
141
192
|
role: "menu",
|
|
@@ -148,14 +199,16 @@ export const IdentityMenu = defineComponent({
|
|
|
148
199
|
class: "st-identityMenu__item",
|
|
149
200
|
role: "menuitem",
|
|
150
201
|
tabindex: "-1",
|
|
151
|
-
onClick:
|
|
202
|
+
onClick: selectAndClose,
|
|
203
|
+
onKeydown: onItemKeyDown,
|
|
152
204
|
}, props.devicesLabel),
|
|
153
205
|
h("a", {
|
|
154
206
|
href: props.settingsHref,
|
|
155
207
|
class: "st-identityMenu__item",
|
|
156
208
|
role: "menuitem",
|
|
157
209
|
tabindex: "-1",
|
|
158
|
-
onClick:
|
|
210
|
+
onClick: selectAndClose,
|
|
211
|
+
onKeydown: onItemKeyDown,
|
|
159
212
|
}, props.settingsLabel),
|
|
160
213
|
h("div", {
|
|
161
214
|
class: "st-identityMenu__divider",
|
|
@@ -168,7 +221,8 @@ export const IdentityMenu = defineComponent({
|
|
|
168
221
|
role: "menuitem",
|
|
169
222
|
tabindex: "-1",
|
|
170
223
|
onClick: () => {
|
|
171
|
-
|
|
224
|
+
setOpen(false);
|
|
225
|
+
triggerEl.value?.focus();
|
|
172
226
|
emit("logout");
|
|
173
227
|
},
|
|
174
228
|
}, props.logoutLabel),
|
package/dist/IdentityMenu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IdentityMenu.js","sourceRoot":"","sources":["../src/IdentityMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,eAAe,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"IdentityMenu.js","sourceRoot":"","sources":["../src/IdentityMenu.ts"],"names":[],"mappings":"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"}
|
package/dist/LanguageToggle.d.ts
CHANGED
|
@@ -3,7 +3,10 @@ export type LanguageToggleProps = {
|
|
|
3
3
|
locale?: LanguageToggleLocale;
|
|
4
4
|
frLabel?: string;
|
|
5
5
|
enLabel?: string;
|
|
6
|
+
/** Libellé du sélecteur (associé via <label for> + aria-label). */
|
|
6
7
|
label?: string;
|
|
8
|
+
/** Id du <select> ; auto-généré et stable si non fourni. */
|
|
9
|
+
selectId?: string;
|
|
7
10
|
variant?: "select" | "accordion";
|
|
8
11
|
accordionLabel?: string;
|
|
9
12
|
class?: string;
|
|
@@ -25,6 +28,10 @@ export declare const LanguageToggle: import("vue").DefineComponent<import("vue")
|
|
|
25
28
|
type: StringConstructor;
|
|
26
29
|
default: string;
|
|
27
30
|
};
|
|
31
|
+
selectId: {
|
|
32
|
+
type: StringConstructor;
|
|
33
|
+
default: undefined;
|
|
34
|
+
};
|
|
28
35
|
variant: {
|
|
29
36
|
type: () => "select" | "accordion";
|
|
30
37
|
default: string;
|
|
@@ -39,7 +46,9 @@ export declare const LanguageToggle: import("vue").DefineComponent<import("vue")
|
|
|
39
46
|
};
|
|
40
47
|
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
41
48
|
[key: string]: any;
|
|
42
|
-
}
|
|
49
|
+
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
50
|
+
[key: string]: any;
|
|
51
|
+
}>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "localeChange"[], "localeChange", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
43
52
|
locale: {
|
|
44
53
|
type: () => LanguageToggleLocale;
|
|
45
54
|
default: string;
|
|
@@ -56,6 +65,10 @@ export declare const LanguageToggle: import("vue").DefineComponent<import("vue")
|
|
|
56
65
|
type: StringConstructor;
|
|
57
66
|
default: string;
|
|
58
67
|
};
|
|
68
|
+
selectId: {
|
|
69
|
+
type: StringConstructor;
|
|
70
|
+
default: undefined;
|
|
71
|
+
};
|
|
59
72
|
variant: {
|
|
60
73
|
type: () => "select" | "accordion";
|
|
61
74
|
default: string;
|
|
@@ -77,6 +90,7 @@ export declare const LanguageToggle: import("vue").DefineComponent<import("vue")
|
|
|
77
90
|
variant: "select" | "accordion";
|
|
78
91
|
frLabel: string;
|
|
79
92
|
enLabel: string;
|
|
93
|
+
selectId: string;
|
|
80
94
|
accordionLabel: string;
|
|
81
95
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
82
96
|
//# sourceMappingURL=LanguageToggle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LanguageToggle.d.ts","sourceRoot":"","sources":["../src/LanguageToggle.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"LanguageToggle.d.ts","sourceRoot":"","sources":["../src/LanguageToggle.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAyBF,eAAO,MAAM,cAAc;;cAGG,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;cAKzB,MAAM,QAAQ,GAAG,WAAW;;;;;;;;;;;;;;;;;cAL7B,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;cAKzB,MAAM,QAAQ,GAAG,WAAW;;;;;;;;;;;;;;;;;;;;;;4EAmFzD,CAAC"}
|
package/dist/LanguageToggle.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { defineComponent, h, ref } from "vue";
|
|
2
2
|
import { classNames } from "./classNames.js";
|
|
3
|
+
// Compteur module pour un id de <select> stable, déterministe et SSR-safe.
|
|
4
|
+
let languageToggleIdCounter = 0;
|
|
3
5
|
function ChevronDownIcon(open) {
|
|
4
6
|
return h("svg", {
|
|
5
7
|
width: 16,
|
|
@@ -22,6 +24,7 @@ export const LanguageToggle = defineComponent({
|
|
|
22
24
|
frLabel: { type: String, default: "FR" },
|
|
23
25
|
enLabel: { type: String, default: "EN" },
|
|
24
26
|
label: { type: String, default: "Langue" },
|
|
27
|
+
selectId: { type: String, default: undefined },
|
|
25
28
|
variant: { type: String, default: "select" },
|
|
26
29
|
accordionLabel: { type: String, default: "Langue" },
|
|
27
30
|
class: { type: String, default: undefined },
|
|
@@ -29,6 +32,7 @@ export const LanguageToggle = defineComponent({
|
|
|
29
32
|
emits: ["localeChange"],
|
|
30
33
|
setup(props, { emit }) {
|
|
31
34
|
const open = ref(false);
|
|
35
|
+
const resolvedSelectId = props.selectId ?? `st-languageToggle-${++languageToggleIdCounter}`;
|
|
32
36
|
const choose = (next) => emit("localeChange", next);
|
|
33
37
|
return () => {
|
|
34
38
|
if (props.variant === "accordion") {
|
|
@@ -57,15 +61,22 @@ export const LanguageToggle = defineComponent({
|
|
|
57
61
|
: null,
|
|
58
62
|
]);
|
|
59
63
|
}
|
|
60
|
-
return
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
return [
|
|
65
|
+
h("label", {
|
|
66
|
+
class: "st-visually-hidden st-languageToggle__srLabel",
|
|
67
|
+
for: resolvedSelectId,
|
|
68
|
+
}, props.label),
|
|
69
|
+
h("select", {
|
|
70
|
+
id: resolvedSelectId,
|
|
71
|
+
class: classNames("st-languageToggle__select", props.class),
|
|
72
|
+
value: props.locale,
|
|
73
|
+
"aria-label": props.label,
|
|
74
|
+
onChange: (event) => choose(event.target.value),
|
|
75
|
+
}, [
|
|
76
|
+
h("option", { value: "fr" }, props.frLabel),
|
|
77
|
+
h("option", { value: "en" }, props.enLabel),
|
|
78
|
+
]),
|
|
79
|
+
];
|
|
69
80
|
};
|
|
70
81
|
},
|
|
71
82
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LanguageToggle.js","sourceRoot":"","sources":["../src/LanguageToggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"LanguageToggle.js","sourceRoot":"","sources":["../src/LanguageToggle.ts"],"names":[],"mappings":"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"}
|