mgv-backoffice 1.16.0 → 1.18.0

package/src/components/BaseModal.vue

@@ -1,17 +1,23 @@
 <template>
-  <div class="outside" @click="$emit('closeModal')"></div>
+  <!--
+    @deprecated Legacy modal. Prefer BaseConfirmModal (confirm/cancel
+    flows) or BaseModalShell (custom dialogs) — they support dark mode,
+    teleport to <body>, and slot-based composition. Kept for backward
+    compatibility.
+  -->
+  <div class="fixed inset-0 w-full h-screen bg-black/75 z-40" @click="$emit('closeModal')"></div>
 
   <div
-    class="dialog relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white"
+    class="fixed top-[20vh] left-1/2 -translate-x-1/2 w-96 z-50 rounded-xl shadow-lg bg-white overflow-hidden"
     role="dialog"
     aria-modal="true"
-    :aria-labelledby="'modal-title-' + title"
+    :aria-labelledby="titleId"
   >
 
     <div v-if="mode === BaseModalEnum.DELETE" class="p-6 text-center">
       <ExclamationCircleIcon class="w-12 h-12 text-gray-400 mx-auto mb-4" />
 
-      <h3 :id="'modal-title-' + title" class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+      <h3 :id="titleId" class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
         Are you sure you want to delete this {{ title }}?
       </h3>
 
@@ -21,6 +27,25 @@
       </div>
     </div>
 
+    <!-- Generic branch (SUCCESS and any other mode): title, optional
+         description, caller content, and a single close button. -->
+    <div v-else class="p-6 text-center">
+      <CheckCircleIcon class="w-12 h-12 text-green-500 mx-auto mb-4" />
+
+      <h3 :id="titleId" class="mb-2 text-lg font-medium text-gray-900">
+        {{ title }}
+      </h3>
+      <p v-if="description" class="mb-5 text-sm text-gray-500">
+        {{ description }}
+      </p>
+
+      <slot></slot>
+
+      <div class="flex justify-center">
+        <base-button :color="BaseButtonEnum.BLUE" @click="$emit('closeModal')" description="OK"/>
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -28,10 +53,15 @@
 import { onMounted, onUnmounted } from 'vue';
 import { BaseModalEnum } from "../enums/BaseModalEnum";
 import { BaseButtonEnum } from "../enums/BaseButtonEnum";
-import { ExclamationCircleIcon } from '@heroicons/vue/24/outline'
+import { ExclamationCircleIcon, CheckCircleIcon } from '@heroicons/vue/24/outline'
+import BaseButton from './BaseButton.vue'
 
 const emit = defineEmits(['closeModal', 'confirmModal'])
 
