mgv-backoffice 1.35.0 → 1.36.1

package/src/components/BaseFileDropzone.vue

@@ -1,94 +1,94 @@
-<template>
-  <!--
-    Dashed "click to select a file" upload zone — extracted from WireMate's
-    ImportPostmanModal file picker. Also accepts drag-and-drop.
-
-    The hidden input is reset after every selection so choosing the same
-    file twice still fires `files` — callers don't need their own reset.
-  -->
-  <label
-    class="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-6 py-10 text-center transition-colors"
-    :class="[
-      disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
-      dragging
-        ? (isDark ? 'border-emerald-500 text-emerald-400' : 'border-emerald-500 text-emerald-600')
-        : (isDark
-          ? 'border-gray-700 hover:border-emerald-500 text-gray-400 hover:text-emerald-400'
-          : 'border-gray-300 hover:border-emerald-500 text-gray-500 hover:text-emerald-600'),
-    ]"
-    @dragover.prevent="onDragOver"
-    @dragleave.prevent="dragging = false"
-    @drop.prevent="onDrop"
-  >
-    <slot name="icon">
-      <svg class="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12-3-3m0 0-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
-        />
-      </svg>
-    </slot>
-    <p class="text-sm font-medium">{{ label }}</p>
-    <p v-if="hint" class="text-xs" :class="isDark ? 'text-gray-500' : 'text-gray-400'">
-      {{ hint }}
-    </p>
-    <input
-      type="file"
-      class="hidden"
-      :accept="accept"
-      :multiple="multiple"
-      :disabled="disabled"
-      @change="onChange"
-    />
-  </label>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { useTheme } from '../composables/useTheme'
-
-interface Props {
-  /** Main line, e.g. "Click to select a Postman collection (.json)". */
-  label: string
-  /** Optional dimmed helper line below the label. */
-  hint?: string
-  /** Forwarded to the hidden input's `accept`. Dropped files are NOT filtered by it. */
-  accept?: string
-  multiple?: boolean
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  hint: '',
-  accept: '',
-  multiple: false,
-  disabled: false,
-})
-
-const emit = defineEmits<{ files: [files: File[]] }>()
-
-const { isDark } = useTheme()
-
-const dragging = ref(false)
-
-function onChange(e: Event) {
-  const input = e.target as HTMLInputElement
-  const files = Array.from(input.files ?? [])
-  // Reset so re-selecting the same file re-triggers change.
-  input.value = ''
-  if (files.length) emit('files', files)
-}
-
-function onDragOver() {
-  if (!props.disabled) dragging.value = true
-}
-
-function onDrop(e: DragEvent) {
-  dragging.value = false
-  if (props.disabled) return
-  const dropped = Array.from(e.dataTransfer?.files ?? [])
-  if (!dropped.length) return
-  emit('files', props.multiple ? dropped : dropped.slice(0, 1))
-}
-</script>
+<template>
+  <!--
+    Dashed "click to select a file" upload zone — extracted from WireMate's
+    ImportPostmanModal file picker. Also accepts drag-and-drop.
+
+    The hidden input is reset after every selection so choosing the same
+    file twice still fires `files` — callers don't need their own reset.
+  -->
+  <label
+    class="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-6 py-10 text-center transition-colors"
+    :class="[
+      disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+      dragging
+        ? (isDark ? 'border-emerald-500 text-emerald-400' : 'border-emerald-500 text-emerald-600')
+        : (isDark
+          ? 'border-gray-700 hover:border-emerald-500 text-gray-400 hover:text-emerald-400'
+          : 'border-gray-300 hover:border-emerald-500 text-gray-500 hover:text-emerald-600'),
+    ]"
+    @dragover.prevent="onDragOver"
+    @dragleave.prevent="dragging = false"
+    @drop.prevent="onDrop"
+  >
+    <slot name="icon">
+      <svg class="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12-3-3m0 0-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+        />
+      </svg>
+    </slot>
+    <p class="text-sm font-medium">{{ label }}</p>
+    <p v-if="hint" class="text-xs" :class="isDark ? 'text-gray-500' : 'text-gray-400'">
+      {{ hint }}
+    </p>
+    <input
+      type="file"
+      class="hidden"
+      :accept="accept"
+      :multiple="multiple"
+      :disabled="disabled"
+      @change="onChange"
+    />
+  </label>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+interface Props {
+  /** Main line, e.g. "Click to select a Postman collection (.json)". */
+  label: string
+  /** Optional dimmed helper line below the label. */
+  hint?: string
+  /** Forwarded to the hidden input's `accept`. Dropped files are NOT filtered by it. */
+  accept?: string
+  multiple?: boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hint: '',
+  accept: '',
+  multiple: false,
+  disabled: false,
+})
+
+const emit = defineEmits<{ files: [files: File[]] }>()
+
+const { isDark } = useTheme()
+
+const dragging = ref(false)
+
+function onChange(e: Event) {
+  const input = e.target as HTMLInputElement
+  const files = Array.from(input.files ?? [])
+  // Reset so re-selecting the same file re-triggers change.
+  input.value = ''
+  if (files.length) emit('files', files)
+}
+
+function onDragOver() {
+  if (!props.disabled) dragging.value = true
+}
+
+function onDrop(e: DragEvent) {
+  dragging.value = false
+  if (props.disabled) return
+  const dropped = Array.from(e.dataTransfer?.files ?? [])
+  if (!dropped.length) return
+  emit('files', props.multiple ? dropped : dropped.slice(0, 1))
+}
+</script>

