@maropost-ui/liquidsky-ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/README.md

@@ -40,6 +40,22 @@ import { AppBreadcrumb, TheThemeSwitcher } from '@maropost-ui/liquidsky-ui'
 
 Theme lives in `TheUserDropdown`: click **Theme** for Classic / Marobase. Light / Dark sun–moon controls appear on the right only for Marobase. Persist key is `liquidsky-theme`.
 
+## Test identifiers (`v-mp-test`)
+
+Default `data-testid`s **per component** (root + built-in actions) live in source:
+
+- [`src/directives/mpTestComponentDefaults.ts`](src/directives/mpTestComponentDefaults.ts) — `MP_TEST_COMPONENT_DEFAULTS`
+- [`src/directives/mpTestConfig.ts`](src/directives/mpTestConfig.ts) — `MP_TEST_IDS` string constants
+
+```ts
+import { MP_TEST_COMPONENT_DEFAULTS, MP_TEST_IDS } from '@maropost-ui/liquidsky-ui'
+
+MP_TEST_COMPONENT_DEFAULTS.AppDialogWrapper.ids
+// → [{ role: 'root', id: 'mp-dialog' }, { role: 'cancel', … }, { role: 'save', … }]
+```
+
+Storybook: **Directives → MpTest** (catalog of defaults).
+
 ------------------------------------------------------------------------
 
 ------------------------------------------------------------------------
