[MERGE] Merge branch 'master' into production

Byloth · Dec 13, 2021 · 74c1980 · 74c1980
2 parents cae0ecb + 1f63efe
commit 74c1980
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 126 deletions.
diff --git a/components/mdc/action-item.vue b/components/mdc/action-item.vue
@@ -26,6 +26,15 @@
             title: {
                 required: true,
                 type: String
+            },
+
+            rel: {
+                default: "",
+                type: String
+            },
+            target: {
+                default: "",
+                type: String
             }
         },
 
@@ -36,19 +45,18 @@
             {
                 if (this.href)
                 {
-                    return { "href": this.href };
+                    return {
+                        "href": this.href,
+                        "rel": this.rel,
+                        "target": this.target
+                    };
                 }
 
                 return { };
             },
             tag(): string
             {
-                if (this.href)
-                {
-                    return "a";
-                }
-
-                return "button";
+                return this.href ? "a" : "button";
             }
         },
 

diff --git a/components/mdc/button-item.vue b/components/mdc/button-item.vue
@@ -42,6 +42,15 @@
                 type: String
             },
 
+            rel: {
+                default: "",
+                type: String
+            },
+            target: {
+                default: "",
+                type: String
+            },
+
             // Colors
             //
             secondary: {
@@ -82,19 +91,18 @@
             {
                 if (this.href)
                 {
-                    return { "href": this.href };
+                    return {
+                        "href": this.href,
+                        "rel": this.rel,
+                        "target": this.target
+                    };
                 }
 
                 return { };
             },
             tag(): string
             {
-                if (this.href)
-                {
-                    return "a";
-                }
-
-                return "button";
+                return this.href ? "a" : "button";
             }
         },
 

diff --git a/components/mdc/menus/menu-anchor.vue b/components/mdc/menus/menu-anchor.vue
diff --git a/components/mdc/menus/menu-item.vue b/components/mdc/menus/menu-item.vue
@@ -1,17 +1,25 @@
 <template>
-    <li class="mdc-list-item"
-        role="menuitem"
-        @click="$emit('click', $event)"
-        @keydown.enter="$emit('click', $event)">
-        <span ref="ripple" class="mdc-list-item__ripple"></span>
-        <span v-if="icon"
-              class="material-icons mdc-list-item__graphic"
-              aria-hidden="true">
-            {{ icon }}
-        </span>
-        <span class="mdc-list-item__text">
-            <slot></slot>
-        </span>
+    <li>
+        <component :is="tag"
+                   ref="item"
+                   class="mdc-list-item"
+                   role="menuitem"
+                   v-bind="properties"
+                   :alt="title"
+                   :title="title"
+                   :aria-label="title"
+                   @click="$emit('click', evt)"
+                   @keydown.enter="$emit('click', evt)">
+            <span ref="ripple" class="mdc-list-item__ripple"></span>
+            <span v-if="icon"
+                  class="material-icons mdc-list-item__graphic"
+                  aria-hidden="true">
+                {{ icon }}
+            </span>
+            <span class="mdc-list-item__text">
+                <slot></slot>
+            </span>
+        </component>
     </li>
 </template>
 
@@ -24,19 +32,71 @@
     export default Vue.extend({
         name: "MenuItem",
         props: {
+            href: {
+                default: "",
+                type: String
+            },
+
+            title: {
+                default: "",
+                type: String
+            },
             icon: {
                 default: "",
                 type: String
+            },
+
+            rel: {
+                default: "",
+                type: String
+            },
+            target: {
+                default: "",
+                type: String
             }
         },
 
         data: (): MenuItemData => ({ }),
+
+        computed: {
+            properties(): Record<string, string>
+            {
+                if (this.href)
+                {
+                    return {
+                        "href": this.href,
+                        "rel": this.rel,
+                        "target": this.target
+                    };
+                }
+
+                return { };
+            },
+            tag(): string
+            {
+                return this.href ? "a" : "div";
+            }
+        },
+
         mounted: function(): void
         {
-            this._ripple = new MDCRipple(this.$el);
+            this._ripple = new MDCRipple(this.$refs.item as Element);
         }
     });
 </script>
 
 <style lang="scss" scoped>
+    @use "~@/assets/scss/variables";
+
+    .mdc-list-item
+    {
+        color: variables.$not-quite-black;
+        outline: none;
+        text-decoration: none;
+
+        &:hover
+        {
+            text-decoration: none;
+        }
+    }
 </style>
diff --git a/components/overflow-menu.vue b/components/overflow-menu.vue
@@ -6,43 +6,33 @@
             more_vert
         </span>
         <Menu v-model="isOpen">
-            <template v-for="action in actions">
-                <template v-if="action.path">
-                    <NuxtLink :key="action.id"
-                              v-slot="{ href, navigate }"
-                              custom
-                              :to="action.path">
-                        <MenuAnchor :href="href"
-                                    rel="nofollow noopener noreferrer"
-                                    target="_blank"
-                                    @click="navigate">
-                            {{ action.title }}
-                        </MenuAnchor>
-                    </NuxtLink>
-                </template>
-                <template v-else>
-                    <MenuItem :key="action.id" @click="$emit('select', action, $event)">
-                        {{ action.title }}
-                    </MenuItem>
-                </template>
-            </template>
+            <MenuItem v-for="action in actions"
+                      :key="action.id"
+                      :href="action.path"
+                      :title="action.title"
+                      rel="nofollow noopener noreferrer"
+                      target="_blank"
+                      @click="onClick(action, $event)">
+                {{ action.title }}
+            </MenuItem>
         </Menu>
     </ActionItem>
 </template>
 
 <script lang="ts">
     import Vue from "vue";
 
+    import { Menu as Action } from "@/core/types";
+
     import ActionItem from "./mdc/action-item.vue";
     import Menu from "./mdc/menus/menu.vue";
-    import MenuAnchor from "./mdc/menus/menu-anchor.vue";
     import MenuItem from "./mdc/menus/menu-item.vue";
 
     interface OverflowMenuData { isOpen: boolean; }
 
     export default Vue.extend({
         name: "OverflowMenu",
-        components: { ActionItem, Menu, MenuAnchor, MenuItem },
+        components: { ActionItem, Menu, MenuItem },
         props: {
             actions: {
                 default: () => [],
@@ -60,6 +50,14 @@
             toggleMenu(): void
             {
                 this.isOpen = !this.isOpen;
+            },
+
+            onClick(action: Action, evt: Event): void
+            {
+                if (!action.path)
+                {
+                    this.$emit("select", action, evt);
+                }
             }
         }
     });