@omnitend/dashboard-for-laravel 0.28.0 → 0.30.0

package/dist/charts.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Chart entry point — `@omnitend/dashboard-for-laravel/charts` (#142).
+ *
+ * The chart components are the ONLY ones that need `chart.js` / `vue-chartjs`,
+ * so they live behind this separate subpath entry. The main entry
+ * (`@omnitend/dashboard-for-laravel`) never references the chart libraries, so
+ * they are genuinely OPTIONAL peers: a consumer that renders no charts installs
+ * neither and their build no longer fails resolving them.
+ *
+ *   import { DXBarChart } from '@omnitend/dashboard-for-laravel/charts';
+ *
+ * Chart containers are styled by `.dx-chart` in the main stylesheet
+ * (`@omnitend/dashboard-for-laravel/style.css`), which chart consumers already
+ * import for the theme and the `--dx-chart-*` palette variables — so this entry
+ * ships no CSS of its own.
+ */
+export { default as DXBarChart } from "./components/charts/DXBarChart.vue";
+export { default as DXLineChart } from "./components/charts/DXLineChart.vue";
+export { default as DXDoughnutChart } from "./components/charts/DXDoughnutChart.vue";

package/dist/charts.js

@@ -0,0 +1,225 @@
+import { defineComponent as m, computed as i, openBlock as f, createElementBlock as b, createVNode as h, unref as g } from "vue";
+import { Bar as V, Line as O, Doughnut as P } from "vue-chartjs";
+import { Chart as R, registerables as X } from "chart.js";
+const D = (o) => !!o && typeof o == "object" && !Array.isArray(o);
+function p(o, e) {
+  const t = { ...o };
+  for (const [a, n] of Object.entries(e))
+    D(n) && D(t[a]) ? t[a] = p(t[a], n) : t[a] = n;
+  return t;
+}
+let L = !1;
+function y() {
+  L || (R.register(...X), L = !0);
+}
+const A = [
+  ["--dx-chart-1", "#2563eb"],
+  // blue
+  ["--dx-chart-2", "#65a30d"],
+  // lime
+  ["--dx-chart-3", "#7c3aed"],
+  // violet
+  ["--dx-chart-4", "#0d9488"],
+  // teal
+  ["--dx-chart-5", "#ea580c"],
+  // orange
+  ["--dx-chart-6", "#0891b2"],
+  // cyan
+  ["--dx-chart-7", "#d97706"],
+  // amber
+  ["--dx-chart-8", "#db2777"]
+  // pink
+];
+function E() {
+  if (typeof document > "u" || typeof getComputedStyle > "u")
+    return A.map(([, e]) => e);
+  const o = getComputedStyle(document.documentElement);
+  return A.map(([e, t]) => o.getPropertyValue(e).trim() || t);
+}
+function F(o, e) {
+  return typeof document > "u" || typeof getComputedStyle > "u" ? e : getComputedStyle(document.documentElement).getPropertyValue(o).trim() || e;
+}
+function B(o, e) {
+  const t = o.replace(/^#/, "");
+  if (/^[0-9a-f]{6}$/i.test(t)) {
+    const n = parseInt(t.slice(0, 2), 16), s = parseInt(t.slice(2, 4), 16), l = parseInt(t.slice(4, 6), 16);
+    return `rgba(${n}, ${s}, ${l}, ${e})`;
+  }
+  const a = o.match(/^rgba?\(([^)]+)\)$/);
+  if (a) {
+    const [n, s, l] = a[1].split(",").map((r) => r.trim());
+    return `rgba(${n}, ${s}, ${l}, ${e})`;
+  }
+  return o;
+}
+function k(o, e, t, a) {
+  const n = new Intl.NumberFormat(a, {
+    maximumFractionDigits: 2
+  }).format(o);
+  return e === "currency" ? `${t}${n}` : e === "percent" ? `${n}%` : n;
+}
+function v(o) {
+  const {
+    valueFormat: e,
+    currencySymbol: t = "£",
+    locale: a,
+    showLegend: n = !1,
+    hasValueAxis: s = !0
+  } = o, l = B(F("--bs-border-color", "#dee2e6"), 0.6), r = F("--bs-secondary-color", "#6c757d"), u = {
+    responsive: !0,
+    maintainAspectRatio: !1,
+    plugins: {
+      legend: { display: n, labels: { color: r } },
+      tooltip: {
+        callbacks: {
+          label: (c) => {
+            var S, w;
+            const d = ((S = c.parsed) == null ? void 0 : S.y) ?? c.parsed ?? c.raw, C = typeof d == "number" ? d : Number(d), x = Number.isFinite(C) ? k(C, e, t, a) : String(d), $ = ((w = c.dataset) == null ? void 0 : w.label) ?? c.label ?? "";
+            return $ ? `${$}: ${x}` : x;
+          }
+        }
+      }
+    }
+  };
+  return s && (u.scales = {
+    x: {
+      grid: { display: !1 },
+      border: { color: l },
+      ticks: { color: r }
+    },
+    y: {
+      beginAtZero: !0,
+      grid: { color: l, drawBorder: !1 },
+      border: { display: !1 },
+      ticks: {
+        color: r,
+        callback: (c) => k(Number(c), e, t, a)
+      }
+    }
+  }), u;
+}
+function _(o, e, t) {
+  const a = E(), n = o.length === 1;
+  return o.map((s, l) => {
+    const r = { ...s }, u = a[l % a.length];
+    return e === "doughnut" ? (r.backgroundColor === void 0 && (r.backgroundColor = Array.from(
+      { length: t },
+      (c, d) => a[d % a.length]
+    )), r) : e === "line" ? (r.borderColor === void 0 && (r.borderColor = u), r.backgroundColor === void 0 && (r.backgroundColor = B(u, 0.15)), r.tension === void 0 && (r.tension = 0.3), r.fill === void 0 && (r.fill = !0), r.pointRadius === void 0 && (r.pointRadius = 2), r) : (r.backgroundColor === void 0 && (r.backgroundColor = n && t > 1 ? Array.from({ length: t }, () => u) : u), r.borderRadius === void 0 && (r.borderRadius = 4), r);
+  });
+}
+const N = { class: "dx-chart" }, q = /* @__PURE__ */ m({
+  __name: "DXBarChart",
+  props: {
+    labels: {},
+    datasets: {},
+    options: {},
+    valueFormat: {},
+    currencySymbol: { default: "£" },
+    locale: {},
+    showLegend: { type: Boolean, default: void 0 }
+  },
+  setup(o) {
+    y();
+    const e = o, t = i(() => ({
+      labels: e.labels,
+      datasets: _(e.datasets, "bar", e.labels.length)
+    })), a = i(
+      () => p(
+        v({
+          valueFormat: e.valueFormat,
+          currencySymbol: e.currencySymbol,
+          locale: e.locale,
+          showLegend: e.showLegend ?? e.datasets.length > 1,
+          hasValueAxis: !0
+        }),
+        e.options ?? {}
+      )
+    );
+    return (n, s) => (f(), b("div", N, [
+      h(g(V), {
+        data: t.value,
+        options: a.value
+      }, null, 8, ["data", "options"])
+    ]));
+  }
+}), I = { class: "dx-chart" }, z = /* @__PURE__ */ m({
+  __name: "DXLineChart",
+  props: {
+    labels: {},
+    datasets: {},
+    options: {},
+    valueFormat: {},
+    currencySymbol: { default: "£" },
+    locale: {},
+    showLegend: { type: Boolean, default: void 0 }
+  },
+  setup(o) {
+    y();
+    const e = o, t = i(() => ({
+      labels: e.labels,
+      datasets: _(e.datasets, "line", e.labels.length)
+    })), a = i(
+      () => p(
+        v({
+          valueFormat: e.valueFormat,
+          currencySymbol: e.currencySymbol,
+          locale: e.locale,
+          showLegend: e.showLegend ?? e.datasets.length > 1,
+          hasValueAxis: !0
+        }),
+        e.options ?? {}
+      )
+    );
+    return (n, s) => (f(), b("div", I, [
+      h(g(O), {
+        data: t.value,
+        options: a.value
+      }, null, 8, ["data", "options"])
+    ]));
+  }
+}), j = { class: "dx-chart" }, G = /* @__PURE__ */ m({
+  __name: "DXDoughnutChart",
+  props: {
+    labels: {},
+    data: {},
+    datasets: {},
+    options: {},
+    valueFormat: {},
+    currencySymbol: { default: "£" },
+    locale: {},
+    showLegend: { type: Boolean, default: void 0 }
+  },
+  setup(o) {
+    y();
+    const e = o, t = i(
+      () => e.datasets ?? [{ data: e.data ?? [] }]
+    ), a = i(() => ({
+      labels: e.labels,
+      datasets: _(t.value, "doughnut", e.labels.length)
+    })), n = i(
+      () => p(
+        v({
+          valueFormat: e.valueFormat,
+          currencySymbol: e.currencySymbol,
+          locale: e.locale,
+          showLegend: e.showLegend ?? !0,
+          hasValueAxis: !1
+        }),
+        e.options ?? {}
+      )
+    );
+    return (s, l) => (f(), b("div", j, [
+      h(g(P), {
+        data: a.value,
+        options: n.value
+      }, null, 8, ["data", "options"])
+    ]));
+  }
+});
+export {
+  q as DXBarChart,
+  G as DXDoughnutChart,
+  z as DXLineChart
+};
+//# sourceMappingURL=charts.js.map

package/dist/charts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts.js","sources":["../resources/js/components/charts/chartTheme.ts","../resources/js/components/charts/DXBarChart.vue","../resources/js/components/charts/DXLineChart.vue","../resources/js/components/charts/DXDoughnutChart.vue"],"sourcesContent":["/**\n * Shared theming for the DX*Chart wrappers: the dedicated categorical chart\n * palette (--dx-chart-* from the live theme), dashboard-friendly default options (no gridlines /\n * legend clutter, responsive, formatted ticks), and a one-time Chart.js\n * registration. chart.js / vue-chartjs are OPTIONAL peer deps.\n */\nimport { Chart, registerables } from \"chart.js\";\n\nexport type ChartValueFormat = \"number\" | \"currency\" | \"percent\";\n\nconst isPlainObject = (value: unknown): value is Record<string, any> =>\n    !!value && typeof value === \"object\" && !Array.isArray(value);\n\n/** Deep-merge consumer `options` over the themed defaults (arrays replace). */\nexport function mergeOptions(\n    base: Record<string, any>,\n    override: Record<string, any>,\n): Record<string, any> {\n    const result: Record<string, any> = { ...base };\n    for (const [key, value] of Object.entries(override)) {\n        if (isPlainObject(value) && isPlainObject(result[key])) {\n            result[key] = mergeOptions(result[key], value);\n        } else {\n            result[key] = value;\n        }\n    }\n    return result;\n}\n\nlet registered = false;\n\n/**\n * Register Chart.js (idempotent). Uses the full `registerables` set so every\n * controller / scale / element / plugin (incl. Legend, Tooltip, Filler) is\n * available — chart.js is an external peer dep, so this adds no bundle weight.\n */\nexport function registerCharts(): void {\n    if (registered) return;\n    Chart.register(...registerables);\n    registered = true;\n}\n\n// The dedicated data-viz palette (`$dx-chart-palette` in theme.scss) — eight\n// vivid hues in a fixed, CVD-validated order, published as --dx-chart-1..8.\n// Deliberately NOT the semantic --bs-* colours (#141): the base theme colours\n// are dark AA \"emphasis\" shades (too muted for series), and status colours\n// shouldn't impersonate \"series 2\". Fallbacks mirror the shipped theme so\n// charts still render without the CSS (SSR / tests / a consumer who didn't\n// import it). Sync with theme.scss's $dx-chart-palette is enforced by a test\n// that parses the Sass source (charts.test.ts), which is why this is exported.\nexport const PALETTE_VARS: Array<[string, string]> = [\n    [\"--dx-chart-1\", \"#2563eb\"], // blue\n    [\"--dx-chart-2\", \"#65a30d\"], // lime\n    [\"--dx-chart-3\", \"#7c3aed\"], // violet\n    [\"--dx-chart-4\", \"#0d9488\"], // teal\n    [\"--dx-chart-5\", \"#ea580c\"], // orange\n    [\"--dx-chart-6\", \"#0891b2\"], // cyan\n    [\"--dx-chart-7\", \"#d97706\"], // amber\n    [\"--dx-chart-8\", \"#db2777\"], // pink\n];\n\n/** Resolve the themed categorical palette from the document root. */\nexport function getPalette(): string[] {\n    if (typeof document === \"undefined\" || typeof getComputedStyle === \"undefined\") {\n        return PALETTE_VARS.map(([, fallback]) => fallback);\n    }\n    const styles = getComputedStyle(document.documentElement);\n    return PALETTE_VARS.map(([name, fallback]) => {\n        const value = styles.getPropertyValue(name).trim();\n        return value || fallback;\n    });\n}\n\n/** Read a single theme colour (e.g. the body text colour) with a fallback. */\nfunction themeColor(name: string, fallback: string): string {\n    if (typeof document === \"undefined\" || typeof getComputedStyle === \"undefined\") {\n        return fallback;\n    }\n    const value = getComputedStyle(document.documentElement)\n        .getPropertyValue(name)\n        .trim();\n    return value || fallback;\n}\n\n/** Add an alpha channel to a hex or rgb() colour (best-effort). */\nexport function withAlpha(color: string, alpha: number): string {\n    const hex = color.replace(/^#/, \"\");\n    if (/^[0-9a-f]{6}$/i.test(hex)) {\n        const r = parseInt(hex.slice(0, 2), 16);\n        const g = parseInt(hex.slice(2, 4), 16);\n        const b = parseInt(hex.slice(4, 6), 16);\n        return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    }\n    const rgbMatch = color.match(/^rgba?\\(([^)]+)\\)$/);\n    if (rgbMatch) {\n        const [r, g, b] = rgbMatch[1].split(\",\").map((n) => n.trim());\n        return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    }\n    return color;\n}\n\n/** Format a numeric value per the chart's value format (for tick/tooltips). */\nexport function formatValue(\n    value: number,\n    format: ChartValueFormat | undefined,\n    currencySymbol: string,\n    locale?: string,\n): string {\n    const num = new Intl.NumberFormat(locale, {\n        maximumFractionDigits: 2,\n    }).format(value);\n    if (format === \"currency\") return `${currencySymbol}${num}`;\n    if (format === \"percent\") return `${num}%`;\n    return num;\n}\n\nexport interface BaseOptionArgs {\n    valueFormat?: ChartValueFormat;\n    currencySymbol?: string;\n    locale?: string;\n    /** Show the legend (default: false for a single dataset, true for many). */\n    showLegend?: boolean;\n    /** Whether the chart has value axes (bar/line) vs none (doughnut). */\n    hasValueAxis?: boolean;\n}\n\n/** Dashboard default Chart.js options merged under any consumer `options`. */\nexport function baseOptions(args: BaseOptionArgs): Record<string, any> {\n    const {\n        valueFormat,\n        currencySymbol = \"£\",\n        locale,\n        showLegend = false,\n        hasValueAxis = true,\n    } = args;\n\n    const gridColor = withAlpha(themeColor(\"--bs-border-color\", \"#dee2e6\"), 0.6);\n    const tickColor = themeColor(\"--bs-secondary-color\", \"#6c757d\");\n\n    const options: Record<string, any> = {\n        responsive: true,\n        maintainAspectRatio: false,\n        plugins: {\n            legend: { display: showLegend, labels: { color: tickColor } },\n            tooltip: {\n                callbacks: {\n                    label: (ctx: any) => {\n                        const raw = ctx.parsed?.y ?? ctx.parsed ?? ctx.raw;\n                        const value = typeof raw === \"number\" ? raw : Number(raw);\n                        const formatted = Number.isFinite(value)\n                            ? formatValue(value, valueFormat, currencySymbol, locale)\n                            : String(raw);\n                        const label = ctx.dataset?.label ?? ctx.label ?? \"\";\n                        return label ? `${label}: ${formatted}` : formatted;\n                    },\n                },\n            },\n        },\n    };\n\n    if (hasValueAxis) {\n        options.scales = {\n            x: {\n                grid: { display: false },\n                border: { color: gridColor },\n                ticks: { color: tickColor },\n            },\n            y: {\n                beginAtZero: true,\n                grid: { color: gridColor, drawBorder: false },\n                border: { display: false },\n                ticks: {\n                    color: tickColor,\n                    callback: (value: number | string) =>\n                        formatValue(Number(value), valueFormat, currencySymbol, locale),\n                },\n            },\n        };\n    }\n\n    return options;\n}\n\n/**\n * Apply the themed palette to any dataset that doesn't set its own colours.\n * Bar: one colour per dataset (or per bar for a single dataset). Line: a themed\n * stroke + translucent fill. Doughnut/pie: one colour per slice.\n */\nexport function applyPalette(\n    datasets: any[],\n    kind: \"bar\" | \"line\" | \"doughnut\",\n    labelsCount: number,\n): any[] {\n    const palette = getPalette();\n    const single = datasets.length === 1;\n\n    return datasets.map((dataset, index) => {\n        const next = { ...dataset };\n        const color = palette[index % palette.length];\n\n        if (kind === \"doughnut\") {\n            if (next.backgroundColor === undefined) {\n                next.backgroundColor = Array.from(\n                    { length: labelsCount },\n                    (_, i) => palette[i % palette.length],\n                );\n            }\n            return next;\n        }\n\n        if (kind === \"line\") {\n            if (next.borderColor === undefined) next.borderColor = color;\n            if (next.backgroundColor === undefined) {\n                next.backgroundColor = withAlpha(color, 0.15);\n            }\n            if (next.tension === undefined) next.tension = 0.3;\n            if (next.fill === undefined) next.fill = true;\n            if (next.pointRadius === undefined) next.pointRadius = 2;\n            return next;\n        }\n\n        // bar\n        if (next.backgroundColor === undefined) {\n            next.backgroundColor =\n                single && labelsCount > 1\n                    ? Array.from({ length: labelsCount }, () => color)\n                    : color;\n        }\n        if (next.borderRadius === undefined) next.borderRadius = 4;\n        return next;\n    });\n}\n","<!--\n  @component\n  A themed bar chart. Thin wrapper around vue-chartjs (chart.js) with the\n  theme's dedicated chart palette (--dx-chart-1..8) applied and dashboard-friendly defaults (no x gridlines,\n  formatted value ticks, responsive, legend hidden for a single series). Pass\n  `labels` + `datasets`; `options` deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div class=\"dx-chart\">\n    <Bar :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Bar } from \"vue-chartjs\";\nimport {\n  registerCharts,\n  baseOptions,\n  applyPalette,\n  mergeOptions,\n  type ChartValueFormat,\n} from \"./chartTheme\";\n\nregisterCharts();\n\ninterface Props {\n  /** X-axis category labels. */\n  labels: string[];\n  /** Chart.js datasets. Colours are themed when a dataset omits them. */\n  datasets: any[];\n  /** Chart.js options; deep-merged over the themed defaults. */\n  options?: Record<string, any>;\n  /** Format value-axis ticks and tooltips. */\n  valueFormat?: ChartValueFormat;\n  /** Currency symbol for valueFormat: \"currency\" (default \"£\"). */\n  currencySymbol?: string;\n  /** Locale for number formatting. */\n  locale?: string;\n  /** Show the legend (default: only when there is more than one dataset). */\n  showLegend?: boolean;\n}\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? datasets.length > 1` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<Props>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\nconst chartData = computed(() => ({\n  labels: props.labels,\n  datasets: applyPalette(props.datasets, \"bar\", props.labels.length),\n}));\n\nconst mergedOptions = computed(() =>\n  mergeOptions(\n    baseOptions({\n      valueFormat: props.valueFormat,\n      currencySymbol: props.currencySymbol,\n      locale: props.locale,\n      showLegend: props.showLegend ?? props.datasets.length > 1,\n      hasValueAxis: true,\n    }),\n    props.options ?? {},\n  ),\n);\n</script>\n","<!--\n  @component\n  A themed line chart. Thin wrapper around vue-chartjs (chart.js) with the\n  theme's dedicated chart palette applied (--dx-chart-1..8 stroke + translucent fill, smoothed line)\n  and dashboard-friendly defaults. Pass `labels` + `datasets`; `options`\n  deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div class=\"dx-chart\">\n    <Line :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Line } from \"vue-chartjs\";\nimport {\n  registerCharts,\n  baseOptions,\n  applyPalette,\n  mergeOptions,\n  type ChartValueFormat,\n} from \"./chartTheme\";\n\nregisterCharts();\n\ninterface Props {\n  /** X-axis category labels. */\n  labels: string[];\n  /** Chart.js datasets. Colours are themed when a dataset omits them. */\n  datasets: any[];\n  /** Chart.js options; deep-merged over the themed defaults. */\n  options?: Record<string, any>;\n  /** Format value-axis ticks and tooltips. */\n  valueFormat?: ChartValueFormat;\n  /** Currency symbol for valueFormat: \"currency\" (default \"£\"). */\n  currencySymbol?: string;\n  /** Locale for number formatting. */\n  locale?: string;\n  /** Show the legend (default: only when there is more than one dataset). */\n  showLegend?: boolean;\n}\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? datasets.length > 1` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<Props>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\nconst chartData = computed(() => ({\n  labels: props.labels,\n  datasets: applyPalette(props.datasets, \"line\", props.labels.length),\n}));\n\nconst mergedOptions = computed(() =>\n  mergeOptions(\n    baseOptions({\n      valueFormat: props.valueFormat,\n      currencySymbol: props.currencySymbol,\n      locale: props.locale,\n      showLegend: props.showLegend ?? props.datasets.length > 1,\n      hasValueAxis: true,\n    }),\n    props.options ?? {},\n  ),\n);\n</script>\n","<!--\n  @component\n  A themed doughnut chart. Thin wrapper around vue-chartjs (chart.js) with one\n  chart-palette colour (--dx-chart-1..8) per slice and dashboard-friendly defaults. Pass\n  `labels` + either `data` (a number array) or full `datasets`; `options`\n  deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div class=\"dx-chart\">\n    <Doughnut :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Doughnut } from \"vue-chartjs\";\nimport {\n  registerCharts,\n  baseOptions,\n  applyPalette,\n  mergeOptions,\n  type ChartValueFormat,\n} from \"./chartTheme\";\n\nregisterCharts();\n\ninterface Props {\n  /** Slice labels. */\n  labels: string[];\n  /** Convenience: a single number array (one value per label). */\n  data?: number[];\n  /** Full Chart.js datasets (alternative to `data`). */\n  datasets?: any[];\n  /** Chart.js options; deep-merged over the themed defaults. */\n  options?: Record<string, any>;\n  /** Format tooltip values. */\n  valueFormat?: ChartValueFormat;\n  /** Currency symbol for valueFormat: \"currency\" (default \"£\"). */\n  currencySymbol?: string;\n  /** Locale for number formatting. */\n  locale?: string;\n  /** Show the legend (default: true — slices need identifying). */\n  showLegend?: boolean;\n}\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? true` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<Props>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\nconst resolvedDatasets = computed(() =>\n  props.datasets ?? [{ data: props.data ?? [] }],\n);\n\nconst chartData = computed(() => ({\n  labels: props.labels,\n  datasets: applyPalette(resolvedDatasets.value, \"doughnut\", props.labels.length),\n}));\n\nconst mergedOptions = computed(() =>\n  mergeOptions(\n    baseOptions({\n      valueFormat: props.valueFormat,\n      currencySymbol: props.currencySymbol,\n      locale: props.locale,\n      showLegend: props.showLegend ?? true,\n      hasValueAxis: false,\n    }),\n    props.options ?? {},\n  ),\n);\n</script>\n"],"names":["isPlainObject","value","mergeOptions","base","override","result","key","registered","registerCharts","Chart","registerables","PALETTE_VARS","getPalette","fallback","styles","name","themeColor","withAlpha","color","alpha","hex","r","g","b","rgbMatch","n","formatValue","format","currencySymbol","locale","num","baseOptions","args","valueFormat","showLegend","hasValueAxis","gridColor","tickColor","options","ctx","raw","_a","formatted","label","_b","applyPalette","datasets","kind","labelsCount","palette","single","dataset","index","next","_","i","props","__props","chartData","computed","mergedOptions","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_unref","Bar","Line","resolvedDatasets","Doughnut"],"mappings":"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"}

