feat: ✨ (WIP) base-shoppinglist infra (#911)

* feat: ✨ base-shoppinglist infra (WIP)

* add type checker

* implement controllers

* apply router fixes

* add checked section hide/animation

* add label support

* formatting

* fix overflow images

* add experimental banner

* fix #912 word break issue

* remove any type errors

* bump dependencies

* remove templates

* fix build errors

* bump node version

* fix template literal

frontend/components/global/BannerExperimental.vue

@@ -0,0 +1,6 @@
+<template>
+  <v-alert border="left" colored-border type="warning" elevation="2" :icon="$globals.icons.alert">
+    <b>Experimental Feature</b>
+    <div>This page contains experimental or still-baking features. Please excuse the mess.</div>
+  </v-alert>
+</template>

frontend/components/global/BaseButtonGroup.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-item-group>
+    <template v-for="btn in buttons">
+      <v-menu v-if="btn.children" :key="'menu-' + btn.event" active-class="pa-0" offset-x left>
+        <template #activator="{ on, attrs }">
+          <v-btn tile large icon v-bind="attrs" v-on="on">
+            <v-icon>
+              {{ btn.icon }}
+            </v-icon>
+          </v-btn>
+        </template>
+        <v-list dense>
+          <v-list-item v-for="(child, idx) in btn.children" :key="idx" dense @click="$emit(child.event)">
+            <v-list-item-title>{{ child.text }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <v-tooltip
+        v-else
+        :key="'btn-' + btn.event"
+        open-delay="200"
+        transition="slide-y-reverse-transition"
+        dense
+        bottom
+        content-class="text-caption"
+      >
+        <template #activator="{ on, attrs }">
+          <v-btn tile large icon v-bind="attrs" @click="$emit(btn.event)" v-on="on">
+            <v-icon> {{ btn.icon }} </v-icon>
+          </v-btn>
+        </template>
+        <span>{{ btn.text }}</span>
+      </v-tooltip>
+    </template>
+  </v-item-group>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+
+export interface ButtonOption {
+  icon: string;
+  text: string;
+  event: string;
+  children: ButtonOption[];
+}
+
+export default defineComponent({
+  props: {
+    buttons: {
+      type: Array as () => ButtonOption[],
+      required: true,
+    },
+  },
+});
+</script>

frontend/components/global/BaseOverflowButton.vue

@@ -22,7 +22,7 @@
         </v-list-item>
       </v-list-item-group>
     </v-list>
-    <!--  Event -->
+    <!--  Links -->
     <v-list v-else-if="mode === MODES.link" dense>
       <v-list-item-group v-model="itemGroup">
         <v-list-item v-for="(item, index) in items" :key="index" :to="item.to">
@@ -58,6 +58,13 @@ const MODES = {
   event: "event",
 };
 
+export interface MenuItem {
+  text: string;
+  icon: string;
+  to?: string;
+  event: string;
+}
+
 export default defineComponent({
   props: {
     mode: {
@@ -65,7 +72,7 @@ export default defineComponent({
       default: "model",
     },
     items: {
-      type: Array,
+      type: Array as () => MenuItem[],
       required: true,
     },
     disabled: {
@@ -92,6 +99,8 @@ export default defineComponent({
     const activeObj = ref({
       text: "DEFAULT",
       value: "",
+      icon: undefined,
+      event: undefined,
     });
 
     let startIndex = 0;