Merge pull request #39 from johndatserakis/jd-add-path-params-v2

johndatserakis · Sep 5, 2023 · ba0926c · ba0926c
2 parents f6eda9c + 89037f1
commit ba0926c
Show file tree

Hide file tree

Showing 13 changed files with 159 additions and 185 deletions.
diff --git a/README.md b/README.md
diff --git a/dist/vue-navigation-bar.css b/dist/vue-navigation-bar.css
@@ -37,37 +37,6 @@
   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;
-  align-items: center;
-}
-.vnb__menu-options--left {
-  margin-right: auto;
-  justify-content: flex-start;
-  padding-left: 30px;
-}
-.vnb__menu-options--right {
-  margin-left: auto;
-  justify-content: flex-end;
-  padding-right: 10px;
-}
-.vnb__menu-options__option:not(:last-child) {
-  margin-right: 20px;
-}
-
 .vnb__popup {
   background: #fff;
   position: absolute;
@@ -207,6 +176,37 @@
   height: auto;
 }
 
+.vnb__menu-options {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.vnb__menu-options--left {
+  margin-right: auto;
+  justify-content: flex-start;
+  padding-left: 30px;
+}
+.vnb__menu-options--right {
+  margin-left: auto;
+  justify-content: flex-end;
+  padding-right: 10px;
+}
+.vnb__menu-options__option:not(:last-child) {
+  margin-right: 20px;
+}
+
+.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__option__link {
   cursor: pointer;
   font-weight: 500;
@@ -300,10 +300,6 @@
   border-color: rgba(0, 0, 0, 0.1);
 }
 
-.vnb__menu-options__option__spacer {
-  width: 30px;
-}
-
 .vnb__menu-options__option__button {
   display: flex;
   flex-direction: row;
@@ -342,6 +338,10 @@
   text-decoration: none;
 }
 
+.vnb__menu-options__option__spacer {
+  width: 30px;
+}
+
 .tippy-box[data-animation=shift-toward][data-state=hidden] {
   opacity: 0;
 }
@@ -413,26 +413,6 @@
   opacity: 0;
 }
 
-.tippy-box[data-animation=shift-away][data-state=hidden] {
-  opacity: 0;
-}
-
-.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top] {
-  transform: translateY(10px);
-}
-
-.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom] {
-  transform: translateY(-10px);
-}
-
-.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left] {
-  transform: translateX(10px);
-}
-
-.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right] {
-  transform: translateX(-10px);
-}
-
 .tippy-box[data-animation=perspective][data-placement^=top] {
   transform-origin: bottom;
 }
@@ -483,4 +463,24 @@
 
 .tippy-box[data-animation=perspective][data-state=hidden] {
   opacity: 0;
+}
+
+.tippy-box[data-animation=shift-away][data-state=hidden] {
+  opacity: 0;
+}
+
+.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top] {
+  transform: translateY(10px);
+}
+
+.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom] {
+  transform: translateY(-10px);
+}
+
+.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left] {
+  transform: translateX(10px);
+}
+
+.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right] {
+  transform: translateX(-10px);
 }
diff --git a/dist/vue-navigation-bar.esm.js b/dist/vue-navigation-bar.esm.js
@@ -27,6 +27,13 @@ var script$8 = {
       required: true,
     },
   },
+  computed: {
+    localPath: function localPath() {
+      if (!this.path) { return; }
+
+      return typeof this.path === 'string' ? this.path : Object.assign({}, this.path);
+    },
+  },
 };
 
 var _hoisted_1$7 = ["href"];
