@frigear-nu/admin 0.0.4 → 0.1.0

package/README.md

@@ -1,5 +1,8 @@
 # @frigear-nu/admin
 
-Generic admin area: an `admin` layout with a sidebar (the `admin.nav` menu), a guarded dashboard (the `admin.dashboard` widget area) and `<AdminPageHeader>`. Other modules register their admin pages and widgets into it.
+Generic admin area: an `admin` layout with a grouped sidebar (the `admin.nav` menu: Overview, Manage and Settings, see
+`ADMIN_NAV_GROUPS`) and a guarded dashboard (the `admin.dashboard` widget areas). Other modules register their admin
+pages, nav entries and widgets into it. Pages are built from the `@frigear-nu/ui` page patterns (`PageHeading`,
+`SectionCard`, `TableCard`, …); the `Admin*` components are deprecated aliases over them.
 
 See the [documentation](../../apps/docs/content/4.modules/02.admin.md) for usage.

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@frigear-nu/admin",
   "configKey": "admin",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,6 +1,7 @@
 import { defineNuxtModule, createResolver, addLayout, addComponent, hasNuxtModule, extendPages } from '@nuxt/kit';
 import { registerModule, registerTailwindSource, registerLocales } from '@frigear-nu/module-kit/utils';
 import { extendMenu } from '@frigear-nu/menu/utils';
