@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/DashboardPanel.vue

@@ -1,31 +1,37 @@
+<!--
+  THE DASHBOARD PANEL.
+
+  The `isPropertyMode` branch of DashboardMain already draws its panels the
+  design's way, inline: a `.dashboard-card` surface carrying `.figma-panel`
+  padding, a header whose `h2` is the card title and whose action is a bare
+  text affordance, then the body. This component is what the OTHER two
+  branches use, and it was still a `v-card` with Vuetify typography - which is
+  why the same dashboard looked new for property-management and old for the
+  five service verticals.
+
+  So it now draws that same construction, with the property branch's literal
+  values, on `AppCard`. Copied here rather than reached for across components:
+  the `.figma-*` rules are global to DashboardMain, and depending on a
+  sibling's stylesheet is how a panel silently loses its padding later.
+-->
 <template>
-  <v-card
-    flat
-    border
-    rounded="lg"
-    class="d-flex flex-column w-100"
-    style="min-height: 200px"
-  >
-    <div class="d-flex align-center justify-space-between pa-5 pb-3">
-      <h2 class="text-body-1 font-weight-black text-blue-grey-darken-4 mb-0">
-        {{ title }}
-      </h2>
-      <v-btn
+  <AppCard class="dashboard-panel">
+    <div class="dashboard-panel__header">
+      <h2>{{ title }}</h2>
+      <button
         v-if="actionLabel"
-        variant="text"
-        color="primary"
-        size="small"
-        class="text-none font-weight-bold"
+        class="dashboard-panel__action"
+        type="button"
         @click="$emit('action')"
       >
         {{ actionLabel }}
-      </v-btn>
+      </button>
     </div>
 
-    <div class="flex-1-1-100 overflow-y-auto pa-5 pt-0" style="max-height: 400px">
+    <div class="dashboard-panel__body">
       <slot />
     </div>
-  </v-card>
+  </AppCard>
 </template>
 
 <script setup lang="ts">
@@ -36,9 +42,66 @@ defineProps({
   },
   actionLabel: {
     type: String,
-    default: '',
+    default: "",
   },
 });
 
-defineEmits(['action']);
+defineEmits(["action"]);
 </script>
