first commit

Signed-off-by: garionion <github@entr0py.de>

src/App.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <v-nav />
+    <main class="container mx-auto px-2 max-w-7xl sm:px-6">
+      <router-view></router-view>
+    </main>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import VNav from "./components/VNav.vue";
+
+export default defineComponent({
+  name: "App",
+  components: {
+    VNav,
+  },
+  setup() {
+    const message = ref("Hi");
+    return { message };
+  },
+});
+</script>
+
+<style>
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+</style>

src/components/HelloWorld.vue

@@ -0,0 +1,69 @@
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a
+      href="https://marketplace.visualstudio.com/items?itemName=octref.vetur"
+      target="_blank"
+      >Vetur</a
+    >
+    or
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+    (if using
+    <code>&lt;script setup&gt;</code>)
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank"
+      >Vite Docs</a
+    >
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+
+  <button @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from "vue";
+export default defineComponent({
+  name: "HelloWorld",
+  props: {
+    msg: {
+      type: String,
+      required: true,
+    },
+  },
+  setup: () => {
+    const count = ref(0);
+    return { count };
+  },
+});
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>

src/components/VNav.vue

@@ -0,0 +1,154 @@
+<template>
+  <nav class="bg-gray-800">
+    <div class="max-w-7xl mx-auto px-2 sm:px-6">
+      <div class="relative flex items-center justify-between h-16">
+        <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+          <!-- Mobile menu button-->
+          <button
+            @click="open = !open"
+            class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+            aria-expanded="false"
+          >
+            <span class="sr-only">Open main menu</span>
+            <!-- Icon when menu is closed. -->
+            <!--
+              Heroicon name: outline/menu
+
+              Menu open: "hidden", Menu closed: "block"
+            -->
+            <svg
+              class="h-6 w-6"
+              v-if="!open"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+            <!-- Icon when menu is open. -->
+            <!--
+              Heroicon name: outline/x
+
+              Menu open: "block", Menu closed: "hidden"
+            -->
+            <svg
+              class="h-6 w-6"
+              v-else
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+        <div
+          class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"
+        >
+          <div class="flex-shrink-0 flex items-center">
+            <!--<img class="block lg:hidden h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
+                 alt="Workflow">
+            <img class="hidden lg:block h-8 w-auto"
+                 src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow">-->
+            <div class="block h-8 w-auto py-1 text-white" v-text="title" />
+          </div>
+          <div class="hidden sm:block sm:ml-6">
+            <div class="flex space-x-4">
+              <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+              <router-link
+                v-for="{ name, to } in items"
+                :key="name"
+                v-text="name"
+                :to="{ name: to }"
+                class="px-3 py-2 rounded-md text-sm font-medium"
+                :class="
+                  activeRoute === to
+                    ? ['bg-gray-900', 'text-white']
+                    : ['text-gray-300', 'hover:bg-gray-700', 'hover:text-white']
+                "
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
+        >
+          <a
+            href="#"
+            class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
+            >Logout</a
+          >
+        </div>
+      </div>
+    </div>
+
+    <!--
+      Mobile menu, toggle classes based on menu state.
+
+      Menu open: "block", Menu closed: "hidden"
+    -->
+    <div class="sm:hidden" :class="{ hidden: !open }">
+      <div class="px-2 pt-2 pb-3 space-y-1">
+        <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+        <a
+          v-for="{ name, to } in items"
+          :key="name"
+          v-text="name"
+          :to="{ name: to }"
+          class="block px-3 py-2 rounded-md text-base font-medium"
+          :class="
+            activeRoute === to
+              ? ['bg-gray-900', 'text-white']
+              : ['text-gray-300', 'hover:bg-gray-700', 'hover:text-white']
+          "
+        />
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script lang="ts">
+//stolen from https://git.max-site.de/Eulinchen/eulinchen-frontend/src/branch/master/src/components/VNav.vue
+
+import { ref, reactive } from "vue";
+
+export default {
+  name: "VNav",
+  data() {
+    const title = "radiator";
+    const open = ref(false);
+    const items = reactive([
+      {
+        name: "Dashboard",
+        to: "Home",
+      },
+      {
+        name: "Settings",
+        to: "Settings",
+      },
+    ]);
+    return { title, open, items };
+  },
+  computed: {
+    activeRoute(): string {
+      return this.$route.name;
+    }
+  },
+};
+</script>
+
+<style scoped></style>

src/main.ts

@@ -0,0 +1,8 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+
+const app = createApp(App);
+
+app.use(router);
+app.mount("#app");

src/router/index.ts

@@ -0,0 +1,23 @@
+import { createWebHistory, createRouter } from "vue-router";
+import Home from "../views/Home.vue";
+import About from "../views/Settings.vue";
+
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: Home,
+  },
+  {
+    path: "/settings",
+    name: "Settings",
+    component: About,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

src/views/Home.vue

@@ -0,0 +1,11 @@
+<template>
+  Mi casa e tu casa
+</template>
+
+<script lang="ts">
+export default {
+  name: "Home",
+};
+</script>
+
+<style scoped></style>

src/views/Settings.vue

@@ -0,0 +1,11 @@
+<template>
+  settierungsmöglichkeiten
+</template>
+
+<script>
+export default {
+  name: "Settings",
+};
+</script>
+
+<style scoped></style>