create-nuxt-base 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.2.3](https://github.com/lenneTech/nuxt-base-starter/compare/v0.2.2...v0.2.3) (2024-02-20)
+
+
+### Features
+
+* Remove components because of new cli components command ([6380979](https://github.com/lenneTech/nuxt-base-starter/commit/6380979ba7ca46ce6058f4e1dea4e511d1d0ea9d))
+
+
+### Bug Fixes
+
+* fix scripts ([107aa14](https://github.com/lenneTech/nuxt-base-starter/commit/107aa1459f327543bfad03b236f9dc6cdbbc52f6))
+
 ### [0.2.2](https://github.com/lenneTech/nuxt-base-starter/compare/v0.2.1...v0.2.2) (2024-02-19)
 
 

package/nuxt-base-template/.env.example

@@ -5,4 +5,3 @@ WEB_PUSH_KEY=
 API_SCHEMA=../api/schema.gql
 STORAGE_PREFIX=base-dev
 GENERATE_TYPES=0
-

package/nuxt-base-template/package.json

@@ -5,8 +5,8 @@
     "init": "npm install",
     "reinit": "rm -rf node_modules && rm -rf package-lock.json && yes | npx nuxt cleanup && npm cache clean --force && npm i",
     "build": "nuxt build",
-    "build:develop": "npm run build",
-    "build:test": "npm run build",
+    "build:develop": "nuxt build",
+    "build:test": "nuxt build",
     "start": "nuxt dev",
     "start:develop": "node .output/server/index.mjs",
     "start:test": "node .output/server/index.mjs",

package/nuxt-base-template/src/app.vue

@@ -1,9 +1,6 @@
 <template>
   <div>
     <NuxtLayout>
-      <ModalContainer />
-      <NotificationContainer />
-      <BaseContextMenuContainer />
       <NuxtPage />
     </NuxtLayout>
   </div>

package/nuxt-base-template/src/pages/index.vue

@@ -1,35 +1,5 @@
-<script setup lang="ts">
-import FormTextarea from '~/components/form/FormTextarea.vue';
-
-const isSubmitting = ref(false);
-</script>
-
 <template>
   <div class="flex h-screen items-center justify-center flex-col">
     <h1 class="font-extrabold text-transparent text-8xl bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">Lenne Nuxt Starter</h1>
-
-    <h2 class="mt-5">DEMO</h2>
-    <FormInput name="email" type="email" label="E-Mail" placeholder="max.mustermann@test.de" />
-    <FormTextarea name="description" label="Description" placeholder="..." />
-    <FormPassword name="password" label="Password" placeholder="Password" />
-    <FormSelect
-      name="select"
-      label="Select"
-      placeholder="placeholder"
-      :options="[
-        { label: 'Option 1', value: 1 },
-        { label: 'Option 2', value: 2 },
-        { label: 'Option 3', value: 3 },
-      ]"
-    />
-    <FormToggle name="toggle" label="Toggle" />
-    <div class="flex items-center gap-3">
-      <FormSubmit label="Save" :is-submitting="isSubmitting" @click="isSubmitting = true" />
-      <BaseButton size="sm" :loading="isSubmitting" @click="isSubmitting = true">Submit</BaseButton>
-      <BaseButton size="lg" :loading="isSubmitting" @click="isSubmitting = true">Submit</BaseButton>
-      <BaseButton size="md" :loading="isSubmitting" appearance="outline" @click="isSubmitting = true">Submit</BaseButton>
-      <BaseButton size="md" :loading="isSubmitting" appearance="none" @click="isSubmitting = true">Submit</BaseButton>
-      <BaseButton size="md" color="danger" @click="isSubmitting = false">Reset</BaseButton>
-    </div>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nuxt-base",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Starter to generate a configured environment with VueJS, Nuxt, Tailwind, Eslint, @lenne.tech/nuxt-base, Unit Tests, Cypress etc.",
   "main": "index.js",
   "bin": {

package/nuxt-base-template/src/components/SocialMediaBubble.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  icon: string;
-  title: string;
-  bgColor: string;
-}>();
-</script>
-
-<template>
-  <button class="flex flex-col items-center group">
-    <span class="rounded-full w-14 h-14 flex items-center justify-center transition-all duration-300 group-hover:-translate-y-1" :style="{ 'background-color': bgColor }">
-      <span class="text-2xl text-white" :class="icon"></span>
-    </span>
-    <small class="text-sm font-light mt-2">{{ title }}</small>
-  </button>
-</template>

package/nuxt-base-template/src/components/base/BaseAccordion.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import { useElementSize } from '@vueuse/core';
-
-const props = withDefaults(
-  defineProps<{
-    expanded?: boolean;
-  }>(),
-  {
-    expanded: false,
-  }
-);
-
-const show = ref(false);
-const contents = ref<HTMLElement>();
-
-watch(
-  () => props.expanded,
-  () => {
-    show.value = props.expanded;
-  },
-  { immediate: true }
-);
-
-const { height: targetHeight } = useElementSize(contents, undefined, {
-  box: 'border-box',
-});
-
-const height = computed(() => (show.value ? targetHeight.value : 0));
-</script>
-
-<template>
-  <div class="group border-b border-gray-800 bg-white dark:bg-gray-950 dark:border-gray-500 transition duration-500 hover:bg-gray-50">
-    <div class="flex cursor-pointer items-center justify-center p-5 md:p-6">
-      <div class="text-base text-gray-900 transition group-hover:text-gray-950 md:text-lg">
-        <slot name="title"></slot>
-      </div>
-
-      <div class="relative ml-auto flex items-center justify-center">
-        <span :class="{ 'rotate-180': show, 'rotate-45': !show }" class="i-bi-x h-5 w-5 text-gray-900 transition-transform duration-500 md:h-6 md:w-6 dark:bg-white"></span>
-      </div>
-    </div>
-
-    <div
-      :style="{
-        height: `${height}px`,
-      }"
-      class="overflow-hidden px-5 transition-[height] duration-500 will-change-[height] md:px-6"
-    >
-      <div ref="contents" class="space-y-4 pb-5 font-light leading-relaxed tracking-wide text-gray-900 md:pb-6">
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>

package/nuxt-base-template/src/components/base/BaseButton.vue

@@ -1,103 +0,0 @@
-<script setup lang="ts">
-import { twMerge } from 'tailwind-merge';
-import { NuxtLink } from '#components';
-import type { RouteLocationRaw } from 'vue-router';
-
-const props = withDefaults(
-  defineProps<{
-    href?: string;
-    to?: RouteLocationRaw;
-    appearance?: 'regular' | 'outline' | 'none';
-    size?: 'sm' | 'md' | 'lg' | 'auto';
-    color?: 'primary' | 'secondary' | 'green' | 'yellow' | 'lightprimary' | 'danger';
-    textColor?: 'white' | 'black' | 'primary' | 'gray' | '';
-    type?: 'submit' | 'button';
-    loading?: boolean;
-    loadingText?: string;
-    block?: boolean; // or width full
-  }>(),
-  {
-    appearance: 'regular',
-    size: 'md',
-    type: 'button',
-    color: 'primary',
-    textColor: '',
-    loading: false,
-    loadingText: 'Loading',
-    block: false,
-  }
-);
-
-const appearanceClasses: Record<typeof props.appearance, string> = {
-  regular: 'rounded-md text-white',
-  outline:
-    'rounded-md border border-primary bg-background hover:bg-primary-500 text-primary hover:text-white disabled:bg-transparent disabled:text-gray-400 disabled:border-gray-200',
-  none: 'bg-transparent border-transparent hover:text-primary-500 text-foreground hover:bg-transparent',
-};
-
-const sizeClasses: Record<typeof props.size, string> = {
-  sm: 'min-w-[100px] py-1.5 px-1.5 text-sm',
-  md: 'min-w-[100px] py-1.5 px-2 text-base',
-  lg: 'min-w-[240px] py-3 px-4 text-lg',
-  auto: 'text-sm lg:text-lg',
-};
-
-const colorClasses: Record<typeof props.color, string> = {
-  primary: 'bg-primary-500 hover:bg-primary-400 text-primary-50',
-  secondary: 'bg-orange-500 hover:bg-orange-400 text-orange-50',
-  green: 'bg-green-500 hover:bg-green-400 text-green-50',
-  yellow: 'bg-yellow-500 hover:bg-yellow-400 text-yellow-950',
-  danger: 'bg-red-500 hover:bg-red-400 text-red-950',
-  lightprimary: 'bg-primary-300 text-primary-50',
-};
-
-const textColorClasses: Record<typeof props.textColor, string> = {
-  white: 'text-white',
-  black: 'text-black',
-  primary: 'text-primary',
-  gray: 'text-gray-400',
-  '': '',
-};
-
-const LoadingIcon = defineComponent({
-  render: () =>
-    h('svg', { fill: 'none', viewBox: '0 0 24 24', class: 'animate-spin h-5 w-5 text-white' }, [
-      h('circle', {
-        class: 'opacity-25',
-        cx: '12',
-        cy: '12',
-        r: '10',
-        stroke: 'currentColor',
-        'stroke-width': '4',
-      }),
-      h('path', {
-        class: 'opacity-75',
-        fill: 'currentColor',
-        d: 'M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z',
-      }),
-    ]),
-});
-const defaultClasses = 'duration-200 flex gap-2 justify-center items-center whitespace-nowrap text-center disabled:bg-gray-200 disabled:cursor-not-allowed disabled:text-gray-400';
-const classes = twMerge(defaultClasses, sizeClasses[props.size], colorClasses[props.color], appearanceClasses[props.appearance], textColorClasses[props.textColor]);
-</script>
-
-<template>
-  <component
-    :is="props.href ? 'a' : props.to ? NuxtLink : 'button'"
-    :class="[
-      classes,
-      {
-        'w-full': props.block,
-        'cursor-wait': props.loading,
-      },
-    ]"
-    :to="props.to"
-    :active-class="props.appearance === 'none' ? '!text-primary-500' : ''"
-    :href="props.href"
-    :type="props.type"
-  >
-    <LoadingIcon v-if="props.loading" />
-    <p v-if="props.loadingText && props.loading" v-text="props.loadingText"></p>
-    <slot v-else></slot>
-  </component>
-</template>

package/nuxt-base-template/src/components/base/BaseContainer.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="w-full px-4 max-w-7xl mx-auto">
-    <slot></slot>
-  </div>
-</template>

package/nuxt-base-template/src/components/base/BaseContextMenuContainer.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { useMouse } from '@vueuse/core';
-
-import { useContextMenu } from '~/composables/use-context-menu';
-
-const { activeMenu, close } = useContextMenu();
-const target = ref();
-const isLeft = usePageLeave();
-
-onClickOutside(target, () => close());
-
-const { x, y } = useMouse();
-const left = ref(0);
-const top = ref(0);
-
-watch(
-  () => isLeft.value,
-  () => {
-    close();
-  }
-);
-
-watch(
-  () => activeMenu.value,
-  () => {
-    if (activeMenu.value?.show) {
-      left.value = unref(x.value);
-      top.value = unref(y.value);
-    }
-  }
-);
-</script>
-
-<template>
-  <ClientOnly>
-    <Teleport to="body">
-      <TransitionFade leave-duration="150" start-duration="150">
-        <div
-          v-show="activeMenu"
-          @mouseleave="close()"
-          ref="target"
-          class="absolute w-56 right-0 origin-top-right border border-border bg-background overflow-hidden shadow-lg rounded-md focus:outline-none"
-          :style="`top: ${top}px; left: ${left}px`"
-        >
-          <button
-            v-for="item of activeMenu?.items"
-            :key="item"
-            type="button"
-            class="w-full text-left text-foreground px-4 py-2 text-sm hover:bg-hover hover:text-foreground flex justify-between items-center"
-            @click="
-              item.click();
-              close();
-            "
-          >
-            {{ item.label }}
-          </button>
-        </div>
-      </TransitionFade>
-    </Teleport>
-  </ClientOnly>
-</template>

package/nuxt-base-template/src/components/base/BaseInfinityList.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-const emit = defineEmits<{
-  (event: 'loadMore'): void;
-}>();
-const scrollContainer = ref<HTMLElement | null>(null);
-let infinityScrollInProgress = false;
-
-const handleScroll = async () => {
-  let element = scrollContainer.value;
-  if (!infinityScrollInProgress && element && element.getBoundingClientRect().bottom < window.innerHeight) {
-    infinityScrollInProgress = true;
-
-    emit('loadMore');
-
-    setTimeout(() => {
-      infinityScrollInProgress = false;
-    }, 1000);
-  }
-};
-
-onMounted(() => {
-  window.addEventListener('scroll', handleScroll);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('scroll', handleScroll);
-});
-</script>
-
-<template>
-  <div ref="scrollContainer">
-    <slot></slot>
-  </div>
-</template>

package/nuxt-base-template/src/components/base/BaseProgressbar.vue

@@ -1,64 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    percent: number | `${number}`;
-    duration?: number | `${number}`;
-    label?: string;
-    color?: 'primary' | 'red' | 'green' | 'blue';
-  }>(),
-  {
-    duration: 400,
-    color: 'primary',
-  }
-);
-
-type RecordFromUnion<T extends string> = {
-  [K in T]: string;
-};
-
-type ColorTypes = 'text' | 'background' | 'background-light';
-
-const colorClass: Record<typeof props.color, RecordFromUnion<ColorTypes>> = {
-  primary: {
-    text: 'text-primary-600',
-    background: 'bg-primary-500',
-    'background-light': 'bg-gray-200',
-  },
-  red: {
-    text: 'text-red-600',
-    background: 'bg-red-500',
-    'background-light': 'bg-red-200',
-  },
-  green: {
-    text: 'text-green-600',
-    background: 'bg-green-500',
-    'background-light': 'bg-green-200',
-  },
-  blue: {
-    text: 'text-blue-600',
-    background: 'bg-blue-500',
-    'background-light': 'bg-blue-200',
-  },
-};
-</script>
-
-<template>
-  <div :style="`--percent: ${props.percent}%; --duration: ${props.duration}ms;`" class="relative pt-1 w-full">
-    <div v-if="props.label" class="flex mb-2 items-center justify-between">
-      <div>
-        <span :class="[colorClass[props.color].text, colorClass[props.color]['background-light']]" class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full">
-          {{ props.label }}
-        </span>
-      </div>
-      <div class="text-right">
-        <span :class="[colorClass[props.color].text]" class="text-xs font-semibold inline-block"> {{ (+props.percent).toFixed(0) }}% </span>
-      </div>
-    </div>
-    <div :class="colorClass[props.color]['background-light']" class="overflow-hidden h-1 mb-4 text-xs flex rounded bg-[--color-light]">
-      <div
-        :class="colorClass[props.color].background"
-        class="transform ease-in-out w-[--percent] duration-[--duration] shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center"
-      ></div>
-    </div>
-  </div>
-</template>

