diff --git a/examples/mockRouter.stories.ts b/examples/mockRouter.stories.ts index d625d63..64253e2 100644 --- a/examples/mockRouter.stories.ts +++ b/examples/mockRouter.stories.ts @@ -51,6 +51,30 @@ Default.decorators = [ }) ] +export const ParamsObject = () => ({ + args: { + path: '/' + }, + /* create template and pass Storybook args to using props */ + template: ` +
+
+

$route:

+
<pre>{{ §route }}</pre>
+
{{ $route }}
+
+
+ ` +}) + +ParamsObject.decorators = [ + mockRouter({ + meta: { some: 'meta' }, + params:{ "type": "custom", "projectId": "1", "tab": "products", "vProduct": "1" }, + query: { 'some': 'query' } + }) +] + export const DynamicTemplate = () => ({ /* create template and pass Storybook args to using props */ template: ` diff --git a/package.json b/package.json index 7846fd0..1fb2dad 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "storybook-vue3-router", - "version": "6.0.0", + "version": "6.0.1", "description": "A Storybook decorator that allows you to build stories for your routing-aware components.", "keywords": [ "storybook-addons", diff --git a/src/utils.ts b/src/utils.ts index cae9346..aadf85f 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -43,11 +43,19 @@ export function resetRoutes(router: Router, newRoutes: RouteRecordRaw[]): void { } type argObjectKeys = Record -export function getFromArgs(args: argObjectKeys, options: Array) { +export type ArgsArrayOrObject = Array | { [key: string]: string } +export function getFromArgs(args: argObjectKeys, options: ArgsArrayOrObject): argObjectKeys { let filtered: argObjectKeys = {} - options.forEach((option) => { - filtered = { ...filtered, [option]: args[option] } - }) - + if (Array.isArray(options)) { + options.forEach((option) => { + filtered = { ...filtered, [option]: args[option] } + }) + } else if (typeof options === 'object' && options !== null) { + Object.keys(options).forEach((option) => { + filtered = { ...filtered, [option]: options[option] } + }) + } else { + filtered = { ...filtered } + } return filtered } \ No newline at end of file diff --git a/src/withMockRouter.ts b/src/withMockRouter.ts index edd7829..76177aa 100644 --- a/src/withMockRouter.ts +++ b/src/withMockRouter.ts @@ -9,7 +9,7 @@ import type { RouteLocationNormalizedLoaded } from 'vue-router' -import { getFromArgs } from './utils' +import { getFromArgs, type ArgsArrayOrObject } from './utils' type MockRouter = Router & { isMocked?: boolean } type MockRoute = RouteLocationNormalizedLoaded & { isMocked?: boolean } @@ -26,7 +26,7 @@ type MockRoute = RouteLocationNormalizedLoaded & { isMocked?: boolean } */ export function withMockRouter ( /* optional: router options - used to pass `initialRoute` value, `beforeEach()` navigation guard methods and vue-router `createRouter` options */ - options: { meta?: Array, params?: Array, query?: Array } + options: { meta?: ArgsArrayOrObject, params?: ArgsArrayOrObject, query?: ArgsArrayOrObject } ): Decorator { return (_, ctx) => ({ setup () {