mgv-backoffice 1.36.0 → 1.36.2

package/src/components/BaseCredentialsForm.vue

@@ -1,241 +1,241 @@
-<script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
-import BaseButton from './BaseButton.vue'
-import BaseInput from './BaseInput.vue'
-import BaseRow from './BaseRow.vue'
-import BaseSpinner from './BaseSpinner.vue'
-import { BaseButtonEnum } from '../enums/BaseButtonEnum'
-
-// One service's API-credentials card (extracted from TradeAutomation's
-// Settings page, where three venue blocks shared this exact shape). Owns the
-// form state, the has-secret handling, the save-validation ladder and the
-// template; parameterised by the service-specific bits (labels, copy,
-// endpoints, default URLs). Load/save results are EMITTED — the parent owns
-// toasts / error banners.
-
-// The non-secret credentials view the service's config endpoint returns. The
-// secret is never returned — `hasSecret` reports whether one is stored.
-export interface CredentialsView {
-  keyId: string | null
-  baseUrl: string
-  dataUrl: string
-  hasSecret: boolean
-}
-
-export interface CredentialsUpdate {
-  keyId: string
-  // Omitted when blank so the server keeps the currently-stored secret.
-  secretKey?: string
-  baseUrl: string
-  dataUrl: string
-}
-
-const props = withDefaults(
-  defineProps<{
-    // Card heading, e.g. "Alpaca API"; subtitle renders under it when set.
-    title: string
-    subtitle?: string
-    // Unique prefix for the input ids so the label/for pairs stay unambiguous
-    // when several of these cards render on one page.
-    idPrefix: string
-    // Service-specific labels / placeholders / messages.
-    keyLabel?: string
-    keyPlaceholder?: string
-    secretLabel?: string
-    // Placeholder while NO secret is stored (a stored one shows the dots).
-    secretPlaceholder?: string
-    // Help line while a secret IS stored.
-    secretSetHint?: string
-    // Help line while no secret is stored (e.g. which API permissions the key
-    // needs). Override the `no-secret-hint` slot instead when markup is needed.
-    permissionsHint?: string
-    requiredKeyMessage?: string
-    requiredSecretMessage?: string
-    savedMessage?: string
-    saveLabel?: string
-    // Service endpoints + the URLs the form falls back to when the server has
-    // none stored yet.
-    fetchFn: () => Promise<CredentialsView>
-    updateFn: (body: CredentialsUpdate) => Promise<CredentialsView>
-    defaults: { baseUrl: string; dataUrl: string }
-  }>(),
-  {
-    subtitle: '',
-    keyLabel: 'API Key',
-    keyPlaceholder: '',
-    secretLabel: 'Secret Key',
-    secretPlaceholder: 'Enter secret key',
-    secretSetHint: 'A secret is currently set. Leave blank to keep it.',
-    permissionsHint: '',
-    requiredKeyMessage: 'API key is required.',
-    requiredSecretMessage: 'Secret key is required.',
-    savedMessage: 'Credentials saved.',
-    saveLabel: 'Save credentials',
-  },
-)
-
-const emit = defineEmits<{
-  // Save outcomes → parent toasts.
-  (e: 'saved', message: string): void
-  (e: 'error', message: string): void
-  // Initial/re-load failure. Payload is the raw error message ('' when there
-  // is none) — the parent decides how loudly to surface it.
-  (e: 'load-error', message: string): void
-}>()
-
-const saving = ref(false)
-const hasSecret = ref(false)
-
-const form = reactive({
-  keyId: '',
-  secretKey: '',
-  baseUrl: props.defaults.baseUrl,
-  dataUrl: props.defaults.dataUrl,
-})
-
-async function load() {
-  try {
-    const cfg = await props.fetchFn()
-    form.keyId = cfg.keyId ?? ''
-    form.baseUrl = cfg.baseUrl || props.defaults.baseUrl
-    form.dataUrl = cfg.dataUrl || props.defaults.dataUrl
-    form.secretKey = '' // never returned by the API
-    hasSecret.value = cfg.hasSecret
-  } catch (e: unknown) {
-    emit('load-error', e instanceof Error ? e.message : '')
-  }
-}
-
-function isBlank(v: string): boolean {
-  return !v || !v.trim()
-}
-
-async function save() {
-  // Re-entrancy guard: a save may trigger a LIVE credential validation
-  // against the service, so a double-click must not fire two concurrent PUTs.
-  // Paired with the button's isDisable below — this is the belt to its braces.
-  if (saving.value) return
-  if (isBlank(form.keyId)) {
-    emit('error', props.requiredKeyMessage)
-    return
-  }
-  if (!hasSecret.value && isBlank(form.secretKey)) {
-    emit('error', props.requiredSecretMessage)
-    return
-  }
-  if (isBlank(form.baseUrl) || isBlank(form.dataUrl)) {
-    emit('error', 'Base URL and Data URL are required.')
-    return
-  }
-  saving.value = true
-  try {
-    const applied = await props.updateFn({
-      keyId: form.keyId.trim(),
-      // Omit when blank so the server keeps the stored secret.
-      secretKey: isBlank(form.secretKey) ? undefined : form.secretKey.trim(),
-      baseUrl: form.baseUrl.trim(),
-      dataUrl: form.dataUrl.trim(),
-    })
-    hasSecret.value = applied.hasSecret
-    form.secretKey = ''
-    emit('saved', props.savedMessage)
-  } catch (e: unknown) {
-    emit('error', e instanceof Error ? e.message : 'Failed to save')
-  } finally {
-    saving.value = false
-  }
-}
-
-onMounted(load)
-
-// The parent's Reload button can re-pull every card in parallel via this.
-defineExpose({ load })
-
-// One-off styling on top of BaseInput's shared field skin.
-const inputClass = 'placeholder:text-slate-400 dark:placeholder:text-slate-500 font-mono'
-</script>
-
-<template>
-  <BaseRow class="!p-6">
-    <div class="flex items-center justify-between mb-4">
-      <div>
-        <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">{{ title }}</h2>
-        <p v-if="subtitle" class="text-xs text-slate-500 dark:text-slate-400">
-          {{ subtitle }}
-        </p>
-      </div>
-      <span v-if="saving" class="inline-flex items-center gap-2 text-xs text-slate-500">
-        <BaseSpinner class="!h-4 !w-4" />
-        Saving…
-      </span>
-    </div>
-
-    <div class="grid gap-4 md:grid-cols-2">
-      <div class="md:col-span-2">
-        <label
-          :for="`${idPrefix}-key-id`"
-          class="block text-xs uppercase tracking-wide text-slate-500 mb-1"
-        >{{ keyLabel }}</label>
-        <BaseInput
-          :id="`${idPrefix}-key-id`"
-          v-model="form.keyId"
-          type="text"
-          autocomplete="off"
-          :placeholder="keyPlaceholder"
-          :class="inputClass"
-        />
-      </div>
-
-      <div class="md:col-span-2">
-        <label
-          :for="`${idPrefix}-secret`"
-          class="block text-xs uppercase tracking-wide text-slate-500 mb-1"
-        >{{ secretLabel }}</label>
-        <BaseInput
-          :id="`${idPrefix}-secret`"
-          v-model="form.secretKey"
-          type="password"
-          autocomplete="new-password"
-          :placeholder="hasSecret ? '•••••••• (unchanged — type to replace)' : secretPlaceholder"
-          :class="inputClass"
-        />
-        <p class="text-[11px] text-slate-500 mt-1">
-          <template v-if="hasSecret">{{ secretSetHint }}</template>
-          <template v-else><slot name="no-secret-hint">{{ permissionsHint }}</slot></template>
-        </p>
-      </div>
-
-      <div class="md:col-span-2">
-        <label
-          :for="`${idPrefix}-base-url`"
-          class="block text-xs uppercase tracking-wide text-slate-500 mb-1"
-        >Base URL (trading)</label>
-        <BaseInput :id="`${idPrefix}-base-url`" v-model="form.baseUrl" type="text" :class="inputClass" />
-        <!-- Service-specific extras under the Base URL field (e.g. live/paper
-             shortcut buttons). Scoped so the parent can write into the form. -->
-        <slot name="base-url-extra" :form="form" />
-      </div>
-
-      <div class="md:col-span-2">
-        <label
-          :for="`${idPrefix}-data-url`"
-          class="block text-xs uppercase tracking-wide text-slate-500 mb-1"
-        >Data URL (market data)</label>
-        <BaseInput :id="`${idPrefix}-data-url`" v-model="form.dataUrl" type="text" :class="inputClass" />
-      </div>
-
-      <div class="md:col-span-2">
-        <BaseButton
-          :color="BaseButtonEnum.GREEN"
-          :description="saveLabel"
-          :isDisable="saving"
-          :isLoading="saving"
-          @click="save"
-        />
-      </div>
-    </div>
-
-    <!-- Service-specific extras below the credentials form. -->
-    <slot name="footer" />
-  </BaseRow>
-</template>
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import BaseButton from './BaseButton.vue'
+import BaseInput from './BaseInput.vue'
+import BaseRow from './BaseRow.vue'
+import BaseSpinner from './BaseSpinner.vue'
+import { BaseButtonEnum } from '../enums/BaseButtonEnum'
+
+// One service's API-credentials card (extracted from TradeAutomation's
+// Settings page, where three venue blocks shared this exact shape). Owns the
+// form state, the has-secret handling, the save-validation ladder and the
+// template; parameterised by the service-specific bits (labels, copy,
+// endpoints, default URLs). Load/save results are EMITTED — the parent owns
+// toasts / error banners.
+
+// The non-secret credentials view the service's config endpoint returns. The
+// secret is never returned — `hasSecret` reports whether one is stored.
+export interface CredentialsView {
+  keyId: string | null
+  baseUrl: string
+  dataUrl: string
+  hasSecret: boolean
+}
+
+export interface CredentialsUpdate {
+  keyId: string
+  // Omitted when blank so the server keeps the currently-stored secret.
+  secretKey?: string
+  baseUrl: string
+  dataUrl: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    // Card heading, e.g. "Alpaca API"; subtitle renders under it when set.
+    title: string
+    subtitle?: string
+    // Unique prefix for the input ids so the label/for pairs stay unambiguous
+    // when several of these cards render on one page.
+    idPrefix: string
+    // Service-specific labels / placeholders / messages.
+    keyLabel?: string
+    keyPlaceholder?: string
+    secretLabel?: string
+    // Placeholder while NO secret is stored (a stored one shows the dots).
+    secretPlaceholder?: string
+    // Help line while a secret IS stored.
+    secretSetHint?: string
+    // Help line while no secret is stored (e.g. which API permissions the key
+    // needs). Override the `no-secret-hint` slot instead when markup is needed.
+    permissionsHint?: string
+    requiredKeyMessage?: string
+    requiredSecretMessage?: string
+    savedMessage?: string
+    saveLabel?: string
+    // Service endpoints + the URLs the form falls back to when the server has
+    // none stored yet.
+    fetchFn: () => Promise<CredentialsView>
+    updateFn: (body: CredentialsUpdate) => Promise<CredentialsView>
+    defaults: { baseUrl: string; dataUrl: string }
+  }>(),
+  {
+    subtitle: '',
+    keyLabel: 'API Key',
+    keyPlaceholder: '',
+    secretLabel: 'Secret Key',
+    secretPlaceholder: 'Enter secret key',
+    secretSetHint: 'A secret is currently set. Leave blank to keep it.',
+    permissionsHint: '',
+    requiredKeyMessage: 'API key is required.',
+    requiredSecretMessage: 'Secret key is required.',
+    savedMessage: 'Credentials saved.',
+    saveLabel: 'Save credentials',
+  },
+)
+
+const emit = defineEmits<{
+  // Save outcomes → parent toasts.
+  (e: 'saved', message: string): void
+  (e: 'error', message: string): void
+  // Initial/re-load failure. Payload is the raw error message ('' when there
+  // is none) — the parent decides how loudly to surface it.
+  (e: 'load-error', message: string): void
+}>()
+
+const saving = ref(false)
+const hasSecret = ref(false)
+
+const form = reactive({
+  keyId: '',
+  secretKey: '',
+  baseUrl: props.defaults.baseUrl,
+  dataUrl: props.defaults.dataUrl,
+})
+
+async function load() {
+  try {
+    const cfg = await props.fetchFn()
+    form.keyId = cfg.keyId ?? ''
+    form.baseUrl = cfg.baseUrl || props.defaults.baseUrl
+    form.dataUrl = cfg.dataUrl || props.defaults.dataUrl
+    form.secretKey = '' // never returned by the API
+    hasSecret.value = cfg.hasSecret
+  } catch (e: unknown) {
+    emit('load-error', e instanceof Error ? e.message : '')
+  }
+}
+
+function isBlank(v: string): boolean {
+  return !v || !v.trim()
+}
+
+async function save() {
+  // Re-entrancy guard: a save may trigger a LIVE credential validation
+  // against the service, so a double-click must not fire two concurrent PUTs.
+  // Paired with the button's isDisable below — this is the belt to its braces.
+  if (saving.value) return
+  if (isBlank(form.keyId)) {
+    emit('error', props.requiredKeyMessage)
+    return
+  }
+  if (!hasSecret.value && isBlank(form.secretKey)) {
+    emit('error', props.requiredSecretMessage)
+    return
+  }
+  if (isBlank(form.baseUrl) || isBlank(form.dataUrl)) {
+    emit('error', 'Base URL and Data URL are required.')
+    return
+  }
+  saving.value = true
+  try {
+    const applied = await props.updateFn({
+      keyId: form.keyId.trim(),
+      // Omit when blank so the server keeps the stored secret.
+      secretKey: isBlank(form.secretKey) ? undefined : form.secretKey.trim(),
+      baseUrl: form.baseUrl.trim(),
+      dataUrl: form.dataUrl.trim(),
+    })
+    hasSecret.value = applied.hasSecret
+    form.secretKey = ''
+    emit('saved', props.savedMessage)
+  } catch (e: unknown) {
+    emit('error', e instanceof Error ? e.message : 'Failed to save')
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(load)
+
+// The parent's Reload button can re-pull every card in parallel via this.
+defineExpose({ load })
+
+// One-off styling on top of BaseInput's shared field skin.
+const inputClass = 'placeholder:text-slate-400 dark:placeholder:text-slate-500 font-mono'
+</script>
+
+<template>
+  <BaseRow class="!p-6">
+    <div class="flex items-center justify-between mb-4">
+      <div>
+        <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">{{ title }}</h2>
+        <p v-if="subtitle" class="text-xs text-slate-500 dark:text-slate-400">
+          {{ subtitle }}
+        </p>
+      </div>
+      <span v-if="saving" class="inline-flex items-center gap-2 text-xs text-slate-500">
+        <BaseSpinner class="!h-4 !w-4" />
+        Saving…
+      </span>
+    </div>
+
+    <div class="grid gap-4 md:grid-cols-2">
+      <div class="md:col-span-2">
+        <label
+          :for="`${idPrefix}-key-id`"
+          class="block text-xs uppercase tracking-wide text-slate-500 mb-1"
+        >{{ keyLabel }}</label>
+        <BaseInput
+          :id="`${idPrefix}-key-id`"
+          v-model="form.keyId"
+          type="text"
+          autocomplete="off"
+          :placeholder="keyPlaceholder"
+          :class="inputClass"
+        />
+      </div>
+
+      <div class="md:col-span-2">
+        <label
+          :for="`${idPrefix}-secret`"
+          class="block text-xs uppercase tracking-wide text-slate-500 mb-1"
+        >{{ secretLabel }}</label>
+        <BaseInput
+          :id="`${idPrefix}-secret`"
+          v-model="form.secretKey"
+          type="password"
+          autocomplete="new-password"
+          :placeholder="hasSecret ? '•••••••• (unchanged — type to replace)' : secretPlaceholder"
+          :class="inputClass"
+        />
+        <p class="text-[11px] text-slate-500 mt-1">
+          <template v-if="hasSecret">{{ secretSetHint }}</template>
+          <template v-else><slot name="no-secret-hint">{{ permissionsHint }}</slot></template>
+        </p>
+      </div>
+
+      <div class="md:col-span-2">
+        <label
+          :for="`${idPrefix}-base-url`"
+          class="block text-xs uppercase tracking-wide text-slate-500 mb-1"
+        >Base URL (trading)</label>
+        <BaseInput :id="`${idPrefix}-base-url`" v-model="form.baseUrl" type="text" :class="inputClass" />
+        <!-- Service-specific extras under the Base URL field (e.g. live/paper
+             shortcut buttons). Scoped so the parent can write into the form. -->
+        <slot name="base-url-extra" :form="form" />
+      </div>
+
+      <div class="md:col-span-2">
+        <label
+          :for="`${idPrefix}-data-url`"
+          class="block text-xs uppercase tracking-wide text-slate-500 mb-1"
+        >Data URL (market data)</label>
+        <BaseInput :id="`${idPrefix}-data-url`" v-model="form.dataUrl" type="text" :class="inputClass" />
+      </div>
+
+      <div class="md:col-span-2">
+        <BaseButton
+          :color="BaseButtonEnum.GREEN"
+          :description="saveLabel"
+          :isDisable="saving"
+          :isLoading="saving"
+          @click="save"
+        />
+      </div>
+    </div>
+
+    <!-- Service-specific extras below the credentials form. -->
+    <slot name="footer" />
+  </BaseRow>
+</template>

package/src/components/BaseDropdown.test.ts

@@ -1,87 +1,87 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import BaseDropdown from './BaseDropdown.vue'
-import type { DropdownOption } from '../types/dropdown'
-
-const options: DropdownOption[] = [
-  { value: '1', label: 'Alice' },
-  { value: '2', label: 'Bob', title: 'Bob the builder' },
-  { value: '3', label: 'Carol', disabled: true },
-]
-
-describe('BaseDropdown', () => {
-  it('shows the placeholder when nothing is selected', () => {
-    const wrapper = mount(BaseDropdown, {
-      props: { options, modelValue: null, placeholder: 'Select Social User' },
-    })
-    const trigger = wrapper.get('button')
-    expect(trigger.text()).toContain('Select Social User')
-    expect(trigger.attributes('aria-expanded')).toBe('false')
-    // Menu is closed until the trigger is clicked.
-    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
-  })
-
-  it('shows the selected option label instead of the placeholder', () => {
-    const wrapper = mount(BaseDropdown, {
-      props: { options, modelValue: '2', placeholder: 'Select Social User' },
-    })
-    expect(wrapper.get('button').text()).toContain('Bob')
-    expect(wrapper.get('button').text()).not.toContain('Select Social User')
-  })
-
-  it('opens the menu and renders one row per option on click', async () => {
-    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
-    await wrapper.get('button').trigger('click')
-    expect(wrapper.get('button').attributes('aria-expanded')).toBe('true')
-    const rows = wrapper.findAll('[role="option"]')
-    expect(rows.map((r) => r.text())).toEqual(['Alice', 'Bob', 'Carol'])
-    expect(rows[1].attributes('title')).toBe('Bob the builder')
-  })
-
-  it('emits update:modelValue and closes when a row is chosen', async () => {
-    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
-    await wrapper.get('button').trigger('click')
-    await wrapper.findAll('[role="option"] button')[1].trigger('click')
-    expect(wrapper.emitted('update:modelValue')).toEqual([['2']])
-    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
-  })
-
-  it('does not emit for a disabled row', async () => {
-    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
-    await wrapper.get('button').trigger('click')
-    await wrapper.findAll('[role="option"] button')[2].trigger('click')
-    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
-  })
-
-  it('marks the selected row with aria-selected and the active fill', async () => {
-    const wrapper = mount(BaseDropdown, { props: { options, modelValue: '1' } })
-    await wrapper.get('button').trigger('click')
-    const rows = wrapper.findAll('[role="option"]')
-    expect(rows[0].attributes('aria-selected')).toBe('true')
-    expect(rows[1].attributes('aria-selected')).toBe('false')
-    expect(rows[0].get('button').classes()).toContain('bg-emerald-500')
-  })
-
-  it('replaces the default trigger skin when triggerClass is set', () => {
-    const wrapper = mount(BaseDropdown, {
-      props: { options, modelValue: '1', triggerClass: 'rounded border bg-red-100 text-red-700 px-1.5 py-0.5' },
-    })
-    const classes = wrapper.get('button').classes()
-    // Custom skin applied…
-    expect(classes).toContain('bg-red-100')
-    expect(classes).toContain('text-red-700')
-    // …and the default slate skin dropped (layout/focus classes remain).
-    expect(classes).not.toContain('border-slate-300')
-    expect(classes).not.toContain('bg-white')
-    expect(classes).toContain('cursor-pointer')
-  })
-
-  it('sizes the chevron via chevronClass', () => {
-    const wrapper = mount(BaseDropdown, {
-      props: { options, modelValue: '1', chevronClass: 'w-3 h-3' },
-    })
-    const chevron = wrapper.get('button svg')
-    expect(chevron.classes()).toContain('w-3')
-    expect(chevron.classes()).not.toContain('w-5')
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseDropdown from './BaseDropdown.vue'
+import type { DropdownOption } from '../types/dropdown'
+
+const options: DropdownOption[] = [
+  { value: '1', label: 'Alice' },
+  { value: '2', label: 'Bob', title: 'Bob the builder' },
+  { value: '3', label: 'Carol', disabled: true },
+]
+
+describe('BaseDropdown', () => {
+  it('shows the placeholder when nothing is selected', () => {
+    const wrapper = mount(BaseDropdown, {
+      props: { options, modelValue: null, placeholder: 'Select Social User' },
+    })
+    const trigger = wrapper.get('button')
+    expect(trigger.text()).toContain('Select Social User')
+    expect(trigger.attributes('aria-expanded')).toBe('false')
+    // Menu is closed until the trigger is clicked.
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+  })
+
+  it('shows the selected option label instead of the placeholder', () => {
+    const wrapper = mount(BaseDropdown, {
+      props: { options, modelValue: '2', placeholder: 'Select Social User' },
+    })
+    expect(wrapper.get('button').text()).toContain('Bob')
+    expect(wrapper.get('button').text()).not.toContain('Select Social User')
+  })
+
+  it('opens the menu and renders one row per option on click', async () => {
+    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
+    await wrapper.get('button').trigger('click')
+    expect(wrapper.get('button').attributes('aria-expanded')).toBe('true')
+    const rows = wrapper.findAll('[role="option"]')
+    expect(rows.map((r) => r.text())).toEqual(['Alice', 'Bob', 'Carol'])
+    expect(rows[1].attributes('title')).toBe('Bob the builder')
+  })
+
+  it('emits update:modelValue and closes when a row is chosen', async () => {
+    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
+    await wrapper.get('button').trigger('click')
+    await wrapper.findAll('[role="option"] button')[1].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toEqual([['2']])
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+  })
+
+  it('does not emit for a disabled row', async () => {
+    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
+    await wrapper.get('button').trigger('click')
+    await wrapper.findAll('[role="option"] button')[2].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('marks the selected row with aria-selected and the active fill', async () => {
+    const wrapper = mount(BaseDropdown, { props: { options, modelValue: '1' } })
+    await wrapper.get('button').trigger('click')
+    const rows = wrapper.findAll('[role="option"]')
+    expect(rows[0].attributes('aria-selected')).toBe('true')
+    expect(rows[1].attributes('aria-selected')).toBe('false')
+    expect(rows[0].get('button').classes()).toContain('bg-emerald-500')
+  })
+
+  it('replaces the default trigger skin when triggerClass is set', () => {
+    const wrapper = mount(BaseDropdown, {
+      props: { options, modelValue: '1', triggerClass: 'rounded border bg-red-100 text-red-700 px-1.5 py-0.5' },
+    })
+    const classes = wrapper.get('button').classes()
+    // Custom skin applied…
+    expect(classes).toContain('bg-red-100')
+    expect(classes).toContain('text-red-700')
+    // …and the default slate skin dropped (layout/focus classes remain).
+    expect(classes).not.toContain('border-slate-300')
+    expect(classes).not.toContain('bg-white')
+    expect(classes).toContain('cursor-pointer')
+  })
+
+  it('sizes the chevron via chevronClass', () => {
+    const wrapper = mount(BaseDropdown, {
+      props: { options, modelValue: '1', chevronClass: 'w-3 h-3' },
+    })
+    const chevron = wrapper.get('button svg')
+    expect(chevron.classes()).toContain('w-3')
+    expect(chevron.classes()).not.toContain('w-5')
+  })
+})