@7365admin1/layer-common 3.2.2-staging.180 → 3.2.2-staging.182

package/assets/css/primitives.css

@@ -631,19 +631,10 @@ button.app-btn--err {
   color: var(--text2);
 }
 
-/* A `<select>` keeps the native menu; only the chrome is ours. */
-select.app-field__input {
-  font-weight: 600;
-  font-size: var(--fs-nav);
-  appearance: none;
-  cursor: pointer;
-}
-
 /*
- * The MULTI select. Native has no dropdown for `multiple` - only an
- * always-open list box - so multi wears the same field chrome as a button and
- * opens a popover. The chosen values are `StatusChip pill tone-neutral`, the
- * soft pill the design already uses and the one whose contrast is measured.
+ * AppSelect wears the same field chrome as a button and opens a themed
+ * popover. Multi values are `StatusChip pill tone-neutral`, the soft pill the
+ * design already uses and the one whose contrast is measured.
  */
 .app-select {
   cursor: pointer;
@@ -655,6 +646,23 @@ select.app-field__input {
   opacity: 0.55;
 }
 
+.app-select--single {
+  min-width: 180px;
+  font-family: inherit;
+  text-align: left;
+}
+
+.app-select__single-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--fs-nav);
+  font-weight: 600;
+  color: var(--text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /*
  * The SAME step for the typed field, which never had one. `AppField` and
  * `AppDateField` both take a `disabled` prop and pass it to the native
@@ -666,8 +674,8 @@ select.app-field__input {
  * filter, on BOTH themes. The field was genuinely dead and read as live.
  *
  * Keyed off the input's own `:disabled` rather than a new modifier class, so
- * it covers `AppField`, `AppDateField` and the native path of `AppSelect`
- * without three templates having to remember to add it. 0.55 is
+ * it covers `AppField` and `AppDateField` without two templates having to
+ * remember to add it. 0.55 is
  * `.app-select--disabled`'s number, not a second one.
  */
 .app-field:has(.app-field__input:disabled) {
@@ -746,6 +754,16 @@ select.app-field__input {
   background: var(--hover);
 }
 
+.app-select__option--selected {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  font-weight: 600;
+}
+
+.app-select__option--selected:hover {
+  background: var(--accent-soft);
+}
+
 .app-select__box {
   color: var(--muted);
   flex: 0 0 auto;
@@ -756,6 +774,7 @@ select.app-field__input {
 }
 
 .app-select__option-text {
+  flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;

package/assets/css/screens.css

@@ -657,6 +657,18 @@
   white-space: nowrap;
 }
 
+/*
+ * `--thead` is intentionally translucent. A fixed header, however, sits above
+ * scrolling rows, so using the token by itself lets the first row show through
+ * the header. Layer the same tint over the card surface to keep the rendered
+ * colour unchanged while making the sticky header fully opaque.
+ */
+.table-card .v-table--fixed-header thead th {
+  background:
+    linear-gradient(var(--thead), var(--thead)),
+    var(--card) !important;
+}
+
 /**
  * ROW HEIGHT IS THE LINE BOX, NOT THE PADDING.
  *

package/components/AppSelect.vue

@@ -2,10 +2,9 @@
   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. A native
-  `<select>` under our chrome: the option list, the keyboard and the mobile
-  wheel are the browser's, so there is no menu to build and nothing to get
-  wrong on a phone.
+  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
@@ -13,32 +12,62 @@
   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.
 
-  The single-value path below is byte-for-byte the one it has always been: a
-  consumer that passes neither `multiple` nor `return-object` still emits
-  exactly the `<select>` element's own string.
+  A single-value consumer that does not use `return-object` still emits the
+  same string that the old native `<select>` emitted.
 -->
 <template>
-  <label
+  <v-menu
     v-if="!multiple"
-    v-bind="$attrs"
-    class="app-field"
-    :class="{ 'app-field--compact': compact }"
+    :close-on-content-click="true"
+    :disabled="disabled"
+    location="bottom start"
+    offset="4"
   >
-    <span v-if="label" class="app-field__label">{{ label }}</span>
-    <select
-      class="app-field__input"
-      :value="singleValue"
-      :disabled="disabled"
-      @change="onNativeChange"
-    >
-      <!-- `clearable` on a native select is the empty option, not an x. -->
-      <option v-if="clearable" value="">{{ placeholder }}</option>
-      <option v-for="opt in normalized" :key="String(opt.value)" :value="opt.value">
-        {{ opt.title }}
-      </option>
-    </select>
-    <v-icon class="app-field__icon" icon="mdi-chevron-down" size="17" />
-  </label>
+    <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
@@ -114,9 +143,8 @@
 </template>
 
 <script setup lang="ts">
-/* `v-menu` has no single root node, so a class on `<AppSelect multiple>` has
-   to be put on the activator by hand. The single branch lands where it always
-   did - on the `<label>`. */
+/* `v-menu` has no single root node, so attributes and classes have to be put
+   on each activator by hand. */
 defineOptions({ inheritAttrs: false });
 
 /*
@@ -157,15 +185,31 @@ const keyOf = (v: any) =>
 
 /* ---- single ---------------------------------------------------------- */
 
-const singleValue = computed(() =>
-  props.returnObject ? keyOf(model.value) : model.value
+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
 );
 
-function onNativeChange(event: Event) {
-  const value = (event.target as HTMLSelectElement).value;
-  model.value = props.returnObject
-    ? normalized.value.find((o) => String(o.value) === value)?.raw ?? value
-    : value;
+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 -------------------------------------------------------- */

package/components/FileInputWithList.vue

@@ -334,4 +334,18 @@ onUnmounted(() => {
   white-space: normal;
   line-height: 1.2;
 }
+
+/**
+ * The attach icon (mdi-paperclip) was drawing at Vuetify's default
+ * `.v-input__prepend > .v-icon { opacity: var(--v-medium-emphasis-opacity) }`
+ * (0.64) - the same field-icon dimming ~200 other call sites rely on, so it is
+ * overridden here only, not in the layer's token. Full opacity, `--text2` -
+ * the same colour `.screen-icon-btn` already uses for an icon at rest -
+ * matches a sibling icon drawn outside a field (e.g. a composer's chat icon,
+ * which is never subject to this Vuetify rule in the first place).
+ */
+.filter-field :deep(.v-input__prepend > .v-icon) {
+  opacity: 1;
+  color: var(--text2);
+}
 </style>

package/components/HidAccessLogDashboard.vue

@@ -65,7 +65,18 @@
             @update:model-value="loadDashboard"
           />
           <AppField v-model="search" search placeholder="Search" />
-          <AppSelect v-model="status" :items="statusOptions" />
+          <AppSelect
+            v-model="status"
+            :items="statusOptions"
+            placeholder="Status"
+            clearable
+          />
+          <AppSelect
+            v-model="accessMethod"
+            :items="accessMethodFilterOptions"
+            placeholder="Access Method"
+            clearable
+          />
         </div>
       </template>
 
@@ -253,6 +264,7 @@
             :items="statusOptions"
             aria-label="Status"
             placeholder="Select"
+            clearable
           />
         </v-card-text>
 
@@ -323,7 +335,8 @@ const userImages = ref<Record<string, string>>({});
 const selectedReaderId = ref("");
 const activeTab = ref<AccessTab>("resident");
 const search = ref("");
-const status = ref("Status");
+const status = ref("");
+const accessMethod = ref("");
 const page = ref(1);
 const limit = 10;
 const loading = ref(false);
@@ -338,11 +351,12 @@ const exportForm = reactive({
   users: [] as string[],
   accessMethod: "All",
   readerLocation: "All",
-  status: "Status",
+  status: "",
 });
 
-const statusOptions = ["Status", "Authorized", "Not Authorized", "Unknown"];
-const accessMethodOptions = ["All", "Facial", "QR Code", "ID and Password", "PIN", "Card"];
+const statusOptions = ["Authorized", "Not Authorized", "Unknown"];
+const accessMethodFilterOptions = ["Facial", "QR Code", "ID and Password", "PIN", "Card"];
+const accessMethodOptions = ["All", ...accessMethodFilterOptions];
 
 const readerOptions = computed(() =>
   readers.value.map((reader) => ({
@@ -442,9 +456,10 @@ const filteredRows = computed(() => {
       row.status,
     ].some((value) => String(value ?? "").toLowerCase().includes(query));
 
-    const matchesStatus = status.value === "Status" || row.status === status.value;
+    const matchesStatus = !status.value || row.status === status.value;
+    const matchesMethod = !accessMethod.value || row.method === accessMethod.value;
 
-    return matchesSearch && matchesStatus;
+    return matchesSearch && matchesStatus && matchesMethod;
   });
 });
 
@@ -497,7 +512,7 @@ const exportRowsData = computed(() =>
     const matchesUsers = !selectedUsers.length || selectedUsers.includes(row.key) || selectedUsers.includes(row.identityKey);
     const matchesMethod = exportForm.accessMethod === "All" || row.method === exportForm.accessMethod;
     const matchesLocation = exportForm.readerLocation === "All" || row.readerLocation === exportForm.readerLocation;
-    const matchesStatus = exportForm.status === "Status" || row.status === exportForm.status;
+    const matchesStatus = !exportForm.status || row.status === exportForm.status;
     const matchesDate = isWithinExportRange(row.lastAccessDate);
 
     return matchesUsers && matchesMethod && matchesLocation && matchesStatus && matchesDate;
@@ -510,7 +525,7 @@ watch(
   { immediate: true },
 );
 
-watch([search, status, activeTab], () => {
+watch([search, status, accessMethod, activeTab], () => {
   page.value = 1;
 });
 

package/components/HidEnabledGate.vue

@@ -45,7 +45,11 @@ const props = withDefaults(
 const { getSiteById } = useSiteSettings();
 const { getHidServiceEnabled } = useOptionalServices();
 
-const { data: siteData } = await useLazyAsyncData(
+// Do not await this request during route setup. Every HID page uses this gate;
+// awaiting it makes Nuxt Suspense keep rendering the previous page until the
+// site request finishes, so the URL changes while the visible module appears
+// frozen. The lazy request updates `siteData` reactively after navigation.
+const { data: siteData } = useLazyAsyncData(
   "hid-enabled-gate-site-" + props.site,
   () => getSiteById(props.site),
   {