npm - mgv-backoffice - Versions diffs - 1.19.0 → 1.20.0 - Mend

mgv-backoffice 1.19.0 → 1.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/README.md +142 -2
package/dist/components/BaseGoogleSignInButton.vue.d.ts +22 -0
package/dist/components/BaseLoginForm.vue.d.ts +51 -0
package/dist/components/BaseNotificationPanel.vue.d.ts +19 -0
package/dist/components/BaseSidebar.vue.d.ts +9 -3
package/dist/composables/useNotifications.d.ts +29 -0
package/dist/composables/useSidebarCollapse.d.ts +22 -0
package/dist/index.d.ts +8 -0
package/dist/types/auth.d.ts +11 -0
package/dist/types/notification.d.ts +20 -0
package/dist/ui-lib.css +1 -1
package/dist/ui-lib.js +1082 -665
package/dist/ui-lib.umd.cjs +1 -1
package/package.json +1 -1
package/src/components/BaseAppLayout.vue +4 -1
package/src/components/BaseGoogleSignInButton.vue +83 -0
package/src/components/BaseLoginForm.test.ts +52 -0
package/src/components/BaseLoginForm.vue +204 -0
package/src/components/BaseNotificationPanel.vue +183 -0
package/src/components/BaseSidebar.vue +140 -31
package/src/composables/useNotifications.test.ts +64 -0
package/src/composables/useNotifications.ts +81 -0
package/src/composables/useSidebarCollapse.ts +64 -0
package/src/index.ts +8 -0
package/src/types/auth.ts +11 -0
package/src/types/notification.ts +20 -0

package/README.md CHANGED Viewed

@@ -707,6 +707,8 @@ computePnL({ buyPrice: 100, lastPrice: 110, filledQty: 5 })
 ### BaseAppLayout
 Root layout: dark/light page background, skip link, `<main>`-with-inert wrapper.
+The `<main>` content offset tracks the sidebar width automatically —
+`lg:ml-60` when expanded, `lg:ml-16` when collapsed (via `useSidebarCollapse()`).
 **Props:**
@@ -727,8 +729,9 @@ Root layout: dark/light page background, skip link, `<main>`-with-inert wrapper.
 ### BaseSidebar
 Responsive sidebar with desktop fixed-positioning and mobile off-canvas
-behavior, focus management, optional theme toggle, and configurable nav
-sections.
+behavior, focus management, optional theme toggle, a desktop collapse
+toggle (icon-only rail), an optional notifications bell, and configurable
+nav sections.
 **Props:**
@@ -739,6 +742,18 @@ sections.
 | `appName` | `String` | `''` | Optional app name in the footer. |
 | `version` | `String` | `''` | Optional version string in the footer. |
 | `showThemeToggle` | `Boolean` | `true` | Toggle the dark/light switch in the footer. |
