mgv-backoffice 1.36.0 → 1.36.2

package/src/components/BaseChipButton.vue

@@ -1,42 +1,42 @@
-<template>
-  <!--
-    Small tinted "chip" action button — the compact emerald "+ Add" pill
-    used above repeatable form rows (extracted from WireMate's CreateMock,
-    where the identical class string appeared seven times).
-
-    Label comes from the default slot so callers can mix text and icons.
-  -->
-  <button
-    type="button"
-    :disabled="disabled"
-    class="inline-flex items-center gap-1 font-medium rounded-md border transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
-    :class="[
-      size === 'xs' ? 'text-xs px-2 py-0.5' : 'text-xs px-2.5 py-1',
-      isDark
-        ? 'text-emerald-300 border-emerald-700 bg-emerald-900/30 hover:bg-emerald-800/50'
-        : 'text-emerald-700 border-emerald-200 bg-emerald-50 hover:bg-emerald-100',
-    ]"
-    @click="emit('click')"
-  >
-    <slot />
-  </button>
-</template>
-
-<script lang="ts" setup>
-import { useTheme } from '../composables/useTheme'
-
-interface Props {
-  /** 'sm' = px-2.5 py-1 (default); 'xs' = px-2 py-0.5 for tight corners. */
-  size?: 'xs' | 'sm'
-  disabled?: boolean
-}
-
-withDefaults(defineProps<Props>(), {
-  size: 'sm',
-  disabled: false,
-})
-
-const emit = defineEmits<{ click: [] }>()
-
-const { isDark } = useTheme()
-</script>
+<template>
+  <!--
+    Small tinted "chip" action button — the compact emerald "+ Add" pill
+    used above repeatable form rows (extracted from WireMate's CreateMock,
+    where the identical class string appeared seven times).
+
+    Label comes from the default slot so callers can mix text and icons.
+  -->
+  <button
+    type="button"
+    :disabled="disabled"
+    class="inline-flex items-center gap-1 font-medium rounded-md border transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+    :class="[
+      size === 'xs' ? 'text-xs px-2 py-0.5' : 'text-xs px-2.5 py-1',
+      isDark
+        ? 'text-emerald-300 border-emerald-700 bg-emerald-900/30 hover:bg-emerald-800/50'
+        : 'text-emerald-700 border-emerald-200 bg-emerald-50 hover:bg-emerald-100',
+    ]"
+    @click="emit('click')"
+  >
+    <slot />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from '../composables/useTheme'
+
+interface Props {
+  /** 'sm' = px-2.5 py-1 (default); 'xs' = px-2 py-0.5 for tight corners. */
+  size?: 'xs' | 'sm'
+  disabled?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'sm',
+  disabled: false,
+})
+
+const emit = defineEmits<{ click: [] }>()
+
+const { isDark } = useTheme()
+</script>

package/src/components/BaseCodeBlock.test.ts

