Skip to content

Commit

Permalink
Merge pull request #38 from johndatserakis/jd-fix-click-events
Browse files Browse the repository at this point in the history
  • Loading branch information
@johndatserakis
johndatserakis committed Sep 5, 2023
2 parents efcfce7 + 92d2afa commit f6eda9c
Show file tree
Hide file tree
Showing 13 changed files with 5,372 additions and 7,763 deletions.
66 changes: 33 additions & 33 deletions README.md
View file

Large diffs are not rendered by default.

204 changes: 102 additions & 102 deletions dist/vue-navigation-bar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,6 @@
height: auto;
}

.vnb__brand-image-wrapper {
padding-left: 10px;
}
.vnb__brand-image-wrapper__link__image {
max-height: 30px;
}

.vnb-image {
max-width: 100%;
height: auto;
}

.vnb__collapse-button {
cursor: pointer;
border: 0;
Expand All @@ -49,6 +37,18 @@
max-width: 30px;
}

.vnb__brand-image-wrapper {
padding-left: 10px;
}
.vnb__brand-image-wrapper__link__image {
max-height: 30px;
}

.vnb-image {
max-width: 100%;
height: auto;
}

.vnb__menu-options {
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -207,44 +207,6 @@
height: auto;
}

.vnb__menu-options__option__button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-weight: 400;
color: #fff;
text-align: center;
vertical-align: middle;
user-select: none;
font-size: 0.9rem;
line-height: 1;
border-radius: 0.25rem;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0.5rem 1rem;
transition: background 0.2s ease-in;
}
.vnb__menu-options__option__button__icon svg {
max-height: 16px;
max-width: 16px;
}
.vnb__menu-options__option__button__icon--left {
margin-right: 5px;
}
.vnb__menu-options__option__button__icon--right {
margin-left: 5px;
}

.vnb-button {
background: #007aff;
}
.vnb-button:hover {
color: #fff;
background: #0062cc;
text-decoration: none;
}

.vnb__menu-options__option__link {
cursor: pointer;
font-weight: 500;
Expand Down Expand Up @@ -342,56 +304,92 @@
width: 30px;
}

.tippy-box[data-animation=perspective][data-placement^=top] {
transform-origin: bottom;
.vnb__menu-options__option__button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-weight: 400;
color: #fff;
text-align: center;
vertical-align: middle;
user-select: none;
font-size: 0.9rem;
line-height: 1;
border-radius: 0.25rem;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0.5rem 1rem;
transition: background 0.2s ease-in;
}
.vnb__menu-options__option__button__icon svg {
max-height: 16px;
max-width: 16px;
}
.vnb__menu-options__option__button__icon--left {
margin-right: 5px;
}
.vnb__menu-options__option__button__icon--right {
margin-left: 5px;
}

