feat: added context menu and context button components

src/components/ContextButton/ContextButton.vue

@@ -0,0 +1,16 @@
+<script>
+import FdButton from "./../Button/Button.vue";
+
+export default {
+  name: "FdContextButton",
+  extends: FdButton,
+  props: {
+    styling: {
+      default: "light"
+    },
+    icon: {
+      default: "overflow"
+    }
+  }
+};
+</script>

src/components/ContextButton/index.js

@@ -0,0 +1,4 @@
+import ContextButton from "./ContextButton.vue";
+import { pluginify } from "./../../util";
+export default pluginify(ContextButton);
+export { ContextButton };

src/components/ContextMenu/ContextMenu.vue

@@ -0,0 +1,29 @@
+<template>
+  <fd-menu-popover placement="bottom-start" with-arrow :flips="false">
+    <template #control="popoverProps">
+      <slot name="button" v-bind="controlProps(popoverProps)">
+        <fd-context-button @click="popoverProps.toggle" />
+      </slot>
+    </template>
+    <template #default>
+      <slot />
+    </template>
+  </fd-menu-popover>
+</template>
+
+<script>
+import FdMenuPopover from "./../MenuPopover/MenuPopover.vue";
+import FdContextButton from "./../ContextButton/ContextButton.vue";
+export default {
+  name: "FdContextMenu",
+  components: { FdMenuPopover, FdContextButton },
+  methods: {
+    controlProps(controlProps) {
+      return {
+        ...controlProps,
+        toggleContextMenu: controlProps.toggle
+      };
+    }
+  }
+};
+</script>

src/components/ContextMenu/index.js

@@ -0,0 +1,4 @@
+import ContextMenu from "./ContextMenu.vue";
+import { pluginify } from "./../../util";
+export default pluginify(ContextMenu);
+export { ContextMenu };

src/components/index.js

@@ -8,6 +8,8 @@ import Button from "./Button";
 import ButtonGroup from "./ButtonGroup";
 import Calendar from "./Calendar";
 import Combobox from "./Combobox";
+import ContextMenu from "./ContextMenu";
+import ContextButton from "./ContextButton";
 import ComboboxMenu from "./ComboboxMenu";
 import Counter from "./Counter";
 import DatePicker from "./DatePicker";
@@ -64,6 +66,8 @@ const plugin = {
       Combobox,
       ComboboxMenu,
       Counter,
+      ContextMenu,
+      ContextButton,
       DatePicker,
       DatePickerCalendar,
       DatePickerInput,

src/docs/api/_baseline.json

@@ -1,5 +1,19 @@
 {
   "components": {
+    "FdContextMenu": {
+      "slots": {},
+      "props": {},
+      "events": {},
+      "mixins": [],
+      "componentName": "FdContextMenu"
+    },
+    "FdContextButton": {
+      "slots": {},
+      "props": {},
+      "events": {},
+      "mixins": [],
+      "componentName": "FdContextButton"
+    },
     "FdVirtualizedList": {
       "slots": {},
       "props": {},

src/docs/pages/Context Menu/0-context-menu-default.vue

@@ -0,0 +1,12 @@
+<title>Default Context Menu</title>
+
+<template>
+  <fd-context-menu>
+    <fd-menu-list>
+      <fd-menu-item>New File</fd-menu-item>
+      <fd-menu-item>New Window</fd-menu-item>
+      <fd-menu-item>About Fundamental Vue</fd-menu-item>
+      <fd-menu-item>Check for Updates…</fd-menu-item>
+    </fd-menu-list>
+  </fd-context-menu>
+</template>

src/docs/pages/Context Menu/1-context-menu-custom-button.vue

@@ -0,0 +1,24 @@
+<title>Context Menu with custom Button</title>
+
+<docs>
+Use the `button`-slot in order to provide a custom `fd-context-button`.
+</docs>
+
+<template>
+  <fd-context-menu>
+    <template #button="{toggleContextMenu}">
+      <fd-context-button
+        styling="emphasized"
+        :icon="null"
+        @click="toggleContextMenu"
+        >More…</fd-context-button
+      >
+    </template>
+    <fd-menu-list>
+      <fd-menu-item>New File</fd-menu-item>
+      <fd-menu-item>New Window</fd-menu-item>
+      <fd-menu-item>About Fundamental Vue</fd-menu-item>
+      <fd-menu-item>Check for Updates…</fd-menu-item>
+    </fd-menu-list>
+  </fd-context-menu>
+</template>

src/docs/pages/pages.json

@@ -75,6 +75,15 @@
       "FdCalendar"
     ]
   },
+  {
+    "id": "./Context Menu/index.ts",
+    "status": "experimental",
+    "slug": "context-menu",
+    "key": "./Context Menu/index.ts",
+    "title": "Context Menu",
+    "icon": "overflow",
+    "related": ["FdContextMenu"]
+  },
   {
     "id": "./Colors/index.ts",
     "status": "inprogress",