mgv-backoffice 1.40.0 → 1.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mgv-backoffice",
-  "version": "1.40.0",
+  "version": "1.41.0",
   "description": "Shared Vue 3 UI component library",
   "type": "module",
   "main": "./dist/ui-lib.umd.cjs",

package/src/components/BaseAuthLayout.test.ts

@@ -1,48 +1,48 @@
-import { describe, it, expect } from 'vitest'
-import { mount, RouterLinkStub } from '@vue/test-utils'
-import BaseAuthLayout from './BaseAuthLayout.vue'
-import BaseBooleanBadge from './BaseBooleanBadge.vue'
-
-const global = { stubs: { RouterLink: RouterLinkStub } }
-
-describe('BaseAuthLayout', () => {
-  it('renders the default logo, title, content and footer', () => {
-    const wrapper = mount(BaseAuthLayout, {
-      props: { title: 'Sign in' },
-      slots: { default: '<form>form</form>', footer: 'No account? <a>Sign up</a>' },
-      global,
-    })
-    expect(wrapper.find('svg').exists()).toBe(true)
-    expect(wrapper.find('h1').text()).toBe('Sign in')
-    expect(wrapper.find('form').text()).toBe('form')
-    expect(wrapper.text()).toContain('No account? Sign up')
-  })
-
-  it('lets the logo slot replace the default logo', () => {
-    const wrapper = mount(BaseAuthLayout, { slots: { logo: '<img alt="brand" />' }, global })
-    expect(wrapper.find('img').exists()).toBe(true)
-    expect(wrapper.find('svg').exists()).toBe(false)
-  })
-
-  it('widens the card with `wide`', () => {
-    const card = (w: ReturnType<typeof mount>) => w.find('.rounded-xl')
-    expect(card(mount(BaseAuthLayout, { global })).classes()).toContain('max-w-md')
-    expect(card(mount(BaseAuthLayout, { props: { wide: true }, global })).classes()).toContain('max-w-3xl')
-  })
-})
-
-describe('BaseBooleanBadge', () => {
-  it('renders a green "Yes" pill for true and a neutral "No" pill for false', () => {
-    const yes = mount(BaseBooleanBadge, { props: { value: true } })
-    expect(yes.text()).toBe('Yes')
-    expect(yes.classes()).toContain('bg-emerald-50')
-    const no = mount(BaseBooleanBadge, { props: { value: false } })
-    expect(no.text()).toBe('No')
-    expect(no.classes()).toContain('bg-slate-100')
-  })
-
-  it('uses custom labels and treats null as false', () => {
-    const w = mount(BaseBooleanBadge, { props: { value: null, trueLabel: 'Verified', falseLabel: 'Not verified' } })
-    expect(w.text()).toBe('Not verified')
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import BaseAuthLayout from './BaseAuthLayout.vue'
+import BaseBooleanBadge from './BaseBooleanBadge.vue'
+
+const global = { stubs: { RouterLink: RouterLinkStub } }
+
+describe('BaseAuthLayout', () => {
+  it('renders the default logo, title, content and footer', () => {
+    const wrapper = mount(BaseAuthLayout, {
+      props: { title: 'Sign in' },
+      slots: { default: '<form>form</form>', footer: 'No account? <a>Sign up</a>' },
+      global,
+    })
+    expect(wrapper.find('svg').exists()).toBe(true)
+    expect(wrapper.find('h1').text()).toBe('Sign in')
+    expect(wrapper.find('form').text()).toBe('form')
+    expect(wrapper.text()).toContain('No account? Sign up')
+  })
+
+  it('lets the logo slot replace the default logo', () => {
+    const wrapper = mount(BaseAuthLayout, { slots: { logo: '<img alt="brand" />' }, global })
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.find('svg').exists()).toBe(false)
+  })
+
+  it('widens the card with `wide`', () => {
+    const card = (w: ReturnType<typeof mount>) => w.find('.rounded-xl')
+    expect(card(mount(BaseAuthLayout, { global })).classes()).toContain('max-w-md')
+    expect(card(mount(BaseAuthLayout, { props: { wide: true }, global })).classes()).toContain('max-w-3xl')
+  })
+})
+
+describe('BaseBooleanBadge', () => {
+  it('renders a green "Yes" pill for true and a red "No" pill for false', () => {
+    const yes = mount(BaseBooleanBadge, { props: { value: true } })
+    expect(yes.text()).toBe('Yes')
+    expect(yes.classes()).toContain('bg-emerald-50')
+    const no = mount(BaseBooleanBadge, { props: { value: false } })
+    expect(no.text()).toBe('No')
+    expect(no.classes()).toContain('bg-red-50')
+  })
+
+  it('uses custom labels and treats null as false', () => {
+    const w = mount(BaseBooleanBadge, { props: { value: null, trueLabel: 'Verified', falseLabel: 'Not verified' } })
+    expect(w.text()).toBe('Not verified')
+  })
+})

package/src/components/BaseBooleanBadge.vue

@@ -1,33 +1,32 @@
-<template>
-  <span
-    class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset"
-    :class="value
-      ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-500/10 dark:text-emerald-300 dark:ring-emerald-400/30'
-      : 'bg-slate-100 text-slate-600 ring-slate-500/20 dark:bg-slate-700/50 dark:text-slate-300 dark:ring-slate-400/20'"
-  >
-    <CheckCircleIcon v-if="value" class="h-3.5 w-3.5" aria-hidden="true" />
-    <XCircleIcon v-else class="h-3.5 w-3.5" aria-hidden="true" />
-    {{ value ? trueLabel : falseLabel }}
-  </span>
-</template>
-
-<script setup lang="ts">
-/**
- * Yes/no status pill for boolean columns ("Verified", "Has API", …):
- * a green check pill when true, a neutral cross pill when false — so a
- * `false` reads as a state, not as an error.
- */
-import { CheckCircleIcon, XCircleIcon } from '@heroicons/vue/20/solid'
-
-interface Props {
-  value?: boolean | null
-  trueLabel?: string
-  falseLabel?: string
-}
-
-withDefaults(defineProps<Props>(), {
-  value: false,
-  trueLabel: 'Yes',
-  falseLabel: 'No',
-})
-</script>
+<template>
+  <span
+    class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset"
+    :class="value
+      ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-500/10 dark:text-emerald-300 dark:ring-emerald-400/30'
+      : 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-500/10 dark:text-red-300 dark:ring-red-400/30'"
+  >
+    <CheckCircleIcon v-if="value" class="h-3.5 w-3.5" aria-hidden="true" />
+    <XCircleIcon v-else class="h-3.5 w-3.5" aria-hidden="true" />
+    {{ value ? trueLabel : falseLabel }}
+  </span>
+</template>
+
+<script setup lang="ts">
+/**
+ * Yes/no status pill for boolean columns ("Verified", "Has API", …):
+ * a green check pill when true, a red cross pill when false.
+ */
+import { CheckCircleIcon, XCircleIcon } from '@heroicons/vue/20/solid'
+
+interface Props {
+  value?: boolean | null
+  trueLabel?: string
+  falseLabel?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  value: false,
+  trueLabel: 'Yes',
+  falseLabel: 'No',
+})
+</script>

package/src/components/BaseCheckbox.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseCheckbox from './BaseCheckbox.vue'
+
+describe('BaseCheckbox', () => {
+  it('is rounded and emerald when checked', () => {
+    const input = mount(BaseCheckbox).find('input')
+    expect(input.classes()).toEqual(expect.arrayContaining(['rounded-md', 'text-emerald-600', 'accent-emerald-600']))
+  })
+
+  it('reflects modelValue and emits the new value on change', async () => {
+    const wrapper = mount(BaseCheckbox, { props: { modelValue: false } })
+    const input = wrapper.find('input')
+    expect((input.element as HTMLInputElement).checked).toBe(false)
+    await input.setValue(true)
+    expect(wrapper.emitted('update:modelValue')).toEqual([[true]])
+    expect(wrapper.emitted('change')).toEqual([[true]])
+  })
+
+  it('renders the label and forwards attrs to the input', () => {
+    const wrapper = mount(BaseCheckbox, { props: { label: 'Remember me' }, attrs: { id: 'remember' } })
+    expect(wrapper.text()).toBe('Remember me')
+    expect(wrapper.find('input').attributes('id')).toBe('remember')
+  })
+
+  it('can be disabled', () => {
+    const wrapper = mount(BaseCheckbox, { props: { disabled: true } })
+    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+  })
+})

package/src/components/BaseCheckbox.vue

@@ -0,0 +1,51 @@
+<template>
+  <label
+    class="inline-flex items-center gap-2 select-none"
+    :class="disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'"
+  >
+    <input
+      v-bind="$attrs"
+      type="checkbox"
+      :checked="modelValue"
+      :disabled="disabled"
+      class="h-5 w-5 shrink-0 cursor-[inherit] rounded-md border-slate-300 bg-white text-emerald-600 accent-emerald-600 transition-colors focus:ring-2 focus:ring-emerald-500/40 focus:ring-offset-0 dark:border-slate-600 dark:bg-slate-900 dark:checked:bg-emerald-600"
+      @change="onChange"
+    />
+    <span v-if="label || $slots.default" class="text-sm text-slate-700 dark:text-slate-200">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+/**
+ * Rounded checkbox, emerald when checked (both a forms-plugin fill via
+ * `text-emerald-600` and native `accent-color`, so it looks the same with or
+ * without @tailwindcss/forms / Flowbite). `v-model` is the boolean; `change`
+ * fires with the new value. Attrs (id, name, …) go to the <input>.
+ */
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  modelValue?: boolean
+  label?: string
+  disabled?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  label: '',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'change', value: boolean): void
+}>()
+
+function onChange(e: Event) {
+  const checked = (e.target as HTMLInputElement).checked
+  emit('update:modelValue', checked)
+  emit('change', checked)
+}
+</script>

