nuxt-ui-tools 1.0.0 → 1.1.0

package/dist/runtime/dashboard/components/block/dashboard-skeleton.vue

@@ -0,0 +1,312 @@
+<script setup>
+import { computed } from "vue";
+import { createDashboardSeededRandom } from "../../utils/charts";
+const props = defineProps({
+  kind: { type: String, required: false, default: "rows" },
+  count: { type: Number, required: false, default: 0 },
+  series: { type: Number, required: false, default: 1 },
+  height: { type: Number, required: false, default: 250 },
+  leading: { type: String, required: false },
+  columns: { type: Number, required: false, default: 4 },
+  extra: { type: String, required: false },
+  layout: { type: String, required: false, default: "side" },
+  diameter: { type: Number, required: false, default: 150 },
+  seed: { type: String, required: false, default: "dashboard" }
+});
+const points = computed(
+  () => props.count || (props.kind === "bars" || props.kind === "lines" ? 12 : 5)
+);
+const random = computed(() => createDashboardSeededRandom(`${props.kind}:${props.seed}`));
+const groups = computed(() => {
+  const next = random.value;
+  return Array.from(
+    { length: points.value },
+    () => Array.from({ length: Math.max(1, props.series) }, () => 28 + Math.round(next() * 58))
+  );
+});
+const linePath = computed(() => {
+  const next = random.value;
+  const values = Array.from({ length: points.value }, (_, index) => 30 + index * 2.5 + next() * 22);
+  const step = 100 / Math.max(1, values.length - 1);
+  return values.map(
+    (value, index) => `${index === 0 ? "M" : "L"}${(index * step).toFixed(2)},${(100 - value).toFixed(2)}`
+  ).join(" ");
+});
+const widths = computed(() => {
+  const next = random.value;
+  return Array.from({ length: points.value }, () => 38 + Math.round(next() * 40));
+});
+const funnelWidths = computed(
+  () => Array.from({ length: points.value }, (_, index) => Math.max(18, 100 - index * 19))
+);
+</script>
+
+<template>
+  <!-- KPI: value, then delta and caption, then a sparkline or a progress bar -->
+  <div v-if="kind === 'stat'" class="flex flex-col gap-2.5 pt-1.5">
+    <div class="nut-dash-ghost h-[26px] w-[58%] rounded-md" />
+    <div class="flex items-center gap-2">
+      <div class="nut-dash-ghost h-3 w-12 rounded-sm" />
+      <div class="nut-dash-ghost h-3 w-[40%] rounded-sm opacity-70" />
+    </div>
+    <svg
+      v-if="extra === 'trend'"
+      class="mt-1.5 h-8 w-full overflow-visible"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="none"
+    >
+      <path
+        :d="linePath"
+        fill="none"
+        stroke="var(--nut-dash-ghost)"
+        stroke-width="2"
+        vector-effect="non-scaling-stroke"
+        stroke-linecap="round"
+      />
+    </svg>
+    <div v-else-if="extra === 'goal'" class="mt-1.5 flex flex-col gap-1.5">
+      <div class="h-1.5 rounded-full bg-[var(--nut-dash-track)]">
+        <div class="nut-dash-ghost h-full w-3/5 rounded-full" />
+      </div>
+      <div class="nut-dash-ghost h-2 w-[45%] rounded-sm opacity-70" />
+    </div>
+  </div>
+
+  <!-- Feed: a rail of markers, two lines per event, and a time -->
+  <div v-else-if="kind === 'feed'" class="flex flex-col">
+    <div v-for="(width, index) in widths" :key="index" class="flex gap-3 pb-3.5">
+      <div class="flex w-7 shrink-0 flex-col items-center">
+        <div class="nut-dash-ghost size-7 rounded-full" />
+        <div v-if="index < widths.length - 1" class="mt-1 w-px flex-1 bg-[var(--nut-dash-grid)]" />
+      </div>
+      <div class="flex min-w-0 flex-1 flex-col gap-1.5 pt-1">
+        <div class="flex items-center gap-3">
+          <div class="nut-dash-ghost h-2.5 rounded-sm" :style="{ width: `${width}%` }" />
+          <div class="nut-dash-ghost ms-auto h-2 w-10 shrink-0 rounded-sm opacity-70" />
+        </div>
+        <div class="nut-dash-ghost h-2 w-[40%] rounded-sm opacity-70" />
+      </div>
+    </div>
+  </div>
+
+  <!-- Table: header labels, then rows of cells (first column wider, numbers to the end) -->
+  <div v-else-if="kind === 'table'" class="flex flex-col">
+    <div class="flex gap-5 pb-2.5">
+      <div
+        v-for="column in columns"
+        :key="column"
+        class="flex flex-1"
+        :class="column === 1 ? 'grow-[2]' : 'justify-end'"
+      >
+        <div class="nut-dash-ghost h-2 w-14 rounded-sm opacity-70" />
+      </div>
+    </div>
+    <div
+      v-for="(width, index) in widths"
+      :key="index"
+      class="flex items-center gap-5 border-t border-[var(--nut-dash-grid)] py-[11px]"
+    >
+      <div
+        v-for="column in columns"
+        :key="column"
+        class="flex flex-1"
+        :class="column === 1 ? 'grow-[2]' : 'justify-end'"
+      >
+        <div
+          class="nut-dash-ghost h-2.5 rounded-sm"
+          :style="{ width: column === 1 ? `${width}%` : `${36 + (index + column) % 3 * 14}%` }"
+        />
+      </div>
+    </div>
+  </div>
+
+  <!-- XY charts: y labels, gridlines, grouped bars or a smooth line, x labels -->
+  <div
+    v-else-if="kind === 'bars' || kind === 'lines'"
+    class="flex flex-col"
+    :style="{ height: `${height}px` }"
+  >
+    <div class="flex min-h-0 flex-1 gap-2">
+      <div class="flex w-8 shrink-0 flex-col justify-between py-0.5">
+        <div
+          v-for="tick in 5"
+          :key="tick"
+          class="nut-dash-ghost ms-auto h-2 w-6 rounded-sm opacity-70"
+        />
+      </div>
+      <div class="relative flex min-w-0 flex-1 items-end">
+        <div
+          v-for="line in 5"
+          :key="line"
+          class="absolute inset-x-0 border-t border-[var(--nut-dash-grid)]"
+          :style="{ top: `${(line - 1) / 4 * 100}%` }"
+        />
+        <template v-if="kind === 'bars'">
+          <div
+            v-for="(group, index) in groups"
+            :key="index"
+            class="relative flex h-full flex-1 items-end justify-center gap-px"
+          >
+            <div
+              v-for="(bar, barIndex) in group"
+              :key="barIndex"
+              class="nut-dash-ghost w-[min(14px,22%)] rounded-t-[2px]"
+              :style="{ height: `${bar}%` }"
+            />
+          </div>
+        </template>
+        <svg
+          v-else
+          class="absolute inset-0 size-full overflow-visible"
+          viewBox="0 0 100 100"
+          preserveAspectRatio="none"
+        >
+          <path
+            :d="linePath"
+            fill="none"
+            stroke="var(--nut-dash-ghost)"
+            stroke-width="2.5"
+            vector-effect="non-scaling-stroke"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="mt-2 flex ps-10">
+      <div v-for="index in points" :key="index" class="flex flex-1 justify-center">
+        <div class="nut-dash-ghost h-2 w-5 rounded-sm opacity-70" />
+      </div>
+    </div>
+  </div>
+
+  <!-- Stat group: label, value, and meta line per figure -->
+  <div v-else-if="kind === 'stats'" class="flex flex-wrap gap-x-6 gap-y-5">
+    <div
+      v-for="index in Math.max(1, count || 3)"
+      :key="index"
+      class="flex min-w-24 flex-1 flex-col gap-2"
+    >
+      <div class="nut-dash-ghost h-2.5 w-[55%] rounded-sm opacity-70" />
+      <div class="nut-dash-ghost h-5 w-[70%] rounded-md" />
+      <div class="nut-dash-ghost h-2 w-[40%] rounded-sm opacity-70" />
+    </div>
+  </div>
+
+  <!-- Gauge: an open arc and its scale -->
+  <div v-else-if="kind === 'gauge'" class="flex flex-col items-center gap-3 pt-1">
+    <div
+      class="rounded-full border-[12px] border-[var(--nut-dash-ghost)] border-b-transparent"
+      :style="{ height: `${diameter}px`, width: `${diameter}px` }"
+    />
+    <div class="flex justify-between" :style="{ width: `${diameter}px` }">
+      <div class="nut-dash-ghost h-2 w-6 rounded-sm opacity-70" />
+      <div class="nut-dash-ghost h-2 w-8 rounded-sm opacity-70" />
+    </div>
+  </div>
+
+  <!-- Donut: ring and legend -->
+  <div
+    v-else-if="kind === 'donut'"
+    :class="
+  layout === 'stacked' ? 'flex flex-col items-center gap-[18px]' : 'flex flex-wrap items-center gap-5'
+"
+  >
+    <div
+      class="shrink-0 rounded-full border-[14px] border-[var(--nut-dash-ghost)]"
+      :style="{ height: `${diameter}px`, width: `${diameter}px` }"
+    />
+    <div class="flex w-full min-w-40 flex-1 flex-col gap-3">
+      <div
+        v-for="(width, index) in widths.slice(0, 4)"
+        :key="index"
+        class="flex items-center gap-2"
+      >
+        <div class="nut-dash-ghost size-[9px] shrink-0 rounded-[3px]" />
+        <div class="nut-dash-ghost h-2.5 rounded-sm" :style="{ width: `${width}%` }" />
+        <div class="nut-dash-ghost ms-auto h-2.5 w-8 rounded-sm" />
+      </div>
+    </div>
+  </div>
+
+  <!-- Horizontal bars: label + meta, then a thin track -->
+  <div v-else-if="kind === 'hbars'" class="flex flex-col gap-1">
+    <div v-for="(width, index) in widths" :key="index" class="flex flex-col gap-2 py-1.5">
+      <div class="flex items-center justify-between gap-3">
+        <div class="nut-dash-ghost h-2.5 rounded-sm" :style="{ width: `${width}%` }" />
+        <div class="nut-dash-ghost h-2.5 w-14 rounded-sm opacity-70" />
+      </div>
+      <div class="h-1.5 rounded-full bg-[var(--nut-dash-track)]">
+        <div
+          class="nut-dash-ghost h-full rounded-full"
+          :style="{ width: `${100 - index * 14}%` }"
+        />
+      </div>
+    </div>
+  </div>
+
+  <!-- Funnel: label + value, then decreasing thick bars -->
+  <div v-else-if="kind === 'funnel'" class="flex flex-col gap-3.5 pt-1">
+    <div v-for="(width, index) in funnelWidths" :key="index" class="flex flex-col gap-1.5">
+      <div class="flex items-center gap-2.5">
+        <div class="nut-dash-ghost h-2.5 w-24 rounded-sm" />
+        <div class="nut-dash-ghost h-3 w-10 rounded-sm" />
+        <div class="nut-dash-ghost ms-auto h-2.5 w-28 rounded-sm opacity-70" />
+      </div>
+      <div class="h-[22px] rounded-[5px] bg-[var(--nut-dash-track)]">
+        <div class="nut-dash-ghost h-full rounded-[5px]" :style="{ width: `${width}%` }" />
+      </div>
+    </div>
+  </div>
+
+  <!-- Stacked bar: one bar, legend in two columns -->
+  <div v-else-if="kind === 'stack'" class="flex flex-col gap-4 pt-1.5">
+    <div class="nut-dash-ghost h-3.5 rounded-full" />
+    <div class="grid grid-cols-2 gap-x-[18px] gap-y-2">
+      <div
+        v-for="(width, index) in widths.slice(0, 4)"
+        :key="index"
+        class="flex items-center gap-2"
+      >
+        <div class="nut-dash-ghost size-[9px] shrink-0 rounded-[3px]" />
+        <div class="nut-dash-ghost h-2.5 rounded-sm" :style="{ width: `${width}%` }" />
+      </div>
+    </div>
+  </div>
+
+  <!-- Paired bars: label, track, numbers -->
+  <div v-else-if="kind === 'paired'" class="flex flex-col">
+    <div
+      v-for="(width, index) in widths"
+      :key="index"
+      class="grid grid-cols-[minmax(0,150px)_1fr_auto] items-center gap-3 py-1.5"
+    >
+      <div class="nut-dash-ghost h-2.5 rounded-sm" :style="{ width: `${width}%` }" />
+      <div class="h-3 rounded-full bg-[var(--nut-dash-track)]">
+        <div class="nut-dash-ghost h-full rounded-full" :style="{ width: `${100 - index * 5}%` }" />
+      </div>
+      <div class="nut-dash-ghost h-2.5 w-24 rounded-sm opacity-70" />
+    </div>
+  </div>
+
+  <!-- Ranked rows: leading, two text lines, value -->
+  <div v-else class="flex flex-col divide-y divide-[var(--nut-dash-grid)]">
+    <div v-for="(width, index) in widths" :key="index" class="flex items-center gap-3 py-[9px]">
+      <div
+        v-if="leading"
+        :class="
+  leading === 'code' ? 'h-[22px] w-8 rounded-[5px]' : leading === 'icon' ? 'size-8 rounded-lg' : 'size-[30px] rounded-[7px]'
+"
+        class="nut-dash-ghost shrink-0"
+      />
+      <div class="flex min-w-0 flex-1 flex-col gap-1.5">
+        <div class="nut-dash-ghost h-2.5 rounded-sm" :style="{ width: `${width}%` }" />
+        <div
+          v-if="leading === 'avatar' || leading === 'icon'"
+          class="nut-dash-ghost h-2 w-[30%] rounded-sm opacity-70"
+        />
+      </div>
+      <div class="nut-dash-ghost h-3 w-10 shrink-0 rounded-sm" />
+    </div>
+  </div>
+</template>

