nuxt-ui-tools 1.0.0 → 1.1.0

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

@@ -0,0 +1,238 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { resolveTextValue } from "#ui-tools/shared/utils/render";
+import { useDashboardTime } from "../composables/use-dashboard-time";
+import { useDashboardUi } from "../composables/use-dashboard-ui";
+import { resolveDashboardColor } from "../utils/charts";
+import { toDashboardCell } from "../utils/export";
+import { startOfDashboardDay, toDashboardTime } from "../utils/time";
+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,
+  label,
+  description,
+  time,
+  icon,
+  color,
+  avatar,
+  groupBy,
+  limit,
+  rowKey,
+  selected,
+  rowActions,
+  onSelect,
+  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 },
+  label: { type: Function, required: true },
+  description: { type: Function, required: false },
+  time: { type: Function, required: true },
+  icon: { type: Function, required: false },
+  color: { type: Function, required: false },
+  avatar: { type: Function, required: false },
+  groupBy: { 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 clock = useDashboardTime();
+const appUi = useDashboardUi();
+const classes = computed(
+  () => resolveDashboardClasses(
+    {
+      description: "mt-0.5 block text-xs text-muted",
+      group: "pt-1 pb-2.5 text-[11px] font-semibold tracking-wide text-dimmed uppercase",
+      item: "flex min-w-0 gap-3",
+      label: "min-w-0 flex-1 text-[13px] text-default",
+      marker: "relative z-[1] grid size-7 shrink-0 place-items-center overflow-hidden rounded-full",
+      time: "shrink-0 text-[11.5px] text-dimmed tabular-nums"
+    },
+    appUi.value.feed,
+    ui
+  )
+);
+const entries = computed(
+  () => (source.data ?? []).map((row, index) => {
+    const at = toDashboardTime(time(row));
+    return {
+      actions: rowActions?.(row, index) ?? [],
+      at,
+      avatar: avatar?.(row),
+      color: resolveDashboardColor(color?.(row) ?? "neutral", 0),
+      day: startOfDashboardDay(at),
+      description: description ? resolveTextValue(description(row)) : "",
+      icon: icon?.(row),
+      index,
+      key: rowKey?.(row, index) ?? index,
+      label: resolveTextValue(label(row)),
+      row,
+      selected: selected?.(row, index) ?? false
+    };
+  })
+);
+function groups(expanded) {
+  const shown = limit && !expanded ? entries.value.slice(0, limit) : entries.value;
+  if (groupBy !== "day") return [{ entries: shown, key: "all", time: void 0 }];
+  const grouped = [];
+  for (const entry of shown) {
+    const last = grouped.at(-1);
+    if (last?.time === entry.day) last.entries.push(entry);
+    else grouped.push({ entries: [entry], key: String(entry.day), time: entry.day });
+  }
+  return grouped;
+}
+function tabulate() {
+  const columns = [
+    { key: "time", label: t("dashboard.table.time"), numeric: false },
+    { key: "label", label: t("dashboard.table.label"), numeric: false },
+    description && { key: "description", label: t("dashboard.table.description"), numeric: false }
+  ];
+  return {
+    columns: columns.filter((column) => column !== void 0),
+    rows: entries.value.map(
+      (entry) => [
+        toDashboardCell(
+          Number.isFinite(entry.at) ? new Date(entry.at).toISOString() : "",
+          clock.absolute(entry.at)
+        ),
+        toDashboardCell(entry.label),
+        description && toDashboardCell(entry.description)
+      ].filter((cell) => cell !== void 0)
+    )
+  };
+}
+</script>
+
+<template>
+  <DashboardCard
+    v-bind="block"
+    :card
+    :menu
+    :freshness
+    :ui
+    :source
+    :is-empty="entries.length === 0"
+    :tabulate
+  >
+    <template #skeleton>
+      <DashboardSkeleton kind="feed" :count="limit ?? 5" />
+    </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 }">
+      <div class="flex flex-col">
+        <section v-for="group in groups(expanded)" :key="group.key">
+          <h3 v-if="group.time !== void 0" :class="classes.group">
+            {{ clock.day(group.time) }}
+          </h3>
+          <ol class="flex flex-col">
+            <li
+              v-for="(entry, position) in group.entries"
+              :key="entry.key"
+              :data-selected="entry.selected || void 0"
+              :class="[
+  classes.item,
+  onSelect && DASHBOARD_SELECTABLE_ROW,
+  entry.selected && DASHBOARD_SELECTED_ROW
+]"
+            >
+              <!-- Rail: the marker, then a line down to the next event of the group -->
+              <div class="relative flex w-7 shrink-0 flex-col items-center">
+                <span v-if="entry.avatar" :class="classes.marker" class="bg-elevated">
+                  <img :src="entry.avatar" alt="" class="size-full object-cover" />
+                </span>
+                <span
+                  v-else-if="entry.icon"
+                  :class="classes.marker"
+                  :style="{
+  background: `color-mix(in oklab, ${entry.color} 12%, var(--ui-bg))`,
+  color: entry.color
+}"
+                >
+                  <UIcon :name="entry.icon" class="size-3.5" />
+                </span>
+                <span v-else :class="classes.marker">
+                  <span class="size-2 rounded-full" :style="{ background: entry.color }" />
+                </span>
+                <span
+                  v-if="position < group.entries.length - 1"
+                  aria-hidden="true"
+                  class="w-px flex-1 bg-[var(--nut-dash-grid)]"
+                />
+              </div>
+              <div class="flex min-w-0 flex-1 items-baseline gap-3 pt-[5px] pb-3.5">
+                <div :class="classes.label">
+                  {{ entry.label }}
+                  <small v-if="entry.description" :class="classes.description">
+                    {{ entry.description }}
+                  </small>
+                </div>
+                <time
+                  :datetime="
+  Number.isFinite(entry.at) ? new Date(entry.at).toISOString() : void 0
+"
+                  :title="clock.absolute(entry.at)"
+                  :class="classes.time"
+                  data-allow-mismatch="text"
+                >
+                  {{ clock.relative(entry.at) }}
+                </time>
+                <DashboardRowActionsMenu
+                  v-if="entry.actions.length"
+                  :actions="entry.actions"
+                  :label="entry.label"
+                  class="-my-1 self-center"
+                />
+              </div>
+              <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 })"
+              />
+            </li>
+          </ol>
+        </section>
+      </div>
+    </template>
+  </DashboardCard>
+</template>

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

