Skip to content

Commit 92d2afa

Browse files
johndatserakisjohndatserakis
committed
Update DynamicLink click handling
1 parent efcfce7 commit 92d2afa

13 files changed

+5372
-7763
lines changed

‎README.md

Lines changed: 33 additions & 33 deletions
Large diffs are not rendered by default.

‎dist/vue-navigation-bar.css

Lines changed: 102 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,6 @@
2323
height: auto;
2424
}
2525

26-
.vnb__brand-image-wrapper {
27-
padding-left: 10px;
28-
}
29-
.vnb__brand-image-wrapper__link__image {
30-
max-height: 30px;
31-
}
32-
33-
.vnb-image {
34-
max-width: 100%;
35-
height: auto;
36-
}
37-
3826
.vnb__collapse-button {
3927
cursor: pointer;
4028
border: 0;
@@ -49,6 +37,18 @@
4937
max-width: 30px;
5038
}
5139

40+
.vnb__brand-image-wrapper {
41+
padding-left: 10px;
42+
}
43+
.vnb__brand-image-wrapper__link__image {
44+
max-height: 30px;
45+
}
46+
47+
.vnb-image {
48+
max-width: 100%;
49+
height: auto;
50+
}
51+
5252
.vnb__menu-options {
5353
display: flex;
5454
flex-direction: row;
@@ -207,44 +207,6 @@
207207
height: auto;
208208
}
209209

210-
.vnb__menu-options__option__button {
211-
display: flex;
212-
flex-direction: row;
213-
justify-content: center;
214-
align-items: center;
215-
font-weight: 400;
216-
color: #fff;
217-
text-align: center;
218-
vertical-align: middle;
219-
user-select: none;
220-
font-size: 0.9rem;
221-
line-height: 1;
222-
border-radius: 0.25rem;
223-
text-transform: uppercase;
224-
letter-spacing: 1px;
225-
padding: 0.5rem 1rem;
226-
transition: background 0.2s ease-in;
227-
}
228-
.vnb__menu-options__option__button__icon svg {
229-
max-height: 16px;
230-
max-width: 16px;
231-
}
232-
.vnb__menu-options__option__button__icon--left {
233-
margin-right: 5px;
234-
}
235-
.vnb__menu-options__option__button__icon--right {
236-
margin-left: 5px;
237-
}
238-
239-
.vnb-button {
240-
background: #007aff;
241-
}
242-
.vnb-button:hover {
243-
color: #fff;
244-
background: #0062cc;
245-
text-decoration: none;
246-
}
247-
248210
.vnb__menu-options__option__link {
249211
cursor: pointer;
250212
font-weight: 500;
@@ -342,56 +304,92 @@
342304
width: 30px;
343305
}
344306