@@ -1,70 +1,70 @@
-import { describe, it, expect, beforeEach } from 'vitest'
-import { mount } from '@vue/test-utils'
-import BaseCodeBlock from './BaseCodeBlock.vue'
-import { useTheme } from '../composables/useTheme'
-
-function ensureLight() {
-  const { isDark, toggleTheme } = useTheme()
-  if (isDark.value) toggleTheme()
-}
-
-describe('BaseCodeBlock', () => {
-  beforeEach(() => {
-    ensureLight()
-  })
-
-  it('renders the code verbatim inside a <pre>', () => {
-    const code = '{\n  "a": 1\n}'
-    const wrapper = mount(BaseCodeBlock, { props: { code } })
-    const pre = wrapper.find('pre')
-    expect(pre.exists()).toBe(true)
-    expect(pre.text()).toBe(code)
-    expect(pre.classes()).toContain('font-mono')
-    expect(pre.classes()).toContain('overflow-auto')
-  })
-
-  it('defaults to the soft variant at size sm', () => {
-    const wrapper = mount(BaseCodeBlock, { props: { code: 'x' } })
-    const classes = wrapper.find('pre').classes()
-    expect(classes).toContain('bg-gray-100')
-    expect(classes).toContain('text-sm')
-    expect(classes).toContain('px-5')
-    expect(classes).not.toContain('border')
-  })
-
-  it('renders the bordered variant with a border and card fill', () => {
-    const wrapper = mount(BaseCodeBlock, {
-      props: { code: 'x', variant: 'bordered' },
-    })
-    const classes = wrapper.find('pre').classes()
-    expect(classes).toContain('border')
-    expect(classes).toContain('bg-white')
-    expect(classes).toContain('border-gray-200')
-  })
-
-  it('renders dense padding at size xs', () => {
-    const wrapper = mount(BaseCodeBlock, { props: { code: 'x', size: 'xs' } })
-    const classes = wrapper.find('pre').classes()
-    expect(classes).toContain('text-xs')
-    expect(classes).toContain('p-3')
-  })
-
-  it('applies maxHeightClass and merges fallthrough classes', () => {
-    const wrapper = mount(BaseCodeBlock, {
-      props: { code: 'x', maxHeightClass: 'max-h-96' },
-      attrs: { class: 'mx-4' },
-    })
-    const classes = wrapper.find('pre').classes()
-    expect(classes).toContain('max-h-96')
-    expect(classes).toContain('mx-4')
-  })
-
-  it('switches palette when the theme flips', async () => {
-    const wrapper = mount(BaseCodeBlock, { props: { code: 'x' } })
-    const { toggleTheme } = useTheme()
-    toggleTheme()
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('pre').classes()).toContain('bg-gray-800/70')
-    toggleTheme()
-  })
-})
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseCodeBlock from './BaseCodeBlock.vue'
+import { useTheme } from '../composables/useTheme'
+
+function ensureLight() {
+  const { isDark, toggleTheme } = useTheme()
+  if (isDark.value) toggleTheme()
+}
+
+describe('BaseCodeBlock', () => {
+  beforeEach(() => {
+    ensureLight()
+  })
+
+  it('renders the code verbatim inside a <pre>', () => {
+    const code = '{\n  "a": 1\n}'
+    const wrapper = mount(BaseCodeBlock, { props: { code } })
+    const pre = wrapper.find('pre')
+    expect(pre.exists()).toBe(true)
+    expect(pre.text()).toBe(code)
+    expect(pre.classes()).toContain('font-mono')
+    expect(pre.classes()).toContain('overflow-auto')
+  })
+
+  it('defaults to the soft variant at size sm', () => {
+    const wrapper = mount(BaseCodeBlock, { props: { code: 'x' } })
+    const classes = wrapper.find('pre').classes()
+    expect(classes).toContain('bg-gray-100')
+    expect(classes).toContain('text-sm')
+    expect(classes).toContain('px-5')
+    expect(classes).not.toContain('border')
+  })
+
+  it('renders the bordered variant with a border and card fill', () => {
+    const wrapper = mount(BaseCodeBlock, {
+      props: { code: 'x', variant: 'bordered' },
+    })
+    const classes = wrapper.find('pre').classes()
+    expect(classes).toContain('border')
+    expect(classes).toContain('bg-white')
+    expect(classes).toContain('border-gray-200')
+  })
+
+  it('renders dense padding at size xs', () => {
+    const wrapper = mount(BaseCodeBlock, { props: { code: 'x', size: 'xs' } })
+    const classes = wrapper.find('pre').classes()
+    expect(classes).toContain('text-xs')
+    expect(classes).toContain('p-3')
+  })
+
+  it('applies maxHeightClass and merges fallthrough classes', () => {
+    const wrapper = mount(BaseCodeBlock, {
+      props: { code: 'x', maxHeightClass: 'max-h-96' },
+      attrs: { class: 'mx-4' },
+    })
+    const classes = wrapper.find('pre').classes()
+    expect(classes).toContain('max-h-96')
+    expect(classes).toContain('mx-4')
+  })
+
+  it('switches palette when the theme flips', async () => {
+    const wrapper = mount(BaseCodeBlock, { props: { code: 'x' } })
+    const { toggleTheme } = useTheme()
+    toggleTheme()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('pre').classes()).toContain('bg-gray-800/70')
+    toggleTheme()
+  })
+})

