mgv-backoffice 1.0.13 → 1.2.0

package/src/components/Pagination.vue

@@ -1,136 +1,137 @@
-<template>
-  <div>
-    <ul>
-      <li v-for="cell in cells" :key="cell">
-        <a v-if="cell!==0" @click="changePage(cell)" :class="{ active: cell === currentPage }">{{ cell }}</a>
-        <span v-if="cell===0" style="cursor: not-allowed;">...</span>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from "vue";
-
-const props = defineProps({
-  totalItems: {
-    type: Number,
-    required: true,
-    default: 10
-  },
-  itemsPerPage: {
-    type: Number,
-    default: 20
-  }
-})
-
-const currentPage = ref(1);
-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;
-  }
-
-  if (totalPages.value > 5) {
-    cells.value = [];
-
-    let isAwayFromStartPoint = (pageNumber - 3) > 0;
-    if (isAwayFromStartPoint) {
-      cells.value.push(1);
-      cells.value.push(0);
-    }
-
-    for (let i = 2; i >= 1; i--) {
-      let previousCell = pageNumber - i;
-      if (previousCell > 0) {
-        cells.value.push(previousCell);
-      }
-    }
-
-    cells.value.push(currentPage.value);
-
-    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);
-      }
-    }
-  }
-
-  emit('page-changed', pageNumber);
-}
-
-watch(() => props.totalItems, () => {
-  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);
-    }
-  }
-})
-</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>
+<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>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({
+  totalItems: {
+    type: Number,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 20
+  }
+})
+
+const currentPage = ref(1);
+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;
+  }
+
+  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);
+
+    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);
+      }
+    }
+  }
+
+  emit('page-changed', pageNumber);
+}
+
+watch(() => props.totalItems, () => {
+  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);
+    }
+  }
+}, { 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

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="number">
+  <div v-if="number !== null && number !== undefined">
     <span v-if="isNegative" class="flex items-center space-x-2">
       <BaseBadge :color="ColorsEnums.RED">{{ number }}{{ props.icon }}</BaseBadge>
       <ArrowDownIcon class="h-5 w-5 text-red-500" />

package/src/composables/useDebounce.ts

@@ -0,0 +1,32 @@
+import { ref, watch, onScopeDispose, type Ref } from 'vue'
+
+/**
+ * Creates a debounced ref that updates after a delay.
+ * Useful for search inputs where you want instant UI feedback
+ * but debounced side-effects (URL sync, API calls, etc.).
+ *
+ * Must be called within a component setup or active effect scope — the
+ * pending timer is cleared automatically when the scope is disposed.
+ */
+export function useDebouncedRef<T>(source: Ref<T>, delay = 300): Ref<T> {
+  const debounced = ref(source.value) as Ref<T>
+  let timeout: ReturnType<typeof setTimeout> | null = null
+
+  watch(source, (val) => {
+    if (timeout) clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      debounced.value = val
+      timeout = null
+    }, delay)
+  })
+
+  // Clear any pending timer if the consuming scope is torn down before it fires.
+  onScopeDispose(() => {
+    if (timeout) {
+      clearTimeout(timeout)
+      timeout = null
+    }
+  })
+
+  return debounced
+}

package/src/composables/useEscapeKey.ts

@@ -0,0 +1,15 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+
+/**
+ * Wire up a callback to fire on Escape key press for the lifetime of the
+ * calling component. Listener is attached on mount and detached on unmount,
+ * so it's safe to use in modals that may mount/unmount many times.
+ */
+export function useEscapeKey(handler: () => void): void {
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') handler()
+  }
+
+  onMounted(() => document.addEventListener('keydown', onKeydown))
+  onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))
+}

package/src/composables/useMobileSidebar.ts

@@ -0,0 +1,23 @@
+import { ref } from 'vue'
+
+/**
+ * Shared state for the responsive sidebar's open/closed status.
+ *
+ * Module-scoped singleton so the sidebar component and the page layout
+ * (which typically marks `<main>` as `inert` while the menu is open)
+ * stay in sync. There's only ever one sidebar at a time.
+ */
+const mobileOpen = ref(false)
+
+export function useMobileSidebar() {
+  function open() {
+    mobileOpen.value = true
+  }
+  function close() {
+    mobileOpen.value = false
+  }
+  function toggle() {
+    mobileOpen.value = !mobileOpen.value
+  }
+  return { mobileOpen, open, close, toggle }
+}

package/src/composables/useTheme.ts