package/dist/runtime/dashboard/components/block/dashboard-skeleton.vue.d.ts

@@ -0,0 +1,34 @@
+import type { DashboardSkeletonKind } from '../../types/index.js';
+type __VLS_Props = {
+    kind?: DashboardSkeletonKind;
+    /** Rows for list-like kinds, x points for charts. */
+    count?: number;
+    /** Bars per group (`bars`), or lines (`lines`). */
+    series?: number;
+    /** Chart height in pixels, x labels included. */
+    height?: number;
+    /** Leading visual of `rows`. */
+    leading?: 'avatar' | 'code' | 'icon';
+    /** Columns of `table`. */
+    columns?: number;
+    /** Extra line of `stat`: a sparkline or a progress bar. */
+    extra?: 'trend' | 'goal';
+    /** `donut` legend placement. */
+    layout?: 'side' | 'stacked';
+    /** Diameter of the `donut` ring. */
+    diameter?: number;
+    /** Seed of the deterministic geometry: server and client paint the same ghost. */
+    seed?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    kind: DashboardSkeletonKind;
+    layout: "side" | "stacked";
+    height: number;
+    count: number;
+    series: number;
+    columns: number;
+    diameter: number;
+    seed: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/dashboard/components/charts/renderer.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Chart renderer seam. Blocks never import a chart library: they render these async components,
+ * which are the only modules allowed to import `@unovis/*`. A second backend only needs another
+ * entry with the same props.
+ */
+export declare const dashboardChartRenderer: {
+    donut: import("vue").DefineComponent<{
+        segments: readonly {
+            value: number;
+            color: string;
+        }[];
+        size: number;
+        thickness: number;
+        padAngle: number;
+        selectable?: boolean;
+    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        select: (index: number) => any;
+    }, string, import("vue").PublicProps, Readonly<{
+        segments: readonly {
+            value: number;
+            color: string;
+        }[];
+        size: number;
+        thickness: number;
+        padAngle: number;
+        selectable?: boolean;
+    }> & Readonly<{
+        onSelect?: ((index: number) => any) | undefined;
+    }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    xy: import("vue").DefineComponent<{
+        frame: import("../../types/index.js").DashboardChartFrame;
+        height: number;
+        selectable?: boolean;
+    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        select: (index: number) => any;
+    }, string, import("vue").PublicProps, Readonly<{
+        frame: import("../../types/index.js").DashboardChartFrame;
+        height: number;
+        selectable?: boolean;
+    }> & Readonly<{
+        onSelect?: ((index: number) => any) | undefined;
+    }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};

package/dist/runtime/dashboard/components/charts/renderer.js

@@ -0,0 +1,34 @@
+import { defineAsyncComponent, defineComponent, h } from "vue";
+const XyPlaceholder = defineComponent({
+  inheritAttrs: false,
+  props: { height: { default: 250, type: Number } },
+  setup: (props) => () => h("div", { "aria-hidden": "true", style: { height: `${props.height}px` } })
+});
+const DonutPlaceholder = defineComponent({
+  inheritAttrs: false,
+  props: {
+    size: { default: 150, type: Number },
+    thickness: { default: 14, type: Number }
+  },
+  setup: (props) => () => h("div", {
+    "aria-hidden": "true",
+    class: "rounded-full border-[var(--nut-dash-ghost)]",
+    style: {
+      borderWidth: `${props.thickness}px`,
+      height: `${props.size}px`,
+      width: `${props.size}px`
+    }
+  })
+});
+export const dashboardChartRenderer = {
+  donut: defineAsyncComponent({
+    delay: 0,
+    loader: () => import("./unovis/dashboard-donut-chart.vue"),
+    loadingComponent: DonutPlaceholder
+  }),
+  xy: defineAsyncComponent({
+    delay: 0,
+    loader: () => import("./unovis/dashboard-xy-chart.vue"),
+    loadingComponent: XyPlaceholder
+  })
+};

package/dist/runtime/dashboard/components/charts/unovis/dashboard-donut-chart.d.vue.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    segments: readonly {
+        value: number;
+        color: string;
+    }[];
+    size: number;
+    thickness: number;
+    padAngle: number;
+    /** A click on a segment selects it. */
+    selectable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/dashboard/components/charts/unovis/dashboard-donut-chart.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { Donut } from "@unovis/ts";
+import VisDonut from "@unovis/vue/components/donut";
+import VisSingleContainer from "@unovis/vue/containers/single-container";
+import { usePreferredReducedMotion } from "@vueuse/core";
+import { computed } from "vue";
+const props = defineProps({
+  segments: { type: Array, required: true },
+  size: { type: Number, required: true },
+  thickness: { type: Number, required: true },
+  padAngle: { type: Number, required: true },
+  selectable: { type: Boolean, required: false }
+});
+const emit = defineEmits(["select"]);
+const reducedMotion = usePreferredReducedMotion();
+const duration = computed(() => reducedMotion.value === "reduce" ? 0 : 500);
+const value = (segment) => segment.value;
+const color = (segment) => segment.color;
+const events = computed(
+  () => props.selectable ? {
+    [Donut.selectors.segment]: {
+      click: (arc) => emit("select", arc.index)
+    }
+  } : {}
+);
+</script>
+
+<template>
+  <div
+    class="nut-dash-chart"
+    :class="selectable && '[&_path]:cursor-pointer'"
+    :style="{ height: `${size}px`, width: `${size}px` }"
+  >
+    <VisSingleContainer :data="props.segments" :height="size" :width="size" :duration="duration">
+      <VisDonut
+        :value="value"
+        :color="color"
+        :arc-width="thickness"
+        :pad-angle="padAngle"
+        :show-background="false"
+        :events="events"
+      />
+    </VisSingleContainer>
+  </div>
+</template>

package/dist/runtime/dashboard/components/charts/unovis/dashboard-donut-chart.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    segments: readonly {
+        value: number;
+        color: string;
+    }[];
+    size: number;
+    thickness: number;
+    padAngle: number;
+    /** A click on a segment selects it. */
+    selectable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/dashboard/components/charts/unovis/dashboard-xy-chart.d.vue.ts

@@ -0,0 +1,14 @@
+import type { DashboardChartFrame } from '../../../types/index.js';
+type __VLS_Props = {
+    frame: DashboardChartFrame;
+    height: number;
+    /** A click selects the x position under the pointer. */
+    selectable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;