@sentropic/design-system-vue 0.21.0 → 0.23.0

package/dist/DivergentBarChart.d.ts

@@ -0,0 +1,93 @@
+export type DivergentBarChartTone = "positive" | "negative" | "neutral";
+export type DivergentBarChartDatum = {
+    label: string;
+    value: number;
+    tone?: DivergentBarChartTone;
+};
+export type DivergentBarChartProps = {
+    data: DivergentBarChartDatum[];
+    width?: number;
+    height?: number;
+    domain?: [number, number];
+    format?: (value: number) => string;
+    showLegend?: boolean;
+    label: string;
+    class?: string;
+};
+export declare const DivergentBarChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => DivergentBarChartDatum[];
+        required: true;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    domain: {
+        type: () => [number, number];
+        default: undefined;
+    };
+    format: {
+        type: () => (value: number) => string;
+        default: undefined;
+    };
+    showLegend: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: () => DivergentBarChartDatum[];
+        required: true;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    domain: {
+        type: () => [number, number];
+        default: undefined;
+    };
+    format: {
+        type: () => (value: number) => string;
+        default: undefined;
+    };
+    showLegend: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    width: number;
+    height: number;
+    domain: [number, number];
+    format: (value: number) => string;
+    showLegend: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=DivergentBarChart.d.ts.map

package/dist/DivergentBarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DivergentBarChart.d.ts","sourceRoot":"","sources":["../src/DivergentBarChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAExE,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,qBAAqB,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,sBAAsB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiCF,eAAO,MAAM,iBAAiB;;cAGH,MAAM,sBAAsB,EAAE;;;;;;;;;;;;cAGjB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;;;;cACnB,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;;;;;;;;;;;;;;;;;;;cAJ/C,MAAM,sBAAsB,EAAE;;;;;;;;;;;;cAGjB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;;;;cACnB,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;;;;;;;;;;;;;;;;;;;;oBAAjB,MAAM,KAAK,MAAM;;4EA6IxE,CAAC"}

package/dist/DivergentBarChart.js

