@sentropic/design-system-vue 0.3.0 → 0.4.0

package/dist/BarChart.js

@@ -1,45 +1,152 @@
-import { defineComponent, h } from "vue";
+import { defineComponent, h, ref } from "vue";
 import { classNames } from "./classNames.js";
-const DATA_TONES = [
-    "category1", "category2", "category3", "category4",
-    "category5", "category6", "category7", "category8",
-];
+import { CHART_MARGIN, chartDataList, formatTick, niceTicks, scaleLinear } from "./chartScale.js";
+const MARGIN = CHART_MARGIN;
 export const BarChart = defineComponent({
     name: "BarChart",
     props: {
         data: { type: Array, required: true },
-        label: { type: String, default: "Bar chart" },
-        width: { type: Number, default: 320 },
-        height: { type: Number, default: 160 },
+        width: { type: Number, default: 480 },
+        height: { type: Number, default: 240 },
+        orientation: { type: String, default: "vertical" },
+        label: { type: String, required: true },
         class: { type: String, default: undefined },
     },
     setup(props, { attrs }) {
+        const hoveredIndex = ref(null);
+        function handleLeave() {
+            hoveredIndex.value = 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 ?? 320;
-            const height = props.height ?? 160;
-            const label = props.label ?? "Bar chart";
-            const max = Math.max(...props.data.map((datum) => datum.value ?? datum.y ?? 0), 1);
-            return h("figure", {
-                ...attrs,
-                class: classNames("st-barChart", props.class),
-                "aria-label": label,
-            }, [
-                h("span", { class: "st-visually-hidden" }, label),
-                h("svg", { viewBox: `0 0 ${width} ${height}`, "aria-hidden": "true" }, [
-                    ...props.data.map((datum, index) => {
-                        const value = datum.value ?? datum.y ?? 0;
-                        const barWidth = width / Math.max(props.data.length, 1) - 8;
-                        const barHeight = (value / max) * height;
-                        return h("rect", {
-                            key: index,
-                            class: classNames("st-barChart__bar", `st-barChart__bar--${datum.tone ?? DATA_TONES[index % DATA_TONES.length]}`),
-                            x: index * (barWidth + 8) + 4,
-                            y: height - barHeight,
+            const width = props.width ?? 480;
+            const height = props.height ?? 240;
+            const orientation = props.orientation ?? "vertical";
+            const label = props.label;
+            const data = props.data;
+            const values = data.map((d) => d.value);
+            const minRaw = Math.min(0, ...values);
+            const maxRaw = Math.max(0, ...values);
+            const ticks = niceTicks(minRaw, maxRaw, 5);
+            const domainMin = ticks[0];
+            const domainMax = ticks[ticks.length - 1];
+            const plotWidth = Math.max(width - MARGIN.left - MARGIN.right, 1);
+            const plotHeight = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+            let bars = [];
+            if (data.length !== 0) {
+                if (orientation === "vertical") {
+                    const band = plotWidth / data.length;
+                    const barWidth = band * 0.62;
+                    const zeroY = scaleLinear(0, domainMin, domainMax, plotHeight, 0);
+                    bars = data.map((d, i) => {
+                        const valueY = scaleLinear(d.value, domainMin, domainMax, plotHeight, 0);
+                        const y = Math.min(valueY, zeroY);
+                        const hh = Math.abs(zeroY - valueY);
+                        const x = MARGIN.left + band * i + (band - barWidth) / 2;
+                        return {
+                            x,
+                            y: MARGIN.top + y,
                             width: barWidth,
+                            height: Math.max(hh, 0.5),
+                            cx: MARGIN.left + band * (i + 0.5),
+                            cy: MARGIN.top + valueY,
+                            datum: d,
+                            tone: (d.tone ?? "category1"),
+                        };
+                    });
+                }
+                else {
+                    const band = plotHeight / data.length;
+                    const barHeight = band * 0.62;
+                    const zeroX = scaleLinear(0, domainMin, domainMax, 0, plotWidth);
+                    bars = data.map((d, i) => {
+                        const valueX = scaleLinear(d.value, domainMin, domainMax, 0, plotWidth);
+                        const x = Math.min(valueX, zeroX);
+                        const w = Math.abs(valueX - zeroX);
+                        const y = MARGIN.top + band * i + (band - barHeight) / 2;
+                        return {
+                            x: MARGIN.left + x,
+                            y,
+                            width: Math.max(w, 0.5),
                             height: barHeight,
-                        });
-                    }),
+                            cx: MARGIN.left + valueX,
+                            cy: MARGIN.top + band * (i + 0.5),
+                            datum: d,
+                            tone: (d.tone ?? "category1"),
+                        };
+                    });
+                }
+            }
+            const dataValueItems = data.map((d) => `${d.label}: ${d.value}`);
+            const gridChildren = [];
+            if (orientation === "vertical") {
+                for (const tick of ticks) {
+                    const y = MARGIN.top + scaleLinear(tick, domainMin, domainMax, plotHeight, 0);
+                    gridChildren.push(h("line", { key: `g${tick}`, class: "st-barChart__grid", x1: MARGIN.left, x2: MARGIN.left + plotWidth, y1: y, y2: y }), h("text", { key: `t${tick}`, class: "st-barChart__tickLabel", x: MARGIN.left - 6, y, "text-anchor": "end", "dominant-baseline": "middle" }, formatTick(tick)));
+                }
+            }
+            else {
+                for (const tick of ticks) {
+                    const x = MARGIN.left + scaleLinear(tick, domainMin, domainMax, 0, plotWidth);
+                    gridChildren.push(h("line", { key: `g${tick}`, class: "st-barChart__grid", x1: x, x2: x, y1: MARGIN.top, y2: MARGIN.top + plotHeight }), h("text", { key: `t${tick}`, class: "st-barChart__tickLabel", x, y: height - MARGIN.bottom + 16, "text-anchor": "middle" }, formatTick(tick)));
+                }
+            }
+            const categoryLabels = bars.map((bar) => orientation === "vertical"
+                ? 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)
+                : 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));
+            const barRects = bars.map((bar, i) => h("rect", {
+                key: `b${bar.datum.label}`,
+                class: classNames("st-barChart__bar", `st-barChart__bar--${bar.tone}`),
+                x: bar.x,
+                y: bar.y,
+                width: bar.width,
+                height: bar.height,
+                rx: "2",
+                "data-chart-index": i,
+            }));
+            const hoveredBar = hoveredIndex.value !== null ? bars[hoveredIndex.value] : undefined;
+            return h("div", { ...attrs, class: classNames("st-barChart", props.class) }, [
+                h("div", {
+                    class: "st-barChart__visual",
+                    role: "img",
+                    "aria-label": label,
+                    onPointermove: handleVisualPointerMove,
+                    onPointerleave: handleLeave,
+                }, [
+                    h("svg", {
+                        viewBox: `0 0 ${width} ${height}`,
+                        preserveAspectRatio: "xMidYMid meet",
+                        width: "100%",
+                        height: "100%",
+                        focusable: "false",
+                        "aria-hidden": "true",
+                    }, [
+                        ...gridChildren,
+                        h("line", { class: "st-barChart__axis", x1: MARGIN.left, x2: MARGIN.left, y1: MARGIN.top, y2: height - MARGIN.bottom }),
+                        h("line", { class: "st-barChart__axis", x1: MARGIN.left, x2: width - MARGIN.right, y1: height - MARGIN.bottom, y2: height - MARGIN.bottom }),
+                        ...categoryLabels,
+                        ...barRects,
+                    ]),
                 ]),
+                chartDataList(label, dataValueItems),
+                hoveredBar
+                    ? h("div", {
+                        class: "st-barChart__tooltip",
+                        role: "presentation",
+                        style: `left: ${(hoveredBar.cx / width) * 100}%; top: ${(hoveredBar.cy / height) * 100}%`,
+                    }, [
+                        h("span", { class: "st-barChart__tooltipLabel" }, hoveredBar.datum.label),
+                        h("span", { class: "st-barChart__tooltipValue" }, String(hoveredBar.datum.value)),
+                    ])
+                    : null,
             ]);
         };
     },

package/dist/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../src/BarChart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAa7C,MAAM,UAAU,GAAG;IACjB,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW;IAClD,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW;CACnD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,KAA8B,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC9D,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE;QAC7C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;QACrC,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;QACtC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,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,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,WAAW,CAAC;YACzC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACnF,OAAO,CAAC,CACN,QAAQ,EACR;gBACE,GAAG,KAAK;gBACR,KAAK,EAAE,UAAU,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC;gBAC7C,YAAY,EAAE,KAAK;aACpB,EACD;gBACE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,KAAK,CAAC;gBACjD,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE;oBACrE,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;wBACjC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC;wBAC1C,MAAM,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;wBAC5D,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,MAAM,CAAC;wBACzC,OAAO,CAAC,CAAC,MAAM,EAAE;4BACf,GAAG,EAAE,KAAK;4BACV,KAAK,EAAE,UAAU,CACf,kBAAkB,EAClB,qBAAqB,KAAK,CAAC,IAAI,IAAI,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,EAAE,CAC3E;4BACD,CAAC,EAAE,KAAK,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC;4BAC7B,CAAC,EAAE,MAAM,GAAG,SAAS;4BACrB,KAAK,EAAE,QAAQ;4BACf,MAAM,EAAE,SAAS;yBAClB,CAAC,CAAC;oBACL,CAAC,CAAC;iBACH,CAAC;aACH,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"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;AA2BlG,MAAM,MAAM,GAAG,YAAY,CAAC;AAE5B,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,KAA8B,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC9D,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;QACrC,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;QACtC,WAAW,EAAE,EAAE,IAAI,EAAE,MAAyC,EAAE,OAAO,EAAE,UAAU,EAAE;QACrF,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,WAAW;YAClB,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC;QAC5B,CAAC;QACD,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,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,UAAU,CAAC;YACpD,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YAC1B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;YAExB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;YACxC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,CAAC;YACtC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,CAAC;YACtC,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;YAC3C,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YAC3B,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAC1C,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;YAapE,IAAI,IAAI,GAAU,EAAE,CAAC;YACrB,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACtB,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;oBAC/B,MAAM,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC;oBACrC,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;oBAC7B,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;oBAClE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wBACvB,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;wBACzE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;wBAClC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC;wBACpC,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;wBACzD,OAAO;4BACL,CAAC;4BACD,CAAC,EAAE,MAAM,CAAC,GAAG,GAAG,CAAC;4BACjB,KAAK,EAAE,QAAQ;4BACf,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC;4BACzB,EAAE,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;4BAClC,EAAE,EAAE,MAAM,CAAC,GAAG,GAAG,MAAM;4BACvB,KAAK,EAAE,CAAC;4BACR,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,WAAW,CAAiB;yBAC9C,CAAC;oBACJ,CAAC,CAAC,CAAC;gBACL,CAAC;qBAAM,CAAC;oBACN,MAAM,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC;oBACtC,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;oBAC9B,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;oBACjE,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wBACvB,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;wBACxE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;wBAClC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;wBACnC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;wBACzD,OAAO;4BACL,CAAC,EAAE,MAAM,CAAC,IAAI,GAAG,CAAC;4BAClB,CAAC;4BACD,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC;4BACvB,MAAM,EAAE,SAAS;4BACjB,EAAE,EAAE,MAAM,CAAC,IAAI,GAAG,MAAM;4BACxB,EAAE,EAAE,MAAM,CAAC,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;4BACjC,KAAK,EAAE,CAAC;4BACR,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,WAAW,CAAiB;yBAC9C,CAAC;oBACJ,CAAC,CAAC,CAAC;gBACL,CAAC;YACH,CAAC;YAED,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;YAEjE,MAAM,YAAY,GAA2B,EAAE,CAAC;YAChD,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;gBAC/B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;oBACzB,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;oBAC9E,YAAY,CAAC,IAAI,CACf,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,IAAI,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EACtH,CAAC,CACC,MAAM,EACN,EAAE,GAAG,EAAE,IAAI,IAAI,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,EAChI,UAAU,CAAC,IAAI,CAAC,CACjB,CACF,CAAC;gBACJ,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;oBACzB,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;oBAC9E,YAAY,CAAC,IAAI,CACf,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,IAAI,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,GAAG,UAAU,EAAE,CAAC,EACrH,CAAC,CACC,MAAM,EACN,EAAE,GAAG,EAAE,IAAI,IAAI,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,GAAG,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAChH,UAAU,CAAC,IAAI,CAAC,CACjB,CACF,CAAC;gBACJ,CAAC;YACH,CAAC;YAED,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CACtC,WAAW,KAAK,UAAU;gBACxB,CAAC,CAAC,CAAC,CACC,MAAM,EACN,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,GAAG,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EACtJ,GAAG,CAAC,KAAK,CAAC,KAAK,CAChB;gBACH,CAAC,CAAC,CAAC,CACC,MAAM,EACN,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,EACvK,GAAG,CAAC,KAAK,CAAC,KAAK,CAChB,CACN,CAAC;YAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CACnC,CAAC,CAAC,MAAM,EAAE;gBACR,GAAG,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE;gBAC1B,KAAK,EAAE,UAAU,CAAC,kBAAkB,EAAE,qBAAqB,GAAG,CAAC,IAAI,EAAE,CAAC;gBACtE,CAAC,EAAE,GAAG,CAAC,CAAC;gBACR,CAAC,EAAE,GAAG,CAAC,CAAC;gBACR,KAAK,EAAE,GAAG,CAAC,KAAK;gBAChB,MAAM,EAAE,GAAG,CAAC,MAAM;gBAClB,EAAE,EAAE,GAAG;gBACP,kBAAkB,EAAE,CAAC;aACtB,CAAC,CACH,CAAC;YAEF,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,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE;gBAC3E,CAAC,CACC,KAAK,EACL;oBACE,KAAK,EAAE,qBAAqB;oBAC5B,IAAI,EAAE,KAAK;oBACX,YAAY,EAAE,KAAK;oBACnB,aAAa,EAAE,uBAAuB;oBACtC,cAAc,EAAE,WAAW;iBAC5B,EACD;oBACE,CAAC,CACC,KAAK,EACL;wBACE,OAAO,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE;wBACjC,mBAAmB,EAAE,eAAe;wBACpC,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,SAAS,EAAE,OAAO;wBAClB,aAAa,EAAE,MAAM;qBACtB,EACD;wBACE,GAAG,YAAY;wBACf,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC;wBACvH,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,mBAAmB,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;wBAC5I,GAAG,cAAc;wBACjB,GAAG,QAAQ;qBACZ,CACF;iBACF,CACF;gBACD,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC;gBACpC,UAAU;oBACR,CAAC,CAAC,CAAC,CACC,KAAK,EACL;wBACE,KAAK,EAAE,sBAAsB;wBAC7B,IAAI,EAAE,cAAc;wBACpB,KAAK,EAAE,SAAS,CAAC,UAAU,CAAC,EAAE,GAAG,KAAK,CAAC,GAAG,GAAG,WAAW,CAAC,UAAU,CAAC,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,GAAG;qBAC1F,EACD;wBACE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,2BAA2B,EAAE,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC;wBACzE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,2BAA2B,EAAE,EAAE,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;qBAClF,CACF;oBACH,CAAC,CAAC,IAAI;aACT,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/Combobox.d.ts

@@ -97,12 +97,12 @@ export declare const Combobox: import("vue").DefineComponent<import("vue").Extra
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onUpdate:open"?: ((...args: any[]) => any) | undefined;
 }>, {
+    open: boolean;
     class: string;
     label: undefined;
     size: ComboboxSize;
     value: string;
     placeholder: string;
-    open: boolean;
     allowCustomValue: boolean;
     noResultsLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/ContentSwitcher.d.ts

@@ -10,6 +10,7 @@ export type ContentSwitcherProps = {
     value?: string;
     activeId?: string;
     size?: ContentSwitcherSize;
+    onchange?: (value: string) => void;
     class?: string;
 };
 export declare const ContentSwitcher: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -29,6 +30,10 @@ export declare const ContentSwitcher: import("vue").DefineComponent<import("vue"
         type: () => ContentSwitcherSize;
         default: string;
     };
+    onchange: {
+        type: () => (value: string) => void;
+        default: undefined;
+    };
     class: {
         type: StringConstructor;
         default: undefined;
@@ -52,6 +57,10 @@ export declare const ContentSwitcher: import("vue").DefineComponent<import("vue"
         type: () => ContentSwitcherSize;
         default: string;
     };
+    onchange: {
+        type: () => (value: string) => void;
+        default: undefined;
+    };
     class: {
         type: StringConstructor;
         default: undefined;
@@ -63,5 +72,6 @@ export declare const ContentSwitcher: import("vue").DefineComponent<import("vue"
     size: ContentSwitcherSize;
     value: string;
     activeId: string;
+    onchange: (value: string) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=ContentSwitcher.d.ts.map

package/dist/ContentSwitcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentSwitcher.d.ts","sourceRoot":"","sources":["../src/ContentSwitcher.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAUF,eAAO,MAAM,eAAe;;cAGA,MAAM,mBAAmB,EAAE;;;;;;;;;;;;cAIjC,MAAM,mBAAmB;;;;;;;;;;;cAJnB,MAAM,mBAAmB,EAAE;;;;;;;;;;;;cAIjC,MAAM,mBAAmB;;;;;;;;;;;;;;4EA6C7C,CAAC"}
+{"version":3,"file":"ContentSwitcher.d.ts","sourceRoot":"","sources":["../src/ContentSwitcher.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAKF,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAUF,eAAO,MAAM,eAAe;;cAGA,MAAM,mBAAmB,EAAE;;;;;;;;;;;;cAIjC,MAAM,mBAAmB;;;;cAGF,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;cAP9C,MAAM,mBAAmB,EAAE;;;;;;;;;;;;cAIjC,MAAM,mBAAmB;;;;cAGF,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;;;sBAAf,MAAM,KAAK,IAAI;4EA8CxE,CAAC"}

package/dist/ContentSwitcher.js

@@ -13,6 +13,7 @@ export const ContentSwitcher = defineComponent({
             type: String,
             default: "md",
         },
+        onchange: { type: Function, default: undefined },
         class: { type: String, default: undefined },
     },
     emits: ["change"],
@@ -33,7 +34,10 @@ export const ContentSwitcher = defineComponent({
                     class: classNames("st-contentSwitcher__option st-contentSwitcher__button", itemId === current && "st-contentSwitcher__option--selected"),
                     disabled: item.disabled,
                     "aria-pressed": itemId === current,
-                    onClick: () => emit("change", itemId),
+                    onClick: () => {
+                        emit("change", itemId);
+                        props.onchange?.(itemId);
+                    },
                 }, item.label);
             }));
         };

package/dist/ContentSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentSwitcher.js","sourceRoot":"","sources":["../src/ContentSwitcher.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAmB7C,SAAS,MAAM,CACb,IAAqC,EACrC,KAAa,EACb,MAAc;IAEd,OAAO,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI,KAAK,EAAE,CAAC;AACvD,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC;IAC7C,IAAI,EAAE,iBAAiB;IACvB,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,KAAoC,EAAE,QAAQ,EAAE,IAAI,EAAE;QACrE,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3C,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC9C,IAAI,EAAE;YACJ,IAAI,EAAE,MAAmC;YACzC,OAAO,EAAE,IAAI;SACd;QACD,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,EAAE,CAAC,QAAQ,CAAC;IACjB,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QAC1B,OAAO,GAAG,EAAE;YACV,MAAM,OAAO,GACX,KAAK,CAAC,KAAK;gBACX,KAAK,CAAC,QAAQ;gBACd,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;YAE7C,OAAO,CAAC,CACN,KAAK,EACL;gBACE,GAAG,KAAK;gBACR,KAAK,EAAE,UAAU,CACf,oBAAoB,EACpB,uBAAuB,KAAK,CAAC,IAAI,EAAE,EACnC,KAAK,CAAC,KAAK,CACZ;gBACD,IAAI,EAAE,OAAO;aACd,EACD,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAC9B,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC;gBAC9C,OAAO,CAAC,CACN,QAAQ,EACR;oBACE,GAAG,EAAE,MAAM;oBACX,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,UAAU,CACf,uDAAuD,EACvD,MAAM,KAAK,OAAO,IAAI,sCAAsC,CAC7D;oBACD,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,cAAc,EAAE,MAAM,KAAK,OAAO;oBAClC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;iBACtC,EACD,IAAI,CAAC,KAAe,CACrB,CAAC;YACJ,CAAC,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"ContentSwitcher.js","sourceRoot":"","sources":["../src/ContentSwitcher.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAuB7C,SAAS,MAAM,CACb,IAAqC,EACrC,KAAa,EACb,MAAc;IAEd,OAAO,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI,KAAK,EAAE,CAAC;AACvD,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC;IAC7C,IAAI,EAAE,iBAAiB;IACvB,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,KAAoC,EAAE,QAAQ,EAAE,IAAI,EAAE;QACrE,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3C,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC9C,IAAI,EAAE;YACJ,IAAI,EAAE,MAAmC;YACzC,OAAO,EAAE,IAAI;SACd;QACD,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAoD,EAAE,OAAO,EAAE,SAAS,EAAE;QAC5F,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,EAAE,CAAC,QAAQ,CAAC;IACjB,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QAC1B,OAAO,GAAG,EAAE;YACV,MAAM,OAAO,GACX,KAAK,CAAC,KAAK;gBACX,KAAK,CAAC,QAAQ;gBACd,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;YAE7C,OAAO,CAAC,CACN,KAAK,EACL;gBACE,GAAG,KAAK;gBACR,KAAK,EAAE,UAAU,CACf,oBAAoB,EACpB,uBAAuB,KAAK,CAAC,IAAI,EAAE,EACnC,KAAK,CAAC,KAAK,CACZ;gBACD,IAAI,EAAE,OAAO;aACd,EACD,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAC9B,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC;gBAC9C,OAAO,CAAC,CACN,QAAQ,EACR;oBACE,GAAG,EAAE,MAAM;oBACX,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,UAAU,CACf,uDAAuD,EACvD,MAAM,KAAK,OAAO,IAAI,sCAAsC,CAC7D;oBACD,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,cAAc,EAAE,MAAM,KAAK,OAAO;oBAClC,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;wBACvB,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC;oBAC3B,CAAC;iBACF,EACD,IAAI,CAAC,KAAe,CACrB,CAAC;YACJ,CAAC,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/CopyButton.d.ts

@@ -64,9 +64,9 @@ export declare const CopyButton: import("vue").DefineComponent<import("vue").Ext
 }>, {
     class: string;
     label: string;
+    text: string;
     size: CopyButtonSize;
     value: string;
-    text: string;
     copiedLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=CopyButton.d.ts.map

package/dist/DataTable.d.ts

@@ -1,24 +1,50 @@
-export type DataTableColumn = {
+import { type VNodeChild } from "vue";
+export interface DataTableColumn<R extends DataTableRow = DataTableRow> {
     key: string;
-    label: unknown;
+    label: VNodeChild;
     sortable?: boolean;
     align?: "start" | "center" | "end";
     width?: string;
-    render?: (row: DataTableRow, column: DataTableColumn) => unknown;
-};
-export type DataTableRow = {
+    cell?: (row: R, column: DataTableColumn<R>) => VNodeChild;
+}
+export interface DataTableRow {
     id: string;
     [key: string]: unknown;
-};
+}
+export type DataTableSelectMode = "none" | "single" | "multiple";
 export type DataTableSize = "sm" | "md" | "lg";
+export interface DataTableSort {
+    key: string;
+    direction: "asc" | "desc";
+}
 export type DataTableProps = {
     columns: DataTableColumn[];
     rows: DataTableRow[];
-    caption?: unknown;
+    caption?: VNodeChild;
     size?: DataTableSize;
+    selectable?: DataTableSelectMode;
+    selectedIds?: string[];
+    onSelectionChange?: (selectedIds: string[]) => void;
+    sortable?: boolean;
+    sortBy?: DataTableSort | null;
+    onSortChange?: (sortBy: DataTableSort | null) => void;
     pageSize?: number;
     page?: number;
-    totalItems?: number;
+    onPageChange?: (page: number) => void;
+    selectAllLabel?: string;
+    selectRowLabel?: string;
+    sortAscendingLabel?: string;
+    sortDescendingLabel?: string;
+    sortNoneLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    rangeLabel?: (range: {
+        start: number;
+        end: number;
+        total: number;
+    }) => string;
+    emptyLabel?: string;
+    onRowClick?: (row: DataTableRow) => void;
     class?: string;
 };
 export declare const DataTable: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -31,23 +57,95 @@ export declare const DataTable: import("vue").DefineComponent<import("vue").Extr
         required: true;
     };
     caption: {
-        type: () => unknown;
+        type: () => VNodeChild;
         default: undefined;
     };
     size: {
         type: () => DataTableSize;
         default: string;
     };
+    selectable: {
+        type: () => DataTableSelectMode;
+        default: string;
+    };
+    selectedIds: {
+        type: () => string[];
+        default: undefined;
+    };
+    onSelectionChange: {
+        type: () => (ids: string[]) => void;
+        default: undefined;
+    };
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sortBy: {
+        type: () => DataTableSort | null;
+        default: undefined;
+    };
+    onSortChange: {
+        type: () => (sortBy: DataTableSort | null) => void;
+        default: undefined;
+    };
     pageSize: {
         type: NumberConstructor;
         default: undefined;
     };
     page: {
         type: NumberConstructor;
-        default: number;
+        default: undefined;
     };
-    totalItems: {
-        type: NumberConstructor;
+    onPageChange: {
+        type: () => (page: number) => void;
+        default: undefined;
+    };
+    selectAllLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    selectRowLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    sortAscendingLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    sortDescendingLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    sortNoneLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    previousLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    nextLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    rangeLabel: {
+        type: () => (range: {
+            start: number;
+            end: number;
+            total: number;
+        }) => string;
+        default: ({ start, end, total }: {
+            start: number;
+            end: number;
+            total: number;
+        }) => string;
+    };
+    emptyLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    onRowClick: {
+        type: () => (row: DataTableRow) => void;
         default: undefined;
     };
     class: {
@@ -66,23 +164,95 @@ export declare const DataTable: import("vue").DefineComponent<import("vue").Extr
         required: true;
     };
     caption: {
-        type: () => unknown;
+        type: () => VNodeChild;
         default: undefined;
     };
     size: {
         type: () => DataTableSize;
         default: string;
     };
+    selectable: {
+        type: () => DataTableSelectMode;
+        default: string;
+    };
+    selectedIds: {
+        type: () => string[];
+        default: undefined;
+    };
+    onSelectionChange: {
+        type: () => (ids: string[]) => void;
+        default: undefined;
+    };
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sortBy: {
+        type: () => DataTableSort | null;
+        default: undefined;
+    };
+    onSortChange: {
+        type: () => (sortBy: DataTableSort | null) => void;
+        default: undefined;
+    };
     pageSize: {
         type: NumberConstructor;
         default: undefined;
     };
     page: {
         type: NumberConstructor;
-        default: number;
+        default: undefined;
     };
-    totalItems: {
-        type: NumberConstructor;
+    onPageChange: {
+        type: () => (page: number) => void;
+        default: undefined;
+    };
+    selectAllLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    selectRowLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    sortAscendingLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    sortDescendingLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    sortNoneLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    previousLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    nextLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    rangeLabel: {
+        type: () => (range: {
+            start: number;
+            end: number;
+            total: number;
+        }) => string;
+        default: ({ start, end, total }: {
+            start: number;
+            end: number;
+            total: number;
+        }) => string;
+    };
+    emptyLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    onRowClick: {
+        type: () => (row: DataTableRow) => void;
         default: undefined;
     };
     class: {
@@ -91,10 +261,30 @@ export declare const DataTable: import("vue").DefineComponent<import("vue").Extr
     };
 }>> & Readonly<{}>, {
     class: string;
-    caption: undefined;
+    caption: VNodeChild;
     page: number;
     size: DataTableSize;
+    emptyLabel: string;
+    selectable: DataTableSelectMode;
+    selectedIds: string[];
+    onSelectionChange: (ids: string[]) => void;
+    sortable: boolean;
+    sortBy: DataTableSort | null;
+    onSortChange: (sortBy: DataTableSort | null) => void;
     pageSize: number;
-    totalItems: number;
+    onPageChange: (page: number) => void;
+    selectAllLabel: string;
+    selectRowLabel: string;
+    sortAscendingLabel: string;
+    sortDescendingLabel: string;
+    sortNoneLabel: string;
+    previousLabel: string;
+    nextLabel: string;
+    rangeLabel: (range: {
+        start: number;
+        end: number;
+        total: number;
+    }) => string;
+    onRowClick: (row: DataTableRow) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=DataTable.d.ts.map

package/dist/DataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../src/DataTable.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,eAAe,KAAK,OAAO,CAAC;CAClE,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,SAAS;;cAGQ,MAAM,eAAe,EAAE;;;;cAC1B,MAAM,YAAY,EAAE;;;;cACK,MAAM,OAAO;;;;cACrC,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;cAHjB,MAAM,eAAe,EAAE;;;;cAC1B,MAAM,YAAY,EAAE;;;;cACK,MAAM,OAAO;;;;cACrC,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;4EAoE7C,CAAC"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../src/DataTable.ts"],"names":[],"mappings":"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"}