@antelopejs/dms 0.14.0 → 0.15.1

package/frontend-vue/layers/dms-ui/app/components/kpi/KpiCard.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import {
+  resolveBlockState,
+  useBlockStateAttributes,
+} from "../../build/composables/blocks/blockDataState";
 import DmsStatCell from "../../build/components/stat/StatCell.vue";
 import DmsEyebrow from "../section-header/Eyebrow.vue";
 
@@ -129,6 +133,14 @@ const previousText = computed(() => {
   return t("dms.chart.versus_value", { value: formatted });
 });
 
+const blockAttributes = useBlockStateAttributes("KpiCard", () =>
+  resolveBlockState({
+    loading: isLoading.value,
+    failed: Boolean(error.value),
+    hasContent: value.value !== undefined,
+  }),
+);
+
 const isFirstLoad = computed(() => isLoading.value && data.value === null);
 
 const hasError = computed(
@@ -181,6 +193,7 @@ const isStat = computed(() => props.variant === "stat");
 <template>
   <DmsStatCell
     v-if="isStat"
+    v-bind="blockAttributes"
     :eyebrow="processI18n(title)"
     :icon="resolvedIcon"
     :loading="isFirstLoad"
@@ -245,6 +258,7 @@ const isStat = computed(() => props.variant === "stat");
 
   <DmsCard
     v-else
+    v-bind="blockAttributes"
     :padded="false"
     class="flex min-h-[132px] flex-col gap-1.5 px-4 py-4 sm:px-[18px]"
     :aria-busy="isFirstLoad"

package/frontend-vue/layers/dms-ui/app/components/table-view/TableView.vue

@@ -18,6 +18,10 @@ import ExpandedRowDetail from "../../build/components/table-view/ExpandedRowDeta
 import LiveHoldBanner from "../../build/components/table-view/LiveHoldBanner.vue";
 import TableViews from "../../build/components/table/Views.vue";
 import { useTableViewSetup } from "../../build/composables/table-view/tableViewSetup";
+import {
+  resolveBlockState,
+  useBlockStateAttributes,
+} from "../../build/composables/blocks/blockDataState";
 
 interface TableViewProps<T extends Data> extends TableViewConfig<T> {
   /** Expandable rows: caret column + detail band (backend `expandable`). */
@@ -143,18 +147,27 @@ const {
   handleRowEdit,
   contextForSlot,
 } = useTableViewSetup<T>(props);
+
+const blockAttributes = useBlockStateAttributes("TableView", () =>
+  resolveBlockState({
+    loading: isListLoading.value,
+    failed: Boolean(listLoadError.value || listNotFound.value),
+    hasContent: (shownResults.value?.length ?? 0) > 0,
+  }),
+);
 </script>
 
 <template>
   <DmsBlockStatus
     v-if="listNotFound"
+    v-bind="blockAttributes"
     state="not-found"
     :not-found="listNotFound"
   />
   <UTable
     v-else
     ref="tableRoot"
-    v-bind="tableProps"
+    v-bind="{ ...tableProps, ...blockAttributes }"
     v-model:pagination="paginationState"
     v-model:global-filter="globalFilter"
     v-model:sorting="sorting"

package/frontend-vue/layers/dms-ui/app/components/top-list/TopListCard.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref, watch } from "vue";
+import {
+  resolveBlockState,
+  useBlockStateAttributes,
+} from "../../build/composables/blocks/blockDataState";
 import DmsEmptyState from "../empty-state/EmptyState.vue";
 import DmsSectionHeader from "../section-header/SectionHeader.vue";
 import DmsBlockActions, {
@@ -219,6 +223,14 @@ const badgeLabel = computed<string | null>(() => {
 const comparison = usePeriodComparisonDisplay(props.periodScope);
 const showRowDelta = computed(() => props.showDelta && !comparison.isOff.value);
 
+const blockAttributes = useBlockStateAttributes("TopListCard", () =>
+  resolveBlockState({
+    loading: isLoading.value,
+    failed: Boolean(error.value),
+    hasContent: items.value.length > 0,
+  }),
+);
+
 const isFirstLoad = computed(() => isLoading.value && data.value === null);
 
 const isRefreshing = computed(() => isLoading.value && data.value !== null);
@@ -268,7 +280,11 @@ const gridStyle = computed(() => ({
 </script>
 
 <template>
-  <DmsCard :padded="false" class="flex min-w-0 flex-col overflow-hidden">
+  <DmsCard
+    v-bind="blockAttributes"
+    :padded="false"
+    class="flex min-w-0 flex-col overflow-hidden"
+  >
     <DmsSectionHeader
       size="card"
       class="border-default border-b py-3.5 pr-4 pl-[18px]"

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

@@ -1,5 +1,4 @@
 import { isNumber } from "../../../../dms-core/app/utils/type-check";
-import type { ChartXAxisFormatter } from "./types";
 
 /**
  * Width of one character of the axis font (11px, monospace) in pixels, with a
@@ -38,19 +37,22 @@ export function categoryLabelStep(
 }
 
 /**
- * A heatmap gives every column a label and ApexCharts does not thin them
- * (`hideOverlappingLabels` only acts on other charts), so on a phone they run
- * into each other ("07:0009:00"). This formatter keeps one label every few
- * columns, from the plot's width, and leaves the tooltip's (no column index)
- * whole.
+ * A category x-axis gives every point a label and ApexCharts does not thin
+ * them (`hideOverlappingLabels` only acts on numeric and datetime axes), so a
+ * long series or a narrow plot runs them into each other ("Aug 4, 2026Aug 8,
+ * 2026"). This formatter keeps one label every few columns, from the plot's
+ * width, and leaves the tooltip's (no column index) whole.
  */
 export function thinnedCategoryFormatter(
-  format: ChartXAxisFormatter | undefined,
+  format: ApexLabelFormatter | undefined,
 ): ApexLabelFormatter {
-  const write = (value: string, timestamp?: number): string =>
-    format ? format(value, timestamp) : String(value ?? "");
+  const write = (
+    value: string,
+    timestamp?: number,
+    opts?: ApexLabelFormatterOpts,
+  ): string => (format ? format(value, timestamp, opts) : String(value ?? ""));
   return (value, timestamp, opts) => {
-    const label = write(value, timestamp);
+    const label = write(value, timestamp, opts);
     const index = opts?.i;
     const globals = opts?.w?.globals;
     if (!isNumber(index) || !globals) return label;

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

@@ -16,7 +16,12 @@ import {
 import { APEX_TYPE_CONFIGS } from "./apexTypeConfigs";
 import { buildAnnotations } from "./apexAnnotations";
 import { buildPlotOptions, ringFitsSliceLabels } from "./apexPlotOptions";
-import { buildXAxis, buildYAxis } from "../../build/composables/chart/apexAxes";
+import {
+  buildXAxis,
+  buildYAxis,
+  thinsOwnXLabels,
+} from "../../build/composables/chart/apexAxes";
+import { thinnedCategoryFormatter } from "./apexCategoryLabels";
 import {
   applyHeatmapThemeMode,
   applyValueBasedColorScale,
@@ -271,10 +276,14 @@ function applyDatetimeBuckets(
   if (!buckets) return;
   const xaxis = options.xaxis;
   const { format: _datetimeFormat, ...labels } = xaxis.labels;
+  const bucketLabels = bucketAxisFormatter(buckets, input);
+  const bucketFormatter = thinsOwnXLabels(input, true)
+    ? thinnedCategoryFormatter(bucketLabels)
+    : bucketLabels;
   options.xaxis = {
     ...xaxis,
     type: "category",
-    labels: { ...labels, formatter: bucketAxisFormatter(buckets, input) },
+    labels: { ...labels, formatter: bucketFormatter },
   };
   const tooltip = options.tooltip;
   options.tooltip = {

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

@@ -0,0 +1 @@
+export * from "../../../build/composables/blocks/blockDataState";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "description": "AntelopeJS DMS. Plug in your PostgreSQL, MongoDB or RethinkDB database and your coding agent builds a back office and analytics dashboard as typed TypeScript. Real-time updates on the data the DMS manages.",
   "keywords": [
     "antelopejs",
@@ -74,8 +74,8 @@
     "@antelopejs/interface-core": ">=0.2.6 <1.0.0",
     "@antelopejs/interface-data-api": ">=0.5.0 <1.0.0",
     "@antelopejs/interface-database": ">=0.1.11 <1.0.0",
-    "@antelopejs/interface-database-decorators": ">=0.1.10 <1.0.0",
-    "@antelopejs/interface-dms": ">=0.10.2 <0.11.0",
+    "@antelopejs/interface-database-decorators": ">=0.1.12 <1.0.0",
+    "@antelopejs/interface-dms": ">=0.10.4 <0.11.0",
     "@antelopejs/interface-email": ">=0.0.6 <1.0.0",
     "@antelopejs/interface-file-storage": ">=0.1.4 <1.0.0",
     "archiver": "^7.0.1",