@7365admin1/layer-common 3.2.2-staging.89 → 3.2.2-staging.91

package/assets/css/primitives.css

@@ -0,0 +1,430 @@
+/**
+ * PLATFORM REDESIGN - THE PAGE PRIMITIVES.
+ *
+ * Phases 1-5 tokenised what Vuetify draws. This file is the other half: the
+ * pieces the design draws that Vuetify has no component for, taken as literal
+ * CSS out of the handoff prototype
+ * (`design_handoff_platform_redesign/iService365 Redesign.dc.html`) rather
+ * than re-derived by eye. Every declaration below has a line in that file.
+ *
+ * The rule for a screen adopting these: MARKUP, not a theme override. A
+ * `.v-btn` restyled into a pill is still a `.v-btn` with Vuetify's ripple,
+ * overlay, min-width and uppercase tracking fighting it at a higher
+ * specificity; a `<button class="app-btn">` simply is the button in the
+ * design. Where Vuetify owns the behaviour (the data table, the menu, the
+ * dialog) it stays - only the chrome around it is replaced.
+ *
+ * Numbers, for review against the handoff:
+ *   page title 22px/800/-0.01em   ·  card radius 14px, 1px border, --shadow
+ *   in-card toolbar 0 20px, tabs 14px 2px 12px, 2px accent underline
+ *   fields 40px (34px compact), 10px radius, 13.5px/500
+ *   primary button 40px, 10px radius, 13.5px/800  ·  ghost 38px, 13px/700
+ */
+
+/* ------------------------------------------------------------------ */
+/* The typeface.                                                       */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Phase 1 loaded Manrope and deliberately did not apply it, so that the
+ * product would not sit half-migrated between two typefaces. The page
+ * scaffold is the migration, so the font goes on now - on Vuetify's own
+ * application root, which is every rendered page in all eleven apps.
+ *
+ * `.v-application` and not `body`: Vuetify sets `font-family` on that class
+ * itself, so a rule on `body` loses to it and the product would keep Roboto
+ * everywhere while the new primitives alone changed - the exact
+ * half-migrated look this was avoiding.
+ */
+.v-application,
+.v-overlay-container {
+  font-family: var(--font-sans);
+}
+
+/* ------------------------------------------------------------------ */
+/* PageHeader - the row every screen opens with.                       */
+/* ------------------------------------------------------------------ */
+
+.app-page-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+  flex-wrap: wrap;
+}
+
+.app-page-head__title {
+  margin: 0;
+  font-size: var(--fs-h1);
+  font-weight: var(--fw-h1);
+  letter-spacing: var(--ls-h1);
+  line-height: 1.25;
+  color: var(--text);
+}
+
+.app-page-head__sub {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 4px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.app-page-head__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+/* ------------------------------------------------------------------ */
+/* AppCard - the surface everything else sits on.                      */
+/* ------------------------------------------------------------------ */
+
+.app-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.app-card--flush {
+  overflow: visible;
+}
+
+/* ------------------------------------------------------------------ */
+/* CardToolbar - the in-card top row.                                  */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Two shapes in the handoff, one component. With tabs the row is `0 20px` and
+ * the tabs supply their own vertical padding, so the underline meets the
+ * card's rule; without tabs (a refresh button on the left) it is `10px 14px`.
+ */
+.app-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+  padding: 0 var(--cellpad-x);
+  border-bottom: 1px solid var(--border);
+  min-height: 48px;
+}
+
+.app-toolbar--plain {
+  gap: 8px;
+  padding: 10px 14px;
+}
+
+.app-toolbar__spacer {
+  flex: 1;
+}
+
+.app-toolbar__right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.app-toolbar__count {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.app-tabs {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.app-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.app-tab {
+  padding: 14px 2px 12px 2px;
+  border: none;
+  background: transparent;
+  border-bottom: 2px solid transparent;
+  font-family: inherit;
+  font-size: var(--fs-nav);
+  font-weight: 600;
+  color: var(--muted);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.app-tab:hover {
+  color: var(--text2);
+}
+
+.app-tab--active {
+  font-weight: 800;
+  color: var(--accent-text);
+  border-bottom-color: var(--accent);
+}
+
+/* ------------------------------------------------------------------ */
+/* The table, drawn as a grid.                                         */
+/* ------------------------------------------------------------------ */
+
+.app-thead {
+  display: grid;
+  gap: 12px;
+  padding: 12px var(--cellpad-x);
+  font-size: var(--fs-table-head);
+  font-weight: var(--fw-table-head);
+  letter-spacing: var(--ls-table-head);
+  text-transform: uppercase;
+  color: var(--muted);
+  background: var(--thead);
+}
+
+.app-trow {
+  display: grid;
+  gap: 12px;
+  align-items: center;
+  padding: var(--cellpad) var(--cellpad-x);
+  border-top: 1px solid var(--border);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.app-trow:hover {
+  background: var(--hover);
+}
+
+.app-cell--strong {
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-cell--muted {
+  color: var(--text2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-cell--num {
+  color: var(--text2);
+  font-variant-numeric: tabular-nums;
+}
+
+.app-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 52px var(--cellpad-x);
+  border-top: 1px solid var(--border);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted);
+  text-align: center;
+}
+
+/* ------------------------------------------------------------------ */
+/* AppButton.                                                          */
+/* ------------------------------------------------------------------ */
+
+.app-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: var(--btn-h);
+  padding: 0 16px;
+  border: none;
+  border-radius: var(--r-inner);
+  /* `--accent` at 3.23:1 cannot carry a white label - see Phase 1. The fill,
+     and only the fill, uses the 18%-darker `--accent-strong`; the underline,
+     the links and every soft background stay on `--accent`. */
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+  font-family: inherit;
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn-strong);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.app-btn:hover {
+  filter: brightness(1.06);
+}
+
+.app-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+  filter: none;
+}
+
+.app-btn--ghost {
+  height: 38px;
+  padding: 0 14px;
+  border: 1px solid var(--border);
+  background: var(--card);
+  color: var(--text2);
+  font-size: var(--fs-nav);
+  font-weight: var(--fw-btn);
+}
+
+.app-btn--ghost:hover {
+  background: var(--hover);
+  filter: none;
+}
+
+.app-btn--icon {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text2);
+}
+
+.app-btn--icon:hover {
+  background: var(--hover);
+  filter: none;
+}
+
+/* The 30px bordered row action - the `more_vert` at the end of a member row. */
+.app-btn--row {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+}
+
+.app-btn--row:hover {
+  background: var(--hover);
+  filter: none;
+}
+
+/* ------------------------------------------------------------------ */
+/* AppField / AppSelect / AppDateField.                                */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Flat and compact, with the label OUTSIDE the box as a small muted word -
+ * not Vuetify's outlined field with a label that floats through the border.
+ * A native `<input>`/`<select>`, so the browser keeps the keyboard, the date
+ * picker and the accessibility for free.
+ */
+.app-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: var(--input-h);
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+  font-size: var(--fs-nav);
+  font-weight: 600;
+  color: var(--text);
+  min-width: 0;
+}
+
+.app-field--compact {
+  height: var(--input-h-compact);
+}
+
+.app-field:focus-within {
+  border-color: var(--accent);
+}
+
+.app-field__label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.app-field__icon {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.app-field__input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--text);
+}
+
+.app-field__input::placeholder {
+  color: var(--muted);
+  opacity: 1;
+}
+
+/* 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;
+}
+
+.app-field--search {
+  flex: 1;
+  min-width: 220px;
+}
+
+.app-filter-row {
+  display: flex;
+  gap: var(--grid-gap);
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 599.98px) {
+  .app-filter-row > * {
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Responsive - the prototype has no reference, this follows Phase 1.  */
+/* ------------------------------------------------------------------ */
+
+@media (max-width: 767.98px) {
+  .app-page-head {
+    align-items: flex-start;
+  }
+
+  /* The grid table keeps its columns and scrolls sideways inside the card,
+     deliberately not restacked into key/value blocks: the columns carry
+     meaning by position. Same decision as Phase 1's tables. */
+  .app-table-scroll {
+    overflow-x: auto;
+  }
+
+  .app-table-scroll > * {
+    min-width: 720px;
+  }
+}

