@antelopejs/dms 0.14.0 → 0.15.1

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

@@ -13,6 +13,7 @@ import { useSidebarState } from "./sidebarState";
 import { useKeyboardPlatform } from "#dms-ui/app/composables/global/keyboardPlatform";
 import { useMediaQuery } from "@vueuse/core";
 import DmsSidebarUserMenu from "./SidebarUserMenu.vue";
+import { useInstalledModuleCount } from "../../../composables/page/useInstalledModules";
 
 const MODULES_PATH = "/modules";
 
@@ -205,14 +206,7 @@ watch(
   { immediate: true },
 );
 
-const moduleCount = computed(() => {
-  const modulesNode =
-    siteLayout.siteLayoutTree.value?.children[MODULES_TREE_KEY];
-  if (!modulesNode) return 0;
-  return modulesNode.childrenOrders.filter(
-    (childId) => modulesNode.children[childId]?.isModuleRoot,
-  ).length;
-});
+const moduleCount = useInstalledModuleCount();
 
 const footerItems = computed((): NavigationMenuItem[] => {
   const result: NavigationMenuItem[] = [];
@@ -297,7 +291,13 @@ const footerItems = computed((): NavigationMenuItem[] => {
           "
           :class="isRail(sidebarRail) ? 'size-7' : 'h-12 w-auto'"
           class="object-contain"
-          :alt="t('navigation.goToHomepage')"
+          :alt="
+            appConfig.branding?.logo?.alt
+              ? t('navigation.goToBrandHomepage', {
+                  name: appConfig.branding.logo.alt,
+                })
+              : t('navigation.goToHomepage')
+          "
         />
       </DmsLink>
     </template>

package/frontend-vue/layers/dms-layout/app/components/layout/AppLogo.vue

@@ -7,5 +7,6 @@ const appConfig = useDmsAppConfig();
     v-if="appConfig.branding.logo"
     :light="appConfig.branding?.logo?.default.light"
     :dark="appConfig.branding?.logo?.default.dark"
+    :alt="appConfig.branding.logo.alt"
   />
 </template>

package/frontend-vue/layers/dms-layout/app/composables/page/useInstalledModules.ts

@@ -0,0 +1,78 @@
+import type { StoreListing } from "#dms-core/app/types/module-store";
+import type { ModuleCatalogEntry } from "#dms-core/app/types/page";
+import type { Ref } from "vue";
+import {
+  sortStoreModules,
+  storeOnlyModules,
+  toModuleStoreEntry,
+  withStoreDetails,
+} from "../../build/utils/module-store-catalog";
+import { ENDPOINT_STORE_LISTING } from "./useModuleStore";
+import { useModulesListing } from "./useModulesListing";
+
+/**
+ * The installed modules, as the Modules page lists them and the sidebar
+ * counts them: the modules that register pages, with the store's details,
+ * and the installed store modules that register none, such as the Builder.
+ * Both read it here, so the badge and the page never count differently.
+ *
+ * @param modulesListing The registered modules
+ * @param moduleStore The module store
+ */
+export const useInstalledModules = (
+  modulesListing: ReturnType<typeof useModulesListing>,
+  moduleStore: { listing: Readonly<Ref<StoreListing | undefined>> },
+) => {
+  const { locale } = useI18n();
+  const { processI18n } = useTranslation();
+
+  const storeModules = computed(() =>
+    sortStoreModules(
+      (moduleStore.listing.value?.modules ?? []).map((entry) =>
+        toModuleStoreEntry(entry, modulesListing.modules.value ?? []),
+      ),
+      processI18n,
+      locale.value,
+    ),
+  );
+
+  const modules = computed<ModuleCatalogEntry[]>(() => {
+    const registered = withStoreDetails(
+      (modulesListing.modules.value ?? []).filter((entry) => entry.hasAccess),
+      storeModules.value,
+    );
+    return [...registered, ...storeOnlyModules(storeModules.value, registered)];
+  });
+
+  return { storeModules, modules };
+};
+
+/**
+ * How many modules are installed, for the sidebar's badge. The store listing
+ * waits on the npm registry, so a server render must not wait for it: the
+ * browser reads it, and the count shows once mounted and the read is over,
+ * whether it answered or failed. Until then the badge is absent, on the server
+ * and on the browser's first render, which a page that handed the listing
+ * over (the Modules page) would otherwise have filled in and mismatched, and
+ * while the read runs, so the count never shows without the store's modules.
+ */
+export const useInstalledModuleCount = () => {
+  const isOwner = useIsOwner();
+  const storeListing = useApiData<StoreListing>(
+    () => (isOwner.value ? ENDPOINT_STORE_LISTING : null),
+    { server: false },
+  );
+  const { modules } = useInstalledModules(useModulesListing(), {
+    listing: computed(() => storeListing.data.value ?? undefined),
+  });
+  const isMounted = ref(false);
+  onMounted(() => (isMounted.value = true));
+  const isSettled = computed(
+    () =>
+      storeListing.status.value === "success" ||
+      storeListing.status.value === "error",
+  );
+  return computed(() =>
+    isMounted.value && isSettled.value ? modules.value.length : 0,
+  );
+};

package/frontend-vue/layers/dms-layout/app/custom-pages/modules.vue

@@ -20,7 +20,6 @@ import {
   useModulesListing,
 } from "../composables/page/useModulesListing";
 import { useModuleHistory } from "../composables/page/useModuleHistory";
-import type { ModuleCatalogEntry } from "#dms-core/app/types/page";
 import {
   MODULE_CATEGORY_ALL,
   MODULE_STORE_PATH,
@@ -33,13 +32,8 @@ import {
   summarizeModules,
   type ModuleSortMode,
 } from "../build/utils/modules-catalog";
-import {
-  sortStoreModules,
-  storeOnlyModules,
-  storeOpenTarget,
-  toModuleStoreEntry,
-  withStoreDetails,
-} from "../build/utils/module-store-catalog";
+import { storeOpenTarget } from "../build/utils/module-store-catalog";
+import { useInstalledModules } from "../composables/page/useInstalledModules";
 import { useModuleStore } from "../composables/page/useModuleStore";
 import { useModuleStoreActions } from "../composables/page/useModuleStoreActions";
 import DmsSearchInput from "#dms-ui/app/entries/components/form/SearchInput";
@@ -123,26 +117,13 @@ const isInitiallyLoading = computed(
 );
 const isRetrying = ref(false);
 
-const storeModules = computed(() =>
-  sortStoreModules(
-    (moduleStore.listing.value?.modules ?? []).map((entry) =>
-      toModuleStoreEntry(entry, modulesListing.modules.value ?? []),
-    ),
-    processI18n,
-    locale.value,
-  ),
+const { storeModules, modules } = useInstalledModules(
+  modulesListing,
+  moduleStore,
 );
 const storeEntries = computed(
   () => new Map(storeModules.value.map((entry) => [entry.id, entry])),
 );
-
-const modules = computed<ModuleCatalogEntry[]>(() => {
-  const registered = withStoreDetails(
-    (modulesListing.modules.value ?? []).filter((entry) => entry.hasAccess),
-    storeModules.value,
-  );
-  return [...registered, ...storeOnlyModules(storeModules.value, registered)];
-});
 const summary = computed(() => summarizeModules(modules.value));
 
 const visitedAt = computed(

package/frontend-vue/layers/dms-layout/i18n/locales/layout-en-GB.json

@@ -1,6 +1,7 @@
 {
   "navigation": {
-    "goToHomepage": "Go to homepage"
+    "goToHomepage": "Go to homepage",
+    "goToBrandHomepage": "{name}, go to homepage"
   },
   "header": {
     "home": "Home",

package/frontend-vue/layers/dms-layout/i18n/locales/layout-fr-FR.json

@@ -1,6 +1,7 @@
 {
   "navigation": {
-    "goToHomepage": "Aller à la page d'accueil"
+    "goToHomepage": "Aller à la page d'accueil",
+    "goToBrandHomepage": "{name}, aller à la page d'accueil"
   },
   "header": {
     "home": "Accueil",

package/frontend-vue/layers/dms-onboarding/app/components/onboarding/steps/register.vue

@@ -23,6 +23,8 @@ import {
 
 interface RegisterStepProps {
   platform: OnboardingPlatform;
+  /** The token the address carried; empty when the wizard has to ask for it. */
+  setupToken: string;
 }
 
 interface RegisterStepEmits {
@@ -43,6 +45,7 @@ const MAX_NAME_PART_LENGTH = 100;
 
 const isLoading = ref(false);
 const isRegistered = ref(false);
+const asksForSetupToken = !props.setupToken;
 
 const namePart = z.string().trim().min(1).max(MAX_NAME_PART_LENGTH);
 
@@ -52,12 +55,14 @@ const fields = z
     lastName: namePart,
     email: z.string().trim().email(),
     password: passwordSchema,
+    setupToken: z.string().trim().min(1),
   })
   .transform((data) => ({
     firstName: striptags(data.firstName),
     lastName: striptags(data.lastName),
     email: striptags(data.email),
     password: data.password,
+    setupToken: data.setupToken,
   }));
 
 type Schema = z.output<typeof fields>;
@@ -68,6 +73,7 @@ const state = reactive<Partial<Schema>>({
   lastName: undefined,
   email: undefined,
   password: undefined,
+  setupToken: props.setupToken,
 });
 useLiveFormErrors(form, state);
 
@@ -106,7 +112,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
     }
 
     await showError(error, "page.onboarding.administrator.error_title", {
-      fields: ["firstName", "lastName", "email", "password"],
+      fields: ["firstName", "lastName", "email", "password", "setupToken"],
       form,
     });
   } finally {
@@ -139,6 +145,20 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
     >
       <AuthFormAlert :error="formError" />
 
+      <UFormField
+        v-if="asksForSetupToken"
+        :label="$t('page.onboarding.administrator.setup_token')"
+        :help="$t('page.onboarding.administrator.setup_token_help')"
+        name="setupToken"
+      >
+        <UInput
+          v-model="state.setupToken"
+          autocomplete="off"
+          size="lg"
+          class="w-full"
+        />
+      </UFormField>
+
       <div class="grid gap-3 sm:grid-cols-2">
         <UFormField
           :label="$t('page.onboarding.administrator.first_name')"

package/frontend-vue/layers/dms-onboarding/app/custom-pages/onboarding.vue

@@ -26,6 +26,19 @@ watch(metaTitle, (title) => {
 });
 const administrator = ref<OnboardingAdministrator | null>(null);
 
+const route = useDmsRoute();
+const router = useDmsRouter();
+const setupToken = ref("");
+
+useHead({ meta: [{ name: "referrer", content: "no-referrer" }] });
+
+onMounted(() => {
+  const { token, ...query } = route.query;
+  if (typeof token !== "string" || !token) return;
+  setupToken.value = token;
+  void router.replace({ query });
+});
+
 const stepLabels = computed(() =>
   ONBOARDING_STEPS.map((id) => t(`page.onboarding.steps.${id}`)),
 );
@@ -53,6 +66,7 @@ function onRegistered(owner: OnboardingAdministrator) {
     <Register
       v-else-if="step === 'administrator'"
       :platform="platform"
+      :setup-token="setupToken"
       @back="step = 'platform'"
       @registered="onRegistered"
     />

package/frontend-vue/layers/dms-onboarding/i18n/locales/onboarding-en-GB.json

@@ -28,6 +28,8 @@
         "first_name": "First name",
         "last_name": "Last name",
         "name_required": "Required",
+        "setup_token": "Setup token",
+        "setup_token_help": "Printed in the server log when the instance started, or the value of DMS_SETUP_TOKEN.",
         "email": "Work e-mail",
         "submit": "Create administrator account",
         "back": "Back to platform details",

package/frontend-vue/layers/dms-onboarding/i18n/locales/onboarding-fr-FR.json

@@ -28,6 +28,8 @@
         "first_name": "Prénom",
         "last_name": "Nom",
         "name_required": "Obligatoire",
+        "setup_token": "Jeton d'installation",
+        "setup_token_help": "Affiché dans les logs du serveur au démarrage de l'instance, ou valeur de DMS_SETUP_TOKEN.",
         "email": "E-mail professionnel",
         "submit": "Créer le compte administrateur",
         "back": "Retour aux informations de la plateforme",

package/frontend-vue/layers/dms-ui/app/build/composables/blocks/blockDataState.ts

@@ -0,0 +1,86 @@
+import {
+  computed,
+  inject,
+  toValue,
+  type ComputedRef,
+  type InjectionKey,
+  type MaybeRefOrGetter,
+  type Ref,
+} from "vue";
+import type { ChartSeries } from "../../../composables/chart/types";
+
+/**
+ * What a data block shows its reader: still waiting for its first answer
+ * (`loading`), content (`ok`), an answer with nothing to draw (`empty`), or a
+ * request that failed with nothing to fall back on (`error`).
+ */
+export type BlockDataState = "loading" | "ok" | "empty" | "error";
+
+/**
+ * The attributes a data block carries on its root element. An overlay or a
+ * test harness reads them from the DOM, so the names are a contract.
+ */
+export const BLOCK_ATTRIBUTES = {
+  /** The block's position in the page layout: its key, then each child id, joined by dots. */
+  path: "data-dms-block",
+  /** The block kind as the page author names it, for example `ChartCard`. */
+  type: "data-dms-block-type",
+  /** A {@link BlockDataState}. */
+  state: "data-dms-block-state",
+} as const;
+
+/** The layout path of the block being rendered, provided by `RecursiveComponent`. */
+export const BLOCK_PATH_KEY: InjectionKey<Ref<string | undefined>> =
+  Symbol("dms-block-path");
+
+export interface BlockStateFacts {
+  /** An answer for the current inputs is still to come. */
+  loading: boolean;
+  /** The last request failed. */
+  failed: boolean;
+  /** The block has something to show its reader. */
+  hasContent: boolean;
+}
+
+/**
+ * The state of a block from three facts. Content wins over everything: a
+ * block refreshing or failing a refresh still shows what it had.
+ */
+export function resolveBlockState(facts: BlockStateFacts): BlockDataState {
+  if (facts.hasContent) return "ok";
+  if (facts.loading) return "loading";
+  if (facts.failed) return "error";
+  return "empty";
+}
+
+function isDrawable(point: ChartSeries["data"][number]): boolean {
+  if (typeof point === "number") return Number.isFinite(point);
+  return point.y !== null && point.y !== undefined;
+}
+
+/** Whether any series holds a point a chart can draw: not absent, not `null`. */
+export function hasDrawablePoints(series: readonly ChartSeries[]): boolean {
+  return series.some((entry) => entry.data.some(isDrawable));
+}
+
+export type BlockStateAttributes = {
+  [BLOCK_ATTRIBUTES.state]: BlockDataState;
+  [BLOCK_ATTRIBUTES.type]: string;
+  [BLOCK_ATTRIBUTES.path]?: string;
+};
+
+/**
+ * The attributes to bind on a data block's root element (`v-bind`): its
+ * kind, its state, and its layout path when a `RecursiveComponent` renders it.
+ */
+export function useBlockStateAttributes(
+  type: string,
+  state: MaybeRefOrGetter<BlockDataState>,
+): ComputedRef<BlockStateAttributes> {
+  const path = inject(BLOCK_PATH_KEY, null);
+  return computed(() => ({
+    [BLOCK_ATTRIBUTES.state]: toValue(state),
+    [BLOCK_ATTRIBUTES.type]: type,
+    [BLOCK_ATTRIBUTES.path]: path?.value,
+  }));
+}

package/frontend-vue/layers/dms-ui/app/build/composables/chart/apexAxes.ts

@@ -15,7 +15,15 @@ import {
 const CROSSHAIR_DASH = 3;
 const HIGH_CONTRAST_YAXIS_TYPES: ChartType[] = ["radar"];
 const CATEGORY_YAXIS_TYPES: ChartType[] = ["heatmap"];
-const SELF_THINNED_XAXIS_TYPES: ChartType[] = ["heatmap"];
+const SELF_THINNED_XAXIS_TYPES: ChartType[] = [
+  "heatmap",
+  "line",
+  "area",
+  "rangeArea",
+  "column",
+  "bar",
+  "mixed",
+];
 
 type YAxis = NonNullable<Exclude<ApexOptions["yaxis"], unknown[]>>;
 type XAxis = NonNullable<ApexOptions["xaxis"]>;
@@ -42,11 +50,22 @@ export function buildYAxis(
   return yaxis;
 }
 
-function thinsOwnXLabels(input: UseApexChartInput): boolean {
+/**
+ * Whether the chart draws a category x-axis whose labels this module thins.
+ * A horizontal bar puts its categories on the other axis. `bucketed` marks a
+ * datetime series Apex draws as a category axis of bucket labels.
+ */
+export function thinsOwnXLabels(
+  input: UseApexChartInput,
+  bucketed = false,
+): boolean {
   const settings = input.xAxis;
+  const horizontalBar =
+    input.type === "bar" && input.orientation !== "vertical";
   return (
     SELF_THINNED_XAXIS_TYPES.includes(input.type) &&
-    (input.xaxisType ?? "category") === "category" &&
+    !horizontalBar &&
+    (bucketed || (input.xaxisType ?? "category") === "category") &&
     settings?.hideOverlappingLabels !== false &&
     settings?.tickAmount === undefined &&
     !settings?.rotate

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/tableViewCounts.ts

@@ -83,15 +83,27 @@ export function useTableViewCountsData<T extends Data>(
   const { liveHold } = scope.liveHold;
   const { tableViewItems, canSaveViews } = scope.views;
   const { props } = scope;
-  const { data: tabCountsData, refresh: refreshTabCounts } =
-    useTableCountsData<T>({
-      componentId,
-      pageId,
-      rows: tableRows,
-      queries: tabCountsQuery,
-      archiveQuery,
-      heldQuery: liveHold.heldQuery,
-    });
+  const {
+    data: tabCountsData,
+    status: tabCountsStatus,
+    refresh: refreshTabCounts,
+  } = useTableCountsData<T>({
+    componentId,
+    pageId,
+    rows: tableRows,
+    queries: tabCountsQuery,
+    archiveQuery,
+    heldQuery: liveHold.heldQuery,
+  });
+
+  /**
+   * The counters are still on their way: no answer yet, and no failure. A
+   * request that failed leaves `data` null as a pending one does, so it
+   * would draw the counters' skeleton for good.
+   */
+  const areCountsPending = computed(
+    () => tabCountsData.value == null && tabCountsStatus.value !== "error",
+  );
 
   const viewItems = computed<TableViewItem[]>(() =>
     tableViewItems.value.map((view) => ({
@@ -104,13 +116,20 @@ export function useTableViewCountsData<T extends Data>(
       count: view.count
         ? tabCountsData.value?.[`${VIEW_COUNT_ID_PREFIX}${view.id}`]
         : undefined,
-      countPending: !!view.count && tabCountsData.value == null,
+      countPending: !!view.count && areCountsPending.value,
     })),
   );
   const viewsLayout = props.views?.layout ?? "tabs";
   const hasViews =
     !!props.views && (props.views.items.length > 0 || canSaveViews);
-  return { refreshTabCounts, tabCountsData, viewItems, viewsLayout, hasViews };
+  return {
+    refreshTabCounts,
+    tabCountsData,
+    areCountsPending,
+    viewItems,
+    viewsLayout,
+    hasViews,
+  };
 }
 
 export function useTableViewLinkCounts<T extends Data>(

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/tableViewTabs.ts

@@ -89,7 +89,7 @@ export function useTableViewTabs<T extends Data>(
 export function useTableViewTabPresentation<T extends Data>(
   scope: Pick<TableViewScope<T>, "countsData" | "linkCounts" | "tabs">,
 ) {
-  const { tabCountsData } = scope.countsData;
+  const { tabCountsData, areCountsPending } = scope.countsData;
   const { linkTabCountsLoaded, linkTabCounts } = scope.linkCounts;
   const { resolvedTabs } = scope.tabs;
   const permissionPreview = usePermissionPreview();
@@ -104,7 +104,7 @@ export function useTableViewTabPresentation<T extends Data>(
   };
 
   const isTabCountPending = (tab: ResolvedTab): boolean => {
-    if (!tab.to) return tabCountsData.value == null;
+    if (!tab.to) return areCountsPending.value;
     return !!tab.countFrom && !linkTabCountsLoaded.value;
   };
 

package/frontend-vue/layers/dms-ui/app/components/RecursiveComponent.vue

@@ -9,6 +9,7 @@ import {
 } from "./grid/constants";
 import DmsPermissionVeil from "../build/components/permission/PermissionVeil.vue";
 import { registerBlockAnchor } from "../build/composables/page/blockAnchors";
+import { BLOCK_PATH_KEY } from "../build/composables/blocks/blockDataState";
 
 interface Props {
   component: ResolvedComponentInfo;
@@ -40,6 +41,11 @@ function anchorBlock(instance: Element | ComponentPublicInstance | null): void {
   anchored = block;
 }
 
+provide(
+  BLOCK_PATH_KEY,
+  computed(() => props.layoutPath),
+);
+
 const { t } = useI18n();
 const preview = usePermissionPreview();
 const previewBlock = computed(() => preview.blockFor(props.layoutPath));

package/frontend-vue/layers/dms-ui/app/components/chart/Chart.vue

@@ -2,6 +2,11 @@
 import { computed, inject, ref, watch } from "vue";
 import DmsEmptyState from "../empty-state/EmptyState.vue";
 import DmsChartSkeleton from "../../build/components/chart/internal/ChartSkeleton.vue";
+import {
+  hasDrawablePoints,
+  resolveBlockState,
+  useBlockStateAttributes,
+} from "../../build/composables/blocks/blockDataState";
 import {
   chartFrameHeight,
   useApexChart,
@@ -148,7 +153,7 @@ const staticDonut = computed<DonutRecord[]>(() => {
 
 const isNested = computed(() => !!nestedContext);
 
-const { data, isLoading } = useChartFetch<ChartResponse>({
+const { data, isLoading, error } = useChartFetch<ChartResponse>({
   fetchUrl: isNested.value ? undefined : props.fetchUrl,
   fetchUrlMethod: props.fetchUrlMethod,
   routeParams: () => props.routeParams,
@@ -318,6 +323,16 @@ const isAwaitingData = computed(() =>
 
 const isRefreshing = computed(() => hasData.value && isAwaitingData.value);
 
+const blockAttributes = useBlockStateAttributes("Chart", () =>
+  resolveBlockState({
+    loading: isAwaitingData.value,
+    failed: !nestedContext && Boolean(error.value),
+    hasContent: isCircular.value
+      ? finalDonutData.value.some((record) => record.value !== 0)
+      : hasDrawablePoints(finalSeries.value),
+  }),
+);
+
 const isDrawn = ref(false);
 watch(hasData, (present) => {
   if (!present) isDrawn.value = false;
@@ -328,6 +343,7 @@ watch(hasData, (present) => {
   <!-- Standalone charts get the card frame; charts nested inside a
        DmsChartCard inherit its frame instead. -->
   <div
+    v-bind="blockAttributes"
     class="dms-chart"
     :class="nestedContext ? undefined : 'dms-card p-3.5 sm:pr-[18px]'"
   >

package/frontend-vue/layers/dms-ui/app/components/chart/ChartCard.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { computed, provide, reactive } from "vue";
+import {
+  hasDrawablePoints,
+  resolveBlockState,
+  useBlockStateAttributes,
+} from "../../build/composables/blocks/blockDataState";
 import DmsEyebrow from "../section-header/Eyebrow.vue";
 
 import DmsTrendBadge from "./internal/TrendBadge.vue";
@@ -71,7 +76,7 @@ const { state: watchState } = useWatch(
 );
 const watchKey = computed(() => JSON.stringify(watchState.value));
 
-const { data, isLoading } = useChartFetch<ChartCardResponse>({
+const { data, isLoading, error } = useChartFetch<ChartCardResponse>({
   fetchUrl: props.fetchUrl,
   fetchUrlMethod: props.fetchUrlMethod,
   routeParams: () => props.routeParams,
@@ -159,6 +164,17 @@ const comparisonLegendLabel = computed(() =>
       t(DEFAULT_COMPARISON_LABEL_KEY, "Comparison")),
 );
 
+const blockAttributes = useBlockStateAttributes("ChartCard", () =>
+  resolveBlockState({
+    loading: isLoading.value,
+    failed: Boolean(error.value),
+    hasContent:
+      value.value !== undefined ||
+      hasDrawablePoints(cardSeries.value) ||
+      hasDrawablePoints(cardComparisonSeries.value),
+  }),
+);
+
 const isFirstLoad = computed(() => isLoading.value && data.value === null);
 
 const isRefreshing = computed(() => isLoading.value && data.value !== null);
@@ -170,7 +186,11 @@ const hasMeta = computed(
 </script>
 
 <template>
-  <DmsCard :padded="false" class="flex min-w-0 flex-col">
+  <DmsCard
+    v-bind="blockAttributes"
+    :padded="false"
+    class="flex min-w-0 flex-col"
+  >
     <div class="flex flex-wrap items-start gap-3 px-4 pt-4 pb-1.5 sm:px-[18px]">
       <div class="grid min-w-0 justify-items-start">
         <DmsEyebrow