nuxt-ui-tools 1.0.0 → 1.1.0

package/dist/runtime/dashboard/components/dashboard-gauge.vue

@@ -0,0 +1,177 @@
+<script setup>
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isNumber, isString } from "#ui-tools/shared/utils/predicate";
+import { resolveTextValue } from "#ui-tools/shared/utils/render";
+import { useDashboardFormat } from "../composables/use-dashboard-format";
+import { useDashboardUi } from "../composables/use-dashboard-ui";
+import { resolveDashboardColor } from "../utils/charts";
+import { toDashboardCell } from "../utils/export";
+import { resolveDashboardClasses } from "../utils/ui";
+import DashboardRing from "./block/dashboard-ring.vue";
+import DashboardSkeleton from "./block/dashboard-skeleton.vue";
+import DashboardCard from "./dashboard-card.vue";
+const {
+  source,
+  card = true,
+  menu = void 0,
+  freshness = void 0,
+  value,
+  min = 0,
+  max = 100,
+  target,
+  format,
+  caption,
+  color = "series-1",
+  variant = "arc",
+  diameter = 168,
+  thickness = 12,
+  ui,
+  ...block
+} = defineProps({
+  title: { type: [String, Number, Function], required: false },
+  subtitle: { type: [String, Number, Function], required: false },
+  size: { type: String, required: false },
+  rows: { type: String, required: false },
+  card: { type: Boolean, required: false },
+  activation: { type: String, required: false },
+  empty: { type: Object, required: false },
+  menu: { type: [Boolean, Array, Function], required: false },
+  actions: { type: Array, required: false },
+  freshness: { type: Boolean, required: false },
+  source: { type: Object, required: true },
+  value: { type: Function, required: true },
+  min: { type: [Number, Function], required: false },
+  max: { type: [Number, Function], required: false },
+  target: { type: Function, required: false },
+  format: { type: Function, required: false },
+  caption: { type: [String, Number, Function], required: false },
+  color: { type: [String, Function], required: false },
+  variant: { type: String, required: false },
+  diameter: { type: Number, required: false },
+  thickness: { type: Number, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const { t } = useUiToolsLocale();
+const formats = useDashboardFormat();
+const appUi = useDashboardUi();
+const classes = computed(
+  () => resolveDashboardClasses(
+    {
+      caption: "mt-1 block text-[11.5px] text-muted",
+      ring: "mx-auto",
+      scale: "mx-auto -mt-3 flex justify-between px-1 text-[11px] text-dimmed tabular-nums",
+      value: "block text-[28px] leading-none font-semibold tracking-tight text-highlighted tabular-nums"
+    },
+    appUi.value.gauge,
+    ui
+  )
+);
+const gauge = computed(() => {
+  const data = source.data;
+  if (data === void 0) return null;
+  const amount = value(data);
+  if (!isNumber(amount) || !Number.isFinite(amount)) return null;
+  const low = isNumber(min) ? min : min(data);
+  const high = isNumber(max) ? max : max(data);
+  const span = high - low;
+  const share = span > 0 ? (amount - low) / span : 0;
+  const goal = target?.(data);
+  const formatValue = format ?? formats.number.value;
+  const text = caption === void 0 || isString(caption) || isNumber(caption) ? caption : caption(data);
+  return {
+    caption: resolveTextValue(text),
+    color: resolveDashboardColor(isString(color) ? color : color(amount, share), 0),
+    data,
+    high: formatValue(high),
+    highRaw: high,
+    low: formatValue(low),
+    lowRaw: low,
+    raw: amount,
+    share,
+    target: isNumber(goal) && span > 0 ? (goal - low) / span : null,
+    targetText: isNumber(goal) ? t("dashboard.stat.goal", { value: formatValue(goal) }) : "",
+    targetValue: isNumber(goal) ? goal : null,
+    value: formatValue(amount)
+  };
+});
+function tabulate() {
+  const current = gauge.value;
+  return {
+    columns: [
+      { key: "label", label: t("dashboard.table.label"), numeric: false },
+      { key: "value", label: t("dashboard.table.value"), numeric: true }
+    ],
+    rows: current ? [
+      [
+        toDashboardCell(t("dashboard.table.value")),
+        toDashboardCell(current.raw, current.value)
+      ],
+      ...current.targetValue === null ? [] : [[toDashboardCell(current.targetText), toDashboardCell(current.targetValue)]]
+    ] : []
+  };
+}
+</script>
+
+<template>
+  <DashboardCard
+    v-bind="block"
+    :card
+    :menu
+    :freshness
+    :ui
+    :source
+    :is-empty="gauge === null"
+    :tabulate
+    :view-as-table="false"
+    :expandable="false"
+  >
+    <template #skeleton>
+      <DashboardSkeleton kind="gauge" :diameter />
+    </template>
+    <template v-if="$slots['header-right']" #header-right>
+      <slot name="header-right" />
+    </template>
+    <template v-if="$slots.toolbar" #toolbar>
+      <slot name="toolbar" />
+    </template>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+
+    <!-- Centered in whatever height the grid row gives the card. -->
+    <div v-if="gauge" class="flex h-full flex-col items-center justify-center">
+      <DashboardRing
+        :ratio="gauge.share"
+        :size="diameter"
+        :thickness
+        :color="gauge.color"
+        :arc="variant === 'arc'"
+        :target="gauge.target"
+        :class="classes.ring"
+        role="meter"
+        :aria-valuemin="gauge.lowRaw"
+        :aria-valuemax="gauge.highRaw"
+        :aria-valuenow="gauge.raw"
+        :aria-valuetext="gauge.value"
+        :aria-label="gauge.caption || void 0"
+      >
+        <slot name="center" :data="gauge.data" :value="gauge.value" :share="gauge.share">
+          <b :class="classes.value">{{ gauge.value }}</b>
+          <small v-if="gauge.caption" :class="classes.caption">{{ gauge.caption }}</small>
+        </slot>
+      </DashboardRing>
+      <div
+        v-if="variant === 'arc'"
+        :class="classes.scale"
+        :style="{ width: `${diameter}px` }"
+        aria-hidden="true"
+      >
+        <span>{{ gauge.low }}</span>
+        <span v-if="gauge.targetText" class="text-muted">{{ gauge.targetText }}</span>
+        <span>{{ gauge.high }}</span>
+      </div>
+    </div>
+  </DashboardCard>
+</template>

package/dist/runtime/dashboard/components/dashboard-gauge.vue.d.ts

@@ -0,0 +1,55 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardGaugeUi, DashboardSeriesColor, DashboardSourceLike, DashboardValueFormat } from '../types/index.js';
+declare const __VLS_export: <TData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<Omit<DashboardBlockBaseProps, "ui"> & {
+        source: DashboardSourceLike<TData>;
+        /** Current value, placed between `min` and `max`. */
+        value: (data: TData & ({} | null)) => number | null | undefined;
+        /** Start of the scale. Defaults to `0`. */
+        min?: number | ((data: TData & ({} | null)) => number);
+        /** End of the scale (a goal, a capacity). Defaults to `100`. */
+        max?: number | ((data: TData & ({} | null)) => number);
+        /** Target on the scale, drawn as a tick across the ring. `null` hides it. */
+        target?: (data: TData & ({} | null)) => number | null | undefined;
+        /** Center value format. Defaults to the locale number format. */
+        format?: DashboardValueFormat;
+        /** Text under the value, inside the ring. */
+        caption?: LazyTextValue | ((data: TData & ({} | null)) => LazyTextValue | undefined);
+        /**
+         * Filled stroke color: a palette slot, a Nuxt UI color, any CSS color, or a function of the
+         * value and its share of the scale (`0`–`1`), e.g. to turn red past a threshold.
+         */
+        color?: DashboardSeriesColor | ((value: number, share: number) => DashboardSeriesColor);
+        /** `arc`: a 240° gauge open at the bottom, with the scale bounds under it. `ring`: a full ring. */
+        variant?: "arc" | "ring";
+        /** Ring size in pixels. */
+        diameter?: number;
+        thickness?: number;
+        ui?: DashboardBlockUi & DashboardGaugeUi;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        /** Content in the middle of the ring, instead of the value and caption. */
+        center?: (props: {
+            data: TData & ({} | null);
+            value: string;
+            share: number;
+        }) => unknown;
+        'header-right'?: () => unknown;
+        toolbar?: () => unknown;
+        footer?: () => unknown;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/dashboard/components/dashboard-grid.d.vue.ts

@@ -0,0 +1,38 @@
+import type { DashboardGridUi, DashboardMenu } from '../types/index.js';
+type __VLS_Props = {
+    /** Column count, responsive: `"2 md:3 xl:5"`. Defaults to `12`. */
+    columns?: string;
+    /**
+     * `cards`: separate cards with a gap. `panels`: one bordered surface whose cells are separated by
+     * 1px rules (rows should be full for the rules to read as a grid).
+     */
+    variant?: 'cards' | 'panels';
+    /** Gap between cards, any CSS length. Defaults to `1rem`; ignored by `panels`. */
+    gap?: string;
+    /** Grid span when this grid is nested in another grid, responsive. */
+    size?: string;
+    /** Card menu of every block inside that does not set its own `menu`. */
+    menu?: DashboardMenu;
+    /** `freshness` of every block inside that does not set its own. */
+    freshness?: boolean;
+    ui?: DashboardGridUi;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "cards" | "panels";
+    menu: DashboardMenu;
+    columns: string;
+    freshness: boolean;
+    gap: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/dashboard/components/dashboard-grid.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { twMerge } from "tailwind-merge";
+import { computed } from "vue";
+import { useResponsiveValue } from "#ui-tools/shared/composables/use-responsive-value";
+import { provideDashboardGrid, useDashboardUi } from "../composables/use-dashboard-ui";
+const props = defineProps({
+  columns: { type: String, required: false, default: "12" },
+  variant: { type: String, required: false, default: "cards" },
+  gap: { type: String, required: false, default: "1rem" },
+  size: { type: String, required: false },
+  menu: { type: [Boolean, Array, Function], required: false, default: void 0 },
+  freshness: { type: Boolean, required: false, default: void 0 },
+  ui: { type: Object, required: false }
+});
+provideDashboardGrid({
+  freshness: () => props.freshness,
+  menu: () => props.menu,
+  panels: () => props.variant === "panels"
+});
+const appUi = useDashboardUi();
+const columns = useResponsiveValue(() => props.columns, "grid-cols");
+const span = useResponsiveValue(() => props.size ?? "", "col");
+const style = computed(
+  () => [
+    "display: grid",
+    columns.value,
+    props.variant === "cards" && `gap: ${props.gap}`,
+    span.value ?? "grid-column: 1 / -1"
+  ].filter(Boolean).join("; ")
+);
+const classes = computed(
+  () => twMerge(
+    "min-w-0",
+    props.variant === "panels" && [
+      "gap-px overflow-hidden rounded-lg border border-default bg-(--ui-border)",
+      appUi.value.grid?.panels,
+      props.ui?.panels
+    ],
+    appUi.value.grid?.root,
+    props.ui?.root
+  )
+);
+</script>
+
+<template>
+  <div :style="style" :class="classes" :data-variant="variant">
+    <slot />
+  </div>
+</template>

package/dist/runtime/dashboard/components/dashboard-grid.vue.d.ts

@@ -0,0 +1,38 @@
+import type { DashboardGridUi, DashboardMenu } from '../types/index.js';
+type __VLS_Props = {
+    /** Column count, responsive: `"2 md:3 xl:5"`. Defaults to `12`. */
+    columns?: string;
+    /**
+     * `cards`: separate cards with a gap. `panels`: one bordered surface whose cells are separated by
+     * 1px rules (rows should be full for the rules to read as a grid).
+     */
+    variant?: 'cards' | 'panels';
+    /** Gap between cards, any CSS length. Defaults to `1rem`; ignored by `panels`. */
+    gap?: string;
+    /** Grid span when this grid is nested in another grid, responsive. */
+    size?: string;
+    /** Card menu of every block inside that does not set its own `menu`. */
+    menu?: DashboardMenu;
+    /** `freshness` of every block inside that does not set its own. */
+    freshness?: boolean;
+    ui?: DashboardGridUi;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "cards" | "panels";
+    menu: DashboardMenu;
+    columns: string;
+    freshness: boolean;
+    gap: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/dashboard/components/dashboard-legend.d.vue.ts

@@ -0,0 +1,8 @@
+import type { DashboardLegendItem, DashboardLegendUi } from '../types/index.js';
+type __VLS_Props = {
+    items: readonly DashboardLegendItem[];
+    ui?: DashboardLegendUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/dashboard/components/dashboard-legend.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { computed } from "vue";
+import { useDashboardUi } from "../composables/use-dashboard-ui";
+import { resolveDashboardClasses } from "../utils/ui";
+const props = defineProps({
+  items: { type: Array, required: true },
+  ui: { type: Object, required: false }
+});
+const appUi = useDashboardUi();
+const classes = computed(
+  () => resolveDashboardClasses(
+    {
+      item: "inline-flex items-center gap-1.5 whitespace-nowrap",
+      root: "flex flex-wrap items-center gap-x-3.5 gap-y-1 text-xs text-muted",
+      swatch: "shrink-0"
+    },
+    appUi.value.legend,
+    props.ui
+  )
+);
+</script>
+
+<template>
+  <ul :class="classes.root">
+    <li v-for="item in items" :key="item.key" :class="classes.item">
+      <span
+        aria-hidden="true"
+        :class="[
+  classes.swatch,
+  item.dashed ? 'h-0 w-3 border-t-2 border-dashed' : 'size-[9px] rounded-[3px]'
+]"
+        :style="item.dashed ? { borderColor: item.color } : { background: item.color }"
+      />
+      {{ item.label }}
+    </li>
+  </ul>
+</template>

package/dist/runtime/dashboard/components/dashboard-legend.vue.d.ts

@@ -0,0 +1,8 @@
+import type { DashboardLegendItem, DashboardLegendUi } from '../types/index.js';
+type __VLS_Props = {
+    items: readonly DashboardLegendItem[];
+    ui?: DashboardLegendUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/dashboard/components/dashboard-line-chart.d.vue.ts

@@ -0,0 +1,46 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardAxisOptions, DashboardBlockBaseProps, DashboardReferenceLine, DashboardSelected, DashboardSelectEvent, DashboardSeries, DashboardSourceLike, DashboardValueFormat } from '../types/index.js';
+declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DashboardBlockBaseProps & {
+        source: DashboardSourceLike<readonly TRow[] | undefined>;
+        x: (row: TRow, index: number) => string | number | Date;
+        xFormat?: (value: string | number | Date) => string;
+        /** Header of the category column in the table view and CSV export. */
+        xLabel?: LazyTextValue;
+        series: readonly DashboardSeries<TRow>[];
+        /** Dashed line, e.g. the previous period. */
+        comparison?: DashboardSeries<TRow>;
+        /** Fills the area under every solid series. */
+        area?: boolean;
+        yAxis?: DashboardAxisOptions;
+        format?: DashboardValueFormat;
+        reference?: DashboardReferenceLine | readonly DashboardReferenceLine[];
+        height?: number;
+        legend?: boolean;
+        /** Expected number of x positions, drawn by the loading skeleton before data arrives. */
+        points?: number;
+        /** Rows shown as selected: a band marks their x position. */
+        selected?: DashboardSelected<TRow>;
+        /** A click on the chart selects the x position under the pointer. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'header-right'?: () => unknown;
+        toolbar?: () => unknown;
+        footer?: () => unknown;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/dashboard/components/dashboard-line-chart.vue

@@ -0,0 +1,129 @@
+<script setup>
+import { useMounted } from "@vueuse/core";
+import { computed } from "vue";
+import {
+  resolveDashboardExpandedHeight,
+  useDashboardChart
+} from "../composables/use-dashboard-chart";
+import DashboardSkeleton from "./block/dashboard-skeleton.vue";
+import { dashboardChartRenderer } from "./charts/renderer";
+import DashboardCard from "./dashboard-card.vue";
+const {
+  source,
+  card = true,
+  menu = void 0,
+  freshness = void 0,
+  x,
+  xFormat,
+  xLabel,
+  series,
+  comparison,
+  area = false,
+  yAxis,
+  format,
+  reference,
+  height = 250,
+  legend = true,
+  points = 12,
+  selected,
+  onSelect,
+  ...block
+} = defineProps({
+  title: { type: [String, Number, Function], required: false },
+  subtitle: { type: [String, Number, Function], required: false },
+  size: { type: String, required: false },
+  rows: { type: String, required: false },
+  card: { type: Boolean, required: false },
+  activation: { type: String, required: false },
+  empty: { type: Object, required: false },
+  menu: { type: [Boolean, Array, Function], required: false },
+  actions: { type: Array, required: false },
+  freshness: { type: Boolean, required: false },
+  ui: { type: Object, required: false },
+  source: { type: Object, required: true },
+  x: { type: Function, required: true },
+  xFormat: { type: Function, required: false },
+  xLabel: { type: [String, Number, Function], required: false },
+  series: { type: Array, required: true },
+  comparison: { type: Object, required: false },
+  area: { type: Boolean, required: false },
+  yAxis: { type: Object, required: false },
+  format: { type: Function, required: false },
+  reference: { type: [Object, Array], required: false },
+  height: { type: Number, required: false },
+  legend: { type: Boolean, required: false },
+  points: { type: Number, required: false },
+  selected: { type: Function, required: false },
+  onSelect: { type: Function, required: false }
+});
+defineSlots();
+const mounted = useMounted();
+const allSeries = computed(() => {
+  const solid = series.map((entry, index) => ({
+    ...entry,
+    color: entry.color ?? `series-${index % 6 + 1}`,
+    type: entry.type ?? (area && !entry.dashed ? "area" : "line")
+  }));
+  return comparison ? [{ color: "series-2", ...comparison, dashed: true, type: "line" }, ...solid] : solid;
+});
+const seed = computed(() => allSeries.value.map((entry) => entry.key).join("|"));
+const skeletonSeries = computed(() => series.length);
+const skeletonPoints = computed(() => source.data?.length || points);
+const chart = useDashboardChart({
+  defaultType: "line",
+  format: () => format,
+  onSelect: () => onSelect,
+  references: () => reference,
+  rows: () => source.data ?? [],
+  selected: () => selected,
+  series: () => allSeries.value,
+  x: () => x,
+  xFormat: () => xFormat,
+  xLabel: () => xLabel,
+  yAxis: () => yAxis
+});
+</script>
+
+<template>
+  <DashboardCard
+    v-bind="block"
+    :card
+    :menu
+    :freshness
+    :source
+    :legend="legend ? chart.legend.value : void 0"
+    :is-empty="chart.frame.value.data.length === 0 || chart.frame.value.series.length === 0"
+    :tabulate="chart.tabulate"
+  >
+    <template #skeleton>
+      <DashboardSkeleton
+        kind="lines"
+        :height
+        :series="skeletonSeries"
+        :count="skeletonPoints"
+        :seed
+      />
+    </template>
+    <template v-if="$slots['header-right']" #header-right>
+      <slot name="header-right" />
+    </template>
+    <template v-if="$slots.toolbar" #toolbar>
+      <slot name="toolbar" />
+    </template>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+
+    <template #default="{ expanded }">
+      <component
+        :is="dashboardChartRenderer.xy"
+        v-if="mounted"
+        :frame="chart.frame.value"
+        :height="expanded ? resolveDashboardExpandedHeight(height) : height"
+        :selectable="chart.selectable.value"
+        @select="chart.select"
+      />
+      <div v-else aria-hidden="true" :style="{ height: `${height}px` }" />
+    </template>
+  </DashboardCard>
+</template>

package/dist/runtime/dashboard/components/dashboard-line-chart.vue.d.ts

@@ -0,0 +1,46 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardAxisOptions, DashboardBlockBaseProps, DashboardReferenceLine, DashboardSelected, DashboardSelectEvent, DashboardSeries, DashboardSourceLike, DashboardValueFormat } from '../types/index.js';
+declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DashboardBlockBaseProps & {
+        source: DashboardSourceLike<readonly TRow[] | undefined>;
+        x: (row: TRow, index: number) => string | number | Date;
+        xFormat?: (value: string | number | Date) => string;
+        /** Header of the category column in the table view and CSV export. */
+        xLabel?: LazyTextValue;
+        series: readonly DashboardSeries<TRow>[];
+        /** Dashed line, e.g. the previous period. */
+        comparison?: DashboardSeries<TRow>;
+        /** Fills the area under every solid series. */
+        area?: boolean;
+        yAxis?: DashboardAxisOptions;
+        format?: DashboardValueFormat;
+        reference?: DashboardReferenceLine | readonly DashboardReferenceLine[];
+        height?: number;
+        legend?: boolean;
+        /** Expected number of x positions, drawn by the loading skeleton before data arrives. */
+        points?: number;
+        /** Rows shown as selected: a band marks their x position. */
+        selected?: DashboardSelected<TRow>;
+        /** A click on the chart selects the x position under the pointer. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'header-right'?: () => unknown;
+        toolbar?: () => unknown;
+        footer?: () => unknown;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};