package/components/AppButton.vue

@@ -0,0 +1,52 @@
+<!--
+  THE BUTTON.
+
+  A `<button>`, not a restyled `v-btn`. Vuetify's button carries an overlay
+  layer, a ripple, a min-width, uppercase letter-spacing and its own height
+  scale, all at a specificity a class has to out-shout one declaration at a
+  time - which is why the product's primary buttons still read as Vuetify grey
+  under a correct token set.
+
+  Variants, straight from the handoff:
+    primary  40px pill-radius accent fill, 13.5px/800, white label
+    ghost    38px, 1px border, card fill, 13px/700 in `--text2`
+    icon     32px transparent square, 8px radius
+    row      30px bordered square - the `more_vert` at the end of a table row
+-->
+<template>
+  <component
+    :is="to ? resolveLink : 'button'"
+    :to="to || undefined"
+    :type="to ? undefined : type"
+    :disabled="disabled || undefined"
+    class="app-btn"
+    :class="variant === 'primary' ? '' : `app-btn--${variant}`"
+  >
+    <v-icon v-if="icon" :icon="icon" :size="iconSize" />
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { resolveComponent } from "vue";
+
+const props = defineProps({
+  variant: {
+    type: String as PropType<"primary" | "ghost" | "icon" | "row">,
+    default: "primary",
+  },
+  icon: { type: String, default: "" },
+  type: { type: String, default: "button" },
+  disabled: { type: Boolean, default: false },
+  /** Given, the button routes - same `to` a `v-btn` would have taken. */
+  to: { type: [String, Object] as PropType<any>, default: undefined },
+});
+
+const resolveLink = resolveComponent("NuxtLink");
+
+const iconSize = computed(() => {
+  if (props.variant === "primary") return 18;
+  if (props.variant === "row") return 17;
+  return 18;
+});
+</script>

package/components/AppCard.vue

