mgv-backoffice 1.36.0 → 1.36.2

package/src/components/BaseConfirmModal.vue

@@ -1,114 +1,114 @@
-<template>
-  <BaseModalShell
-    :title="title"
-    :icon="ExclamationTriangleIcon"
-    :icon-bg-class="variant === 'danger'
-      ? isDark ? 'bg-red-900/30' : 'bg-red-50'
-      : isDark ? 'bg-amber-900/30' : 'bg-amber-50'"
-    :icon-class="variant === 'danger' ? 'text-red-600' : 'text-amber-600'"
-    :manual-close="submitting"
-    @cancel="handleCancel"
-  >
-    <!--
-      Default renders the plain `message` string. Callers that need rich
-      text (bold names, inline code, etc.) can override the `message` slot
-      and render their own markup — the `message` prop is still used as the
-      accessible/fallback text and by callers that don't override.
-    -->
-    <slot name="message">
-      <p class="text-sm" :class="isDark ? 'text-gray-300' : 'text-gray-600'">
-        {{ message }}
-      </p>
-    </slot>
-
-    <!--
-      Optional extra content rendered below the message — e.g. a warning
-      banner or an opt-in checkbox the caller wants the user to see before
-      confirming. Empty for the common confirm/cancel case.
-    -->
-    <slot />
-
-    <template #footer>
-      <button
-        type="button"
-        :disabled="submitting"
-        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
-        :class="[
-          t.ghostButton,
-          submitting ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer',
-        ]"
-        @click="handleCancel"
-      >
-        {{ cancelText }}
-      </button>
-
-      <button
-        type="button"
-        :disabled="submitting"
-        class="inline-flex items-center justify-center gap-2 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-offset-2"
-        :class="[
-          variant === 'danger' ? 'focus-visible:ring-red-500' : 'focus-visible:ring-emerald-500',
-          variant === 'danger'
-            ? submitting ? 'bg-red-400 cursor-not-allowed' : 'bg-red-600 hover:bg-red-700 cursor-pointer'
-            : submitting ? 'bg-emerald-400 cursor-not-allowed' : 'bg-emerald-600 hover:bg-emerald-700 cursor-pointer',
-        ]"
-        @click="handleConfirm"
-      >
-        <svg
-          v-if="submitting"
-          class="w-4 h-4 animate-spin"
-          fill="none"
-          viewBox="0 0 24 24"
-          aria-hidden="true"
-        >
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
-        </svg>
-        {{ submitting ? submittingText : confirmText }}
-      </button>
-    </template>
-  </BaseModalShell>
-</template>
-
-<script setup lang="ts">
-import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
-import BaseModalShell from './BaseModalShell.vue'
-import { useTheme } from '../composables/useTheme'
-import { useThemeClasses } from '../composables/useThemeClasses'
-
-interface Props {
-  title: string
-  message: string
-  confirmText?: string
-  cancelText?: string
-  submittingText?: string
-  variant?: 'danger' | 'warning'
-  submitting?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  confirmText: "Yes, I'm sure",
-  cancelText: 'No, cancel',
-  submittingText: 'Working...',
-  variant: 'danger',
-  submitting: false,
-})
-
-const emit = defineEmits<{
-  confirm: []
-  cancel: []
-}>()
-
-const { isDark } = useTheme()
-const t = useThemeClasses()
-
-function handleConfirm() {
-  if (props.submitting) return
-  emit('confirm')
-}
-
-function handleCancel() {
-  if (props.submitting) return
-  emit('cancel')
-}
-</script>
+<template>
+  <BaseModalShell
+    :title="title"
+    :icon="ExclamationTriangleIcon"
+    :icon-bg-class="variant === 'danger'
+      ? isDark ? 'bg-red-900/30' : 'bg-red-50'
+      : isDark ? 'bg-amber-900/30' : 'bg-amber-50'"
+    :icon-class="variant === 'danger' ? 'text-red-600' : 'text-amber-600'"
+    :manual-close="submitting"
+    @cancel="handleCancel"
+  >
+    <!--
+      Default renders the plain `message` string. Callers that need rich
+      text (bold names, inline code, etc.) can override the `message` slot
+      and render their own markup — the `message` prop is still used as the
+      accessible/fallback text and by callers that don't override.
+    -->
+    <slot name="message">
+      <p class="text-sm" :class="isDark ? 'text-gray-300' : 'text-gray-600'">
+        {{ message }}
+      </p>
+    </slot>
+
+    <!--
+      Optional extra content rendered below the message — e.g. a warning
+      banner or an opt-in checkbox the caller wants the user to see before
+      confirming. Empty for the common confirm/cancel case.
+    -->
+    <slot />
+
+    <template #footer>
+      <button
+        type="button"
+        :disabled="submitting"
+        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+        :class="[
+          t.ghostButton,
+          submitting ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer',
+        ]"
+        @click="handleCancel"
+      >
+        {{ cancelText }}
+      </button>
+
+      <button
+        type="button"
+        :disabled="submitting"
+        class="inline-flex items-center justify-center gap-2 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-offset-2"
+        :class="[
+          variant === 'danger' ? 'focus-visible:ring-red-500' : 'focus-visible:ring-emerald-500',
+          variant === 'danger'
+            ? submitting ? 'bg-red-400 cursor-not-allowed' : 'bg-red-600 hover:bg-red-700 cursor-pointer'
+            : submitting ? 'bg-emerald-400 cursor-not-allowed' : 'bg-emerald-600 hover:bg-emerald-700 cursor-pointer',
+        ]"
+        @click="handleConfirm"
+      >
+        <svg
+          v-if="submitting"
+          class="w-4 h-4 animate-spin"
+          fill="none"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+        </svg>
+        {{ submitting ? submittingText : confirmText }}
+      </button>
+    </template>
+  </BaseModalShell>
+</template>
+
+<script setup lang="ts">
+import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
+import BaseModalShell from './BaseModalShell.vue'
+import { useTheme } from '../composables/useTheme'
+import { useThemeClasses } from '../composables/useThemeClasses'
+
+interface Props {
+  title: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+  submittingText?: string
+  variant?: 'danger' | 'warning'
+  submitting?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  confirmText: "Yes, I'm sure",
+  cancelText: 'No, cancel',
+  submittingText: 'Working...',
+  variant: 'danger',
+  submitting: false,
+})
+
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+
+const { isDark } = useTheme()
+const t = useThemeClasses()
+
+function handleConfirm() {
+  if (props.submitting) return
+  emit('confirm')
+}
+
+function handleCancel() {
+  if (props.submitting) return
+  emit('cancel')
+}
+</script>

