Merge pull request #148 from modrinth/feature/overflow-menu-links

Add link support to overflow menus

docs/components/overflow-menu.md

@@ -14,7 +14,8 @@
   },
   {
     'id': 'report',
-    'action': () => {}
+    'link': 'https://example.com/report',
+    'external': true,
   },
   {
     'id': 'remain',
@@ -65,7 +66,8 @@
     },
     {
       'id': 'report',
-      'action': () => {}
+      'link': 'https://example.com/report',
+      'external': true,
     },
     {
       'id': 'remain',

lib/assets/styles/classes.scss

@@ -447,11 +447,10 @@ a,
     height: 1.25rem;
   }
 
-  :deep(.external-icon) {
+  .external-icon {
     width: 0.75rem;
     height: 0.75rem;
     margin-bottom: auto;
-    margin-left: 0.25rem;
     margin-right: 0;
   }
 

lib/components/base/Button.vue

@@ -53,7 +53,7 @@ const accentedButton = computed(() =>
 
 <template>
   <router-link
-    v-if="link"
+    v-if="link && link.startsWith('/')"
     class="btn"
     :class="{
       'icon-only': iconOnly,
@@ -81,6 +81,35 @@ const accentedButton = computed(() =>
     <ExternalIcon v-if="external && !iconOnly" class="external-icon" />
     <UnknownIcon v-if="!$slots.default" />
   </router-link>
+  <a
+    v-else-if="link"
+    class="btn"
+    :class="{
+      'icon-only': iconOnly,
+      'btn-large': large,
+      'btn-danger': color === 'danger',
+      'btn-primary': color === 'primary',
+      'btn-secondary': color === 'secondary',
+      'btn-highlight': color === 'highlight',
+      'btn-red': color === 'red',
+      'btn-orange': color === 'orange',
+      'btn-green': color === 'green',
+      'btn-blue': color === 'blue',
+      'btn-purple': color === 'purple',
+      'btn-gray': color === 'gray',
+      'btn-transparent': transparent,
+      'btn-hover-filled': hoverFilled,
+      'btn-hover-filled-only': hoverFilledOnly,
+      'btn-outline': outline,
+      'color-accent-contrast': accentedButton,
+    }"
+    :href="link"
+    :target="external ? '_blank' : '_self'"
+  >
+    <slot />
+    <ExternalIcon v-if="external && !iconOnly" class="external-icon" />
+    <UnknownIcon v-if="!$slots.default" />
+  </a>
   <button
     v-else
     class="btn"

lib/components/base/OverflowMenu.vue

@@ -18,9 +18,20 @@
           :hover-filled-only="option.hoverFilledOnly"
           transparent
           :action="
+            option.action
+              ? () => {
+                  option.action()
+                  if (!option.remainOnClick) {
+                    close()
+                  }
+                }
+              : null
+          "
+          :link="option.link ? option.link : null"
+          :external="option.external ? option.external : false"
+          @click="
             () => {
-              option.action()
+              if (option.link && !option.remainOnClick) {
-              if (!option.remainOnClick) {
                 close()
               }
             }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "files": [
     "dist",
     "locales"