@7365admin1/layer-common 3.2.2-staging.100 → 3.2.2-staging.101

package/components/AppField.vue

@@ -24,6 +24,7 @@
       :value="model"
       :placeholder="placeholder"
       :disabled="disabled"
+      :readonly="readonly"
       @input="model = ($event.target as HTMLInputElement).value"
     />
   </label>
@@ -41,6 +42,10 @@ defineProps({
   search: { type: Boolean, default: false },
   compact: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
+  /** A field that prints a derived value - a preview, a computed reference -
+      and is not typed into. Kept distinct from `disabled`, which also greys
+      the box and takes it out of the tab order. */
+  readonly: { type: Boolean, default: false },
   klass: { type: String, default: "" },
 });
 </script>

package/components/AreaChecklistHistoryLogs.vue

@@ -1,28 +1,27 @@
 <template>
   <v-row no-gutters align="center" justify="center">
     <v-col cols="12">
-      <v-card class="mx-auto">
-        <v-toolbar
-          density="compact"
-          color="grey-lighten-4"
-          class="d-flex align-center px-4 py-3"
-        >
-          <v-btn icon variant="plain" @click="back()" class="mr-2">
-            <v-icon>mdi-chevron-left</v-icon>
-          </v-btn>
-          <span class="text-h6 font-weight-bold">Area Checklist</span>
-        </v-toolbar>
-
-        <v-divider />
-
-        <v-card-text class="pa-0">
+      <!-- The screen's name and its Back move out of the `grey-lighten-4` bar -
+           a slab that stayed white in dark mode - onto the design's title row.
+           All five service apps mount this component bare, so the layer is the
+           only place the page name can come from. -->
+      <PageHeader title="Area Checklist">
+        <template #actions>
+          <AppButton variant="ghost" icon="mdi-chevron-left" @click="back()">
+            Back
+          </AppButton>
+        </template>
+      </PageHeader>
+
+      <AppCard>
+        <div class="pa-0">
           <v-row no-gutters>
             <v-col
               cols="12"
               md="6"
               lg="5"
               xl="4"
-              style="border-right: 1px solid rgba(0, 0, 0, 0.12)"
+              class="checklist-detail__split"
             >
               <v-row no-gutters class="pa-6">
                 <v-col cols="12" class="mb-4">
@@ -47,11 +46,11 @@
 
                     <v-col cols="12" class="mb-3">
                       <div class="text-body-2 mb-1">Status:</div>
-                      <v-chip
-                        class="text-capitalize text-body-2 font-weight-medium"
-                      >
-                        {{ status || "N/A" }}
-                      </v-chip>
+                      <StatusChip
+                        class="text-capitalize"
+                        :status="status"
+                        :label="status || 'N/A'"
+                      />
                     </v-col>
                   </v-row>
                 </v-col>
@@ -119,15 +118,15 @@
                         class="text-subtitle-2 font-weight-bold px-0"
                       >
                         Set {{ checklistSet.set }}
-                        <v-chip
+                        <StatusChip
                           v-if="checklistSet.isScheduleTask"
-                          size="x-small"
-                          color="info"
-                          variant="tonal"
-                          class="text-none ml-2"
+                          tone="info"
+                          :dot="false"
+                          pill
+                          class="ml-2"
                         >
                           Schedule Task
-                        </v-chip>
+                        </StatusChip>
                       </v-list-subheader>
 
                       <v-list-item
@@ -161,22 +160,14 @@
                             </div>
                           </v-col>
                           <v-col cols="12" sm="2" class="text-right">
-                            <v-chip
-                              :color="
-                                unit.status?.toLowerCase() === 'completed'
-                                  ? 'success'
-                                  : 'grey'
-                              "
-                              :variant="
-                                unit.status?.toLowerCase() === 'completed'
-                                  ? 'flat'
-                                  : 'outlined'
-                              "
-                              size="small"
+                            <!-- Same word decides the colour, only now through the
+                                 shared status map, so "Completed" here is the same
+                                 green as on every other screen. -->
+                            <StatusChip
                               class="text-capitalize"
-                            >
-                              {{ unit.status || "Open" }}
-                            </v-chip>
+                              :status="unit.status || 'Open'"
+                              :label="unit.status || 'Open'"
+                            />
                           </v-col>
                         </v-row>
                       </v-list-item>
@@ -191,8 +182,8 @@
               </v-row>
             </v-col>
           </v-row>
-        </v-card-text>
-      </v-card>
+        </div>
+      </AppCard>
     </v-col>
   </v-row>
 </template>
@@ -242,3 +233,19 @@ const timeOut = ref<string>("N/A");
 const status = ref<string>("N/A");
 const signatureUrl = ref<string>("");
 </script>
+
+<style scoped>
+/* Was an inline `rgba(0,0,0,.12)`, which is the same near-black rule in dark
+   mode. The token follows the theme. At `md` and below the two halves stack, so
+   the rule moves under the first one. */
+.checklist-detail__split {
+  border-bottom: 1px solid var(--border);
+}
+
+@media (min-width: 960px) {
+  .checklist-detail__split {
+    border-bottom: none;
+    border-right: 1px solid var(--border);
+  }
+}
+</style>

package/components/SiteSettingsWorkOrder.vue

@@ -1,33 +1,53 @@
 <template>
