mgv-backoffice 1.37.0 → 1.40.0

package/README.md

@@ -169,7 +169,7 @@ Button with color, size, loading state, and Vue Router integration.
 | Prop          | Type                                | Default               | Description                          |
 | ------------- | ----------------------------------- | --------------------- | ------------------------------------ |
 | `description` | `String`                            | **required**          | Button label text                    |
-| `color`       | `String`                            | `BaseButtonEnum.BLUE` | Color variant (`BLUE`/`WHITE`/`DARK`/`GREEN`/`EMERALD`/`RED`/`YELLOW`/`PURPLE`/`SKY`/`GRAY`/`AMBER`) |
+| `color`       | `String`                            | `BaseButtonEnum.GREEN` | Color variant (`BLUE`/`WHITE`/`DARK`/`GREEN`/`EMERALD`/`RED`/`YELLOW`/`PURPLE`/`SKY`/`GRAY`/`AMBER`) |
 | `outline`     | `Boolean`                           | `false`               | Outlined/secondary style — transparent fill, coloured text + border, tinted hover (theme-aware) |
 | `ghost`       | `Boolean`                           | `false`               | Ghost/borderless style — no border or fill, coloured text + tinted hover (theme-aware). For compact toolbar/action buttons |
 | `to`          | `String`                            | —                     | Vue Router path (renders `<router-link>`) |
@@ -1119,6 +1119,7 @@ so icon-less apps get a plain title/subtitle header.
 | `maxWidthClass` | `String` | `'max-w-4xl'` | Tailwind max-w utility constraining header width. Pass `''` to skip the width wrapper entirely — the header then spans its container. |
 | `align`         | `String` | `'center'`    | Vertical alignment of the title block vs the actions: `'center'` or `'end'` (actions sit on the title baseline). |
 | `marginClass`   | `String` | `'mb-8'`      | Space under the header. Pass `''` when the parent manages vertical rhythm (`space-y-*`). |
+| `accent`        | `Boolean` | `false`       | Brand-green gauge bar in front of the title (icon-less headers). |
 
 **Slots:**
 
@@ -1522,9 +1523,10 @@ selected one gets the filled treatment and `aria-pressed="true"`.
 ### BaseTable
 
 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); body rows are
-the caller's own `<tr>` markup via the default slot. Wrap it yourself for
-scrolling/card chrome (e.g. a `BaseRow` with `overflow-x-auto`).
+(slate header band, `px-4 py-3` header cells, row dividers + hover, empty-state
+row); body rows are the caller's own `<tr>` markup via the default slot. Pass
+`card` for the rounded, bordered, horizontally scrolling card chrome, or wrap
+it yourself (e.g. a `BaseRow` with `overflow-x-auto`).
 
 **Props:**
 
@@ -1533,6 +1535,7 @@ scrolling/card chrome (e.g. a `BaseRow` with `overflow-x-auto`).
 | `columns`   | `TableColumn[]` | **required** | `{ label, align? }`; `align: 'right'` right-aligns the header cell. |
 | `empty`     | `Boolean`       | `false`      | True renders the empty-state row spanning every column. |
 | `emptyText` | `String`        | `'No rows.'` | Fallback empty-state text. |
+| `card`      | `Boolean`       | `false`      | Wrap in the rounded, bordered, scrolling card. |
 
 **Slots:** `default` — the `<tr>` rows; `empty` — custom empty-state content.
 
@@ -1748,6 +1751,146 @@ Extracted from TradeAutomation's variant-stats modal.
 
 ---
 