+
+<style scoped>
+/* `.dashboard-card` + `.dashboard-panel` + `.figma-panel`, resolved: the
+   figma layer wins the shadow and the padding, so the panel is a flat 14px
+   card at 26px/28px/24px and 276px tall. */
+.dashboard-panel {
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-sans);
+  height: 100%;
+  min-height: 276px;
+  padding: 26px 28px 24px;
+  width: 100%;
+}
+
+.dashboard-panel__header {
+  align-items: center;
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  min-height: 18px;
+}
+
+/* The panel heading is the design's card title: 15.5px/800, sentence case. */
+.dashboard-panel__header h2 {
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  letter-spacing: 0;
+  line-height: 1.2;
+  margin: 0;
+  text-transform: none;
+}
+
+/* Not an AppButton: the design's panel action is a text affordance, 12px/800
+   with no box - the same one the property branch already ships. */
+.dashboard-panel__action {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: rgb(var(--v-theme-primary));
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.dashboard-panel__body {
+  flex: 1;
+  margin-top: 20px;
+  min-width: 0;
+}
+</style>

package/components/DeliveryCompany.vue

@@ -1,22 +1,27 @@
 <template>
     <v-row no-gutters class="pa-3">
         <v-col cols="12">
-            <v-card width="100%" variant="outlined" border="thin" rounded="lg" max-width="700" max-height="500"
-                style="overflow-y: auto;">
-                <v-toolbar density="compact" color="grey-lighten-4 pl-2 pr-4">
-                    <v-row v-if="!hideTitle" no-gutters class="px-3 font-weight-bold">
-                        Delivery Companies
-                    </v-row>
+            <AppCard class="delivery-company__card">
+                <!--
+                  The one toolbar the design puts on top of the card. It was a
+                  hardcoded grey-lighten-4 bar, which stays light in dark mode
+                  and painted as a white slab there.
+                -->
+                <CardToolbar>
+                    <template #left>
+                        <span v-if="!hideTitle" class="screen-card-title">
+                            Delivery Companies
+                        </span>
+                    </template>
 
-                    <template #append>
-                        <v-btn v-if="!props.readOnly" variant="flat" color="primary" class="text-none"
-                            @click="handleAdd">
+                    <template #right>
+                        <AppButton v-if="!props.readOnly" @click="handleAdd">
                             Add
-                        </v-btn>
+                        </AppButton>
                     </template>
-                </v-toolbar>
+                </CardToolbar>
 
-                <v-card-text class="pa-0" style="min-height: 100px;">
+                <div class="pa-0" style="min-height: 100px;">
                     <template v-if="companies.length > 0">
                         <draggable :list="companies" item-key="index" class="drag-area"
                             :disabled="editingIndex !== null">
@@ -60,11 +65,11 @@
                         </draggable>
                     </template>
 
-                    <div v-else class="text-center py-5">
+                    <div v-else class="screen-empty text-center py-5">
                         No delivery companies added yet.
                     </div>
-                </v-card-text>
-            </v-card>
+                </div>
+            </AppCard>
         </v-col>
 
         <v-dialog v-model="dialog.add" persistent width="450">
@@ -82,12 +87,13 @@
                 </v-card-text>
 
                 <v-toolbar>
-                    <v-row no-gutters justify="end" align="center" class="px-5">
-                        <v-btn variant="text" text="Cancel" @click="dialog.add = false" />
-                        <v-btn variant="flat" color="primary" class="text-none ml-2"
-                            @click="saveEdit(companies.length)">
+                    <v-row no-gutters justify="end" align="center" class="px-5 ga-2">
+                        <AppButton variant="ghost" @click="dialog.add = false">
+                            Cancel
+                        </AppButton>
+                        <AppButton @click="saveEdit(companies.length)">
                             Add
-                        </v-btn>
+                        </AppButton>
                     </v-row>
                 </v-toolbar>
             </v-card>
@@ -237,4 +243,12 @@ watch(initialCompanies, (val) => {
 .drag-handle {
     cursor: grab;
 }
+
+/* The size cap the v-card carried as max-width/max-height attributes, kept
+   verbatim so the panel does not grow to the full page width. */
+.delivery-company__card {
+    max-width: 700px;
+    max-height: 500px;
+    overflow-y: auto;
+}
 </style>

package/components/Dialog/DeleteConfirmation.vue

@@ -1,30 +1,29 @@
 <template>
-    <v-card width="100%" :disabled="loading" :loading="loading">
-        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
-            <span> {{ promptTitle }}</span>
+    <v-card class="screen-modal" width="100%" :disabled="loading" :loading="loading">
+        <v-card-text class="screen-modal__body pa-5 my-5 px-7 text-center">
+            <span class="screen-card-title"> {{ promptTitle }}</span>
 
-            <div v-if="message" class="text-error  mt-2">
+            <!-- `text-error` is Vuetify's own class over `--v-theme-error`,
+                 which is the design's `--err` in both themes - already a token,
+                 so it stays. -->
+            <div v-if="message" class="text-error mt-2">
                 {{ message }} Do you want to delete anyway?
             </div>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
-            <v-row no-gutters>
-                <v-col cols="6" class="pa-0">
-                    <v-btn block variant="text" class="text-none" size="large" tile @click="emit('close')"
-                        height="48">
-                        Cancel
-                    </v-btn>
-                </v-col>
+        <!-- The design's footer: two equal-width buttons, ghost then primary,
+             on a bordered strip. The handoff draws no destructive variant, so
+             the confirming action takes the primary shape like every other
+             modal's Submit. -->
+        <div class="screen-modal__footer">
+            <v-btn class="screen-btn-ghost" variant="outlined" @click="emit('close')">
+                Cancel
+            </v-btn>
 
-                <v-col cols="6" class="pa-0">
-                    <v-btn block tile variant="flat" class="text-none" size="large" height="48" color="black"
-                        @click="emit('delete')">
-                        Delete
-                    </v-btn>
-                </v-col>
-            </v-row>
-        </v-toolbar>
+            <v-btn class="screen-btn-primary" variant="flat" @click="emit('delete')">
+                Delete
+            </v-btn>
+        </div>
     </v-card>
 </template>
 
@@ -48,4 +47,4 @@ const emit = defineEmits(["close", "delete"])
 
 </script>
 
-<style scoped></style>
+<style scoped></style>

package/components/Dialog/ReplaceAutofillPrompt.vue

@@ -1,32 +1,25 @@
 <template>
-    <v-card width="100%" :disabled="loading" :loading="loading">
-        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
-            <v-row no-gutters>
-                <v-col cols="12" class="font-weight-bold text-h6">{{ promptTitle }}</v-col>
-                <v-col cols="12" class="mt-5">
-                    <span>
-                        By proceeding, your previous user inputs will be replaced.
-                    </span>
-                </v-col>
-            </v-row>
+    <v-card class="screen-modal" width="100%" :disabled="loading" :loading="loading">
+        <v-card-text class="screen-modal__body pa-5 my-5 px-7 text-center">
+            <span class="screen-card-title d-block">{{ promptTitle }}</span>
+
+            <span class="d-block mt-5">
+                By proceeding, your previous user inputs will be replaced.
+            </span>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
-            <v-row no-gutters>
-                <v-col cols="6" class="pa-0">
-                    <v-btn block variant="text" class="text-none" size="large" tile @click="emit('close')" height="48">
-                        Cancel
-                    </v-btn>
-                </v-col>
+        <!-- The design's footer: two equal-width buttons, ghost then primary,
+             on a bordered strip. Replaces the `v-toolbar` of two square 48px
+             tiles, whose Proceed was a hardcoded `color="black"` fill. -->
+        <div class="screen-modal__footer">
+            <v-btn class="screen-btn-ghost" variant="outlined" @click="emit('close')">
+                Cancel
+            </v-btn>
 
-                <v-col cols="6" class="pa-0">
-                    <v-btn block tile variant="flat" class="text-none" size="large" height="48" color="black"
-                        @click="emit('proceed')">
-                        Proceed
-                    </v-btn>
-                </v-col>
-            </v-row>
-        </v-toolbar>
+            <v-btn class="screen-btn-primary" variant="flat" @click="emit('proceed')">
+                Proceed
+            </v-btn>
+        </div>
     </v-card>
 </template>
 
@@ -46,4 +39,4 @@ const emit = defineEmits(["close", "proceed"])
 
 </script>
 
-<style scoped></style>
+<style scoped></style>

package/components/Dialog/ReusablePrompt.vue

@@ -1,34 +1,35 @@
 <template>
-    <v-card width="100%" :disabled="loading" :loading="loading">
-        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
-            <v-row no-gutters>
-                <v-col cols="12" class="text-h6 font-weight-bold">
-                    <span class=""> {{ promptTitle }}</span>
-                </v-col>
-                <v-col v-if="message" cols="12" class="mt-5">
-                    <span  >
-                        {{ message }}
-                    </span>
-                </v-col>
-            </v-row>
+    <v-card class="screen-modal" width="100%" :disabled="loading" :loading="loading">
+        <v-card-text class="screen-modal__body pa-5 my-5 px-7 text-center">
+            <span class="screen-card-title d-block">{{ promptTitle }}</span>
+
+            <span v-if="message" class="d-block mt-5">
+                {{ message }}
+            </span>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
-            <v-row no-gutters>
-                <v-col cols="6" class="pa-0">
-                    <v-btn block variant="text" class="text-none" size="large" tile @click="emit('close')" height="48">
-                        Cancel
-                    </v-btn>
-                </v-col>
+        <!-- The design's footer: two equal-width buttons, ghost then primary,
+             on a bordered strip. -->
+        <div class="screen-modal__footer">
+            <v-btn class="screen-btn-ghost" variant="outlined" @click="emit('close')">
+                Cancel
+            </v-btn>
+
+            <!-- The old default was a hardcoded `color="black"` fill, which is
+                 the same black on the dark theme as on the light one. With no
+                 colour asked for, the confirming action now takes the design's
+                 primary shape like every other modal's Submit.
 
-                <v-col cols="6" class="pa-0">
-                    <v-btn block tile variant="flat" class="text-none" size="large" height="48"
-                        :color="confirmButtonColor" @click="emit('proceed')">
-                        {{ confirmLabel }}
-                    </v-btn>
-                </v-col>
-            </v-row>
-        </v-toolbar>
+                 A caller that DOES name a colour keeps it: `NumberSettingField`
+                 passes `red` to mark a destructive confirm, and the handoff
+                 draws no destructive button, so overriding it here would be
+                 inventing a control the design never named. Left as it renders
+                 today and raised for a design decision. -->
+            <v-btn :class="confirmButtonColor ? 'text-none' : 'screen-btn-primary'"
+                variant="flat" :color="confirmButtonColor || undefined" @click="emit('proceed')">
+                {{ confirmLabel }}
+            </v-btn>
+        </div>
     </v-card>
 </template>
 
@@ -52,7 +53,7 @@ const props = defineProps({
     },
     confirmButtonColor: {
         type: String,
-        default: "black"
+        default: ""
     }
 
 })
@@ -61,4 +62,4 @@ const emit = defineEmits(["close", "proceed"])
 
 </script>
 
-<style scoped></style>
+<style scoped></style>

package/components/Dialog/UpdateMoreAction.vue

@@ -1,71 +1,67 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <template v-if="$slots.header">
-        <slot name="header" :title="title" :onClose="onClose" />
-      </template>
-      <template v-else>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h5 text-capitalize">{{
-            title
-          }}</span>
-        </v-row>
-      </template>
-    </v-toolbar>
+  <!-- The shared detail sheet several list screens open a row into. Its title
+       row and its footer were both `v-toolbar`s - fixed grey slabs that stay
+       grey on the dark theme - and the footer's action was a hardcoded
+       `color="black"` fill. -->
+  <v-card class="screen-modal" width="100%">
+    <template v-if="$slots.header">
+      <slot name="header" :title="title" :onClose="onClose" />
+    </template>
+    <v-card-title v-else class="text-capitalize">{{ title }}</v-card-title>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0" :class="contentNoPadding ? 'pa-0' : ''">
+    <v-card-text class="screen-modal__body pb-0" :class="contentNoPadding ? 'pa-0' : ''">
       <slot name="content" />
     </v-card-text>
 
