@revenexx/studio-shared 0.4.0 → 0.4.2

package/dist/module.d.mts

@@ -1,4 +1,4 @@
-import * as nuxt_schema from 'nuxt/schema';
+import { NuxtModule } from '@nuxt/schema';
 export * from '../dist/runtime/components/DataTable/types.js';
 export * from '../dist/runtime/types/storage.js';
 export * from '../dist/runtime/types/dashboard.js';
@@ -13,10 +13,12 @@ export { WidgetCategory, WidgetCategoryGroup, WidgetConfigField, WidgetDefinitio
 export { StickyListView } from '../dist/runtime/composables/useStickyListView.js';
 export { DetailSheetBinding } from '../dist/runtime/composables/useDetailSheet.js';
 export { FloatingPanelDock, FloatingPanelMode, FloatingPanelOptions } from '../dist/runtime/composables/useFloatingPanel.js';
+export { WidgetHeaderStatus } from '../dist/runtime/composables/useWidgetHeader.js';
+export { WidgetFigure } from '../dist/runtime/composables/useWidgetFigures.js';
 export { IsoOption } from '../dist/runtime/lib/isoLists.js';
 export { Translate, TranslateNamed, Translator } from '../dist/runtime/lib/i18nBridge.js';
 export { FieldSpan, FormContextRow, SectionOffset, SpanSource } from '../dist/runtime/lib/formLayout.js';
 
-declare const _default: nuxt_schema.NuxtModule<nuxt_schema.ModuleOptions, nuxt_schema.ModuleOptions, false>;
+declare const studioShared: NuxtModule;
 
-export { _default as default };
+export { studioShared as default };

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "studio-shared",
   "configKey": "studioShared",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "builder": {
-    "@nuxt/module-builder": "1.0.2",
+    "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"
   }
 }

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { join } from 'node:path';
 import { defineNuxtModule, createResolver, addComponentsDir, addImports } from '@nuxt/kit';
 