+### BaseSearchSelect
+
+Searchable select (combobox): type to filter, pick with the mouse or
+ArrowUp/ArrowDown + Enter. `multiple` turns it into a tag picker with removable
+chips (Backspace on an empty search removes the last one). Same field skin as
+`BaseInput` / `BaseSelect`; Escape and an outside click close the menu.
+
+**Props:**
+
+| Prop            | Type                          | Default         | Description |
+| --------------- | ----------------------------- | --------------- | ----------- |
+| `options`       | `DropdownOption[]`            | **required**    | `{ value, label, title?, disabled? }` per row. |
+| `modelValue`    | `value \| null \| value[]`    | `null`          | Selected value, or values with `multiple`. |
+| `multiple`      | `Boolean`                     | `false`         | Pick several (chips). |
+| `placeholder`   | `String`                      | `'Select'`      | Shown when nothing is selected. |
+| `searchable`    | `Boolean`                     | `true`          | Typing filters the options. |
+| `clearable`     | `Boolean`                     | `true`          | Show the × clear button while something is selected. |
+| `block`         | `Boolean`                     | `true`          | Full-width. |
+| `disabled`      | `Boolean`                     | `false`         | |
+| `ariaLabel`     | `String`                      | `''`            | Accessible name without a visible label. |
+| `noResultsText` | `String`                      | `'No matches.'` | |
+| `emptyText`     | `String`                      | `'No options.'` | |
+
+**Emits:** `update:modelValue` — the value (single; `null` when cleared) or the
+array of values (`multiple`).
+
+```vue
+<BaseSearchSelect v-model="userId" :options="users.map(u => ({ value: u.id, label: u.name }))" placeholder="Select User" />
+<BaseSearchSelect v-model="tags" :options="TAGS" multiple />
+```
+
+### BaseCard
+
+Bordered surface card — the shared chrome for forms, filter/search panels and
+grouped content.
+
+**Props:** `title`, `subtitle`, `padding: 'md' | 'sm' | 'none'` (`'md'`).
+**Slots:** `default` (body), `actions` (header, right), `footer` (bottom, right-aligned — submit/cancel).
+
+```vue
+<BaseCard title="Template">
+  <form>…</form>
+  <template #footer><BaseButton type="submit" description="Save" /></template>
+</BaseCard>
+```
+
+### BaseField
+
+Label + control + message wrapper for forms and filter bars.
+
+**Props:** `label`, `labelFor` (the control's id), `required`, `error`
+(red, replaces the hint), `hint`, `compact` (small uppercase filter-bar label),
+`grow` (takes the free space in a flex row).
+
+```vue
+<BaseCard padding="sm">
+  <div class="flex flex-wrap items-end gap-4">
+    <BaseField label="Search symbol" label-for="q" compact grow>
+      <BaseInput id="q" v-model="query" />
+    </BaseField>
+    <BaseField label="Class" compact>
+      <BaseSegmentedControl v-model="cls" :options="CLASSES" />
+    </BaseField>
+  </div>
+</BaseCard>
+```
+
+### BaseStatCard
+
+Dashboard stat tile in the `EarningsCard` style (dashed accent border, bold
+title, big value) for any value — counts, labels, pre-formatted numbers.
+
+**Props:** `title` (required), `value`, `subtitle`,
+`accent: 'emerald' | 'sky' | 'amber' | 'red' | 'slate'` (`'emerald'`),
+`to` (router location — makes the whole card a link).
+**Slots:** `icon` (fills the tinted chip; receives `iconClass`), `default` (extra content).
+
+```vue
+<BaseStatCard title="Categories" :value="71" accent="sky" :to="{ name: 'Category List' }">
+  <template #icon="{ iconClass }"><SwatchIcon :class="iconClass" /></template>
+</BaseStatCard>
+```
+
+### BaseToggle
+
+On/off switch (`role="switch"`). `v-model` is the boolean; `change` fires after
+every user toggle with the new value.
+
+**Props:** `modelValue`, `label` (visible label, also the accessible name),
+`ariaLabel` (when there is no label), `color: 'emerald' | 'red' | 'sky' | 'amber'`
+(on state, `'emerald'`), `offTone: 'slate' | 'red'` (off track, `'slate'`), `disabled`.
+**Emits:** `update:modelValue(value)`, `change(value)`.
+
+```vue
+<BaseToggle v-model="task.alive" :label="task.name" color="red" @change="save(task)" />
+<BaseToggle v-model="account.alive" off-tone="red" aria-label="Alive" />
+```
+
+### BaseAuthLayout
+
+Full-page, centred shell for sign-in / sign-up / password-recovery screens:
+logo on top (defaults to `BaseLogo`), then a bordered card with the title,
+content and an optional footer.
+
+**Props:** `title`, `subtitle`, `wide` (max-w-3xl card for multi-column forms; default max-w-md).
+**Slots:** `default` (form), `logo` (replaces `BaseLogo`), `footer` ("No account? Sign up").
+
+```vue
+<BaseAuthLayout title="Forgot password">
+  <form>…</form>
+  <template #footer>No account? <RouterLink to="/register">Sign up</RouterLink></template>
+</BaseAuthLayout>
+```
+
+### BaseBooleanBadge
+
+Yes/no pill for boolean columns: green check when true, neutral cross when
+false (so `false` reads as a state, not an error).
+
+**Props:** `value` (`boolean | null`), `trueLabel` (`'Yes'`), `falseLabel` (`'No'`).
+
+```vue
+<BaseBooleanBadge :value="user.hasVerifiedEmail" true-label="Verified" false-label="Not verified" />
+```
+
+### BaseDetailList
+
+Read-only label/value grid for detail pages (the "view" counterpart of a form).
+Empty values show `emptyText`; `href` renders the value as an external link;
+`mono` uses the monospace face.
+
+**Props:** `items: DetailItem[]` (`{ label, value?, href?, mono? }`, required),
+`columns: 1 | 2 | 3` (`2`, from `sm` up), `emptyText` (`'—'`).
+
+```vue
+<BaseCard title="Details">
+  <BaseDetailList :items="[{ label: 'Status', value: post.status }, { label: 'Link', value: post.link, href: post.link }]" />
+</BaseCard>
+```
+
 ## Composables
 
 ```ts

package/dist/components/BaseAuthLayout.vue.d.ts

@@ -0,0 +1,27 @@
+interface Props {
+    title?: string;
+    subtitle?: string;
+    /** max-w-3xl card instead of max-w-md (multi-column forms). */
+    wide?: boolean;
+}
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    logo?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    footer?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    title: string;
+    subtitle: string;
+    wide: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BaseBooleanBadge.vue.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    value?: boolean | null;
+    trueLabel?: string;
+    falseLabel?: string;
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    value: boolean | null;
+    trueLabel: string;
+    falseLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BaseCard.vue.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Bordered surface card — the shared chrome for forms, filter/search panels
+ * and any grouped content. Optional header (title / subtitle / `actions`
+ * slot), a padded body (default slot) and an optional `footer` slot for
+ * submit / cancel buttons.
+ */
+interface Props {
+    title?: string;
+    subtitle?: string;
+    /** Body padding: 'md' (p-5, default), 'sm' (p-4, e.g. filter bars) or 'none'. */
+    padding?: 'md' | 'sm' | 'none';
+}
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    footer?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    title: string;
+    subtitle: string;
+    padding: "md" | "sm" | "none";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BaseDetailList.vue.d.ts

@@ -0,0 +1,13 @@
+import { DetailItem } from '../types/detail';
+interface Props {
+    items: readonly DetailItem[];
+    /** Columns from `sm` up (1 column on phones). */
+    columns?: 1 | 2 | 3;
+    emptyText?: string;
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    emptyText: string;
+    columns: 1 | 2 | 3;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BaseField.vue.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Label + control + message wrapper for forms and filter bars. The control
+ * goes in the default slot (BaseInput, BaseSelect, BaseSearchSelect, …).
+ * `compact` switches to the small uppercase filter-bar label; `grow` makes
+ * the field take the free space in a flex row (filter bars).
+ */
+interface Props {
+    label?: string;
+    /** id of the control, wired to the label's `for`. */
+    labelFor?: string;
+    required?: boolean;
+    /** Validation message (red); replaces the hint while set. */
+    error?: string;
+    hint?: string;
+    compact?: boolean;
+    grow?: boolean;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    compact: boolean;
+    label: string;
+    required: boolean;
+    error: string;
+    hint: string;
+    labelFor: string;
+    grow: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BasePageHeader.vue.d.ts

@@ -6,6 +6,8 @@ type __VLS_Props = {
     maxWidthClass?: string;
     align?: 'center' | 'end';
     marginClass?: string;
+    /** Brand-green gauge bar in front of the title (icon-less headers). */
+    accent?: boolean;
 };
 declare var __VLS_1: {
     iconClass: string;
@@ -19,6 +21,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     subtitle: string;
+    accent: boolean;
     maxWidthClass: string;
     iconColor: IconColor;
     align: "center" | "end";

package/dist/components/BaseSearchSelect.vue.d.ts

@@ -0,0 +1,41 @@
+import { DropdownOption } from '../types/dropdown';
+type Value = string | number;
+interface Props {
+    options: readonly DropdownOption[];
+    /** Selected value (single) or values (`multiple`). */
+    modelValue?: Value | null | readonly Value[];
+    /** Pick several options, shown as removable chips. */
+    multiple?: boolean;
+    placeholder?: string;
+    /** Allow typing to filter. False makes it a plain (non-typing) picker. */
+    searchable?: boolean;
+    /** Show the clear (×) button while something is selected. */
+    clearable?: boolean;
+    /** Full-width (w-full). Set false for an inline field. */
+    block?: boolean;
+    disabled?: boolean;
+    /** Accessible name when there is no visible label. */
+    ariaLabel?: string;
+    /** Shown when the search matches nothing. */
+    noResultsText?: string;
+    /** Shown when there are no options at all. */
+    emptyText?: string;
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    placeholder: string;
+    disabled: boolean;
+    ariaLabel: string;
+    block: boolean;
+    emptyText: string;
+    multiple: boolean;
+    modelValue: Value | null | readonly Value[];
+    searchable: boolean;
+    clearable: boolean;
+    noResultsText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BaseStatCard.vue.d.ts

@@ -0,0 +1,33 @@
+import { RouteLocationRaw } from 'vue-router';
+type Accent = 'emerald' | 'sky' | 'amber' | 'red' | 'slate';
+interface Props {
+    title: string;
+    value?: string | number;
+    subtitle?: string;
+    /** Border / value / subtitle / icon tint. */
+    accent?: Accent;
+    /** Makes the card a router link. */
+    to?: RouteLocationRaw;
+}
+declare var __VLS_8: {}, __VLS_10: {
+    iconClass: string;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    icon?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    to: RouteLocationRaw;
+    subtitle: string;
+    accent: Accent;
+    value: string | number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BaseTable.vue.d.ts

@@ -5,6 +5,8 @@ interface Props {
     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;
 }
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
@@ -13,6 +15,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    card: boolean;
     emptyText: string;
     empty: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/BaseToggle.vue.d.ts

@@ -0,0 +1,33 @@
+/**
+ * On/off switch (role="switch"). `v-model` is the boolean; `change` fires
+ * after every user toggle with the new value, so callers can persist it.
+ * `color` tints the on state; `offTone="red"` shows a red track while off
+ * (e.g. "account is down" states).
+ */
+type Color = 'emerald' | 'red' | 'sky' | 'amber';
+interface Props {
+    modelValue?: boolean;
+    /** Visible label beside the switch (also its accessible name). */
+    label?: string;
+    /** Accessible name when there is no visible label. */
+    ariaLabel?: string;
+    color?: Color;
+    offTone?: 'slate' | 'red';
+    disabled?: boolean;
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: boolean) => any;
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onChange?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    color: Color;
+    label: string;
+    disabled: boolean;
+    ariaLabel: string;
+    modelValue: boolean;
+    offTone: "slate" | "red";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/index.d.ts

@@ -47,6 +47,15 @@ export { default as BaseBarDistribution } from './components/BaseBarDistribution
 export type { CredentialsView, CredentialsUpdate } from './components/BaseCredentialsForm.vue';
 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';
+export { default as BaseToggle } from './components/BaseToggle.vue';
+export { default as BaseAuthLayout } from './components/BaseAuthLayout.vue';
+export { default as BaseBooleanBadge } from './components/BaseBooleanBadge.vue';
+export { default as BaseDetailList } from './components/BaseDetailList.vue';
+export type { DetailItem } from './types/detail';
 export { useTheme, initTheme } from './composables/useTheme';
 export type { UseThemeOptions } from './composables/useTheme';
 export { useThemeClasses } from './composables/useThemeClasses';

package/dist/types/detail.d.ts

@@ -0,0 +1,10 @@
+/**
+ * One row of a BaseDetailList. `href` renders the value as an external link;
+ * `mono` sets it in the monospace face.
+ */
+export interface DetailItem {
+    label: string;
+    value?: string | number | boolean | null;
+    href?: string;
+    mono?: boolean;
+}