mgv-backoffice 1.36.3 → 1.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mgv-backoffice",
-  "version": "1.36.3",
+  "version": "1.38.0",
   "description": "Shared Vue 3 UI component library",
   "type": "module",
   "main": "./dist/ui-lib.umd.cjs",
@@ -51,5 +51,8 @@
     "vitest": "^5.0.2",
     "vue": "^3.5.43",
     "vue-router": "^5.3.1"
+  },
+  "dependencies": {
+    "@vuepic/vue-datepicker": "^14.0.0"
   }
 }

package/src/components/BaseBreadcrumb.vue

@@ -1,68 +1,68 @@
-<template>
-  <nav class="flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700" aria-label="Breadcrumb">
-    <ol class="inline-flex items-center space-x-1 md:space-x-3">
-
-      <li class="inline-flex items-center" style="margin-left: 0;">
-        <router-link to="/" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white transition-colors rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500">
-          <HomeIcon class="h-4 w-4 text-gray-500 mr-2" />
-          Home
-        </router-link>
-      </li>
-
-      <li v-for="(crumb, index) in crumbs" :key="index" class="inline-flex items-center" style="margin-left: 0;">
-        <ChevronRightIcon class="h-4 w-4 text-gray-500" />
-        <router-link :to="crumb.url" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white transition-colors rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500">
-          {{ crumb.name }}
-        </router-link>
-      </li>
-
-    </ol>
-  </nav>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { HomeIcon } from '@heroicons/vue/24/solid'
-import { ChevronRightIcon } from '@heroicons/vue/24/outline'
-
-export interface BreadCrumb {
-  name: string
-  url: string
-}
-
-const props = defineProps({
-  items: {
-    type: Array as () => BreadCrumb[],
-    required: false,
-    default: undefined
-  },
-  path: {
-    type: String,
-    required: false,
-    default: undefined
-  }
-})
-
-const crumbs = computed<BreadCrumb[]>(() => {
-  // If explicit items are provided, use them directly
-  if (props.items && props.items.length > 0) {
-    return props.items
-  }
-
-  // Otherwise, auto-generate from the path prop (or current URL)
-  const pathname = props.path ?? (typeof window !== 'undefined' ? window.location.pathname : '/')
-  const segments = pathname.split('/').filter(s => s !== '')
-
-  let accumulated = ''
-  return segments.map(segment => {
-    accumulated += '/' + segment
-
-    const isNumeric = !Number.isNaN(Number(segment))
-    const name = !isNumeric
-      ? (segment.charAt(0).toUpperCase() + segment.slice(1)).replaceAll('-', ' ')
-      : segment
-
-    return { name, url: accumulated }
-  })
-})
-</script>
+<template>
+  <nav class="flex overflow-x-auto px-5 py-3 text-gray-700 border border-slate-200 rounded-xl bg-white shadow-sm dark:bg-slate-900 dark:border-slate-700" aria-label="Breadcrumb">
+    <ol class="inline-flex items-center whitespace-nowrap space-x-1 md:space-x-3">
+
+      <li class="inline-flex items-center" style="margin-left: 0;">
+        <router-link to="/" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white transition-colors rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500">
+          <HomeIcon class="h-4 w-4 text-gray-500 mr-2" />
+          Home
+        </router-link>
+      </li>
+
+      <li v-for="(crumb, index) in crumbs" :key="index" class="inline-flex items-center" style="margin-left: 0;">
+        <ChevronRightIcon class="h-4 w-4 text-gray-500" />
+        <router-link :to="crumb.url" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white transition-colors rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500">
+          {{ crumb.name }}
+        </router-link>
+      </li>
+
+    </ol>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { HomeIcon } from '@heroicons/vue/24/solid'
+import { ChevronRightIcon } from '@heroicons/vue/24/outline'
+
+export interface BreadCrumb {
+  name: string
+  url: string
+}
+
+const props = defineProps({
+  items: {
+    type: Array as () => BreadCrumb[],
+    required: false,
+    default: undefined
+  },
+  path: {
+    type: String,
+    required: false,
+    default: undefined
+  }
+})
+
+const crumbs = computed<BreadCrumb[]>(() => {
+  // If explicit items are provided, use them directly
+  if (props.items && props.items.length > 0) {
+    return props.items
+  }
+
+  // Otherwise, auto-generate from the path prop (or current URL)
+  const pathname = props.path ?? (typeof window !== 'undefined' ? window.location.pathname : '/')
+  const segments = pathname.split('/').filter(s => s !== '')
+
+  let accumulated = ''
+  return segments.map(segment => {
+    accumulated += '/' + segment
+
+    const isNumeric = !Number.isNaN(Number(segment))
+    const name = !isNumeric
+      ? (segment.charAt(0).toUpperCase() + segment.slice(1)).replaceAll('-', ' ')
+      : segment
+
+    return { name, url: accumulated }
+  })
+})
+</script>