package/nuxt-base-template/src/components/base/BaseToggle.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    active?: boolean;
-  }>(),
-  {
-    active: false,
-  }
-);
-const toggleActive = ref(false);
-
-watch(
-  () => props.active,
-  () => {
-    toggleActive.value = props.active;
-  },
-  { immediate: true }
-);
-</script>
-
-<template>
-  <div class="flex justify-between items-center cursor-pointer" @click="toggleActive = !toggleActive">
-    <div class="w-8 h-5 flex items-center bg-gray-300 rounded-full p-1 duration-300 ease-in-out" :class="{ 'bg-green-400': toggleActive }">
-      <div class="bg-white w-4 h-4 rounded-full shadow-md transform duration-300 ease-in-out" :class="{ 'translate-x-2': toggleActive }"></div>
-    </div>
-  </div>
-</template>

package/nuxt-base-template/src/components/form/FormInput.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { ErrorMessage, useField } from 'vee-validate';
-
-const props = defineProps<{
-  disabled?: boolean;
-  label?: string;
-  name: string;
-  placeholder?: string;
-  type: string;
-}>();
-
-const { handleBlur, handleChange, value, meta, setTouched } = useField(() => props.name);
-</script>
-
-<template>
-  <div class="mt-3">
-    <label v-if="label" :for="name" class="block text-sm font-medium leading-6 text-foreground">{{ label }}{{ meta.required ? '*' : '' }}</label>
-    <div class="relative mt-2 pb-2">
-      <input
-        :id="name"
-        :type="type"
-        :name="name"
-        v-model="value"
-        :disabled="disabled"
-        @blur="handleBlur"
-        @focus="setTouched(true)"
-        @change="handleChange"
-        class="bg-background block w-full rounded-md border-0 py-1.5 text-foreground shadow-sm ring-1 ring-inset ring-border placeholder:text-foreground/50 focus:ring-1 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
-        :placeholder="placeholder"
-      />
-      <ErrorMessage class="absolute -bottom-2.5 text-xs font-light text-red-600" :name="name" />
-    </div>
-  </div>
-</template>

