@7365admin1/layer-common 3.2.2-staging.153 → 3.2.2-staging.154

package/components/HidEnabledGate.vue

@@ -1,14 +1,31 @@
+<!--
+  The gate that stands in for a whole screen when HID is not enabled for a site.
+
+  What it was: a raw `v-alert type="info" variant="tonal"` — Vuetify's own tonal
+  slab, at Vuetify's 4px radius, in Vuetify's font, on a Vuetify blue the theme
+  does not control. It is a full-screen state, not an inline warning.
+
+  DESIGN GAP, STATED: the handoff draws no "service not enabled" page. So this
+  is assembled from the established primitive rather than invented, exactly as
+  `PlaceholderComponent` was — `.screen-empty` (`assets/css/screens.css:149`) is
+  the design's centred, muted, 52px-padded block for "there is nothing to show
+  here", and the heading takes the `--fs-card-title` / `--fw-card-title` type
+  the design uses for every panel heading.
+
+  `.tone-info` sets `--tone-bg`; the icon's soft disc is the only thing that
+  paints with it, so the block keeps the informational colour without becoming
+  a coloured slab. Icons are translated centrally — no hand-mapping here.
+-->
 <template>
   <slot v-if="hidEnabled" />
 
-  <v-alert
-    v-else
-    type="info"
-    variant="tonal"
-    class="mt-6"
-    title="HID service is not enabled"
-    :text="message"
-  />
+  <div v-else class="screen-empty hid-gate">
+    <span class="hid-gate__icon tone-info">
+      <v-icon icon="mdi-information-outline" size="24" />
+    </span>
+    <h2 class="hid-gate__title">HID service is not enabled</h2>
+    <p class="hid-gate__body">{{ message }}</p>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -49,3 +66,40 @@ watchEffect(() => {
   );
 });
 </script>
+
+<style scoped>
+/* It replaces a screen's whole body, so it holds the viewport rather than
+   collapsing to the height of three lines. Same reason as PlaceholderComponent. */
+.hid-gate {
+  min-height: 40vh;
+}
+
+.hid-gate__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: var(--tone-bg);
+}
+
+/* `.screen-empty .v-icon` paints `--muted`; inside the tone scope the icon is
+   the informational colour, so it has to win that one-class rule. */
+.hid-gate .hid-gate__icon .v-icon {
+  color: var(--info);
+}
+
+.hid-gate__title {
+  margin: 0;
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+}
+
+.hid-gate__body {
+  max-width: 46ch;
+  margin: 0;
+  font-weight: var(--fw-cell);
+}
+</style>

package/composables/useFeedback.ts

@@ -51,9 +51,9 @@ export default function useFeedback() {
 
   const feedback = useState("feedback", () => new MFeedback());
   const feedbacks = useState("feedbacks", (): TFeedback[] => []);
-  const page = useState("page", () => 1);
-  const pages = useState("pages", () => 0);
-  const pageRange = useState("pageRange", () => "-- - -- of --");
+  const page = useState("feedbackPage", () => 1);
+  const pages = useState("feedbackPages", () => 0);
+  const pageRange = useState("feedbackPageRange", () => "-- - -- of --");
 
   function setFeedback(data?: TFeedback) {
     feedback.value = data || new MFeedback();

package/composables/useMember.ts

@@ -1,8 +1,8 @@
 export default function useMember() {
   const members = useState<Array<TMember>>("members", () => []);
-  const page = useState("page", () => 1);
-  const pages = useState("pages", () => 0);
-  const pageRange = useState("pageRange", () => "-- - -- of --");
+  const page = useState("memberPage", () => 1);
+  const pages = useState("memberPages", () => 0);
+  const pageRange = useState("memberPageRange", () => "-- - -- of --");
 
   const member = useState<TMember>("member", () => ({
     _id: "",

package/composables/useServiceProvider.ts

@@ -8,9 +8,9 @@ export default function useServiceProvider() {
     () => []
   );
 
-  const page = useState("page", () => 1);
-  const pages = useState("pages", () => 0);
-  const pageRange = useState("pageRange", () => "-- - -- of --");
+  const page = useState("serviceProviderPage", () => 1);
+  const pages = useState("serviceProviderPages", () => 0);
+  const pageRange = useState("serviceProviderPageRange", () => "-- - -- of --");
 
   const serviceProvider = useState(
     "serviceProvider",

package/composables/useWorkOrder.ts

@@ -57,9 +57,23 @@ export default function useWorkOrder() {
 
   const workOrder = useState("workOrder", () => new MWorkOrder());
   const workOrders = useState<Array<TWorkOrder>>("workOrders", () => []);
-  const page = useState("page", () => 1);
-  const pages = useState("pages", () => 0);
-  const pageRange = useState("pageRange", () => "-- - -- of --");
+  /*
+   * Namespaced, like every other composable in this folder (`facilityPage`,
+   * `commentPage`, `unit-billPage`). These three were registered on the bare
+   * keys "page" / "pages" / "pageRange", which `useState` treats as ONE
+   * app-global cell per key - so `useFeedback`, `useMember` and
+   * `useServiceProvider`, which register the same bare keys, were handed the
+   * very same refs. Two of those screens open at once and they share one page
+   * counter.
+   *
+   * Nothing depended on the collision: these three are never assigned anywhere
+   * in this composable, and `WorkOrder/ListView.vue` is the only file in the
+   * layer or in any of the 11 web apps that destructures them - every real
+   * work-order page keeps its own local `ref(1)`.
+   */
+  const page = useState("workOrderPage", () => 1);
+  const pages = useState("workOrderPages", () => 0);
+  const pageRange = useState("workOrderPageRange", () => "-- - -- of --");
 
   function setWorkOrder(data?: TWorkOrder) {
     workOrder.value = data || new MWorkOrder();

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.153",
+  "version": "3.2.2-staging.154",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",