package/src/components/BaseCard.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseCard from './BaseCard.vue'
+import BaseField from './BaseField.vue'
+
+describe('BaseCard', () => {
+  it('renders the bordered surface with the body slot', () => {
+    const wrapper = mount(BaseCard, { slots: { default: '<p>body</p>' } })
+    expect(wrapper.classes()).toEqual(expect.arrayContaining(['rounded-xl', 'border', 'shadow-sm']))
+    expect(wrapper.find('p').text()).toBe('body')
+    expect(wrapper.find('header').exists()).toBe(false)
+    expect(wrapper.find('footer').exists()).toBe(false)
+  })
+
+  it('renders header (title, subtitle, actions) and footer when given', () => {
+    const wrapper = mount(BaseCard, {
+      props: { title: 'Template', subtitle: 'Edit it' },
+      slots: { actions: '<button>New</button>', footer: '<button>Save</button>' },
+    })
+    expect(wrapper.find('header h2').text()).toBe('Template')
+    expect(wrapper.find('header').text()).toContain('Edit it')
+    expect(wrapper.find('header button').text()).toBe('New')
+    expect(wrapper.find('footer button').text()).toBe('Save')
+  })
+
+  it('supports compact and no body padding', () => {
+    expect(mount(BaseCard, { props: { padding: 'sm' } }).find('section > div').classes()).toContain('p-4')
+    expect(mount(BaseCard, { props: { padding: 'none' } }).find('section > div').classes()).toEqual([])
+  })
+})
+
+describe('BaseField', () => {
+  it('renders label (wired to the control), control and hint', () => {
+    const wrapper = mount(BaseField, {
+      props: { label: 'Name', labelFor: 'name', hint: 'Your name', required: true },
+      slots: { default: '<input id="name" />' },
+    })
+    expect(wrapper.find('label').attributes('for')).toBe('name')
+    expect(wrapper.find('label').text()).toBe('Name*')
+    expect(wrapper.find('input').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Your name')
+  })
+
+  it('shows the error instead of the hint', () => {
+    const wrapper = mount(BaseField, { props: { label: 'Name', hint: 'h', error: 'Required' } })
+    expect(wrapper.find('[role=alert]').text()).toBe('Required')
+    expect(wrapper.text()).not.toContain('h\n')
+  })
+
+  it('uses the small uppercase label and flex growth for filter bars', () => {
+    const wrapper = mount(BaseField, { props: { label: 'Search', compact: true, grow: true } })
+    expect(wrapper.find('label').classes()).toEqual(expect.arrayContaining(['uppercase', 'text-xs']))
+    expect(wrapper.classes()).toContain('flex-1')
+  })
+})

package/src/components/BaseCard.vue

@@ -0,0 +1,48 @@
+<template>
+  <section
+    class="rounded-xl border border-slate-200 bg-white text-left shadow-sm dark:border-slate-700 dark:bg-slate-900"
+  >
+    <header
+      v-if="title || subtitle || $slots.actions"
+      class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-5 py-3 dark:border-slate-700"
+    >
+      <div class="min-w-0">
+        <h2 v-if="title" class="text-base font-semibold text-slate-900 dark:text-slate-100">{{ title }}</h2>
+        <p v-if="subtitle" class="text-sm text-slate-500 dark:text-slate-400">{{ subtitle }}</p>
+      </div>
+      <div v-if="$slots.actions" class="flex items-center gap-2">
+        <slot name="actions" />
+      </div>
+    </header>
+    <div :class="padding === 'sm' ? 'p-4' : padding === 'none' ? '' : 'p-5'">
+      <slot />
+    </div>
+    <footer
+      v-if="$slots.footer"
+      class="flex flex-wrap items-center justify-end gap-2 border-t border-slate-200 px-5 py-3 dark:border-slate-700"
+    >
+      <slot name="footer" />
+    </footer>
+  </section>
+</template>
+
+<script setup lang="ts">
+/**
+ * Bordered surface card — the shared chrome for forms, filter/search panels
+ * and any grouped content. Optional header (title / subtitle / `actions`
+ * slot), a padded body (default slot) and an optional `footer` slot for
+ * submit / cancel buttons.
+ */
+interface Props {
+  title?: string
+  subtitle?: string
+  /** Body padding: 'md' (p-5, default), 'sm' (p-4, e.g. filter bars) or 'none'. */
+  padding?: 'md' | 'sm' | 'none'
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '',
+  subtitle: '',
+  padding: 'md',
+})
+</script>