package/nuxt-base-template/src/components/form/FormPassword.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { ErrorMessage, useField } from 'vee-validate';
-
-enum InputType {
-  Password = 'password',
-  Text = 'text',
-}
-
-const props = defineProps<{
-  label: string;
-  name: string;
-  placeholder: string;
-}>();
-
-const type = ref<InputType>(InputType.Password);
-const { handleBlur, handleChange, meta, value, setTouched } = useField(() => props.name);
-
-function changeType() {
-  type.value = type.value === InputType.Password ? InputType.Text : InputType.Password;
-}
-</script>
-
-<template>
-  <div class="mt-3">
-    <label v-if="label" :for="name" class="block text-sm font-medium leading-6 text-foreground">{{ label }}{{ meta.required ? '*' : '' }}</label>
-    <div class="relative mt-2 pb-2">
-      <div class="relative">
-        <input
-          :id="name"
-          v-model="value"
-          :type="type"
-          :name="name"
-          @blur="handleBlur"
-          @focus="setTouched(true)"
-          @change="handleChange"
-          class="bg-background block w-full rounded-md border-0 py-1.5 text-foreground shadow-sm ring-1 ring-inset ring-border placeholder:text-foreground/50 focus:ring-1 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
-          :placeholder="placeholder"
-        />
-        <button type="button" class="absolute right-2 bottom-1/2 transform translate-y-1/2 text-secondary-100 flex items-center hover:text-primary-500" @click="changeType()">
-          <span v-if="type === 'password'" class="i-bi-eye"></span>
-          <span v-else class="i-bi-eye-slash"></span>
-        </button>
-      </div>
-      <ErrorMessage class="absolute -bottom-2.5 text-xs font-light text-red-600" :name="name" />
-    </div>
-  </div>
-</template>

