mgv-backoffice 1.48.0 → 1.49.0

package/src/components/BaseStatCard.vue

@@ -11,7 +11,7 @@
           {{ title }}
         </p>
         <p class="mt-1 truncate text-3xl font-bold" :class="cls.value">
-          {{ value }}
+          <slot name="value">{{ value }}</slot>
         </p>
         <p v-if="subtitle" class="mt-1 text-sm font-medium" :class="cls.subtitle">
           {{ subtitle }}
@@ -35,13 +35,14 @@
  * bold title, big value, accent subtitle, tinted icon chip) but for any
  * value — counts, labels, pre-formatted numbers. Pass `to` to make the whole
  * card a router link. The `icon` slot fills the chip (receives `iconClass`);
- * the `default` slot adds extra content under the subtitle.
+ * the `value` slot replaces the value text (e.g. <EuroAmount>); the `default`
+ * slot adds extra content under the subtitle.
  *
  */
 import { computed } from 'vue'
 import { RouterLink, type RouteLocationRaw } from 'vue-router'
 
-type Accent = 'emerald' | 'sky' | 'amber' | 'red' | 'slate'
+type Accent = 'emerald' | 'sky' | 'amber' | 'violet' | 'red' | 'slate'
 
 interface Props {
   title: string
@@ -69,6 +70,13 @@ const ACCENTS: Record<Accent, { border: string; value: string; subtitle: string;
     iconBox: 'bg-emerald-50 dark:bg-emerald-900/30',
     icon: 'text-emerald-500',
   },
+  violet: {
+    border: 'border-violet-300 dark:border-violet-700',
+    value: 'text-violet-500 dark:text-violet-400',
+    subtitle: 'text-violet-500 dark:text-violet-400',
+    iconBox: 'bg-violet-50 dark:bg-violet-900/30',
+    icon: 'text-violet-500',
+  },
   sky: {
     border: 'border-sky-300 dark:border-sky-700',
     value: 'text-sky-500 dark:text-sky-400',

package/src/components/BaseTextarea.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseTextarea from './BaseTextarea.vue'
+
+describe('BaseTextarea', () => {
+  it('emits the typed value and passes attrs through', async () => {
+    const wrapper = mount(BaseTextarea, { props: { modelValue: 'a' }, attrs: { rows: '3' } })
+    expect(wrapper.attributes('rows')).toBe('3')
+    await wrapper.setValue('ab')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['ab'])
+  })
+
+  it('renders null as empty', () => {
+    const wrapper = mount(BaseTextarea, { props: { modelValue: null } })
+    expect((wrapper.element as HTMLTextAreaElement).value).toBe('')
+  })
+})

package/src/components/BaseTextarea.vue

@@ -0,0 +1,24 @@
+<template>
+  <textarea
+    :value="modelValue ?? ''"
+    class="w-full 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 px-3 py-2 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"
+    @input="onInput"
+  />
+</template>
+
+<script setup lang="ts">
+// Themed multi-line input, sharing BaseInput's field skin. rows, maxlength, placeholder, required and extra classes fall through via attrs.
+interface Props {
+  modelValue?: string | null
+}
+
+withDefaults(defineProps<Props>(), { modelValue: '' })
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+function onInput(e: Event) {
+  emit('update:modelValue', (e.target as HTMLTextAreaElement).value)
+}
+</script>

package/src/composables/useRefreshOnReturn.test.ts

@@ -0,0 +1,47 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createApp, defineComponent, h } from 'vue'
+import { REFRESH_AFTER_AWAY_MS, useRefreshOnReturn } from './useRefreshOnReturn'
+
+function setVisibility(state: 'hidden' | 'visible') {
+  Object.defineProperty(document, 'visibilityState', { configurable: true, get: () => state })
+  document.dispatchEvent(new Event('visibilitychange'))
+}
+
+describe('useRefreshOnReturn', () => {
+  afterEach(() => vi.useRealTimers())
+
+  function mountWith(refresh: () => void) {
+    const app = createApp(
+      defineComponent({
+        setup() {
+          useRefreshOnReturn(refresh)
+          return () => h('div')
+        },
+      }),
+    )
+    app.mount(document.createElement('div'))
+    return app
+  }
+
+  it('refreshes after a long absence', () => {
+    vi.useFakeTimers()
+    const refresh = vi.fn()
+    const wrapper = mountWith(refresh)
+    setVisibility('hidden')
+    vi.advanceTimersByTime(REFRESH_AFTER_AWAY_MS)
+    setVisibility('visible')
+    expect(refresh).toHaveBeenCalledOnce()
+    wrapper.unmount()
+  })
+
+  it('keeps the page after a quick switch', () => {
+    vi.useFakeTimers()
+    const refresh = vi.fn()
+    const wrapper = mountWith(refresh)
+    setVisibility('hidden')
+    vi.advanceTimersByTime(REFRESH_AFTER_AWAY_MS - 1)
+    setVisibility('visible')
+    expect(refresh).not.toHaveBeenCalled()
+    wrapper.unmount()
+  })
+})

package/src/composables/useRefreshOnReturn.ts

@@ -0,0 +1,24 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+
+/** How long the tab must be hidden before coming back reloads the page's data; quick switches keep it. */
+export const REFRESH_AFTER_AWAY_MS = 30_000
+
+/**
+ * Calls `refresh` when the browser tab becomes visible again after `afterMs` or more hidden, since server data
+ * changes while the user is elsewhere. The first load is left to the component.
+ */
+export function useRefreshOnReturn(refresh: () => unknown, afterMs = REFRESH_AFTER_AWAY_MS): void {
+  let hiddenAt: number | null = null
+
+  function onVisibilityChange() {
+    if (document.visibilityState === 'hidden') {
+      hiddenAt ??= Date.now()
+      return
+    }
+    if (hiddenAt !== null && Date.now() - hiddenAt >= afterMs) void refresh()
+    hiddenAt = null
+  }
+
+  onMounted(() => document.addEventListener('visibilitychange', onVisibilityChange))
+  onBeforeUnmount(() => document.removeEventListener('visibilitychange', onVisibilityChange))
+}

package/src/index.ts

@@ -68,6 +68,13 @@ export { default as BaseSidebarUser } from './components/BaseSidebarUser.vue'
 export { default as BaseAuthLayout } from './components/BaseAuthLayout.vue'
 export { default as BaseBooleanBadge } from './components/BaseBooleanBadge.vue'
 export { default as BaseDetailList } from './components/BaseDetailList.vue'
+export { default as BaseTextarea } from './components/BaseTextarea.vue'
+export { default as BaseRating } from './components/BaseRating.vue'
+export { default as BaseRowButton } from './components/BaseRowButton.vue'
+export { default as BaseBooleanIcon } from './components/BaseBooleanIcon.vue'
+export { default as BasePhotoViewer } from './components/BasePhotoViewer.vue'
+export type { ViewerPhoto } from './types/photoViewer'
+export { useRefreshOnReturn, REFRESH_AFTER_AWAY_MS } from './composables/useRefreshOnReturn'
 export type { DetailItem } from './types/detail'
 
 // Composables
@@ -149,6 +156,9 @@ export {
   fmtCurrencyAmount,
   fmtDuration,
   formatJson,
+  fmtTime,
+  toLocalInput,
+  fromLocalInput,
   stringifyValue,
 } from './utils/format'
 export {

package/src/types/photoViewer.ts

@@ -0,0 +1,6 @@
+/** One photo in a BasePhotoViewer. */
+export interface ViewerPhoto {
+  src: string
+  label: string
+  caption?: string | null
+}