345-
.tippy-box[data-animation=perspective][data-placement^=top] {
346-
transform-origin: bottom;
307+
.vnb__menu-options__option__button {
308+
display: flex;
309+
flex-direction: row;
310+
justify-content: center;
311+
align-items: center;
312+
font-weight: 400;
313+
color: #fff;
314+
text-align: center;
315+
vertical-align: middle;
316+
user-select: none;
317+
font-size: 0.9rem;
318+
line-height: 1;
319+
border-radius: 0.25rem;
320+
text-transform: uppercase;
321+
letter-spacing: 1px;
322+
padding: 0.5rem 1rem;
323+
transition: background 0.2s ease-in;
324+
}
325+
.vnb__menu-options__option__button__icon svg {
326+
max-height: 16px;
327+
max-width: 16px;
328+
}
329+
.vnb__menu-options__option__button__icon--left {
330+
margin-right: 5px;
331+
}
332+
.vnb__menu-options__option__button__icon--right {
333+
margin-left: 5px;
347334
}
348335

349-
.tippy-box[data-animation=perspective][data-placement^=top][data-state=visible] {
350-
transform: perspective(700px);
336+
.vnb-button {
337+
background: #007aff;
338+
}
339+
.vnb-button:hover {
340+
color: #fff;
341+
background: #0062cc;
342+
text-decoration: none;
351343
}
352344

353-
.tippy-box[data-animation=perspective][data-placement^=top][data-state=hidden] {
354-
transform: perspective(700px) translateY(8px) rotateX(60deg);
345+
.tippy-box[data-animation=shift-toward][data-state=hidden] {
346+
opacity: 0;
355347
}
356348

357-
.tippy-box[data-animation=perspective][data-placement^=bottom] {
358-
transform-origin: top;
349+
.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=top] {
350+
transform: translateY(-10px);
359351
}
360352

361-
.tippy-box[data-animation=perspective][data-placement^=bottom][data-state=visible] {
362-
transform: perspective(700px);
353+
.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=bottom] {
354+
transform: translateY(10px);
363355
}
364356

365-
.tippy-box[data-animation=perspective][data-placement^=bottom][data-state=hidden] {
366-
transform: perspective(700px) translateY(-8px) rotateX(-60deg);
357+
.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=left] {
358+
transform: translateX(-10px);
367359
}
368360

369-
.tippy-box[data-animation=perspective][data-placement^=left] {
370-
transform-origin: right;
361+
.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=right] {
362+
transform: translateX(10px);
371363
}
372364

373-
.tippy-box[data-animation=perspective][data-placement^=left][data-state=visible] {
374-
transform: perspective(700px);
365+
.tippy-box[data-theme~=light] {
366+
color: #26323d;
367+
box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25), 0 4px 4px -2px rgba(91, 94, 105, 0.15);
368+
background-color: #fff;
375369
}
376370

377-
.tippy-box[data-animation=perspective][data-placement^=left][data-state=hidden] {
378-
transform: perspective(700px) translateX(8px) rotateY(-60deg);
371+
.tippy-box[data-theme~=light][data-placement^=top] > .tippy-arrow:before {
372+
border-top-color: #fff;
379373
}
380374

381-
.tippy-box[data-animation=perspective][data-placement^=right] {
382-
transform-origin: left;
375+
.tippy-box[data-theme~=light][data-placement^=bottom] > .tippy-arrow:before {
376+
border-bottom-color: #fff;
383377
}
384378

385-
.tippy-box[data-animation=perspective][data-placement^=right][data-state=visible] {
386-
transform: perspective(700px);
379+
.tippy-box[data-theme~=light][data-placement^=left] > .tippy-arrow:before {
380+
border-left-color: #fff;
387381
}
388382

389-
.tippy-box[data-animation=perspective][data-placement^=right][data-state=hidden] {
390-
transform: perspective(700px) translateX(-8px) rotateY(60deg);
383+
.tippy-box[data-theme~=light][data-placement^=right] > .tippy-arrow:before {
384+
border-right-color: #fff;
391385
}
392386

393-
.tippy-box[data-animation=perspective][data-state=hidden] {
394-
opacity: 0;
387+
.tippy-box[data-theme~=light] > .tippy-backdrop {
388+
background-color: #fff;
389+
}
390+
391+
.tippy-box[data-theme~=light] > .tippy-svg-arrow {
392+
fill: #fff;
395393
}
396394

397395
.tippy-box[data-animation=scale][data-placement^=top] {
@@ -435,52 +433,54 @@
435433
transform: translateX(-10px);
436434
}
437435

438-
.tippy-box[data-animation=shift-toward][data-state=hidden] {
439-
opacity: 0;
436+
.tippy-box[data-animation=perspective][data-placement^=top] {
437+
transform-origin: bottom;
440438
}
441439

442-
.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=top] {
443-
transform: translateY(-10px);
440+
.tippy-box[data-animation=perspective][data-placement^=top][data-state=visible] {
441+
transform: perspective(700px);
444442
}
445443

446-
.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=bottom] {
447-
transform: translateY(10px);
444+
.tippy-box[data-animation=perspective][data-placement^=top][data-state=hidden] {
445+
transform: perspective(700px) translateY(8px) rotateX(60deg);
448446
}
449447

450-
.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=left] {
451-
transform: translateX(-10px);
448+
.tippy-box[data-animation=perspective][data-placement^=bottom] {
449+
transform-origin: top;
452450
}
453451

454-
.tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=right] {
455-
transform: translateX(10px);
452+
.tippy-box[data-animation=perspective][data-placement^=bottom][data-state=visible] {
453+
transform: perspective(700px);
456454
}
457455

458-
.tippy-box[data-theme~=light] {
459-
color: #26323d;
460-
box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25), 0 4px 4px -2px rgba(91, 94, 105, 0.15);
461-
background-color: #fff;
456+
.tippy-box[data-animation=perspective][data-placement^=bottom][data-state=hidden] {
457+
transform: perspective(700px) translateY(-8px) rotateX(-60deg);
462458
}
463459

464-
.tippy-box[data-theme~=light][data-placement^=top] > .tippy-arrow:before {
465-
border-top-color: #fff;
460+
.tippy-box[data-animation=perspective][data-placement^=left] {
461+
transform-origin: right;
466462
}
467463

468-
.tippy-box[data-theme~=light][data-placement^=bottom] > .tippy-arrow:before {
469-
border-bottom-color: #fff;
464+
.tippy-box[data-animation=perspective][data-placement^=left][data-state=visible] {
465+
transform: perspective(700px);
470466
}
471467

472-
.tippy-box[data-theme~=light][data-placement^=left] > .tippy-arrow:before {
473-
border-left-color: #fff;
468+
.tippy-box[data-animation=perspective][data-placement^=left][data-state=hidden] {
469+
transform: perspective(700px) translateX(8px) rotateY(-60deg);
474470
}
475471

476-
.tippy-box[data-theme~=light][data-placement^=right] > .tippy-arrow:before {
477-
border-right-color: #fff;
472+
.tippy-box[data-animation=perspective][data-placement^=right] {
473+
transform-origin: left;
478474
}
479475

480-
.tippy-box[data-theme~=light] > .tippy-backdrop {
481-
background-color: #fff;
476+
.tippy-box[data-animation=perspective][data-placement^=right][data-state=visible] {
477+
transform: perspective(700px);
482478
}
483479

484-
.tippy-box[data-theme~=light] > .tippy-svg-arrow {
485-
fill: #fff;
480+
.tippy-box[data-animation=perspective][data-placement^=right][data-state=hidden] {
481+
transform: perspective(700px) translateX(-8px) rotateY(60deg);
482+
}
483+
484+
.tippy-box[data-animation=perspective][data-state=hidden] {
485+
opacity: 0;
486486
}

‎dist/vue-navigation-bar.esm.js

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { VueScreenSizeMixin } from 'vue-screen-size';
2-
import { resolveComponent, openBlock, createElementBlock, Fragment, createElementVNode, renderSlot, normalizeProps, mergeProps, createCommentVNode, createBlock, withCtx, createVNode, normalizeStyle, normalizeClass, createTextVNode, toDisplayString, renderList, withKeys } from 'vue';
2+
import { resolveComponent, openBlock, createElementBlock, Fragment, createBlock, mergeProps, withCtx, renderSlot, createCommentVNode, createVNode, normalizeStyle, createElementVNode, normalizeClass, createTextVNode, toDisplayString, renderList, withKeys } from 'vue';
33
import tippy, { hideAll } from 'tippy.js';
44

55
// https://stackoverflow.com/a/2117523/8014660
@@ -20,7 +20,7 @@ var script$8 = {
2020
},
2121
path: {
2222
type: [String, Object],
23-
required: true,
23+
required: false,
2424
},
2525
isLinkAction: {
2626
type: Boolean,
@@ -35,34 +35,36 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
3535
var _component_router_link = resolveComponent("router-link");
3636

3737
return (openBlock(), createElementBlock(Fragment, null, [
38-
createElementVNode("template", null, [
39-
($props.isLinkAction)
40-
? renderSlot(_ctx.$slots, "content", normalizeProps(mergeProps({ key: 0 }, _ctx.$attrs)))
41-
: createCommentVNode("v-if", true)
42-
]),
43-
($props.isUsingVueRouter)
44-
? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
45-
($props.path.name)
46-
? (openBlock(), createBlock(_component_router_link, mergeProps({ key: 0 }, _ctx.$attrs, {
47-
to: {name: this.path.name}
48-
}), {
49-
default: withCtx(function () { return [
50-
renderSlot(_ctx.$slots, "content")
51-
]; }),
52-
_: 3 /* FORWARDED */
53-
}, 16 /* FULL_PROPS */, ["to"]))
54-
: (openBlock(), createBlock(_component_router_link, mergeProps({ key: 1 }, _ctx.$attrs, {
55-
to: {path: this.path}
56-
}), {
57-
default: withCtx(function () { return [
58-
renderSlot(_ctx.$slots, "content")
59-
]; }),
60-
_: 3 /* FORWARDED */
61-
}, 16 /* FULL_PROPS */, ["to"]))
62-
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
63-
: (openBlock(), createElementBlock("a", mergeProps({ key: 1 }, _ctx.$attrs, { href: $props.path }), [
38+
($props.isUsingVueRouter && $props.path && $props.path.name)
39+
? (openBlock(), createBlock(_component_router_link, mergeProps({ key: 0 }, _ctx.$attrs, {
40+
to: { name: this.path.name }
41+
}), {
42+
default: withCtx(function () { return [
43+
renderSlot(_ctx.$slots, "content")
44+
]; }),
45+
_: 3 /* FORWARDED */
46+
}, 16 /* FULL_PROPS */, ["to"]))
47+
: createCommentVNode("v-if", true),
48+
($props.isUsingVueRouter && $props.path && !$props.path.name)
49+
? (openBlock(), createBlock(_component_router_link, mergeProps({ key: 1 }, _ctx.$attrs, {
50+
to: { path: this.path }
51+
}), {
52+
default: withCtx(function () { return [
53+
renderSlot(_ctx.$slots, "content")
54+
]; }),
55+
_: 3 /* FORWARDED */
56+
}, 16 /* FULL_PROPS */, ["to"]))
57+
: createCommentVNode("v-if", true),
58+
(!$props.isUsingVueRouter && !$props.isLinkAction && $props.path)
59+
? (openBlock(), createElementBlock("a", mergeProps({ key: 2 }, _ctx.$attrs, { href: $props.path }), [
6460
renderSlot(_ctx.$slots, "content")
6561
], 16 /* FULL_PROPS */, _hoisted_1$7))
62+
: createCommentVNode("v-if", true),
63+
($props.isLinkAction)
64+
? (openBlock(), createElementBlock("a", mergeProps({ key: 3 }, _ctx.$attrs, { href: "javascript:void(0);" }), [
65+
renderSlot(_ctx.$slots, "content")
66+
], 16 /* FULL_PROPS */))
67+
: createCommentVNode("v-if", true)
6668
], 64 /* STABLE_FRAGMENT */))
6769
}
6870

‎dist/vue-navigation-bar.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)