-    <v-row no-gutters>
-        <v-expansion-panels multiple v-model="openPanels" >
-
-            <!-- Work Order Settings -->
-            <v-expansion-panel color="primary">
-                <v-expansion-panel-title>
-                    <v-icon class="mr-2">mdi-format-list-numbered</v-icon>
-                    Work Order Settings
-                </v-expansion-panel-title>
-
-                <v-expansion-panel-text>
-                    <v-text-field v-model="prefix" label="Prefix" :disabled="isLoading || !canManageSiteSettings"
-                        @input="handleInput" />
-
-                    <v-select v-model="noOfDigits" :items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" label="No. of Digits"
-                        :disabled="isLoading || !canManageSiteSettings" />
-
-                    <v-text-field v-model="orderNumberPreview" label="Preview" readonly />
-
-                    <v-btn v-if="canManageSiteSettings" class="mt-2" :loading="isLoading" @click="save">
-                        Save
-                    </v-btn>
-                </v-expansion-panel-text>
-            </v-expansion-panel>
-
-        </v-expansion-panels>
-
-        <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
-    </v-row>
+    <div>
+        <!-- The page had no heading of its own: the five service apps mount this
+             component bare on `[org]/[site]/settings`, so the name only ever
+             appeared in the navigation rail. "Settings" is that rail's own label. -->
+        <PageHeader title="Settings" />
+
+        <v-row no-gutters>
+            <!--
+              `multiple` and which panel opens first are BEHAVIOUR, so they are
+              left exactly as they were - `.screen-accordion` only changes the
+              drawing, the same way `SiteSettings` already does it.
+            -->
+            <v-expansion-panels multiple v-model="openPanels" class="screen-accordion">
+
+                <!-- Work Order Settings -->
+                <v-expansion-panel>
+                    <v-expansion-panel-title>
+                        <v-icon class="mr-2">mdi-format-list-numbered</v-icon>
+                        Work Order Settings
+                    </v-expansion-panel-title>
+
+                    <v-expansion-panel-text>
+                        <div class="wo-settings__fields">
+                            <AppField v-model="prefix" label="Prefix"
+                                :disabled="isLoading || !canManageSiteSettings" @input="handleInput" />
+
+                            <!-- `return-object` keeps the emitted value a NUMBER, which is
+                                 what `createWorkOrderSettings` puts on the wire today. -->
+                            <AppSelect v-model="noOfDigits" return-object
+                                :items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" label="No. of Digits"
+                                :disabled="isLoading || !canManageSiteSettings" />
+
+                            <AppField :model-value="orderNumberPreview" label="Preview" readonly />
+                        </div>
+
+                        <!-- Still a `v-btn`: `AppButton` has no loading state, and the
+                             spinner on save is feedback, not decoration. -->
+                        <v-btn v-if="canManageSiteSettings" class="screen-btn-primary text-none mt-4"
+                            variant="flat" :loading="isLoading" @click="save">
+                            Save
+                        </v-btn>
+                    </v-expansion-panel-text>
+                </v-expansion-panel>
+
+            </v-expansion-panels>
+
+            <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
+        </v-row>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -173,4 +193,15 @@ function show(message: string, color: string) {
     toast.message = message
     toast.color = color
 }
-</script>
+</script>
+
+<style scoped>
+/* The design stacks a settings form's fields on one gap, rather than leaning on
+   each Vuetify field's own 22px of hint space. */
+.wo-settings__fields {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-width: 420px;
+}
+</style>

package/components/StockCard.vue

@@ -5,15 +5,18 @@
     color="page-background-color fill-height header-row"
   >
     <v-col cols="12" sm="12" md="11" lg="12" xl="12">
-      <v-row no-gutters class="mb-4">
-        <v-col cols="auto">
-          <v-btn variant="text" color="primary" class="text-none" @click="back">
-            <v-icon left>mdi-arrow-left</v-icon>
+      <!-- The loose Back link above the card becomes the design's title row -
+           the page name on the left, its action right-aligned on the same line.
+           `title` was already declared here and never drawn. -->
+      <PageHeader :title="title">
+        <template #actions>
+          <AppButton variant="ghost" icon="mdi-arrow-left" @click="back">
             Back
-          </v-btn>
-        </v-col>
-      </v-row>
-      <v-card class="pa-5 position-relative rounded-lg">
+          </AppButton>
+        </template>
+      </PageHeader>
+
+      <AppCard class="pa-5 position-relative">
         <!-- Stock Information -->
         <v-row class="pt-2">
           <v-col cols="12">
@@ -104,7 +107,7 @@
             </TableMain>
           </v-col>
         </v-row>
-      </v-card>
+      </AppCard>
     </v-col>
   </v-row>
 </template>
@@ -181,9 +184,11 @@ watchEffect(() => {
 </script>
 
 <style scoped>
-.text-fontgray {
-  color: #7e7e7e;
-}
+/* The scoped `.text-fontgray { color: #7e7e7e }` that used to sit here is gone.
+   It out-specified the layer's tokenised rule in `assets/css/screens.css`, which
+   is why these four field labels were the estate's one measured 4.06:1 - the
+   same fixed grey in both themes. The surface under them is `AppCard`, which is
+   itself tokenised, so the ink can safely follow the theme. */
 
 :deep() .v-table .v-table__wrapper > table > thead > tr > th:not(:last-child) {
   border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));

package/package.json

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