@@ -0,0 +1,20 @@
+<!--
+  THE CARD.
+
+  14px radius, a 1px `--border` rule and the design's one-pixel shadow, on
+  `--card`. A plain element rather than a `v-card`, because `v-card` brings its
+  own elevation, radius and surface colour at a specificity that a class has to
+  fight - which is why the radius kept coming back as 4px in Phase 3.
+-->
+<template>
+  <div class="app-card" :class="{ 'app-card--flush': flush }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  /** Let content (a menu, a dropdown) escape the card's rounded corners. */
+  flush: { type: Boolean, default: false },
+});
+</script>

package/components/AppDateField.vue

@@ -0,0 +1,35 @@
+<!--
+  THE DATE FIELD.
+
+  The same 40px box with a calendar glyph, as the handoff draws the two date
+  ends of a filter row. `<input type="date">` - the browser's own picker, which
+  is the one a phone user already knows and the one that is localised, keyboard
+  accessible and free.
+-->
+<template>
+  <label class="app-field" :class="{ 'app-field--compact': compact }">
+    <v-icon class="app-field__icon" icon="mdi-calendar-month-outline" size="17" />
+    <span v-if="label" class="app-field__label">{{ label }}</span>
+    <input
+      class="app-field__input"
+      type="date"
+      :value="model"
+      :min="min || undefined"
+      :max="max || undefined"
+      :disabled="disabled"
+      @input="model = ($event.target as HTMLInputElement).value"
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+const model = defineModel({ type: String, default: "" });
+
+defineProps({
+  label: { type: String, default: "" },
+  min: { type: String, default: "" },
+  max: { type: String, default: "" },
+  compact: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+});
+</script>

package/components/AppField.vue

@@ -0,0 +1,46 @@
+<!--
+  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
+    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"
+      :type="type"
+      :value="model"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      @input="model = ($event.target as HTMLInputElement).value"
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+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 },
+  klass: { type: String, default: "" },
+});
+</script>

package/components/AppSelect.vue

@@ -0,0 +1,47 @@
+<!--
+  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.
+-->
+<template>
+  <label class="app-field" :class="{ 'app-field--compact': compact }">
+    <span v-if="label" class="app-field__label">{{ label }}</span>
+    <select
+      class="app-field__input"
+      :value="model"
+      :disabled="disabled"
+      @change="model = ($event.target as HTMLSelectElement).value"
+    >
+      <option v-for="opt in normalized" :key="opt.value" :value="opt.value">
+        {{ opt.title }}
+      </option>
+    </select>
+    <v-icon class="app-field__icon" icon="mdi-chevron-down" size="17" />
+  </label>
+</template>
+
+<script setup lang="ts">
+const model = defineModel({ type: String, 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 },
+});
+
+const normalized = computed(() =>
+  props.items.map((item: any) =>
+    typeof item === "object" && item !== null
+      ? { title: item[props.itemTitle], value: item[props.itemValue] }
+      : { title: String(item), value: item }
+  )
+);
+</script>

package/components/CardToolbar.vue

@@ -0,0 +1,37 @@
+<!--
+  THE IN-CARD TOP ROW.
+
+  The design does NOT put a screen's tabs above its card - they are the card's
+  own first row, with the pagination on the opposite end of that same line, and
+  the tab underline meets the card's rule. Today those tabs sit in a
+  `v-toolbar`'s extension slot, which stacks them BELOW a separate bar and
+  costs a whole row of height.
+
+  Two shapes, both from the handoff: with tabs (`0 20px`, the tabs supply the
+  vertical padding) and without (`10px 14px`, a refresh button on the left).
+  This component only places things - the tabs, the count and the pager are
+  passed in and keep their own behaviour.
+-->
+<template>
+  <div class="app-toolbar" :class="{ 'app-toolbar--plain': !$slots.tabs }">
+    <div v-if="$slots.tabs" class="app-tabs" role="tablist">
+      <slot name="tabs" />
+    </div>
+
+    <slot name="left" />
+
+    <div class="app-toolbar__spacer" />
+
+    <div class="app-toolbar__right">
+      <span v-if="count" class="app-toolbar__count">{{ count }}</span>
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  /** The design's `1-1 of 1` range, printed as the screen already computes it. */
+  count: { type: String, default: "" },
+});
+</script>

package/components/DashboardEmptyState.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-flex flex-column align-center justify-center text-center text-blue-grey-lighten-1"
+    class="d-flex flex-column align-center justify-center text-center dashboard-empty"
     :style="{ minHeight: compact ? '72px' : '140px', gap: '8px' }"
   >
     <v-icon icon="mdi-database-search-outline" size="28" />
@@ -16,3 +16,13 @@ defineProps({
   },
 });
 </script>
+
+<style scoped>
+/* Was `text-blue-grey-lighten-1`, a fixed Vuetify grey that measured 2.4:1 in
+   LIGHT mode - the empty state was the hardest thing on the page to read. The
+   muted token is the design's own and follows the theme. */
+.dashboard-empty {
+  font-family: var(--font-sans);
+  color: var(--muted);
+}
+</style>