@@ -0,0 +1,49 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardFeedUi, DashboardRowActions, DashboardSelected, DashboardSelectEvent, DashboardSeriesColor, DashboardSourceLike, DashboardTimeValue } 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>;
+        /** What happened. */
+        label: (row: TRow) => LazyTextValue;
+        description?: (row: TRow) => LazyTextValue | undefined;
+        /** When it happened: a `Date`, epoch milliseconds, or an ISO string. Shown relative to now. */
+        time: (row: TRow) => DashboardTimeValue;
+        /** Icon on the timeline rail. Without `icon` or `avatar`, the rail shows a dot. */
+        icon?: (row: TRow) => string | undefined;
+        /** Tint of the icon or dot: a palette slot, a Nuxt UI color, or any CSS color. */
+        color?: (row: TRow) => DashboardSeriesColor | undefined;
+        /** Image URL shown on the rail instead of the icon (who did it). */
+        avatar?: (row: TRow) => string | undefined;
+        /** `day`: a heading per day (`Today`, `Yesterday`, then the date). Rows keep source order. */
+        groupBy?: "day";
+        /** Events shown in the card. The expand dialog, table view, and CSV export show them all. */
+        limit?: number;
+        rowKey?: (row: TRow, index: number) => PropertyKey;
+        /** Events shown as selected (the value a `select` handler stored). */
+        selected?: DashboardSelected<TRow>;
+        /** Actions of each event: inline icon buttons and a `⋮` menu after its time. */
+        rowActions?: DashboardRowActions<TRow>;
+        /** Makes each event a button. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+        ui?: DashboardBlockUi & DashboardFeedUi;
+    }> & (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-funnel.d.vue.ts

@@ -0,0 +1,34 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardFunnelUi, 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;
+        value: (row: TRow) => number;
+        format?: DashboardValueFormat;
+        /** Colors per step, in order. Defaults to the palette. */
+        colors?: readonly DashboardSeriesColor[];
+        /** Makes each step a button. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+        ui?: DashboardBlockUi & DashboardFunnelUi;
+    }> & (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-funnel.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+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 {
+  DASHBOARD_ROW_BUTTON,
+  DASHBOARD_SELECTABLE_ROW,
+  resolveDashboardClasses
+} from "../utils/ui";
+import DashboardSkeleton from "./block/dashboard-skeleton.vue";
+import DashboardCard from "./dashboard-card.vue";
+const {
+  source,
+  card = true,
+  menu = void 0,
+  freshness = void 0,
+  label,
+  value,
+  format,
+  colors,
+  onSelect,
+  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 },
+  label: { type: Function, required: true },
+  value: { type: Function, required: true },
+  format: { type: Function, required: false },
+  colors: { type: Array, 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(
+    {
+      label: "font-medium text-default",
+      note: "ms-auto shrink-0 text-xs text-muted",
+      step: "flex flex-col gap-1.5",
+      track: "h-[22px] overflow-hidden rounded-[5px] bg-[var(--nut-dash-track)]",
+      value: "text-[15px] font-semibold text-highlighted tabular-nums"
+    },
+    appUi.value.funnel,
+    ui
+  )
+);
+const steps = computed(() => {
+  const data = source.data ?? [];
+  const values = data.map((row) => value(row));
+  const first = values[0] ?? 0;
+  return data.map((row, index) => {
+    const amount = values[index] ?? 0;
+    const previous = values[index - 1];
+    const ratio = previous === void 0 || previous <= 0 ? null : amount / previous * 100;
+    return {
+      amount,
+      color: resolveDashboardColor(colors?.[index], index),
+      index,
+      label: resolveTextValue(label(row)),
+      note: previous === void 0 ? t("dashboard.funnel.base") : t("dashboard.funnel.fromPrevious", {
+        value: ratio === null ? "\u2014" : formats.percent.value(ratio)
+      }),
+      ratio,
+      row,
+      value: (format ?? formats.number.value)(amount),
+      width: first > 0 ? `${amount / first * 100}%` : "0%"
+    };
+  });
+});
+function tabulate() {
+  return {
+    columns: [
+      { key: "label", label: t("dashboard.table.label"), numeric: false },
+      { key: "value", label: t("dashboard.table.value"), numeric: true },
+      { key: "share", label: t("dashboard.table.share"), numeric: true }
+    ],
+    rows: steps.value.map((step) => [
+      toDashboardCell(step.label),
+      toDashboardCell(step.amount, step.value),
+      toDashboardCell(
+        step.ratio === null ? null : Math.round(step.ratio * 10) / 10,
+        step.ratio === null ? "" : formats.percent.value(step.ratio)
+      )
+    ])
+  };
+}
+</script>
+
+<template>
+  <DashboardCard
+    v-bind="block"
+    :card
+    :menu
+    :freshness
+    :ui
+    :source
+    :is-empty="steps.length === 0"
+    :tabulate
+  >
+    <template #skeleton>
+      <DashboardSkeleton kind="funnel" :count="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>
+
+    <ol class="flex flex-col gap-3.5 pt-1">
+      <li
+        v-for="step in steps"
+        :key="step.index"
+        :class="[classes.step, onSelect && [DASHBOARD_SELECTABLE_ROW, 'py-1']]"
+      >
+        <div class="flex items-baseline gap-2.5 text-[13px]">
+          <b :class="classes.label">{{ step.label }}</b>
+          <span :class="classes.value">{{ step.value }}</span>
+          <small :class="classes.note">{{ step.note }}</small>
+        </div>
+        <div :class="classes.track">
+          <i
+            class="block h-full min-w-1.5 rounded-[5px] transition-[width] duration-500 ease-out"
+            :style="{ background: step.color, width: step.width }"
+          />
+        </div>
+        <button
+          v-if="onSelect"
+          type="button"
+          :class="DASHBOARD_ROW_BUTTON"
+          :aria-label="step.label"
+          @click="onSelect({ index: step.index, row: step.row })"
+        />
+      </li>
+    </ol>
+  </DashboardCard>
+</template>

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

@@ -0,0 +1,34 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardFunnelUi, 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;
+        value: (row: TRow) => number;
+        format?: DashboardValueFormat;
+        /** Colors per step, in order. Defaults to the palette. */
+        colors?: readonly DashboardSeriesColor[];
+        /** Makes each step a button. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+        ui?: DashboardBlockUi & DashboardFunnelUi;
+    }> & (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-gauge.d.vue.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];
+}) & {};