package/src/components/BaseCodeBlock.vue

@@ -1,74 +1,74 @@
-<template>
-  <!--
-    Themed monospace <pre> for JSON payloads, request dumps and code
-    snippets — extracted from WireMate, where the same class soup was
-    hand-rolled on every stub/request detail view.
-
-    Variants:
-      • soft     — tinted fill, no border (bg-gray-800/70 / bg-gray-100).
-        The in-card look used under a section heading.
-      • bordered — bordered card fill (bg-gray-900 / bg-white). The
-        standalone look used when the block sits directly on the page.
-
-    Sizing:
-      • sm — text-sm with roomy padding, for primary content blocks.
-      • xs — text-xs with tight padding, for dense/secondary dumps.
-
-    `max-height-class` caps tall payloads (e.g. 'max-h-96'); the block
-    scrolls both axes. Extra classes (margins etc.) fall through via the
-    normal class attr merge.
-  -->
-  <pre
-    class="font-mono overflow-auto"
-    :class="[sizeClass, paletteClass, maxHeightClass]"
-  >{{ code }}</pre>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useTheme } from '../composables/useTheme'
-
-const props = withDefaults(
-  defineProps<{
-    /** The raw text to render. Whitespace is preserved verbatim. */
-    code: string
-    /** Visual style: tinted fill ('soft') or bordered card ('bordered'). */
-    variant?: 'soft' | 'bordered'
-    /** Text size + padding: 'sm' (roomy) or 'xs' (dense). */
-    size?: 'sm' | 'xs'
-    /** Optional Tailwind max-height utility, e.g. 'max-h-96'. */
-    maxHeightClass?: string
-  }>(),
-  {
-    variant: 'soft',
-    size: 'sm',
-    maxHeightClass: '',
-  },
-)
-
-const { isDark } = useTheme()
-
-// Full literal class strings so Tailwind detects them at build time.
-const PALETTES: Record<'soft' | 'bordered', { dark: string; light: string }> = {
-  soft: {
-    dark: 'bg-gray-800/70 text-gray-300',
-    light: 'bg-gray-100 text-gray-700',
-  },
-  bordered: {
-    dark: 'border bg-gray-900 border-gray-700 text-gray-300',
-    light: 'border bg-white border-gray-200 text-gray-700',
-  },
-}
-
-const SIZES: Record<'sm' | 'xs', string> = {
-  sm: 'text-sm px-5 py-4 rounded-lg',
-  xs: 'text-xs p-3 rounded-lg',
-}
-
-const paletteClass = computed(() => {
-  const entry = PALETTES[props.variant]
-  return isDark.value ? entry.dark : entry.light
-})
-
-const sizeClass = computed(() => SIZES[props.size])
-</script>
+<template>
+  <!--
+    Themed monospace <pre> for JSON payloads, request dumps and code
+    snippets — extracted from WireMate, where the same class soup was
+    hand-rolled on every stub/request detail view.
+
+    Variants:
+      • soft     — tinted fill, no border (bg-gray-800/70 / bg-gray-100).
+        The in-card look used under a section heading.
+      • bordered — bordered card fill (bg-gray-900 / bg-white). The
+        standalone look used when the block sits directly on the page.
+
+    Sizing:
+      • sm — text-sm with roomy padding, for primary content blocks.
+      • xs — text-xs with tight padding, for dense/secondary dumps.
+
+    `max-height-class` caps tall payloads (e.g. 'max-h-96'); the block
+    scrolls both axes. Extra classes (margins etc.) fall through via the
+    normal class attr merge.
+  -->
+  <pre
+    class="font-mono overflow-auto"
+    :class="[sizeClass, paletteClass, maxHeightClass]"
+  >{{ code }}</pre>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+const props = withDefaults(
+  defineProps<{
+    /** The raw text to render. Whitespace is preserved verbatim. */
+    code: string
+    /** Visual style: tinted fill ('soft') or bordered card ('bordered'). */
+    variant?: 'soft' | 'bordered'
+    /** Text size + padding: 'sm' (roomy) or 'xs' (dense). */
+    size?: 'sm' | 'xs'
+    /** Optional Tailwind max-height utility, e.g. 'max-h-96'. */
+    maxHeightClass?: string
+  }>(),
+  {
+    variant: 'soft',
+    size: 'sm',
+    maxHeightClass: '',
+  },
+)
+
+const { isDark } = useTheme()
+
+// Full literal class strings so Tailwind detects them at build time.
+const PALETTES: Record<'soft' | 'bordered', { dark: string; light: string }> = {
+  soft: {
+    dark: 'bg-gray-800/70 text-gray-300',
+    light: 'bg-gray-100 text-gray-700',
+  },
+  bordered: {
+    dark: 'border bg-gray-900 border-gray-700 text-gray-300',
+    light: 'border bg-white border-gray-200 text-gray-700',
+  },
+}
+
+const SIZES: Record<'sm' | 'xs', string> = {
+  sm: 'text-sm px-5 py-4 rounded-lg',
+  xs: 'text-xs p-3 rounded-lg',
+}
+
+const paletteClass = computed(() => {
+  const entry = PALETTES[props.variant]
+  return isDark.value ? entry.dark : entry.light
+})
+
+const sizeClass = computed(() => SIZES[props.size])
+</script>

