mgv-backoffice 1.38.0 → 1.41.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>`) |
@@ -348,9 +348,9 @@ Animated loading spinner — a neutral ring with a coloured leading arc.
 | Prop    | Type                                                                       | Default  | Description                                                  |
 |---------|----------------------------------------------------------------------------|----------|-------------------------------------------------------------|
 | `size`  | `'sm' \| 'md' \| 'lg' \| 'xl'`                                              | `'sm'`   | Diameter + ring thickness — 16 / 24 / 32 / 48px.            |
-| `color` | `'blue' \| 'emerald' \| 'sky' \| 'indigo' \| 'teal' \| 'purple' \| 'red' \| 'amber'` | `'blue'` | Colour of the spinning arc. The track stays neutral gray.   |
+| `color` | `'blue' \| 'emerald' \| 'sky' \| 'indigo' \| 'teal' \| 'purple' \| 'red' \| 'amber'` | `'emerald'` | Colour of the spinning arc. The track stays neutral gray.   |
 
-With no props it renders the original 16px blue spinner, so existing call sites are unaffected.
+With no props it renders a 16px emerald spinner. For page loaders use `size="xl"` centered, e.g. `<div class="flex justify-center py-12"><BaseSpinner size="xl" /></div>`.
 
 **Example:**
 
@@ -901,6 +901,24 @@ interface NavSection {
 
 ---
 
+### BaseSidebarUser
+
+Signed-in user block for the `BaseSidebar` `footer` slot: initials avatar,
+name and email (a link to the profile page when `to` is set) and a Logout
+button that emits `logout`.
+
+**Props:** `name` (required), `email`, `to` (profile route), `showLogout` (`true`),
+`logoutLabel` (`'Logout'`), `profileLabel` (`'View profile'`, tooltip).
+**Emits:** `logout`.
+
+```vue
+<BaseSidebar :sections="nav">
+  <template #footer>
+    <BaseSidebarUser :name="me.username" :email="me.email" :to="{ name: 'Profile' }" @logout="logOut" />
+  </template>
+</BaseSidebar>
+```
+
 ### BaseNotificationPanel
 
 Left-anchored notification drawer (teleported to `<body>`, slides in from
@@ -1119,6 +1137,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:**
 
@@ -1833,6 +1852,75 @@ title, big value) for any value — counts, labels, pre-formatted numbers.
 </BaseStatCard>
 ```
 
+### BaseCheckbox
+
+Rounded checkbox, emerald when checked (works with or without a forms plugin).
+`v-model` is the boolean; `change` fires with the new value; attrs (`id`, `name`)
+go to the `<input>`.
+
+**Props:** `modelValue`, `label`, `disabled`. **Slots:** `default` (rich label).
+**Emits:** `update:modelValue(value)`, `change(value)`.
+
+```vue
+<BaseCheckbox v-model="remember" id="remember" label="Remember me" />
+```
+
+### 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, red cross when false.
+
+**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/BaseCheckbox.vue.d.ts

@@ -0,0 +1,28 @@
+interface Props {
+    modelValue?: boolean;
+    label?: string;
+    disabled?: 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, {} & {
+    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;
+}>, {
+    label: string;
+    disabled: boolean;
+    modelValue: 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/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/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/BaseSidebarUser.vue.d.ts

@@ -0,0 +1,23 @@
+import { RouteLocationRaw } from 'vue-router';
+interface Props {
+    name: string;
+    email?: string;
+    /** Profile route; makes the name/email block a link. */
+    to?: RouteLocationRaw;
+    showLogout?: boolean;
+    logoutLabel?: string;
+    profileLabel?: string;
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    logout: () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onLogout?: (() => any) | undefined;
+}>, {
+    email: string;
+    to: RouteLocationRaw;
+    showLogout: boolean;
+    logoutLabel: string;
+    profileLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -51,6 +51,13 @@ 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 BaseCheckbox } from './components/BaseCheckbox.vue';
+export { default as BaseSidebarUser } from './components/BaseSidebarUser.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;
+}