first commit

components/ui-components/menus/MenusActivatorTooltip.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref, mergeProps } from "vue";
+const items = ref([
+  { title: "Click Me" },
+  { title: "Click Me" },
+  { title: "Click Me" },
+  { title: "Click Me 2" }
+]);
+mergeProps();
+</script>
+
+<template>
+  <div class="text-center mt-4">
+    <v-menu>
+      <template v-slot:activator="{ props: menu }">
+        <v-tooltip anchor="top">
+          <template v-slot:activator="{ props: tooltip }">
+            <v-btn color="primary" v-bind="mergeProps(menu, tooltip)" flat>
+              Dropdown w/ Tooltip
+            </v-btn>
+          </template>
+          <span>I'm A Tooltip</span>
+        </v-tooltip>
+      </template>
+      <v-list>
+        <v-list-item v-for="(item, index) in items" :key="index">
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+

components/ui-components/menus/MenusAnchor.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const items = ref([{ title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me 2' }]);
+
+const locations = ref(['top', 'bottom', 'start', 'end', 'center']);
+const location = ref();
+</script>
+
+<template>
+    <div class="text-center mt-4">
+        <v-select v-model="location" :items="locations" label="Location"></v-select>
+        <v-menu :location="location">
+            <template v-slot:activator="{ props }">
+                <v-btn color="primary" dark v-bind="props" flat> Dropdown </v-btn>
+            </template>
+
+            <v-list>
+                <v-list-item v-for="(item, index) in items" :key="index">
+                    <v-list-item-title>{{ item.title }}</v-list-item-title>
+                </v-list-item>
+            </v-list>
+        </v-menu>
+    </div>
+</template>

components/ui-components/menus/MenusHover.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const items = ref([
+  { title: "Click Me" },
+  { title: "Click Me" },
+  { title: "Click Me" },
+  { title: "Click Me 2" },
+]);
+</script>
+
+<template>
+  <div class="text-center mt-4">
+    <v-menu open-on-hover>
+      <template v-slot:activator="{ props }">
+        <v-btn color="secondary" v-bind="props" flat> Dropdown </v-btn>
+      </template>
+
+      <v-list>
+        <v-list-item v-for="(item, index) in items" :key="index">
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+

components/ui-components/menus/MenusPopover.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const fav = ref(true);
+const menu = ref(false);
+const message = ref(false);
+const hints = ref(true);
+</script>
+
+<template>
+  <div class="text-center mt-4">
+    <v-menu v-model="menu" :close-on-content-click="false" anchor="top">
+      <template v-slot:activator="{ props }">
+        <v-btn color="secondary" v-bind="props" flat> Menu as Popover </v-btn>
+      </template>
+
+      <v-card min-width="300">
+        <v-list>
+          <v-list-item
+            prepend-avatar="https://cdn.vuetifyjs.com/images/john.jpg"
+            title="John Leider"
+            subtitle="Founder of Vuetify"
+          >
+            <template v-slot:append>
+              <v-btn
+                variant="text"
+                :class="fav ? 'text-primary' : ''"
+                icon="mdi-heart"
+                @click="fav = !fav"
+              flat></v-btn>
+            </template>
+          </v-list-item>
+        </v-list>
+
+        <v-divider></v-divider>
+
+        <v-list>
+          <v-list-item >
+            <v-switch
+              v-model="message"
+              color="primary"
+              label="Enable messages"
+              hide-details
+              class="pl-2"
+            ></v-switch>
+          </v-list-item>
+
+          <v-list-item>
+            <v-switch
+              v-model="hints"
+              color="primary"
+              label="Enable hints"
+              hide-details
+              class="pl-2"
+            ></v-switch>
+          </v-list-item>
+        </v-list>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn variant="text" @click="menu = false" flat> Cancel </v-btn>
+          <v-btn color="primary" variant="text" @click="menu = false" flat> Save </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-menu>
+  </div>
+</template>
+