+| `collapsible` | `Boolean` | `true` | Show the desktop collapse toggle that shrinks the sidebar to an icon-only rail. |
+| `showNotifications` | `Boolean` | `false` | Show the notifications bell (with unread badge) that toggles `BaseNotificationPanel`. |
+> **Collapse state** is shared via `useSidebarCollapse()` (and persisted to
+> localStorage) so `BaseAppLayout` can shrink the content offset from
+> `lg:ml-60` to `lg:ml-16` in step with the rail. Collapsing only affects
+> desktop (`lg+`); on mobile the sidebar stays a full off-canvas panel.
+> **Notifications:** set `:show-notifications="true"` to render the bell,
+> then drop a [`BaseNotificationPanel`](#basenotificationpanel) in your app.
+> Both share state through `useNotifications()`, so the unread badge and the
+> panel stay in sync.
 **Slots:**
@@ -776,6 +791,127 @@ interface NavSection {
 ---
+### BaseNotificationPanel
+Left-anchored notification drawer (teleported to `<body>`, slides in from
+the left, backdrop + Escape to close). Open/close state and the list live
+in `useNotifications()`, so the sidebar bell and the panel stay in sync.
+Enable the bell on the sidebar with `:show-notifications="true"`, drop one
+`<BaseNotificationPanel />` anywhere in your app, and feed it data via the
+composable.
+**Props:**
+| Prop              | Type      | Default                        | Description |
+| ----------------- | --------- | ------------------------------ | ----------- |
+| `title`           | `String`  | `'Notifications'`              | Panel heading. |
+| `emptyText`       | `String`  | `'You have no notifications.'` | Shown when the list is empty. |
+| `showMarkAllRead` | `Boolean` | `true`                         | Render the "Mark all as read" action when there are unread items. |
+**Emits:** `select` (the clicked notification's `id`; the row is also marked read).
+```vue
+<script setup lang="ts">
+import { BaseNotificationPanel, useNotifications } from 'mgv-backoffice'
+const { setNotifications } = useNotifications()
+setNotifications([
+  { id: 1, title: 'New comment', message: 'Alice replied to your post', time: '2m ago', type: 'info' },
+  { id: 2, title: 'Build passed', time: '1h ago', read: true, type: 'success' },
+])
+</script>
+<template>
+  <BaseSidebar :sections="navSections" :show-notifications="true" />
+  <BaseNotificationPanel @select="(id) => goTo(id)" />
+</template>
+```
+```ts
+import type { NotificationItem } from 'mgv-backoffice'
+interface NotificationItem {
+  id: string | number
+  title: string
+  message?: string
+  time?: string                                   // pre-formatted by you
+  read?: boolean
+  type?: 'info' | 'success' | 'warning' | 'error' // status dot colour
+}
+```
+---
+## Authentication
+### BaseGoogleSignInButton
+Google-branded "Sign in with Google" button (official multi-colour "G",
+dark-mode surface swap). Purely presentational — it runs no OAuth itself;
+listen on `click` and start your own Google Identity / Firebase / backend
+flow there.
+**Props:**
+| Prop       | Type      | Default                    | Description |
+| ---------- | --------- | -------------------------- | ----------- |
+| `label`    | `String`  | `'Sign in with Google'`    | Button text. |
+| `loading`  | `Boolean` | `false`                    | Disables and shows a spinner. |
+| `disabled` | `Boolean` | `false`                    | Disables without the spinner. |
+| `block`    | `Boolean` | `true`                     | Full-width layout. |
+**Emits:** `click` (only when not disabled/loading).
+### BaseLoginForm
+Presentational sign-in card: email + password (with show/hide), an optional
+"Remember me" checkbox, an error banner, the Google button + "or" divider,
+and `logo` / `forgot` / `footer` slots. Owns its input state and emits
+`submit` / `google-sign-in`; the app handles the actual request and feeds
+back `loading` / `error`.
+**Props:**
+| Prop            | Type      | Default     | Description |
+| --------------- | --------- | ----------- | ----------- |
+| `title`         | `String`  | `'Sign in'` | Card heading. |
+| `subtitle`      | `String`  | `''`        | Muted line under the heading. |
+| `submitLabel`   | `String`  | `'Sign in'` | Submit button text. |
+| `loading`       | `Boolean` | `false`     | Disables the form, spinner on submit. |
+| `googleLoading` | `Boolean` | `false`     | Disables the form, spinner on the Google button. |
+| `error`         | `String`  | `''`        | Error banner above the form. |
+| `showGoogle`    | `Boolean` | `true`      | Render the Google button + divider. |
+| `showRemember`  | `Boolean` | `false`     | Render the "Remember me" checkbox. |
+**Emits:** `submit` (`LoginCredentials`), `google-sign-in`.
+**Slots:** `logo`, `forgot` (next to the password label), `footer`.
+```vue
+<script setup lang="ts">
+import { BaseLoginForm } from 'mgv-backoffice'
+import type { LoginCredentials } from 'mgv-backoffice'
+async function onSubmit(creds: LoginCredentials) { /* call your API */ }
+function onGoogle() { /* start Google OAuth */ }
+</script>
+<template>
+  <BaseLoginForm
+    subtitle="Welcome back"
+    :show-remember="true"
+    @submit="onSubmit"
+    @google-sign-in="onGoogle"
+  >
+    <template #logo><MyLogo /></template>
+    <template #forgot><a href="/forgot" class="text-sm text-emerald-600">Forgot?</a></template>
+    <template #footer>No account? <a href="/signup" class="text-emerald-600">Sign up</a></template>
+  </BaseLoginForm>
+</template>
+```
+---
 ## Modals & sections
 ### BaseModalShell
@@ -1025,6 +1161,8 @@ import {
   useDebouncedRef,
   useToast,
   useMobileSidebar,
+  useSidebarCollapse,
+  useNotifications,
 } from 'mgv-backoffice'
 ```
@@ -1037,6 +1175,8 @@ import {
 | `useDebouncedRef(source, delay?)` | Debounced mirror of a ref. Timer cleared on scope dispose. |
 | `useToast(durationMs?)` | Per-component toast state: `{ showToast, toastMessage, toastType, showToastMessage }`. |
 | `useMobileSidebar()` | Singleton state shared between `BaseSidebar` and `BaseAppLayout` for the off-canvas open/closed flag. |
+| `useSidebarCollapse({ storageKey? })` | Singleton collapsed/expanded state for the desktop sidebar rail, shared between `BaseSidebar` and `BaseAppLayout` and persisted to localStorage (default key `'mgv-sidebar-collapsed'`). |
+| `useNotifications()` | Singleton notification state shared by the sidebar bell and `BaseNotificationPanel`: `{ notifications, unreadCount, open, openPanel, closePanel, togglePanel, setNotifications, add, remove, markRead, markAllRead, clear }`. |
 ---

package/dist/components/BaseGoogleSignInButton.vue.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+interface Props {
+    /** Button label. Defaults to "Sign in with Google". */
+    label?: string;
+    /** Disables the button and shows a busy spinner. */
+    loading?: boolean;
+    /** Disables the button without the busy spinner. */
+    disabled?: boolean;
+    /** Full-width (block) layout. Defaults to true. */
+    block?: boolean;
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {
+    label: string;
+    disabled: boolean;
+    loading: boolean;
+    block: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BaseLoginForm.vue.d.ts ADDED Viewed

@@ -0,0 +1,51 @@
+import { LoginCredentials } from '../types/auth';
+interface Props {
+    /** Card heading. Defaults to "Sign in". */
+    title?: string;
+    /** Optional muted line under the heading. */
+    subtitle?: string;
+    /** Submit button label. Defaults to "Sign in". */
+    submitLabel?: string;
+    /** Disables the form and shows a spinner on the submit button. */
+    loading?: boolean;
+    /** Disables the form and shows a spinner on the Google button. */
+    googleLoading?: boolean;
+    /** Error message rendered above the form (e.g. "Invalid credentials"). */
+    error?: string;
+    /** Render the "Sign in with Google" button + divider. Defaults to true. */
+    showGoogle?: boolean;
+    /** Render the "Remember me" checkbox. Defaults to false. */
+    showRemember?: boolean;
+}
+declare var __VLS_1: {}, __VLS_10: {}, __VLS_12: {};
+type __VLS_Slots = {} & {
+    logo?: (props: typeof __VLS_1) => any;
+} & {
+    forgot?: (props: typeof __VLS_10) => any;
+} & {
+    footer?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    submit: (credentials: LoginCredentials) => any;
+    "google-sign-in": () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onSubmit?: ((credentials: LoginCredentials) => any) | undefined;
+    "onGoogle-sign-in"?: (() => any) | undefined;
+}>, {
+    title: string;
+    error: string;
+    subtitle: string;
+    loading: boolean;
+    submitLabel: string;
+    googleLoading: boolean;
+    showGoogle: boolean;
+    showRemember: 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/BaseNotificationPanel.vue.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+interface Props {
+    /** Panel heading. Defaults to "Notifications". */
+    title?: string;
+    /** Shown when there are no notifications. */
+    emptyText?: string;
+    /** Render the "Mark all read" action when there are unread items. */
+    showMarkAllRead?: boolean;
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (id: string | number) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: ((id: string | number) => any) | undefined;
+}>, {
+    title: string;
+    emptyText: string;
+    showMarkAllRead: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BaseSidebar.vue.d.ts CHANGED Viewed

@@ -10,26 +10,32 @@ interface Props {
     version?: string;
     /** Whether to render the dark/light toggle in the footer. */
     showThemeToggle?: boolean;
+    /** Whether to render the desktop collapse toggle (icon-only rail). */
+    collapsible?: boolean;
+    /** Whether to render the notifications bell button. */
+    showNotifications?: boolean;
 }
 declare var __VLS_1: {
     size: number;
 }, __VLS_13: {
     size: number;
-}, __VLS_25: {}, __VLS_27: {};
+}, __VLS_40: {}, __VLS_42: {};
 type __VLS_Slots = {} & {
     logo?: (props: typeof __VLS_1) => any;
 } & {
     logo?: (props: typeof __VLS_13) => any;
 } & {
-    status?: (props: typeof __VLS_25) => any;
+    status?: (props: typeof __VLS_40) => any;
 } & {
-    footer?: (props: typeof __VLS_27) => any;
+    footer?: (props: typeof __VLS_42) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
     homeRouteName: string;
     appName: string;
     version: string;
     showThemeToggle: boolean;
+    collapsible: boolean;
+    showNotifications: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/composables/useNotifications.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import { NotificationItem } from '../types/notification';
+export declare function useNotifications(): {
+    notifications: import('vue').Ref<{
+        id: string | number;
+        title: string;
+        message?: string | undefined;
+        time?: string | undefined;
+        read?: boolean | undefined;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+    }[], NotificationItem[] | {
+        id: string | number;
+        title: string;
+        message?: string | undefined;
+        time?: string | undefined;
+        read?: boolean | undefined;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+    }[]>;
+    unreadCount: import('vue').ComputedRef<number>;
+    open: import('vue').Ref<boolean, boolean>;
+    openPanel: () => void;
+    closePanel: () => void;
+    togglePanel: () => void;
+    setNotifications: (items: NotificationItem[]) => void;
+    add: (item: NotificationItem) => void;
+    remove: (id: NotificationItem["id"]) => void;
+    markRead: (id: NotificationItem["id"]) => void;
+    markAllRead: () => void;
+    clear: () => void;
+};

package/dist/composables/useSidebarCollapse.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+/**
+ * Shared collapsed/expanded state for the desktop sidebar.
+ *
+ * Module-scoped singleton (mirrors useMobileSidebar) so `BaseSidebar` and
+ * the page layout (`BaseAppLayout`, which offsets `<main>` by the sidebar
+ * width) stay in sync. When collapsed, the sidebar shrinks to an icon-only
+ * rail on desktop.
+ *
+ * The preference is persisted to localStorage. The first consumer can pass
+ * an options object to override the key; subsequent callers reuse the same
+ * singleton and the option is only consulted on the first call.
+ */
+export interface UseSidebarCollapseOptions {
+    /** localStorage key used to persist the preference. */
+    storageKey?: string;
+}
+export declare function useSidebarCollapse(options?: UseSidebarCollapseOptions): {
+    collapsed: import('vue').Ref<boolean, boolean>;
+    collapse: () => void;
+    expand: () => void;
+    toggle: () => void;
+};

package/dist/index.d.ts CHANGED Viewed

@@ -25,6 +25,9 @@ export { default as BasePageHeader } from './components/BasePageHeader.vue';
 export { default as BaseToolbarButton } from './components/BaseToolbarButton.vue';
 export { default as BaseActionButton } from './components/BaseActionButton.vue';
 export { default as BaseCopyButton } from './components/BaseCopyButton.vue';
+export { default as BaseGoogleSignInButton } from './components/BaseGoogleSignInButton.vue';
+export { default as BaseLoginForm } from './components/BaseLoginForm.vue';
+export { default as BaseNotificationPanel } from './components/BaseNotificationPanel.vue';
 export { useTheme, initTheme } from './composables/useTheme';
 export type { UseThemeOptions } from './composables/useTheme';
 export { useThemeClasses } from './composables/useThemeClasses';
@@ -33,6 +36,9 @@ export { useEscapeKey } from './composables/useEscapeKey';
 export { useDebouncedRef } from './composables/useDebounce';
 export { useToast } from './composables/useToast';
 export { useMobileSidebar } from './composables/useMobileSidebar';
+export { useSidebarCollapse } from './composables/useSidebarCollapse';
+export type { UseSidebarCollapseOptions } from './composables/useSidebarCollapse';
+export { useNotifications } from './composables/useNotifications';
 export { AlertEnum } from './enums/AlertEnum';
 export { BaseBadgeEnum } from './enums/BaseBadgeEnum';
 export { BaseButtonEnum } from './enums/BaseButtonEnum';
@@ -46,6 +52,8 @@ export { PositioningEnum } from './enums/PositioningEnum';
 export type { BreadCrumb } from './components/BaseBreadcrumb.vue';
 export type { NavItem, NavSection } from './types/sidebar';
 export type { EntityPickerItem } from './types/entityPicker';
+export type { LoginCredentials } from './types/auth';
+export type { NotificationItem } from './types/notification';
 export { getBaseColor, getBaseColorOf } from './utils/util';
 export { methodBadgeSolid, methodBadgeBright, statusBadgeSolid, statusBadgeTinted, } from './utils/httpColors';
 export { sanitizeHtml, isSafeHref } from './utils/sanitizeHtml';

package/dist/types/auth.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ * Credentials emitted by `BaseLoginForm` on submit.
+ *
+ * `remember` is only present when the form is rendered with the
+ * "remember me" checkbox enabled.
+ */
+export interface LoginCredentials {
+    email: string;
+    password: string;
+    remember?: boolean;
+}

package/dist/types/notification.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+/**
+ * A single entry rendered in `BaseNotificationPanel` and counted by the
+ * sidebar's unread badge.
+ *
+ *   • `id`      — stable key, used for list rendering and mark/remove ops.
+ *   • `title`   — bold headline line.
+ *   • `message` — optional secondary line.
+ *   • `time`    — optional pre-formatted timestamp (e.g. "2h ago"). The
+ *                 library does not format dates for you.
+ *   • `read`    — unread entries are highlighted and count toward the badge.
+ *   • `type`    — drives the small status dot colour.
+ */
+export interface NotificationItem {
+    id: string | number;
+    title: string;
+    message?: string;
+    time?: string;
+    read?: boolean;
+    type?: 'info' | 'success' | 'warning' | 'error';
+}