package/src/components/BaseDateTimePicker.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { VueDatePicker } from '@vuepic/vue-datepicker'
+import BaseDateTimePicker from './BaseDateTimePicker.vue'
+
+function picker(props: Record<string, unknown> = {}, attrs: Record<string, unknown> = {}) {
+  return mount(BaseDateTimePicker, { props, attrs }).findComponent(VueDatePicker)
+}
+
+describe('BaseDateTimePicker', () => {
+  it('defaults to date + 24h time, teleported, with the dd/MM/yyyy HH:mm format', () => {
+    const dp = picker()
+    expect(dp.props('timePicker')).toBe(false)
+    expect(dp.props('timeConfig')).toMatchObject({ enableTimePicker: true, is24: true })
+    expect(dp.props('formats')).toEqual({ input: 'dd/MM/yyyy HH:mm' })
+    expect(dp.props('teleport')).toBe(true)
+  })
+
+  it("mode 'date' hides the time picker", () => {
+    const dp = picker({ mode: 'date' })
+    expect(dp.props('timeConfig')).toMatchObject({ enableTimePicker: false })
+    expect(dp.props('formats')).toEqual({ input: 'dd/MM/yyyy' })
+  })
+
+  it("mode 'time' switches to the time-only picker, 12h when is24=false", () => {
+    const dp = picker({ mode: 'time', is24: false })
+    expect(dp.props('timePicker')).toBe(true)
+    expect(dp.props('formats')).toEqual({ input: 'hh:mm a' })
+  })
+
+  it('custom format and timeConfig override the defaults', () => {
+    const dp = picker({ format: 'yyyy-MM-dd', timeConfig: { enableSeconds: true } })
+    expect(dp.props('formats')).toEqual({ input: 'yyyy-MM-dd' })
+    expect(dp.props('timeConfig')).toMatchObject({ enableTimePicker: true, enableSeconds: true })
+  })
+
+  it('passes unknown props through to VueDatePicker', () => {
+    const dp = picker({}, { range: true, placeholder: 'Pick a date' })
+    expect(dp.props('range')).toBe(true)
+    expect(dp.props('placeholder')).toBe('Pick a date')
+  })
+
+  it('re-emits update:modelValue (v-model contract)', async () => {
+    const wrapper = mount(BaseDateTimePicker)
+    const date = new Date(2026, 8, 27, 10, 30)
+    wrapper.findComponent(VueDatePicker).vm.$emit('update:model-value', date)
+    expect(wrapper.emitted('update:modelValue')).toEqual([[date]])
+  })
+})

package/src/components/BaseDateTimePicker.vue