-    <v-toolbar class="pa-0" density="compact">
-      <v-row no-gutters>
-        <v-col :cols="(canUpdate || canDelete) ? 6 : 12" class="pa-0">
+    <!-- The design's footer strip: equal-width buttons, ghost then primary. -->
+    <div class="screen-modal__footer">
+      <v-btn
+        variant="outlined"
+        class="screen-btn-ghost"
+        @click="emit('close')"
+      >
+        Close
+      </v-btn>
+
+      <v-menu v-if="canUpdate || canDelete" contained>
+        <template #activator="{ props }">
           <v-btn
-            block
-            variant="text"
-            class="text-none"
-            size="large"
-            @click="emit('close')"
-            height="48"
+            variant="flat"
+            class="screen-btn-primary"
+            :disabled="disabled"
+            v-bind="props"
           >
-            Close
+            More actions
           </v-btn>
-        </v-col>
-
-        <v-col v-if="canUpdate || canDelete" cols="6" class="pa-0" >
-          <v-menu contained>
-            <template #activator="{ props }">
-              <v-btn
-                block
-                variant="flat"
-                color="black"
-                class="text-none"
-                height="48"
-                :disabled="disabled"
-                v-bind="props"
-                tile
-              >
-                More actions
-              </v-btn>
-            </template>
+        </template>
 
