@maropost-ui/liquidsky-ui 0.1.77 → 0.1.79

package/README.md

@@ -38,6 +38,24 @@ npm install @maropost-ui/liquidsky-ui
 import { AppBreadcrumb } from '@maropost-ui/liquidsky-ui'
 ```
 
+
+## 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).
+
+
 ------------------------------------------------------------------------
 
 ------------------------------------------------------------------------

package/dist/components/AppStepper/useStepper.d.ts

@@ -5,12 +5,12 @@ export declare function useStepper(steps: TStepItem[]): {
         name: string;
         order: number;
         id: number;
-        component?: {
+        component?: import("vue").FunctionalComponent<any, {}, any, {}> | {
             new (...args: any[]): any;
             __isFragment?: never;
             __isTeleport?: never;
             __isSuspense?: never;
-        } | import("vue").FunctionalComponent<any, {}, any, {}> | {
+        } | {
             [x: string]: any;
             setup?: ((this: void, props: import("@vue/shared").LooseRequired<any>, ctx: {
                 attrs: import("vue").Attrs;
@@ -135,12 +135,12 @@ export declare function useStepper(steps: TStepItem[]): {
         name: string;
         order: number;
         id: number;
-        component?: {
+        component?: import("vue").FunctionalComponent<any, {}, any, {}> | {
             new (...args: any[]): any;
             __isFragment?: never;
             __isTeleport?: never;
             __isSuspense?: never;
-        } | import("vue").FunctionalComponent<any, {}, any, {}> | {
+        } | {
             [x: string]: any;
             setup?: ((this: void, props: import("@vue/shared").LooseRequired<any>, ctx: {
                 attrs: import("vue").Attrs;

package/dist/components/index.d.ts

@@ -36,6 +36,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 { MpVBtn, MpVTextField, MpVTextarea, MpVDateInput, MpVSelect, MpVAutocomplete, MpVCheckbox, MpVCheckboxBtn, MpVSwitch, MpVRadio, MpVRadioGroup, MpVForm, MpVChip, MpVStatusChip, MpVMenu, MpVDialog, MpVTabs, MpVTab, MpVCombobox, MpVFileInput, MpVBtnToggle, MpVList, MpVListItem, MpVAlert, MpVExpansionPanels, MpVExpansionPanel, MpVPagination, MpVTooltip, MpVSnackbar, MpVNavigationDrawer, MpVDataTable, MpVDataTableServer, MpVDataTableVirtual, MpVStepper, MpVDatePicker, MpVMaskInput, wrapWithMpTest, } 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/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): 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/useMpTestId.d.ts

@@ -1,17 +1,13 @@
-import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+import { type MpTestBindingObject } from '../directives/MpTest';
 /**
- * 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 Use `v-mp-test="MP_TEST_IDS.*"` or
+ * `v-mp-test="{ action, module, suffix }"`.
  */
-export default function useMpTestId(defaultId: string, testId?: MaybeRefOrGetter<string | undefined>, testIdSuffix?: MaybeRefOrGetter<string | undefined>): ComputedRef<string>;
+export default function useMpTestId(_defaultId: string, _testId?: unknown, _testIdSuffix?: unknown): {
+    readonly value: string;
+};

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';