+// Title text can contain spaces, which would make an interpolated id an
+// invalid aria-labelledby reference — generate a stable per-instance id.
+const titleId = `modal-title-${Math.random().toString(36).slice(2, 9)}`
+
 const props = defineProps({
   title: {
     type: String,
@@ -67,29 +97,3 @@ onUnmounted(() => {
   document.removeEventListener('keydown', handleKeydown);
 })
 </script>
-
-<style lang="scss" scoped>
-.outside {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.75);
-  z-index: 10;
-}
-
-.dialog {
-  position: fixed;
-  top: 20vh;
-  left: 40%;
-  width: 20%;
-  z-index: 100;
-  border-radius: 12px;
-  border: none;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
-  padding: 0;
-  margin: 0;
-  overflow: hidden;
-}
-</style>

package/src/components/BasePageHeader.vue

@@ -19,8 +19,14 @@
         'max-w-4xl'.
   -->
   <div :class="['mx-auto px-4 sm:px-6', maxWidthClass]">
-    <div class="flex items-center justify-between mb-8">
-      <div class="flex items-center gap-3">
+    <!--
+      flex-wrap + gap so a long title and the action buttons reflow onto
+      separate rows on narrow (mobile) viewports instead of the actions
+      overflowing off the right edge of the screen. min-w-0 on the title
+      group lets a long title truncate rather than shoving the actions out.
+    -->
+    <div class="flex flex-wrap items-center justify-between gap-3 mb-8">
+      <div class="flex items-center gap-3 min-w-0">
         <div
           class="w-10 h-10 rounded-lg flex items-center justify-center"
           :class="badgeBgClass"

package/src/components/BaseRow.vue

@@ -9,7 +9,7 @@ const props = defineProps({
   bgColor: {
     type: String,
     required: false,
-    default: "white"
+    default: "bg-white"
   }
 })
 

package/src/components/BaseSidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import { ref, nextTick, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'
 import { useTheme } from '../composables/useTheme'
@@ -52,14 +52,6 @@ watch(mobileOpen, async (open) => {
   }
 })
 
-onMounted(() => {
-  // The visibility-change health-check hook that lived in WireMate's
-  // AppSidebar was application-specific; consumers can wire any
-  // periodic work in the `#status` slot themselves.
-})
-
-onUnmounted(() => {})
-
 function goHome() {
   router.push({ name: props.homeRouteName })
   closeMobile()

package/src/components/BaseToast.vue

@@ -17,12 +17,9 @@
 
     <div class="ml-3 text-sm font-normal">{{ description }}</div>
 
-    <button v-if="hasCloseIcon" type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-danger" aria-label="Close">
+    <button v-if="hasCloseIcon" type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700 cursor-pointer" aria-label="Close" @click="close">
       <span class="sr-only">Close</span>
-      <XMarkIcon
-          class="h-6 w-6 text-gray-500 cursor-pointer"
-          @click="close"
-      />
+      <XMarkIcon class="h-6 w-6 text-gray-500" />
     </button>
   </div>
 
@@ -37,7 +34,7 @@ import { PositioningEnum } from "../enums/PositioningEnum";
 
 const props = defineProps({
   mode: {
-    type: Object as PropType<BaseToastEnum>,
+    type: String as PropType<BaseToastEnum>,
     required: true
   },
   description: {

package/src/components/ColoredSquares.vue

@@ -36,14 +36,15 @@ const pastelColors = [
 const bgColor = ref(pastelColors[Math.floor(Math.random() * pastelColors.length)])
 
 function computeCss() {
+  const base = "font-bold text-xs mr-2 px-2.5 py-0.5 rounded-full";
   let color = 'gray';
   switch (props.color) {
     case ColorsEnums.GREEN: { color = 'green'; break; }
     case ColorsEnums.RED: { color = 'red'; break; }
     case ColorsEnums.BLUE: { color = 'blue'; break; }
     case ColorsEnums.YELLOW: { color = 'yellow'; break; }
-    case ColorsEnums.NONE: { color = ''; break; }
+    case ColorsEnums.NONE: { return base; }
   }
-  return "font-bold bg-" + color + "-100 text-" + color + "-800 text-xs mr-2 px-2.5 py-0.5 rounded-full";
+  return base + " bg-" + color + "-100 text-" + color + "-800";
 }
 </script>

package/src/components/Pagination.test.ts

@@ -0,0 +1,85 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Pagination from './Pagination.vue'
+
+/** Visible cell labels in DOM order ('…' for the ellipsis span). */
+function cellLabels(wrapper: ReturnType<typeof mount>): string[] {
+  return wrapper.findAll('li').map(li => li.text().trim())
+}
+
+async function clickPage(wrapper: ReturnType<typeof mount>, page: number) {
+  const link = wrapper.findAll('a').find(a => a.text().trim() === String(page))
+  expect(link, `expected a visible cell for page ${page}`).toBeTruthy()
+  await link!.trigger('click')
+}
+
+describe('Pagination', () => {
+  it('renders every page without an ellipsis when totalPages <= 5', () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 100, itemsPerPage: 20 },
+    })
+    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '4', '5'])
+  })
+
+  it('renders a window with a trailing ellipsis on the first page', () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '...', '10'])
+  })
+
+  it('keeps cells in ascending order around a middle page', async () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    await clickPage(wrapper, 3)
+    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '4', '5', '...', '10'])
+
+    await clickPage(wrapper, 5)
+    expect(cellLabels(wrapper)).toEqual(['1', '...', '3', '4', '5', '6', '7', '...', '10'])
+
+    expect(wrapper.emitted('page-changed')).toEqual([[3], [5]])
+  })
+
+  it('omits the ellipsis when no pages are hidden next to the edges', async () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    await clickPage(wrapper, 3)
+    await clickPage(wrapper, 4)
+    // window is 2..6, so only page 1 precedes it — no gap, no ellipsis
+    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '4', '5', '6', '...', '10'])
+  })
+
+  it('renders the trailing window on the last page', async () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    await clickPage(wrapper, 3)
+    await clickPage(wrapper, 5)
+    await clickPage(wrapper, 7)
+    await clickPage(wrapper, 9)
+    await clickPage(wrapper, 10)
+    expect(cellLabels(wrapper)).toEqual(['1', '...', '8', '9', '10'])
+  })
+
+  it('does not emit when the active page is clicked again', async () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    await clickPage(wrapper, 1)
+    expect(wrapper.emitted('page-changed')).toBeUndefined()
+  })
+
+  it('clamps the current page when the item count shrinks', async () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    await clickPage(wrapper, 3)
+    await clickPage(wrapper, 5)
+    await clickPage(wrapper, 7)
+    await wrapper.setProps({ totalItems: 40 })
+    expect(cellLabels(wrapper)).toEqual(['1', '2'])
+    expect(wrapper.find('a.active').text()).toBe('2')
+  })
+})