-            <v-list class="pa-0">
-              <v-list-item v-if="canUpdate" @click="emit('edit')">
-                <v-list-item-title class="text-subtitle-2">
-                  {{ editButtonLabel }}
-                </v-list-item-title>
-              </v-list-item>
+        <!-- The dropdown itself is left as Vuetify draws it: the handoff
+             specifies the PROFILE dropdown (240px, 14px radius) and mentions a
+             per-row kebab menu without giving it a shape, and this menu opens
+             on a click the harness cannot drive, so it could not be
+             render-verified either. Only the row type and the destructive ink
+             change. -->
+        <v-list class="pa-0 update-more__list">
+          <v-list-item v-if="canUpdate" @click="emit('edit')">
+            <v-list-item-title>
+              {{ editButtonLabel }}
+            </v-list-item-title>
+          </v-list-item>
 
-              <v-list-item v-if="canDelete" @click="emit('delete')" class="text-red">
-                <v-list-item-title class="text-subtitle-2">
-                  {{ deleteButtonLabel }}
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+          <!-- `text-red` was Vuetify's fixed #f44336, the same red on both
+               themes. `text-error` is Vuetify's own class over
+               `--v-theme-error`, which IS the design's `--err`. The handoff's
+               one documented destructive treatment is the profile menu's
+               Logout row: "red Logout row (err color, err-bg hover)" - ink,
+               not a filled button - so this row follows it exactly. -->
+          <v-list-item v-if="canDelete" @click="emit('delete')" class="text-error">
+            <v-list-item-title>
+              {{ deleteButtonLabel }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </div>
   </v-card>
 </template>
 
@@ -105,4 +101,11 @@ const emit = defineEmits(["close", "edit", "delete"]);
 const { canUpdate, editButtonLabel, deleteButtonLabel, title, disabled } = prop;
 </script>
 
-<style scoped></style>
+<style scoped>
+/* `text-subtitle-2` was Vuetify's 0.875rem/500; the handoff names no type for
+   a menu row, so it takes the established cell type. */
+.update-more__list :deep(.v-list-item-title) {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+}
+</style>

package/components/DocumentForm.vue

@@ -1,13 +1,8 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5 text-capitalize">
-          {{ prop.mode }} Document
-        </span>
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
+  <v-card width="100%" class="screen-modal">
+    <v-card-title class="text-capitalize">{{ prop.mode }} Document</v-card-title>
+
+    <v-card-text class="screen-modal__body pa-0">
       <v-form v-model="validForm" :disabled="disable">
         <v-col cols="12" class="px-6">
           <InputLabel class="text-capitalize" title="Document Attachment" />
@@ -24,6 +19,7 @@
           <InputLabel class="text-capitalize" title="Document Name" />
           <v-text-field
             v-model.trim="document.name"
+            class="filter-field"
             density="comfortable"
           ></v-text-field>
         </v-col>
@@ -42,15 +38,15 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar density="compact">
+    <!-- Was a `v-toolbar`: a grey slab with square (`tile`) buttons and a
+         hardcoded `color="black"` primary. The gate on Submit is unchanged. -->
+    <v-card-actions class="screen-modal__footer">
       <v-row no-gutters>
-        <v-col cols="6">
+        <v-col cols="6" class="pr-2">
           <v-btn
-            tile
             block
-            variant="text"
-            class="text-none"
-            size="48"
+            variant="outlined"
+            class="text-none screen-btn-ghost"
             @click="cancel"
             :disabled="disable"
           >
@@ -58,14 +54,11 @@
           </v-btn>
         </v-col>
 
-        <v-col cols="6">
+        <v-col cols="6" class="pl-2">
           <v-btn
-            tile
             block
             variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
+            class="text-none screen-btn-primary"
             :disabled="
               !validForm ||
               disable ||
@@ -79,7 +72,7 @@
           </v-btn>
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
   </v-card>
 </template>
 <script setup lang="ts">