@antelopejs/dms 0.5.6 → 0.6.0

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardFrame.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import Container from "./Container.vue";
+import DashboardSidebar from "./DashboardSidebar.vue";
+import DashboardHeader from "./DashboardHeader.vue";
+import DashboardBanners from "./DashboardBanners.vue";
+import RolePreviewBar from "./RolePreviewBar.vue";
+import { useAppWidgets } from "../../../composables/useAppWidgets";
+
+// Sidebar sizes are in px (the v2 240px sidebar). The storage key changed with
+// the unit, so a width saved in % is not read back as px.
+const DASHBOARD_STORAGE_KEY = "dms-dashboard";
+const DASHBOARD_SIZE_UNIT = "px";
+// The v2 page bottom padding (48px, 64px from `lg`) sits on the page region,
+// not on the panel body: the scroll area's own padding would lift every
+// sticky footer (save bars) that far off the bottom of the screen.
+const REGION_PADDING_CLASS = "pb-12 lg:pb-16";
+// The widgets dock (shown from `sm`, folded behind one launcher chip below
+// `xl`) floats over the bottom-left corner of the body. The region's bottom
+// padding grows to the height the dock shows, so the end of a page can always
+// scroll out from under the chips.
+const DOCK_CLEARANCE_CLASS =
+  "pb-12 sm:pb-[max(3rem,var(--dms-dock-clearance-folded,0px))] lg:pb-[max(4rem,var(--dms-dock-clearance-folded,0px))] xl:pb-[max(4rem,var(--dms-dock-clearance,0px))]";
+// One 40px chip plus its 8px gap per widget, the 10px inset and a 12px margin.
+const DOCK_CHIP_REM = 3;
+const DOCK_EDGE_REM = 1.375;
+const dockHeight = (chips: number): string =>
+  `${chips * DOCK_CHIP_REM + DOCK_EDGE_REM}rem`;
+
+interface Props {
+  fullWidth?: boolean;
+  fillHeight?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fullWidth: true,
+  fillHeight: false,
+});
+
+providePageFillHeight(toRef(props, "fillHeight"));
+
+const { widgets: appWidgets } = useAppWidgets();
+// A fill-height page has nothing to scroll past the dock: no clearance.
+const hasDockClearance = computed(
+  () => appWidgets.value.length > 0 && !props.fillHeight,
+);
+const regionClass = computed(() => {
+  if (props.fillHeight) {
+    return [PAGE_FILL_HEIGHT_CLASSES.region, REGION_PADDING_CLASS];
+  }
+  return hasDockClearance.value ? DOCK_CLEARANCE_CLASS : REGION_PADDING_CLASS;
+});
+// Bound as attributes so a page without widgets renders no empty `style`.
+const regionAttrs = computed(() =>
+  hasDockClearance.value
+    ? {
+        style: {
+          "--dms-dock-clearance": dockHeight(appWidgets.value.length),
+          "--dms-dock-clearance-folded": dockHeight(1),
+        },
+      }
+    : {},
+);
+</script>
+
+<template>
+  <UDashboardGroup
+    data-dms-persistent-shell
+    :storage-key="DASHBOARD_STORAGE_KEY"
+    :unit="DASHBOARD_SIZE_UNIT"
+  >
+    <DashboardSidebar />
+
+    <UDashboardPanel>
+      <template #header>
+        <DashboardHeader />
+        <DashboardBanners />
+        <RolePreviewBar />
+      </template>
+
+      <template #body>
+        <Container
+          data-dms-page-region
+          data-dms-page-content
+          :full-width="props.fullWidth"
+          :class="regionClass"
+          v-bind="regionAttrs"
+        >
+          <slot />
+        </Container>
+      </template>
+
+      <template #footer>
+        <DmsAppWidgetsDock />
+      </template>
+    </UDashboardPanel>
+  </UDashboardGroup>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardHeader.vue

@@ -3,8 +3,23 @@ import type { BreadcrumbItem, DropdownMenuItem } from "@nuxt/ui";
 import NotificationPopover from "../notification/NotificationPopover.vue";
 import QuickActionsPopover from "./QuickActionsPopover.vue";
 import { useSidebarState } from "./sidebarState";