package/src/components/Pagination.vue

@@ -1,9 +1,17 @@
 <template>
   <div>
-    <ul>
-      <li v-for="(cell, index) in cells" :key="index">
-        <a v-if="cell!==0" role="button" tabindex="0" @click="changePage(cell)" @keydown.enter="changePage(cell)" :class="{ active: cell === currentPage }">{{ cell }}</a>
-        <span v-if="cell===0" style="cursor: not-allowed;">...</span>
+    <ul class="flex list-none p-0 m-0">
+      <li v-for="(cell, index) in cells" :key="index" class="mr-1">
+        <a
+          v-if="cell !== 0"
+          role="button"
+          tabindex="0"
+          @click="changePage(cell)"
+          @keydown.enter="changePage(cell)"
+          class="inline-block border border-gray-300 rounded-lg p-3 no-underline text-black cursor-pointer hover:bg-gray-300"
+          :class="{ 'active font-bold bg-gray-200': cell === currentPage }"
+        >{{ cell }}</a>
+        <span v-else class="inline-block border border-gray-300 rounded-lg p-3 text-black cursor-not-allowed">...</span>
       </li>
     </ul>
   </div>
@@ -28,110 +36,47 @@ const totalPages = ref(0);
 const cells = ref([] as number[]);
 const emit = defineEmits(['page-changed']);
 
