Skip to content

Commit 447e943

Browse files
johndatserakisjohndatserakis
authored
Merge pull request #18 from johndatserakis/issue-7-path-named-routes
Add support for an object path for vue-router
2 parents 58943d7 + 5a85023 commit 447e943

16 files changed

+124
-145
lines changed

‎README.md‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -91,95 +91,95 @@ The component will work well with frontend component frameworks. I'm using Boots
9191
data() {
9292
return {
9393
navbarOptions: {
94-
elementId: 'main-navbar',
94+
elementId: "main-navbar",
9595
isUsingVueRouter: true,
9696
mobileBreakpoint: 992,
97-
brandImagePath: './',
98-
brandImage: require('../src/assets/images/lockup-color.png'),
99-
brandImageAltText: 'brand-image',
97+
brandImagePath: "./",
98+
brandImage: require("../src/assets/images/lockup-color.png"),
99+
brandImageAltText: "brand-image",
100100
collapseButtonOpenColor: "#661c23",
101101
collapseButtonCloseColor: "#661c23",
102102
showBrandImageInMobilePopup: true,
103-
ariaLabelMainNav: 'Main Navigation',
104-
tooltipAnimationType: 'shift-away',
103+
ariaLabelMainNav: "Main Navigation",
104+
tooltipAnimationType: "shift-away",
105105
menuOptionsLeft: [
106106
{
107-
type: 'link',
108-
text: 'Why Dunder Mifflin',
107+
type: "link",
108+
text: "Why Dunder Mifflin",
109109
arrowColor: "#659CC8",
110110
subMenuOptions: [
111111
{
112112
isLinkAction: true,
113113
type: "link",
114114
text: "About",
115115
subText: "Stupid corporate wet blankets. Like booze ever killed anyone.",
116-
path: "./about",
116+
path: { name: "about" },
117117
iconLeft: '<i class="fa fa-star fa-fw"></i>'
118118
},
119119
{
120-
type: 'hr',
120+
type: "hr",
121121
},
122122
{
123-
type: 'link',
124-
text: 'Locations',
125-
subText: 'You\'re a presentation tool!',
126-
path: './locations',
123+
type: "link",
124+
text: "Locations",
125+
subText: "You\'re a presentation tool!",
126+
path: { name: "locations" }
127127
arrowColor: "#659CC8",
128128
},
129129
{
130-
type: 'hr',
130+
type: "hr",
131131
},
132132
{
133-
type: 'link',
134-
text: 'Blog',
135-
subText: 'I enjoy having breakfast in bed. I like waking up to the smell of bacon. Sue me.',
136-
path: './blog',
133+
type: "link",
134+
text: "Blog",
135+
subText: "I enjoy having breakfast in bed. I like waking up to the smell of bacon. Sue me.",
136+
path: { name: "blog" }
137137
},
138138
]
139139
},
140140
{
141-
type: 'link',
142-
text: 'Contact',
141+
type: "link",
142+
text: "Contact",
143143
subMenuOptions: [
144144
{
145-
type: 'link',
146-
text: 'Customer Service',
147-
path: './customer-service'
145+
type: "link",
146+
text: "Customer Service",
147+
path: { name: "customer-service" },
148148
},
149149
{
150-
type: 'link',
151-
text: 'Accounting',
152-
path: './accounting',
150+
type: "link",
151+
text: "Accounting",
152+
path: { name: "accounting" },
153153
},
154154
{
155-
type: 'hr',
155+
type: "hr",
156156
},
157157
{
158-
type: 'link',
159-
text: 'Reception',
160-
path: './reception',
158+
type: "link",
159+
text: "Reception",
160+
path: { name: "reception"},
161161
iconLeft: '<svg id="i-telephone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M3 12 C3 5 10 5 16 5 22 5 29 5 29 12 29 20 22 11 22 11 L10 11 C10 11 3 20 3 12 Z M11 14 C11 14 6 19 6 28 L26 28 C26 19 21 14 21 14 L11 14 Z" /> <circle cx="16" cy="21" r="4" /> </svg>',
162162
},
163163
]
164164
},
165165
{
166-
type: 'link',
167-
text: 'Pricing',
168-
path: './pricing',
166+
type: "link",
167+
text: "Pricing",
168+
path: { name: "pricing"},
169169
iconRight: '<i class="fa fa-long-arrow-right fa-fw"></i>',
170170
},
171171
],
172172
menuOptionsRight: [
173173
{
174-
type: 'button',
175-
text: 'Signup',
176-
path: './signup',
177-
class: 'button-red'
174+
type: "button",
175+
text: "Signup",
176+
path: { name: "signup" },
177+
class: "button-red"
178178
},
179179
{
180-
type: 'button',
181-
text: 'Login',
182-
path: './login',
180+
type: "button",
181+
text: "Login",
182+
path: { name: "login" },
183183
iconRight: '<svg id="i-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M22 6 L30 16 22 26 M30 16 L2 16" /> </svg>'
184184
}
185185
]
@@ -248,7 +248,7 @@ Sometimes you may want your links to perform an action instead of following a li
248248
| elementId | String | no | A generated uuid | | This value will be set as the `id` of the instance |
249249
| isUsingVueRouter | Boolean | no | false | | If you want to use vue-router, set this to true and all links will automatically be `<router-link></router-link>` |
250250
| mobileBreakpoint | Number | no | 992 | | Width at which the navbar turns into the mobile version |
251-
| brandImagePath | String | no | '/' | | The path for your `brand-image`'s link |
251+
| brandImagePath | String or Object | no | '/' | | The path for your `brand-image`. If you have `isUsingVueRouter === true`, then this needs to be an `Object` with a `name` property. Otherwise, just provide a `String`. link |
252252
| brandImage | Image | no | | | `require()` your image here to use your brand image |
253253
| brandImageAltText | String | no | 'brand-image' | | The `alt` tag text for your brand image |
254254
| collapseButtonImageOpen | Image | no | A hamburger icon | | `require()` your image here |
@@ -261,7 +261,7 @@ Sometimes you may want your links to perform an action instead of following a li
261261
| menuOptionsLeft | Object | no | {} | | Menu options that will be _pulled_ to the left towards the `brand-image` |
262262
| menuOptionsLeft.type | String | yes | | 'link', 'button', 'spacer', 'dropdown' | What type of link will this menu-option be? `link` will be a link, `button` will be a button, `spacer` will be a spacer with a width of `30px` , `dropdown` will create a dropdown on desktop and a `ul/li` list on mobile. `dropdown` only works on menuOptions, not subMenuOptions. |
263263
| menuOptionsLeft.text | String | yes | | | Text of menu-option |
264-
| menuOptionsLeft.path | String | yes | | | Link path of menu-option. Not applicable to `dropdown` menuOption types. |
264+
| menuOptionsLeft.path | String or Object | yes | | | Link path of menu-option. If you have `isUsingVueRouter === true`, then this needs to be an `Object` with a `name` property. Otherwise, just provide a `String`. Not applicable to `dropdown` menuOption types. |
265265
| menuOptionsLeft.arrowColor | String | no | | | CSS hex - `#FFF`. This styles the little chevron icon. |
266266
| menuOptionsLeft.class | String | no | | | Only for `menuOptionsLeft.type === 'button'` - provide a class name so you can style your buttons |
267267
| menuOptionsLeft.isLinkAction | Boolean | no | false | | When `true` , the `path` option of the `menuOption` will not fire - instead, you'll be able to register for the `@vnb-item-clicked` event which will spit you out the `text` value of your `menuOption` . That way, you can do an action you may want to trigger. |

0 commit comments

Comments
 (0)