create-nuxt-base 0.2.1 → 0.2.3

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",
@@ -27,7 +27,7 @@
   "dependencies": {
     "@egoist/tailwindcss-icons": "1.7.4",
     "@iconify-json/bi": "1.1.23",
-    "@lenne.tech/nuxt-base": "3.4.0",
+    "@lenne.tech/nuxt-base": "3.7.0",
     "@nuxt/image": "1.3.0",
     "@vee-validate/yup": "4.12.5",
     "@vueuse/core": "10.7.2",
@@ -46,16 +46,16 @@
     "@nuxtjs/google-fonts": "3.1.3",
     "@nuxtjs/plausible": "0.2.4",
     "@nuxtjs/sitemap": "5.1.0",
-    "@nuxtjs/tailwindcss": "6.11.2",
+    "@nuxtjs/tailwindcss": "6.11.4",
     "@playwright/test": "1.41.2",
     "@tailwindcss/forms": "0.5.7",
     "@tailwindcss/typography": "0.5.10",
-    "@types/node": "20.11.16",
-    "@vitejs/plugin-vue": "5.0.3",
+    "@types/node": "20.11.19",
+    "@vitejs/plugin-vue": "5.0.4",
     "@vue/test-utils": "2.4.4",
     "eslint": "8.56.0",
     "jsdom": "24.0.0",
-    "nuxt": "3.10.0",
+    "nuxt": "3.10.2",
     "nuxt-simple-robots": "4.0.0-rc.14",
     "ts-loader": "9.5.1",
     "typescript": "5.3.3",

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

@@ -1,8 +1,7 @@
 <template>
-  <NuxtLayout>
-    <ModalContainer />
-    <NotificationContainer />
-    <BaseContextMenuContainer />
-    <NuxtPage />
-  </NuxtLayout>
-</template>
+  <div>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>

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.1",
+  "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>