-function changePage(pageNumber: number) {
-  if (pageNumber !== currentPage.value && pageNumber >= 1 && pageNumber <= totalPages.value) {
-    currentPage.value = pageNumber;
+// Rebuild the visible cells around `page`. A cell value of 0 renders as
+// an ellipsis. The window is the current page ± 2 neighbours, plus the
+// first/last page with an ellipsis only when pages are actually hidden.
+function buildCells(page: number) {
+  if (totalPages.value <= 5) {
+    cells.value = Array.from({ length: totalPages.value }, (_, i) => i + 1);
+    return;
   }
 
-  if (totalPages.value > 5) {
-    cells.value = [];
-
-    let isAwayFromStartPoint = (pageNumber - 3) > 0;
-    if (isAwayFromStartPoint) {
-      cells.value.push(1);
-      cells.value.push(0);
-    }
-
-    for (let i = 1; i <= 2; i++) {
-      let previousCell = pageNumber - i;
-      if (previousCell > 0) {
-        cells.value.push(previousCell);
-      }
-    }
-
-    // Sort previous pages in ascending order
-    const currentIdx = cells.value.length;
-    cells.value.push(currentPage.value);
+  const out: number[] = [];
+  const start = Math.max(1, page - 2);
+  const end = Math.min(totalPages.value, page + 2);
 
-    let nextPages = totalPages.value - pageNumber;
-    let hasNextPages = nextPages > 2;
-    let nextPagesSize = 2;
-
-    if (hasNextPages) {
-      for (let i = 1; i <= nextPagesSize; i++) {
-        cells.value.push(pageNumber + i);
-      }
-      cells.value.push(0);
-      cells.value.push(totalPages.value);
-    } else {
-      for (let i = 1; i <= nextPages; i++) {
-        cells.value.push(pageNumber + i);
-      }
-    }
+  if (start > 1) {
+    out.push(1);
+    if (start > 2) out.push(0);
+  }
+  for (let i = start; i <= end; i++) {
+    out.push(i);
+  }
+  if (end < totalPages.value) {
+    if (end < totalPages.value - 1) out.push(0);
+    out.push(totalPages.value);
   }
+  cells.value = out;
+}
 
+function changePage(pageNumber: number) {
+  if (pageNumber === currentPage.value || pageNumber < 1 || pageNumber > totalPages.value) {
+    return;
+  }
+  currentPage.value = pageNumber;
+  buildCells(pageNumber);
   emit('page-changed', pageNumber);
 }
 
-watch(() => props.totalItems, () => {
+watch(() => [props.totalItems, props.itemsPerPage], () => {
   totalPages.value = Math.ceil(props.totalItems / props.itemsPerPage);
-
-  cells.value = [];
-  if (totalPages.value > 5) {
-    for (let i = 1; i < 5; i++) {
-      cells.value.push(i);
-    }
-    cells.value.push(0);
-    cells.value.push(totalPages.value);
-  } else {
-    for (let i = 1; i <= totalPages.value; i++) {
-      cells.value.push(i);
-    }
+  if (currentPage.value > totalPages.value) {
+    currentPage.value = Math.max(1, totalPages.value);
   }
+  buildCells(currentPage.value);
 }, { immediate: true })
 </script>
-
-<style lang="scss" scoped>
-span {
-  border: 1px solid #d1d5db;
-  border-radius: 10px;
-  padding: 0.75rem;
-  text-decoration: none;
-  color: black;
-}
-
-ul {
-  display: flex;
-  list-style: none;
-  padding: 0;
-}
-
-li {
-  margin-right: 3px;
-}
-
-a {
-  border: 1px solid #d1d5db;
-  border-radius: 10px;
-  padding: 0.75rem;
-  text-decoration: none;
-  color: black;
-}
-
-a:hover {
-  background-color: rgb(195 197 201);
-  color: #000000;
-  cursor: pointer;
-}
-
-a.active:hover {
-  background-color: rgb(195 197 201);
-}
-
-a.active {
-  font-weight: 700;
-  border-radius: 10px;
-  background-color: #e5e7eb;
-  color: #000000;
-}
-</style>

package/src/components/TrendArrow.vue

@@ -5,6 +5,12 @@
       <ArrowDownIcon class="h-5 w-5 text-red-500" />
     </span>
 
+    <!-- Flat trend: neutral badge, no directional arrow. -->
+    <span v-else-if="isZero" class="flex items-center space-x-2">
+      <BaseBadge :color="ColorsEnums.GRAY">{{ number }}{{ props.icon }}</BaseBadge>
+      <MinusIcon class="h-5 w-5 text-gray-400" />
+    </span>
+
     <span v-else class="flex items-center space-x-2">
       <BaseBadge :color="ColorsEnums.GREEN">{{ number }}{{ props.icon }}</BaseBadge>
       <ArrowUpIcon class="h-5 w-5 text-green-500" />
@@ -16,7 +22,7 @@
 import { computed } from 'vue'
 import BaseBadge from './BaseBadge.vue'
 import { ColorsEnums } from '../enums/ColorsEnums'
-import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/vue/24/outline'
+import { ArrowDownIcon, ArrowUpIcon, MinusIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps({
   number: {
@@ -30,4 +36,5 @@ const props = defineProps({
 })
 
 const isNegative = computed(() => props.number !== null && props.number !== undefined && props.number < 0)
+const isZero = computed(() => props.number === 0)
 </script>

package/src/composables/useTheme.ts

@@ -24,7 +24,19 @@ let initialized = false
 let configuredStorageKey = 'mgv-theme'
 
 function initialize(storageKey: string) {
-  if (initialized) return
+  if (initialized) {
+    // A different key after initialization means the app configured the
+    // theme too late (a library component mounted first and locked in the
+    // default). Surface it instead of silently ignoring the option.
+    if (storageKey !== configuredStorageKey) {
+      console.warn(
+        `[ui-lib] useTheme: storage key "${storageKey}" ignored — theme already `
+        + `initialized with "${configuredStorageKey}". Call initTheme({ storageKey }) `
+        + `before mounting any component.`,
+      )
+    }
+    return
+  }
   initialized = true
   configuredStorageKey = storageKey
 
@@ -55,6 +67,16 @@ function initialize(storageKey: string) {
   }
 }
 
+/**
+ * Explicitly initialize the theme singleton. Call this in the app's entry
+ * point (before mounting) when you need a custom storage key — library
+ * components call useTheme() internally, so waiting until a view calls
+ * useTheme({ storageKey }) risks a component locking in the default first.
+ */
+export function initTheme(options?: UseThemeOptions): void {
+  initialize(options?.storageKey ?? configuredStorageKey)
+}
+
 export function useTheme(options?: UseThemeOptions) {
   initialize(options?.storageKey ?? configuredStorageKey)
 

package/src/index.ts

@@ -32,7 +32,7 @@ export { default as BaseActionButton } from './components/BaseActionButton.vue'
 export { default as BaseCopyButton } from './components/BaseCopyButton.vue'
 
 // Composables
-export { useTheme } from './composables/useTheme'
+export { useTheme, initTheme } from './composables/useTheme'
 export type { UseThemeOptions } from './composables/useTheme'
 export { useThemeClasses } from './composables/useThemeClasses'
 export type { ThemeClasses } from './composables/useThemeClasses'