@@ -0,0 +1,91 @@
+<template>
+  <!--
+    Thin wrapper around @vuepic/vue-datepicker so every consumer gets the same
+    picker, the same defaults and the lib's emerald/slate skin (see the
+    `.dp--theme-*` overrides in style.css) without installing or wiring
+    anything themselves.
+
+    Only the common knobs are typed props here. Every other VueDatePicker
+    prop (range, min-date, max-date, disabled-dates, locale, …), event and
+    slot falls through untouched, so nothing the underlying picker can do is
+    lost.
+
+    Dark mode follows useTheme() automatically.
+  -->
+  <VueDatePicker
+    :model-value="modelValue"
+    :dark="isDark"
+    :time-picker="mode === 'time'"
+    :time-config="resolvedTimeConfig"
+    :formats="resolvedFormats"
+    :auto-apply="autoApply"
+    :teleport="teleport"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps ?? {}" />
+    </template>
+  </VueDatePicker>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { VueDatePicker, type ModelValue, type TimeConfig } from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+import { useTheme } from '../composables/useTheme'
+
+export type DateTimePickerMode = 'date' | 'datetime' | 'time'
+
+interface Props {
+  /** v-model value — Date, Date[] (range), time object, or string with `model-type`. */
+  modelValue?: ModelValue
+  /** 'date' = calendar only; 'datetime' = calendar + time (default); 'time' = time only. */
+  mode?: DateTimePickerMode
+  /**
+   * date-fns pattern for the input text. Defaults per mode:
+   * 'dd/MM/yyyy', 'dd/MM/yyyy HH:mm' (12h: 'hh:mm a'), 'HH:mm'.
+   */
+  format?: string
+  /** 24-hour clock. */
+  is24?: boolean
+  /** Select on click without the Cancel/Select action row. */
+  autoApply?: boolean
+  /**
+   * Where the menu renders. Defaults to `true` (body) so it isn't clipped by
+   * modals or overflow-hidden containers.
+   */
+  teleport?: boolean | string | HTMLElement
+  /** Extra time options, merged over the mode-derived defaults. */
+  timeConfig?: Partial<TimeConfig>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  mode: 'datetime',
+  format: undefined,
+  is24: true,
+  autoApply: false,
+  teleport: true,
+  timeConfig: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: ModelValue): void
+}>()
+
+const { isDark } = useTheme()
+
+const resolvedTimeConfig = computed<Partial<TimeConfig>>(() => ({
+  enableTimePicker: props.mode !== 'date',
+  is24: props.is24,
+  ...props.timeConfig,
+}))
+
+const resolvedFormats = computed(() => {
+  if (props.format) return { input: props.format }
+  const time = props.is24 ? 'HH:mm' : 'hh:mm a'
+  if (props.mode === 'date') return { input: 'dd/MM/yyyy' }
+  if (props.mode === 'time') return { input: time }
+  return { input: `dd/MM/yyyy ${time}` }
+})
+</script>

package/src/components/BaseField.vue

@@ -0,0 +1,47 @@
+<template>
+  <div :class="grow ? 'min-w-48 flex-1' : ''" class="text-left">
+    <label
+      v-if="label"
+      :for="labelFor || undefined"
+      class="mb-1 block"
+      :class="compact
+        ? 'text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400'
+        : 'text-sm font-medium text-slate-700 dark:text-slate-200'"
+    >
+      {{ label }}<span v-if="required" class="ml-0.5 text-red-500" aria-hidden="true">*</span>
+    </label>
+    <slot />
+    <p v-if="error" class="mt-1 text-xs font-medium text-red-600 dark:text-red-400" role="alert">{{ error }}</p>
+    <p v-else-if="hint" class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ hint }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Label + control + message wrapper for forms and filter bars. The control
+ * goes in the default slot (BaseInput, BaseSelect, BaseSearchSelect, …).
+ * `compact` switches to the small uppercase filter-bar label; `grow` makes
+ * the field take the free space in a flex row (filter bars).
+ */
+interface Props {
+  label?: string
+  /** id of the control, wired to the label's `for`. */
+  labelFor?: string
+  required?: boolean
+  /** Validation message (red); replaces the hint while set. */
+  error?: string
+  hint?: string
+  compact?: boolean
+  grow?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  label: '',
+  labelFor: '',
+  required: false,
+  error: '',
+  hint: '',
+  compact: false,
+  grow: false,
+})
+</script>

package/src/components/BaseInput.test.ts

@@ -7,7 +7,7 @@ describe('BaseInput', () => {
     const wrapper = mount(BaseInput)
     const input = wrapper.find('input')
     expect(input.classes()).toEqual(
-      expect.arrayContaining(['rounded', 'border', 'w-full', 'px-3', 'py-2', 'text-sm']),
+      expect.arrayContaining(['rounded-lg', 'border', 'w-full', 'px-3', 'py-2', 'text-sm']),
     )
     expect(input.attributes('type')).toBe('text')
   })

package/src/components/BaseInput.vue