.tippy-box[data-animation=perspective][data-placement^=top][data-state=visible] {
transform: perspective(700px);
.vnb-button {
background: #007aff;
}
.vnb-button:hover {
color: #fff;
background: #0062cc;
text-decoration: none;
}

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

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

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

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

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

.tippy-box[data-animation=perspective][data-placement^=left][data-state=visible] {
transform: perspective(700px);
.tippy-box[data-theme~=light] {
color: #26323d;
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);
background-color: #fff;
}

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

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

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

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

.tippy-box[data-animation=perspective][data-state=hidden] {
opacity: 0;
.tippy-box[data-theme~=light] > .tippy-backdrop {
background-color: #fff;
}

.tippy-box[data-theme~=light] > .tippy-svg-arrow {
fill: #fff;
}

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

.tippy-box[data-animation=shift-toward][data-state=hidden] {
opacity: 0;
.tippy-box[data-animation=perspective][data-placement^=top] {
transform-origin: bottom;
}

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

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

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

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

.tippy-box[data-theme~=light] {
color: #26323d;
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);
background-color: #fff;
.tippy-box[data-animation=perspective][data-placement^=bottom][data-state=hidden] {
transform: perspective(700px) translateY(-8px) rotateX(-60deg);
}

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

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

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

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

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

.tippy-box[data-theme~=light] > .tippy-svg-arrow {
fill: #fff;
.tippy-box[data-animation=perspective][data-placement^=right][data-state=hidden] {
transform: perspective(700px) translateX(-8px) rotateY(60deg);
}

.tippy-box[data-animation=perspective][data-state=hidden] {
opacity: 0;
}
58 changes: 30 additions & 28 deletions dist/vue-navigation-bar.esm.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { VueScreenSizeMixin } from 'vue-screen-size';
import { resolveComponent, openBlock, createElementBlock, Fragment, createElementVNode, renderSlot, normalizeProps, mergeProps, createCommentVNode, createBlock, withCtx, createVNode, normalizeStyle, normalizeClass, createTextVNode, toDisplayString, renderList, withKeys } from 'vue';
import { resolveComponent, openBlock, createElementBlock, Fragment, createBlock, mergeProps, withCtx, renderSlot, createCommentVNode, createVNode, normalizeStyle, createElementVNode, normalizeClass, createTextVNode, toDisplayString, renderList, withKeys } from 'vue';
import tippy, { hideAll } from 'tippy.js';

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

return (openBlock(), createElementBlock(Fragment, null, [
createElementVNode("template", null, [
($props.isLinkAction)
? renderSlot(_ctx.$slots, "content", normalizeProps(mergeProps({ key: 0 }, _ctx.$attrs)))
: createCommentVNode("v-if", true)
]),
($props.isUsingVueRouter)
? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
($props.path.name)
? (openBlock(), createBlock(_component_router_link, mergeProps({ key: 0 }, _ctx.$attrs, {
to: {name: this.path.name}
}), {
default: withCtx(function () { return [
renderSlot(_ctx.$slots, "content")
]; }),
_: 3 /* FORWARDED */
}, 16 /* FULL_PROPS */, ["to"]))
: (openBlock(), createBlock(_component_router_link, mergeProps({ key: 1 }, _ctx.$attrs, {
to: {path: this.path}
}), {
default: withCtx(function () { return [
renderSlot(_ctx.$slots, "content")
]; }),
_: 3 /* FORWARDED */
}, 16 /* FULL_PROPS */, ["to"]))
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
: (openBlock(), createElementBlock("a", mergeProps({ key: 1 }, _ctx.$attrs, { href: $props.path }), [
($props.isUsingVueRouter && $props.path && $props.path.name)
? (openBlock(), createBlock(_component_router_link, mergeProps({ key: 0 }, _ctx.$attrs, {
to: { name: this.path.name }
}), {
default: withCtx(function () { return [
renderSlot(_ctx.$slots, "content")
]; }),
_: 3 /* FORWARDED */
}, 16 /* FULL_PROPS */, ["to"]))
: createCommentVNode("v-if", true),
($props.isUsingVueRouter && $props.path && !$props.path.name)
? (openBlock(), createBlock(_component_router_link, mergeProps({ key: 1 }, _ctx.$attrs, {
to: { path: this.path }
}), {
default: withCtx(function () { return [
renderSlot(_ctx.$slots, "content")
]; }),
_: 3 /* FORWARDED */
}, 16 /* FULL_PROPS */, ["to"]))
: createCommentVNode("v-if", true),
(!$props.isUsingVueRouter && !$props.isLinkAction && $props.path)
? (openBlock(), createElementBlock("a", mergeProps({ key: 2 }, _ctx.$attrs, { href: $props.path }), [
renderSlot(_ctx.$slots, "content")
], 16 /* FULL_PROPS */, _hoisted_1$7))
: createCommentVNode("v-if", true),
($props.isLinkAction)
? (openBlock(), createElementBlock("a", mergeProps({ key: 3 }, _ctx.$attrs, { href: "javascript:void(0);" }), [
renderSlot(_ctx.$slots, "content")
], 16 /* FULL_PROPS */))
: createCommentVNode("v-if", true)
], 64 /* STABLE_FRAGMENT */))
}

Expand Down
2 changes: 1 addition & 1 deletion dist/vue-navigation-bar.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit f6eda9c

Please sign in to comment.