mgv-backoffice 1.36.0 → 1.36.2

package/src/components/BaseTextInputModal.vue

@@ -1,140 +1,140 @@
-<template>
-  <!--
-    Generic "ask the user for a single string and confirm" dialog.
-    Used for clone-name prompts, rename dialogs, etc.
-
-    Slots:
-      • icon — replace the default emerald-tinted document icon.
-
-    Preserves typed input on stray backdrop clicks (only treats the
-    click as cancel if the user hasn't modified the initial value).
-    Escape is always treated as an explicit dismissal.
-  -->
-  <BaseModalShell
-    :title="title"
-    :icon="DocumentDuplicateIcon"
-    manual-close
-    @backdrop="handleBackdropClick"
-  >
-    <!-- Forward a caller-supplied icon override; otherwise the shell
-         renders the default document icon in the standard emerald chip. -->
-    <template v-if="$slots.icon" #icon>
-      <slot name="icon" />
-    </template>
-
-    <p class="text-sm" :class="isDark ? 'text-gray-300' : 'text-gray-600'">
-      {{ message }}
-    </p>
-
-    <div class="mt-4">
-      <label
-        class="block text-sm font-medium mb-1"
-        :class="t.label"
-      >
-        {{ inputLabel }}
-      </label>
-      <input
-        ref="nameInput"
-        v-model="inputValue"
-        type="text"
-        :placeholder="placeholder"
-        class="w-full px-3 py-2 rounded-md border text-sm transition-colors"
-        :class="isDark
-          ? 'bg-gray-800 border-gray-600 text-gray-100 placeholder-gray-500 focus:outline-none focus:border-emerald-500'
-          : 'bg-white border-gray-300 text-gray-900 placeholder-gray-400 focus:outline-none focus:border-emerald-500'"
-        @keyup.enter="handleConfirm"
-      />
-    </div>
-
-    <template #footer>
-      <button
-        type="button"
-        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
-        :class="t.ghostButton"
-        @click="handleCancel"
-      >
-        {{ cancelText }}
-      </button>
-      <button
-        type="button"
-        :disabled="!inputValue.trim() || submitting"
-        class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2"
-        :class="[
-          !inputValue.trim() || submitting
-            ? 'bg-emerald-400 cursor-not-allowed'
-            : 'bg-emerald-600 hover:bg-emerald-700 cursor-pointer'
-        ]"
-        @click="handleConfirm"
-      >
-        {{ submitting ? submittingText : confirmText }}
-      </button>
-    </template>
-  </BaseModalShell>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, nextTick } from 'vue'
-import { DocumentDuplicateIcon } from '@heroicons/vue/24/outline'
-import BaseModalShell from './BaseModalShell.vue'
-import { useTheme } from '../composables/useTheme'
-import { useThemeClasses } from '../composables/useThemeClasses'
-import { useEscapeKey } from '../composables/useEscapeKey'
-
-interface Props {
-  title: string
-  message: string
-  initialValue?: string
-  placeholder?: string
-  inputLabel?: string
-  confirmText?: string
-  cancelText?: string
-  submittingText?: string
-  submitting?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  initialValue: '',
-  placeholder: 'Enter value...',
-  inputLabel: 'Name',
-  confirmText: 'Confirm',
-  cancelText: 'Cancel',
-  submittingText: 'Working...',
-  submitting: false,
-})
-
-const emit = defineEmits<{
-  confirm: [value: string]
-  cancel: []
-}>()
-
-const { isDark } = useTheme()
-const t = useThemeClasses()
-const inputValue = ref(props.initialValue)
-const nameInput = ref<HTMLInputElement | null>(null)
-
-onMounted(async () => {
-  await nextTick()
-  nameInput.value?.focus()
-})
-
-function handleConfirm() {
-  if (!inputValue.value.trim() || props.submitting) return
-  emit('confirm', inputValue.value.trim())
-}
-
-function handleCancel() {
-  emit('cancel')
-}
-
-// Backdrop click: only treat it as cancel if the user hasn't modified
-// the value. Otherwise a stray click outside the dialog would silently
-// throw away the typed input.
-function handleBackdropClick() {
-  if (inputValue.value.trim() === (props.initialValue ?? '').trim()) {
-    handleCancel()
-  }
-}
-
-// Escape always cancels.
-useEscapeKey(handleCancel)
-</script>
+<template>
+  <!--
+    Generic "ask the user for a single string and confirm" dialog.
+    Used for clone-name prompts, rename dialogs, etc.
+
+    Slots:
+      • icon — replace the default emerald-tinted document icon.
+
+    Preserves typed input on stray backdrop clicks (only treats the
+    click as cancel if the user hasn't modified the initial value).
+    Escape is always treated as an explicit dismissal.
+  -->
+  <BaseModalShell
+    :title="title"
+    :icon="DocumentDuplicateIcon"
+    manual-close
+    @backdrop="handleBackdropClick"
+  >
+    <!-- Forward a caller-supplied icon override; otherwise the shell
+         renders the default document icon in the standard emerald chip. -->
+    <template v-if="$slots.icon" #icon>
+      <slot name="icon" />
+    </template>
+
+    <p class="text-sm" :class="isDark ? 'text-gray-300' : 'text-gray-600'">
+      {{ message }}
+    </p>
+
+    <div class="mt-4">
+      <label
+        class="block text-sm font-medium mb-1"
+        :class="t.label"
+      >
+        {{ inputLabel }}
+      </label>
+      <input
+        ref="nameInput"
+        v-model="inputValue"
+        type="text"
+        :placeholder="placeholder"
+        class="w-full px-3 py-2 rounded-md border text-sm transition-colors"
+        :class="isDark
+          ? 'bg-gray-800 border-gray-600 text-gray-100 placeholder-gray-500 focus:outline-none focus:border-emerald-500'
+          : 'bg-white border-gray-300 text-gray-900 placeholder-gray-400 focus:outline-none focus:border-emerald-500'"
+        @keyup.enter="handleConfirm"
+      />
+    </div>
+
+    <template #footer>
+      <button
+        type="button"
+        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+        :class="t.ghostButton"
+        @click="handleCancel"
+      >
+        {{ cancelText }}
+      </button>
+      <button
+        type="button"
+        :disabled="!inputValue.trim() || submitting"
+        class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2"
+        :class="[
+          !inputValue.trim() || submitting
+            ? 'bg-emerald-400 cursor-not-allowed'
+            : 'bg-emerald-600 hover:bg-emerald-700 cursor-pointer'
+        ]"
+        @click="handleConfirm"
+      >
+        {{ submitting ? submittingText : confirmText }}
+      </button>
+    </template>
+  </BaseModalShell>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue'
+import { DocumentDuplicateIcon } from '@heroicons/vue/24/outline'
+import BaseModalShell from './BaseModalShell.vue'
+import { useTheme } from '../composables/useTheme'
+import { useThemeClasses } from '../composables/useThemeClasses'
+import { useEscapeKey } from '../composables/useEscapeKey'
+
+interface Props {
+  title: string
+  message: string
+  initialValue?: string
+  placeholder?: string
+  inputLabel?: string
+  confirmText?: string
+  cancelText?: string
+  submittingText?: string
+  submitting?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  initialValue: '',
+  placeholder: 'Enter value...',
+  inputLabel: 'Name',
+  confirmText: 'Confirm',
+  cancelText: 'Cancel',
+  submittingText: 'Working...',
+  submitting: false,
+})
+
+const emit = defineEmits<{
+  confirm: [value: string]
+  cancel: []
+}>()
+
+const { isDark } = useTheme()
+const t = useThemeClasses()
+const inputValue = ref(props.initialValue)
+const nameInput = ref<HTMLInputElement | null>(null)
+
+onMounted(async () => {
+  await nextTick()
+  nameInput.value?.focus()
+})
+
+function handleConfirm() {
+  if (!inputValue.value.trim() || props.submitting) return
+  emit('confirm', inputValue.value.trim())
+}
+
+function handleCancel() {
+  emit('cancel')
+}
+
+// Backdrop click: only treat it as cancel if the user hasn't modified
+// the value. Otherwise a stray click outside the dialog would silently
+// throw away the typed input.
+function handleBackdropClick() {
+  if (inputValue.value.trim() === (props.initialValue ?? '').trim()) {
+    handleCancel()
+  }
+}
+
+// Escape always cancels.
+useEscapeKey(handleCancel)
+</script>