package/src/components/BaseCollapsibleSection.vue

@@ -1,113 +1,113 @@
-<template>
-  <!--
-    Collapsible section wrapper. Parent owns the `collapsed` state so
-    callers can persist it across edits or batch-collapse many sections
-    at once.
-
-    Slots:
-      • default — the section body (only rendered when expanded)
-
-    Props:
-      • title    — heading text
-      • collapsed — current collapsed state
-      • badge    — optional pill next to the heading (label or count)
-      • bodyClass — override classes for the body container. Defaults
-        to a theme-aware white/gray-800 surface.
-
-    Emits:
-      • toggle — fired when the user clicks the header. The parent
-        flips its own collapsed state in response.
-  -->
-  <!--
-    NOTE: no `overflow-hidden` on the section — it would clip floating
-    menus (BaseDropdown) rendered near the bottom of the body. The child
-    corners are rounded explicitly instead so the card silhouette is
-    unchanged.
-  -->
-  <section class="rounded-xl border transition-colors" :class="t.cardAlt">
-    <button
-      type="button"
-      class="w-full flex items-center justify-between p-4 text-left transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500"
-      :class="[headerClasses, collapsed ? 'rounded-xl' : 'rounded-t-xl']"
-      :aria-expanded="!collapsed"
-      @click="emit('toggle')"
-    >
-      <div class="flex items-center gap-3">
-        <h2 class="text-base font-semibold" :class="headingClasses">{{ title }}</h2>
-        <span
-          v-if="badge"
-          class="text-xs px-2 py-0.5 rounded-full"
-          :class="badgeClasses"
-        >
-          {{ badge }}
-        </span>
-      </div>
-      <svg
-        class="w-5 h-5 transition-transform"
-        :class="[collapsed ? '' : 'rotate-180', t.dimTextAlt]"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        stroke-width="2"
-        aria-hidden="true"
-      >
-        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-      </svg>
-    </button>
-    <div
-      v-show="!collapsed"
-      class="p-6 border-t rounded-b-xl"
-      :class="[t.border, resolvedBodyClass]"
-    >
-      <slot />
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useTheme } from '../composables/useTheme'
-import { useThemeClasses } from '../composables/useThemeClasses'
-
-interface Props {
-  title: string
-  collapsed: boolean
-  /**
-   * Optional pill next to the title. String so callers can pass either
-   * a label ('Active') or a count ('3'). Null/undefined hides the pill.
-   */
-  badge?: string | null
-  /**
-   * Override the body container's background classes. Defaults to a
-   * theme-aware surface: bg-white in light, bg-gray-800 in dark.
-   */
-  bodyClass?: string
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{ toggle: [] }>()
-
-const { isDark } = useTheme()
-const t = useThemeClasses()
-
-const headingClasses = computed(() =>
-  isDark.value ? 'text-gray-100' : 'text-gray-700',
-)
-
-const headerClasses = computed(() =>
-  isDark.value
-    ? 'bg-gray-800/50 hover:bg-gray-800 border-gray-700'
-    : 'bg-gray-50 hover:bg-gray-100 border-gray-200',
-)
-
-const badgeClasses = computed(() =>
-  isDark.value
-    ? 'bg-emerald-500/15 text-emerald-400'
-    : 'bg-emerald-50 text-emerald-700',
-)
-
-const resolvedBodyClass = computed(() => {
-  if (props.bodyClass !== undefined) return props.bodyClass
-  return isDark.value ? 'bg-gray-800' : 'bg-white'
-})
-</script>
+<template>
+  <!--
+    Collapsible section wrapper. Parent owns the `collapsed` state so
+    callers can persist it across edits or batch-collapse many sections
+    at once.
+
+    Slots:
+      • default — the section body (only rendered when expanded)
+
+    Props:
+      • title    — heading text
+      • collapsed — current collapsed state
+      • badge    — optional pill next to the heading (label or count)
+      • bodyClass — override classes for the body container. Defaults
+        to a theme-aware white/gray-800 surface.
+
+    Emits:
+      • toggle — fired when the user clicks the header. The parent
+        flips its own collapsed state in response.
+  -->
+  <!--
+    NOTE: no `overflow-hidden` on the section — it would clip floating
+    menus (BaseDropdown) rendered near the bottom of the body. The child
+    corners are rounded explicitly instead so the card silhouette is
+    unchanged.
+  -->
+  <section class="rounded-xl border transition-colors" :class="t.cardAlt">
+    <button
+      type="button"
+      class="w-full flex items-center justify-between p-4 text-left transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500"
+      :class="[headerClasses, collapsed ? 'rounded-xl' : 'rounded-t-xl']"
+      :aria-expanded="!collapsed"
+      @click="emit('toggle')"
+    >
+      <div class="flex items-center gap-3">
+        <h2 class="text-base font-semibold" :class="headingClasses">{{ title }}</h2>
+        <span
+          v-if="badge"
+          class="text-xs px-2 py-0.5 rounded-full"
+          :class="badgeClasses"
+        >
+          {{ badge }}
+        </span>
+      </div>
+      <svg
+        class="w-5 h-5 transition-transform"
+        :class="[collapsed ? '' : 'rotate-180', t.dimTextAlt]"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width="2"
+        aria-hidden="true"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+      </svg>
+    </button>
+    <div
+      v-show="!collapsed"
+      class="p-6 border-t rounded-b-xl"
+      :class="[t.border, resolvedBodyClass]"
+    >
+      <slot />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import { useThemeClasses } from '../composables/useThemeClasses'
+
+interface Props {
+  title: string
+  collapsed: boolean
+  /**
+   * Optional pill next to the title. String so callers can pass either
+   * a label ('Active') or a count ('3'). Null/undefined hides the pill.
+   */
+  badge?: string | null
+  /**
+   * Override the body container's background classes. Defaults to a
+   * theme-aware surface: bg-white in light, bg-gray-800 in dark.
+   */
+  bodyClass?: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{ toggle: [] }>()
+
+const { isDark } = useTheme()
+const t = useThemeClasses()
+
+const headingClasses = computed(() =>
+  isDark.value ? 'text-gray-100' : 'text-gray-700',
+)
+
+const headerClasses = computed(() =>
+  isDark.value
+    ? 'bg-gray-800/50 hover:bg-gray-800 border-gray-700'
+    : 'bg-gray-50 hover:bg-gray-100 border-gray-200',
+)
+
+const badgeClasses = computed(() =>
+  isDark.value
+    ? 'bg-emerald-500/15 text-emerald-400'
+    : 'bg-emerald-50 text-emerald-700',
+)
+
+const resolvedBodyClass = computed(() => {
+  if (props.bodyClass !== undefined) return props.bodyClass
+  return isDark.value ? 'bg-gray-800' : 'bg-white'
+})
+</script>