-
-const BUILDER_POPOVER_OPEN_DELAY_MS = 80;
+import { usePageRecordLabel } from "#dms-core/app/build/composables/page/usePageRecordLabel";
+
+const HOME_ICON = "i-ph-house-light";
+/** Breadcrumb slot of the folded middle crumbs on small screens. */
+const MOBILE_ELLIPSIS_SLOT = "ellipsis";
+/** v2 toolbar buttons: muted until hovered or open. */
+const TOOLBAR_BUTTON_CLASS =
+  "text-muted hover:text-highlighted data-[state=open]:text-highlighted";
+/** The crumb naming a row keeps the row's own case (crumbs capitalize). */
+const RECORD_CRUMB_LABEL_CLASS = "first-letter:normal-case";
+// Nuxt UI types an item's `ui` as every breadcrumb slot at once; only the
+// label is restyled here.
+const RECORD_CRUMB_UI = {
+  linkLabel: RECORD_CRUMB_LABEL_CLASS,
+} as NonNullable<BreadcrumbItem["ui"]>;
+/** v2: every icon-only toolbar button names itself in a tooltip below it. */
+const TOOLTIP_CONTENT = { side: "bottom", sideOffset: 6 } as const;
 
 const { t } = useI18n();
 const appConfig = useDmsAppConfig();
@@ -14,9 +29,8 @@ const { open: sidebarOpen, collapsed: sidebarCollapsed } = useSidebarState();
 // core has no knowledge of any specific module.
 const { actions: registeredActions } = useHeaderActions();
 
-// The builder button is the one exception: it exists in the chrome whether or
-// not a module backs it, so the action that claims it drives it instead of
-// being rendered as another icon beside it.
+// The builder button keeps its fixed slot first in the toolbar, and only
+// exists when a module (the Builder) registers the action that drives it.
 const builderAction = computed(() =>
   registeredActions.value.find((action) => action.id === BUILDER_ACTION_ID),
 );
@@ -24,38 +38,19 @@ const headerActions = computed(() =>
   registeredActions.value.filter((action) => action.id !== BUILDER_ACTION_ID),
 );
 
-const { user } = useCurrentUser();
-const { logout } = useLogout();
-
-const userMenuOptions = computed<DropdownMenuItem[][]>(() => [
-  [
-    {
-      label: user.value?.name,
-      type: "label" as const,
-    },
-  ],
-  [
-    ...ACCOUNT_MENU_ENTRIES.map((entry) => ({
-      label: t(entry.labelKey),
-      icon: entry.icon,
-      to: entry.to,
-    })),
-    {
-      label: t("button.logout"),
-      icon: "i-ph-sign-out-light",
-      color: "error",
-      onSelect: () => {
-        void logout();
-      },
-    },
-  ],
-]);
+const sidebarToggleLabel = computed(() =>
+  sidebarCollapsed.value
+    ? t("header.expand_sidebar")
+    : t("header.collapse_sidebar"),
+);
 
 const route = useDmsRoute();
 const homepage = useHomepage();
 const siteLayout = useSiteLayout();
 const { processI18n } = useTranslation();
 const favoritePages = useFavoritePages();