@@ -0,0 +1,69 @@
+import { ref, watch, effectScope } from 'vue'
+
+/**
+ * Shared dark/light theme controller.
+ *
+ * Singleton ref + `<html class="dark">` sync + localStorage persistence.
+ * The first consumer can pass an options object to override the
+ * localStorage key (each consuming app should pick a unique key so two
+ * backoffices on the same origin don't fight). Defaults to `'mgv-theme'`.
+ *
+ * Subsequent callers get the same singleton; the options are only
+ * consulted on the first call.
+ */
+export interface UseThemeOptions {
+  /** localStorage key used to persist the preference. */
+  storageKey?: string
+}
+
+const isDark = ref(false)
+
+// Idempotent flag: initialization and the DOM-sync watcher should run once,
+// and only when the composable is first invoked in a browser environment.
+let initialized = false
+let configuredStorageKey = 'mgv-theme'
+
+function initialize(storageKey: string) {
+  if (initialized) return
+  initialized = true
+  configuredStorageKey = storageKey
+
+  // Read saved preference / system preference.
+  if (typeof window !== 'undefined') {
+    const saved = window.localStorage?.getItem(configuredStorageKey)
+    if (saved) {
+      isDark.value = saved === 'dark'
+    } else if (typeof window.matchMedia === 'function') {
+      isDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches
+    }
+  }
+
+  // Use a detached effect scope so the watcher lives for the app's lifetime
+  // and is NOT torn down when the first component that called useTheme() unmounts.
+  if (typeof document !== 'undefined') {
+    const scope = effectScope(true)
+    scope.run(() => {
+      watch(
+        isDark,
+        (value) => {
+          document.documentElement.classList.toggle('dark', value)
+          window.localStorage?.setItem(configuredStorageKey, value ? 'dark' : 'light')
+        },
+        { immediate: true },
+      )
+    })
+  }
+}
+
+export function useTheme(options?: UseThemeOptions) {
+  initialize(options?.storageKey ?? configuredStorageKey)
+
+  function toggleTheme() {
+    isDark.value = !isDark.value
+  }
+
+  return {
+    isDark,
+    toggleTheme,
+  }
+}

package/src/composables/useThemeClasses.ts

@@ -0,0 +1,133 @@
+import { computed, type ComputedRef } from 'vue'
+import { useTheme } from './useTheme'
+
+/**
+ * Centralized dark/light Tailwind class strings.
+ *
+ * Named "roles" that map to dark/light class strings, so consumers don't
+ * spell out `isDark ? '...' : '...'` ternaries across every view.
+ *
+ * Usage:
+ *
+ *   const t = useThemeClasses()
+ *   <div :class="t.card">
+ *     <p :class="t.mutedText">...</p>
+ *   </div>
+ *
+ * Vue auto-unwraps the computed refs inside template `:class` bindings,
+ * so callers do not write `.value`.
+ */
+export interface ThemeClasses {
+  // -- Surfaces --
+  /** Card surface: bg-gray-800 / bg-white, with border. */
+  card: ComputedRef<string>
+  /** Slightly darker card surface: bg-gray-900 / bg-white, with border. */
+  cardAlt: ComputedRef<string>
+  /** Page background. */
+  pageBg: ComputedRef<string>
+
+  // -- Borders --
+  /** Standard border between cards/sections. */
+  border: ComputedRef<string>
+  /** Subtle divider (lighter than border). */
+  divider: ComputedRef<string>
+
+  // -- Text hierarchy --
+  /** Page headings: white / gray-900. */
+  primaryText: ComputedRef<string>
+  /** Softer headings: gray-100 / gray-800. */
+  primaryTextSoft: ComputedRef<string>
+  /** Body copy on cards: gray-200 / gray-700. */
+  bodyText: ComputedRef<string>
+  /** Form labels: gray-300 / gray-700. */
+  label: ComputedRef<string>
+  /** Secondary text: gray-400 / gray-600. */
+  mutedText: ComputedRef<string>
+  /** Tertiary text: gray-500 / gray-600. */
+  subtleText: ComputedRef<string>
+  /** Dimmest text: gray-500 in dark / gray-400 in light. */
+  dimText: ComputedRef<string>
+  /** Slightly more contrast than dimText: gray-400 / gray-500. */
+  dimTextAlt: ComputedRef<string>
+  /** Big illustration / empty-state icon: gray-600 / gray-300. */
+  illustration: ComputedRef<string>
+
+  // -- Inputs --
+  /** Standard text input. */
+  input: ComputedRef<string>
+  /** Input + placeholder colour. */
+  inputWithPlaceholder: ComputedRef<string>
+
+  // -- Buttons --
+  /** Ghost / Cancel button. */
+  ghostButton: ComputedRef<string>
+
+  // -- Accent text colours --
+  /** Emerald accent text: emerald-400 / emerald-600. */
+  emeraldText: ComputedRef<string>
+  /** Amber accent text: amber-400 / amber-600. */
+  amberText: ComputedRef<string>
+  /** Amber heading-weight: amber-300 / amber-700. */
+  amberTextStrong: ComputedRef<string>
+  /** Red accent text: red-400 / red-500. */
+  redText: ComputedRef<string>
+}
+
+export function useThemeClasses(): ThemeClasses {
+  const { isDark } = useTheme()
+
+  return {
+    card: computed(() =>
+      isDark.value
+        ? 'bg-gray-800 border-gray-700'
+        : 'bg-white border-gray-200',
+    ),
+    cardAlt: computed(() =>
+      isDark.value
+        ? 'bg-gray-900 border-gray-700'
+        : 'bg-white border-gray-200',
+    ),
+    pageBg: computed(() => (isDark.value ? 'bg-gray-900' : 'bg-gray-50')),
+
+    border: computed(() => (isDark.value ? 'border-gray-700' : 'border-gray-200')),
+    divider: computed(() => (isDark.value ? 'border-gray-800' : 'border-gray-100')),
+
+    primaryText: computed(() => (isDark.value ? 'text-white' : 'text-gray-900')),
+    primaryTextSoft: computed(() => (isDark.value ? 'text-gray-100' : 'text-gray-800')),
+    bodyText: computed(() => (isDark.value ? 'text-gray-200' : 'text-gray-700')),
+    label: computed(() => (isDark.value ? 'text-gray-300' : 'text-gray-700')),
+    mutedText: computed(() => (isDark.value ? 'text-gray-400' : 'text-gray-600')),
+    subtleText: computed(() => (isDark.value ? 'text-gray-500' : 'text-gray-600')),
+    dimText: computed(() => (isDark.value ? 'text-gray-500' : 'text-gray-400')),
+    dimTextAlt: computed(() => (isDark.value ? 'text-gray-400' : 'text-gray-500')),
+    illustration: computed(() => (isDark.value ? 'text-gray-600' : 'text-gray-300')),
+
+    input: computed(() =>
+      isDark.value
+        ? 'bg-gray-700 border-gray-600 text-white'
+        : 'bg-gray-50 border-gray-300 text-gray-900',
+    ),
+    inputWithPlaceholder: computed(() =>
+      isDark.value
+        ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
+        : 'bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-500',
+    ),
+
+    ghostButton: computed(() =>
+      isDark.value
+        ? 'bg-gray-800 text-gray-200 border-gray-600 hover:bg-gray-700'
+        : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50',
+    ),
+
+    emeraldText: computed(() =>
+      isDark.value ? 'text-emerald-400' : 'text-emerald-600',
+    ),
+    amberText: computed(() =>
+      isDark.value ? 'text-amber-400' : 'text-amber-600',
+    ),
+    amberTextStrong: computed(() =>
+      isDark.value ? 'text-amber-300' : 'text-amber-700',
+    ),
+    redText: computed(() => (isDark.value ? 'text-red-400' : 'text-red-500')),
+  }
+}

