nuxt-ui-tools 1.0.0 → 1.1.0

package/dist/module.d.mts

@@ -1,5 +1,6 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { ModuleOptions as ModuleOptions$1 } from 'nuxt-viewport';
+import { DashboardUiConfig } from '../dist/runtime/dashboard/types/index.js';
 import { FormUiConfig } from '../dist/runtime/form/types/index.js';
 import { DataListUiConfig } from '../dist/runtime/table/types/index.js';
 
@@ -9,12 +10,14 @@ declare module '@nuxt/schema' {
     }
     interface AppConfigInput {
         nuxtUiTools?: {
+            dashboard?: DashboardUiConfig;
             dataList?: DataListUiConfig;
             form?: FormUiConfig;
         };
     }
     interface AppConfig {
         nuxtUiTools?: {
+            dashboard?: DashboardUiConfig;
             dataList?: DataListUiConfig;
             form?: FormUiConfig;
         };

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -45,6 +45,36 @@ function getPublicComponents(runtimeDir, options) {
       global: options.global,
       name: `${prefix}DataList${part}`
     })),
+    // Dashboard
+    ...[
+      "Grid",
+      "Card",
+      "Stat",
+      "Stats",
+      "Gauge",
+      "Tabs",
+      "Refresh",
+      "Widget",
+      "List",
+      "Bars",
+      "PairedBars",
+      "Funnel",
+      "StackBar",
+      "BarChart",
+      "LineChart",
+      "ComboChart",
+      "DonutChart",
+      "Alerts",
+      "Feed",
+      "Table",
+      "Legend",
+      "Total",
+      "RelativeTime"
+    ].map((part) => ({
+      filePath: `${runtimeDir}/dashboard/components/dashboard-${toKebabCase(part)}.vue`,
+      global: options.global,
+      name: `${prefix}Dashboard${part}`
+    })),
     // Form
     {
       filePath: `${runtimeDir}/form/components/root/form.vue`,
@@ -120,6 +150,12 @@ function setupImports(runtimeDir) {
       { from: "table", name: "tableSource" },
       { from: "table", name: "useTable" }
     ]),
