@7365admin1/layer-common 3.2.2-staging.93 → 3.2.2-staging.94

package/assets/css/screens.css

@@ -361,6 +361,20 @@
   border-bottom: 1px solid var(--border);
 }
 
+/**
+ * The callers' filter row (`#extension`). It was a `v-toolbar` extension, i.e.
+ * a fixed-height second bar; it is now a plain row under the toolbar with the
+ * same rule under it, so it can size to whatever the caller puts in it.
+ */
+.table-card__extension {
+  border-bottom: 1px solid var(--border);
+}
+
+.table-card__loading {
+  position: absolute;
+  z-index: 1;
+}
+
 .table-card__range {
   font-size: 12px;
   font-weight: 600;

package/components/EquipmentItemMain.vue

@@ -2,7 +2,7 @@
   <v-row no-gutters align="center" justify="center">
     <v-col cols="12" lg="12">
       <TableMain
-        :title="`${siteName} Units`"
+        :title="`${siteName} Equipment Items`"
         :items="items"
         :headers="headers"
         :loading="loading"

package/components/EquipmentManagementMain.vue

@@ -2,7 +2,7 @@
   <v-row no-gutters align="center" justify="center">
     <v-col cols="12" lg="12">
       <TableMain
-        :title="`${siteName} Units`"
+        :title="`${siteName} Equipment`"
         :items="items"
         :headers="headers"
         :loading="loading"

package/components/TableMain.vue

@@ -15,6 +15,24 @@
 -->
 <template>
   <v-row no-gutters>
+    <!--
+      THE DESIGN'S PAGE TITLE (Phase 9).
+
+      The design opens every screen with a 22px/800 heading. This shared table
+      card is mounted by 17 module screens, and none of them had one - four of
+      them (Units, Areas, Equipment Item, Equipment Management) were already
+      PASSING `:title` to this component, which had no `title` prop, so the
+      string was landing on the root element as a plain HTML `title` attribute:
+      a browser tooltip nobody asked for. It now draws the heading it was
+      always meant to draw.
+
+      Placement only. No caller changes, no slot moves, no behaviour: a screen
+      that passes no title renders exactly what it rendered before.
+    -->
+    <v-col cols="12" v-if="title">
+      <PageHeader :title="title" />
+    </v-col>
+
     <!-- Top Actions -->
     <v-col cols="12" class="mb-2" v-if="canCreate || $slots.actions">
       <v-row no-gutters>
@@ -62,43 +80,56 @@
 
     <!-- Table Card -->
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="flat"
-        class="table-card"
-        :loading="loading"
-      >
+      <!--
+        THE DESIGN'S CARD AND ITS IN-CARD TOP ROW (Phase 9).
+
+        Was a `v-card` + `v-toolbar`. `v-card` brings its own radius, elevation
+        and surface at a specificity a class has to fight, and `v-toolbar` puts
+        its `extension` on a SECOND stacked row. `AppCard` + `CardToolbar` are
+        the primitives the design is drawn with, already proven on
+        `ServiceProviderMain` / `MemberMain`.
+
+        Placement only. The refresh button, the `prepend-additional` slot, the
+        page range, the pager, the `extension` slot and the `footer` slot are
+        the same controls, emitting the same events, in the same order. The
+        `loading` bar `v-card` used to draw is drawn explicitly so a loading
+        screen still says so.
+      -->
+      <AppCard class="table-card">
+        <v-progress-linear
+          v-if="loading"
+          indeterminate
+          height="2"
+          class="table-card__loading"
+        />
+
         <!-- Toolbar -->
-        <v-toolbar
-          density="compact"
-          color="transparent"
-          class="table-card__toolbar"
-          :extension-height="extensionHeight"
-        >
-          <template #prepend>
+        <CardToolbar :count="pageRange">
+          <template #left>
             <v-btn fab icon density="comfortable" variant="text" @click="emits('refresh')">
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
             <slot name="prepend-additional" />
           </template>
 
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 table-card__range">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="internalPage"
-                :length="pages"
-                @update:value="emits('update:page', internalPage)"
-              />
-            </v-row>
+          <template #right>
+            <local-pagination
+              v-model="internalPage"
+              :length="pages"
+              @update:value="emits('update:page', internalPage)"
+            />
           </template>
+        </CardToolbar>
 
-          <template v-if="$slots.extension" #extension>
-            <slot name="extension" />
-          </template>
-        </v-toolbar>
+        <!--
+          The callers' `extension` is a FILTER row (selects, date ranges), not
+          tabs - it is full-width by construction, so it keeps its own line
+          under the toolbar rather than being folded into it, which would push
+          the pager off the end of the row.
+        -->
+        <div v-if="$slots.extension" class="table-card__extension">
+          <slot name="extension" />
+        </div>
 
         <!-- Data Table -->
         <v-data-table
@@ -129,13 +160,18 @@
           </template>
         </v-data-table>
         <slot name="footer" />
-      </v-card>
+      </AppCard>
     </v-col>
   </v-row>
 </template>
 
 <script lang="ts" setup>
 const props = defineProps({
+  // The design's page heading. Empty = no heading, i.e. exactly today's markup.
+  title: {
+    type: String,
+    default: "",
+  },
   headers: {
     type: Array as PropType<Array<Record<string, any>>>,
     required: true,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.93",
+  "version": "3.2.2-staging.94",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {