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

package/components/AppField.vue

@@ -0,0 +1,76 @@
+<!--
+  THE TEXT FIELD.
+
+  40px (34px compact), 10px radius, a 1px border, 13.5px/500 - and the label
+  OUTSIDE the box as a small muted word, not Vuetify's outlined field with a
+  label that floats up through the border. A native `<input>`, so the browser
+  keeps the keyboard, autofill and accessibility for free.
+-->
+<template>
+  <label
+    v-bind="rootAttrs"
+    class="app-field"
+    :class="[{ 'app-field--compact': compact, 'app-field--search': search }, klass]"
+  >
+    <v-icon
+      v-if="icon || search"
+      class="app-field__icon"
+      :icon="icon || 'mdi-magnify'"
+      size="18"
+    />
+    <span v-if="label" class="app-field__label">{{ label }}</span>
+    <input
+      class="app-field__input"
+      v-bind="inputAttrs"
+      :type="type"
+      :value="model"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      @input="model = ($event.target as HTMLInputElement).value"
+    />
+    <!-- A trailing control INSIDE the box: the password reveal on the HID PIN,
+         SIP password and reader password fields. The handoff draws no password
+         field at all, so the eye is this product's, not the design's - but it
+         belongs in one place rather than being re-hacked in three screens. -->
+    <slot name="trailing" />
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+/**
+ * The root is a `<label>`, so an `aria-label`, `inputmode` or `autocomplete`
+ * left to fall through would land on the LABEL and never reach the input -
+ * silently costing the field its accessible name. `class` and `style` still
+ * belong on the root (that is what every existing caller styles), so the two
+ * are split rather than moved wholesale.
+ */
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const rootAttrs = computed(() => ({ class: attrs.class, style: attrs.style }));
+const inputAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs;
+  return rest;
+});
+
+const model = defineModel({ type: String, default: "" });
+
+defineProps({
+  label: { type: String, default: "" },
+  placeholder: { type: String, default: "" },
+  icon: { type: String, default: "" },
+  type: { type: String, default: "text" },
+  /** The design's search field: a magnifier and `flex:1` in a filter row. */
+  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/AppKpiTile.vue

@@ -0,0 +1,65 @@
+<!--
+  THE KPI TILE.
+
+  The handoff's tile is three rows: the soft icon square AND the uppercase
+  label together on the first, the big tabular number with its percentage pill
+  BESIDE it on the second, the sub-line on the third. The product had the icon
+  alone on a row of its own, the label under it, and the pill stranded at the
+  bottom next to the sub-line - the same figures in a different shape.
+
+  It draws what it is given and nothing else: no fetch, no formatting, no
+  threshold logic. `#action` is the far end of the first row (a filter menu, a
+  "View All"); `#default`, when given, replaces the figure rows entirely for
+  the tiles that list items instead of counting them.
+-->
+<template>
+  <AppCard class="app-kpi d-flex flex-column flex-grow-1">
+    <div class="app-kpi__head">
+      <span
+        v-if="icon"
+        class="app-kpi__icon"
+        :style="tint ? { backgroundColor: tint } : undefined"
+      >
+        <v-icon :icon="icon" :color="color || undefined" size="19" />
+      </span>
+
+      <span class="app-kpi__label">{{ label }}</span>
+
+      <span v-if="$slots.action" class="app-kpi__action">
+        <slot name="action" />
+      </span>
+    </div>
+
+    <slot>
+      <div class="app-kpi__figure">
+        <span class="app-kpi__value">{{ value }}</span>
+
+        <span
+          v-if="chip"
+          class="app-kpi__chip"
+          :class="{ 'app-kpi__chip--down': down }"
+        >
+          {{ chip }}
+        </span>
+      </div>
+
+      <div v-if="sub" class="app-kpi__sub">{{ sub }}</div>
+    </slot>
+  </AppCard>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  icon: { type: String, default: "" },
+  /** The icon square's soft fill - a token-derived colour from the caller. */
+  tint: { type: String, default: "" },
+  color: { type: String, default: "" },
+  label: { type: String, default: "" },
+  value: { type: [String, Number], default: "" },
+  /** The percentage pill's text, already formatted by the caller. */
+  chip: { type: String, default: "" },
+  /** Draws the pill in the error tone rather than the success one. */
+  down: { type: Boolean, default: false },
+  sub: { type: String, default: "" },
+});
+</script>

package/components/AppSegmented.vue

@@ -0,0 +1,38 @@
+<!--
+  THE SEGMENTED CONTROL - `Today | Week | Month`.
+
+  A tray of plain `<button>`s, not a `v-btn-toggle`. The toggle brings its own
+  height scale, dividers, ripple and overlay layer, and its selected state is
+  drawn from `on-surface` - which is why the product's selected segment reads
+  grey where the design fills it with the accent.
+
+  Selection only: it writes the same `v-model` the toggle wrote, and the value
+  set is whatever the caller passes. No behaviour is added here.
+-->
+<template>
+  <div class="app-seg" role="group">
+    <button
+      v-for="option in options"
+      :key="String(option.value)"
+      type="button"
+      class="app-seg__item"
+      :class="{ 'app-seg__item--on': model === option.value }"
+      :aria-pressed="model === option.value"
+      @click="model = option.value"
+    >
+      {{ option.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  /** `{ label, value }` - the same option list the toggle was given. */
+  options: {
+    type: Array as PropType<Array<{ label: string; value: any }>>,
+    default: () => [],
+  },
+});
+
+const model = defineModel<any>({ default: "" });
+</script>

