@sentropic/design-system-vue 0.17.0 → 0.17.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/BarChart.d.ts +6 -3
- package/dist/BarChart.d.ts.map +1 -1
- package/dist/BarChart.js +22 -12
- package/dist/BarChart.js.map +1 -1
- package/dist/styles.css +71 -12
- package/package.json +1 -1
package/dist/BarChart.d.ts
CHANGED
|
@@ -18,9 +18,12 @@ export type BarChartProps = {
|
|
|
18
18
|
*/
|
|
19
19
|
selectedKeys?: string[];
|
|
20
20
|
/**
|
|
21
|
-
* Called
|
|
22
|
-
*
|
|
23
|
-
*
|
|
21
|
+
* Called with the bar's key (its `label`) when the user selects it. When
|
|
22
|
+
* provided, an ACCESSIBLE row of filter chips (real <button>s) is rendered
|
|
23
|
+
* OUTSIDE the aria-hidden SVG — that is the keyboard + screen-reader surface.
|
|
24
|
+
* The SVG bars themselves stay decorative (aria-hidden) and only offer a
|
|
25
|
+
* mouse click shortcut for sighted pointer users. When omitted the chart is
|
|
26
|
+
* purely presentational (no interactivity, unchanged).
|
|
24
27
|
*/
|
|
25
28
|
onSelect?: (key: string) => void;
|
|
26
29
|
class?: string;
|
package/dist/BarChart.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../src/BarChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,GACpB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB
|
|
1
|
+
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../src/BarChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,GACpB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAIF,eAAO,MAAM,QAAQ;;cAGM,MAAM,aAAa,EAAE;;;;;;;;;;;;cAGb,MAAM,UAAU,GAAG,YAAY;;;;;;;;cAE/B,MAAM,MAAM,EAAE;;;;cACJ,MAAM,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;cAN7C,MAAM,aAAa,EAAE;;;;;;;;;;;;cAGb,MAAM,UAAU,GAAG,YAAY;;;;;;;;cAE/B,MAAM,MAAM,EAAE;;;;cACJ,MAAM,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;;;;;;;;;oBAAf,MAAM,KAAK,IAAI;;;;;4EAuPtE,CAAC"}
|
package/dist/BarChart.js
CHANGED
|
@@ -28,13 +28,6 @@ export const BarChart = defineComponent({
|
|
|
28
28
|
const index = Number(target.getAttribute("data-chart-index"));
|
|
29
29
|
hoveredIndex.value = Number.isInteger(index) ? index : null;
|
|
30
30
|
}
|
|
31
|
-
function handleBarKeydown(key, event) {
|
|
32
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
33
|
-
// preventDefault on Space so it activates rather than scrolling the page.
|
|
34
|
-
event.preventDefault();
|
|
35
|
-
props.onSelect?.(key);
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
31
|
return () => {
|
|
39
32
|
const width = props.width ?? 480;
|
|
40
33
|
const height = props.height ?? 240;
|
|
@@ -116,6 +109,10 @@ export const BarChart = defineComponent({
|
|
|
116
109
|
const categoryLabels = bars.map((bar) => orientation === "vertical"
|
|
117
110
|
? h("text", { key: `c${bar.datum.label}`, class: "st-barChart__categoryLabel", x: bar.x + bar.width / 2, y: height - MARGIN.bottom + 16, "text-anchor": "middle" }, bar.datum.label)
|
|
118
111
|
: h("text", { key: `c${bar.datum.label}`, class: "st-barChart__categoryLabel", x: MARGIN.left - 6, y: bar.y + bar.height / 2, "text-anchor": "end", "dominant-baseline": "middle" }, bar.datum.label));
|
|
112
|
+
// The bars live inside an aria-hidden SVG, so they are NEVER an accessible
|
|
113
|
+
// surface. When `onSelect` is provided they only carry a mouse click
|
|
114
|
+
// shortcut (cursor:pointer) for sighted pointer users — keyboard + screen
|
|
115
|
+
// readers use the filter-chip buttons rendered below, outside this SVG.
|
|
119
116
|
const barRects = bars.map((bar, i) => {
|
|
120
117
|
const isSelected = selectedSet.has(bar.datum.label);
|
|
121
118
|
return h("rect", {
|
|
@@ -127,14 +124,26 @@ export const BarChart = defineComponent({
|
|
|
127
124
|
height: bar.height,
|
|
128
125
|
rx: "2",
|
|
129
126
|
"data-chart-index": i,
|
|
130
|
-
role: interactive ? "button" : undefined,
|
|
131
|
-
tabindex: interactive ? 0 : undefined,
|
|
132
|
-
"aria-pressed": interactive ? (isSelected ? "true" : "false") : undefined,
|
|
133
|
-
"aria-label": interactive ? `${bar.datum.label}: ${bar.datum.value}` : undefined,
|
|
134
127
|
onClick: interactive ? () => props.onSelect?.(bar.datum.label) : undefined,
|
|
135
|
-
onKeydown: interactive ? (e) => handleBarKeydown(bar.datum.label, e) : undefined,
|
|
136
128
|
});
|
|
137
129
|
});
|
|
130
|
+
// Accessible selection surface — real <button>s OUTSIDE the aria-hidden
|
|
131
|
+
// SVG. This is the keyboard + screen-reader path for filtering.
|
|
132
|
+
const filterGroup = interactive
|
|
133
|
+
? h("div", { class: "st-barChart__filters", role: "group", "aria-label": `Filtrer par ${label}` }, bars.map((bar) => {
|
|
134
|
+
const isSelected = selectedSet.has(bar.datum.label);
|
|
135
|
+
return h("button", {
|
|
136
|
+
key: `f${bar.datum.label}`,
|
|
137
|
+
type: "button",
|
|
138
|
+
class: classNames("st-barChart__filterChip", `st-barChart__filterChip--${bar.tone}`, isSelected && "st-barChart__filterChip--selected"),
|
|
139
|
+
"aria-pressed": isSelected ? "true" : "false",
|
|
140
|
+
onClick: () => props.onSelect?.(bar.datum.label),
|
|
141
|
+
}, [
|
|
142
|
+
h("span", { class: "st-barChart__filterSwatch", "aria-hidden": "true" }),
|
|
143
|
+
`${bar.datum.label}: ${bar.datum.value}`,
|
|
144
|
+
]);
|
|
145
|
+
}))
|
|
146
|
+
: null;
|
|
138
147
|
const hoveredBar = hoveredIndex.value !== null ? bars[hoveredIndex.value] : undefined;
|
|
139
148
|
return h("div", { ...attrs, class: classNames("st-barChart", props.class) }, [
|
|
140
149
|
h("div", {
|
|
@@ -159,6 +168,7 @@ export const BarChart = defineComponent({
|
|
|
159
168
|
...barRects,
|
|
160
169
|
]),
|
|
161
170
|
]),
|
|
171
|
+
filterGroup,
|
|
162
172
|
chartDataList(label, dataValueItems),
|
|
163
173
|
hoveredBar
|
|
164
174
|
? h("div", {
|
package/dist/BarChart.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../src/BarChart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../src/BarChart.ts"],"names":[],"mappings":"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"}
|
package/dist/styles.css
CHANGED
|
@@ -397,24 +397,20 @@
|
|
|
397
397
|
transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
|
|
398
398
|
}
|
|
399
399
|
|
|
400
|
-
.st-barChart__bar:hover
|
|
401
|
-
.st-barChart__bar:focus-visible {
|
|
400
|
+
.st-barChart__bar:hover {
|
|
402
401
|
opacity: 0.82;
|
|
403
402
|
}
|
|
404
403
|
|
|
405
|
-
.
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
/* Non-selected bars are dimmed while a selection is active. */
|
|
404
|
+
/* Non-selected bars are dimmed while a selection is active. Floor kept high
|
|
405
|
+
(0.6) so the colour stays distinguishable — opacity is never the sole cue;
|
|
406
|
+
selection also adds a stroke (shape), and the values stay in the chips +
|
|
407
|
+
ChartDataList. */
|
|
412
408
|
.st-barChart__bar--dim {
|
|
413
|
-
opacity: 0.
|
|
409
|
+
opacity: 0.6;
|
|
414
410
|
}
|
|
415
411
|
/* Hover still lifts a dimmed bar so it stays explorable. */
|
|
416
412
|
.st-barChart__bar--dim:hover {
|
|
417
|
-
opacity: 0.
|
|
413
|
+
opacity: 0.8;
|
|
418
414
|
}
|
|
419
415
|
|
|
420
416
|
/* Selected bar: full opacity + a contrast-safe accent stroke (two signals,
|
|
@@ -436,6 +432,68 @@
|
|
|
436
432
|
.st-barChart__bar--category7 { fill: var(--st-semantic-data-category7); }
|
|
437
433
|
.st-barChart__bar--category8 { fill: var(--st-semantic-data-category8); }
|
|
438
434
|
|
|
435
|
+
/* Accessible filter chips — keyboard + screen-reader selection surface,
|
|
436
|
+
rendered outside the aria-hidden SVG. */
|
|
437
|
+
.st-barChart__filters {
|
|
438
|
+
display: flex;
|
|
439
|
+
flex-wrap: wrap;
|
|
440
|
+
gap: var(--st-spacing-2, 0.5rem);
|
|
441
|
+
margin-top: var(--st-spacing-2, 0.5rem);
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.st-barChart__filterChip {
|
|
445
|
+
align-items: center;
|
|
446
|
+
background: var(--st-semantic-surface-subtle, #f8fafc);
|
|
447
|
+
border: 1px solid var(--st-semantic-border-interactive, #cbd5e1);
|
|
448
|
+
border-radius: var(--st-radius-pill, 999px);
|
|
449
|
+
color: var(--st-semantic-text-secondary, #475569);
|
|
450
|
+
cursor: var(--st-cursor-interactive, pointer);
|
|
451
|
+
display: inline-flex;
|
|
452
|
+
font: inherit;
|
|
453
|
+
font-size: 0.8125rem;
|
|
454
|
+
font-weight: 500;
|
|
455
|
+
gap: var(--st-spacing-1, 0.25rem);
|
|
456
|
+
line-height: 1;
|
|
457
|
+
padding: 0.3125rem var(--st-spacing-2, 0.5rem);
|
|
458
|
+
transition:
|
|
459
|
+
background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
|
|
460
|
+
color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
|
|
461
|
+
border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
.st-barChart__filterChip:hover {
|
|
465
|
+
background: var(--st-semantic-surface-hover, #eef2f7);
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.st-barChart__filterChip:focus-visible {
|
|
469
|
+
outline: 2px solid var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
|
|
470
|
+
outline-offset: 2px;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
/* Selected chip: solid accent fill + matching text — signalled by colour AND
|
|
474
|
+
by aria-pressed, never by opacity alone. */
|
|
475
|
+
.st-barChart__filterChip--selected {
|
|
476
|
+
background: var(--st-semantic-action-primary, #2563eb);
|
|
477
|
+
border-color: var(--st-semantic-action-primary, #2563eb);
|
|
478
|
+
color: var(--st-semantic-text-inverse, #fff);
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
/* Colour swatch echoing the bar tone, for quick visual mapping chip-to-bar. */
|
|
482
|
+
.st-barChart__filterSwatch {
|
|
483
|
+
border-radius: var(--st-radius-sm, 0.25rem);
|
|
484
|
+
display: inline-block;
|
|
485
|
+
height: 0.625rem;
|
|
486
|
+
width: 0.625rem;
|
|
487
|
+
}
|
|
488
|
+
.st-barChart__filterChip--category1 .st-barChart__filterSwatch { background: var(--st-semantic-data-category1); }
|
|
489
|
+
.st-barChart__filterChip--category2 .st-barChart__filterSwatch { background: var(--st-semantic-data-category2); }
|
|
490
|
+
.st-barChart__filterChip--category3 .st-barChart__filterSwatch { background: var(--st-semantic-data-category3); }
|
|
491
|
+
.st-barChart__filterChip--category4 .st-barChart__filterSwatch { background: var(--st-semantic-data-category4); }
|
|
492
|
+
.st-barChart__filterChip--category5 .st-barChart__filterSwatch { background: var(--st-semantic-data-category5); }
|
|
493
|
+
.st-barChart__filterChip--category6 .st-barChart__filterSwatch { background: var(--st-semantic-data-category6); }
|
|
494
|
+
.st-barChart__filterChip--category7 .st-barChart__filterSwatch { background: var(--st-semantic-data-category7); }
|
|
495
|
+
.st-barChart__filterChip--category8 .st-barChart__filterSwatch { background: var(--st-semantic-data-category8); }
|
|
496
|
+
|
|
439
497
|
.st-barChart__tooltip {
|
|
440
498
|
background: var(--st-component-barChart-tooltipBackground, var(--st-semantic-surface-inverse));
|
|
441
499
|
border-radius: var(--st-radius-sm, 0.25rem);
|
|
@@ -462,7 +520,8 @@
|
|
|
462
520
|
}
|
|
463
521
|
|
|
464
522
|
@media (prefers-reduced-motion: reduce) {
|
|
465
|
-
.st-barChart__bar
|
|
523
|
+
.st-barChart__bar,
|
|
524
|
+
.st-barChart__filterChip { transition: none; }
|
|
466
525
|
}
|
|
467
526
|
|
|
468
527
|
.st-breadcrumb {
|