package/src/components/BaseCredentialsForm.test.ts

@@ -1,108 +1,108 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { flushPromises, mount } from '@vue/test-utils'
-import BaseCredentialsForm from './BaseCredentialsForm.vue'
-import type { CredentialsView } from './BaseCredentialsForm.vue'
-
-const view = (over: Partial<CredentialsView> = {}): CredentialsView => ({
-  keyId: 'PK123',
-  baseUrl: 'https://api.example.com',
-  dataUrl: 'https://data.example.com',
-  hasSecret: true,
-  ...over,
-})
-
-const defaults = { baseUrl: 'https://default.base', dataUrl: 'https://default.data' }
-
-function mountCard(fetchFn = vi.fn().mockResolvedValue(view()), updateFn = vi.fn()) {
-  const wrapper = mount(BaseCredentialsForm, {
-    props: { title: 'Alpaca API', idPrefix: 'alpaca', fetchFn, updateFn, defaults },
-  })
-  return { wrapper, fetchFn, updateFn }
-}
-
-beforeEach(() => {
-  localStorage.clear()
-})
-
-describe('BaseCredentialsForm', () => {
-  it('loads on mount and fills the form from the fetched view', async () => {
-    const { wrapper, fetchFn } = mountCard()
-    await flushPromises()
-    expect(fetchFn).toHaveBeenCalledTimes(1)
-    expect((wrapper.get('#alpaca-key-id').element as HTMLInputElement).value).toBe('PK123')
-    expect((wrapper.get('#alpaca-base-url').element as HTMLInputElement).value).toBe(
-      'https://api.example.com',
-    )
-  })
-
-  it('falls back to the defaults when the server has no URLs stored', async () => {
-    const { wrapper } = mountCard(
-      vi.fn().mockResolvedValue(view({ keyId: null, baseUrl: '', dataUrl: '', hasSecret: false })),
-    )
-    await flushPromises()
-    expect((wrapper.get('#alpaca-base-url').element as HTMLInputElement).value).toBe(
-      defaults.baseUrl,
-    )
-    expect((wrapper.get('#alpaca-data-url').element as HTMLInputElement).value).toBe(
-      defaults.dataUrl,
-    )
-  })
-
-  it('emits load-error when the fetch rejects', async () => {
-    const { wrapper } = mountCard(vi.fn().mockRejectedValue(new Error('boom')))
-    await flushPromises()
-    expect(wrapper.emitted('load-error')).toEqual([['boom']])
-  })
-
-  it('refuses to save without a key and emits the configured message', async () => {
-    const { wrapper, updateFn } = mountCard(
-      vi.fn().mockResolvedValue(view({ keyId: null, hasSecret: false })),
-    )
-    await flushPromises()
-    await wrapper.get('button').trigger('click')
-    expect(updateFn).not.toHaveBeenCalled()
-    expect(wrapper.emitted('error')?.[0]).toEqual(['API key is required.'])
-  })
-
-  it('requires a secret only while none is stored', async () => {
-    const { wrapper, updateFn } = mountCard(
-      vi.fn().mockResolvedValue(view({ hasSecret: false })),
-    )
-    await flushPromises()
-    await wrapper.get('button').trigger('click')
-    expect(updateFn).not.toHaveBeenCalled()
-    expect(wrapper.emitted('error')?.[0]).toEqual(['Secret key is required.'])
-  })
-
-  it('saves trimmed values, omits a blank secret, and emits saved', async () => {
-    const updateFn = vi.fn().mockResolvedValue(view())
-    const { wrapper } = mountCard(vi.fn().mockResolvedValue(view()), updateFn)
-    await flushPromises()
-    await wrapper.get('#alpaca-key-id').setValue('  PK999  ')
-    await wrapper.get('button').trigger('click')
-    await flushPromises()
-    expect(updateFn).toHaveBeenCalledWith({
-      keyId: 'PK999',
-      secretKey: undefined,
-      baseUrl: 'https://api.example.com',
-      dataUrl: 'https://data.example.com',
-    })
-    expect(wrapper.emitted('saved')).toEqual([['Credentials saved.']])
-  })
-
-  it('emits error with the server message when the update rejects', async () => {
-    const updateFn = vi.fn().mockRejectedValue(new Error('validation failed'))
-    const { wrapper } = mountCard(vi.fn().mockResolvedValue(view()), updateFn)
-    await flushPromises()
-    await wrapper.get('button').trigger('click')
-    await flushPromises()
-    expect(wrapper.emitted('error')?.[0]).toEqual(['validation failed'])
-  })
-
-  it('exposes load() so a parent Reload can re-pull the card', async () => {
-    const { wrapper, fetchFn } = mountCard()
-    await flushPromises()
-    await (wrapper.vm as unknown as { load: () => Promise<void> }).load()
-    expect(fetchFn).toHaveBeenCalledTimes(2)
-  })
-})
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import BaseCredentialsForm from './BaseCredentialsForm.vue'
+import type { CredentialsView } from './BaseCredentialsForm.vue'
+
+const view = (over: Partial<CredentialsView> = {}): CredentialsView => ({
+  keyId: 'PK123',
+  baseUrl: 'https://api.example.com',
+  dataUrl: 'https://data.example.com',
+  hasSecret: true,
+  ...over,
+})
+
+const defaults = { baseUrl: 'https://default.base', dataUrl: 'https://default.data' }
+
+function mountCard(fetchFn = vi.fn().mockResolvedValue(view()), updateFn = vi.fn()) {
+  const wrapper = mount(BaseCredentialsForm, {
+    props: { title: 'Alpaca API', idPrefix: 'alpaca', fetchFn, updateFn, defaults },
+  })
+  return { wrapper, fetchFn, updateFn }
+}
+
+beforeEach(() => {
+  localStorage.clear()
+})
+
+describe('BaseCredentialsForm', () => {
+  it('loads on mount and fills the form from the fetched view', async () => {
+    const { wrapper, fetchFn } = mountCard()
+    await flushPromises()
+    expect(fetchFn).toHaveBeenCalledTimes(1)
+    expect((wrapper.get('#alpaca-key-id').element as HTMLInputElement).value).toBe('PK123')
+    expect((wrapper.get('#alpaca-base-url').element as HTMLInputElement).value).toBe(
+      'https://api.example.com',
+    )
+  })
+
+  it('falls back to the defaults when the server has no URLs stored', async () => {
+    const { wrapper } = mountCard(
+      vi.fn().mockResolvedValue(view({ keyId: null, baseUrl: '', dataUrl: '', hasSecret: false })),
+    )
+    await flushPromises()
+    expect((wrapper.get('#alpaca-base-url').element as HTMLInputElement).value).toBe(
+      defaults.baseUrl,
+    )
+    expect((wrapper.get('#alpaca-data-url').element as HTMLInputElement).value).toBe(
+      defaults.dataUrl,
+    )
+  })
+
+  it('emits load-error when the fetch rejects', async () => {
+    const { wrapper } = mountCard(vi.fn().mockRejectedValue(new Error('boom')))
+    await flushPromises()
+    expect(wrapper.emitted('load-error')).toEqual([['boom']])
+  })
+
+  it('refuses to save without a key and emits the configured message', async () => {
+    const { wrapper, updateFn } = mountCard(
+      vi.fn().mockResolvedValue(view({ keyId: null, hasSecret: false })),
+    )
+    await flushPromises()
+    await wrapper.get('button').trigger('click')
+    expect(updateFn).not.toHaveBeenCalled()
+    expect(wrapper.emitted('error')?.[0]).toEqual(['API key is required.'])
+  })
+
+  it('requires a secret only while none is stored', async () => {
+    const { wrapper, updateFn } = mountCard(
+      vi.fn().mockResolvedValue(view({ hasSecret: false })),
+    )
+    await flushPromises()
+    await wrapper.get('button').trigger('click')
+    expect(updateFn).not.toHaveBeenCalled()
+    expect(wrapper.emitted('error')?.[0]).toEqual(['Secret key is required.'])
+  })
+
+  it('saves trimmed values, omits a blank secret, and emits saved', async () => {
+    const updateFn = vi.fn().mockResolvedValue(view())
+    const { wrapper } = mountCard(vi.fn().mockResolvedValue(view()), updateFn)
+    await flushPromises()
+    await wrapper.get('#alpaca-key-id').setValue('  PK999  ')
+    await wrapper.get('button').trigger('click')
+    await flushPromises()
+    expect(updateFn).toHaveBeenCalledWith({
+      keyId: 'PK999',
+      secretKey: undefined,
+      baseUrl: 'https://api.example.com',
+      dataUrl: 'https://data.example.com',
+    })
+    expect(wrapper.emitted('saved')).toEqual([['Credentials saved.']])
+  })
+
+  it('emits error with the server message when the update rejects', async () => {
+    const updateFn = vi.fn().mockRejectedValue(new Error('validation failed'))
+    const { wrapper } = mountCard(vi.fn().mockResolvedValue(view()), updateFn)
+    await flushPromises()
+    await wrapper.get('button').trigger('click')
+    await flushPromises()
+    expect(wrapper.emitted('error')?.[0]).toEqual(['validation failed'])
+  })
+
+  it('exposes load() so a parent Reload can re-pull the card', async () => {
+    const { wrapper, fetchFn } = mountCard()
+    await flushPromises()
+    await (wrapper.vm as unknown as { load: () => Promise<void> }).load()
+    expect(fetchFn).toHaveBeenCalledTimes(2)
+  })
+})