package/components/AppSelect.vue

@@ -0,0 +1,247 @@
+<!--
+  THE SELECT.
+
+  The handoff draws it as the text field with the filter's name in muted 12px
+  on the left, the chosen value next to it and a chevron on the right. Both
+  single and multiple values use the same themed popover, so the option list
+  does not fall back to the browser/OS styling.
+
+  `multiple` is the ONE case where native is the wrong answer. A native
+  `<select multiple>` is not a dropdown at all - it is an always-open scrolling
+  LIST BOX - so adopting it would turn the daily filter bars into list boxes
+  and change how the staff work. So multi opens a POPOVER in the same field
+  chrome, with the chosen values as the design's soft removable pills.
+
+  A single-value consumer that does not use `return-object` still emits the
+  same string that the old native `<select>` emitted.
+-->
+<template>
+  <v-menu
+    v-if="!multiple"
+    :close-on-content-click="true"
+    :disabled="disabled"
+    location="bottom start"
+    offset="4"
+  >
+    <template #activator="{ props: activator }">
+      <div
+        v-bind="{ ...activator, ...$attrs }"
+        class="app-field app-select app-select--single"
+        :class="{ 'app-field--compact': compact, 'app-select--disabled': disabled }"
+        role="button"
+        :aria-disabled="disabled"
+        :tabindex="disabled ? -1 : 0"
+      >
+        <span v-if="label" class="app-field__label">{{ label }}</span>
+        <span
+          class="app-select__single-value"
+          :class="{ 'app-select__placeholder': !hasSingleValue }"
+        >
+          {{ singleDisplay }}
+        </span>
+        <button
+          v-if="clearable && hasSingleValue"
+          type="button"
+          class="app-select__clear"
+          aria-label="Clear"
+          @click.stop="clearSingle"
+        >
+          <v-icon icon="mdi-close-circle" size="15" />
+        </button>
+        <v-icon class="app-field__icon" icon="mdi-chevron-down" size="17" />
+      </div>
+    </template>
+
+    <div class="app-select__menu" role="listbox">
+      <button
+        v-for="opt in normalized"
+        :key="String(opt.value)"
+        type="button"
+        class="app-select__option"
+        :class="{ 'app-select__option--selected': isSingleOn(opt) }"
+        role="option"
+        :aria-selected="isSingleOn(opt)"
+        @click="selectSingle(opt)"
+      >
+        <span class="app-select__option-text">{{ opt.title }}</span>
+        <v-icon v-if="isSingleOn(opt)" icon="mdi-check" size="17" />
+      </button>
+    </div>
+  </v-menu>
+
+  <v-menu
+    v-else
+    :close-on-content-click="false"
+    :disabled="disabled"
+    location="bottom start"
+    offset="4"
+  >
+    <template #activator="{ props: activator }">
+      <div
+        v-bind="{ ...activator, ...$attrs }"
+        class="app-field app-select"
+        :class="{ 'app-field--compact': compact, 'app-select--disabled': disabled }"
+        role="button"
+        :aria-disabled="disabled"
+        :tabindex="disabled ? -1 : 0"
+      >
+        <span v-if="label" class="app-field__label">{{ label }}</span>
+        <span class="app-select__values">
+          <StatusChip
+            v-for="opt in selectedOptions"
+            :key="String(opt.value)"
+            tone="neutral"
+            pill
+            :dot="false"
+          >
+            {{ opt.title }}
+            <button
+              type="button"
+              class="app-select__x"
+              :aria-label="`Remove ${opt.title}`"
+              @click.stop="toggle(opt)"
+            >
+              <v-icon icon="mdi-close" size="12" />
+            </button>
+          </StatusChip>
+          <span v-if="!selectedOptions.length" class="app-select__placeholder">
+            {{ placeholder }}
+          </span>
+        </span>
+        <button
+          v-if="clearable && selectedOptions.length"
+          type="button"
+          class="app-select__clear"
+          aria-label="Clear"
+          @click.stop="clear"
+        >
+          <v-icon icon="mdi-close-circle" size="15" />
+        </button>
+        <v-icon class="app-field__icon" icon="mdi-chevron-down" size="17" />
+      </div>
+    </template>
+
+    <div class="app-select__menu">
+      <button
+        v-for="opt in normalized"
+        :key="String(opt.value)"
+        type="button"
+        class="app-select__option"
+        :aria-pressed="isOn(opt)"
+        @click="toggle(opt)"
+      >
+        <v-icon
+          class="app-select__box"
+          :class="{ 'app-select__box--on': isOn(opt) }"
+          :icon="isOn(opt) ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline'"
+          size="17"
+        />
+        <span class="app-select__option-text">{{ opt.title }}</span>
+      </button>
+    </div>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+/* `v-menu` has no single root node, so attributes and classes have to be put
+   on each activator by hand. */
+defineOptions({ inheritAttrs: false });
+
+/*
+ * One model for both shapes: a string when single, an array when multiple.
+ * The default stays `""` so an existing single consumer that never sets its
+ * v-model starts on the same empty string it starts on today.
+ */
+const model = defineModel<any>({ default: "" });
+
+const props = defineProps({
+  label: { type: String, default: "" },
+  /** Strings, or the `{ title, value }` shape `v-select` already takes. */
+  items: { type: Array as PropType<any[]>, default: () => [] },
+  itemTitle: { type: String, default: "title" },
+  itemValue: { type: String, default: "value" },
+  compact: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  /** Popover multi-select with removable pills. Never a native list box. */
+  multiple: { type: Boolean, default: false },
+  /** Emit the source item rather than its `itemValue`. */
+  returnObject: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: false },
+  placeholder: { type: String, default: "" },
+});
+
+const normalized = computed(() =>
+  props.items.map((item: any) =>
+    typeof item === "object" && item !== null
+      ? { title: item[props.itemTitle], value: item[props.itemValue], raw: item }
+      : { title: String(item), value: item, raw: item }
+  )
+);
+
+/* A model entry is either the plain value or - under `return-object` - the
+   source item, so everything compares on this one key. */
+const keyOf = (v: any) =>
+  String(v !== null && typeof v === "object" ? v[props.itemValue] : v);
+
+/* ---- single ---------------------------------------------------------- */
+
+const hasSingleValue = computed(
+  () => model.value !== "" && model.value !== null && model.value !== undefined
+);
+
+const selectedSingleOption = computed(() =>
+  normalized.value.find((opt) => String(opt.value) === keyOf(model.value))
+);
+
+const singleDisplay = computed(() =>
+  hasSingleValue.value
+    ? selectedSingleOption.value?.title ?? keyOf(model.value)
+    : props.placeholder
+);
+
+const isSingleOn = (opt: any) =>
+  hasSingleValue.value && String(opt.value) === keyOf(model.value);
+
+function selectSingle(opt: any) {
+  if (props.disabled) return;
+  model.value = props.returnObject ? opt.raw : String(opt.value);
+}
+
+function clearSingle() {
+  if (props.disabled) return;
+  model.value = "";
+}
+
+/* ---- multiple -------------------------------------------------------- */
+
+const selected = computed<any[]>(() =>
+  Array.isArray(model.value) ? model.value : []
+);
+
+const selectedKeys = computed(() => new Set(selected.value.map(keyOf)));
+
+const isOn = (opt: any) => selectedKeys.value.has(String(opt.value));
+
+/* Fall back to the raw key when a chosen value is not in `items` - an async
+   item list can arrive after the model does, and the chip must still print. */
+const selectedOptions = computed(() =>
+  selected.value.map(
+    (v) =>
+      normalized.value.find((o) => String(o.value) === keyOf(v)) ?? {
+        title: keyOf(v),
+        value: keyOf(v),
+      }
+  )
+);
+
+function toggle(opt: any) {
+  if (props.disabled) return;
+  model.value = isOn(opt)
+    ? selected.value.filter((v) => keyOf(v) !== String(opt.value))
+    : [...selected.value, props.returnObject ? opt.raw : opt.value];
+}
+
+function clear() {
+  model.value = [];
+}
+</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/AreaChecklistHistoryMain.vue

