webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: lp and navigation

Browse source 
Added... a lot of stuff
This commit is contained in:
Fiona Lena Urban 2025-05-22 09:59:27 +02:00
parent 55fc3fe4e0
commit f60719fa9e
20 changed files with 332 additions and 331 deletions
Download patch file Download diff file Expand all files Collapse all files

21
app/components/Pp/Form/TextField.vue
View file

@ -1,9 +1,11 @@
<template>
<div class="TextField">
<div class="wrapper">
<Icon v-if="icon" class="icon" :name="icon" mode="svg" />
<input v-model="text" :type="type" :id="id" placeholder=" " @blur="emit('blur')" @input="emit('input')" :inputmode="mode" />
<label :for="id">{{ label }}</label>
<input v-model="text" :type="type" :id="id" :placeholder="placeholder" @blur="emit('blur')" @input="emit('input')" :inputmode="mode" />
<label :for="id">
<Icon v-if="icon" class="icon" :name="icon" mode="svg" />
<span>{{ label }}</span>
</label>
</div>
<span v-if="message">{{ message }}</span>
</div>
@ -11,12 +13,13 @@
<script setup lang="ts">
type Props = {
type?: 'text' | 'number';
message?: string;
icon?: string;
label: string;
id: string;
mode?: 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal';
type?: 'text' | 'number'
message?: string
icon?: string
label: string
placeholder: string
id: string
mode?: 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal'
};
const { type = "text", mode = "text" } = defineProps<Props>();

49
app/components/Pp/Header.vue
View file

@ -1,33 +1,28 @@
<template>
<div class="Header">
<div>
<header class="roboto-condensed">
<NuxtLink class="header-text" to="/">
<img class="logo" src="/img/propapier.svg" alt="ProPapier logo" />
<div>
<span class="big">ProPapier</span>
<span class="small">Vergleichen. Schnell. Unkompliziert.</span>
</div>
</NuxtLink>
<label for="burger_nav_toggle" v-if="available">
<Icon name="solar:hamburger-menu-broken" size="2em" />
</label>
<input type="checkbox" id="burger_nav_toggle" v-if="available" />
<nav class="flex-col" v-if="available">
<label for="burger_nav_toggle">
<Icon name="solar:close-circle-broken" />
</label>
<ul class="flex-col">
<li>Home</li>
<li>Übersicht</li>
</ul>
</nav>
</header>
<div id="subheader" />
</div>
<div class="Header" :class="[type]">
<header class="roboto-condensed">
<NuxtLink class="header-text" to="/">
<img class="logo" src="/img/propapier.svg" alt="ProPapier logo" />
<div>
<span class="big">ProPapier</span>
<span class="small">Vergleichen. Schnell. Unkompliziert.</span>
</div>
</NuxtLink>
<button class="burger-button" @click="open()">
<Icon name="uil:bars" size="2em" />
</button>
</header>
<div id="subheader" />
</div>
</template>
<script setup lang="ts">
const available = false
type Props = {
type ?: 'lp'
}
defineProps<Props>()
const nav = useNavigation()
const open = () => { nav.showNavigation() }
</script>

41
app/components/Pp/Navigation.vue Normal file
View file

@ -0,0 +1,41 @@
<template>
<section class="Navigation" :class="{ open }">
<nav>
<PpButton class="round text" @click="close()">
<Icon name="uil:times" mode="svg" />
</PpButton>
<ul class="flex-col">
<li v-for="page in pages">
<NuxtLink :to="page.route" @click="close()" active-class="active">
<Icon class="icon" :name="`uil:${page.icon}`" mode="svg" />
<span>{{ page.label }}</span>
</NuxtLink>
</li>
</ul>
</nav>
</section>
</template>
<script setup lang="ts">
const nav = useNavigation()
const close = () => nav.hideNavigation()
const open = computed(() => nav.isNavigationVisible.value)
const pages = [
{
label: 'Home',
icon: 'home',
route: '/'
},
{
label: 'Schnellrechner',
icon: 'calculator',
route: '/rechner'
},
// {
// label: 'Über uns',
// icon: 'users-alt',
// route: '/about-us'
// }
]
</script>

27
app/components/Pp/PriceCardDialog.vue
View file

@ -16,7 +16,8 @@
v-model="currentCard.name"
id="card_name"
label="Name"
icon="uil:user"
icon="uil:pricetag-alt"
:placeholder="randomName"
:class="{ error: !validFields.name }"
:message="!validFields.name ? 'Feld darf nicht leer sein.' : ''"
@input="validFields.name = true"
@ -25,6 +26,7 @@
v-model="currentCard.price"
id="card_price"
label="Preis"
placeholder="2,49"
icon="uil:euro"
mode="decimal"
:class="{ error: !validFields.price }"
@ -37,6 +39,7 @@
v-model="currentCard.roles"
id="card_roles"
label="Rollen"
placeholder="8"
icon="uil:toilet-paper"
mode="decimal"
:class="{ error: !validFields.roles }"
@ -47,6 +50,7 @@
v-model="currentCard.sheets"
id="card_sheets"
label="Blatt"
placeholder="150"
icon="uil:file-landscape"
mode="decimal"
:class="{ error: !validFields.sheets }"
@ -57,6 +61,7 @@
v-model="currentCard.layers"
id="card_layers"
label="Lagen"
placeholder="3"
icon="uil:layer-group"
mode="decimal"
:class="{ error: !validFields.layers }"
@ -94,6 +99,25 @@ const emit = defineEmits(['update'])
const dialog = useTemplateRef<HTMLDialogElement>('dialog')
const wrapper = useTemplateRef<HTMLElement>('wrapper')
const market = [
'Lotl',
'Olda',
'Bäwä',
'Brutto',
]
const product = [
'Weichelig',
'Sau Rauh',
'Bissl Sanft',
'Ganz ok',
'Flauschi'
]
const generateRandomName = () => `${market[Math.floor(Math.random() * market.length)]} ${product[Math.floor(Math.random() * product.length)]}`
const randomName = useState('randomName', () => generateRandomName())
const checkPrice = () => {
if (!currentCard) return false
if (currentCard.price.length === 0) return false
@ -138,6 +162,7 @@ onMounted(() => {
validFields.roles = true
validFields.sheets = true
validFields.layers = true
randomName.value = generateRandomName()
})
onClickOutside(wrapper, () => dialog.value?.close())