Initial commit

components/navigation/navigation.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { useDisplay } from "vuetify/lib/framework.mjs";
+import { ref } from "vue";
+import { navigateTo } from "#app";
+
+const { mobile } = useDisplay();
+const navOpen = ref(!mobile.value);
+</script>
+
+<template>
+  <VAppBar v-if="mobile" order="5">
+    <VAppBarNavIcon @click.end="navOpen = !navOpen" />
+    <VToolbarTitle>Database Project</VToolbarTitle>
+  </VAppBar>
+  <VNavigationDrawer v-model="navOpen" :temporary="mobile">
+    <VList>
+      <VListItem
+        prepend-avatar="https://cdn.discordapp.com/avatars/317001025074757632/248f503c44bc95ac75f55f5835e6ff9f.png?size=512"
+        title="Anonymous"
+      />
+    </VList>
+
+    <VDivider />
+
+    <VList density="compact" nav>
+      <VListItem prepend-icon="mdi-home" title="Home" value="/" @click="navigateTo('/')" />
+      <VListItem prepend-icon="mdi-login" title="Login" value="/login" @click="navigateTo('/login')" />
+      <VListItem prepend-icon="mdi-table" title="Table Example" value="/tableExample" @click="navigateTo('/tableExample')" />
+      <VListItem prepend-icon="mdi-form-textarea" title="Echo Form" value="/forms" @click="navigateTo('/forms')" />
+    </VList>
+  </VNavigationDrawer>
+</template>

components/pagedList.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps<{
+  records: Array<any>,
+  recordKey: string,
+  variant?: "default" | "inset" | "accordion" | "popout",
+  modelValue?: any,
+}>();
+
+// eslint-disable-next-line func-call-spacing
+defineEmits<{
+  (e: "update:modelValue", value: typeof props.modelValue): void,
+}>();
+</script>
+
+<template>
+  <VExpansionPanels
+    multiple
+    :v-model="modelValue"
+    @update:model-value="(e: any) => $emit('update:modelValue', e)"
+  >
+    <VExpansionPanel
+      v-for="record in records"
+      :key="record[recordKey]"
+      :variant="props.variant ?? 'default'"
+    >
+      <template #title>
+        <slot name="title" :record="record" />
+      </template>
+      <template #text>
+        <slot name="text" :record="record" />
+      </template>
+    </VExpansionPanel>
+  </VExpansionPanels>
+</template>

components/pagedTable.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const props = defineProps<{
+  records: Array<any>,
+  recordKey: string,
+  fields: Array<string>,
+  buttons: boolean,
+}>();
+
+// eslint-disable-next-line func-call-spacing
+defineEmits<{
+  (e: "click", recordKey: string): void,
+  (e: "click:edit", recordKey: string): void,
+  (e: "click:delete", recordKey: string): void,
+}>();
+</script>
+
+<template>
+  <tbody>
+    <tr v-for="record in props.records" :key="record[props.recordKey]">
+      <td
+        v-for="field in props.fields"
+        :key="field"
+        @click="$emit('click', record[recordKey])"
+      >
+        {{ record[field] }}
+      </td>
+      <td v-if="buttons" class="buttons">
+        <div>
+          <VBtn
+            icon="mdi-pencil"
+            variant="text"
+            @click="$emit('click:edit', record[recordKey])"
+          />
+          <VBtn
+            icon="mdi-delete"
+            color="red"
+            variant="text"
+            @click="$emit('click:delete', record[recordKey])"
+          />
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</template>
+
+<style scoped>
+  .buttons {
+    width: 0;
+    padding-right: 4px !important;
+  }
+  .buttons > div {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+</style>

components/test.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { ref } from 'vue';
+
+const count = ref(0);
+</script>
+
+<template>
+  <VBtn @click="count++">
+    Clicky {{ count }} times
+  </VBtn>
+</template>