package/nuxt-base-template/src/components/form/FormSelect.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { ErrorMessage, useField } from 'vee-validate';
-
-interface Option {
-  label: string;
-  value: any;
-}
-
-const props = defineProps<{
-  disabled?: boolean;
-  label?: string;
-  multiple?: boolean;
-  name: string;
-  options: Option[];
-  placeholder?: string;
-}>();
-
-const { handleBlur, handleChange, meta, value, setTouched } = useField(() => props.name);
-</script>
-
-<template>
-  <div class="relative mt-3 pb-2">
-    <label v-if="label" :for="name" class="block text-sm font-medium leading-6 text-foreground">{{ label }}{{ meta.required ? '*' : '' }}</label>
-    <select
-      :id="name"
-      v-model="value"
-      @focus="setTouched(true)"
-      :name="name"
-      :multiple="multiple ?? false"
-      :disabled="disabled"
-      class="bg-background mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-foreground ring-1 ring-inset ring-border focus:ring-1 focus:ring-primary-500 sm:text-sm sm:leading-6"
-      @blur="handleBlur"
-      @change="handleChange"
-    >
-      <option class="text-foreground/50" :value="null" disabled selected>{{ placeholder }}</option>
-      <option v-for="option of options" :value="option.value">{{ option.label }}</option>
-    </select>
-    <ErrorMessage class="absolute -bottom-2.5 text-xs font-light text-red-600" :name="name" />
-  </div>
-</template>

package/nuxt-base-template/src/components/form/FormSubmit.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  isSubmitting?: boolean;
-  label: string;
-}>();
-</script>
-
-<template>
-  <div>
-    <BaseButton v-if="isSubmitting" type="button" disabled>
-      <span class="animate-bounce">.</span>
-      <span class="animate-bounce delay-150">.</span>
-      <span class="animate-bounce delay-300 me-1">.</span>
-      Loading
-    </BaseButton>
-    <BaseButton v-else type="submit"> {{ label }} </BaseButton>
-  </div>
-</template>

package/nuxt-base-template/src/components/form/FormTextarea.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { ErrorMessage, useField } from 'vee-validate';
-
-const props = defineProps<{
-  disabled?: boolean;
-  label?: string;
-  name: string;
-  placeholder?: string;
-  cols?: number;
-  maxlength?: number;
-}>();
-
-const { handleBlur, handleChange, value, meta, setTouched } = useField(() => props.name);
-</script>
-
-<template>
-  <div class="mt-3">
-    <label v-if="label" :for="name" class="block text-sm font-medium leading-6 text-foreground">{{ label }}{{ meta.required ? '*' : '' }}</label>
-    <div class="relative mt-2 pb-2">
-      <textarea
-        :id="name"
-        :cols="cols"
-        :maxlength="maxlength"
-        :name="name"
-        v-model="value"
-        :disabled="disabled"
-        @blur="handleBlur"
-        @focus="setTouched(true)"
-        @change="handleChange"
-        class="bg-background block resize-none w-full rounded-md border-0 py-1.5 text-foreground shadow-sm ring-1 ring-inset ring-border placeholder:text-foreground/50 focus:ring-1 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
-        :placeholder="placeholder"
-      />
-      <ErrorMessage class="absolute -bottom-2.5 text-xs font-light text-red-600" :name="name" />
-    </div>
-  </div>
-</template>