package/src/components/BaseToolbarButton.test.ts

@@ -1,48 +1,48 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import BaseToolbarButton from './BaseToolbarButton.vue'
-
-describe('BaseToolbarButton', () => {
-  it('renders the neutral pill shape by default', () => {
-    const wrapper = mount(BaseToolbarButton, { props: { label: 'Refresh' } })
-    const cls = wrapper.find('button').classes()
-    expect(cls).toContain('rounded-lg')
-    expect(cls).toContain('py-2')
-    expect(cls).toContain('font-medium')
-    expect(cls).toContain('disabled:opacity-50')
-    expect(wrapper.text()).toBe('Refresh')
-  })
-
-  it('keeps the danger variant on the pill shape with the red palette', () => {
-    const wrapper = mount(BaseToolbarButton, {
-      props: { label: 'Delete', variant: 'danger' },
-    })
-    const cls = wrapper.find('button').classes()
-    expect(cls).toContain('rounded-lg')
-    expect(cls).toContain('bg-red-600')
-  })
-
-  it('renders the ghost variant as the slate h-9 rounded-md outline button', () => {
-    const wrapper = mount(BaseToolbarButton, {
-      props: { label: 'Close', variant: 'ghost' },
-    })
-    const cls = wrapper.find('button').classes()
-    expect(cls).toContain('h-9')
-    expect(cls).toContain('rounded-md')
-    expect(cls).toContain('px-4')
-    expect(cls).toContain('font-semibold')
-    expect(cls).toContain('border-slate-300')
-    expect(cls).toContain('disabled:opacity-40')
-    expect(cls).not.toContain('rounded-lg')
-    expect(cls).not.toContain('py-2')
-  })
-
-  it('emits click and honours disabled', async () => {
-    const wrapper = mount(BaseToolbarButton, { props: { label: 'Go' } })
-    await wrapper.find('button').trigger('click')
-    expect(wrapper.emitted('click')).toHaveLength(1)
-
-    const disabled = mount(BaseToolbarButton, { props: { label: 'Go', disabled: true } })
-    expect(disabled.find('button').attributes('disabled')).toBeDefined()
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseToolbarButton from './BaseToolbarButton.vue'
+
+describe('BaseToolbarButton', () => {
+  it('renders the neutral pill shape by default', () => {
+    const wrapper = mount(BaseToolbarButton, { props: { label: 'Refresh' } })
+    const cls = wrapper.find('button').classes()
+    expect(cls).toContain('rounded-lg')
+    expect(cls).toContain('py-2')
+    expect(cls).toContain('font-medium')
+    expect(cls).toContain('disabled:opacity-50')
+    expect(wrapper.text()).toBe('Refresh')
+  })
+
+  it('keeps the danger variant on the pill shape with the red palette', () => {
+    const wrapper = mount(BaseToolbarButton, {
+      props: { label: 'Delete', variant: 'danger' },
+    })
+    const cls = wrapper.find('button').classes()
+    expect(cls).toContain('rounded-lg')
+    expect(cls).toContain('bg-red-600')
+  })
+
+  it('renders the ghost variant as the slate h-9 rounded-md outline button', () => {
+    const wrapper = mount(BaseToolbarButton, {
+      props: { label: 'Close', variant: 'ghost' },
+    })
+    const cls = wrapper.find('button').classes()
+    expect(cls).toContain('h-9')
+    expect(cls).toContain('rounded-md')
+    expect(cls).toContain('px-4')
+    expect(cls).toContain('font-semibold')
+    expect(cls).toContain('border-slate-300')
+    expect(cls).toContain('disabled:opacity-40')
+    expect(cls).not.toContain('rounded-lg')
+    expect(cls).not.toContain('py-2')
+  })
+
+  it('emits click and honours disabled', async () => {
+    const wrapper = mount(BaseToolbarButton, { props: { label: 'Go' } })
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('click')).toHaveLength(1)
+
+    const disabled = mount(BaseToolbarButton, { props: { label: 'Go', disabled: true } })
+    expect(disabled.find('button').attributes('disabled')).toBeDefined()
+  })
+})

package/src/components/BaseToolbarButton.vue

@@ -1,94 +1,94 @@
-<template>
-  <!--
-    Bordered toolbar button — the "Refresh / Delete All" row that sits
-    under a page header. Pairs an optional leading icon with a label.
-
-    Slots:
-      • icon — leading Heroicon. Receives an `iconClass` slot prop
-        ('w-4 h-4') so callers can spread it onto their icon and still
-        add their own state classes (e.g. `:class="['animate-spin']"`).
-
-    Props:
-      • label    — button text (rendered in a <span>). Optional so an
-        icon-only toolbar button is possible.
-      • variant  — 'neutral' (default grey), 'danger' (solid red) or
-        'ghost' (slate outline — TradeAutomation's toolbar/footer idiom).
-      • disabled — greys out + blocks the click.
-      • title    — native tooltip / accessibility text.
-      • type     — native button type. Defaults to 'button' so the
-        button never accidentally submits a surrounding form.
-  -->
-  <button
-    :type="type"
-    :disabled="disabled"
-    :title="title"
-    class="inline-flex shrink-0 items-center gap-2 text-sm border transition-colors cursor-pointer disabled:cursor-not-allowed whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
-    :class="variantClass"
-    @click="$emit('click', $event)"
-  >
-    <slot name="icon" :icon-class="'w-4 h-4'" />
-    <span v-if="label">{{ label }}</span>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useTheme } from '../composables/useTheme'
-
-type ToolbarVariant = 'neutral' | 'danger' | 'ghost'
-
-const props = withDefaults(
-  defineProps<{
-    label?: string
-    variant?: ToolbarVariant
-    disabled?: boolean
-    title?: string
-    type?: 'button' | 'submit' | 'reset'
-  }>(),
-  {
-    label: '',
-    variant: 'neutral',
-    disabled: false,
-    title: undefined,
-    type: 'button',
-  },
-)
-
-defineEmits<{
-  click: [event: MouseEvent]
-}>()
-
-const { isDark } = useTheme()
-
-// Resolves the variant + theme into shape and colour classes. The danger
-// style is normalised here so every destructive toolbar button reads
-// identically (red-500 hover in dark, red-700 hover in light). Shape lives
-// per-variant because 'ghost' — the slate outline button extracted from
-// TradeAutomation's toolbars and modal footers — is a fixed-height
-// rounded-md button, not the neutral/danger pill; it themes via dark:
-// utilities so it renders the same markup in both themes.
-const SHAPE: Record<ToolbarVariant, string> = {
-  neutral: 'px-3 py-2 rounded-lg font-medium disabled:opacity-50',
-  danger: 'px-3 py-2 rounded-lg font-medium disabled:opacity-50',
-  ghost: 'h-9 px-4 rounded-md font-semibold disabled:opacity-40 disabled:hover:bg-slate-50 dark:disabled:hover:bg-slate-900',
-}
-
-const variantClass = computed(() => {
-  const palette: Record<ToolbarVariant, { dark: string; light: string }> = {
-    neutral: {
-      dark: 'bg-gray-800 text-gray-100 border-gray-700 hover:bg-gray-700',
-      light: 'bg-white text-gray-700 border-gray-200 hover:bg-gray-100',
-    },
-    danger: {
-      dark: 'bg-red-600 text-white border-red-600 hover:bg-red-500',
-      light: 'bg-red-600 text-white border-red-600 hover:bg-red-700',
-    },
-    ghost: {
-      dark: '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',
-      light: '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',
-    },
-  }
-  const entry = palette[props.variant]
-  return [SHAPE[props.variant], isDark.value ? entry.dark : entry.light]
-})
-</script>
+<template>
+  <!--
+    Bordered toolbar button — the "Refresh / Delete All" row that sits
+    under a page header. Pairs an optional leading icon with a label.
+
+    Slots:
+      • icon — leading Heroicon. Receives an `iconClass` slot prop
+        ('w-4 h-4') so callers can spread it onto their icon and still
+        add their own state classes (e.g. `:class="['animate-spin']"`).
+
+    Props:
+      • label    — button text (rendered in a <span>). Optional so an
+        icon-only toolbar button is possible.
+      • variant  — 'neutral' (default grey), 'danger' (solid red) or
+        'ghost' (slate outline — TradeAutomation's toolbar/footer idiom).
+      • disabled — greys out + blocks the click.
+      • title    — native tooltip / accessibility text.
+      • type     — native button type. Defaults to 'button' so the
+        button never accidentally submits a surrounding form.
+  -->
+  <button
+    :type="type"
+    :disabled="disabled"
+    :title="title"
+    class="inline-flex shrink-0 items-center gap-2 text-sm border transition-colors cursor-pointer disabled:cursor-not-allowed whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+    :class="variantClass"
+    @click="$emit('click', $event)"
+  >
+    <slot name="icon" :icon-class="'w-4 h-4'" />
+    <span v-if="label">{{ label }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+type ToolbarVariant = 'neutral' | 'danger' | 'ghost'
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    variant?: ToolbarVariant
+    disabled?: boolean
+    title?: string
+    type?: 'button' | 'submit' | 'reset'
+  }>(),
+  {
+    label: '',
+    variant: 'neutral',
+    disabled: false,
+    title: undefined,
+    type: 'button',
+  },
+)
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const { isDark } = useTheme()
+
+// Resolves the variant + theme into shape and colour classes. The danger
+// style is normalised here so every destructive toolbar button reads
+// identically (red-500 hover in dark, red-700 hover in light). Shape lives
+// per-variant because 'ghost' — the slate outline button extracted from
+// TradeAutomation's toolbars and modal footers — is a fixed-height
+// rounded-md button, not the neutral/danger pill; it themes via dark:
+// utilities so it renders the same markup in both themes.
+const SHAPE: Record<ToolbarVariant, string> = {
+  neutral: 'px-3 py-2 rounded-lg font-medium disabled:opacity-50',
+  danger: 'px-3 py-2 rounded-lg font-medium disabled:opacity-50',
+  ghost: 'h-9 px-4 rounded-md font-semibold disabled:opacity-40 disabled:hover:bg-slate-50 dark:disabled:hover:bg-slate-900',
+}
+
+const variantClass = computed(() => {
+  const palette: Record<ToolbarVariant, { dark: string; light: string }> = {
+    neutral: {
+      dark: 'bg-gray-800 text-gray-100 border-gray-700 hover:bg-gray-700',
+      light: 'bg-white text-gray-700 border-gray-200 hover:bg-gray-100',
+    },
+    danger: {
+      dark: 'bg-red-600 text-white border-red-600 hover:bg-red-500',
+      light: 'bg-red-600 text-white border-red-600 hover:bg-red-700',
+    },
+    ghost: {
+      dark: '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',
+      light: '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',
+    },
+  }
+  const entry = palette[props.variant]
+  return [SHAPE[props.variant], isDark.value ? entry.dark : entry.light]
+})
+</script>