@@ -32,11 +32,12 @@
 
         <template #extension>
           <v-row no-gutters class="w-100 d-flex flex-column">
-            <v-card
-              class="w-100 px-3 d-flex align-center ga-5 py-2"
-              flat
-              :height="60"
-            >
+            <!--
+              A bare `v-card` here paints Vuetify's own `surface`, a shade off
+              the table card it sits inside. A plain row on the card's own
+              background, with both filters on the design's field.
+            -->
+            <div class="w-100 filter-bar d-flex align-center ga-5">
               <v-text-field
                 v-model="searchInput"
                 density="compact"
@@ -45,6 +46,7 @@
                 max-width="300"
                 append-inner-icon="mdi-magnify"
                 hide-details
+                class="filter-field"
               />
               <v-select
                 v-model="status"
@@ -55,8 +57,9 @@
                 clearable
                 hide-details
                 max-width="200"
+                class="filter-field"
               />
-            </v-card>
+            </div>
           </v-row>
         </template>
 
@@ -80,7 +83,11 @@
           </div>
         </template>
         <template #item.status="{ value }">
-          <v-chip class="text-capitalize">{{ value || "No Status" }}</v-chip>
+          <StatusChip
+            class="text-capitalize"
+            :status="value"
+            :label="value || 'No Status'"
+          />
         </template>
       </TableMain></v-col
     >