@@ -367,4 +383,3 @@ stories/
 ```
 
 
-

package/dist/components/TheHeader/types.d.ts

@@ -1,7 +1,35 @@
 import type { NotificationIconProps } from '../../types/NotificationIconProps';
+import type { MpNotificationsMenuProps } from '../../types/MpNotificationsMenuProps';
+import type { NotificationItem } from '../../types/TheNotificationDrawerProps';
 import type { MpTestIdProps } from '../../types/MpTestIdProps';
+export type CreateNewMenuIcon = 'dashboard' | 'email-campaign' | 'segment' | 'automation' | 'contact-list';
+/** A destination shown in the Marobase header's Create new menu. */
+export type CreateNewMenuItem = {
+    /** Stable key for rendering the item. */
+    id: string;
+    title: string;
+    description?: string;
+    /** Icon rendered by the library. */
+    icon?: CreateNewMenuIcon;
+    /** Optional keyboard hint displayed at the end of the item. */
+    shortcut?: string;
+    /** Application-owned navigation or creation action. */
+    onClick: () => void;
+};
+export type MpNotificationsMenuBindings = MpNotificationsMenuProps & {
+    onOpen?: () => void;
+    onClose?: () => void;
+    onSeeAll?: () => void;
+    onMarkAllRead?: () => void;
+    onNotificationClick?: (notification: NotificationItem) => void;
+    onDownload?: (notification: NotificationItem) => void;
+    onRetry?: () => void;
+    onLoadMore?: () => void;
+};
 /** Application-owned permissions and navigation for Liquidsky's header controls. */
 export type HeaderActions = {
+    /** Items for the Marobase Create new (+) menu. When omitted, + retains its What's new action. */
+    createNewItems?: CreateNewMenuItem[];
     showSettings?: boolean;
     settingsHref?: string;
     onSettingsClick?: (event: MouseEvent) => void;
@@ -35,4 +63,6 @@ export type TheHeaderProps = {
     hideAppBarNavIcon?: boolean;
     /** notification icon props e.g. { icon: "mdi-bell", color: "primary" } */
     notificationIconProps?: NotificationIconProps;
+    /** Marobase notification menu data, states, and application-owned action handlers. */
+    notificationMenuProps?: MpNotificationsMenuBindings;
 } & MpTestIdProps;

package/dist/components/index.d.ts

@@ -23,10 +23,12 @@ export { default as AppGridTable } from "./AppGridTable.vue";
 export { default as TheAccountDropdown } from "./TheAccountDropdown.vue";
 export { default as TheAppsDropdown } from "./TheAppsDropdown.vue";
 export { default as TheHeader } from "./TheHeader";
+export type { CreateNewMenuIcon, CreateNewMenuItem, HeaderActions, MpNotificationsMenuBindings, TheHeaderProps } from './TheHeader/types';
 export { default as TheAppShell } from "./TheAppShell";
 export { default as TheNavigation } from "./TheNavigation.vue";
 export { default as TheNotificationDrawer } from "./TheNotificationDrawer.vue";
 export { default as TheNotificationIcon } from "./TheNotificationIcon.vue";
+export { default as MpNotificationsMenu } from "./MpNotificationsMenu.vue";
 export { default as TheSearchBar } from "./TheSearchBar";
 export { default as TheSecondaryNavigation } from "./TheSecondaryNavigation.vue";
 export { default as MpSectionRail } from './MpSectionRail/MpSectionRail.vue';
@@ -42,6 +44,7 @@ export { default as TheOnboardingBanner } from "./TheOnboardingBanner.vue";
 export { default as TheOnboardingScreenChecklists } from "./TheOnboardingScreenChecklists.vue";
 export { default as AppButton } from "./AppButton.vue";
 export { default as AppSplitButton } from "./AppSplitButton.vue";
+export * from "./vuetify-wrappers";
 export { default as SlVueTreeNext } from "./SlVueTreeNext.vue";
 export { default as AppStepper } from "./AppStepper/AppStepper.vue";
 export { default as AppDatePicker } from "./AppDatePicker.vue";

package/dist/components/vuetify-wrappers/index.d.ts

@@ -0,0 +1,37 @@
+export { default as MpVBtn } from './MpVBtn.vue';
+export { default as MpVTextField } from './MpVTextField.vue';
+export { default as MpVTextarea } from './MpVTextarea.vue';
+export { default as MpVDateInput } from './MpVDateInput.vue';
+export { default as MpVSelect } from './MpVSelect.vue';
+export { default as MpVAutocomplete } from './MpVAutocomplete.vue';
+export { default as MpVCheckbox } from './MpVCheckbox.vue';
+export { default as MpVCheckboxBtn } from './MpVCheckboxBtn.vue';
+export { default as MpVSwitch } from './MpVSwitch.vue';
+export { default as MpVRadio } from './MpVRadio.vue';
+export { default as MpVRadioGroup } from './MpVRadioGroup.vue';
+export { default as MpVForm } from './MpVForm.vue';
+export { default as MpVChip } from './MpVChip.vue';
+export { default as MpVStatusChip } from './MpVStatusChip.vue';
+export { default as MpVMenu } from './MpVMenu.vue';
+export { default as MpVDialog } from './MpVDialog.vue';
+export { default as MpVTabs } from './MpVTabs.vue';
+export { default as MpVTab } from './MpVTab.vue';
+export { default as MpVCombobox } from './MpVCombobox.vue';
+export { default as MpVFileInput } from './MpVFileInput.vue';
+export { default as MpVBtnToggle } from './MpVBtnToggle.vue';
+export { default as MpVList } from './MpVList.vue';
+export { default as MpVListItem } from './MpVListItem.vue';
+export { default as MpVAlert } from './MpVAlert.vue';
+export { default as MpVExpansionPanels } from './MpVExpansionPanels.vue';
+export { default as MpVExpansionPanel } from './MpVExpansionPanel.vue';
+export { default as MpVPagination } from './MpVPagination.vue';
+export { default as MpVTooltip } from './MpVTooltip.vue';
+export { default as MpVSnackbar } from './MpVSnackbar.vue';
+export { default as MpVNavigationDrawer } from './MpVNavigationDrawer.vue';
+export { default as MpVDataTable } from './MpVDataTable.vue';
+export { default as MpVDataTableServer } from './MpVDataTableServer.vue';
+export { default as MpVDataTableVirtual } from './MpVDataTableVirtual.vue';
+export { default as MpVStepper } from './MpVStepper.vue';
+export { default as MpVDatePicker } from './MpVDatePicker.vue';
+export { default as MpVMaskInput } from './MpVMaskInput.vue';
+export { wrapWithMpTest } from './wrapWithMpTest';

package/dist/components/vuetify-wrappers/useWrapperDefaults.d.ts

@@ -0,0 +1,2 @@
+/** Keep the inner Vuetify component in the wrapper's named defaults scope. */
+export declare function useWrapperDefaults(defaultName: string): import("vue").ComputedRef<string>;

package/dist/components/vuetify-wrappers/wrapWithMpTest.d.ts

@@ -0,0 +1,9 @@
+import { type Component } from 'vue';
+/**
+ * Transparent HOC: apply a default `v-mp-test` base id to an app-provided
+ * Vuetify remap (e.g. Commerce `AppTextFieldInput`) without requiring the
+ * consuming app to import `MP_TEST_IDS` or change its wrapper.
+ */
+export declare function wrapWithMpTest(Inner: Component, testId: string, name: string, defaultsName?: string): import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/composables/index.d.ts

@@ -6,6 +6,8 @@ export { default as useValidation } from "./useValidation";
 export { default as useClipboard } from "./useClipboard";
 export { default as useDebounce } from "./useDebounce";
 export { default as useEmoji } from "./useEmoji";
+export { default as useHotkeys } from "./useHotkeys";
+export type { HotkeyBinding, UseHotkeysOptions } from "./useHotkeys";
 export { default as toRefs } from "./toRefs";
 export { default as useUnitConversion } from "./useUnitConversion";
 export { default as useTimezoneTime } from "./useCalculateTime";

package/dist/composables/useHotkeys.d.ts

@@ -0,0 +1,36 @@
+import { type MaybeRefOrGetter } from 'vue';
+export type HotkeyBinding = {
+    key: string;
+    handler: (event: KeyboardEvent) => void;
+};
+export type UseHotkeysOptions = {
+    /** Reactively enables or disables all bindings. */
+    enabled?: MaybeRefOrGetter<boolean>;
+    /** Allow shortcuts while typing in inputs, textareas, selects, or editable content. */
+    allowInEditable?: boolean;
+    /** Ignore key-repeat events. */
+    ignoreRepeat?: boolean;
+    /** Prevent the browser's default action when a binding matches. */
+    preventDefault?: boolean;
+};
+/**
+ * @description Listen for case-insensitive, unmodified keyboard shortcuts and fire matching handlers.
+ * Bindings and the enabled state may be reactive. By default, shortcuts are ignored while the
+ * user is typing, during IME composition, when modifier keys are held, and for repeated keydown
+ * events. The window listener is registered and removed with the owning component lifecycle.
+ *
+ * @example
+ * import { computed, ref } from 'vue'
+ * import { useHotkeys } from '@maropost-ui/liquidsky-ui'
+ *
+ * const menuOpen = ref(false)
+ * const bindings = computed(() => [
+ *   { key: 'D', handler: () => router.push('/dashboard') },
+ *   { key: 'E', handler: () => router.push('/campaigns/new') },
+ * ])
+ *
+ * useHotkeys(bindings, { enabled: menuOpen })
+ */
+export default function useHotkeys(bindings: MaybeRefOrGetter<HotkeyBinding[]>, options?: UseHotkeysOptions): {
+    handleKeydown: (event: KeyboardEvent) => void;
+};

package/dist/composables/useMpTestId.d.ts

@@ -1,17 +1,13 @@
+import { type MpTestBindingObject } from '../directives/MpTest';
 import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
 /**
- * Resolves a test identifier from a component default, optional override, and optional suffix.
- * Override (`testId`) wins over suffix (`testIdSuffix`).
+ * @deprecated Prefer `resolveMpTestBinding` / `v-mp-test`.
+ * Legacy `(defaultId, testId?, testIdSuffix?)` still supported.
  */
-export declare function resolveMpTestId(defaultId: string, testId?: string, testIdSuffix?: string): string;
+export declare function resolveMpTestId(defaultIdOrBinding: string | MpTestBindingObject, testId?: string, testIdSuffix?: string): string;
 /**
- * @description
- * Reactive test identifier for `v-mp-test`. Pass a component default plus optional
- * `testId` (override) and `testIdSuffix` (extend) props.
- *
- * @example
- * ```ts
- * const mpTestId = useMpTestId(MP_TEST_IDS.button, () => props.testId, () => props.testIdSuffix)
- * ```
+ * @deprecated Prefer `v-mp-test="MP_TEST_IDS.*"` or
+ * `v-mp-test="{ action, module, suffix }"`. This compatibility wrapper remains
+ * available for themed components and consumers using the legacy test-id props.
  */
 export default function useMpTestId(defaultId: string, testId?: MaybeRefOrGetter<string | undefined>, testIdSuffix?: MaybeRefOrGetter<string | undefined>): ComputedRef<string>;

package/dist/design-tokens/generated/tokens.d.ts

@@ -573,6 +573,11 @@ export declare const mp_component_button_radius_pill = "9999px";
 export declare const mp_component_button_radius_medium = "9999px";
 export declare const mp_component_button_radius_square = "0px";
 export declare const mp_component_button_radius_default = "9999px";
+export declare const mp_component_buttonGroup_height_md = "40px";
+export declare const mp_component_buttonGroup_height_sm = "32px";
+export declare const mp_component_buttonGroup_padding = "4px";
+export declare const mp_component_buttonGroup_radius_track = "9999px";
+export declare const mp_component_buttonGroup_radius_segment = "9999px";
 export declare const mp_component_input_radius_default = "10px";
 export declare const mp_component_card_radius_sm = "10px";
 export declare const mp_component_card_radius_md = "12px";

package/dist/directives/MpTest.d.ts

@@ -1,23 +1,45 @@
 import type { ObjectDirective } from 'vue';
 /**
  * @description
- * A custom Vue directive (`v-mp-test`) that applies a test identifier to an element
- * for Playwright (`data-testid`) and Cypress (`data-cy` / `data-test-cy`).
- * Attribute names are defined once in `mpTestConfig.ts`; changing that list updates every usage.
- * Prefer `testId` / `testIdSuffix` props on Liquidsky components so defaults can be extended or overridden.
+ * `v-mp-test` applies Playwright/Cypress test ids (`data-testid`, `data-cy`, …).
  *
- * @example Basic usage in a Vue component:
- * ```vue
- * <template>
- *   <div v-mp-test="'checkout-summary'">Summary</div>
- *   <AppDataTable />
- *   <AppDataTable test-id-suffix="inventory" />
- *   <AppDataTable test-id="inventory-table" />
- * </template>
- * ```
+ * Final id shape: `mp-{component}[-{action}][-{module}][-{suffix}]`
+ * (omit empty optional segments).
+ *
+ * Binding:
+ * - Component string (`MP_TEST_IDS.breadcrumb`) → **base** (`mp-breadcrumb`)
+ * - Object `{ action?, module?, suffix? }` → segments merged onto base
+ * - Consumer string → **full replace** of the entire id
+ * - Directive arg (`v-mp-test:mp-button`) → base when no string base yet
+ *
+ * Merge (Liquidsky default on root + parent customization):
+ * - `<AppBreadcrumb />` → `mp-breadcrumb`
+ * - `<AppBreadcrumb v-mp-test="{ action: 'click', module: 'collection', suffix: 'test' }" />`
+ *   → `mp-breadcrumb-click-collection-test`
+ * - `<AppBreadcrumb v-mp-test="'testing-collection-button-click'" />`
+ *   → `testing-collection-button-click`
  */
+export type MpTestBindingObject = {
+    action?: string;
+    module?: string;
+    suffix?: string;
+};
+export type MpTestBinding = string | MpTestBindingObject | null | undefined;
+type MpTestContribution = {
+    base?: string;
+    action?: string;
+    module?: string;
+    suffix?: string;
+    /** Plain string that replaces the entire resolved id. */
+    fullReplace?: string;
+    /** True when this contribution came from a plain string binding. */
+    fromString?: boolean;
+};
 interface MpTestHTMLElement extends HTMLElement {
     _vMpTestValue?: string;
+    _vMpTestContrib?: Map<string, MpTestContribution>;
 }
-export declare const vMpTest: ObjectDirective<MpTestHTMLElement, unknown>;
+/** Build final id from a single binding (+ optional arg default as base). */
+export declare function resolveMpTestBinding(bindingValue: unknown, argDefault?: string): string;
+export declare const vMpTest: ObjectDirective<MpTestHTMLElement, MpTestBinding>;
 export default vMpTest;

package/dist/directives/index.d.ts

@@ -2,3 +2,4 @@ export { default as tooltipOverflowCheck } from './TooltipOverflowCheck';
 export { default as Clipboard } from './Clipboard';
 export { default as MpTest, vMpTest } from './MpTest';
 export { MP_TEST_ATTRIBUTES, MP_TEST_IDS } from './mpTestConfig';
+export { MP_TEST_COMPONENT_DEFAULTS, type MpTestComponentDefaultEntry, type MpTestComponentDefaultGroup, type MpTestComponentName } from './mpTestComponentDefaults';