package/nuxt-base-template/src/components/form/FormToggle.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { ErrorMessage, useField } from 'vee-validate';
-
-const props = defineProps<{
-  disabled?: boolean;
-  label?: string;
-  name: string;
-}>();
-
-const { handleChange, meta, value, setTouched } = useField(() => props.name);
-
-watch(
-  () => value.value,
-  () => {
-    handleChange(value.value);
-    setTouched(true);
-  }
-);
-</script>
-
-<template>
-  <div class="relative mt-3 pb-2">
-    <label v-if="label" :for="name" class="block text-sm font-medium leading-6 text-foreground">{{ label }}{{ meta.required ? '*' : '' }}</label>
-    <BaseToggle v-model:active="value" :disabled="disabled" />
-    <ErrorMessage class="absolute -bottom-2.5 text-xs font-light text-red-600" :name="name" />
-  </div>
-</template>

package/nuxt-base-template/src/components/modal/Modal.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { twMerge } from 'tailwind-merge';
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-const props = withDefaults(
-  defineProps<{
-    show: boolean;
-    showInner: boolean;
-    backgroundColor?: string;
-    size?: 'auto' | 'sm' | 'md' | 'lg';
-  }>(),
-  {
-    backgroundColor: '#FFF',
-    size: 'auto',
-  }
-);
-
-const emit = defineEmits<{
-  (event: 'cancel'): void;
-}>();
-
-const attributes = useAttrs() as { class: string };
-const sizeClasses: Record<typeof props.size, string> = {
-  auto: 'w-4/5 md:w-auto',
-  sm: 'w-4/5 md:w-1/4',
-  md: 'w-4/5 md:w-3/6',
-  lg: 'w-4/5 md:w-4/5',
-};
-const defaultClasses = 'duration-200 w-full overflow-hidden rounded-[20px] p-4 bg-[--bg-color] bg-background flex flex-col gap-4';
-const classes = twMerge(defaultClasses, sizeClasses[props.size], attributes?.class);
-</script>
-
-<template>
-  <div class="relative z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true" :style="`--bg-color: ${props.backgroundColor};`">
-    <TransitionFade>
-      <div v-show="show" class="fixed inset-0 bg-background/30 backdrop-blur-sm transition-opacity flex justify-center items-center" @click="emit('cancel')">
-        <TransitionFade class="w-full flex justify-center">
-          <div v-show="showInner" :class="classes" @click.stop>
-            <slot></slot>
-          </div>
-        </TransitionFade>
-      </div>
-    </TransitionFade>
-  </div>
-</template>

package/nuxt-base-template/src/components/modal/ModalConfirm.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import type { ModalContext } from '~/composables/use-modal';
-
-const props = defineProps<{
-  context: ModalContext<{
-    cancelText: string;
-    confirmColor?: 'primary' | 'secondary' | 'green' | 'yellow' | 'lightprimary' | 'danger';
-    confirmText: string;
-    text: string;
-    title: string;
-  }>;
-}>();
-const { close } = useModal();
-</script>
-
-<template>
-  <Modal class="p-10 relative" :show="context.show" :show-inner="context.showInner" :size="context.size" @cancel="context.closable ? close() : null">
-    <div class="flex items-center justify-center mb-2">
-      <div class="font-semibold text-xl text-foreground">
-        {{ context?.data?.title }}
-      </div>
-      <button class="absolute top-5 right-5" @click="close()">
-        <span class="i-bi-x text-2xl hover:text-primary-500 duration-200"></span>
-      </button>
-    </div>
-    <div class="mb-5 text-foreground">
-      {{ context?.data?.text }}
-    </div>
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
-      <BaseButton appearance="outline" color="primary" @click="context?.confirm?.(false)">
-        {{ context?.data?.cancelText || 'Abbrechen' }}
-      </BaseButton>
-      <BaseButton :color="context?.data?.confirmColor || 'primary'" @click="context?.confirm?.(true)">
-        {{ context?.data?.confirmText || 'Ok' }}
-      </BaseButton>
-    </div>
-  </Modal>
-</template>

package/nuxt-base-template/src/components/modal/ModalContainer.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const { activeModal } = useModal();
-</script>
-
-<template>
-  <component :is="activeModal.component" v-if="activeModal" :context="activeModal" />
-</template>

package/nuxt-base-template/src/components/modal/ModalInfo.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { ModalContext } from '~/composables/use-modal';
-
-const props = defineProps<{ context: ModalContext<{ text: string; title: string }> }>();
-const { close } = useModal();
-</script>
-
-<template>
-  <Modal class="p-10 relative" :show="context.show" :show-inner="context.showInner" :size="context.size" @cancel="context.closable ? close() : null">
-    <div class="flex items-center justify-center mb-2">
-      <div class="font-semibold text-xl text-foreground">
-        {{ context?.data?.title }}
-      </div>
-      <button class="absolute top-5 right-5" @click="close()">
-        <span class="i-bi-x text-2xl hover:text-primary-500 duration-200"></span>
-      </button>
-    </div>
-    <div class="text-center text-foreground mb-6">
-      {{ context?.data?.text }}
-    </div>
-  </Modal>
-</template>