@@ -1,46 +1,46 @@
-<template>
-  <!--
-    Themed text/number input. Carries the shared field skin (slate border,
-    slate-50/slate-900 surface); everything else — placeholder, id, disabled,
-    step/min, extra classes like `font-mono` — falls through via attrs and
-    Vue's class merging, so callers keep their one-off styling.
-
-    Dark mode uses `dark:` variants: the consuming app must map the `dark`
-    variant to the `.dark` class useTheme() toggles (all current consumers do).
-  -->
-  <input
-    :value="modelValue"
-    :type="type"
-    class="rounded border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm placeholder:text-slate-400 dark:placeholder:text-slate-500 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:border-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
-    :class="[block ? 'w-full' : '', size === 'sm' ? 'px-2 py-1.5' : 'px-3 py-2']"
-    @input="onInput"
-  />
-</template>
-
-<script setup lang="ts">
-interface Props {
-  modelValue?: string | number | null
-  /** Native input type ('text', 'number', 'password', …). */
-  type?: string
-  /** 'md' = px-3 py-2 (default); 'sm' = px-2 py-1.5 compact. */
-  size?: 'sm' | 'md'
-  /** Full-width (w-full). Set false for inline fields. */
-  block?: boolean
-}
-
-withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  type: 'text',
-  size: 'md',
-  block: true,
-})
-
-const emit = defineEmits<{
-  /** Raw string value on every input — callers parse numbers themselves. */
-  (e: 'update:modelValue', value: string): void
-}>()
-
-function onInput(e: Event) {
-  emit('update:modelValue', (e.target as HTMLInputElement).value)
-}
-</script>
+<template>
+  <!--
+    Themed text/number input. Carries the shared field skin (slate border,
+    slate-50/slate-900 surface); everything else — placeholder, id, disabled,
+    step/min, extra classes like `font-mono` — falls through via attrs and
+    Vue's class merging, so callers keep their one-off styling.
+
+    Dark mode uses `dark:` variants: the consuming app must map the `dark`
+    variant to the `.dark` class useTheme() toggles (all current consumers do).
+  -->
+  <input
+    :value="modelValue"
+    :type="type"
+    class="rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm placeholder:text-slate-400 dark:placeholder:text-slate-500 transition-colors hover:border-slate-400 dark:hover:border-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/40 focus-visible:border-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
+    :class="[block ? 'w-full' : '', size === 'sm' ? 'px-2 py-1.5' : 'px-3 py-2']"
+    @input="onInput"
+  />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue?: string | number | null
+  /** Native input type ('text', 'number', 'password', …). */
+  type?: string
+  /** 'md' = px-3 py-2 (default); 'sm' = px-2 py-1.5 compact. */
+  size?: 'sm' | 'md'
+  /** Full-width (w-full). Set false for inline fields. */
+  block?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  type: 'text',
+  size: 'md',
+  block: true,
+})
+
+const emit = defineEmits<{
+  /** Raw string value on every input — callers parse numbers themselves. */
+  (e: 'update:modelValue', value: string): void
+}>()
+
+function onInput(e: Event) {
+  emit('update:modelValue', (e.target as HTMLInputElement).value)
+}
+</script>