package/dist/charts.umd.cjs

@@ -0,0 +1,2 @@
+(function(l,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("vue-chartjs"),require("chart.js")):typeof define=="function"&&define.amd?define(["exports","vue","vue-chartjs","chart.js"],o):(l=typeof globalThis<"u"?globalThis:l||self,o(l.DashboardForLaravelCharts={},l.Vue,l.VueChartjs,l.Chart))})(this,(function(l,o,f,y){"use strict";const C=r=>!!r&&typeof r=="object"&&!Array.isArray(r);function m(r,e){const t={...r};for(const[n,s]of Object.entries(e))C(s)&&C(t[n])?t[n]=m(t[n],s):t[n]=s;return t}let _=!1;function h(){_||(y.Chart.register(...y.registerables),_=!0)}const v=[["--dx-chart-1","#2563eb"],["--dx-chart-2","#65a30d"],["--dx-chart-3","#7c3aed"],["--dx-chart-4","#0d9488"],["--dx-chart-5","#ea580c"],["--dx-chart-6","#0891b2"],["--dx-chart-7","#d97706"],["--dx-chart-8","#db2777"]];function A(){if(typeof document>"u"||typeof getComputedStyle>"u")return v.map(([,e])=>e);const r=getComputedStyle(document.documentElement);return v.map(([e,t])=>r.getPropertyValue(e).trim()||t)}function $(r,e){return typeof document>"u"||typeof getComputedStyle>"u"?e:getComputedStyle(document.documentElement).getPropertyValue(r).trim()||e}function x(r,e){const t=r.replace(/^#/,"");if(/^[0-9a-f]{6}$/i.test(t)){const s=parseInt(t.slice(0,2),16),c=parseInt(t.slice(2,4),16),d=parseInt(t.slice(4,6),16);return`rgba(${s}, ${c}, ${d}, ${e})`}const n=r.match(/^rgba?\(([^)]+)\)$/);if(n){const[s,c,d]=n[1].split(",").map(a=>a.trim());return`rgba(${s}, ${c}, ${d}, ${e})`}return r}function S(r,e,t,n){const s=new Intl.NumberFormat(n,{maximumFractionDigits:2}).format(r);return e==="currency"?`${t}${s}`:e==="percent"?`${s}%`:s}function b(r){const{valueFormat:e,currencySymbol:t="£",locale:n,showLegend:s=!1,hasValueAxis:c=!0}=r,d=x($("--bs-border-color","#dee2e6"),.6),a=$("--bs-secondary-color","#6c757d"),u={responsive:!0,maintainAspectRatio:!1,plugins:{legend:{display:s,labels:{color:a}},tooltip:{callbacks:{label:i=>{var L,F;const p=((L=i.parsed)==null?void 0:L.y)??i.parsed??i.raw,k=typeof p=="number"?p:Number(p),w=Number.isFinite(k)?S(k,e,t,n):String(p),D=((F=i.dataset)==null?void 0:F.label)??i.label??"";return D?`${D}: ${w}`:w}}}}};return c&&(u.scales={x:{grid:{display:!1},border:{color:d},ticks:{color:a}},y:{beginAtZero:!0,grid:{color:d,drawBorder:!1},border:{display:!1},ticks:{color:a,callback:i=>S(Number(i),e,t,n)}}}),u}function g(r,e,t){const n=A(),s=r.length===1;return r.map((c,d)=>{const a={...c},u=n[d%n.length];return e==="doughnut"?(a.backgroundColor===void 0&&(a.backgroundColor=Array.from({length:t},(i,p)=>n[p%n.length])),a):e==="line"?(a.borderColor===void 0&&(a.borderColor=u),a.backgroundColor===void 0&&(a.backgroundColor=x(u,.15)),a.tension===void 0&&(a.tension=.3),a.fill===void 0&&(a.fill=!0),a.pointRadius===void 0&&(a.pointRadius=2),a):(a.backgroundColor===void 0&&(a.backgroundColor=s&&t>1?Array.from({length:t},()=>u):u),a.borderRadius===void 0&&(a.borderRadius=4),a)})}const B={class:"dx-chart"},V=o.defineComponent({__name:"DXBarChart",props:{labels:{},datasets:{},options:{},valueFormat:{},currencySymbol:{default:"£"},locale:{},showLegend:{type:Boolean,default:void 0}},setup(r){h();const e=r,t=o.computed(()=>({labels:e.labels,datasets:g(e.datasets,"bar",e.labels.length)})),n=o.computed(()=>m(b({valueFormat:e.valueFormat,currencySymbol:e.currencySymbol,locale:e.locale,showLegend:e.showLegend??e.datasets.length>1,hasValueAxis:!0}),e.options??{}));return(s,c)=>(o.openBlock(),o.createElementBlock("div",B,[o.createVNode(o.unref(f.Bar),{data:t.value,options:n.value},null,8,["data","options"])]))}}),O={class:"dx-chart"},j=o.defineComponent({__name:"DXLineChart",props:{labels:{},datasets:{},options:{},valueFormat:{},currencySymbol:{default:"£"},locale:{},showLegend:{type:Boolean,default:void 0}},setup(r){h();const e=r,t=o.computed(()=>({labels:e.labels,datasets:g(e.datasets,"line",e.labels.length)})),n=o.computed(()=>m(b({valueFormat:e.valueFormat,currencySymbol:e.currencySymbol,locale:e.locale,showLegend:e.showLegend??e.datasets.length>1,hasValueAxis:!0}),e.options??{}));return(s,c)=>(o.openBlock(),o.createElementBlock("div",O,[o.createVNode(o.unref(f.Line),{data:t.value,options:n.value},null,8,["data","options"])]))}}),E={class:"dx-chart"},N=o.defineComponent({__name:"DXDoughnutChart",props:{labels:{},data:{},datasets:{},options:{},valueFormat:{},currencySymbol:{default:"£"},locale:{},showLegend:{type:Boolean,default:void 0}},setup(r){h();const e=r,t=o.computed(()=>e.datasets??[{data:e.data??[]}]),n=o.computed(()=>({labels:e.labels,datasets:g(t.value,"doughnut",e.labels.length)})),s=o.computed(()=>m(b({valueFormat:e.valueFormat,currencySymbol:e.currencySymbol,locale:e.locale,showLegend:e.showLegend??!0,hasValueAxis:!1}),e.options??{}));return(c,d)=>(o.openBlock(),o.createElementBlock("div",E,[o.createVNode(o.unref(f.Doughnut),{data:n.value,options:s.value},null,8,["data","options"])]))}});l.DXBarChart=V,l.DXDoughnutChart=N,l.DXLineChart=j,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
+//# sourceMappingURL=charts.umd.cjs.map

package/dist/charts.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts.umd.cjs","sources":["../resources/js/components/charts/chartTheme.ts","../resources/js/components/charts/DXBarChart.vue","../resources/js/components/charts/DXLineChart.vue","../resources/js/components/charts/DXDoughnutChart.vue"],"sourcesContent":["/**\n * Shared theming for the DX*Chart wrappers: the dedicated categorical chart\n * palette (--dx-chart-* from the live theme), dashboard-friendly default options (no gridlines /\n * legend clutter, responsive, formatted ticks), and a one-time Chart.js\n * registration. chart.js / vue-chartjs are OPTIONAL peer deps.\n */\nimport { Chart, registerables } from \"chart.js\";\n\nexport type ChartValueFormat = \"number\" | \"currency\" | \"percent\";\n\nconst isPlainObject = (value: unknown): value is Record<string, any> =>\n    !!value && typeof value === \"object\" && !Array.isArray(value);\n\n/** Deep-merge consumer `options` over the themed defaults (arrays replace). */\nexport function mergeOptions(\n    base: Record<string, any>,\n    override: Record<string, any>,\n): Record<string, any> {\n    const result: Record<string, any> = { ...base };\n    for (const [key, value] of Object.entries(override)) {\n        if (isPlainObject(value) && isPlainObject(result[key])) {\n            result[key] = mergeOptions(result[key], value);\n        } else {\n            result[key] = value;\n        }\n    }\n    return result;\n}\n\nlet registered = false;\n\n/**\n * Register Chart.js (idempotent). Uses the full `registerables` set so every\n * controller / scale / element / plugin (incl. Legend, Tooltip, Filler) is\n * available — chart.js is an external peer dep, so this adds no bundle weight.\n */\nexport function registerCharts(): void {\n    if (registered) return;\n    Chart.register(...registerables);\n    registered = true;\n}\n\n// The dedicated data-viz palette (`$dx-chart-palette` in theme.scss) — eight\n// vivid hues in a fixed, CVD-validated order, published as --dx-chart-1..8.\n// Deliberately NOT the semantic --bs-* colours (#141): the base theme colours\n// are dark AA \"emphasis\" shades (too muted for series), and status colours\n// shouldn't impersonate \"series 2\". Fallbacks mirror the shipped theme so\n// charts still render without the CSS (SSR / tests / a consumer who didn't\n// import it). Sync with theme.scss's $dx-chart-palette is enforced by a test\n// that parses the Sass source (charts.test.ts), which is why this is exported.\nexport const PALETTE_VARS: Array<[string, string]> = [\n    [\"--dx-chart-1\", \"#2563eb\"], // blue\n    [\"--dx-chart-2\", \"#65a30d\"], // lime\n    [\"--dx-chart-3\", \"#7c3aed\"], // violet\n    [\"--dx-chart-4\", \"#0d9488\"], // teal\n    [\"--dx-chart-5\", \"#ea580c\"], // orange\n    [\"--dx-chart-6\", \"#0891b2\"], // cyan\n    [\"--dx-chart-7\", \"#d97706\"], // amber\n    [\"--dx-chart-8\", \"#db2777\"], // pink\n];\n\n/** Resolve the themed categorical palette from the document root. */\nexport function getPalette(): string[] {\n    if (typeof document === \"undefined\" || typeof getComputedStyle === \"undefined\") {\n        return PALETTE_VARS.map(([, fallback]) => fallback);\n    }\n    const styles = getComputedStyle(document.documentElement);\n    return PALETTE_VARS.map(([name, fallback]) => {\n        const value = styles.getPropertyValue(name).trim();\n        return value || fallback;\n    });\n}\n\n/** Read a single theme colour (e.g. the body text colour) with a fallback. */\nfunction themeColor(name: string, fallback: string): string {\n    if (typeof document === \"undefined\" || typeof getComputedStyle === \"undefined\") {\n        return fallback;\n    }\n    const value = getComputedStyle(document.documentElement)\n        .getPropertyValue(name)\n        .trim();\n    return value || fallback;\n}\n\n/** Add an alpha channel to a hex or rgb() colour (best-effort). */\nexport function withAlpha(color: string, alpha: number): string {\n    const hex = color.replace(/^#/, \"\");\n    if (/^[0-9a-f]{6}$/i.test(hex)) {\n        const r = parseInt(hex.slice(0, 2), 16);\n        const g = parseInt(hex.slice(2, 4), 16);\n        const b = parseInt(hex.slice(4, 6), 16);\n        return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    }\n    const rgbMatch = color.match(/^rgba?\\(([^)]+)\\)$/);\n    if (rgbMatch) {\n        const [r, g, b] = rgbMatch[1].split(\",\").map((n) => n.trim());\n        return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    }\n    return color;\n}\n\n/** Format a numeric value per the chart's value format (for tick/tooltips). */\nexport function formatValue(\n    value: number,\n    format: ChartValueFormat | undefined,\n    currencySymbol: string,\n    locale?: string,\n): string {\n    const num = new Intl.NumberFormat(locale, {\n        maximumFractionDigits: 2,\n    }).format(value);\n    if (format === \"currency\") return `${currencySymbol}${num}`;\n    if (format === \"percent\") return `${num}%`;\n    return num;\n}\n\nexport interface BaseOptionArgs {\n    valueFormat?: ChartValueFormat;\n    currencySymbol?: string;\n    locale?: string;\n    /** Show the legend (default: false for a single dataset, true for many). */\n    showLegend?: boolean;\n    /** Whether the chart has value axes (bar/line) vs none (doughnut). */\n    hasValueAxis?: boolean;\n}\n\n/** Dashboard default Chart.js options merged under any consumer `options`. */\nexport function baseOptions(args: BaseOptionArgs): Record<string, any> {\n    const {\n        valueFormat,\n        currencySymbol = \"£\",\n        locale,\n        showLegend = false,\n        hasValueAxis = true,\n    } = args;\n\n    const gridColor = withAlpha(themeColor(\"--bs-border-color\", \"#dee2e6\"), 0.6);\n    const tickColor = themeColor(\"--bs-secondary-color\", \"#6c757d\");\n\n    const options: Record<string, any> = {\n        responsive: true,\n        maintainAspectRatio: false,\n        plugins: {\n            legend: { display: showLegend, labels: { color: tickColor } },\n            tooltip: {\n                callbacks: {\n                    label: (ctx: any) => {\n                        const raw = ctx.parsed?.y ?? ctx.parsed ?? ctx.raw;\n                        const value = typeof raw === \"number\" ? raw : Number(raw);\n                        const formatted = Number.isFinite(value)\n                            ? formatValue(value, valueFormat, currencySymbol, locale)\n                            : String(raw);\n                        const label = ctx.dataset?.label ?? ctx.label ?? \"\";\n                        return label ? `${label}: ${formatted}` : formatted;\n                    },\n                },\n            },\n        },\n    };\n\n    if (hasValueAxis) {\n        options.scales = {\n            x: {\n                grid: { display: false },\n                border: { color: gridColor },\n                ticks: { color: tickColor },\n            },\n            y: {\n                beginAtZero: true,\n                grid: { color: gridColor, drawBorder: false },\n                border: { display: false },\n                ticks: {\n                    color: tickColor,\n                    callback: (value: number | string) =>\n                        formatValue(Number(value), valueFormat, currencySymbol, locale),\n                },\n            },\n        };\n    }\n\n    return options;\n}\n\n/**\n * Apply the themed palette to any dataset that doesn't set its own colours.\n * Bar: one colour per dataset (or per bar for a single dataset). Line: a themed\n * stroke + translucent fill. Doughnut/pie: one colour per slice.\n */\nexport function applyPalette(\n    datasets: any[],\n    kind: \"bar\" | \"line\" | \"doughnut\",\n    labelsCount: number,\n): any[] {\n    const palette = getPalette();\n    const single = datasets.length === 1;\n\n    return datasets.map((dataset, index) => {\n        const next = { ...dataset };\n        const color = palette[index % palette.length];\n\n        if (kind === \"doughnut\") {\n            if (next.backgroundColor === undefined) {\n                next.backgroundColor = Array.from(\n                    { length: labelsCount },\n                    (_, i) => palette[i % palette.length],\n                );\n            }\n            return next;\n        }\n\n        if (kind === \"line\") {\n            if (next.borderColor === undefined) next.borderColor = color;\n            if (next.backgroundColor === undefined) {\n                next.backgroundColor = withAlpha(color, 0.15);\n            }\n            if (next.tension === undefined) next.tension = 0.3;\n            if (next.fill === undefined) next.fill = true;\n            if (next.pointRadius === undefined) next.pointRadius = 2;\n            return next;\n        }\n\n        // bar\n        if (next.backgroundColor === undefined) {\n            next.backgroundColor =\n                single && labelsCount > 1\n                    ? Array.from({ length: labelsCount }, () => color)\n                    : color;\n        }\n        if (next.borderRadius === undefined) next.borderRadius = 4;\n        return next;\n    });\n}\n","<!--\n  @component\n  A themed bar chart. Thin wrapper around vue-chartjs (chart.js) with the\n  theme's dedicated chart palette (--dx-chart-1..8) applied and dashboard-friendly defaults (no x gridlines,\n  formatted value ticks, responsive, legend hidden for a single series). Pass\n  `labels` + `datasets`; `options` deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div class=\"dx-chart\">\n    <Bar :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Bar } from \"vue-chartjs\";\nimport {\n  registerCharts,\n  baseOptions,\n  applyPalette,\n  mergeOptions,\n  type ChartValueFormat,\n} from \"./chartTheme\";\n\nregisterCharts();\n\ninterface Props {\n  /** X-axis category labels. */\n  labels: string[];\n  /** Chart.js datasets. Colours are themed when a dataset omits them. */\n  datasets: any[];\n  /** Chart.js options; deep-merged over the themed defaults. */\n  options?: Record<string, any>;\n  /** Format value-axis ticks and tooltips. */\n  valueFormat?: ChartValueFormat;\n  /** Currency symbol for valueFormat: \"currency\" (default \"£\"). */\n  currencySymbol?: string;\n  /** Locale for number formatting. */\n  locale?: string;\n  /** Show the legend (default: only when there is more than one dataset). */\n  showLegend?: boolean;\n}\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? datasets.length > 1` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<Props>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\nconst chartData = computed(() => ({\n  labels: props.labels,\n  datasets: applyPalette(props.datasets, \"bar\", props.labels.length),\n}));\n\nconst mergedOptions = computed(() =>\n  mergeOptions(\n    baseOptions({\n      valueFormat: props.valueFormat,\n      currencySymbol: props.currencySymbol,\n      locale: props.locale,\n      showLegend: props.showLegend ?? props.datasets.length > 1,\n      hasValueAxis: true,\n    }),\n    props.options ?? {},\n  ),\n);\n</script>\n","<!--\n  @component\n  A themed line chart. Thin wrapper around vue-chartjs (chart.js) with the\n  theme's dedicated chart palette applied (--dx-chart-1..8 stroke + translucent fill, smoothed line)\n  and dashboard-friendly defaults. Pass `labels` + `datasets`; `options`\n  deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div class=\"dx-chart\">\n    <Line :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Line } from \"vue-chartjs\";\nimport {\n  registerCharts,\n  baseOptions,\n  applyPalette,\n  mergeOptions,\n  type ChartValueFormat,\n} from \"./chartTheme\";\n\nregisterCharts();\n\ninterface Props {\n  /** X-axis category labels. */\n  labels: string[];\n  /** Chart.js datasets. Colours are themed when a dataset omits them. */\n  datasets: any[];\n  /** Chart.js options; deep-merged over the themed defaults. */\n  options?: Record<string, any>;\n  /** Format value-axis ticks and tooltips. */\n  valueFormat?: ChartValueFormat;\n  /** Currency symbol for valueFormat: \"currency\" (default \"£\"). */\n  currencySymbol?: string;\n  /** Locale for number formatting. */\n  locale?: string;\n  /** Show the legend (default: only when there is more than one dataset). */\n  showLegend?: boolean;\n}\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? datasets.length > 1` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<Props>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\nconst chartData = computed(() => ({\n  labels: props.labels,\n  datasets: applyPalette(props.datasets, \"line\", props.labels.length),\n}));\n\nconst mergedOptions = computed(() =>\n  mergeOptions(\n    baseOptions({\n      valueFormat: props.valueFormat,\n      currencySymbol: props.currencySymbol,\n      locale: props.locale,\n      showLegend: props.showLegend ?? props.datasets.length > 1,\n      hasValueAxis: true,\n    }),\n    props.options ?? {},\n  ),\n);\n</script>\n","<!--\n  @component\n  A themed doughnut chart. Thin wrapper around vue-chartjs (chart.js) with one\n  chart-palette colour (--dx-chart-1..8) per slice and dashboard-friendly defaults. Pass\n  `labels` + either `data` (a number array) or full `datasets`; `options`\n  deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div class=\"dx-chart\">\n    <Doughnut :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Doughnut } from \"vue-chartjs\";\nimport {\n  registerCharts,\n  baseOptions,\n  applyPalette,\n  mergeOptions,\n  type ChartValueFormat,\n} from \"./chartTheme\";\n\nregisterCharts();\n\ninterface Props {\n  /** Slice labels. */\n  labels: string[];\n  /** Convenience: a single number array (one value per label). */\n  data?: number[];\n  /** Full Chart.js datasets (alternative to `data`). */\n  datasets?: any[];\n  /** Chart.js options; deep-merged over the themed defaults. */\n  options?: Record<string, any>;\n  /** Format tooltip values. */\n  valueFormat?: ChartValueFormat;\n  /** Currency symbol for valueFormat: \"currency\" (default \"£\"). */\n  currencySymbol?: string;\n  /** Locale for number formatting. */\n  locale?: string;\n  /** Show the legend (default: true — slices need identifying). */\n  showLegend?: boolean;\n}\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? true` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<Props>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\nconst resolvedDatasets = computed(() =>\n  props.datasets ?? [{ data: props.data ?? [] }],\n);\n\nconst chartData = computed(() => ({\n  labels: props.labels,\n  datasets: applyPalette(resolvedDatasets.value, \"doughnut\", props.labels.length),\n}));\n\nconst mergedOptions = computed(() =>\n  mergeOptions(\n    baseOptions({\n      valueFormat: props.valueFormat,\n      currencySymbol: props.currencySymbol,\n      locale: props.locale,\n      showLegend: props.showLegend ?? true,\n      hasValueAxis: false,\n    }),\n    props.options ?? {},\n  ),\n);\n</script>\n"],"names":["isPlainObject","value","mergeOptions","base","override","result","key","registered","registerCharts","Chart","registerables","PALETTE_VARS","getPalette","fallback","styles","name","themeColor","withAlpha","color","alpha","hex","r","g","b","rgbMatch","n","formatValue","format","currencySymbol","locale","num","baseOptions","args","valueFormat","showLegend","hasValueAxis","gridColor","tickColor","options","ctx","raw","_a","formatted","label","_b","applyPalette","datasets","kind","labelsCount","palette","single","dataset","index","next","_","i","props","__props","chartData","computed","mergedOptions","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_unref","Bar","Line","resolvedDatasets","Doughnut"],"mappings":"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"}

package/dist/components/base/DAlert.vue.d.ts

@@ -1,8 +1,13 @@
+type __VLS_Props = {
+    modelValue?: boolean | number;
+};
 declare var __VLS_7: string | number, __VLS_8: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    modelValue: boolean | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/base/DAutocomplete.vue.d.ts

@@ -1,8 +1,28 @@
+import type { SelectOption } from "bootstrap-vue-next";
+type AutocompleteOptions = readonly (object | string | number | boolean)[];
+type FilterFunction = (options: SelectOption[], search: string) => SelectOption[];
+interface Props {
+    /** Options passed straight through to BAutocomplete (see its `options` prop). */
+    options?: AutocompleteOptions;
+    /**
+     * A custom filter. Composed with `null-option` rather than replaced: when a
+     * null option is present it stays pinned and this runs on the rest.
+     */
+    filterFunction?: FilterFunction;
+    /**
+     * Prepend a pinned, never-filtered, selectable "no selection" row whose value
+     * is `null` (#138). `true` → default label "None"; a string → that label.
+     * Selecting it sets the model to `null` (bvn reads that as no selection, so
+     * the ✕ hides and the placeholder shows). Off by default — unchanged
+     * behaviour. DXTable does NOT use this; it builds its own "All" option.
+     */
+    nullOption?: boolean | string;
+}
 declare var __VLS_6: string | number, __VLS_7: any;
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_6>]?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/base/DFormCheckboxGroup.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_7: string | number, __VLS_8: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/extended/DXDashboardSidebar.vue.d.ts

@@ -46,9 +46,9 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onToggle?: (() => any) | undefined;
 }>, {
-    collapsed: boolean;
-    hidden: boolean;
     title: string;
+    hidden: boolean;
+    collapsed: boolean;
     collapsibleGroups: boolean;
     autoCollapseInactiveGroups: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/extended/DXField.vue.d.ts

@@ -112,10 +112,10 @@ declare var __VLS_1: {
     model: any;
     value: any;
     update: typeof setValue;
-}, __VLS_198: {
+}, __VLS_201: {
     field: FieldDefinition;
     model: any;
-}, __VLS_203: {
+}, __VLS_206: {
     field: FieldDefinition;
     model: any;
 };
@@ -160,9 +160,9 @@ type __VLS_Slots = {} & {
 } & {
     value?: (props: typeof __VLS_133) => any;
 } & {
-    info?: (props: typeof __VLS_198) => any;
+    info?: (props: typeof __VLS_201) => any;
 } & {
-    hint?: (props: typeof __VLS_203) => any;
+    hint?: (props: typeof __VLS_206) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/components/extended/DXForm.vue.d.ts

@@ -28,11 +28,21 @@ interface Props {
     autoErrorTab?: boolean;
     /**
      * Wrap the form in a card for a visual boundary (mirrors DXTable's
-     * `card` prop). Tabbed forms render the tab nav as a BS5
-     * card-header-tabs instead of double-wrapping. Off by default since
-     * DXForm is commonly embedded in a page card or modal already.
+     * `card` prop). Off by default since DXForm is commonly embedded in a
+     * page card or modal already. Tabbed forms are wrapped by default
+     * regardless — see `cardTabs`; setting `card` also forces the tabbed
+     * card on even when `cardTabs` is disabled.
      */
     card?: boolean;
+    /**
+     * Wrap a TABBED form's content in a card panel so the active tab reads
+     * as a finished panel connected to the tab strip (the standard
+     * Bootstrap card-with-tabs pattern) rather than floating on the bare
+     * page background (#159). On by default. Set `false` for bare tabs
+     * (e.g. inside a modal that already provides a boundary). Ignored for
+     * flat (non-tabbed) forms — use `card` for those.
+     */
+    cardTabs?: boolean;
     /**
      * Form-wide field layout: "vertical" (default, label above input) or
      * "horizontal" (label left, input right). Overridable per-field via
@@ -63,12 +73,13 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     onSubmit?: (() => any) | undefined;
     "onUpdate:activeTab"?: ((value: number) => any) | undefined;
 }>, {
-    card: boolean;
     layout: "vertical" | "horizontal";
+    card: boolean;
     submitText: string;
     submitLoadingText: string;
     showSubmit: boolean;
     autoErrorTab: boolean;
+    cardTabs: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/components/extended/DXTable.vue.d.ts

@@ -36,6 +36,19 @@ export interface TableField {
     filter?: FilterType;
     filterOptions?: FilterOption[];
     filterPlaceholder?: string;
+    /**
+     * Fixed width for this column, applied via a `<colgroup>` `<col>`. A number
+     * is treated as pixels (`200` → `200px`); a string is used verbatim
+     * (`"20%"`, `"12rem"`). Pair with the table-level `fixedLayout` prop so the
+     * width is authoritative and the column stops resizing to fit its content —
+     * without `fixedLayout` a wider cell can still stretch the column (#156).
+     */
+    width?: string | number;
+    /**
+     * Minimum width for this column, applied via the same `<col>` as `width`.
+     * A number is pixels; a string is used verbatim.
+     */
+    minWidth?: string | number;
     [key: string]: any;
 }
 export interface PaginationData {
@@ -109,11 +122,27 @@ export interface Props<TItem = any> {
     showPagination?: boolean;
     /** Show per-page selector */
     showPerPageSelector?: boolean;
+    /**
+     * Show the footer's item-count caption ("N items." / "X to Y out of Z
+     * items."). Defaults to `true`. Set `false` to suppress just the caption,
+     * independent of the pager — a page ported from a plain `<b-table>` that
+     * hides the pager with `:show-pagination="false"` would otherwise gain a
+     * caption it never had (#127).
+     */
+    showCount?: boolean;
     /** Per-page options for selector */
     perPageOptions?: number[];
     /** Current page (for provider mode) */
     currentPage?: number;
-    /** Items per page (for provider mode, v-model support) */
+    /**
+     * Items per page. With a `v-model:per-page` it is controlled state; a bare
+     * `:per-page="20"` is the INITIAL page size (see the initial-value vs
+     * controlled note above). When passed explicitly it takes PRECEDENCE over any
+     * per-page preference persisted in localStorage — `:per-page="20"` always
+     * starts at 20, never a size the user once picked on another table (#124).
+     * Omit it to let a stored preference (URL-keyed tables only) or the default
+     * apply.
+     */
     perPage?: number;
     /** Striped (banded) rows. Off by default — banding adds little on short
      *  tables and can read as noise; opt in with `:striped="true"`. */
@@ -217,6 +246,15 @@ export interface Props<TItem = any> {
     rowClickable?: (item: TItem, index: number) => boolean;
     /** Enable client-side filtering, sorting, and pagination on items array */
     clientSide?: boolean;
+    /**
+     * Apply `table-layout: fixed` to the underlying table. Off by default, so
+     * existing tables keep their content-sized columns. When on, column widths
+     * stop depending on cell content, so they no longer reshuffle when a filter
+     * narrows the rows — the table stays put as you filter (#156). Combine with
+     * per-field `width`/`minWidth` to control the proportions; columns with no
+     * declared width share the remaining space equally.
+     */
+    fixedLayout?: boolean;
 }
 declare const _default: <T = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{

package/dist/components/extended/DXTablePagination.vue.d.ts

@@ -10,6 +10,8 @@ interface Props {
     showPagination: boolean;
     /** Whether to render the per-page selector. */
     showPerPageSelector: boolean;
+    /** Whether to render the item-count caption (the "X out of Z items" line). */
+    showCount: boolean;
     /** Singular item noun for the info line (e.g. "product"). */
     singularItemName: string;
     /** Plural item noun for the info line (e.g. "products"). */