package/src/composables/useToast.ts

@@ -0,0 +1,56 @@
+import { ref, onScopeDispose } from 'vue'
+import { BaseToastEnum } from '../enums/BaseToastEnum'
+
+/**
+ * Per-component toast controller.
+ *
+ * Each component gets its own state refs (not a global singleton) so
+ * multiple mounted views don't fight over the same toast slot. The pending
+ * auto-hide timer is cleared on unmount so it cannot fire after the
+ * component is gone.
+ *
+ * Usage:
+ *   const { showToast, toastMessage, toastType, showToastMessage } = useToast()
+ *   showToastMessage('Saved', BaseToastEnum.SUCCESS)
+ */
+export function useToast(defaultDurationMs = 3000) {
+  const showToast = ref(false)
+  const toastMessage = ref('')
+  const toastType = ref<BaseToastEnum>(BaseToastEnum.SUCCESS)
+
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  function clearTimer() {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  function showToastMessage(
+    message: string,
+    type: BaseToastEnum = BaseToastEnum.SUCCESS,
+    durationMs: number = defaultDurationMs,
+  ) {
+    toastMessage.value = message
+    toastType.value = type
+    showToast.value = true
+
+    clearTimer()
+    timer = setTimeout(() => {
+      showToast.value = false
+      timer = null
+    }, durationMs)
+  }
+
+  onScopeDispose(() => {
+    clearTimer()
+  })
+
+  return {
+    showToast,
+    toastMessage,
+    toastType,
+    showToastMessage,
+  }
+}

package/src/enums/AlertEnum.ts

@@ -2,5 +2,5 @@ export enum AlertEnum {
     WARNING = "WARNING",
     ERROR = "ERROR",
     SUCCESS = "SUCCESS",
-    INFROM = "INFROM"
+    INFO = "INFO"
 }

package/src/enums/BaseButtonSizeEnum.ts

@@ -1,5 +1,5 @@
 export enum BaseButtonSizeEnum {
-    EXTRA_SMALL = "EXTRA SMALL",
+    EXTRA_SMALL = "EXTRA_SMALL",
     SMALL = "SMALL",
     BASE = "BASE",
     LARGE = "LARGE",

package/src/enums/BaseLogoEnum.ts

@@ -1,5 +1,8 @@
-export enum BaseLoginEnum {
+export enum BaseLogoEnum {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
+
+/** @deprecated Use BaseLogoEnum instead */
+export const BaseLoginEnum = BaseLogoEnum;