+import { ADMIN_NAV_GROUPS } from '../dist/runtime/utils/index.js';
 
 const trimSlash = (path) => path.length > 1 ? path.replace(/\/+$/, "") : path;
 const module$1 = defineNuxtModule({
@@ -14,6 +15,8 @@ const module$1 = defineNuxtModule({
     "nuxt-auth-utils": { version: ">=0.0.1" },
     "@frigear-nu/menu": { version: ">=0.0.0" },
     "@frigear-nu/widget": { version: ">=0.0.0" },
+    // Page pattern components (`PageHeading`, `SectionCard`, ...) and `useNavLinks`.
+    "@frigear-nu/ui": { version: ">=0.0.0" },
     "@frigear-nu/authorization": { version: ">=0.0.0", optional: true }
   },
   setup(options, nuxt) {
@@ -63,7 +66,7 @@ const module$1 = defineNuxtModule({
       });
     }
     if (dashboardPath) {
-      extendMenu(nuxt, "admin.nav", {
+      extendMenu(nuxt, ADMIN_NAV_GROUPS.overview, {
         id: "admin-dashboard",
         label: "Dashboard",
         labelKey: "admin.dashboard.title",

package/dist/runtime/app/components/AdminKeyValue.d.vue.ts

@@ -7,11 +7,9 @@ type __VLS_Props = {
     items: AdminKeyValueItem[];
     loading?: boolean;
 };
-declare var __VLS_7: string, __VLS_8: {
-    item: AdminKeyValueItem;
-};
+declare var __VLS_10: string, __VLS_11: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/AdminKeyValue.vue

@@ -6,27 +6,20 @@ defineProps({
 </script>
 
 <template>
-  <dl class="grid grid-cols-[auto_1fr] items-center gap-x-6 gap-y-2 text-sm">
+  <DescriptionList
+    :items="items"
+    :loading="loading"
+    align="end"
+    empty="–"
+  >
     <template
-      v-for="item in items"
-      :key="item.key"
+      v-for="(_, name) in $slots"
+      #[name]="slotProps"
     >
-      <dt class="text-muted">
-        {{ item.label }}
-      </dt>
-      <dd class="text-highlighted min-w-0 text-right wrap-break-word">
-        <USkeleton
-          v-if="loading"
-          class="ml-auto h-4 w-24"
-        />
-        <slot
-          v-else
-          :name="item.key"
-          :item="item"
-        >
-          {{ item.value ?? "\u2013" }}
-        </slot>
-      </dd>
+      <slot
+        :name="name"
+        v-bind="slotProps ?? {}"
+      />
     </template>
-  </dl>
+  </DescriptionList>
 </template>

package/dist/runtime/app/components/AdminKeyValue.vue.d.ts

@@ -7,11 +7,9 @@ type __VLS_Props = {
     items: AdminKeyValueItem[];
     loading?: boolean;
 };
-declare var __VLS_7: string, __VLS_8: {
-    item: AdminKeyValueItem;
-};
+declare var __VLS_10: string, __VLS_11: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/AdminListCard.d.vue.ts

@@ -7,11 +7,11 @@ type __VLS_Props = {
     to?: string;
     toLabel?: string;
 };
-declare var __VLS_1: {}, __VLS_18: {};
+declare var __VLS_9: {}, __VLS_11: {};
 type __VLS_Slots = {} & {
-    actions?: (props: typeof __VLS_1) => any;
+    actions?: (props: typeof __VLS_9) => any;
 } & {
-    default?: (props: typeof __VLS_18) => any;
+    default?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/AdminListCard.vue

@@ -11,61 +11,21 @@ defineProps({
 </script>
 
 <template>
-  <section class="bg-elevated/50 ring-default flex h-full flex-col overflow-hidden rounded-lg ring">
-    <div class="border-default flex items-center justify-between gap-3 border-b px-4 py-3">
-      <div class="min-w-0">
-        <h2 class="text-highlighted text-sm font-semibold">
-          {{ title }}
-        </h2>
-        <p
-          v-if="description"
-          class="text-muted text-xs"
-        >
-          {{ description }}
-        </p>
-      </div>
-      <div
-        v-if="$slots.actions"
-        class="flex items-center gap-2"
-      >
-        <slot name="actions" />
-      </div>
-    </div>
-    <div class="flex-1 px-4">
-      <div
-        v-if="loading"
-        class="space-y-3 py-4"
-      >
-        <USkeleton class="h-4 w-2/3" />
-        <USkeleton class="h-4 w-1/2" />
-        <USkeleton class="h-4 w-3/5" />
-      </div>
-      <p
-        v-else-if="isEmpty"
-        class="text-muted py-6 text-center text-sm"
-      >
-        {{ empty }}
-      </p>
-      <ul
-        v-else
-        class="divide-default divide-y text-sm [&>li]:py-2.5"
-      >
-        <slot />
-      </ul>
-    </div>
-    <div
-      v-if="to"
-      class="border-default border-t px-4 py-2.5"
+  <ListCard
+    :title="title"
+    :description="description"
+    :loading="loading"
+    :is-empty="isEmpty"
+    :empty="empty"
+    :to="to"
+    :to-label="toLabel"
+  >
+    <template
+      v-if="$slots.actions"
+      #actions
     >
-      <UButton
-        :to="to"
-        variant="link"
-        color="neutral"
-        size="xs"
-        class="p-0"
-        trailing-icon="i-lucide-arrow-right"
-        :label="toLabel"
-      />
-    </div>
-  </section>
+      <slot name="actions" />
+    </template>
+    <slot />
+  </ListCard>
 </template>

package/dist/runtime/app/components/AdminListCard.vue.d.ts

@@ -7,11 +7,11 @@ type __VLS_Props = {
     to?: string;
     toLabel?: string;
 };
-declare var __VLS_1: {}, __VLS_18: {};
+declare var __VLS_9: {}, __VLS_11: {};
 type __VLS_Slots = {} & {
-    actions?: (props: typeof __VLS_1) => any;
+    actions?: (props: typeof __VLS_9) => any;
 } & {
-    default?: (props: typeof __VLS_18) => any;
+    default?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/AdminPage.vue

@@ -1,5 +1,6 @@
+<!-- @deprecated: use a plain `<div class="flex flex-col gap-4">` as the page root -->
 <template>
-  <div class="space-y-4">
+  <div class="flex flex-col gap-4">
     <slot />
   </div>
 </template>

package/dist/runtime/app/components/AdminPageHeader.d.vue.ts

@@ -6,19 +6,17 @@ type __VLS_Props = {
         to: string;
     };
 };
-declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
+declare var __VLS_9: {}, __VLS_12: {}, __VLS_15: {}, __VLS_18: {}, __VLS_20: {};
 type __VLS_Slots = {} & {
-    headline?: (props: typeof __VLS_1) => any;
+    title?: (props: typeof __VLS_9) => any;
 } & {
-    title?: (props: typeof __VLS_8) => any;
+    description?: (props: typeof __VLS_12) => any;
 } & {
-    description?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_15) => any;
 } & {
-    default?: (props: typeof __VLS_12) => any;
+    links?: (props: typeof __VLS_18) => any;
 } & {
-    links?: (props: typeof __VLS_14) => any;
-} & {
-    actions?: (props: typeof __VLS_16) => any;
+    actions?: (props: typeof __VLS_20) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/AdminPageHeader.vue

@@ -1,48 +1,43 @@
 <script setup>
-defineProps({
+const props = defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
   back: { type: Object, required: false }
 });
+const breadcrumb = computed(() => props.back ? [{ label: props.back.label, to: props.back.to }, ...props.title ? [{ label: props.title }] : []] : void 0);
 </script>
 
 <template>
-  <header class="mb-5 flex flex-wrap items-end justify-between gap-x-4 gap-y-3">
-    <div class="min-w-0 space-y-1">
-      <slot name="headline">
-        <UButton
-          v-if="back"
-          class="-ml-1 p-1"
-          color="neutral"
-          variant="link"
-          size="sm"
-          icon="i-lucide-arrow-left"
-          :to="back.to"
-          :label="back.label"
-        />
-      </slot>
-      <h1 class="text-highlighted text-xl font-semibold tracking-tight text-pretty sm:text-2xl">
-        <slot name="title">
-          {{ title }}
-        </slot>
-      </h1>
-      <p
-        v-if="description || $slots.description"
-        class="text-muted text-sm text-pretty"
-      >
-        <slot name="description">
-          {{ description }}
-        </slot>
-      </p>
+  <PageHeading
+    :title="title"
+    :description="description"
+    :breadcrumb="breadcrumb"
+  >
+    <template
+      v-if="$slots.title"
+      #title
+    >
+      <slot name="title" />
+    </template>
+    <template
+      v-if="$slots.description"
+      #description
+    >
+      <slot name="description" />
+    </template>
+    <template
+      v-if="$slots.default"
+      #default
+    >
       <slot />
-    </div>
-    <div
+    </template>
+    <template
       v-if="$slots.links || $slots.actions"
-      class="flex flex-wrap items-center gap-2"
+      #actions
     >
       <slot name="links">
         <slot name="actions" />
       </slot>
-    </div>
-  </header>
+    </template>
+  </PageHeading>
 </template>

package/dist/runtime/app/components/AdminPageHeader.vue.d.ts

@@ -6,19 +6,17 @@ type __VLS_Props = {
         to: string;
     };
 };
-declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
+declare var __VLS_9: {}, __VLS_12: {}, __VLS_15: {}, __VLS_18: {}, __VLS_20: {};
 type __VLS_Slots = {} & {
-    headline?: (props: typeof __VLS_1) => any;
+    title?: (props: typeof __VLS_9) => any;
 } & {
-    title?: (props: typeof __VLS_8) => any;
+    description?: (props: typeof __VLS_12) => any;
 } & {
-    description?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_15) => any;
 } & {
-    default?: (props: typeof __VLS_12) => any;
+    links?: (props: typeof __VLS_18) => any;
 } & {
-    links?: (props: typeof __VLS_14) => any;
-} & {
-    actions?: (props: typeof __VLS_16) => any;
+    actions?: (props: typeof __VLS_20) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/AdminSection.d.vue.ts

@@ -3,15 +3,15 @@ type __VLS_Props = {
     description?: string;
     loading?: boolean;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
+declare var __VLS_9: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {}, __VLS_19: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_1) => any;
+    header?: (props: typeof __VLS_9) => any;
 } & {
-    actions?: (props: typeof __VLS_3) => any;
+    actions?: (props: typeof __VLS_12) => any;
 } & {
-    flush?: (props: typeof __VLS_15) => any;
+    flush?: (props: typeof __VLS_14) => any;
 } & {
-    default?: (props: typeof __VLS_17) => any;
+    default?: (props: typeof __VLS_16) => any;
 } & {
     footer?: (props: typeof __VLS_19) => any;
 };

package/dist/runtime/app/components/AdminSection.vue

@@ -7,49 +7,31 @@ defineProps({
 </script>
 
 <template>
-  <section class="bg-elevated/50 ring-default ring overflow-hidden rounded-lg">
-    <div
-      v-if="title || $slots.header || $slots.actions"
-      class="border-default flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3.5"
+  <SectionCard
+    :title="title"
+    :description="description"
+    :loading="loading"
+    :flush="!!$slots.flush"
+  >
+    <template
+      v-if="$slots.header"
+      #header
     >
-      <slot name="header">
-        <div class="min-w-0">
-          <h2 class="text-highlighted text-sm font-semibold">
-            {{ title }}
-          </h2>
-          <p
-            v-if="description"
-            class="text-muted text-sm"
-          >
-            {{ description }}
-          </p>
-        </div>
-      </slot>
-      <div
-        v-if="$slots.actions"
-        class="flex items-center gap-2"
-      >
-        <slot name="actions" />
-      </div>
-    </div>
-    <div :class="$slots.flush || loading ? '' : 'p-4'">
-      <div
-        v-if="loading"
-        class="space-y-2 p-4"
-      >
-        <USkeleton class="h-5 w-1/2" />
-        <USkeleton class="h-5 w-1/3" />
-      </div>
-      <template v-else>
-        <slot name="flush" />
-        <slot />
-      </template>
-    </div>
-    <div
+      <slot name="header" />
+    </template>
+    <template
+      v-if="$slots.actions"
+      #actions
+    >
+      <slot name="actions" />
+    </template>
+    <slot name="flush" />
+    <slot />
+    <template
       v-if="$slots.footer"
-      class="border-default border-t px-4 py-3"
+      #footer
     >
       <slot name="footer" />
-    </div>
-  </section>
+    </template>
+  </SectionCard>
 </template>

package/dist/runtime/app/components/AdminSection.vue.d.ts

@@ -3,15 +3,15 @@ type __VLS_Props = {
     description?: string;
     loading?: boolean;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
+declare var __VLS_9: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {}, __VLS_19: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_1) => any;
+    header?: (props: typeof __VLS_9) => any;
 } & {
-    actions?: (props: typeof __VLS_3) => any;
+    actions?: (props: typeof __VLS_12) => any;
 } & {
-    flush?: (props: typeof __VLS_15) => any;
+    flush?: (props: typeof __VLS_14) => any;
 } & {
-    default?: (props: typeof __VLS_17) => any;
+    default?: (props: typeof __VLS_16) => any;
 } & {
     footer?: (props: typeof __VLS_19) => any;
 };

package/dist/runtime/app/components/AdminStatCard.d.vue.ts

@@ -5,9 +5,9 @@ type __VLS_Props = {
     loading?: boolean;
     empty?: string;
 };
-declare var __VLS_23: {};
+declare var __VLS_9: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_23) => any;
+    default?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/AdminStatCard.vue

@@ -6,48 +6,21 @@ defineProps({
   loading: { type: Boolean, required: false },
   empty: { type: String, required: false }
 });
-const NuxtLink = resolveComponent("NuxtLink");
 </script>
 
 <template>
-  <component
-    :is="to ? NuxtLink : 'section'"
+  <StatCard
+    :label="label"
+    :icon="icon"
     :to="to"
-    class="bg-elevated/50 ring-default flex h-full items-start gap-3 overflow-hidden rounded-lg p-4 ring"
-    :class="to && 'hover:bg-elevated transition-colors'"
+    :loading="loading"
+    :empty="empty"
   >
-    <span
-      v-if="icon"
-      class="bg-primary/10 ring-primary/25 text-primary flex shrink-0 items-center justify-center rounded-full p-2.5 ring ring-inset"
+    <template
+      v-if="$slots.default"
+      #default
     >
-      <UIcon
-        :name="icon"
-        class="size-5"
-      />
-    </span>
-    <div class="flex min-w-0 flex-1 flex-col gap-1.5">
-      <h2 class="text-muted text-xs font-normal uppercase">
-        {{ label }}
-      </h2>
-      <div
-        v-if="loading"
-        class="space-y-2"
-      >
-        <USkeleton class="h-5 w-2/3" />
-        <USkeleton class="h-4 w-1/3" />
-      </div>
-      <div
-        v-else-if="$slots.default"
-        class="text-highlighted flex flex-wrap items-center gap-2 text-lg font-semibold"
-      >
-        <slot />
-      </div>
-      <p
-        v-else
-        class="text-muted text-sm"
-      >
-        {{ empty }}
-      </p>
-    </div>
-  </component>
+      <slot />
+    </template>
+  </StatCard>
 </template>

package/dist/runtime/app/components/AdminStatCard.vue.d.ts

@@ -5,9 +5,9 @@ type __VLS_Props = {
     loading?: boolean;
     empty?: string;
 };
-declare var __VLS_23: {};
+declare var __VLS_9: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_23) => any;
+    default?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/AdminTable.vue

@@ -9,11 +9,12 @@ const emit = defineEmits(["select"]);
 </script>
 
 <template>
-  <div class="bg-elevated/50 ring-default ring overflow-hidden rounded-lg">
+  <TableCard>
     <UTable
       :data="data"
       :columns="columns"
       :loading="loading"
+      :ui="tableUi()"
       @select="(e, row) => emit('select', e, row)"
     >
       <template
@@ -29,11 +30,13 @@ const emit = defineEmits(["select"]);
         v-if="empty && !$slots.empty"
         #empty
       >
-        <AdminEmpty
+        <UEmpty
           icon="i-lucide-inbox"
           :title="empty"
+          variant="naked"
+          class="py-10"
         />
       </template>
     </UTable>
-  </div>
+  </TableCard>
 </template>

package/dist/runtime/app/components/AdminToolbar.d.vue.ts

@@ -1,6 +1,6 @@
-declare var __VLS_1: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/AdminToolbar.vue

@@ -1,5 +1,6 @@
+<!-- @deprecated: use PageToolbar from @frigear-nu/ui -->
 <template>
-  <div class="flex flex-wrap items-center gap-3">
+  <PageToolbar>
     <slot />
-  </div>
+  </PageToolbar>
 </template>

package/dist/runtime/app/components/AdminToolbar.vue.d.ts

@@ -1,6 +1,6 @@
-declare var __VLS_1: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/layouts/admin.d.vue.ts

@@ -1,6 +1,6 @@
-declare var __VLS_84: {};
+declare var __VLS_79: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_84) => any;
+    default?: (props: typeof __VLS_79) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/layouts/admin.vue

@@ -8,32 +8,31 @@ const AccountMenu = resolveComponent("AccountMenu");
 const optional = (component) => typeof component === "string" ? void 0 : component;
 const nuxtApp = useNuxtApp();
 const multiLocale = (nuxtApp.$i18n?.locales?.value?.length ?? 0) > 1;
-const { data: items } = await useMenu("admin.nav");
 const home = config?.dashboard ?? config?.base ?? "/admin";
-const stripLocale = (path) => {
-  const trimmed = path.length > 1 ? path.replace(/\/+$/, "") : path;
-  const first = trimmed.split("/")[1];
-  const codes = (nuxtApp.$i18n?.locales?.value ?? []).map((l) => typeof l === "string" ? l : l.code);
-  return first && codes.includes(first) ? trimmed.slice(first.length + 1) || "/" : trimmed;
-};
-const links = computed(() => (items.value ?? []).map((item) => ({
-  label: item.label,
-  icon: item.icon,
-  to: item.to,
-  external: item.external,
-  // The dashboard lives at the base itself, so it only matches exactly (ignoring a locale prefix).
-  active: !!item.to && (item.to === home ? stripLocale(route.path) === home : route.path === item.to || route.path.startsWith(`${item.to}/`))
-})));
-const title = computed(() => links.value.find((link) => link.active)?.label ?? t("title", "Administration"));
+const { localize } = useLocaleLink();
+const { data: items } = await useMenu("admin.nav.*");
+const groupOf = (group) => group === "nav.overview" ? "overview" : group === "nav.settings" ? "settings" : "manage";
+const byGroup = (name) => (items.value ?? []).filter((item) => groupOf(item.group) === name);
+const navOptions = { exact: [home] };
+const overview = useNavLinks(() => byGroup("overview"), navOptions);
+const manage = useNavLinks(() => byGroup("manage"), navOptions);
+const settings = useNavLinks(() => byGroup("settings"), navOptions);
+const groups = computed(() => [
+  { id: "overview", label: void 0, links: overview.value },
+  { id: "manage", label: t("nav.groups.manage", "Manage"), links: manage.value },
+  { id: "settings", label: t("nav.groups.settings", "Settings"), links: settings.value }
+].filter((group) => group.links.length));
+const navigation = computed(() => groups.value.map((group) => group.label ? [{ type: "label", label: group.label }, ...group.links] : group.links));
+const title = computed(() => groups.value.flatMap((group) => group.links).find((link) => link.active)?.label ?? t("title", "Administration"));
 const sidebarOpen = ref(false);
 watch(() => route.path, () => {
   sidebarOpen.value = false;
 });
-const searchGroups = computed(() => [{
-  id: "admin-nav",
-  label: t("search.goTo", "Go to"),
-  items: links.value.map(({ label, icon, to }) => ({ id: to ?? label, label, icon, to }))
-}]);
+const searchGroups = computed(() => groups.value.map((group) => ({
+  id: `admin-nav-${group.id}`,
+  label: group.label ?? t("search.goTo", "Go to"),
+  items: group.links.map(({ label, icon, to }) => ({ id: String(to ?? label), label, icon, to }))
+})));
 </script>
 
 <template>
@@ -44,11 +43,11 @@ const searchGroups = computed(() => [{
       collapsible
       resizable
       class="bg-elevated/25"
-      :ui="{ footer: 'lg:border-t lg:border-default' }"
+      :ui="{ footer: 'lg:border-t lg:border-default flex-col items-stretch gap-1' }"
     >
       <template #header="{ collapsed }">
         <NuxtLink
-          :to="home"
+          :to="localize(home)"
           class="flex min-w-0 items-center gap-2"
         >
           <span class="bg-primary text-inverted flex size-7 shrink-0 items-center justify-center rounded-lg">
@@ -72,7 +71,7 @@ const searchGroups = computed(() => [{
 
         <UNavigationMenu
           :collapsed="collapsed"
-          :items="links"
+          :items="navigation"
           orientation="vertical"
           tooltip
           :aria-label="t('nav.label', 'Admin navigation')"
@@ -81,7 +80,7 @@ const searchGroups = computed(() => [{
 
       <template #footer="{ collapsed }">
         <UButton
-          to="/"
+          :to="localize('/')"
           color="neutral"
           variant="ghost"
           icon="i-lucide-arrow-left"
@@ -90,6 +89,12 @@ const searchGroups = computed(() => [{
           block
           class="justify-start"
         />
+        <component
+          :is="optional(AccountMenu)"
+          v-if="optional(AccountMenu)"
+          block
+          :collapsed="collapsed"
+        />
       </template>
     </UDashboardSidebar>
 
@@ -109,17 +114,12 @@ const searchGroups = computed(() => [{
               :is="optional(LanguageSelect)"
               v-if="optional(LanguageSelect) && multiLocale"
             />
-            <UColorModeButton />
-            <component
-              :is="optional(AccountMenu)"
-              v-if="optional(AccountMenu)"
-            />
           </template>
         </UDashboardNavbar>
       </template>
 
       <template #body>
-        <div class="admin-content mx-auto w-full max-w-7xl">
+        <div class="mx-auto w-full max-w-7xl">
           <slot />
         </div>
       </template>

package/dist/runtime/app/layouts/admin.vue.d.ts

@@ -1,6 +1,6 @@
-declare var __VLS_84: {};
+declare var __VLS_79: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_84) => any;
+    default?: (props: typeof __VLS_79) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/pages/dashboard.vue

@@ -1,8 +1,9 @@
 <script setup>
 defineOptions({ name: "AdminDashboardPage" });
 const t = useModuleT("admin");
-const { data: menu } = await useMenu("admin.nav");
-const items = computed(() => (menu.value ?? []).filter((item) => item.id !== "admin-dashboard"));
+const { localize } = useLocaleLink();
+const { data: menu } = await useMenu("admin.nav.*");
+const items = computed(() => (menu.value ?? []).filter((item) => item.group !== "nav.overview" && item.id !== "admin-dashboard"));
 const [{ data: top }, { data: main }, { data: side }] = await Promise.all([
   useWidgets("admin.dashboard.top"),
   useWidgets("admin.dashboard"),
@@ -13,8 +14,8 @@ const stack = "flex flex-col gap-4";
 </script>
 
 <template>
-  <AdminPage>
-    <AdminPageHeader
+  <div class="flex flex-col gap-4">
+    <PageHeading
       :title="t('dashboard.title', 'Dashboard')"
       :description="t('dashboard.description', 'Overview and shortcuts for administrators.')"
     />
@@ -44,7 +45,7 @@ const stack = "flex flex-col gap-4";
           :title="item.label"
           :description="item.description"
           :icon="item.icon"
-          :to="item.to"
+          :to="item.to && !item.external ? localize(item.to) : item.to"
           variant="subtle"
           :ui="{
   container: 'gap-y-1.5',
@@ -53,12 +54,12 @@ const stack = "flex flex-col gap-4";
 }"
         />
       </UPageGrid>
-      <p
+      <UEmpty
         v-else
-        class="text-muted"
-      >
-        {{ t("dashboard.empty", "Nothing here yet. Modules add their admin pages and widgets automatically.") }}
-      </p>
+        icon="i-lucide-layout-dashboard"
+        :title="t('dashboard.empty', 'Nothing here yet. Modules add their admin pages and widgets automatically.')"
+        variant="naked"
+      />
     </template>
-  </AdminPage>
+  </div>
 </template>

package/dist/runtime/i18n/lang/da.json

@@ -2,7 +2,12 @@
   "admin": {
     "title": "Administration",
     "nav": {
-      "label": "Admin-navigation"
+      "label": "Admin-navigation",
+      "groups": {
+        "overview": "Overblik",
+        "manage": "Administrér",
+        "settings": "Indstillinger"
+      }
     },
     "dashboard": {
       "title": "Oversigt",
@@ -13,6 +18,9 @@
     "menu": {
       "label": "Admin",
       "description": "Administration"
+    },
+    "search": {
+      "goTo": "Gå til"
     }
   }
 }

package/dist/runtime/i18n/lang/en.json

@@ -2,7 +2,12 @@
   "admin": {
     "title": "Administration",
     "nav": {
-      "label": "Admin navigation"
+      "label": "Admin navigation",
+      "groups": {
+        "overview": "Overview",
+        "manage": "Manage",
+        "settings": "Settings"
+      }
     },
     "dashboard": {
       "title": "Dashboard",
@@ -13,6 +18,9 @@
     "menu": {
       "label": "Admin",
       "description": "Administration"
+    },
+    "search": {
+      "goTo": "Go to"
     }
   }
 }

package/dist/runtime/utils/index.d.ts

@@ -7,17 +7,30 @@ import type { WidgetDefinition } from '@frigear-nu/widget/utils';
  */
 export declare const adminRoute: (nuxt: Nuxt, ...segments: string[]) => string;
 export declare const ADMIN_NAV_MENU = "admin.nav";
+/**
+ * The sidebar groups, as menu paths: Overview (the dashboard), Manage (the modules' pages, the `admin.nav` root)
+ * and Settings. Runtime menu sources register with `extendMenuItem(ADMIN_NAV_GROUPS.settings, item)`.
+ */
+export declare const ADMIN_NAV_GROUPS: {
+    readonly overview: "admin.nav.overview";
+    readonly manage: "admin.nav";
+    readonly settings: "admin.nav.settings";
+};
+export type AdminNavGroup = keyof typeof ADMIN_NAV_GROUPS;
 export declare const ADMIN_DASHBOARD_AREA = "admin.dashboard";
 /** The stat row above the dashboard content. */
 export declare const ADMIN_DASHBOARD_TOP_AREA = "admin.dashboard.top";
 /** The narrow column next to the main dashboard content. */
 export declare const ADMIN_DASHBOARD_SIDE_AREA = "admin.dashboard.side";
 export type AdminDashboardPosition = 'top' | 'main' | 'side';
-/** Adds entries to the admin sidebar (the `admin.nav` menu of `@frigear-nu/menu`). Call from a module's `setup()`. */
-export declare const extendAdminNav: (nuxt: Nuxt, items: MenuItem | MenuItem[]) => void;
+/**
+ * Adds entries to the admin sidebar (the `admin.nav` menu of `@frigear-nu/menu`), into `group` (default `manage`).
+ * Call from a module's `setup()`.
+ */
+export declare const extendAdminNav: (nuxt: Nuxt, items: MenuItem | MenuItem[], group?: AdminNavGroup) => void;
 /**
  * Adds widgets to the admin dashboard (an area of `@frigear-nu/widget`). Call from a module's `setup()`.
- * `position` picks the area: `top` is the stat row (use `AdminStatCard`), `main` the content column (the default),
+ * `position` picks the area: `top` is the stat row (use `StatCard`), `main` the content column (the default),
  * `side` the narrow column.
  */
 export declare const extendAdminDashboard: (nuxt: Nuxt, widgets: WidgetDefinition | WidgetDefinition[], position?: AdminDashboardPosition) => void;

package/dist/runtime/utils/index.js

@@ -5,6 +5,11 @@ export const adminRoute = (nuxt, ...segments) => {
   return [base.replace(/\/+$/, ""), ...segments].join("/");
 };
 export const ADMIN_NAV_MENU = "admin.nav";
+export const ADMIN_NAV_GROUPS = {
+  overview: "admin.nav.overview",
+  manage: "admin.nav",
+  settings: "admin.nav.settings"
+};
 export const ADMIN_DASHBOARD_AREA = "admin.dashboard";
 export const ADMIN_DASHBOARD_TOP_AREA = "admin.dashboard.top";
 export const ADMIN_DASHBOARD_SIDE_AREA = "admin.dashboard.side";
@@ -13,5 +18,5 @@ const DASHBOARD_AREAS = {
   main: ADMIN_DASHBOARD_AREA,
   side: ADMIN_DASHBOARD_SIDE_AREA
 };
-export const extendAdminNav = (nuxt, items) => extendMenu(nuxt, ADMIN_NAV_MENU, items);
+export const extendAdminNav = (nuxt, items, group = "manage") => extendMenu(nuxt, ADMIN_NAV_GROUPS[group], items);
 export const extendAdminDashboard = (nuxt, widgets, position = "main") => extendWidgets(nuxt, DASHBOARD_AREAS[position], widgets);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frigear-nu/admin",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "Generic admin area: shell layout, guarded dashboard and navigation that other modules contribute to through @frigear-nu/menu and @frigear-nu/widget.",
   "homepage": "https://docs.frigear.dev/modules/admin",
   "repository": {
@@ -30,29 +30,30 @@
     "playground"
   ],
   "dependencies": {
-    "@frigear-nu/menu": "0.0.11",
-    "@frigear-nu/module-kit": "1.0.1",
-    "@frigear-nu/widget": "0.0.4",
-    "@nuxt/kit": "^4.6.0",
+    "@frigear-nu/menu": "0.1.0",
+    "@frigear-nu/module-kit": "1.1.0",
+    "@frigear-nu/ui": "0.1.0",
+    "@frigear-nu/widget": "0.1.0",
+    "@nuxt/kit": "^4.6.1",
     "nuxt-auth-utils": "^0.5.30"
   },
   "devDependencies": {
     "@nuxt/devtools": "^3.4.2",
     "@nuxt/eslint-config": "^1.17.0",
     "@nuxt/module-builder": "^1.0.3",
-    "@nuxt/schema": "^4.6.0",
+    "@nuxt/schema": "^4.6.1",
     "@nuxt/test-utils": "^4.3.2",
-    "@nuxt/ui": "^4.11.0",
-    "@types/node": "latest",
+    "@nuxt/ui": "^4.11.2",
+    "@types/node": "^26.6.5",
     "changelogen": "^0.6.2",
-    "eslint": "^10.10.0",
+    "eslint": "^10.12.0",
     "nuxt": "^4.6.1",
     "typescript": "^6.0.3",
-    "vitest": "^5.0.1",
+    "vitest": "^5.0.2",
     "vue-tsc": "^3.3.11"
   },
   "peerDependencies": {
-    "@nuxt/ui": "^4.10.0"
+    "@nuxt/ui": "^4.11.2"
   },
   "scripts": {
     "postinstall": "nuxt-module-build build --stub && nuxt prepare",