@7365admin1/layer-common 3.2.2-staging.90 → 3.2.2-staging.92

package/assets/css/primitives.css

@@ -0,0 +1,563 @@
+/**
+ * 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;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* SegmentedControl - Today | Week | Month.                            */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The handoff draws this as a 3px-padded bordered tray holding 8px-radius
+ * segments; the SELECTED one is an ACCENT FILL, not a grey one. Vuetify's
+ * `v-btn-toggle` cannot be talked into that shape (its own height scale, its
+ * dividers, its overlay layer), so the tray is written as markup.
+ *
+ * The fill is `--accent-strong`, not `--accent`: white on `--accent` measures
+ * 3.23:1, the same Phase-1 rule every other filled label follows.
+ */
+.app-seg {
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+}
+
+.app-seg__item {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.app-seg__item:hover {
+  background: var(--hover);
+}
+
+.app-seg__item--on,
+.app-seg__item--on:hover {
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+}
+
+/* ------------------------------------------------------------------ */
+/* KpiTile - the dashboard's headline figure.                          */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Three rows, in this order, straight from the handoff:
+ *   1. a 34px soft icon square and the uppercase label, side by side
+ *   2. the 30px tabular number with its percentage pill BESIDE it
+ *   3. the sub-line
+ * The product had the icon alone on row 1 and the pill stranded at the
+ * bottom, which is why the tile read as a different component.
+ */
+.app-kpi {
+  padding: 18px;
+}
+
+.app-kpi__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.app-kpi__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 34px;
+  border-radius: var(--r-inner);
+}
+
+.app-kpi__label {
+  font-size: var(--fs-table-head);
+  font-weight: var(--fw-table-head);
+  letter-spacing: var(--ls-table-head);
+  text-transform: uppercase;
+  color: var(--muted);
+  min-width: 0;
+}
+
+.app-kpi__action {
+  margin-left: auto;
+  flex: 0 0 auto;
+}
+
+.app-kpi__figure {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.app-kpi__value {
+  font-size: var(--fs-kpi);
+  font-weight: var(--fw-kpi);
+  letter-spacing: var(--ls-kpi);
+  line-height: 1.1;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+.app-kpi__chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 800;
+  line-height: 1.2;
+  background: var(--ok-bg);
+  color: var(--ok);
+}
+
+.app-kpi__chip--down {
+  background: var(--err-bg);
+  color: var(--err);
+}
+
+.app-kpi__sub {
+  margin-top: 6px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+/* ------------------------------------------------------------------ */
+/* 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>