@@ -35,33 +42,21 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_router_link = resolveComponent("router-link");
 
   return (openBlock(), createElementBlock(Fragment, null, [
-    ($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 }
-        }), {
+    ($props.isUsingVueRouter && $props.path)
+      ? (openBlock(), createBlock(_component_router_link, mergeProps({ key: 0 }, _ctx.$attrs, { to: $options.localPath }), {
           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 }), [
+      ? (openBlock(), createElementBlock("a", mergeProps({ key: 1 }, _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);" }), [
+      ? (openBlock(), createElementBlock("a", mergeProps({ key: 2 }, _ctx.$attrs, { href: "javascript:void(0);" }), [
           renderSlot(_ctx.$slots, "content")
         ], 16 /* FULL_PROPS */))
       : createCommentVNode("v-if", true)
@@ -640,30 +635,28 @@ var script$1 = {
       required: true,
     },
   },
-  data: function data () {
+  data: function data() {
     return {};
   },
   computed: {
-    combinedMenuItems: function combinedMenuItems () {
+    combinedMenuItems: function combinedMenuItems() {
       var combinedArray = this.options.menuOptionsLeft.concat(this.options.menuOptionsRight);
       return combinedArray;
     },
   },
   methods: {
-    closeButtonClicked: function closeButtonClicked () {
+    closeButtonClicked: function closeButtonClicked() {
       this.$emit('close-button-clicked');
     },
-    itemSelected: function itemSelected (option) {
+    itemSelected: function itemSelected(option) {
       this.$emit('vnb-item-clicked', option.text);
       this.closeButtonClicked();
     },
   },
   components: {
     DynamicLink: script$8,
   },
-  emits: [
-    'close-button-clicked',
-    'vnb-item-clicked' ]
+  emits: ['close-button-clicked', 'vnb-item-clicked'],
 };
 
 var _hoisted_1$1 = {
@@ -739,7 +732,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                   width: "100pt",
                   xmlns: "http://www.w3.org/2000/svg",
                   class: "vnb__popup__top__close-button__image",
-                  style: normalizeStyle({fill: $props.options.collapseButtonCloseColor})
+                  style: normalizeStyle({ fill: $props.options.collapseButtonCloseColor })
                 }, _hoisted_8, 4 /* STYLE */))
           ], 8 /* PROPS */, _hoisted_4)
         ]),
@@ -799,7 +792,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                             class: "vnb__popup__bottom__sub-menu-options__option__link",
                             onClick: function ($event) { return ($options.itemSelected(subOption)); },
                             "aria-label": subOption.text,
-                            isLinkAction: option.isLinkAction ? true : false
+                            isLinkAction: subOption.isLinkAction ? true : false
                           }, {
                             content: withCtx(function () { return [
                               createTextVNode(toDisplayString(subOption.text) + " ", 1 /* TEXT */),

diff --git a/dist/vue-navigation-bar.min.js b/dist/vue-navigation-bar.min.js
diff --git a/dist/vue-navigation-bar.umd.js b/dist/vue-navigation-bar.umd.js
@@ -33,6 +33,13 @@
         required: true,
       },
     },
+    computed: {
+      localPath: function localPath() {
+        if (!this.path) { return; }
+
+        return typeof this.path === 'string' ? this.path : Object.assign({}, this.path);
+      },
+    },
   };
 
   var _hoisted_1$7 = ["href"];
@@ -41,33 +48,21 @@
     var _component_router_link = vue.resolveComponent("router-link");
 
     return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-      ($props.isUsingVueRouter && $props.path && $props.path.name)
-        ? (vue.openBlock(), vue.createBlock(_component_router_link, vue.mergeProps({ key: 0 }, _ctx.$attrs, {
-            to: { name: this.path.name }
-          }), {
-            default: vue.withCtx(function () { return [
-              vue.renderSlot(_ctx.$slots, "content")
-            ]; }),
-            _: 3 /* FORWARDED */
-          }, 16 /* FULL_PROPS */, ["to"]))
-        : vue.createCommentVNode("v-if", true),
-      ($props.isUsingVueRouter && $props.path && !$props.path.name)
-        ? (vue.openBlock(), vue.createBlock(_component_router_link, vue.mergeProps({ key: 1 }, _ctx.$attrs, {
-            to: { path: this.path }
-          }), {
+      ($props.isUsingVueRouter && $props.path)
+        ? (vue.openBlock(), vue.createBlock(_component_router_link, vue.mergeProps({ key: 0 }, _ctx.$attrs, { to: $options.localPath }), {
             default: vue.withCtx(function () { return [
               vue.renderSlot(_ctx.$slots, "content")
             ]; }),
             _: 3 /* FORWARDED */
           }, 16 /* FULL_PROPS */, ["to"]))
         : vue.createCommentVNode("v-if", true),
       (!$props.isUsingVueRouter && !$props.isLinkAction && $props.path)
-        ? (vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({ key: 2 }, _ctx.$attrs, { href: $props.path }), [
+        ? (vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({ key: 1 }, _ctx.$attrs, { href: $props.path }), [
             vue.renderSlot(_ctx.$slots, "content")
           ], 16 /* FULL_PROPS */, _hoisted_1$7))
         : vue.createCommentVNode("v-if", true),
       ($props.isLinkAction)
-        ? (vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({ key: 3 }, _ctx.$attrs, { href: "javascript:void(0);" }), [
+        ? (vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({ key: 2 }, _ctx.$attrs, { href: "javascript:void(0);" }), [
             vue.renderSlot(_ctx.$slots, "content")
           ], 16 /* FULL_PROPS */))
         : vue.createCommentVNode("v-if", true)
@@ -646,30 +641,28 @@
         required: true,
       },
     },
-    data: function data () {
+    data: function data() {
       return {};
     },
     computed: {
-      combinedMenuItems: function combinedMenuItems () {
+      combinedMenuItems: function combinedMenuItems() {
         var combinedArray = this.options.menuOptionsLeft.concat(this.options.menuOptionsRight);
         return combinedArray;
       },
     },
     methods: {
-      closeButtonClicked: function closeButtonClicked () {
+      closeButtonClicked: function closeButtonClicked() {
         this.$emit('close-button-clicked');
       },
-      itemSelected: function itemSelected (option) {
+      itemSelected: function itemSelected(option) {
         this.$emit('vnb-item-clicked', option.text);
         this.closeButtonClicked();
       },
     },
     components: {
       DynamicLink: script$8,
     },
-    emits: [
-      'close-button-clicked',
-      'vnb-item-clicked' ]
+    emits: ['close-button-clicked', 'vnb-item-clicked'],
   };
 
   var _hoisted_1$1 = {
@@ -745,7 +738,7 @@
                     width: "100pt",
                     xmlns: "http://www.w3.org/2000/svg",
                     class: "vnb__popup__top__close-button__image",
-                    style: vue.normalizeStyle({fill: $props.options.collapseButtonCloseColor})
+                    style: vue.normalizeStyle({ fill: $props.options.collapseButtonCloseColor })
                   }, _hoisted_8, 4 /* STYLE */))
             ], 8 /* PROPS */, _hoisted_4)
           ]),
@@ -805,7 +798,7 @@
                               class: "vnb__popup__bottom__sub-menu-options__option__link",
                               onClick: function ($event) { return ($options.itemSelected(subOption)); },
                               "aria-label": subOption.text,
-                              isLinkAction: option.isLinkAction ? true : false
+                              isLinkAction: subOption.isLinkAction ? true : false
                             }, {
                               content: vue.withCtx(function () { return [
                                 vue.createTextVNode(vue.toDisplayString(subOption.text) + " ", 1 /* TEXT */),

diff --git a/docs/assets/index.676fc0fb.js b/docs/assets/index.676fc0fb.js
diff --git a/docs/assets/index.9ef44e4b.js b/docs/assets/index.9ef44e4b.js
diff --git a/docs/index.html b/docs/index.html
@@ -18,7 +18,7 @@
       integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
       crossorigin="anonymous"
     />
-    <script type="module" crossorigin src="/vue-navigation-bar/assets/index.676fc0fb.js"></script>
+    <script type="module" crossorigin src="/vue-navigation-bar/assets/index.9ef44e4b.js"></script>
     <link rel="stylesheet" href="/vue-navigation-bar/assets/index.2f3ff1f9.css">
   </head>
 

diff --git a/example/App.vue b/example/App.vue
@@ -137,7 +137,7 @@ export default {
                 type: 'link',
                 text: 'Locations',
                 subText: "You're a presentation tool!",
-                path: { name: 'locations' },
+                path: { name: 'locations', query: { item: 2 } },
               },
               {
                 type: 'hr',
@@ -184,7 +184,7 @@ export default {
           {
             type: 'button',
             text: 'Signup',
-            path: { name: 'signup' },
+            path: 'signup',
             class: 'button-red',
           },
           {

diff --git a/package.json b/package.json
@@ -86,5 +86,5 @@
   },
   "sideEffects": false,
   "unpkg": "dist/vue-navigation-bar.min.js",
-  "version": "6.0.0"
+  "version": "6.0.1"
 }