package/src/components/BaseLogo.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest'
+import { defineComponent, h } from 'vue'
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import BaseLogo from './BaseLogo.vue'
+
+describe('BaseLogo', () => {
+  it('gives each instance its own gradient ids and references them', () => {
+    const Two = defineComponent({ render: () => [h(BaseLogo), h(BaseLogo)] })
+    const wrapper = mount(Two, { global: { stubs: { RouterLink: RouterLinkStub } } })
+
+    const svgs = wrapper.findAll('svg')
+    expect(svgs).toHaveLength(2)
+
+    const ids = svgs.map((svg) => svg.findAll('linearGradient').map((g) => g.attributes('id')))
+    // No id is shared between the two logos.
+    expect(ids[0].filter((id) => ids[1].includes(id))).toEqual([])
+
+    // Every fill in a logo points at a gradient inside that same logo.
+    svgs.forEach((svg, i) => {
+      svg.findAll('path').forEach((path) => {
+        const ref = path.attributes('fill')?.match(/^url\(#(.+)\)$/)?.[1]
+        expect(ids[i]).toContain(ref)
+      })
+    })
+  })
+})

package/src/components/BaseLogo.vue

@@ -1,12 +1,18 @@
 <template>
   <router-link to="/" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
-    <svg :height="computePx()" :width="computePx()" viewBox="33.6 130.6 499.7 242.9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset=".085" stop-color="#469e43"/><stop offset="1" stop-color="#132d13"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="64.863" x2="64.863" xlink:href="#a" y1="288.291" y2="369.4"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="138.367" x2="138.367" xlink:href="#a" y1="308.454" y2="370.601"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="195.475" x2="195.475" xlink:href="#a" y1="288.291" y2="369.85"/><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="249.634" x2="249.634" xlink:href="#a" y1="307.312" y2="369.511"/><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="302.884" x2="302.884" xlink:href="#a" y1="288.291" y2="367.857"/><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="354.118" x2="354.118" xlink:href="#a" y1="307.312" y2="369.511"/><linearGradient id="h" gradientUnits="userSpaceOnUse" x1="428.02" x2="428.02" xlink:href="#a" y1="306.156" y2="367.742"/><linearGradient id="i" gradientUnits="userSpaceOnUse" x1="502.066" x2="502.066" xlink:href="#a" y1="288.291" y2="369.4"/><linearGradient id="j" gradientUnits="userSpaceOnUse" x1="283.264" x2="283.264" xlink:href="#a" y1="131.629" y2="232.559"/><linearGradient id="k" gradientUnits="userSpaceOnUse" x1="283.46" x2="283.46" y1="202.275" y2="183.785"><stop offset="0" stop-color="#969799" stop-opacity="0"/><stop offset="1" stop-color="#808183"/></linearGradient><path d="m65 307.2c-6.8 0-13.1 2.2-18.2 5.9v-24.8h-13.2v81.1h31.4c17.2 0 31.1-13.9 31.1-31.1s-13.9-31.1-31.1-31.1zm0 49.3h-18.2v-18.2c0-10.1 8.2-18.2 18.2-18.2 10.1 0 18.2 8.2 18.2 18.2.1 10.1-8.1 18.2-18.2 18.2z" fill="url(#b)"/><path d="m168.8 343.9h-46.7c1.4 7.1 6.6 12 14.1 12.7 6.4.6 12.9.1 19.9.1v11.9c-15.2 4.9-33.3.5-42.1-10.4-3.8-4.7-17.3-34.7 11.5-47.4 39-11.4 45.3 22.4 43.3 33.1zm-14.2-12.7c-1.7-8.1-8.8-12.9-17.9-12.3-7.6.5-14 5.8-14.5 12.3z" fill="url(#c)"/><path d="m195.5 320.2c0 10.5-.2 20 .1 29.6.2 5.8 4.4 8.4 13.2 8.6v10.5c-13.8 3.9-26.2-4.5-26.4-18-.2-18.7-.1-43.9-.1-62.6h14.1l-.3 18.5 12.7-.1v13.4h-13.3z" fill="url(#d)"/><path d="m249.6 307.3c-17.2 0-31.1 13.9-31.1 31.1s13.9 31.1 31.1 31.1h31.1v-31.1c0-17.2-13.9-31.1-31.1-31.1zm18.6 49.7h-18.5c-10.2 0-18.5-8.3-18.5-18.5s8.3-18.5 18.5-18.5 18.5 8.3 18.5 18.5z" fill="url(#e)"/><path d="m296.4 288.3h13v79.6h-13z" fill="url(#f)"/><path d="m354.1 307.3c-17.2 0-31.1 13.9-31.1 31.1s13.9 31.1 31.1 31.1h31.1v-31.1c0-17.2-13.9-31.1-31.1-31.1zm18.6 49.7h-18.5c-10.2 0-18.5-8.3-18.5-18.5s8.3-18.5 18.5-18.5 18.5 8.3 18.5 18.5z" fill="url(#g)"/><path d="m442.2 367.7c0-12.3.2-23.6 0-34.9-.2-3.4-3.6-13.8-14.1-13.4-10.3-.3-14.4 10-14.3 12.7.1 10.2.5 35.1.5 35.1l-13.6.1s-.3-25.7.2-36.2c.6-14.1 12.7-25 27.5-25 14.7 0 26.2 10.4 26.7 24.9.4 10.4.5 36.3.5 36.3z" fill="url(#h)"/><path d="m501.9 307.2c6.8 0 13.1 2.2 18.2 5.9v-24.8h13.2v81.1h-31.4c-17.2 0-31.1-13.9-31.1-31.1s13.9-31.1 31.1-31.1zm0 49.3h18.2v-18.2c0-10.1-8.2-18.2-18.2-18.2-10.1 0-18.2 8.2-18.2 18.2 0 10.1 8.1 18.2 18.2 18.2z" fill="url(#i)"/><path d="m309.2 180.6h-24v-24c0-12.6 10.2-24.1 22.8-25 14.8-1 27.1 11.3 26.1 26.1-.8 12.7-12.3 22.9-24.9 22.9zm-50.7-48.9c-14.8-1-27.1 11.3-26.1 26.1.8 12.6 12.4 22.8 25 22.8h23.9v-24c0-12.6-10.3-24.1-22.8-24.9zm50.7 51.9h-24v23.9c0 12.6 10.2 24.1 22.8 25 14.8 1 27.1-11.3 26.1-26.1-.8-12.6-12.3-22.8-24.9-22.8zm-52.4 0c-14 0-25.3 11.8-24.4 26 .8 12.2 10.7 22.1 22.9 22.9 14.2.9 26-10.4 26-24.4v-24.5z" fill="url(#j)"/><path d="m281.7 183.8h3.6v18.5h-3.6z" fill="url(#k)"/></svg>
+    <svg :height="computePx()" :width="computePx()" viewBox="33.6 130.6 499.7 242.9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient :id="`${uid}-a`"><stop offset=".085" stop-color="#469e43"/><stop offset="1" stop-color="#132d13"/></linearGradient><linearGradient :id="`${uid}-b`" gradientUnits="userSpaceOnUse" x1="64.863" x2="64.863" :href="`#${uid}-a`" y1="288.291" y2="369.4"/><linearGradient :id="`${uid}-c`" gradientUnits="userSpaceOnUse" x1="138.367" x2="138.367" :href="`#${uid}-a`" y1="308.454" y2="370.601"/><linearGradient :id="`${uid}-d`" gradientUnits="userSpaceOnUse" x1="195.475" x2="195.475" :href="`#${uid}-a`" y1="288.291" y2="369.85"/><linearGradient :id="`${uid}-e`" gradientUnits="userSpaceOnUse" x1="249.634" x2="249.634" :href="`#${uid}-a`" y1="307.312" y2="369.511"/><linearGradient :id="`${uid}-f`" gradientUnits="userSpaceOnUse" x1="302.884" x2="302.884" :href="`#${uid}-a`" y1="288.291" y2="367.857"/><linearGradient :id="`${uid}-g`" gradientUnits="userSpaceOnUse" x1="354.118" x2="354.118" :href="`#${uid}-a`" y1="307.312" y2="369.511"/><linearGradient :id="`${uid}-h`" gradientUnits="userSpaceOnUse" x1="428.02" x2="428.02" :href="`#${uid}-a`" y1="306.156" y2="367.742"/><linearGradient :id="`${uid}-i`" gradientUnits="userSpaceOnUse" x1="502.066" x2="502.066" :href="`#${uid}-a`" y1="288.291" y2="369.4"/><linearGradient :id="`${uid}-j`" gradientUnits="userSpaceOnUse" x1="283.264" x2="283.264" :href="`#${uid}-a`" y1="131.629" y2="232.559"/><linearGradient :id="`${uid}-k`" gradientUnits="userSpaceOnUse" x1="283.46" x2="283.46" y1="202.275" y2="183.785"><stop offset="0" stop-color="#969799" stop-opacity="0"/><stop offset="1" stop-color="#808183"/></linearGradient><path d="m65 307.2c-6.8 0-13.1 2.2-18.2 5.9v-24.8h-13.2v81.1h31.4c17.2 0 31.1-13.9 31.1-31.1s-13.9-31.1-31.1-31.1zm0 49.3h-18.2v-18.2c0-10.1 8.2-18.2 18.2-18.2 10.1 0 18.2 8.2 18.2 18.2.1 10.1-8.1 18.2-18.2 18.2z" :fill="`url(#${uid}-b)`"/><path d="m168.8 343.9h-46.7c1.4 7.1 6.6 12 14.1 12.7 6.4.6 12.9.1 19.9.1v11.9c-15.2 4.9-33.3.5-42.1-10.4-3.8-4.7-17.3-34.7 11.5-47.4 39-11.4 45.3 22.4 43.3 33.1zm-14.2-12.7c-1.7-8.1-8.8-12.9-17.9-12.3-7.6.5-14 5.8-14.5 12.3z" :fill="`url(#${uid}-c)`"/><path d="m195.5 320.2c0 10.5-.2 20 .1 29.6.2 5.8 4.4 8.4 13.2 8.6v10.5c-13.8 3.9-26.2-4.5-26.4-18-.2-18.7-.1-43.9-.1-62.6h14.1l-.3 18.5 12.7-.1v13.4h-13.3z" :fill="`url(#${uid}-d)`"/><path d="m249.6 307.3c-17.2 0-31.1 13.9-31.1 31.1s13.9 31.1 31.1 31.1h31.1v-31.1c0-17.2-13.9-31.1-31.1-31.1zm18.6 49.7h-18.5c-10.2 0-18.5-8.3-18.5-18.5s8.3-18.5 18.5-18.5 18.5 8.3 18.5 18.5z" :fill="`url(#${uid}-e)`"/><path d="m296.4 288.3h13v79.6h-13z" :fill="`url(#${uid}-f)`"/><path d="m354.1 307.3c-17.2 0-31.1 13.9-31.1 31.1s13.9 31.1 31.1 31.1h31.1v-31.1c0-17.2-13.9-31.1-31.1-31.1zm18.6 49.7h-18.5c-10.2 0-18.5-8.3-18.5-18.5s8.3-18.5 18.5-18.5 18.5 8.3 18.5 18.5z" :fill="`url(#${uid}-g)`"/><path d="m442.2 367.7c0-12.3.2-23.6 0-34.9-.2-3.4-3.6-13.8-14.1-13.4-10.3-.3-14.4 10-14.3 12.7.1 10.2.5 35.1.5 35.1l-13.6.1s-.3-25.7.2-36.2c.6-14.1 12.7-25 27.5-25 14.7 0 26.2 10.4 26.7 24.9.4 10.4.5 36.3.5 36.3z" :fill="`url(#${uid}-h)`"/><path d="m501.9 307.2c6.8 0 13.1 2.2 18.2 5.9v-24.8h13.2v81.1h-31.4c-17.2 0-31.1-13.9-31.1-31.1s13.9-31.1 31.1-31.1zm0 49.3h18.2v-18.2c0-10.1-8.2-18.2-18.2-18.2-10.1 0-18.2 8.2-18.2 18.2 0 10.1 8.1 18.2 18.2 18.2z" :fill="`url(#${uid}-i)`"/><path d="m309.2 180.6h-24v-24c0-12.6 10.2-24.1 22.8-25 14.8-1 27.1 11.3 26.1 26.1-.8 12.7-12.3 22.9-24.9 22.9zm-50.7-48.9c-14.8-1-27.1 11.3-26.1 26.1.8 12.6 12.4 22.8 25 22.8h23.9v-24c0-12.6-10.3-24.1-22.8-24.9zm50.7 51.9h-24v23.9c0 12.6 10.2 24.1 22.8 25 14.8 1 27.1-11.3 26.1-26.1-.8-12.6-12.3-22.8-24.9-22.8zm-52.4 0c-14 0-25.3 11.8-24.4 26 .8 12.2 10.7 22.1 22.9 22.9 14.2.9 26-10.4 26-24.4v-24.5z" :fill="`url(#${uid}-j)`"/><path d="m281.7 183.8h3.6v18.5h-3.6z" :fill="`url(#${uid}-k)`"/></svg>
   </router-link>
 </template>
 
 <script lang="ts" setup>
+import { useId } from "vue";
 import { BaseLogoEnum } from "../enums/BaseLogoEnum";
 
+// Per-instance prefix for the SVG gradient ids. With fixed ids, every logo on
+// the page pointed at the FIRST logo's gradients, so when that one was hidden
+// (e.g. the sidebar's mobile top bar on desktop) the visible logos lost their fill.
+const uid = `logo-${useId()}`;
+
 const props = defineProps({
   size: {
     type: String,