@@ -0,0 +1,158 @@
+import { defineComponent, h, ref } from "vue";
+import { classNames } from "./classNames.js";
+import { chartDataList, formatTick, niceTicks, scaleLinear } from "./chartScale.js";
+const MARGIN = { top: 14, right: 16, bottom: 34, left: 88 };
+function signFor(value) {
+    if (value > 0)
+        return "positive";
+    if (value < 0)
+        return "negative";
+    return "zero";
+}
+function toneFor(datum) {
+    if (datum.tone)
+        return datum.tone;
+    if (datum.value > 0)
+        return "positive";
+    if (datum.value < 0)
+        return "negative";
+    return "neutral";
+}
+function resolveDomain(data, domain) {
+    const plotDomain = domain && Number.isFinite(domain[0]) && Number.isFinite(domain[1]) && domain[0] < domain[1] && domain[0] <= 0 && domain[1] >= 0
+        ? domain
+        : null;
+    if (plotDomain) {
+        const ticks = niceTicks(plotDomain[0], plotDomain[1]).filter((tick) => tick >= plotDomain[0] && tick <= plotDomain[1]);
+        return { domainMin: plotDomain[0], domainMax: plotDomain[1], ticks: ticks.length ? ticks : [0] };
+    }
+    const maxAbs = Math.max(1, ...data.map((d) => Math.abs(d.value)));
+    const ticks = niceTicks(-maxAbs, maxAbs);
+    return { domainMin: ticks[0], domainMax: ticks[ticks.length - 1], ticks };
+}
+export const DivergentBarChart = defineComponent({
+    name: "DivergentBarChart",
+    props: {
+        data: { type: Array, required: true },
+        width: { type: Number, default: 480 },
+        height: { type: Number, default: 260 },
+        domain: { type: Array, default: undefined },
+        format: { type: Function, default: undefined },
+        showLegend: { type: Boolean, default: true },
+        label: { type: String, required: true },
+        class: { type: String, default: undefined },
+    },
+    setup(props, { attrs }) {
+        const hoveredIndex = ref(null);
+        function handleVisualPointerMove(event) {
+            const target = event.target;
+            if (!(target instanceof Element)) {
+                hoveredIndex.value = null;
+                return;
+            }
+            const index = Number(target.getAttribute("data-chart-index"));
+            hoveredIndex.value = Number.isInteger(index) ? index : null;
+        }
+        return () => {
+            const width = props.width ?? 480;
+            const height = props.height ?? 260;
+            const formatter = props.format ?? formatTick;
+            const validData = props.data.filter((d) => Number.isFinite(d.value));
+            const { domainMin, domainMax, ticks } = resolveDomain(validData, props.domain);
+            const plotWidth = Math.max(width - MARGIN.left - MARGIN.right, 1);
+            const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+            const zeroAxisX = MARGIN.left + scaleLinear(0, domainMin, domainMax, 0, plotWidth);
+            const bars = validData.length === 0
+                ? []
+                : validData.map((datum, index) => {
+                    const band = plotHeight / validData.length;
+                    const barHeight = Math.max(band * 0.56, 1);
+                    const valueX = MARGIN.left + scaleLinear(datum.value, domainMin, domainMax, 0, plotWidth);
+                    const x = Math.min(zeroAxisX, valueX);
+                    const barWidth = Math.max(Math.abs(valueX - zeroAxisX), 0.5);
+                    const y = MARGIN.top + band * index + (band - barHeight) / 2;
+                    return {
+                        datum,
+                        index,
+                        x,
+                        y,
+                        width: barWidth,
+                        height: barHeight,
+                        cx: datum.value === 0 ? zeroAxisX : x + barWidth / 2,
+                        cy: y + barHeight / 2,
+                        sign: signFor(datum.value),
+                        tone: toneFor(datum),
+                    };
+                });
+            const grid = ticks.map((tick) => {
+                const x = MARGIN.left + scaleLinear(tick, domainMin, domainMax, 0, plotWidth);
+                return [
+                    h("line", { key: `g${tick}`, class: "st-divergentBarChart__grid", x1: x, x2: x, y1: MARGIN.top, y2: height - MARGIN.bottom }),
+                    h("text", { key: `t${tick}`, class: "st-divergentBarChart__tickLabel", x, y: height - MARGIN.bottom + 16, "text-anchor": "middle" }, formatTick(tick)),
+                ];
+            });
+            const barNodes = bars.flatMap((bar) => [
+                h("text", { key: `l${bar.datum.label}`, class: "st-divergentBarChart__categoryLabel", x: MARGIN.left - 8, y: bar.cy, "text-anchor": "end", "dominant-baseline": "middle" }, bar.datum.label),
+                h("rect", {
+                    key: `b${bar.datum.label}`,
+                    class: classNames("st-divergentBarChart__bar", `st-divergentBarChart__bar--${bar.sign}`, `st-divergentBarChart__bar--${bar.tone}`),
+                    x: bar.x,
+                    y: bar.y,
+                    width: bar.width,
+                    height: bar.height,
+                    rx: "2",
+                    "data-chart-index": bar.index,
+                    "data-chart-key": bar.datum.label,
+                    onPointermove: handleVisualPointerMove,
+                }),
+            ]);
+            const hoveredBar = hoveredIndex.value !== null ? bars[hoveredIndex.value] : undefined;
+            return h("div", { ...attrs, class: classNames("st-divergentBarChart", props.class) }, [
+                h("div", {
+                    class: "st-divergentBarChart__visual",
+                    role: "img",
+                    "aria-label": props.label,
+                    onPointermove: handleVisualPointerMove,
+                    onPointerleave: () => {
+                        hoveredIndex.value = null;
+                    },
+                }, [
+                    h("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", width: "100%", height: "100%", focusable: "false", "aria-hidden": "true" }, [
+                        grid,
+                        h("line", { class: "st-divergentBarChart__axis", x1: MARGIN.left, x2: width - MARGIN.right, y1: height - MARGIN.bottom, y2: height - MARGIN.bottom }),
+                        h("line", { class: "st-divergentBarChart__zeroAxis", x1: zeroAxisX, x2: zeroAxisX, y1: MARGIN.top, y2: height - MARGIN.bottom }),
+                        barNodes,
+                    ]),
+                ]),
+                chartDataList(props.label, validData.map((d) => `${d.label}: ${formatter(d.value)}`)),
+                hoveredBar
+                    ? h("div", {
+                        class: "st-divergentBarChart__tooltip",
+                        role: "presentation",
+                        style: { left: `${(hoveredBar.cx / width) * 100}%`, top: `${(hoveredBar.cy / height) * 100}%` },
+                    }, [
+                        h("span", { class: "st-divergentBarChart__tooltipLabel" }, hoveredBar.datum.label),
+                        h("span", { class: "st-divergentBarChart__tooltipValue" }, formatter(hoveredBar.datum.value)),
+                    ])
+                    : null,
+                props.showLegend
+                    ? h("ul", { class: "st-divergentBarChart__legend" }, [
+                        h("li", { class: "st-divergentBarChart__legendItem" }, [
+                            h("span", { class: "st-divergentBarChart__legendSwatch st-divergentBarChart__legendSwatch--positive", "aria-hidden": "true" }),
+                            "Positive",
+                        ]),
+                        h("li", { class: "st-divergentBarChart__legendItem" }, [
+                            h("span", { class: "st-divergentBarChart__legendSwatch st-divergentBarChart__legendSwatch--negative", "aria-hidden": "true" }),
+                            "Negative",
+                        ]),
+                        h("li", { class: "st-divergentBarChart__legendItem" }, [
+                            h("span", { class: "st-divergentBarChart__legendSwatch st-divergentBarChart__legendSwatch--neutral", "aria-hidden": "true" }),
+                            "Zero",
+                        ]),
+                    ])
+                    : null,
+            ]);
+        };
+    },
+});
+//# sourceMappingURL=DivergentBarChart.js.map