+// The row an edit or details page is about names its last crumb.
+const { label: recordLabel } = usePageRecordLabel();
 
 const currentPageInfo = computed((): FavoritePage | null => {
   const matchedRoute = siteLayout.findMatchingRoute(route.path);
@@ -82,6 +77,12 @@ const isCurrentPageFavorite = computed(() => {
   return favoritePages.isFavorite(currentPageInfo.value.path);
 });
 
+const favoriteLabel = computed(() =>
+  isCurrentPageFavorite.value
+    ? t("header.remove_favorite")
+    : t("header.add_favorite"),
+);
+
 const toggleCurrentPageFavorite = () => {
   if (!currentPageInfo.value) {
     return;
@@ -90,7 +91,9 @@ const toggleCurrentPageFavorite = () => {
 };
 
 const breadcrumb = computed((): BreadcrumbItem[] => {
-  const base: BreadcrumbItem[] = [{ label: "home", to: homepage || "/" }];
+  const base: BreadcrumbItem[] = [
+    { icon: HOME_ICON, to: homepage || "/", "aria-label": t("header.home") },
+  ];
 
   // The path only: with the query, the last segment ("data?table=x") matched
   // no route and the current page dropped out of the breadcrumb.
@@ -100,7 +103,7 @@ const breadcrumb = computed((): BreadcrumbItem[] => {
 
   const paths = route.path.split("/").filter((path) => path);
 
-  return base.concat(
+  const crumbs = base.concat(
     paths
       .map((path, index): BreadcrumbItem | null => {
         const to = `/${paths.slice(0, index + 1).join("/")}`;
@@ -124,6 +127,17 @@ const breadcrumb = computed((): BreadcrumbItem[] => {
       })
       .filter((item) => item !== null),
   );
+
+  // Written as the row has it: an email address keeps its lowercase.
+  const last = crumbs.at(-1);
+  if (recordLabel.value && last && crumbs.length > 1) {
+    crumbs[crumbs.length - 1] = {
+      ...last,
+      label: recordLabel.value,
+      ui: RECORD_CRUMB_UI,
+    };
+  }
+  return crumbs;
 });
 
 const mobileBreadcrumb = computed(
@@ -132,10 +146,12 @@ const mobileBreadcrumb = computed(
       return breadcrumb.value;
     }
 
+    // The middle crumbs fold into a "…" menu (see the `#ellipsis` slot) so a
+    // deep page still fits a phone without losing the way back up.
     return [
-      { icon: "i-ph-house-light", to: "/" },
+      breadcrumb.value[0]!,
       {
-        icon: "i-ph-dots-three-light",
+        slot: MOBILE_ELLIPSIS_SLOT,
         children: breadcrumb.value.slice(1, -1).map((x) => ({
           label: x.label,
           to: x.to,
@@ -153,36 +169,37 @@ const mobileBreadcrumb = computed(
       <template #leading>
         <UButton
           class="lg:hidden"
+          :class="TOOLBAR_BUTTON_CLASS"
           color="neutral"
           variant="ghost"
           :icon="
             sidebarOpen ? appConfig.ui.icons.close : appConfig.ui.icons.menu
           "
-          :aria-label="sidebarOpen ? 'Close sidebar' : 'Open sidebar'"
-          :ui="{ leadingIcon: 'size-[18px]' }"
-          @click="sidebarOpen = !sidebarOpen"
-        />
-        <UButton
-          class="hidden lg:flex"
-          color="neutral"
-          variant="ghost"
-          :icon="
-            sidebarCollapsed
-              ? appConfig.ui.icons.panelOpen
-              : appConfig.ui.icons.panelClose
+          :aria-label="
+            sidebarOpen ? t('header.close_sidebar') : t('header.open_sidebar')
           "
-          :aria-label="sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'"
           :ui="{ leadingIcon: 'size-[18px]' }"
-          @click="sidebarCollapsed = !sidebarCollapsed"
+          @click="sidebarOpen = !sidebarOpen"
         />
-
-        <UButton
-          :icon="isCurrentPageFavorite ? 'i-ph-star-fill' : 'i-ph-star-light'"
-          variant="ghost"
-          :color="isCurrentPageFavorite ? 'primary' : 'neutral'"
-          :disabled="!currentPageInfo"
-          :ui="{ leadingIcon: 'size-[18px]' }"
-          @click="toggleCurrentPageFavorite"
+        <UTooltip :text="sidebarToggleLabel" :content="TOOLTIP_CONTENT">
+          <UButton
+            class="hidden lg:flex"
+            :class="TOOLBAR_BUTTON_CLASS"
+            color="neutral"
+            variant="ghost"
+            :icon="
+              sidebarCollapsed
+                ? appConfig.ui.icons.panelOpen
+                : appConfig.ui.icons.panelClose
+            "
+            :aria-label="sidebarToggleLabel"
+            :ui="{ leadingIcon: 'size-[18px]' }"
+            @click="sidebarCollapsed = !sidebarCollapsed"
+          />
+        </UTooltip>
+        <span
+          aria-hidden="true"
+          class="mx-1.5 hidden h-[18px] w-px bg-(--ui-border) lg:block"
         />
       </template>
 
@@ -191,86 +208,91 @@ const mobileBreadcrumb = computed(
           :items="breadcrumb"
           :ui="{ linkLabel: 'first-letter:uppercase' }"
           class="hidden md:block"
-        />
+        >
+          <template #separator>
+            <span class="text-dimmed text-xs">/</span>
+          </template>
+        </UBreadcrumb>
+
+        <UTooltip :text="favoriteLabel" :content="TOOLTIP_CONTENT">
+          <UButton
+            :icon="isCurrentPageFavorite ? 'i-ph-star-fill' : 'i-ph-star-light'"
+            variant="ghost"
+            size="sm"
+            :color="isCurrentPageFavorite ? 'primary' : 'neutral'"
+            :class="isCurrentPageFavorite ? undefined : TOOLBAR_BUTTON_CLASS"
+            :disabled="!currentPageInfo"
+            :aria-label="favoriteLabel"
+            :aria-pressed="isCurrentPageFavorite"
+            :ui="{ leadingIcon: 'size-4' }"
+            @click="toggleCurrentPageFavorite"
+          />
+        </UTooltip>
       </template>
 
       <template #right>
-        <UButton
+        <UTooltip
           v-if="builderAction"
-          :icon="builderAction.icon || 'i-ph-hammer-light'"
-          variant="ghost"
-          :color="builderAction.isActive?.() ? 'primary' : 'neutral'"
-          :title="builderAction.label"
-          :aria-label="builderAction.label"
-          :ui="{ leadingIcon: 'size-[18px]' }"
-          @click="builderAction.onSelect()"
-        />
-
-        <UPopover
-          v-else
-          mode="hover"
-          :open-delay="BUILDER_POPOVER_OPEN_DELAY_MS"
-          :content="{ align: 'end', side: 'bottom' }"
-          :ui="{ content: 'w-72' }"
+          :text="builderAction.label"
+          :content="TOOLTIP_CONTENT"
         >
           <UButton
-            icon="i-ph-hammer-light"
+            :icon="builderAction.icon || 'i-ph-hammer-light'"
             variant="ghost"
-            color="neutral"
-            :title="t('builder.button')"
-            :aria-label="t('builder.button')"
+            :color="builderAction.isActive?.() ? 'primary' : 'neutral'"
+            :class="
+              builderAction.isActive?.() ? undefined : TOOLBAR_BUTTON_CLASS
+            "
+            :aria-label="builderAction.label"
             :ui="{ leadingIcon: 'size-[18px]' }"
+            @click="builderAction.onSelect()"
           />
+        </UTooltip>
 
-          <template #content>
-            <div class="flex flex-col gap-2 p-4">
-              <div class="flex items-center justify-between gap-2">
-                <p class="text-highlighted text-sm font-semibold">
-                  {{ t("builder.title") }}
-                </p>
-                <UBadge color="primary" variant="subtle" size="sm">
-                  {{ t("builder.soon") }}
-                </UBadge>
-              </div>
-              <p class="text-muted text-xs leading-relaxed">
-                {{ t("builder.description") }}
-              </p>
-            </div>
-          </template>
-        </UPopover>
-
-        <UButton
+        <UTooltip
           v-for="action in headerActions"
           :key="action.id"
-          :icon="action.icon"
-          variant="ghost"
-          color="neutral"
-          :title="action.label"
-          :aria-label="action.label"
-          :ui="{ leadingIcon: 'size-[18px]' }"
-          @click="action.onSelect?.()"
-        />
-
-        <QuickActionsPopover />
-
-        <NotificationPopover />
-
-        <UDropdownMenu :items="userMenuOptions" :ui="{ content: 'w-48' }" arrow>
+          :text="action.label"
+          :content="TOOLTIP_CONTENT"
+        >
           <UButton
-            icon="i-ph-user-light"
+            :icon="action.icon"
             variant="ghost"
             color="neutral"
+            :class="TOOLBAR_BUTTON_CLASS"
+            :aria-label="action.label"
             :ui="{ leadingIcon: 'size-[18px]' }"
+            @click="action.onSelect?.()"
           />
-        </UDropdownMenu>
+        </UTooltip>
+
+        <QuickActionsPopover />
+
+        <NotificationPopover />
       </template>
     </UDashboardNavbar>
 
-    <div class="border-default border-b px-6 py-2 md:hidden">
+    <!-- Same side padding as the navbar above, so the home icon lines up
+         with its buttons. -->
+    <div class="border-default border-b px-3 py-2 sm:px-4 md:hidden">
       <UBreadcrumb
         :items="mobileBreadcrumb"
         :ui="{ linkLabel: 'first-letter:uppercase' }"
-      />
+      >
+        <template #ellipsis="{ item }">
+          <UDropdownMenu :items="item.children" :content="{ align: 'start' }">
+            <UButton
+              icon="i-ph-dots-three-light"
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              class="-my-1"
+              :class="TOOLBAR_BUTTON_CLASS"
+              :aria-label="t('header.show_path')"
+            />
+          </UDropdownMenu>
+        </template>
+      </UBreadcrumb>
     </div>
   </div>
 </template>

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardPageBody.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import PageHeader from "./PageHeader.vue";
+import PageHeaderActionsOutlet from "./PageHeaderActionsOutlet.vue";
+import PageSkeleton from "./PageSkeleton.vue";
+import type { LayoutHeaderAction } from "./PageHeaderActionBar.vue";
+import { providePageHeaderActions } from "../../../composables/layout/usePageHeaderActions";
+
+interface Props {
+  hideHeader?: boolean;
+  icon?: string;
+  title?: string;
+  description?: string;
+  /** Header buttons declared by the backend page (`headerActions`). */
+  headerActions?: LayoutHeaderAction[];
+  /** Space between the page header and the page. */
+  headerClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hideHeader: false,
+  icon: "i-ph-file",
+  title: undefined,
+  description: undefined,
+  headerActions: () => [],
+  headerClass: "pb-6",
+});
+
+// The header renders before the page in the slot: its actions come through
+// an outlet that waits for the page's setup (see usePageHeaderActions), and
+// a marker after the slot says the page has rendered.
+const pageHeaderActions = providePageHeaderActions();
+const PageRendered = defineComponent({
+  name: "DmsPageRendered",
+  setup() {
+    pageHeaderActions.markSlotRendered();
+    return () => null;
+  },
+});
+
+// After a client navigation the skeleton stands in for the page until its
+// chunk (and its setup) resolves, so the old page is never kept on screen.
+const isPageLoading = useDmsPageLoading();
+// A reloaded "preview as role" tab holds its page back (pre-paint script, see
+// the permission-preview-prepaint plugin) until the preview veils it.
+const PAGE_SKELETON_CLASS =
+  "hidden [html[data-dms-role-preview=pending]_&]:block";
+const PAGE_SLOT_CLASS =
+  "contents [html[data-dms-role-preview=pending]_&]:hidden";
+</script>
+
+<template>
+  <PageHeader
+    v-if="props.title && !props.hideHeader"
+    :icon="props.icon || 'i-ph-file'"
+    :title="props.title"
+    :description="props.description"
+    :class="props.headerClass"
+  >
+    <template #actions>
+      <PageHeaderActionsOutlet :actions="props.headerActions" />
+    </template>
+  </PageHeader>
+  <div :class="isPageLoading ? 'hidden' : PAGE_SLOT_CLASS">
+    <slot />
+  </div>
+  <PageSkeleton
+    :with-title="!props.title || props.hideHeader"
+    :class="isPageLoading ? undefined : PAGE_SKELETON_CLASS"
+  />
+  <PageRendered />
+</template>