nuxt-ui-tools 1.0.1 → 1.1.0

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

@@ -0,0 +1,226 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isNumber } 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 { toDashboardCell } from "../utils/export";
+import {
+  DASHBOARD_ROW_BUTTON,
+  DASHBOARD_SELECTABLE_ROW,
+  DASHBOARD_SELECTED_ROW,
+  resolveDashboardClasses
+} from "../utils/ui";
+import DashboardRowActionsMenu from "./block/dashboard-row-actions.vue";
+import DashboardSkeleton from "./block/dashboard-skeleton.vue";
+import DashboardCard from "./dashboard-card.vue";
+const {
+  source,
+  card = true,
+  menu = void 0,
+  freshness = void 0,
+  severity,
+  label,
+  description,
+  value,
+  format,
+  icon,
+  action,
+  order = "severity",
+  limit,
+  rowKey,
+  selected,
+  rowActions,
+  onSelect,
+  empty,
+  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 },
+  severity: { type: Function, required: true },
+  label: { type: Function, required: true },
+  description: { type: Function, required: false },
+  value: { type: Function, required: false },
+  format: { type: Function, required: false },
+  icon: { type: Function, required: false },
+  action: { type: Function, required: false },
+  order: { type: String, required: false },
+  limit: { type: Number, required: false },
+  rowKey: { type: Function, required: false },
+  selected: { type: Function, required: false },
+  rowActions: { type: Function, required: false },
+  onSelect: { type: Function, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const { t } = useUiToolsLocale();
+const formats = useDashboardFormat();
+const appUi = useDashboardUi();
+const classes = computed(
+  () => resolveDashboardClasses(
+    {
+      action: "relative z-[1] shrink-0",
+      description: "block truncate text-xs text-muted",
+      icon: "grid size-8 shrink-0 place-items-center rounded-lg",
+      label: "block truncate text-[13px] font-medium text-default",
+      row: "flex min-w-0 items-center gap-3 py-2.5",
+      value: "shrink-0 text-sm font-semibold text-highlighted tabular-nums"
+    },
+    appUi.value.alerts,
+    ui
+  )
+);
+const rank = { error: 0, info: 2, success: 3, warning: 1 };
+const icons = {
+  error: "i-lucide-octagon-alert",
+  info: "i-lucide-info",
+  success: "i-lucide-circle-check",
+  warning: "i-lucide-triangle-alert"
+};
+const entries = computed(() => {
+  const rows = (source.data ?? []).map((row, index) => {
+    const level = severity(row);
+    const raw = value?.(row);
+    const button = action?.(row);
+    return {
+      action: button ? { ...button, label: resolveTextValue(button.label) } : null,
+      actions: rowActions?.(row, index) ?? [],
+      color: `var(--ui-${level})`,
+      description: description ? resolveTextValue(description(row)) : "",
+      icon: icon?.(row) ?? icons[level],
+      index,
+      key: rowKey?.(row, index) ?? index,
+      label: resolveTextValue(label(row)),
+      level,
+      raw,
+      row,
+      selected: selected?.(row, index) ?? false,
+      value: raw === null || raw === void 0 ? "" : isNumber(raw) ? (format ?? formats.number.value)(raw) : resolveTextValue(raw)
+    };
+  });
+  return order === "severity" ? rows.sort((a, b) => rank[a.level] - rank[b.level]) : rows;
+});
+const visible = (expanded) => limit && !expanded ? entries.value.slice(0, limit) : entries.value;
+const emptyContent = computed(() => ({
+  icon: "i-lucide-circle-check",
+  title: t("dashboard.alerts.empty"),
+  ...empty
+}));
+function tabulate() {
+  const columns = [
+    { key: "severity", label: t("dashboard.table.severity"), numeric: false },
+    { key: "label", label: t("dashboard.table.label"), numeric: false },
+    description && { key: "description", label: t("dashboard.table.description"), numeric: false },
+    value && { key: "value", label: t("dashboard.table.value"), numeric: true }
+  ];
+  return {
+    columns: columns.filter((column) => column !== void 0),
+    rows: entries.value.map(
+      (entry) => [
+        toDashboardCell(t(`dashboard.alerts.severity.${entry.level}`)),
+        toDashboardCell(entry.label),
+        description && toDashboardCell(entry.description),
+        value && toDashboardCell(isNumber(entry.raw) ? entry.raw : entry.value, entry.value)
+      ].filter((cell) => cell !== void 0)
+    )
+  };
+}
+</script>
+
+<template>
+  <DashboardCard
+    v-bind="block"
+    :card
+    :menu
+    :freshness
+    :ui
+    :source
+    :empty="emptyContent"
+    :is-empty="entries.length === 0"
+    :tabulate
+  >
+    <template #skeleton>
+      <DashboardSkeleton kind="rows" leading="icon" :count="limit ?? 4" />
+    </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 }">
+      <ul class="flex flex-col divide-y divide-[var(--nut-dash-grid)]">
+        <li
+          v-for="entry in visible(expanded)"
+          :key="entry.key"
+          :data-severity="entry.level"
+          :data-selected="entry.selected || void 0"
+          :class="[
+  classes.row,
+  onSelect && DASHBOARD_SELECTABLE_ROW,
+  entry.selected && DASHBOARD_SELECTED_ROW
+]"
+        >
+          <span
+            :class="classes.icon"
+            :style="{
+  background: `color-mix(in oklab, ${entry.color} 12%, transparent)`,
+  color: entry.color
+}"
+          >
+            <UIcon :name="entry.icon" class="size-4" />
+            <span class="sr-only">{{ t(`dashboard.alerts.severity.${entry.level}`) }}</span>
+          </span>
+          <div class="min-w-0 flex-1">
+            <b :class="classes.label">{{ entry.label }}</b>
+            <small v-if="entry.description" :class="classes.description">
+              {{ entry.description }}
+            </small>
+          </div>
+          <span v-if="entry.value" :class="classes.value">{{ entry.value }}</span>
+          <button
+            v-if="onSelect"
+            type="button"
+            :class="DASHBOARD_ROW_BUTTON"
+            :aria-label="entry.label"
+            :aria-pressed="selected ? entry.selected : void 0"
+            @click="onSelect({ index: entry.index, row: entry.row })"
+          />
+          <UButton
+            v-if="entry.action"
+            color="neutral"
+            variant="outline"
+            size="xs"
+            :label="entry.action.label"
+            :icon="entry.action.icon"
+            :to="entry.action.to"
+            :class="classes.action"
+            @click="entry.action.onClick"
+          />
+          <DashboardRowActionsMenu
+            v-if="entry.actions.length"
+            :actions="entry.actions"
+            :label="entry.label"
+          />
+        </li>
+      </ul>
+    </template>
+  </DashboardCard>
+</template>

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