package/dist/DivergentBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DivergentBarChart.js","sourceRoot":"","sources":["../src/DivergentBarChart.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,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAqBpF,MAAM,MAAM,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAW,CAAC;AAErE,SAAS,OAAO,CAAC,KAAa;IAC5B,IAAI,KAAK,GAAG,CAAC;QAAE,OAAO,UAAU,CAAC;IACjC,IAAI,KAAK,GAAG,CAAC;QAAE,OAAO,UAAU,CAAC;IACjC,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,OAAO,CAAC,KAA6B;IAC5C,IAAI,KAAK,CAAC,IAAI;QAAE,OAAO,KAAK,CAAC,IAAI,CAAC;IAClC,IAAI,KAAK,CAAC,KAAK,GAAG,CAAC;QAAE,OAAO,UAAU,CAAC;IACvC,IAAI,KAAK,CAAC,KAAK,GAAG,CAAC;QAAE,OAAO,UAAU,CAAC;IACvC,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,aAAa,CAAC,IAA8B,EAAE,MAAyB;IAC9E,MAAM,UAAU,GACd,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;QAC7H,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,IAAI,CAAC;IAEX,IAAI,UAAU,EAAE,CAAC;QACf,MAAM,KAAK,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,IAAI,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QACvH,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACnG,CAAC;IAED,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAClE,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;AAC5E,CAAC;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAC/C,IAAI,EAAE,mBAAmB;IACzB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,KAAuC,EAAE,QAAQ,EAAE,IAAI,EAAE;QACvE,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;QACrC,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;QACtC,MAAM,EAAE,EAAE,IAAI,EAAE,KAA0C,EAAE,OAAO,EAAE,SAAS,EAAE;QAChF,MAAM,EAAE,EAAE,IAAI,EAAE,QAAsD,EAAE,OAAO,EAAE,SAAS,EAAE;QAC5F,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;QAC5C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QACvC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,MAAM,YAAY,GAAG,GAAG,CAAgB,IAAI,CAAC,CAAC;QAE9C,SAAS,uBAAuB,CAAC,KAAmB;YAClD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;YAC5B,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,EAAE,CAAC;gBACjC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC;gBAC1B,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;YAC9D,YAAY,CAAC,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;QAC9D,CAAC;QAED,OAAO,GAAG,EAAE;YACV,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,GAAG,CAAC;YACjC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,GAAG,CAAC;YACnC,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,IAAI,UAAU,CAAC;YAC7C,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YACrE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAC/E,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAClE,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;YACpE,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,GAAG,WAAW,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;YAEnF,MAAM,IAAI,GACR,SAAS,CAAC,MAAM,KAAK,CAAC;gBACpB,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;oBAC7B,MAAM,IAAI,GAAG,UAAU,GAAG,SAAS,CAAC,MAAM,CAAC;oBAC3C,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;oBAC3C,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;oBAC1F,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;oBACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GAAG,CAAC,CAAC;oBAC7D,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;oBAC7D,OAAO;wBACL,KAAK;wBACL,KAAK;wBACL,CAAC;wBACD,CAAC;wBACD,KAAK,EAAE,QAAQ;wBACf,MAAM,EAAE,SAAS;wBACjB,EAAE,EAAE,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,GAAG,CAAC;wBACpD,EAAE,EAAE,CAAC,GAAG,SAAS,GAAG,CAAC;wBACrB,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;wBAC1B,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC;qBACrB,CAAC;gBACJ,CAAC,CAAC,CAAC;YAET,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAC9B,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;gBAC9E,OAAO;oBACL,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,IAAI,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC;oBAC7H,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,IAAI,EAAE,EAAE,KAAK,EAAE,iCAAiC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,GAAG,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;iBACvJ,CAAC;YACJ,CAAC,CAAC,CAAC;YAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC;gBACrC,CAAC,CACC,MAAM,EACN,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,qCAAqC,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,EAChK,GAAG,CAAC,KAAK,CAAC,KAAK,CAChB;gBACD,CAAC,CAAC,MAAM,EAAE;oBACR,GAAG,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE;oBAC1B,KAAK,EAAE,UAAU,CAAC,2BAA2B,EAAE,8BAA8B,GAAG,CAAC,IAAI,EAAE,EAAE,8BAA8B,GAAG,CAAC,IAAI,EAAE,CAAC;oBAClI,CAAC,EAAE,GAAG,CAAC,CAAC;oBACR,CAAC,EAAE,GAAG,CAAC,CAAC;oBACR,KAAK,EAAE,GAAG,CAAC,KAAK;oBAChB,MAAM,EAAE,GAAG,CAAC,MAAM;oBAClB,EAAE,EAAE,GAAG;oBACP,kBAAkB,EAAE,GAAG,CAAC,KAAK;oBAC7B,gBAAgB,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK;oBACjC,aAAa,EAAE,uBAAuB;iBACvC,CAAC;aACH,CAAC,CAAC;YAEH,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YAEtF,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,sBAAsB,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE;gBACpF,CAAC,CACC,KAAK,EACL;oBACE,KAAK,EAAE,8BAA8B;oBACrC,IAAI,EAAE,KAAK;oBACX,YAAY,EAAE,KAAK,CAAC,KAAK;oBACzB,aAAa,EAAE,uBAAuB;oBACtC,cAAc,EAAE,GAAG,EAAE;wBACnB,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC;oBAC5B,CAAC;iBACF,EACD;oBACE,CAAC,CACC,KAAK,EACL,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE,EAAE,mBAAmB,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,EACrJ;wBACE,IAAI;wBACJ,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,KAAK,GAAG,MAAM,CAAC,KAAK,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC;wBACrJ,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,gCAAgC,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC;wBAChI,QAAQ;qBACT,CACF;iBACF,CACF;gBACD,aAAa,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;gBACrF,UAAU;oBACR,CAAC,CAAC,CAAC,CACC,KAAK,EACL;wBACE,KAAK,EAAE,+BAA+B;wBACtC,IAAI,EAAE,cAAc;wBACpB,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,CAAC,UAAU,CAAC,EAAE,GAAG,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,UAAU,CAAC,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE;qBAChG,EACD;wBACE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,oCAAoC,EAAE,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC;wBAClF,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,oCAAoC,EAAE,EAAE,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;qBAC9F,CACF;oBACH,CAAC,CAAC,IAAI;gBACR,KAAK,CAAC,UAAU;oBACd,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,8BAA8B,EAAE,EAAE;wBACjD,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,kCAAkC,EAAE,EAAE;4BACrD,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,iFAAiF,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC;4BAC9H,UAAU;yBACX,CAAC;wBACF,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,kCAAkC,EAAE,EAAE;4BACrD,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,iFAAiF,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC;4BAC9H,UAAU;yBACX,CAAC;wBACF,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,kCAAkC,EAAE,EAAE;4BACrD,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,gFAAgF,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC;4BAC7H,MAAM;yBACP,CAAC;qBACH,CAAC;oBACJ,CAAC,CAAC,IAAI;aACT,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/GaugeChart.d.ts

