mgv-backoffice 1.36.3 → 1.38.0

package/README.md

@@ -1465,6 +1465,38 @@ it.
 />
 ```
 
+### BaseDateTimePicker
+
+Date / date-time / time picker built on
+[@vuepic/vue-datepicker](https://vue3datepicker.com). The package is a regular
+dependency of this lib (installed automatically) and its CSS ships inside
+`ui-lib.css`, so consumers install and import nothing extra. Dark mode follows
+`useTheme()`; the skin matches BaseInput (slate surfaces, emerald accent).
+
+**Props:**
+
+| Prop         | Type               | Default      | Description |
+| ------------ | ------------------ | ------------ | ----------- |
+| `modelValue` | `ModelValue`       | `null`       | `v-model` value — `Date`, `Date[]` for ranges, a time object in `'time'` mode, or a string/number with `model-type`. |
+| `mode`       | `'date' \| 'datetime' \| 'time'` | `'datetime'` | Calendar only, calendar + time, or time only. |
+| `format`     | `String`           | per mode     | date-fns input pattern. Defaults: `dd/MM/yyyy`, `dd/MM/yyyy HH:mm`, `HH:mm` (`hh:mm a` when `is24` is false). |
+| `is24`       | `Boolean`          | `true`       | 24-hour clock. |
+| `autoApply`  | `Boolean`          | `false`      | Select on click, without the Cancel/Select row. |
+| `teleport`   | `Boolean \| String \| HTMLElement` | `true` | Menu mount target; `true` = body, so modals don't clip it. |
+| `timeConfig` | `Partial<TimeConfig>` | —         | Extra time options (seconds, increments…), merged over the defaults. |
+
+Every other VueDatePicker prop (`range`, `min-date`, `max-date`,
+`disabled-dates`, `placeholder`, `model-type`, …), event and slot is passed
+straight through.
+
+**Emits:** `update:modelValue(value)`.
+
+```vue
+<BaseDateTimePicker v-model="startsAt" placeholder="Start" />
+<BaseDateTimePicker v-model="day" mode="date" :min-date="new Date()" auto-apply />
+<BaseDateTimePicker v-model="period" mode="date" range />
+```
+
 ### BaseSegmentedControl
 
 Segmented button group ("All | Stock | Crypto"). One button per option; the
@@ -1490,9 +1522,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:**
 
@@ -1501,6 +1534,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.
 
@@ -1716,6 +1750,89 @@ 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>
+```
+
 ## Composables
 
 ```ts

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/BaseDateTimePicker.vue.d.ts

@@ -0,0 +1,49 @@
+import { ModelValue, TimeConfig } from '@vuepic/vue-datepicker';
+export type DateTimePickerMode = 'date' | 'datetime' | 'time';
+interface Props {
+    /** v-model value — Date, Date[] (range), time object, or string with `model-type`. */
+    modelValue?: ModelValue;
+    /** 'date' = calendar only; 'datetime' = calendar + time (default); 'time' = time only. */
+    mode?: DateTimePickerMode;
+    /**
+     * date-fns pattern for the input text. Defaults per mode:
+     * 'dd/MM/yyyy', 'dd/MM/yyyy HH:mm' (12h: 'hh:mm a'), 'HH:mm'.
+     */
+    format?: string;
+    /** 24-hour clock. */
+    is24?: boolean;
+    /** Select on click without the Cancel/Select action row. */
+    autoApply?: boolean;
+    /**
+     * Where the menu renders. Defaults to `true` (body) so it isn't clipped by
+     * modals or overflow-hidden containers.
+     */
+    teleport?: boolean | string | HTMLElement;
+    /** Extra time options, merged over the mode-derived defaults. */
+    timeConfig?: Partial<TimeConfig>;
+}
+declare var __VLS_12: string, __VLS_13: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_12>]?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: ModelValue) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: ModelValue) => any) | undefined;
+}>, {
+    mode: DateTimePickerMode;
+    modelValue: string | number | Date | string[] | number[] | Date[] | import('@vuepic/vue-datepicker').TimeModel | import('@vuepic/vue-datepicker').TimeModel[] | import('@vuepic/vue-datepicker').MonthModel | import('@vuepic/vue-datepicker').MonthModel[] | null;
+    format: string;
+    is24: boolean;
+    autoApply: boolean;
+    teleport: boolean | string | HTMLElement;
+    timeConfig: Partial<TimeConfig>;
+}, {}, {}, {}, 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/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/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/index.d.ts

@@ -45,6 +45,12 @@ export { default as BaseCredentialsForm } from './components/BaseCredentialsForm
 export { default as BasePillPickerModal } from './components/BasePillPickerModal.vue';
 export { default as BaseBarDistribution } from './components/BaseBarDistribution.vue';
 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 { useTheme, initTheme } from './composables/useTheme';
 export type { UseThemeOptions } from './composables/useTheme';
 export { useThemeClasses } from './composables/useThemeClasses';