-const module$1 = defineNuxtModule({
+const studioShared = defineNuxtModule({
   meta: {
     name: "studio-shared",
     configKey: "studioShared"
@@ -62,7 +62,11 @@ const module$1 = defineNuxtModule({
       "useTalkbackPresence"
     ].map((name) => ({ name, from: join(runtime, "composables/useTalkbackChannels") })));
     addImports([
-      { name: "useDashboards", from: join(runtime, "composables/useDashboards") }
+      { name: "useDashboards", from: join(runtime, "composables/useDashboards") },
+      // A widget's busy status, shown in its frame's header.
+      { name: "useWidgetHeader", from: join(runtime, "composables/useWidgetHeader") },
+      // A widget's own figures, preferred over its screen text by readers.
+      { name: "useWidgetFigures", from: join(runtime, "composables/useWidgetFigures") }
     ]);
     addImports([
       { name: "useT", from: join(runtime, "composables/useT") },
@@ -71,4 +75,4 @@ const module$1 = defineNuxtModule({
   }
 });
 
-export { module$1 as default };
+export { studioShared as default };

package/dist/runtime/components/Dashboard/DashboardConfirmDialog.vue

@@ -15,7 +15,7 @@ const t = useT();
   <AlertDialog :open="open" @update:open="(o) => {
   if (!o) emit('update:open', false);
 }">
-    <AlertDialogContent>
+    <AlertDialogContent class="sm:max-w-xl">
       <AlertDialogHeader>
         <AlertDialogTitle>{{ title }}</AlertDialogTitle>
         <AlertDialogDescription v-if="description">{{ description }}</AlertDialogDescription>

package/dist/runtime/components/Dashboard/DashboardGrid.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { GridItem, GridLayout } from "grid-layout-plus";
-import { computed, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import WidgetFrame from "./DashboardWidgetFrame.vue";
 import WidgetHost from "./DashboardWidgetHost.vue";
 import { useWidgetRegistry } from "../../lib/widgetRegistry";
@@ -36,6 +36,29 @@ function widgetFor(id) {
   return props.widgets.find((w) => w.id === id);
 }
 const placedLayout = computed(() => internalLayout.value.filter((item) => !!widgetFor(item.i)));
+const FLOW_BELOW = 1e3;
+const PHONE_BELOW = 560;
+const hostEl = ref(null);
+const hostWidth = ref(0);
+let hostObserver = null;
+onMounted(() => {
+  if (!hostEl.value || typeof ResizeObserver === "undefined") return;
+  hostObserver = new ResizeObserver(([entry]) => {
+    hostWidth.value = entry?.contentRect.width ?? 0;
+  });
+  hostObserver.observe(hostEl.value);
+});
+onBeforeUnmount(() => hostObserver?.disconnect());
+const flow = computed(() => !props.editing && hostWidth.value > 0 && hostWidth.value < FLOW_BELOW);
+const flowPhone = computed(() => hostWidth.value < PHONE_BELOW);
+const flowItems = computed(() => placedLayout.value.slice().sort((a, b) => a.y - b.y || a.x - b.x));
+function flowStyle(item) {
+  const span = flowPhone.value ? item.w <= 3 ? 1 : 2 : item.w <= 3 ? 2 : item.w <= 6 ? 3 : 6;
+  return {
+    gridColumn: `span ${span} / span ${span}`,
+    minHeight: `${item.h * 20 + (item.h - 1) * 12}px`
+  };
+}
 </script>
 
 <template>
@@ -43,7 +66,27 @@ const placedLayout = computed(() => internalLayout.value.filter((item) => !!widg
        sides, so without this the widgets sit one gutter inside the page padding
        and one inside the header. Cancelling it on three sides keeps the gaps
        between widgets and drops the duplicated outer one. -->
+  <div ref="hostEl">
+  <div
+    v-if="flow"
+    class="grid gap-3"
+    :class="flowPhone ? 'grid-cols-2' : 'grid-cols-6'"
+    data-testid="dashboard-flow"
+  >
+    <div v-for="item in flowItems" :key="item.i" class="grid min-w-0 grid-cols-1" :style="flowStyle(item)">
+      <WidgetFrame
+        :definition="registry.get(widgetFor(item.i).type)"
+        :title="widgetFor(item.i).title"
+        :configurable="!!registry.get(widgetFor(item.i).type)?.configFields?.length"
+        @configure="emit('configure', item.i)"
+        @remove="emit('remove', item.i)"
+      >
+        <WidgetHost :widget="widgetFor(item.i)" />
+      </WidgetFrame>
+    </div>
+  </div>
   <GridLayout
+    v-else
     v-model:layout="internalLayout"
     class="relative z-0 -mx-3 -mt-3"
     :col-num="12"
@@ -80,6 +123,7 @@ const placedLayout = computed(() => internalLayout.value.filter((item) => !!widg
       </WidgetFrame>
     </GridItem>
   </GridLayout>
+  </div>
 </template>
 
 <style scoped>

package/dist/runtime/components/Dashboard/DashboardNameDialog.vue

@@ -30,7 +30,7 @@ function submit() {
 
 <template>
   <Dialog :open="open" @update:open="emit('update:open', $event)">
-    <DialogContent class="max-w-md">
+    <DialogContent class="sm:max-w-md">
       <DialogHeader>
         <DialogTitle>{{ title }}</DialogTitle>
         <DialogDescription v-if="description">{{ description }}</DialogDescription>

package/dist/runtime/components/Dashboard/DashboardPickerDialog.vue

@@ -35,7 +35,7 @@ function pick(id) {
 
 <template>
   <Dialog :open="open" @update:open="emit('update:open', $event)">
-    <DialogContent class="max-w-2xl">
+    <DialogContent class="sm:max-w-3xl">
       <DialogHeader>
         <DialogTitle>{{ t("dashboard.picker.title") }}</DialogTitle>
         <DialogDescription>{{ t("dashboard.picker.description", { count: dashboards.length }) }}</DialogDescription>

package/dist/runtime/components/Dashboard/DashboardShareDialog.vue

@@ -87,7 +87,7 @@ function apply() {
 
 <template>
   <Dialog :open="open" @update:open="emit('update:open', $event)">
-    <DialogContent class="max-w-lg">
+    <DialogContent class="sm:max-w-xl">
       <DialogHeader>
         <DialogTitle>{{ t("dashboard.share.title", { name: dashboard?.name ?? "" }) }}</DialogTitle>
         <DialogDescription>{{ t("dashboard.share.description") }}</DialogDescription>

package/dist/runtime/components/Dashboard/DashboardWidgetConfigDialog.vue

@@ -62,7 +62,7 @@ function apply() {
 
 <template>
   <Dialog :open="open" @update:open="emit('update:open', $event)">
-    <DialogContent class="max-w-lg">
+    <DialogContent class="sm:max-w-xl">
       <DialogHeader>
         <DialogTitle>{{ heading }}</DialogTitle>
         <DialogDescription>{{ subheading }}</DialogDescription>

package/dist/runtime/components/Dashboard/DashboardWidgetFrame.d.vue.ts

@@ -5,11 +5,11 @@ type __VLS_Props = {
     editing?: boolean;
     configurable?: boolean;
 };
-declare var __VLS_1: {}, __VLS_8: {};
+declare var __VLS_1: {}, __VLS_13: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: () => any;

package/dist/runtime/components/Dashboard/DashboardWidgetFrame.vue

@@ -1,7 +1,10 @@
 <script setup>
+import { Progress } from "@revenexx/studio";
 import { CloseCircle, MenuDots, Settings } from "#solar-icons";
 import { computed } from "vue";
 import WidgetIcon from "./DashboardWidgetIcon.vue";
+import { provideWidgetHeader } from "../../composables/useWidgetHeader";
+import { figuresText, provideWidgetFigures } from "../../composables/useWidgetFigures";
 import { widgetTitle } from "../../lib/widgetRegistry";
 const props = defineProps({
   definition: { type: Object, required: false },
@@ -13,14 +16,17 @@ defineEmits(["configure", "remove"]);
 const t = useT();
 const heading = computed(() => widgetTitle(props.definition, t, props.title));
 const bare = computed(() => props.definition?.bare === true);
+const status = provideWidgetHeader();
+const figures = provideWidgetFigures();
+const figuresAttr = computed(() => figuresText(figures.value) || void 0);
 </script>
 
 <template>
-  <div class="relative h-full min-h-0" :class="editing ? 'select-none' : ''">
+  <div class="relative h-full min-h-0" :class="editing ? 'select-none' : ''" data-dashboard-widget :data-widget-title="heading" :data-widget-figures="figuresAttr">
     <!-- Bare widgets keep the card surface they already had; the frame stays
          out of the way so the migration is a move, not a redesign. -->
     <template v-if="bare">
-      <div class="h-full min-h-0 overflow-hidden">
+      <div class="h-full min-h-0 overflow-hidden" data-widget-body>
         <slot />
       </div>
     </template>
@@ -35,8 +41,13 @@ const bare = computed(() => props.definition?.bare === true);
                 {{ heading }}
               </h3>
             </div>
+            <div v-if="status" class="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground" aria-live="polite">
+              <span class="truncate">{{ status.text }}</span>
+              <Progress v-if="status.busy && status.progress != null" :model-value="status.progress" class="h-1 w-16 shrink-0" />
+              <span v-else-if="status.busy" class="size-3 shrink-0 animate-spin rounded-full border-2 border-primary/25 border-t-primary" aria-hidden="true" />
+            </div>
           </div>
-          <div class="min-h-0 flex-1 overflow-auto">
+          <div class="min-h-0 flex-1 overflow-auto" data-widget-body>
             <slot />
           </div>
         </div>

package/dist/runtime/components/Dashboard/DashboardWidgetFrame.vue.d.ts

@@ -5,11 +5,11 @@ type __VLS_Props = {
     editing?: boolean;
     configurable?: boolean;
 };
-declare var __VLS_1: {}, __VLS_8: {};
+declare var __VLS_1: {}, __VLS_13: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: () => any;

package/dist/runtime/components/DataTable/DataTable.d.vue.ts

@@ -1,9 +1,10 @@
-import { Eye } from '#solar-icons';
+import type { Facet, FacetSelection } from '../../lib/facets.js';
+import type { DataTableColumn, DataTableFilter, DataTableRail, DataTableSavedViews, DataTableState, DataTableViewMode, RowKey, SortState } from './types.js';
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         data: T[];
-        columns: Eye<T>[];
-        rowKey: Eye<T>;
+        columns: DataTableColumn<T>[];
+        rowKey: RowKey<T>;
         /** `label` is the field's accessible name; it defaults to the placeholder
          *  where the surface wrote one (see `searchLabel`). */
         search?: boolean | {
@@ -20,7 +21,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         };
         /** Built-in status/dimension filter pills (static mode). One dimension, or
          *  several (each renders as its own sub-menu). */
-        filterTabs?: Eye<T> | Eye<T>[];
+        filterTabs?: DataTableFilter<T> | DataTableFilter<T>[];
         /**
          * The surface's declared dimensions, as one facet model (PE-6xx).
          *
@@ -37,17 +38,17 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
          * second placement: a tree pinned in a left column beside a panel is two
          * places to look and two commit rules for one question.
          */
-        facets?: Eye[];
+        facets?: Facet[];
         /** Say which facet each chip belongs to (see `FacetChips.showFacet`). */
         chipFacetLabels?: boolean;
         /** Saved views control — the surface supplies snapshot/apply, the table
          *  owns the control, the storage and the dialogs. */
-        savedViews?: Eye | null;
+        savedViews?: DataTableSavedViews | null;
         /** View-mode switch (e.g. List | Gallery). Any mode other than `list`
          *  renders the `#view` slot in place of the table body. */
-        viewModes?: Eye[] | null;
+        viewModes?: DataTableViewMode[] | null;
         /** Collapse handle for the surface's left rail (see `ListSurface`). */
-        rail?: boolean | Eye;
+        rail?: boolean | DataTableRail;
         /**
          * Scroll the ROWS inside the table instead of the page.
          *
@@ -73,6 +74,12 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         scrollBody?: boolean | "fit" | {
             maxHeight?: string;
         };
+        /**
+         * Extra room `'fit'` keeps free under the table — for a bar the host floats
+         * over the bottom of the list while rows are selected, so it never covers
+         * the pagination row (Re-QA 18.10.).
+         */
+        reserveBottom?: number;
         pagination?: boolean | {
             pageSize?: number;
         };
@@ -110,18 +117,51 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
          * above in the sequence.
          */
         reorderDisabled?: string | null;
+        /**
+         * Below 768px every row is drawn as a card — title, status badge, two lines
+         * of key facts — instead of a grid two columns of which fit (R4, Charge 2).
+         * Off for a table that is already narrow by nature.
+         */
+        mobileCards?: boolean;
+        /** `localStorage` key the row-height choice is remembered under (D4). */
+        densityKey?: string;
+        /**
+         * Which table the rows-per-page choice is remembered for (PE-1052). Falls
+         * back to the saved views' `storageKey`; with neither, the size is not kept.
+         */
+        pageSizeKey?: string | null;
+        /**
+         * A table set INTO a card on a detail page (Michael 14.10.): no frame or
+         * corners of its own, the grey head row running edge to edge, and the
+         * search row plain white — the tinted toolbar is a list page's chrome, and
+         * inside a card it read as a second box with too little contrast.
+         */
+        embedded?: boolean;
+        /**
+         * Draw the control row at all. A detail-page card hides it until the
+         * operator asks (the filter toggle in the card head, Michael 14.10.), so a
+         * table of three rows is three rows and not a toolbar with a table under it.
+         */
+        toolbar?: boolean;
     } & {
-        sort?: Eye;
+        query?: string;
+        sort?: SortState;
         page?: number;
         viewMode?: string;
         railOpen?: boolean;
+        /**
+         * Row height (D4, Charge 2). Standard is 44px with a second line only in the
+         * identifying column; compact is 36px and one line everywhere. The reader's
+         * choice, remembered across lists — it is about their screen, not one list.
+         */
+        density?: "standard" | "compact";
         /**
          * The committed facet selection. Two-way so a chip removed under the toolbar,
          * a facet picked in the surface's pinned rail and the panel's own Apply all
          * write to one place — and so the surface can seed it from a saved view or a
          * URL without this component holding a second copy to drift from.
          */
-        facetSelection?: Eye;
+        facetSelection?: FacetSelection;
     }) & {
         onRowClick?: ((row: T) => any) | undefined;
         onStateChange?: ((state: DataTableState) => any) | undefined;
@@ -132,50 +172,49 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             to: number;
             keys: (string | number)[];
         }) => any) | undefined;
+        "onUpdate:query"?: ((value: string) => any) | undefined;
         "onUpdate:sort"?: ((value: SortState) => any) | undefined;
         "onUpdate:page"?: ((value: number) => any) | undefined;
         "onUpdate:viewMode"?: ((value: string) => any) | undefined;
         "onUpdate:railOpen"?: ((value: boolean) => any) | undefined;
+        "onUpdate:density"?: ((value: "compact" | "standard") => any) | undefined;
         "onUpdate:facetSelection"?: ((value: FacetSelection) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
-    expose: (exposed: {}) => void;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        visibleColumns: any;
+    }>) => void;
     attrs: any;
     slots: {
-        [x: `header-${any}`]: ((props: {}) => any) | undefined;
-    } & {
-        [x: `cell-${any}`]: ((props: {
-            row: any;
-        }) => any) | undefined;
-    } & {
-        'filter-menu'?: (props: {}) => any;
-    } & {
-        scope?: (props: {}) => any;
-    } & {
-        'toolbar-left'?: (props: {}) => any;
-    } & {
-        'toolbar-right'?: (props: {}) => any;
-    } & {
-        actions?: (props: {}) => any;
-    } & {
+        [name: `header-${string}`]: (props: Record<string, never>) => unknown;
+        [name: `cell-${string}`]: (props: {
+            row: T;
+        }) => unknown;
+        'filter-menu'?: (props: Record<string, never>) => unknown;
+        scope?: (props: Record<string, never>) => unknown;
+        'toolbar-left'?: (props: Record<string, never>) => unknown;
+        'toolbar-right'?: (props: Record<string, never>) => unknown;
+        actions?: (props: Record<string, never>) => unknown;
         view?: (props: {
-            rows: any;
+            rows: T[];
             loading: boolean;
-        }) => any;
-    } & {
+        }) => unknown;
         empty?: (props: {
-            query: any;
-            filters: any;
+            query: string;
+            filters: {
+                label: string;
+                values: string[];
+            }[];
             clear: () => void;
-        }) => any;
+        }) => unknown;
     };
     emit: (((evt: "rowClick", row: T) => void) & ((evt: "stateChange", state: DataTableState) => void) & ((evt: "orderChange", keys: (string | number)[]) => void) & ((evt: "rowMove", move: {
         key: string | number;
         from: number;
         to: number;
         keys: (string | number)[];
-    }) => void)) & (((event: "update:sort", value: SortState) => void) & ((event: "update:page", value: number) => void) & ((event: "update:viewMode", value: string) => void) & ((event: "update:railOpen", value: boolean) => void) & ((event: "update:facetSelection", value: FacetSelection) => void));
+    }) => void)) & (((event: "update:query", value: string) => void) & ((event: "update:sort", value: SortState) => void) & ((event: "update:page", value: number) => void) & ((event: "update:viewMode", value: string) => void) & ((event: "update:railOpen", value: boolean) => void) & ((event: "update:density", value: "compact" | "standard") => void) & ((event: "update:facetSelection", value: FacetSelection) => void));
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };