mgv-backoffice 1.37.0 → 1.38.0

package/src/components/BaseTable.test.ts

@@ -1,55 +1,69 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import BaseTable from './BaseTable.vue'
-import type { TableColumn } from '../types/table'
-
-const columns: TableColumn[] = [
-  { label: 'Symbol' },
-  { label: 'Qty', align: 'right' },
-  { label: 'Bought' },
-]
-
-describe('BaseTable', () => {
-  it('renders header cells with right-alignment where requested', () => {
-    const wrapper = mount(BaseTable, { props: { columns } })
-    const ths = wrapper.findAll('th')
-    expect(ths.map((th) => th.text())).toEqual(['Symbol', 'Qty', 'Bought'])
-    expect(ths[1].classes()).toContain('text-right')
-    expect(ths[0].classes()).not.toContain('text-right')
-    expect(ths[0].classes()).toEqual(expect.arrayContaining(['px-4', 'py-3']))
-  })
-
-  it('renders caller rows through the default slot', () => {
-    const wrapper = mount(BaseTable, {
-      props: { columns },
-      slots: { default: '<tr><td>AMD</td><td>3</td><td>today</td></tr>' },
-    })
-    expect(wrapper.find('tbody td').text()).toBe('AMD')
-    expect(wrapper.find('table').classes()).toEqual(expect.arrayContaining(['w-full', 'text-sm']))
-  })
-
-  it('renders the empty-state row spanning every column when empty', () => {
-    const wrapper = mount(BaseTable, {
-      props: { columns, empty: true, emptyText: 'Nothing here.' },
-    })
-    const td = wrapper.find('tbody td')
-    expect(td.attributes('colspan')).toBe('3')
-    expect(td.text()).toBe('Nothing here.')
-  })
-
-  it('prefers the empty slot over emptyText', () => {
-    const wrapper = mount(BaseTable, {
-      props: { columns, empty: true, emptyText: 'fallback' },
-      slots: { empty: 'No trades match your filters.' },
-    })
-    expect(wrapper.find('tbody td').text()).toBe('No trades match your filters.')
-  })
-
-  it('renders no empty-state row when not empty', () => {
-    const wrapper = mount(BaseTable, {
-      props: { columns, empty: false },
-      slots: { default: '<tr><td>row</td></tr>' },
-    })
-    expect(wrapper.findAll('tbody tr')).toHaveLength(1)
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseTable from './BaseTable.vue'
+import type { TableColumn } from '../types/table'
+
+const columns: TableColumn[] = [
+  { label: 'Symbol' },
+  { label: 'Qty', align: 'right' },
+  { label: 'Bought' },
+]
+
+describe('BaseTable', () => {
+  it('renders header cells with right-alignment where requested', () => {
+    const wrapper = mount(BaseTable, { props: { columns } })
+    const ths = wrapper.findAll('th')
+    expect(ths.map((th) => th.text())).toEqual(['Symbol', 'Qty', 'Bought'])
+    expect(ths[1].classes()).toContain('text-right')
+    expect(ths[0].classes()).not.toContain('text-right')
+    expect(ths[0].classes()).toEqual(expect.arrayContaining(['px-4', 'py-3']))
+  })
+
+  it('renders caller rows through the default slot', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns },
+      slots: { default: '<tr><td>AMD</td><td>3</td><td>today</td></tr>' },
+    })
+    expect(wrapper.find('tbody td').text()).toBe('AMD')
+    expect(wrapper.find('table').classes()).toEqual(expect.arrayContaining(['w-full', 'text-sm']))
+  })
+
+  it('renders the empty-state row spanning every column when empty', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns, empty: true, emptyText: 'Nothing here.' },
+    })
+    const td = wrapper.find('tbody td')
+    expect(td.attributes('colspan')).toBe('3')
+    expect(td.text()).toBe('Nothing here.')
+  })
+
+  it('prefers the empty slot over emptyText', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns, empty: true, emptyText: 'fallback' },
+      slots: { empty: 'No trades match your filters.' },
+    })
+    expect(wrapper.find('tbody td').text()).toBe('No trades match your filters.')
+  })
+
+  it('renders no empty-state row when not empty', () => {
+    const wrapper = mount(BaseTable, {
+      props: { columns, empty: false },
+      slots: { default: '<tr><td>row</td></tr>' },
+    })
+    expect(wrapper.findAll('tbody tr')).toHaveLength(1)
+  })
+
+  it('has no card chrome by default and adds it with `card`', () => {
+    const plain = mount(BaseTable, { props: { columns } })
+    expect(plain.classes()).not.toContain('border')
+    const card = mount(BaseTable, { props: { columns, card: true } })
+    expect(card.classes()).toEqual(
+      expect.arrayContaining(['overflow-x-auto', 'rounded-xl', 'border']),
+    )
+  })
+
+  it('draws row dividers on the body', () => {
+    const wrapper = mount(BaseTable, { props: { columns } })
+    expect(wrapper.find('tbody').classes()).toEqual(expect.arrayContaining(['divide-y']))
+  })
+})

package/src/components/BaseTable.vue

@@ -1,50 +1,62 @@
-<template>
-  <!--
-    Styling shell for data tables — NOT a data grid. Owns the table skin
-    (slate header band, px-4 py-3 header cells, empty-state row); rows are
-    the caller's own <tr> markup via the default slot, so cell content and
-    per-cell styling stay fully in the caller's hands.
-
-    Wrap it yourself for scrolling/card chrome (e.g. inside a BaseRow with
-    overflow-x-auto). Same `dark:`-variant note as BaseInput.
-  -->
-  <table class="w-full text-sm">
-    <thead class="bg-slate-50 dark:bg-slate-800/60 text-slate-600 dark:text-slate-300">
-      <tr class="text-left">
-        <th
-          v-for="(col, i) in columns"
-          :key="i"
-          class="px-4 py-3"
-          :class="col.align === 'right' ? 'text-right' : ''"
-        >
-          {{ col.label }}
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-if="empty">
-        <td :colspan="columns.length" class="px-4 py-12 text-center text-slate-500">
-          <slot name="empty">{{ emptyText }}</slot>
-        </td>
-      </tr>
-      <slot />
-    </tbody>
-  </table>
-</template>
-
-<script setup lang="ts">
-import type { TableColumn } from '../types/table'
-
-interface Props {
-  columns: TableColumn[]
-  /** True when there are no rows — renders the empty-state row. */
-  empty?: boolean
-  /** Fallback empty-state text; the `empty` slot overrides it. */
-  emptyText?: string
-}
-
-withDefaults(defineProps<Props>(), {
-  empty: false,
-  emptyText: 'No rows.',
-})
-</script>
+<template>
+  <div :class="card ? CARD_CLASS : undefined">
+    <!--
+      Styling shell for data tables — NOT a data grid. Owns the table skin
+      (slate header band, px-4 py-3 header cells, row dividers + hover,
+      empty-state row); rows are the caller's own <tr> markup via the default
+      slot, so cell content and per-cell styling stay fully in the caller's hands.
+
+      `card` adds the shared card chrome (rounded border, surface, horizontal
+      scroll). Leave it off when the caller already wraps the table itself
+      (e.g. inside a BaseRow with overflow-x-auto). Same `dark:`-variant note
+      as BaseInput.
+    -->
+    <table class="w-full text-sm">
+      <thead class="bg-slate-50 dark:bg-slate-800/60 text-slate-600 dark:text-slate-300">
+        <tr class="text-left border-b border-slate-200 dark:border-slate-700">
+          <th
+            v-for="(col, i) in columns"
+            :key="i"
+            class="px-4 py-3"
+            :class="col.align === 'right' ? 'text-right' : ''"
+          >
+            {{ col.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="divide-y divide-slate-200 dark:divide-slate-700 [&>tr]:transition-colors [&>tr:hover]:bg-slate-50 dark:[&>tr:hover]:bg-slate-800/40"
+      >
+        <tr v-if="empty">
+          <td :colspan="columns.length" class="px-4 py-12 text-center text-slate-500">
+            <slot name="empty">{{ emptyText }}</slot>
+          </td>
+        </tr>
+        <slot />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TableColumn } from '../types/table'
+
+const CARD_CLASS =
+  'overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900'
+
+interface Props {
+  columns: TableColumn[]
+  /** True when there are no rows — renders the empty-state row. */
+  empty?: boolean
+  /** Fallback empty-state text; the `empty` slot overrides it. */
+  emptyText?: string
+  /** Wrap the table in the rounded, bordered, horizontally scrolling card. */
+  card?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  empty: false,
+  emptyText: 'No rows.',
+  card: false,
+})
+</script>

package/src/index.ts

@@ -56,6 +56,10 @@ export type { CredentialsView, CredentialsUpdate } from './components/BaseCreden
 // Components — third-party wrappers
 export { default as BaseDateTimePicker } from './components/BaseDateTimePicker.vue'
 export type { DateTimePickerMode } from './components/BaseDateTimePicker.vue'
+export { default as BaseSearchSelect } from './components/BaseSearchSelect.vue'
+export { default as BaseCard } from './components/BaseCard.vue'
+export { default as BaseField } from './components/BaseField.vue'
+export { default as BaseStatCard } from './components/BaseStatCard.vue'
 
 // Composables
 export { useTheme, initTheme } from './composables/useTheme'