+    // Dashboard
+    ...withRuntime(runtimeDir, [
+      { from: "dashboard", name: "defineDashboardSchema" },
+      { from: "dashboard", name: "useDashboard" },
+      { from: "dashboard", name: "resolveDashboardComparisonRange" }
+    ]),
     // Form
     ...withRuntime(runtimeDir, [
       { from: "form", name: "defineFormField" },
@@ -299,6 +335,7 @@ const viewportDefaults = {
   feature: "minWidth"
 };
 const publicRuntimeDomains = [
+  "dashboard",
   "form",
   "i18n",
   "query-prefetch",

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

@@ -0,0 +1,12 @@
+import type { DashboardEmptyContent } from '../../types/index.js';
+type __VLS_Props = {
+    kind: 'error' | 'empty';
+    empty?: DashboardEmptyContent;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    retry: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRetry?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,59 @@
+<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 { resolveTextValue } from "#ui-tools/shared/utils/render";
+import { useDashboardUi } from "../../composables/use-dashboard-ui";
+import { resolveDashboardClasses } from "../../utils/ui";
+const props = defineProps({
+  kind: { type: String, required: true },
+  empty: { type: Object, required: false }
+});
+const emit = defineEmits(["retry"]);
+const { t } = useUiToolsLocale();
+const appUi = useDashboardUi();
+const content = computed(
+  () => props.kind === "error" ? {
+    description: t("dashboard.states.errorDescription"),
+    icon: "i-lucide-cloud-alert",
+    title: t("dashboard.states.error")
+  } : {
+    description: resolveTextValue(props.empty?.description),
+    icon: props.empty?.icon ?? "i-lucide-chart-no-axes-column",
+    title: resolveTextValue(props.empty?.title, t("dashboard.states.empty"))
+  }
+);
+const classes = computed(
+  () => resolveDashboardClasses(
+    {
+      description: "max-w-72 text-xs text-muted",
+      icon: "mb-1 size-6.5 text-dimmed",
+      root: "flex min-h-40 flex-col items-center justify-center gap-1 px-4 py-10 text-center",
+      title: "text-sm font-semibold text-highlighted"
+    },
+    appUi.value.state
+  )
+);
+</script>
+
+<template>
+  <div :role="kind === 'error' ? 'alert' : void 0" :data-state="kind" :class="classes.root">
+    <UIcon
+      :name="content.icon"
+      :class="[classes.icon, kind === 'error' && 'text-[var(--nut-dash-down)]']"
+    />
+    <p :class="classes.title">{{ content.title }}</p>
+    <p v-if="content.description" :class="classes.description">{{ content.description }}</p>
+    <UButton
+      v-if="kind === 'error'"
+      class="mt-2.5"
+      color="neutral"
+      variant="outline"
+      size="xs"
+      icon="i-lucide-rotate-cw"
+      :label="t('dashboard.states.retry')"
+      @click="emit('retry')"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+import type { DashboardEmptyContent } from '../../types/index.js';
+type __VLS_Props = {
+    kind: 'error' | 'empty';
+    empty?: DashboardEmptyContent;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    retry: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRetry?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,9 @@
+import type { DashboardDataTable } from '../../types/index.js';
+type __VLS_Props = {
+    table: DashboardDataTable;
+    /** Caps the height and scrolls under a sticky header. */
+    scroll?: boolean;
+};
+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/block/dashboard-data-table.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { computed } from "vue";
+import { useDashboardUi } from "../../composables/use-dashboard-ui";
+import { DASHBOARD_TABLE_CLASSES, resolveDashboardClasses } from "../../utils/ui";
+const props = defineProps({
+  table: { type: Object, required: true },
+  scroll: { type: Boolean, required: false }
+});
+const appUi = useDashboardUi();
+const classes = computed(() => resolveDashboardClasses(DASHBOARD_TABLE_CLASSES, appUi.value.table));
+</script>
+
+<template>
+  <div :class="[classes.wrapper, scroll && 'max-h-80']" data-table-view>
+    <table :class="classes.table">
+      <thead :class="classes.head">
+        <tr>
+          <th
+            v-for="column in props.table.columns"
+            :key="column.key"
+            scope="col"
+            :class="[classes.th, column.numeric ? 'text-end' : 'text-start']"
+          >
+            {{ column.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, rowIndex) in props.table.rows" :key="rowIndex" :class="classes.row">
+          <component
+            :is="index === 0 ? 'th' : 'td'"
+            v-for="(cell, index) in row"
+            :key="index"
+            :scope="index === 0 ? 'row' : void 0"
+            :class="[
+  classes.td,
+  props.table.columns[index]?.numeric ? 'text-end tabular-nums' : 'text-start',
+  index === 0 && 'font-medium text-default'
+]"
+          >
+            {{ cell.text }}
+          </component>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+import type { DashboardDataTable } from '../../types/index.js';
+type __VLS_Props = {
+    table: DashboardDataTable;
+    /** Caps the height and scrolls under a sticky header. */
+    scroll?: boolean;
+};
+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/block/dashboard-ring.d.vue.ts

@@ -0,0 +1,34 @@
+/**
+ * Progress ring: a track and a filled stroke, with content centered inside. `arc` opens the ring at
+ * the bottom (a 240° gauge); `target` adds a tick across the stroke. Plain SVG, no chart library.
+ */
+type __VLS_Props = {
+    /** Filled share, `0`–`1`. Values outside are clamped. */
+    ratio: number;
+    /** Outer size in pixels. */
+    size?: number;
+    thickness?: number;
+    color?: string;
+    arc?: boolean;
+    /** Target share, `0`–`1`, drawn as a tick. */
+    target?: number | null;
+};
+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<{}>, {
+    target: number | null;
+    color: string;
+    size: number;
+    thickness: number;
+    arc: boolean;
+}, {}, {}, {}, 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/block/dashboard-ring.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  ratio: { type: Number, required: true },
+  size: { type: Number, required: false, default: 36 },
+  thickness: { type: Number, required: false, default: 3 },
+  color: { type: String, required: false, default: "var(--nut-dash-s1)" },
+  arc: { type: Boolean, required: false, default: false },
+  target: { type: [Number, null], required: false, default: null }
+});
+const SWEEP_ARC = 240;
+function clamp(value) {
+  return Math.max(0, Math.min(1, Number.isFinite(value) ? value : 0));
+}
+const geometry = computed(() => {
+  const radius = (props.size - props.thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const sweep = props.arc ? SWEEP_ARC : 360;
+  const start = props.arc ? 90 + (360 - sweep) / 2 : -90;
+  const length = circumference * sweep / 360;
+  const center = props.size / 2;
+  return {
+    center,
+    circumference,
+    filled: length * clamp(props.ratio),
+    length,
+    radius,
+    start,
+    tick: props.target === null ? null : tickAt(start + sweep * clamp(props.target))
+  };
+  function tickAt(degrees) {
+    const angle = degrees * Math.PI / 180;
+    const inner = radius - props.thickness * 0.75;
+    const outer = radius + props.thickness * 0.75;
+    return {
+      x1: center + inner * Math.cos(angle),
+      x2: center + outer * Math.cos(angle),
+      y1: center + inner * Math.sin(angle),
+      y2: center + outer * Math.sin(angle)
+    };
+  }
+});
+</script>
+
+<template>
+  <span
+    class="relative grid shrink-0 place-items-center"
+    :style="{ height: `${size}px`, width: `${size}px` }"
+  >
+    <svg
+      class="absolute inset-0 overflow-visible"
+      :viewBox="`0 0 ${size} ${size}`"
+      aria-hidden="true"
+      data-ring
+    >
+      <g :transform="`rotate(${geometry.start} ${geometry.center} ${geometry.center})`">
+        <circle
+          :cx="geometry.center"
+          :cy="geometry.center"
+          :r="geometry.radius"
+          fill="none"
+          stroke="var(--nut-dash-track)"
+          :stroke-width="thickness"
+          stroke-linecap="round"
+          :stroke-dasharray="`${geometry.length} ${geometry.circumference}`"
+        />
+        <circle
+          v-if="geometry.filled > 0"
+          :cx="geometry.center"
+          :cy="geometry.center"
+          :r="geometry.radius"
+          fill="none"
+          :stroke="color"
+          :stroke-width="thickness"
+          stroke-linecap="round"
+          :stroke-dasharray="`${geometry.filled} ${geometry.circumference}`"
+          class="transition-[stroke-dasharray] duration-700 ease-out motion-reduce:transition-none"
+        />
+      </g>
+      <line
+        v-if="geometry.tick"
+        v-bind="geometry.tick"
+        stroke="var(--ui-text-highlighted)"
+        stroke-width="2"
+        stroke-linecap="round"
+        data-ring-target
+      />
+    </svg>
+    <span class="relative text-center"><slot /></span>
+  </span>
+</template>

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

@@ -0,0 +1,34 @@
+/**
+ * Progress ring: a track and a filled stroke, with content centered inside. `arc` opens the ring at
+ * the bottom (a 240° gauge); `target` adds a tick across the stroke. Plain SVG, no chart library.
+ */
+type __VLS_Props = {
+    /** Filled share, `0`–`1`. Values outside are clamped. */
+    ratio: number;
+    /** Outer size in pixels. */
+    size?: number;
+    thickness?: number;
+    color?: string;
+    arc?: boolean;
+    /** Target share, `0`–`1`, drawn as a tick. */
+    target?: number | null;
+};
+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<{}>, {
+    target: number | null;
+    color: string;
+    size: number;
+    thickness: number;
+    arc: boolean;
+}, {}, {}, {}, 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/block/dashboard-row-actions.d.vue.ts

@@ -0,0 +1,13 @@
+import type { DashboardRowAction } from '../../types/index.js';
+/**
+ * Actions of one row: `inline` actions as icon buttons, the others in a `⋮` menu. Sits above the
+ * row's stretched select button, so both stay clickable.
+ */
+type __VLS_Props = {
+    actions: readonly DashboardRowAction[];
+    /** Accessible name of the `⋮` button, naming the row. */
+    label: string;
+};
+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/block/dashboard-row-actions.vue

@@ -0,0 +1,49 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+const props = defineProps({
+  actions: { type: Array, required: true },
+  label: { type: String, required: true }
+});
+const { t } = useUiToolsLocale();
+const inline = computed(() => props.actions.filter((action) => action.inline && action.icon));
+const items = computed(
+  () => props.actions.flatMap(({ inline: isInline, ...item }) => isInline && item.icon ? [] : [item])
+);
+</script>
+
+<template>
+  <div class="relative z-[1] -me-1 flex shrink-0 items-center gap-0.5" data-row-actions>
+    <UButton
+      v-for="(action, index) in inline"
+      :key="index"
+      color="neutral"
+      variant="ghost"
+      size="xs"
+      square
+      :icon="action.icon"
+      :to="action.to"
+      :disabled="action.disabled"
+      :aria-label="action.label"
+      class="text-dimmed hover:text-default"
+      @click="action.onSelect?.($event)"
+    />
+    <UDropdownMenu
+      v-if="items.length"
+      :items
+      :content="{ align: 'end', side: 'bottom', sideOffset: 4 }"
+    >
+      <UButton
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        square
+        icon="i-lucide-ellipsis-vertical"
+        :aria-label="t('dashboard.rowActions', { label })"
+        class="text-dimmed hover:text-default"
+      />
+    </UDropdownMenu>
+  </div>
+</template>

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

@@ -0,0 +1,13 @@
+import type { DashboardRowAction } from '../../types/index.js';
+/**
+ * Actions of one row: `inline` actions as icon buttons, the others in a `⋮` menu. Sits above the
+ * row's stretched select button, so both stay clickable.
+ */
+type __VLS_Props = {
+    actions: readonly DashboardRowAction[];
+    /** Accessible name of the `⋮` button, naming the row. */
+    label: string;
+};
+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/block/dashboard-skeleton.d.vue.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;