@@ -0,0 +1,49 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardAlertAction, DashboardAlertSeverity, DashboardAlertsUi, DashboardBlockBaseProps, DashboardBlockUi, DashboardRowActions, DashboardSelected, DashboardSelectEvent, 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<Omit<DashboardBlockBaseProps, "ui"> & {
+        source: DashboardSourceLike<readonly TRow[] | undefined>;
+        severity: (row: TRow) => DashboardAlertSeverity;
+        /** What needs attention. */
+        label: (row: TRow) => LazyTextValue;
+        description?: (row: TRow) => LazyTextValue | undefined;
+        /** Trailing figure (a count, an amount). Numbers go through `format`. */
+        value?: (row: TRow) => LazyTextValue | null | undefined;
+        format?: DashboardValueFormat;
+        /** Icon of the row. Defaults to the severity's icon. */
+        icon?: (row: TRow) => string | undefined;
+        /** Button at the end of the row (a link or a handler). */
+        action?: (row: TRow) => DashboardAlertAction | null | undefined;
+        /** `severity` (default): most severe first, ties in source order. `source`: as received. */
+        order?: "severity" | "source";
+        /** Rows shown in the card. The expand dialog, table view, and CSV export show them all. */
+        limit?: number;
+        rowKey?: (row: TRow, index: number) => PropertyKey;
+        /** Rows shown as selected (the value a `select` handler stored). */
+        selected?: DashboardSelected<TRow>;
+        /** More actions of each row: inline icon buttons and a `⋮` menu after its `action`. */
+        rowActions?: DashboardRowActions<TRow>;
+        /** Makes each row a button (next to its `action`). */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+        ui?: DashboardBlockUi & DashboardAlertsUi;
+    }> & (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-bar-chart.d.vue.ts

@@ -0,0 +1,53 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardAxisOptions, DashboardBlockBaseProps, DashboardHighlight, 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>;
+        /** Category of each row (month, account…). Rows are plotted in order. */
+        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 drawn over the bars, e.g. the previous period. */
+        comparison?: DashboardSeries<TRow>;
+        stacked?: boolean;
+        yAxis?: DashboardAxisOptions;
+        /** Value format for the axis and tooltips. */
+        format?: DashboardValueFormat;
+        reference?: DashboardReferenceLine | readonly DashboardReferenceLine[];
+        /** Chart height in pixels. */
+        height?: number;
+        /** Series legend in the header. */
+        legend?: boolean;
+        /** Expected number of x positions, drawn by the loading skeleton before data arrives. */
+        points?: number;
+        /** Bars drawn at full strength (`max`, `min`, `last`, or an accessor); the others fade. */
+        highlight?: DashboardHighlight<TRow>;
+        /** Rows shown as selected: their bars stay, the others fade (wins over `highlight`). */
+        selected?: DashboardSelected<TRow>;
+        /** Prints each group's value above its bars (the stack total when `stacked`). */
+        labels?: boolean;
+        /** 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-bar-chart.vue

@@ -0,0 +1,131 @@
+<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,
+  stacked = false,
+  yAxis,
+  format,
+  reference,
+  height = 250,
+  legend = true,
+  points = 12,
+  highlight,
+  selected,
+  labels = false,
+  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 },
+  stacked: { 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 },
+  highlight: { type: [String, Function], required: false },
+  selected: { type: Function, required: false },
+  labels: { type: Boolean, required: false },
+  onSelect: { type: Function, required: false }
+});
+defineSlots();
+const mounted = useMounted();
+const allSeries = computed(
+  () => comparison ? [...series, { color: "series-2", ...comparison, dashed: true, type: "line" }] : series
+);
+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: "bar",
+  format: () => format,
+  highlight: () => highlight,
+  labels: () => labels,
+  onSelect: () => onSelect,
+  references: () => reference,
+  rows: () => source.data ?? [],
+  selected: () => selected,
+  series: () => allSeries.value,
+  stacked: () => stacked,
+  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="bars"
+        :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-bar-chart.vue.d.ts

@@ -0,0 +1,53 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardAxisOptions, DashboardBlockBaseProps, DashboardHighlight, 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>;
+        /** Category of each row (month, account…). Rows are plotted in order. */
+        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 drawn over the bars, e.g. the previous period. */
+        comparison?: DashboardSeries<TRow>;
+        stacked?: boolean;
+        yAxis?: DashboardAxisOptions;
+        /** Value format for the axis and tooltips. */
+        format?: DashboardValueFormat;
+        reference?: DashboardReferenceLine | readonly DashboardReferenceLine[];
+        /** Chart height in pixels. */
+        height?: number;
+        /** Series legend in the header. */
+        legend?: boolean;
+        /** Expected number of x positions, drawn by the loading skeleton before data arrives. */
+        points?: number;
+        /** Bars drawn at full strength (`max`, `min`, `last`, or an accessor); the others fade. */
+        highlight?: DashboardHighlight<TRow>;
+        /** Rows shown as selected: their bars stay, the others fade (wins over `highlight`). */
+        selected?: DashboardSelected<TRow>;
+        /** Prints each group's value above its bars (the stack total when `stacked`). */
+        labels?: boolean;
+        /** 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-bars.d.vue.ts

@@ -0,0 +1,49 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardBarsUi, DashboardBlockBaseProps, DashboardBlockUi, DashboardRowActions, DashboardSelected, DashboardSelectEvent, DashboardSeriesColor, 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<Omit<DashboardBlockBaseProps, "ui"> & {
+        source: DashboardSourceLike<readonly TRow[] | undefined>;
+        label: (row: TRow) => LazyTextValue;
+        /** Small monospace tag after the label (version, code…). */
+        tag?: (row: TRow) => LazyTextValue | undefined;
+        /** Bar length. */
+        value: (row: TRow) => number;
+        /** Right-aligned text. Defaults to the formatted value. */
+        meta?: (row: TRow) => LazyTextValue;
+        format?: DashboardValueFormat;
+        /** Value of a full bar. Defaults to the largest value. */
+        max?: number;
+        color?: DashboardSeriesColor;
+        /** `first`: only the leading row takes `color`, the others use the muted tone. */
+        emphasis?: "all" | "first";
+        /** Rows shown in the card. The expand dialog, table view, and CSV export show them all. */
+        limit?: number;
+        rowKey?: (row: TRow, index: number) => PropertyKey;
+        /** Rows shown as selected: their bars keep `color`, the others fade. */
+        selected?: DashboardSelected<TRow>;
+        /** Actions of each row: inline icon buttons and a `⋮` menu after the value. */
+        rowActions?: DashboardRowActions<TRow>;
+        /** Makes each row a button. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+        ui?: DashboardBlockUi & DashboardBarsUi;
+    }> & (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];
+}) & {};