@@ -124,9 +124,9 @@ export declare const GaugeChart: import("vue").DefineComponent<import("vue").Ext
     size: number;
     min: number;
     max: number;
+    format: GaugeChartFormat;
     thickness: number;
     thresholds: GaugeChartThreshold[];
-    format: GaugeChartFormat;
     unit: string;
     startAngle: number;
     endAngle: number;

package/dist/RangeSlider.d.ts

@@ -0,0 +1,187 @@
+import type { PropType } from "vue";
+export type RangeSliderSize = "sm" | "md" | "lg";
+export type RangeSliderProps = {
+    /** Valeur contrôlée via v-model [poignée basse, poignée haute]. */
+    modelValue?: [number, number];
+    /** Alias contrôlé sans v-model. */
+    value?: [number, number];
+    /** Valeur initiale en mode non-contrôlé. Défaut [min, max]. */
+    defaultValue?: [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: RangeSliderSize;
+    disabled?: boolean;
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    showValue?: boolean;
+    valueFormatter?: (value: number) => string;
+    ariaLabelMin?: string;
+    ariaLabelMax?: string;
+    class?: string;
+};
+export declare const RangeSlider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<[number, number]>;
+        default: undefined;
+    };
+    value: {
+        type: PropType<[number, number]>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<[number, number]>;
+        default: undefined;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: () => RangeSliderSize;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    helperText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    errorText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valueFormatter: {
+        type: PropType<(value: number) => string>;
+        default: undefined;
+    };
+    ariaLabelMin: {
+        type: StringConstructor;
+        default: string;
+    };
+    ariaLabelMax: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<[number, number]>;
+        default: undefined;
+    };
+    value: {
+        type: PropType<[number, number]>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<[number, number]>;
+        default: undefined;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: () => RangeSliderSize;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    helperText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    errorText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valueFormatter: {
+        type: PropType<(value: number) => string>;
+        default: undefined;
+    };
+    ariaLabelMin: {
+        type: StringConstructor;
+        default: string;
+    };
+    ariaLabelMax: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    class: string;
+    label: string;
+    invalid: boolean;
+    disabled: boolean;
+    size: RangeSliderSize;
+    min: number;
+    max: number;
+    value: [number, number];
+    helperText: string;
+    modelValue: [number, number];
+    errorText: string;
+    step: number;
+    defaultValue: [number, number];
+    showValue: boolean;
+    valueFormatter: (value: number) => string;
+    ariaLabelMin: string;
+    ariaLabelMax: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=RangeSlider.d.ts.map

package/dist/RangeSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../src/RangeSlider.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,mEAAmE;IACnE,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,mCAAmC;IACnC,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW;;cAGoB,QAAQ,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;cAC/B,QAAQ,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;cACnB,QAAQ,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;;;;;;;;;;;;;cAI5C,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAOT,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;;;;;;;;;;;;;;;;;;;cAb/B,QAAQ,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;cAC/B,QAAQ,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;cACnB,QAAQ,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;;;;;;;;;;;;;cAI5C,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAOT,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAAlB,MAAM,KAAK,MAAM;;;4EAqNxE,CAAC"}

package/dist/RangeSlider.js

@@ -0,0 +1,191 @@
+import { defineComponent, h, ref } from "vue";
+import { classNames } from "./classNames.js";
+export const RangeSlider = defineComponent({
+    name: "RangeSlider",
+    props: {
+        modelValue: { type: Array, default: undefined },
+        value: { type: Array, default: undefined },
+        defaultValue: { type: Array, default: undefined },
+        min: { type: Number, default: 0 },
+        max: { type: Number, default: 100 },
+        step: { type: Number, default: 1 },
+        size: { type: String, default: "md" },
+        disabled: { type: Boolean, default: false },
+        label: { type: String, default: undefined },
+        helperText: { type: String, default: undefined },
+        errorText: { type: String, default: undefined },
+        invalid: { type: Boolean, default: false },
+        showValue: { type: Boolean, default: true },
+        valueFormatter: { type: Function, default: undefined },
+        ariaLabelMin: { type: String, default: "Valeur minimale" },
+        ariaLabelMax: { type: String, default: "Valeur maximale" },
+        class: { type: String, default: undefined },
+    },
+    emits: ["update:modelValue", "change"],
+    setup(props, { emit }) {
+        function clampStep(n) {
+            if (!Number.isFinite(n))
+                return props.min;
+            let v = Math.min(Math.max(n, props.min), props.max);
+            if (Number.isFinite(props.step) && props.step > 0) {
+                v = props.min + Math.round((v - props.min) / props.step) * props.step;
+                v = Math.min(Math.max(v, props.min), props.max);
+            }
+            return v;
+        }
+        function normalizePair(pair) {
+            let lo = clampStep(pair[0]);
+            let hi = clampStep(pair[1]);
+            if (lo > hi) {
+                const mid = lo;
+                lo = Math.min(mid, hi);
+                hi = Math.max(mid, hi);
+            }
+            return [lo, hi];
+        }
+        const internal = ref(normalizePair(props.defaultValue ?? [props.min, props.max]));
+        return () => {
+            const isControlled = Array.isArray(props.modelValue) || Array.isArray(props.value);
+            const source = props.modelValue ?? props.value ?? internal.value ?? [
+                props.min,
+                props.max,
+            ];
+            const current = normalizePair(source);
+            const lowValue = current[0];
+            const highValue = current[1];
+            const lowPercent = props.max === props.min ? 0 : ((lowValue - props.min) / (props.max - props.min)) * 100;
+            const highPercent = props.max === props.min ? 0 : ((highValue - props.min) / (props.max - props.min)) * 100;
+            const lowLabel = props.valueFormatter ? props.valueFormatter(lowValue) : String(lowValue);
+            const highLabel = props.valueFormatter
+                ? props.valueFormatter(highValue)
+                : String(highValue);
+            const isInvalid = props.invalid || Boolean(props.errorText);
+            function commit(next) {
+                const normalized = normalizePair(next);
+                if (!isControlled)
+                    internal.value = normalized;
+                emit("update:modelValue", normalized);
+                emit("change", normalized);
+            }
+            function setLow(raw) {
+                if (props.disabled)
+                    return;
+                const lo = Math.min(clampStep(raw), highValue);
+                commit([lo, highValue]);
+            }
+            function setHigh(raw) {
+                if (props.disabled)
+                    return;
+                const hi = Math.max(clampStep(raw), lowValue);
+                commit([lowValue, hi]);
+            }
+            function keyDelta(event, val) {
+                const big = (Number.isFinite(props.step) && props.step > 0 ? props.step : 1) * 10;
+                const small = Number.isFinite(props.step) && props.step > 0 ? props.step : 1;
+                switch (event.key) {
+                    case "ArrowRight":
+                    case "ArrowUp":
+                        return val + small;
+                    case "ArrowLeft":
+                    case "ArrowDown":
+                        return val - small;
+                    case "PageUp":
+                        return val + big;
+                    case "PageDown":
+                        return val - big;
+                    case "Home":
+                        return props.min;
+                    case "End":
+                        return props.max;
+                    default:
+                        return null;
+                }
+            }
+            function onLowKeydown(event) {
+                if (props.disabled)
+                    return;
+                const next = keyDelta(event, lowValue);
+                if (next === null)
+                    return;
+                event.preventDefault();
+                setLow(next);
+            }
+            function onHighKeydown(event) {
+                if (props.disabled)
+                    return;
+                const next = keyDelta(event, highValue);
+                if (next === null)
+                    return;
+                event.preventDefault();
+                setHigh(next);
+            }
+            const headerChildren = [
+                props.label ? h("span", { class: "st-field__label" }, props.label) : null,
+                props.showValue
+                    ? h("output", { class: "st-rangeSlider__value", "aria-live": "polite" }, `${lowLabel} – ${highLabel}`)
+                    : null,
+            ].filter(Boolean);
+            const lowThumb = h("span", {
+                class: "st-rangeSlider__thumb st-rangeSlider__thumb--low",
+                style: { left: `${lowPercent}%` },
+                role: "slider",
+                tabindex: props.disabled ? -1 : 0,
+                "aria-label": props.ariaLabelMin,
+                "aria-valuemin": props.min,
+                "aria-valuemax": highValue,
+                "aria-valuenow": lowValue,
+                "aria-valuetext": lowLabel,
+                "aria-disabled": props.disabled ? "true" : undefined,
+                onKeydown: onLowKeydown,
+            }, props.showValue
+                ? [h("span", { class: "st-rangeSlider__tooltip" }, lowLabel)]
+                : []);
+            const highThumb = h("span", {
+                class: "st-rangeSlider__thumb st-rangeSlider__thumb--high",
+                style: { left: `${highPercent}%` },
+                role: "slider",
+                tabindex: props.disabled ? -1 : 0,
+                "aria-label": props.ariaLabelMax,
+                "aria-valuemin": lowValue,
+                "aria-valuemax": props.max,
+                "aria-valuenow": highValue,
+                "aria-valuetext": highLabel,
+                "aria-disabled": props.disabled ? "true" : undefined,
+                onKeydown: onHighKeydown,
+            }, props.showValue
+                ? [h("span", { class: "st-rangeSlider__tooltip" }, highLabel)]
+                : []);
+            const track = h("span", {
+                class: "st-rangeSlider__track",
+                "aria-invalid": isInvalid ? "true" : undefined,
+            }, [
+                h("span", {
+                    class: "st-rangeSlider__fill",
+                    style: {
+                        left: `${lowPercent}%`,
+                        width: `${Math.max(0, highPercent - lowPercent)}%`,
+                    },
+                }),
+                lowThumb,
+                highThumb,
+            ]);
+            const footer = props.errorText
+                ? h("span", { class: "st-field__error" }, props.errorText)
+                : props.helperText
+                    ? h("span", { class: "st-field__help" }, props.helperText)
+                    : null;
+            return h("div", { class: classNames("st-field", props.class) }, [
+                h("div", { class: "st-rangeSlider__header" }, headerChildren),
+                h("span", {
+                    class: classNames("st-rangeSlider", `st-rangeSlider--${props.size}`, props.disabled ? "st-rangeSlider--disabled" : undefined),
+                }, [
+                    h("span", { class: "st-rangeSlider__bounds", "aria-hidden": "true" }, String(props.min)),
+                    track,
+                    h("span", { class: "st-rangeSlider__bounds", "aria-hidden": "true" }, String(props.max)),
+                ]),
+                footer,
+            ].filter(Boolean));
+        };
+    },
+});
+//# sourceMappingURL=RangeSlider.js.map