package/src/components/BaseSidebarUser.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest'
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import BaseSidebarUser from './BaseSidebarUser.vue'
+
+const global = { stubs: { RouterLink: RouterLinkStub } }
+
+describe('BaseSidebarUser', () => {
+  it('shows initials, name and email', () => {
+    const wrapper = mount(BaseSidebarUser, { props: { name: 'john.doe', email: 'j@d.test' }, global })
+    expect(wrapper.text()).toContain('JD')
+    expect(wrapper.text()).toContain('john.doe')
+    expect(wrapper.text()).toContain('j@d.test')
+  })
+
+  it('links to the profile when `to` is set', () => {
+    const wrapper = mount(BaseSidebarUser, { props: { name: 'test', to: { name: 'Profile' } }, global })
+    expect(wrapper.findComponent(RouterLinkStub).props('to')).toEqual({ name: 'Profile' })
+  })
+
+  it('emits logout from the button, and can hide it', async () => {
+    const wrapper = mount(BaseSidebarUser, { props: { name: 'test' }, global })
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('logout')).toHaveLength(1)
+    expect(mount(BaseSidebarUser, { props: { name: 'test', showLogout: false }, global }).find('button').exists()).toBe(false)
+  })
+})

package/src/components/BaseSidebarUser.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="flex flex-col gap-2 text-left">
+    <component
+      :is="to ? RouterLink : 'div'"
+      v-bind="to ? { to } : {}"
+      class="flex items-center gap-3 rounded-lg p-2 transition-colors"
+      :class="to ? 'hover:bg-slate-100 dark:hover:bg-slate-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500' : ''"
+      :title="to ? profileLabel : undefined"
+    >
+      <span
+        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-sm font-semibold text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300"
+        aria-hidden="true"
+      >{{ initials }}</span>
+      <span class="min-w-0">
+        <span class="block truncate text-sm font-medium text-slate-900 dark:text-slate-100">{{ name }}</span>
+        <span v-if="email" class="block truncate text-xs text-slate-500 dark:text-slate-400">{{ email }}</span>
+      </span>
+    </component>
+    <BaseButton
+      v-if="showLogout"
+      class="w-full justify-center"
+      :description="logoutLabel"
+      :color="BaseButtonEnum.RED"
+      :size="BaseButtonSizeEnum.SMALL"
+      outline
+      icon-left
+      @click="emit('logout')"
+    >
+      <ArrowRightStartOnRectangleIcon class="mr-1.5 h-4 w-4" aria-hidden="true" />
+    </BaseButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Signed-in user block for the sidebar footer (BaseSidebar `footer` slot):
+ * initials avatar + name + email, linking to the profile page when `to` is
+ * set, and a Logout button that emits `logout` (the app clears its session).
+ */
+import { computed } from 'vue'
+import { RouterLink, type RouteLocationRaw } from 'vue-router'
+import { ArrowRightStartOnRectangleIcon } from '@heroicons/vue/24/outline'
+import BaseButton from './BaseButton.vue'
+import { BaseButtonEnum } from '../enums/BaseButtonEnum'
+import { BaseButtonSizeEnum } from '../enums/BaseButtonSizeEnum'
+
+interface Props {
+  name: string
+  email?: string
+  /** Profile route; makes the name/email block a link. */
+  to?: RouteLocationRaw
+  showLogout?: boolean
+  logoutLabel?: string
+  profileLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  email: '',
+  to: undefined,
+  showLogout: true,
+  logoutLabel: 'Logout',
+  profileLabel: 'View profile',
+})
+
+const emit = defineEmits<{ (e: 'logout'): void }>()
+
+const initials = computed(() =>
+  (props.name || '?')
+    .split(/[\s._-]+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((p) => p[0]!.toUpperCase())
+    .join(''),
+)
+</script>

package/src/components/BaseSpinner.vue

@@ -1,76 +1,76 @@
-<template>
-  <!--
-    Animated loading spinner — a spinning ring with a neutral track and a
-    coloured leading arc.
-
-    Props:
-      • size  — diameter + ring thickness. 'sm' (16px) is the default and
-        reproduces the original spinner; 'md' (24px), 'lg' (32px) and
-        'xl' (48px) step up for full-page / empty-state loaders.
-      • color — the colour of the spinning arc (`border-t-*`). The track
-        stays neutral gray. Defaults to 'blue' to match the original.
-
-    With no props it renders exactly the legacy spinner, so existing
-    `<BaseSpinner />` call sites are unaffected.
-  -->
-  <div
-    class="border-gray-200 rounded-full animate-spin"
-    :class="[sizeClass, colorClass]"
-    role="status"
-    aria-label="Loading"
-  ></div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl'
-type SpinnerColor =
-  | 'blue'
-  | 'emerald'
-  | 'sky'
-  | 'indigo'
-  | 'teal'
-  | 'purple'
-  | 'red'
-  | 'amber'
-
-const props = withDefaults(
-  defineProps<{
-    size?: SpinnerSize
-    color?: SpinnerColor
-  }>(),
-  {
-    size: 'sm',
-    color: 'blue',
-  },
-)
-
-// Diameter pairs with a proportional ring thickness. Full literal strings
-// so Tailwind detects them at build time.
-const sizeClass = computed(() => {
-  const sizes: Record<SpinnerSize, string> = {
-    sm: 'w-4 h-4 border-2',
-    md: 'w-6 h-6 border-2',
-    lg: 'w-8 h-8 border-4',
-    xl: 'w-12 h-12 border-4',
-  }
-  return sizes[props.size]
-})
-
-// Only the leading arc (`border-t-*`) is tinted; the rest of the ring is
-// the neutral gray track from the template.
-const colorClass = computed(() => {
-  const colors: Record<SpinnerColor, string> = {
-    blue: 'border-t-blue-500',
-    emerald: 'border-t-emerald-500',
-    sky: 'border-t-sky-500',
-    indigo: 'border-t-indigo-500',
-    teal: 'border-t-teal-500',
-    purple: 'border-t-purple-500',
-    red: 'border-t-red-500',
-    amber: 'border-t-amber-500',
-  }
-  return colors[props.color]
-})
-</script>
+<template>
+  <div
+    class="border-gray-200 dark:border-slate-700 rounded-full animate-spin"
+    :class="[sizeClass, colorClass]"
+    role="status"
+    aria-label="Loading"
+  ></div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Animated loading spinner — a spinning ring with a neutral track and a
+ * coloured leading arc.
+ *
+ * Props:
+ * • size  — diameter + ring thickness. 'sm' (16px) is the default and
+ * reproduces the original spinner; 'md' (24px), 'lg' (32px) and
+ * 'xl' (48px) step up for full-page / empty-state loaders.
+ * • color — the colour of the spinning arc (`border-t-*`). The track
+ * stays neutral gray. Defaults to 'emerald' (the brand green).
+ *
+ * With no props it renders the small (16px) emerald spinner.
+ *
+ */
+import { computed } from 'vue'
+
+type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl'
+type SpinnerColor =
+  | 'blue'
+  | 'emerald'
+  | 'sky'
+  | 'indigo'
+  | 'teal'
+  | 'purple'
+  | 'red'
+  | 'amber'
+
+const props = withDefaults(
+  defineProps<{
+    size?: SpinnerSize
+    color?: SpinnerColor
+  }>(),
+  {
+    size: 'sm',
+    color: 'emerald',
+  },
+)
+
+// Diameter pairs with a proportional ring thickness. Full literal strings
+// so Tailwind detects them at build time.
+const sizeClass = computed(() => {
+  const sizes: Record<SpinnerSize, string> = {
+    sm: 'w-4 h-4 border-2',
+    md: 'w-6 h-6 border-2',
+    lg: 'w-8 h-8 border-4',
+    xl: 'w-12 h-12 border-4',
+  }
+  return sizes[props.size]
+})
+
+// Only the leading arc (`border-t-*`) is tinted; the rest of the ring is
+// the neutral gray track from the template.
+const colorClass = computed(() => {
+  const colors: Record<SpinnerColor, string> = {
+    blue: 'border-t-blue-500',
+    emerald: 'border-t-emerald-500',
+    sky: 'border-t-sky-500',
+    indigo: 'border-t-indigo-500',
+    teal: 'border-t-teal-500',
+    purple: 'border-t-purple-500',
+    red: 'border-t-red-500',
+    amber: 'border-t-amber-500',
+  }
+  return colors[props.color]
+})
+</script>

package/src/index.ts

@@ -61,6 +61,8 @@ export { default as BaseCard } from './components/BaseCard.vue'
 export { default as BaseField } from './components/BaseField.vue'
 export { default as BaseStatCard } from './components/BaseStatCard.vue'
 export { default as BaseToggle } from './components/BaseToggle.vue'
+export { default as BaseCheckbox } from './components/BaseCheckbox.vue'
+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'