package/nuxt-base-template/src/components/modal/ModalShare.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import type { ModalContext } from '~/composables/use-modal';
-import SocialMediaBubble from '~/components/SocialMediaBubble.vue';
-
-const props = defineProps<{ context: ModalContext<{ link: string; name: string }> }>();
-const { close } = useModal();
-const url = ref<string>('');
-
-onMounted(() => {
-  url.value = props.context.data?.link ? props.context.data?.link : window.location.href;
-});
-
-const copyUrl = () => {
-  useClipboard({ source: url.value }).copy();
-  useNotification().notify({ type: 'success', title: 'Erfolgreich', text: 'Link wurde erfolgreich kopiert!' });
-};
-
-const shareWith = (type: 'mail' | 'whatsapp' | 'facebook' | 'linkedin' | 'twitter') => {
-  switch (type) {
-    case 'mail':
-      open(`mailto:?subject=${props.context.data?.name}&body=${encodeURIComponent(url.value)}`, '_blank');
-      break;
-    case 'whatsapp':
-      open(`https://api.whatsapp.com/send/?text=${encodeURIComponent(url.value)}`, '_blank');
-      break;
-    case 'facebook':
-      open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url.value)}`, '_blank');
-      break;
-    case 'linkedin':
-      open(`https://www.linkedin.com/shareArticle?url=${encodeURIComponent(url.value)}`, '_blank');
-      break;
-    case 'twitter':
-      open(`https://twitter.com/share?url=${encodeURIComponent(url.value)}`, '_blank');
-      break;
-  }
-};
-</script>
-
-<template>
-  <Modal class="p-10 relative" :show="context.show" :show-inner="context.showInner" :size="context.size" @cancel="context.closable ? close() : null">
-    <div class="flex items-center justify-center mb-4">
-      <div class="font-semibold text-xl text-foreground">Teilen</div>
-      <button class="absolute top-5 right-5" @click="close()">
-        <span class="i-bi-x text-2xl hover:text-primary-500"></span>
-      </button>
-    </div>
-    <div class="text-center text-foreground">
-      <div class="flex justify-around max-w-md mx-auto gap-3 py-2 mb-5 overflow-x-scroll">
-        <SocialMediaBubble title="E-Mail" bg-color="#bbbbbb" icon="i-bi-envelope" @click="shareWith('mail')" />
-        <SocialMediaBubble title="Whatsapp" bg-color="#25d366" icon="i-bi-whatsapp" @click="shareWith('whatsapp')" />
-        <SocialMediaBubble title="Facebook" bg-color="#3b5998" icon="i-bi-facebook" @click="shareWith('facebook')" />
-        <SocialMediaBubble title="LinkedIn" bg-color="#0a66c2" icon="i-bi-linkedin" @click="shareWith('linkedin')" />
-        <SocialMediaBubble title="X / Twitter" bg-color="#000000" icon="i-bi-twitter-x" @click="shareWith('twitter')" />
-      </div>
-      <div class="flex items-center gap-3 justify-between p-3 border border-border rounded-lg">
-        <span class="text-ellipsis overflow-hidden">
-          {{ url }}
-        </span>
-        <BaseButton size="sm" @click="copyUrl()"> Kopieren </BaseButton>
-      </div>
-    </div>
-  </Modal>
-</template>

package/nuxt-base-template/src/components/notification/Notification.vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  title: string;
-  text?: string;
-  duration: number;
-  type: 'success' | 'error' | 'warning' | 'info';
-}>();
-
-const emit = defineEmits<{
-  (event: 'close'): void;
-}>();
-
-const process = ref(100);
-let durationLeft = props.duration - (500 + 130);
-onMounted(() => {
-  const interval = setInterval(() => {
-    durationLeft -= 30;
-    process.value = (durationLeft / props.duration) * 100;
-  }, 30);
-  setTimeout(() => {
-    clearInterval(interval);
-    emit('close');
-  }, props.duration);
-});
-
-const icon: Record<typeof props.type, string> = {
-  success: 'i-bi-check-circle',
-  error: 'i-bi-exclamation-circle',
-  warning: 'i-bi-exclamation-triangle',
-  info: 'i-bi-info-circle',
-};
-
-const accentColor: Record<typeof props.type, string> = {
-  success: '#059669',
-  error: '#DC2626',
-  warning: '#D97706',
-  info: '#3B82F6',
-};
-</script>
-
-<template>
-  <div
-    :style="`--accent-color: ${accentColor[props.type]}`"
-    class="pointer-events-auto relative w-full max-w-sm overflow-hidden rounded-lg bg-white dark:bg-gray-950 shadow-lg ring-1 ring-black ring-opacity-5 z-[99999px]"
-  >
-    <div
-      :style="{
-        width: `${process}%`
-      }"
-      class="bg-[--accent-color] h-[5px] duration-100 transition-[width] w-[width] absolute bottom-0"
-    ></div>
-    <div class="p-4">
-      <div class="flex items-start">
-        <div class="flex-shrink-0">
-          <span :class="icon[props.type]" class="h-6 w-6 text-[--accent-color]"></span>
-        </div>
-        <div class="ml-3 w-0 flex-1 pt-0.5">
-          <p class="text-sm font-semibold text-gray-900 dark:text-white">
-            {{ props.title }}
-          </p>
-          <p v-if="props.text" class="mt-1 text-sm text-gray-500 dark:text-white">
-            {{ props.text }}
-          </p>
-        </div>
-        <div class="ml-4 flex flex-shrink-0">
-          <button
-            type="button"
-            class="inline-flex rounded-md bg-white text-gray-400 dark:bg-gray-100 dark:text-white hover:text-gray-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
-            @click="emit('close')"
-          >
-            <span class="sr-only">Close</span>
-            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path
-                d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/nuxt-base-template/src/components/notification/NotificationContainer.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-const { notifications, remove } = useNotification();
-</script>
-
-<template>
-  <div aria-live="assertive" class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-[99999]">
-    <TransitionGroup tag="div" name="list" class="flex w-full flex-col items-center space-y-4 sm:items-end">
-      <Notification
-        v-for="notification in notifications"
-        :key="notification.uuid"
-        :text="notification.text"
-        :title="notification.title"
-        :type="notification.type"
-        :duration="notification.duration!"
-        @close="remove(notification.uuid)"
-      />
-    </TransitionGroup>
-  </div>
-</template>
-
-<style>
-.list-move,
-  /* apply transition to moving elements */
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.5s ease;
-}
-
-.list-enter-from,
-.list-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-/* ensure leaving items are taken out of layout flow so that moving
-   animations can be calculated correctly. */
-.list-leave-active {
-  position: absolute;
-}
-</style>

