INIT: initial commit

Added some initial files, components, functionality

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <PpHeader />
+  <NuxtPage />
+  <PpFooter />
+</template>

app/assets/styles/formInput.css

@@ -0,0 +1,46 @@
+.Input {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 25% 1 0;
+    border: 2px solid var(--color-blue);
+    border-radius: var(--radius-default);
+    overflow: hidden;
+    transition: var(--transition-default);
+    outline: 0 solid var(--color-white);
+
+    & label {
+        position: absolute;
+        left: .5rem;
+        font-size: 1.5em;
+        top: .7rem;
+        transition: var(--transition-default);
+    }
+
+    & input {
+        all: unset;
+        width: calc(100% - 1rem);
+        font-size: 1.2em;
+        padding: 1.3rem .5rem .5rem .5rem;
+        background: var(--color-white);
+
+        &[type="number"] {
+            text-align: right;
+        }
+    }
+
+    &:has(input:invalid) {
+        border-color: var(--color-red);
+        outline-width: 2px;
+    }
+
+    & input:focus,
+    & input:not(:placeholder-shown) {
+        & + label {
+            color: var(--color-main);
+            font-size: 1em;
+            top: .3rem;
+            right: .5rem;
+        }
+    }
+}

app/assets/styles/general.css

@@ -0,0 +1,27 @@
+:root {
+    --padding-default: 1rem;
+    --radius-default: 5px;
+    --transition-default: 150ms;
+
+    --color-white: white;
+    --color-red: #cc0001;
+    --color-blue-dark: #341f97;
+    --color-blue: #2e86de;
+    --color-grey: #c7c7c7;
+
+    --color-main: var(--color-blue);
+
+    --box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html,
+body {
+    height: 100%;
+    overflow-x: hidden;
+}

app/assets/styles/header.css

@@ -0,0 +1,52 @@
+.Header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--padding-default);
+    box-shadow: var(--box-shadow-z2);
+
+    & strong {
+        font-size: 2em;
+        & span {
+            color: var(--color-main);
+        }
+    }
+
+    & input[type="checkbox"] {
+        display: none;
+    }
+
+    & input[type="checkbox"]:checked + nav {
+        translate: 0;
+    }
+
+    & nav,
+    & ul {
+        display: flex;
+        flex-direction: column;
+        gap: 1em;
+    }
+
+    & nav {
+        position: fixed;
+        padding: var(--padding-default);
+        translate: 100% 0;
+        width: 100vw;
+        right: 0;
+        top: 0;
+        height: 100dvh;
+        transition: 150ms ease-in-out;
+        background: var(--color-white);
+        font-size: 2em;
+        align-items: end;
+        z-index: 100;
+    }
+
+    & ul {
+        width: 100%;
+        align-items: center;
+        & li {
+            list-style: none;
+        }
+    }
+}

app/assets/styles/priceCard.css

@@ -0,0 +1,16 @@
+.PriceCard {
+    padding: var(--padding-default);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    background: var(--color-blue);
+    border-bottom: 1px solid var(--color-white);
+
+    & > .wrapper {
+        display: flex;
+        width: 100%;
+        gap: 1rem;
+        justify-content: space-between;
+    }
+}

app/components/Pp/Footer.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>THIS IS A FOOTER</div>
+</template>
+
+<script setup lang="ts">
+
+</script>

app/components/Pp/FormInput.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="Input">
+    <input :type="type" :id="makeId()" placeholder=" " min="1" :max="max" />
+    <label :for="makeId()">{{ label }}</label>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  type ?: 'text' | 'number'
+  max ?: number
+  label : string
+  id : string
+  uid : number
+}
+
+const {
+  type = 'text',
+  max = 10,
+  label,
+  id,
+  uid,
+} = defineProps<Props>()
+
+const makeId = () => `${id}_${uid}`
+</script>

app/components/Pp/Header.vue

@@ -0,0 +1,22 @@
+<template>
+  <header class="Header">
+    <strong><span>Pro</span>Papier</strong>
+    <label for="burger_nav_toggle">
+      <Icon name="solar:hamburger-menu-broken" size="2em" />
+    </label>
+    <input type="checkbox" id="burger_nav_toggle" />
+    <nav>
+      <label for="burger_nav_toggle">
+        <Icon name="solar:close-circle-broken" />
+      </label>
+      <ul>
+        <li>Home</li>
+        <li>Übersicht</li>
+      </ul>
+    </nav>
+  </header>
+</template>
+
+<script setup lang="ts">
+
+</script>

app/components/Pp/PriceCard.vue

@@ -0,0 +1,21 @@
+<template>
+  <form class="PriceCard">
+    <div class="wrapper">
+      <PpFormInput label="Name" id="n" :uid="uid" type="text" />
+      <PpFormInput label="Preis" id="p" :uid="uid" type="number" />
+    </div>
+    <div class="wrapper">
+      <PpFormInput label="Rollen" id="r" :uid="uid" type="number" />
+      <PpFormInput label="Blätter" id="b" :uid="uid" type="number" />
+      <PpFormInput label="Lagen" id="l" :uid="uid" type="number" />
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  uid: number
+}
+
+const { uid } = defineProps<Props>()
+</script>

app/pages/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <PpPriceCard v-for="num in cards" :uid="num" />
+  <button @click="addCard">ADD</button>
+</template>
+
+<script setup lang="ts">
+const cards = ref(1)
+
+const addCard = () => {
+  cards.value++
+}
+</script>

nuxt.config.ts

@@ -0,0 +1,19 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-11-01',
+  devtools: { enabled: true },
+  future: {
+    compatibilityVersion: 4,
+  },
+
+  modules: [
+    '@nuxt/icon',
+  ],
+
+  css : [
+    './app/assets/styles/general.css',
+    './app/assets/styles/header.css',
+    './app/assets/styles/priceCard.css',
+    './app/assets/styles/formInput.css',
+  ]
+})

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "dev:expose": "nuxt dev --host",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxt/icon": "^1.10.3",
+    "nuxt": "^3.15.4",
+    "vue": "latest",
+    "vue-router": "latest"
+  }
+}

public/robots.txt

@@ -0,0 +1 @@
+

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}