mgv-backoffice 1.22.0 → 1.24.0

package/src/components/BaseDropdown.vue

@@ -0,0 +1,154 @@
+<template>
+  <!--
+    Button-style single-select dropdown ("Select Social User ⌄"). Unlike
+    BaseSelect (a themed native <select>), this renders a trigger button plus
+    a floating menu, so the closed control shows a placeholder and a chevron
+    that rotates while open — matching the app's filter dropdowns.
+
+    Options are passed as data (not <option> slots) so the menu rows can carry
+    tooltips and disabled state. Selecting a row emits its `value` and closes
+    the menu; Escape and an outside click also close it.
+
+    Same `dark:`-variant note as BaseSelect: the slate skin ships static
+    light/dark classes so consumers get both themes without extra config.
+  -->
+  <div
+    ref="rootEl"
+    :class="block ? 'relative w-full' : 'relative inline-block'"
+  >
+    <button
+      type="button"
+      :class="[triggerClass, block ? 'w-full' : '']"
+      :disabled="disabled"
+      :aria-label="ariaLabel || undefined"
+      aria-haspopup="listbox"
+      :aria-expanded="open"
+      @click="toggle"
+    >
+      <span :class="selectedOption ? '' : 'text-slate-400 dark:text-slate-500'">
+        {{ selectedOption ? selectedOption.label : placeholder }}
+      </span>
+      <ChevronDownIcon
+        class="w-5 h-5 shrink-0 text-slate-500 dark:text-slate-400 transition-transform"
+        :class="open ? 'rotate-180' : ''"
+        aria-hidden="true"
+      />
+    </button>
+
+    <ul
+      v-if="open"
+      role="listbox"
+      :aria-label="ariaLabel || placeholder"
+      class="absolute z-20 mt-1 w-full max-h-60 overflow-auto rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 py-1 shadow-lg focus:outline-none"
+    >
+      <li
+        v-for="opt in options"
+        :key="String(opt.value)"
+        role="option"
+        :aria-selected="opt.value === modelValue"
+        :title="opt.title"
+      >
+        <button
+          type="button"
+          :disabled="opt.disabled"
+          :class="rowClass(opt)"
+          @click="select(opt)"
+        >
+          {{ opt.label }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { ChevronDownIcon } from '@heroicons/vue/24/outline'
+import { useEscapeKey } from '../composables/useEscapeKey'
+import type { DropdownOption } from '../types/dropdown'
+
+// NOT generic on purpose: vite-plugin-dts flattens SFC generics out of the
+// emitted declarations, so consumers would see the erased constraint anyway.
+// The update:modelValue payload is `any` so `v-model` on a union-typed ref
+// type-checks; the actual payload is always one of the options' values.
+interface Props {
+  options: readonly DropdownOption[]
+  modelValue?: string | number | null
+  /** Trigger text shown when nothing is selected. */
+  placeholder?: string
+  /** 'md' = px-4 py-2.5 (default, the app filter height); 'sm' = px-3 py-2. */
+  size?: 'sm' | 'md'
+  /** Full-width (w-full). Set false for an inline, content-width dropdown. */
+  block?: boolean
+  disabled?: boolean
+  /** Accessible name for the trigger/listbox when there is no visible label. */
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  placeholder: 'Select',
+  size: 'md',
+  block: true,
+  disabled: false,
+  ariaLabel: '',
+})
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: 'update:modelValue', value: any): void
+}>()
+
+const open = ref(false)
+const rootEl = ref<HTMLElement | null>(null)
+
+const selectedOption = computed(() =>
+  props.options.find((o) => o.value === props.modelValue) ?? null,
+)
+
+const triggerClass = computed(() => {
+  const padding = props.size === 'sm' ? 'px-3 py-2' : 'px-4 py-2.5'
+  return (
+    'flex items-center justify-between gap-2 rounded-lg border text-left text-sm transition-colors ' +
+    'border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100 ' +
+    'hover:bg-slate-50 dark:hover:bg-slate-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 ' +
+    'disabled:opacity-50 disabled:cursor-not-allowed ' +
+    padding
+  )
+})
+
+function rowClass(opt: DropdownOption): string {
+  const selected = opt.value === props.modelValue
+  const base =
+    'block w-full px-4 py-2 text-left text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed'
+  const fill = selected
+    ? 'bg-emerald-500 text-white'
+    : 'text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800'
+  return `${base} ${fill}`
+}
+
+function toggle() {
+  if (props.disabled) return
+  open.value = !open.value
+}
+
+function select(opt: DropdownOption) {
+  if (opt.disabled) return
+  emit('update:modelValue', opt.value)
+  open.value = false
+}
+
+useEscapeKey(() => {
+  open.value = false
+})
+
+function onDocumentClick(e: MouseEvent) {
+  if (!open.value) return
+  if (rootEl.value && !rootEl.value.contains(e.target as Node)) {
+    open.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', onDocumentClick))
+onBeforeUnmount(() => document.removeEventListener('click', onDocumentClick))
+</script>

package/src/components/EarningsCard.test.ts

@@ -36,6 +36,36 @@ describe('EarningsCard', () => {
     expect(w.html()).toContain('border-red-300')
   })
 
+  describe('compact mode', () => {
+    it('keeps the large layout by default (backward compatibility)', () => {
+      const w = mount(EarningsCard, { props: { amount: 1 } })
+      expect(w.html()).toContain('p-6')
+      expect(w.html()).toContain('text-4xl')
+      expect(w.html()).not.toContain('text-lg')
+    })
+
+    it('renders tighter padding and smaller type when compact', () => {
+      const w = mount(EarningsCard, { props: { amount: 1, compact: true } })
+      const html = w.html()
+      expect(html).toContain('p-3')
+      expect(html).toContain('text-lg')
+      expect(html).not.toContain('text-4xl')
+    })
+
+    it('moves the trend glyph into the top-right corner when compact', () => {
+      const w = mount(EarningsCard, { props: { amount: 1, compact: true } })
+      expect(w.html()).toContain('absolute right-2 top-2')
+    })
+
+    it('still applies the signed loss theme in compact mode', () => {
+      const w = mount(EarningsCard, {
+        props: { amount: -5, compact: true, signed: true, accent: 'emerald' },
+      })
+      expect(w.html()).toContain('border-red-300')
+      expect(w.html()).toContain('p-3')
+    })
+  })
+
   describe('signed (P&L) mode', () => {
     // The "up-trend" arrowhead the default glyph uses; absent in the loss glyph.
     const UP_GLYPH = 'points="16 7 22 7 22 13"'

package/src/components/EarningsCard.vue

@@ -29,6 +29,15 @@ interface Props {
    * card for always-positive totals like lifetime earnings — are unaffected.
    */
   signed?: boolean
+  /**
+   * Dense variant for dashboards that tile many cards on one row: tighter
+   * padding, smaller type, and the trend glyph shrunk into the top-right
+   * corner (absolutely positioned so the amount keeps the full card width —
+   * important for long values like 8-decimal BTC quantities). Don't combine
+   * with `badge`: both occupy the top-right corner. Defaults to `false` so
+   * existing consumers keep the large layout.
+   */
+  compact?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -40,6 +49,7 @@ const props = withDefaults(defineProps<Props>(), {
   decimals: 2,
   accent: 'orange',
   signed: false,
+  compact: false,
 })
 
 const ACCENTS: Record<Accent, {
@@ -104,8 +114,8 @@ const formattedAmount = computed(
 
 <template>
   <div
-    class="relative rounded-xl border-2 border-dashed bg-white p-6 dark:bg-slate-800"
-    :class="cls.border"
+    class="relative rounded-xl border-2 border-dashed bg-white dark:bg-slate-800"
+    :class="[cls.border, compact ? 'p-3' : 'p-6']"
   >
     <!-- Badge -->
     <div
@@ -118,31 +128,38 @@ const formattedAmount = computed(
 
     <!-- Header row -->
     <div class="flex items-start justify-between">
-      <div>
-        <!-- Title -->
-        <p class="text-sm font-bold tracking-wide text-gray-800 dark:text-slate-200">
+      <div class="min-w-0">
+        <!-- Title: pr-8 in compact reserves only the corner the absolute icon
+             occupies — the amount below keeps the full card width so long
+             values (8-decimal BTC quantities) don't truncate. -->
+        <p
+          class="font-bold tracking-wide text-gray-800 dark:text-slate-200"
+          :class="compact ? 'pr-8 text-xs' : 'text-sm'"
+        >
           {{ title }}
         </p>
 
         <!-- Amount -->
-        <p class="mt-1 text-4xl font-bold" :class="cls.amount">
+        <p class="mt-1 font-bold truncate" :class="[cls.amount, compact ? 'text-lg' : 'text-4xl']">
           {{ formattedAmount }}
         </p>
 
         <!-- Subtitle -->
-        <p class="mt-1 text-sm font-medium" :class="cls.subtitle">
+        <p class="mt-1 font-medium" :class="[cls.subtitle, compact ? 'text-xs' : 'text-sm']">
           {{ subtitle }}
         </p>
       </div>
 
       <!-- Chart icon -->
       <div
-        class="mt-6 flex h-12 w-12 items-center justify-center rounded-xl"
-        :class="cls.iconBox"
+        class="flex items-center justify-center"
+        :class="[
+          cls.iconBox,
+          compact ? 'absolute right-2 top-2 h-6 w-6 rounded-lg' : 'mt-6 h-12 w-12 rounded-xl',
+        ]"
       >
         <svg
-          class="h-6 w-6"
-          :class="cls.icon"
+          :class="[cls.icon, compact ? 'h-3.5 w-3.5' : 'h-6 w-6']"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"

package/src/index.ts

@@ -37,6 +37,7 @@ export { default as BaseNotificationPanel } from './components/BaseNotificationP
 // Components — extracted from TradeAutomation
 export { default as BaseInput } from './components/BaseInput.vue'
 export { default as BaseSelect } from './components/BaseSelect.vue'
+export { default as BaseDropdown } from './components/BaseDropdown.vue'
 export { default as BaseSegmentedControl } from './components/BaseSegmentedControl.vue'
 export { default as BaseTable } from './components/BaseTable.vue'
 export { default as BaseSpecFields } from './components/BaseSpecFields.vue'
@@ -73,6 +74,7 @@ export type { EntityPickerItem } from './types/entityPicker'
 export type { LoginCredentials } from './types/auth'
 export type { NotificationItem } from './types/notification'
 export type { SegmentedOption } from './types/segmented'
+export type { DropdownOption } from './types/dropdown'
 export type { TableColumn } from './types/table'
 export type { SpecField, SpecFieldType, SpecFieldValue } from './types/specField'
 

package/src/types/dropdown.ts

@@ -0,0 +1,14 @@
+/**
+ * One choice in a BaseDropdown. `value` is what the dropdown emits, `label`
+ * what the trigger and the menu row show; `title` becomes the row's tooltip
+ * and `disabled` makes the row unselectable.
+ *
+ * Generic so callers with union-typed values ('7D' | '30D' | …) keep full
+ * type-safety through v-model.
+ */
+export interface DropdownOption<T extends string | number = string | number> {
+  value: T
+  label: string
+  title?: string
+  disabled?: boolean
+}