package/nuxt-base-template/src/components/pwa/pwa-install-banner.vue

@@ -1,224 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    addHomeButtonLabel?: string;
-    body?: string;
-    buttonLabel?: string;
-    closePrompt?: string;
-    debug?: boolean;
-    delay?: number;
-    iosBackgroundColor?: string;
-    iosBackgroundColorDark?: string;
-    iosBorderColor?: string;
-    iosBorderColorDark?: string;
-    iosButtonColoDark?: string;
-    iosButtonColor?: string;
-    iosOverlayColor?: string;
-    iosOverlayColorDark?: string;
-    iosTextColor?: string;
-    iosTextColorDark?: string;
-    iosTitleColor?: string;
-    iosTitleColorDark?: string;
-    title?: string;
-  }>(),
-  {
-    addHomeButtonLabel: '2) Drücken Sie auf "Zum Home-Bildschirm".',
-    body: 'Diese Website verfügt über eine App-Funktionalität. Fügen Sie sie zu Ihrem Startbildschirm hinzu, um sie im Vollbildmodus und offline zu nutzen.',
-    buttonLabel: '1) Drücken Sie die Schaltfläche "Teilen".',
-    closePrompt: 'Abbrechen',
-    debug: false,
-
-    delay: 1000,
-    iosBackgroundColor: 'rgba(255, 255, 255, 0.9)',
-
-    iosBackgroundColorDark: 'rgba(65, 65, 65, 0.7)',
-    iosBorderColor: 'rgba(60, 60, 67, 0.29)',
-
-    iosBorderColorDark: 'rgba(140, 140, 140, 0.7)',
-    iosButtonColoDark: 'rgba(9, 132, 255, 1)',
-
-    iosButtonColor: 'rgba(0, 85, 179, 1)',
-    iosOverlayColor: 'rgba(10, 10, 10, 0.5)',
-
-    iosOverlayColorDark: 'rgba(10, 10, 10, 0.5)',
-    iosTextColor: 'rgba(60, 60, 67, 0.6)',
-
-    iosTextColorDark: 'rgba(235, 235, 245, 0.6)',
-    iosTitleColor: 'rgba(0, 0, 0, 1)',
-
-    iosTitleColorDark: 'rgba(255, 255, 255, 1)',
-    title: 'Zum Startbildschirm hinzufügen',
-  }
-);
-
-const cssVariables = [
-  `--ios-overlay: ${props.iosOverlayColor}`,
-  `--ios-overlay-dark: ${props.iosOverlayColorDark}`,
-  `--ios-background: ${props.iosBackgroundColor}`,
-  `--ios-background-dark: ${props.iosBackgroundColorDark}`,
-  `--ios-button: ${props.iosButtonColor}`,
-  `--ios-button-dark: ${props.iosButtonColor}`,
-  `--ios-border: ${props.iosBorderColor}`,
-  `--ios-border-dark: ${props.iosBorderColorDark}`,
-  `--ios-title: ${props.iosTitleColor}`,
-  `--ios-title-dark: ${props.iosTitleColorDark}`,
-  `--ios-text: ${props.iosTextColor}`,
-  `--ios-text-dark: ${props.iosTextColorDark}`,
-].join(';');
-
-const HomeIcon = defineComponent({
-  render: () =>
-    h('svg', { fill: 'currentColor', viewBox: '0 0 578 584' }, [
-      h('path', {
-        'clip-rule': 'evenodd',
-        d: 'M101 35l19-1h333c12 0 23 0 35 3 17 3 34 12 44 27 13 16 16 38 16 58v329c0 19 0 39-8 57a65 65 0 0 1-37 37c-18 7-38 7-57 7H130c-21 1-44 0-63-10-14-7-25-20-30-34-6-15-8-30-8-45V121c1-21 5-44 19-61 13-16 33-23 53-25m7 46c-10 1-19 6-24 14-7 8-9 20-9 31v334c0 12 2 25 10 34 9 10 23 12 35 12h336c14 1 30-3 38-15 6-9 8-20 8-31V125c0-12-2-24-10-33-9-9-22-12-35-12H121l-13 1z',
-        'fill-rule': 'evenodd',
-      }),
-      h('path', {
-        'clip-rule': 'evenodd',
-        d: 'M271 161c9-11 31-10 38 4 3 5 3 11 3 17v87h88c7 0 16 1 21 7 6 6 7 14 6 22a21 21 0 0 1-10 14c-5 4-11 5-17 5h-88v82c0 7-1 15-6 20-10 10-29 10-37-2-3-6-4-13-4-19v-81h-87c-8-1-17-3-23-9-5-6-6-15-4-22a21 21 0 0 1 11-14c6-3 13-3 19-3h84v-88c0-7 1-14 6-20z',
-        'fill-rule': 'evenodd',
-      }),
-    ]),
-});
-
-const ShareIcon = defineComponent({
-  render: () =>
-    h('svg', { fill: 'currentColor', viewBox: '0 0 566 670' }, [
-      h('path', {
-        'clip-rule': 'evenodd',
-        d: 'M255 12c4-4 10-8 16-8s12 3 16 8l94 89c3 4 6 7 8 12 2 6 0 14-5 19-7 8-20 9-28 2l-7-7-57-60 2 54v276c0 12-10 22-22 22-12 1-24-10-23-22V110l1-43-60 65c-5 5-13 8-21 6a19 19 0 0 1-16-17c-1-7 2-13 7-18l95-91z',
-        'fill-rule': 'evenodd',
-      }),
-      h('path', {
-        'clip-rule': 'evenodd',
-        d: 'M43 207c16-17 40-23 63-23h83v46h-79c-12 0-25 3-33 13-8 9-10 21-10 33v260c0 13 0 27 6 38 5 12 18 18 30 19l14 1h302c14 0 28 0 40-8 11-7 16-21 16-34V276c0-11-2-24-9-33-8-10-22-13-34-13h-78v-46h75c13 0 25 1 37 4 16 4 31 13 41 27 11 17 14 37 14 57v280c0 20-3 41-15 58a71 71 0 0 1-45 27c-11 2-23 3-34 3H109c-19-1-40-4-56-15-14-9-23-23-27-38-4-12-5-25-5-38V270c1-22 6-47 22-63z',
-        'fill-rule': 'evenodd',
-      }),
-    ]),
-});
-
-const showBanner = ref(false);
-
-watch(
-  () => showBanner.value,
-  () => {
-    if (showBanner.value) {
-      // Disable scrolling of background
-      document.body.style.overflowY = 'hidden';
-    } else {
-      // Deactivate scrolling of background
-      document.body.style.overflowY = '';
-    }
-  }
-);
-
-interface BeforeInstallPromptEvent {
-  prompt: () => void;
-}
-const { storagePrefix } = useRuntimeConfig().public;
-const deferredPrompt = ref<BeforeInstallPromptEvent | null>();
-
-const cancelCookie = () => useCookie(`${storagePrefix}_pwa_prompt_canceled`, { default: () => false });
-
-function cancel() {
-  cancelCookie().value = true;
-  showBanner.value = false;
-}
-
-function deviceCheck() {
-  const isiOS = /iphone|ipad|ipod/.test(window.navigator.userAgent.toLowerCase());
-  const isiPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints >= 2;
-  const isStandalone = 'standalone' in window.navigator && window.navigator.standalone;
-
-  return (isiOS || isiPadOS) && !isStandalone;
-}
-
-function reactivate() {
-  cancelCookie().value = false;
-  showBanner.value = true;
-}
-
-function showInAppInstallPromotion() {
-  if (deferredPrompt.value) {
-    deferredPrompt.value.prompt();
-  }
-}
-
-onMounted(() => {
-  if (!cancelCookie().value) {
-    showBanner.value = deviceCheck();
-  }
-
-  // This variable will save the event for later use.
-  let deferredPrompt;
-  window.addEventListener('beforeinstallprompt', (e) => {
-    // Prevents the default mini-infobar or install dialog from appearing on mobile
-    e.preventDefault();
-    // Save the event because you'll need to trigger it later.
-    deferredPrompt = e;
-    // Show your customized install prompt for your PWA
-    // Your own UI doesn't have to be a single element, you
-    // can have buttons in different locations, or wait to prompt
-    // as part of a critical journey.
-    showInAppInstallPromotion();
-  });
-});
-
-defineExpose({
-  reactivate,
-});
-</script>
-
-<template>
-  <Transition
-    enter-active-class="ease-out duration-500 delay-500"
-    enter-from-class="translate-y-full"
-    enter-to-class="translate-x-0"
-    leave-active-class="ease-in duration-500"
-    leave-from-class="translate-x-0"
-    leave-to-class="translate-y-full"
-  >
-    <div v-show="showBanner" :style="cssVariables" class="bottom-0 w-full fixed !z-[9998] p-2 max-w-md mx-auto">
-      <div class="bg-[var(--ios-background)] backdrop-blur-sm overflow-hidden dark:bg-[var(--ios-background-dark)] rounded-lg">
-        <div class="flex justify-between border-b border-[var(--ios-border)] dark:border-[var(--ios-border-dark)]">
-          <h4 class="text-[var(--ios-title)] dark:text-[var(--ios-title-dark)] text-md p-4">
-            {{ props.title }}
-          </h4>
-          <button class="text-[var(--ios-button)] dark:text-[var(--ios-button-dark)] text-base p-4" @click="cancel()">
-            {{ props.closePrompt }}
-          </button>
-        </div>
-        <div class="px-8 py-4">
-          <p class="text-[var(--ios-text)] dark:text-[var(--ios-text-dark)] text-center text-sm border-b px-4 pb-4 border-[var(--ios-border)] dark:border-[var(--ios-border-dark)]">
-            {{ props.body }}
-          </p>
-          <div class="flex flex-col gap-4 p-4 pt-8">
-            <div class="flex justify-start items-center gap-6">
-              <ShareIcon class="h-8 w-auto text-[var(--ios-button)] dark:text-[var(--ios-button-dark)]" />
-              <p class="text-sm text-left text-[var(--ios-text)] dark:text-[var(--ios-text-dark)]">
-                {{ props.buttonLabel }}
-              </p>
-            </div>
-            <div class="flex justify-start items-center gap-6">
-              <HomeIcon class="h-8 w-auto text-[var(--ios-button)] dark:text-[var(--ios-button-dark)]" />
-              <p class="text-sm text-left text-[var(--ios-text)] dark:text-[var(--ios-text-dark)]">
-                {{ props.addHomeButtonLabel }}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Transition>
-  <Transition
-    enter-active-class="ease-out duration-1000"
-    enter-from-class="opacity-0"
-    enter-to-class="opacity-100"
-    leave-active-class="ease-in duration-1000"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-  >
-    <div v-show="showBanner" :style="cssVariables" class="absolute inset-0 bg-black/50 !z-[9997] min-h-screen w-full"></div>
-  </Transition>
-</template>