package/src/components/BaseFilterChip.test.ts

@@ -1,44 +1,44 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import BaseFilterChip from './BaseFilterChip.vue'
-
-describe('BaseFilterChip', () => {
-  it('renders the label prop, overridden by the default slot', () => {
-    expect(mount(BaseFilterChip, { props: { label: 'Buy' } }).text()).toBe('Buy')
-    expect(
-      mount(BaseFilterChip, { props: { label: 'x' }, slots: { default: 'Sell' } }).text(),
-    ).toBe('Sell')
-  })
-
-  it('switches from the tinted idle skin to the solid active fill', () => {
-    const idle = mount(BaseFilterChip, { props: { color: 'sky', active: false } })
-    expect(idle.get('button').classes()).toContain('bg-sky-50')
-    expect(idle.get('button').attributes('aria-pressed')).toBe('false')
-
-    const active = mount(BaseFilterChip, { props: { color: 'sky', active: true } })
-    expect(active.get('button').classes()).toContain('bg-sky-500')
-    expect(active.get('button').classes()).toContain('text-white')
-    expect(active.get('button').attributes('aria-pressed')).toBe('true')
-  })
-
-  it('lets native click listeners through, blocked when disabled', async () => {
-    let clicks = 0
-    const chip = mount(BaseFilterChip, {
-      props: { label: 'Buy' },
-      attrs: { onClick: () => clicks++ },
-    })
-    await chip.get('button').trigger('click')
-    expect(clicks).toBe(1)
-
-    const off = mount(BaseFilterChip, {
-      props: { label: 'Buy', disabled: true },
-      attrs: { onClick: () => clicks++ },
-    })
-    expect(off.get('button').attributes('disabled')).toBeDefined()
-  })
-
-  it('forwards the title tooltip', () => {
-    const chip = mount(BaseFilterChip, { props: { label: 'Buy', title: 'Show buys' } })
-    expect(chip.get('button').attributes('title')).toBe('Show buys')
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseFilterChip from './BaseFilterChip.vue'
+
+describe('BaseFilterChip', () => {
+  it('renders the label prop, overridden by the default slot', () => {
+    expect(mount(BaseFilterChip, { props: { label: 'Buy' } }).text()).toBe('Buy')
+    expect(
+      mount(BaseFilterChip, { props: { label: 'x' }, slots: { default: 'Sell' } }).text(),
+    ).toBe('Sell')
+  })
+
+  it('switches from the tinted idle skin to the solid active fill', () => {
+    const idle = mount(BaseFilterChip, { props: { color: 'sky', active: false } })
+    expect(idle.get('button').classes()).toContain('bg-sky-50')
+    expect(idle.get('button').attributes('aria-pressed')).toBe('false')
+
+    const active = mount(BaseFilterChip, { props: { color: 'sky', active: true } })
+    expect(active.get('button').classes()).toContain('bg-sky-500')
+    expect(active.get('button').classes()).toContain('text-white')
+    expect(active.get('button').attributes('aria-pressed')).toBe('true')
+  })
+
+  it('lets native click listeners through, blocked when disabled', async () => {
+    let clicks = 0
+    const chip = mount(BaseFilterChip, {
+      props: { label: 'Buy' },
+      attrs: { onClick: () => clicks++ },
+    })
+    await chip.get('button').trigger('click')
+    expect(clicks).toBe(1)
+
+    const off = mount(BaseFilterChip, {
+      props: { label: 'Buy', disabled: true },
+      attrs: { onClick: () => clicks++ },
+    })
+    expect(off.get('button').attributes('disabled')).toBeDefined()
+  })
+
+  it('forwards the title tooltip', () => {
+    const chip = mount(BaseFilterChip, { props: { label: 'Buy', title: 'Show buys' } })
+    expect(chip.get('button').attributes('title')).toBe('Show buys')
+  })
+})

package/src/components/BaseFilterChip.vue

@@ -1,67 +1,67 @@
-<template>
-  <!--
-    Colour-coded toggleable filter chip — the one-click event/category filter
-    buttons above a data feed (extracted from TradeAutomation's Trade Log).
-    Idle: tinted border/background in the semantic colour. Active: solid fill
-    with white text. `aria-pressed` reflects the toggle state.
-
-    Layout (height, flex sizing) is the caller's: pass classes like
-    `h-9 flex-1` through the class attribute.
-
-    The click handler falls through natively to the root <button> — bind
-    @click on the component as usual; a disabled chip blocks it.
-  -->
-  <button
-    type="button"
-    :disabled="disabled"
-    :title="title"
-    :aria-pressed="active"
-    class="whitespace-nowrap rounded-md border px-3 text-sm font-semibold text-center transition-colors focus:outline-none focus-visible:ring-2 disabled:opacity-50 disabled:cursor-not-allowed"
-    :class="active ? ACTIVE[color] : IDLE[color]"
-  >
-    <slot>{{ label }}</slot>
-  </button>
-</template>
-
-<script setup lang="ts">
-type FilterChipColor = 'emerald' | 'sky' | 'amber' | 'red' | 'slate'
-
-withDefaults(
-  defineProps<{
-    /** Chip text; the default slot overrides it. */
-    label?: string
-    /** Semantic colour of both the idle tint and the active solid fill. */
-    color?: FilterChipColor
-    /** Whether the chip's filter is currently applied (solid fill). */
-    active?: boolean
-    disabled?: boolean
-    /** Native tooltip. */
-    title?: string
-  }>(),
-  { label: '', color: 'slate', active: false, disabled: false, title: undefined },
-)
-
-// Full literal class strings (no dynamic concatenation) so Tailwind detects
-// them at build time. Idle: tinted; active: solid with white text.
-const IDLE: Record<FilterChipColor, string> = {
-  emerald:
-    'border-emerald-300 dark:border-emerald-700/60 bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900/30 focus-visible:ring-emerald-500',
-  sky:
-    'border-sky-300 dark:border-sky-700/60 bg-sky-50 dark:bg-sky-900/20 text-sky-700 dark:text-sky-400 hover:bg-sky-100 dark:hover:bg-sky-900/30 focus-visible:ring-sky-500',
-  amber:
-    'border-amber-300 dark:border-amber-700/60 bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 hover:bg-amber-100 dark:hover:bg-amber-900/30 focus-visible:ring-amber-500',
-  red:
-    'border-red-300 dark:border-red-700/60 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 focus-visible:ring-red-500',
-  slate:
-    'border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 focus-visible:ring-emerald-500',
-}
-
-const ACTIVE: Record<FilterChipColor, string> = {
-  emerald:
-    'border-emerald-500 bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-500',
-  sky: 'border-sky-500 bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-500',
-  amber: 'border-amber-500 bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-500',
-  red: 'border-red-500 bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-500',
-  slate: 'border-slate-600 bg-slate-600 text-white hover:bg-slate-700 focus-visible:ring-emerald-500',
-}
-</script>
+<template>
+  <!--
+    Colour-coded toggleable filter chip — the one-click event/category filter
+    buttons above a data feed (extracted from TradeAutomation's Trade Log).
+    Idle: tinted border/background in the semantic colour. Active: solid fill
+    with white text. `aria-pressed` reflects the toggle state.
+
+    Layout (height, flex sizing) is the caller's: pass classes like
+    `h-9 flex-1` through the class attribute.
+
+    The click handler falls through natively to the root <button> — bind
+    @click on the component as usual; a disabled chip blocks it.
+  -->
+  <button
+    type="button"
+    :disabled="disabled"
+    :title="title"
+    :aria-pressed="active"
+    class="whitespace-nowrap rounded-md border px-3 text-sm font-semibold text-center transition-colors focus:outline-none focus-visible:ring-2 disabled:opacity-50 disabled:cursor-not-allowed"
+    :class="active ? ACTIVE[color] : IDLE[color]"
+  >
+    <slot>{{ label }}</slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+type FilterChipColor = 'emerald' | 'sky' | 'amber' | 'red' | 'slate'
+
+withDefaults(
+  defineProps<{
+    /** Chip text; the default slot overrides it. */
+    label?: string
+    /** Semantic colour of both the idle tint and the active solid fill. */
+    color?: FilterChipColor
+    /** Whether the chip's filter is currently applied (solid fill). */
+    active?: boolean
+    disabled?: boolean
+    /** Native tooltip. */
+    title?: string
+  }>(),
+  { label: '', color: 'slate', active: false, disabled: false, title: undefined },
+)
+
+// Full literal class strings (no dynamic concatenation) so Tailwind detects
+// them at build time. Idle: tinted; active: solid with white text.
+const IDLE: Record<FilterChipColor, string> = {
+  emerald:
+    'border-emerald-300 dark:border-emerald-700/60 bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900/30 focus-visible:ring-emerald-500',
+  sky:
+    'border-sky-300 dark:border-sky-700/60 bg-sky-50 dark:bg-sky-900/20 text-sky-700 dark:text-sky-400 hover:bg-sky-100 dark:hover:bg-sky-900/30 focus-visible:ring-sky-500',
+  amber:
+    'border-amber-300 dark:border-amber-700/60 bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 hover:bg-amber-100 dark:hover:bg-amber-900/30 focus-visible:ring-amber-500',
+  red:
+    'border-red-300 dark:border-red-700/60 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 focus-visible:ring-red-500',
+  slate:
+    'border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 focus-visible:ring-emerald-500',
+}
+
+const ACTIVE: Record<FilterChipColor, string> = {
+  emerald:
+    'border-emerald-500 bg-emerald-500 text-white hover:bg-emerald-600 focus-visible:ring-emerald-500',
+  sky: 'border-sky-500 bg-sky-500 text-white hover:bg-sky-600 focus-visible:ring-sky-500',
+  amber: 'border-amber-500 bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-500',
+  red: 'border-red-500 bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-500',
+  slate: 'border-slate-600 bg-slate-600 text-white hover:bg-slate-700 focus-visible:ring-emerald-500',
+}
+</script>