create-nuxt-base 0.1.23 → 0.2.0

package/nuxt-base-template/src/composables/use-notification.ts

@@ -18,7 +18,7 @@ export function useNotification() {
   };
 
   const remove = (uuid: string) => {
-    notifications.value = notifications.value.filter(n => n.uuid !== uuid);
+    notifications.value = notifications.value.filter((n) => n.uuid !== uuid);
   };
 
   return {
@@ -26,4 +26,4 @@ export function useNotification() {
     remove,
     notifications,
   };
-}
+}

package/nuxt-base-template/src/composables/use-share.ts

@@ -1,5 +1,5 @@
-import { ModalShare } from '#components';
 import { useModal } from '~/composables/use-modal';
+import ModalShare from '~/components/ModalShare.vue';
 
 export function useShare() {
   const route = useRoute();
@@ -12,11 +12,11 @@ export function useShare() {
         text: text ?? window.location.origin,
       });
     } else {
-      useModal().open({ component: ModalShare, size: 'md', data: { link: url ?? window.location.origin } });
+      useModal().open({ component: ModalShare, size: 'md', data: { link: url ?? window.location.origin, name: window.name } });
     }
   }
 
   return {
     share,
   };
-}
+}

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

@@ -7,7 +7,8 @@ console.error(props.error);
 const debugWord = ref<string>('');
 const { current } = useMagicKeys();
 
-watch(() => current.values(),
+watch(
+  () => current.values(),
   () => {
     if (current.values().next().value === 'escape') {
       debugWord.value = '';
@@ -21,7 +22,7 @@ watch(() => current.values(),
     if (current.values().next().value && !debugWord.value.includes(current.values().next().value)) {
       debugWord.value += current.values().next().value;
     }
-  },
+  }
 );
 
 const handleError = () => clearError({ redirect: '/' });
@@ -31,23 +32,18 @@ const handleError = () => clearError({ redirect: '/' });
   <NuxtLayout>
     <div class="w-full min-h-screen flex flex-col justify-center items-center">
       <div class="w-full flex flex-col items-center mb-20">
-        <h1 class="text-[12rem] font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-primary-400">
-          Oops!
-        </h1>
+        <h1 class="text-[12rem] font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-primary-400">Oops!</h1>
         <h2 v-if="error?.statusCode" class="text-3xl text-gray-600">
           {{ error?.statusCode }}
         </h2>
       </div>
 
       <pre v-if="debugWord === 'debug'" class="w-full max-w-3xl mb-5 mx-auto bg-black/80 text-white font-mono p-2 rounded-lg overflow-x-scroll">
-      {{
-        { error }
-      }}
-    </pre>
-
-      <BaseButton color="primary" appearance="outline" @click="handleError">
-        Zurück zur Startseite
-      </BaseButton>
+      {{ { error } }}
+    </pre
+      >
+
+      <BaseButton color="primary" appearance="outline" @click="handleError"> Zurück zur Startseite </BaseButton>
     </div>
   </NuxtLayout>
-</template>
+</template>

package/nuxt-base-template/src/layouts/default.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useGlobalMutationLoading, useGlobalQueryLoading } from '@vue/apollo-composable';
+
+const queryLoading = useGlobalQueryLoading();
+const mutationLoading = useGlobalMutationLoading();
+</script>
+
+<template>
+  <div>
+    <NuxtLoadingIndicator :loading="queryLoading || mutationLoading" />
+    <slot></slot>
+  </div>
+</template>

package/nuxt-base-template/src/middleware/auth.global.ts

@@ -1,8 +1,8 @@
 export default defineNuxtRouteMiddleware((to, from) => {
-  const { accessToken } = useAuthState();
+  const { accessTokenState } = useAuthState();
 
   if (to.fullPath.startsWith('/app')) {
-    if (!accessToken?.value) {
+    if (!accessTokenState?.value) {
       return navigateTo('/auth/login');
     }
   }

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

@@ -1,10 +1,35 @@
+<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>
-    <HelloWorld />
+    <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/nuxt-base-template/src/plugins/auth.server.ts

@@ -0,0 +1,72 @@
+import { callWithNuxt, defineNuxtPlugin, useNuxtApp, useRuntimeConfig } from 'nuxt/app';
+import { ofetch } from 'ofetch';
+
+export default defineNuxtPlugin({
+  enforce: 'post',
+  name: 'auth-server',
+  async setup() {
+    const _nuxt = useNuxtApp();
+    const config = await callWithNuxt(_nuxt, useRuntimeConfig);
+    const { accessTokenState, currentUserState, refreshTokenState } = await callWithNuxt(_nuxt, useAuthState);
+    const { clearSession, getDecodedAccessToken, isTokenExpired, setCurrentUser, setTokens } = await callWithNuxt(_nuxt, useAuth);
+    const payload = accessTokenState.value ? getDecodedAccessToken(accessTokenState.value) : null;
+
+    if (!accessTokenState.value || !refreshTokenState.value || currentUserState.value) {
+      return;
+    }
+
+    let token = accessTokenState.value;
+    if (isTokenExpired(accessTokenState.value)) {
+      const refreshTokenResult = await ofetch(config.public.host, {
+        body: JSON.stringify({
+          query: 'mutation refreshToken {refreshToken {token, refreshToken}}',
+          variables: {},
+        }),
+        headers: {
+          Authorization: `Bearer ${refreshTokenState.value}`,
+        },
+        method: 'POST',
+      }).catch((err) => {
+        console.error('2.auth.server.ts::refreshToken::catch', err.data);
+        clearSession();
+        navigateTo('/auth/login');
+      });
+
+      const data = refreshTokenResult?.data?.refreshToken;
+      if (data) {
+        setTokens(data.token, data.refreshToken);
+        token = data?.token;
+      } else {
+        clearSession();
+        await navigateTo('/auth/login');
+      }
+    }
+
+    if (token && payload?.id) {
+      const userResult = await ofetch(config.public.host, {
+        body: JSON.stringify({
+          query: 'query getUser($id: String!){' + 'getUser(id: $id){' + 'id ' + 'avatar ' + 'firstName ' + 'lastName ' + 'email ' + 'gender ' + 'roles ' + '}}',
+          variables: {
+            id: payload.id,
+          },
+        }),
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        method: 'POST',
+      }).catch((err) => {
+        console.error('2.auth.server.ts::getUser::catch', err);
+      });
+
+      if (userResult?.errors) {
+        clearSession();
+        navigateTo('/auth/login');
+        return;
+      }
+
+      if (userResult?.data) {
+        setCurrentUser(userResult?.data?.getUser);
+      }
+    }
+  },
+});

package/nuxt-base-template/src/plugins/form.plugin.ts

@@ -0,0 +1,21 @@
+import { setLocale } from 'yup';
+
+export default defineNuxtPlugin(async (_nuxtApp) => {
+  setLocale({
+    // use constant translation keys for messages without values
+    mixed: {
+      required: 'Dieses Feld ist erforderlich.',
+      default: 'Dieses Feld ist ungültig.',
+      notType: 'Dieses Feld ist ungültig.',
+    },
+    string: {
+      email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',
+    },
+  });
+
+  // Custom validation rules
+  // https://github.com/jquense/yup?tab=readme-ov-file#addmethodschematype-schema-name-string-method--schema-void
+  // addMethod(string, 'plz', () => {
+  //     return
+  // });
+});

package/nuxt-base-template/src/plugins/pwa.plugin.ts

@@ -0,0 +1,110 @@
+export default defineNuxtPlugin(async (_nuxtApp) => {
+  const applicationServerKey = useRuntimeConfig().public.webPushKey as string;
+  const permissionState = ref<PermissionState>('prompt');
+  const subscription = ref<PushSubscription | null>(null);
+
+  if (process.client) {
+    const iosPWASplash = (await import('ios-pwa-splash')).default;
+    iosPWASplash('/notification.png', '#FFFFFF');
+  }
+
+  async function subscribe() {
+    const sw = await navigator.serviceWorker.ready;
+    const push = await sw.pushManager.subscribe({
+      applicationServerKey,
+      userVisibleOnly: true,
+    });
+    await refreshSubscription();
+    await refreshPermissionState();
+    const body = {
+      payload: push,
+    };
+    try {
+      await useAuthFetch('/web-push/subscribe', {
+        baseURL: process.env.API_URL,
+        body,
+        method: 'POST',
+      });
+    } catch (error) {}
+  }
+
+  async function refreshPermissionState() {
+    try {
+      const sw = await navigator.serviceWorker.ready;
+      permissionState.value = await sw.pushManager.permissionState({
+        applicationServerKey,
+        userVisibleOnly: true,
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  async function refreshSubscription() {
+    try {
+      const sw = await navigator.serviceWorker.ready;
+      subscription.value = await sw.pushManager.getSubscription();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  async function unsubscribe() {
+    if (subscription.value) {
+      await subscription.value.unsubscribe();
+      const body = {
+        payload: subscription.value,
+      };
+      await refreshPermissionState();
+      try {
+        await useAuthFetch('/web-push/', {
+          baseURL: process.env.API_URL,
+          body,
+          method: 'DELETE',
+        });
+      } catch (error) {}
+      subscription.value = null;
+    }
+  }
+
+  const route = useRoute();
+  const pwa = ref(false);
+  const isPwa = computed(() => route.query.standalone === 'true' || pwa.value);
+
+  if (process.client) {
+    if (window && window.matchMedia && document && window.matchMedia('(display-mode: standalone)').matches) {
+      if (navigator && navigator.serviceWorker) {
+        await refreshSubscription();
+        await refreshPermissionState();
+      }
+      pwa.value = true;
+      document.body.classList.add('select-none', 'overscroll-y-none', 'no-scrollbar', 'bg-rm-gray-1');
+    } else {
+      pwa.value = false;
+      document.body.classList.remove('select-none', 'overscroll-y-none', 'no-scrollbar', 'bg-rm-gray-1');
+    }
+  }
+
+  useHead({
+    htmlAttrs: { class: isPwa.value ? 'pwa' : '' },
+    meta: [
+      {
+        content: 'width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no',
+        hid: 'viewport',
+        name: 'viewport',
+      },
+    ],
+  });
+
+  return {
+    provide: {
+      pwa: {
+        isPwa: () => isPwa.value,
+        permissionState,
+        subscribe,
+        subscription,
+        unsubscribe,
+      },
+    },
+  };
+});

package/nuxt-base-template/src/tests/init.test.ts

@@ -9,4 +9,4 @@ describe('Initialization', async () => {
   test('Init test', () => {
     // ... write tests here
   });
-});
+});

package/nuxt-base-template/tailwind.config.js

@@ -3,11 +3,10 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons');
 const typography = require('@tailwindcss/typography');
 const forms = require('@tailwindcss/forms');
-const formkit = require('@formkit/themes/tailwindcss');
+const plugin = require('tailwindcss/plugin');
 
 module.exports = {
-  darkMode: "class",
-  content: ['./formkit-theme.js'],
+  darkMode: 'class',
   theme: {
     // fontFamily: {
     //   montserrat: ['Montserrat'],
@@ -15,34 +14,45 @@ module.exports = {
     //   serif: ['Work Sans', 'Montserrat', ...defaultTheme.fontFamily.serif],
     // },
     extend: {
-      // colors: {
-      //   primary: {
-      //     DEFAULT: '#57B39A',
-      //     50: '#f3faf7',
-      //     100: '#d6f1e7',
-      //     200: '#ade2d0',
-      //     300: '#7cccb3',
-      //     400: '#57b39a',
-      //     500: '#37957d',
-      //     600: '#2a7765',
-      //     700: '#256052',
-      //     800: '#224d45',
-      //     900: '#20413a',
-      //     950: '#0d2621',
-      //   },
-      // }
+      colors: {
+        primary: {
+          DEFAULT: '#57B39A',
+          50: '#f3faf7',
+          100: '#d6f1e7',
+          200: '#ade2d0',
+          300: '#7cccb3',
+          400: '#57b39a',
+          500: '#37957d',
+          600: '#2a7765',
+          700: '#256052',
+          800: '#224d45',
+          900: '#20413a',
+          950: '#0d2621',
+        },
+        background: '#FFFFFF',
+        foreground: '#000000',
+        border: 'hsl(0 0% 0% / 0.5)',
+        hover: 'hsl(0 0% 100% / 0.2)',
+        active: 'hsl(0 0% 100% / 0.2)',
+      },
       screens: {
-        '3xl': '2400px'
-      }
-    }
+        '3xl': '2400px',
+      },
+    },
   },
   plugins: [
     typography,
-    formkit,
     forms,
     iconsPlugin({
       // Select the icon collections you want to use
       collections: getIconCollections(['bi']),
     }),
+    plugin(({ addVariant, e }) => {
+      addVariant('pwa', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.pwa .${e(`pwa${separator}${className}`)}`;
+        });
+      });
+    }),
   ],
 };

package/nuxt-base-template/vitest.config.js

@@ -1,5 +1,5 @@
-import vue from '@vitejs/plugin-vue'
-import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
 
 export default defineConfig({
   plugins: [vue()],
@@ -7,4 +7,4 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
   },
-})
+});

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "create-nuxt-base",
-  "version": "0.1.23",
+  "version": "0.2.0",
   "description": "Starter to generate a configured environment with VueJS, Nuxt, Tailwind, Eslint, @lenne.tech/nuxt-base, Unit Tests, Cypress etc.",
   "main": "index.js",
   "bin": {
     "create-nuxt-base": "./index.js"
   },
   "scripts": {
+    "prettier": "prettier \"*.{js,json,yml,md,html,ts}\" .",
+    "format": "npm run prettier -- --write",
     "release": "standard-version && git push --follow-tags origin main",
     "release:minor": "standard-version --release-as minor && git push --follow-tags origin main",
     "release:major": "standard-version --release-as major && git push --follow-tags origin main"

package/nuxt-base-template/formkit-theme.js

@@ -1,137 +0,0 @@
-export default {
-    global: {
-        fieldset: 'max-w-md border border-gray-400 rounded px-2 pb-1',
-        help: 'text-xs text-gray-500 mt-1',
-        inner: 'formkit-disabled:bg-gray-200 formkit-disabled:dark:bg-gray-200 formkit-disabled:cursor-not-allowed formkit-disabled:pointer-events-none rounded-[25px] bg-white formkit-invalid:ring-red',
-        input: 'appearance-none bg-transparent focus:outline-none focus:ring-0 focus:shadow-none dark:text-white',
-        label: 'block mb-1 text-sm text-gray-600 dark:text-white font-semibold text-left',
-        legend: 'font-bold text-sm',
-        loaderIcon: 'inline-flex items-center w-4 text-gray-600 animate-spin',
-        message: 'text-red-500 mb-1 text-xs',
-        messages: 'list-none p-0 mt-1 mb-0 text-left',
-        outer: 'mb-4 formkit-disabled:opacity-50',
-        prefixIcon: 'w-10 flex self-stretch grow-0 shrink-0 rounded-tl rounded-bl border-r border-gray-400 bg-white bg-gradient-to-b from-transparent to-gray-200 [&>svg]:w-full [&>svg]:max-w-[1em] [&>svg]:max-h-[1em] [&>svg]:m-auto',
-        suffixIcon: 'w-7 pr-3 flex self-stretch grow-0 shrink-0 [&>svg]:w-full [&>svg]:max-w-[1em] [&>svg]:max-h-[1em] [&>svg]:m-auto'
-    },
-    // Family styles apply to all inputs that share a common family
-    'family:box': {
-        decorator: 'block relative h-3 w-3 mr-2 rounded-full bg-white ring-1 ring-gray-600 formkit-invalid:ring-red peer-checked:ring-primary-500 text-transparent peer-checked:bg-primary-500',
-        decoratorIcon: 'flex p-[3px] w-full h-full absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2',
-        help: 'mb-2 mt-1.5',
-        input: 'absolute w-0 h-0 overflow-hidden opacity-0 pointer-events-none peer',
-        label: '$reset text-sm text-gray-700 mt-1 select-none ps-1',
-        wrapper: 'flex items-start mb-1',
-        inner: '!bg-transparent mt-2 mx-auto',
-    },
-    'family:button': {
-        inner: 'bg-none',
-        input: '$reset inline-flex items-center justify-center bg-primary-400 hover:bg-primary-500 transition-all duration-200 text-white dark:text-gray-100 text-base font-semibold py-2 px-6 rounded-[25px] focus-visible:outline-2 focus-visible:outline-primary-600 focus-visible:outline-offset-2 formkit-disabled:bg-gray-400 formkit-loading:before:w-4 formkit-loading:before:h-4 formkit-loading:before:mr-2 formkit-loading:before:border formkit-loading:before:border-2 formkit-loading:before:border-r-transparent formkit-loading:before:rounded-[25px] formkit-loading:before:border-white formkit-loading:before:animate-spin min-w-[200px] py-2 px-3 text-base',
-        wrapper: 'mb-1',
-        prefixIcon: '$reset block w-4 -ml-2 mr-2 stretch',
-        suffixIcon: '$reset block w-4 ml-2 stretch',
-    },
-    'family:dropdown': {
-        dropdownWrapper: 'my-2 w-full drop-shadow-lg rounded [&::-webkit-scrollbar]:hidden',
-        emptyMessageInner: 'flex items-center justify-center text-sm p-2 text-center w-full text-gray-500 [&>span]:mr-3 [&>span]:ml-0',
-        inner: 'max-w-md relative flex ring-1 formkit-invalid:ring-red ring-gray-400 focus-within:ring-primary-500 focus-within:ring-2 rounded mb-1 formkit-disabled:focus-within:ring-gray-400 formkit-disabled:focus-within:ring-1 [&>span:first-child]:focus-within:text-primary-500',
-        input: 'w-full px-3 py-2',
-        listbox: 'bg-white drop-shadow-lg rounded overflow-hidden',
-        listboxButton: 'flex w-12 self-stretch justify-center mx-auto',
-        listitem: 'pl-7 relative hover:bg-gray-300 data-[is-active="true"]:bg-gray-300 data-[is-active="true"]:aria-selected:bg-primary-600 aria-selected:bg-primary-600 aria-selected:text-white',
-        loaderIcon: 'ml-auto',
-        loadMoreInner: 'flex items-center justify-center text-sm p-2 text-center w-full text-primary-500 formkit-loading:text-gray-500 cursor-pointer [&>span]:mr-3 [&>span]:ml-0',
-        option: 'p-2.5',
-        optionLoading: 'text-gray-500',
-        placeholder: 'p-2.5 text-gray-300',
-        selector: 'flex w-full justify-between items-center [&u]',
-        selectedIcon: 'block absolute top-1/2 left-2 w-3 -translate-y-1/2',
-        selectIcon: 'flex box-content w-4 px-2 self-stretch grow-0 shrink-0 dark:text-white',
-    },
-    'family:text': {
-        inner: 'flex items-center ring-1 ring-gray-400 formkit-invalid:ring-red focus-within:ring-primary-400 focus-within:ring-2 [&>label:first-child]:focus-within:text-primary-500 rounded mb-1',
-        input: 'w-full px-3 py-2 border-none text-base text-gray-700 placeholder-gray-400',
-    },
-    tags: {
-        tag: 'bg-primary text-white rounded-full px-3 flex items-center',
-        tagIcon: 'ms-2 text-lg cursor-pointer',
-        dropdown: 'bg-white ring-2 ring-primary-400 rounded-b-[25px] overflow-hidden',
-        dropdownItem: 'text-base font-normal py-2 px-3 hover:bg-gray-100 hover:text-primary w-full text-start dark:bg-gray-100 dark:text-white dark:hover:text-primary',
-        noItemsFound: 'text-base font-normal py-2 px-3 w-full text-start',
-        inputWrapper: 'formkit-disabled:bg-gray-200 formkit-disabled:cursor-not-allowed formkit-disabled:pointer-events-none rounded-[25px] bg-white flex items-center ring-1 ring-gray-400 formkit-invalid:ring-red focus-within:ring-primary-400 focus-within:ring-2 [&>label:first-child]:focus-within:text-primary-500 focus-within:rounded-b-none mt-2 transition-all duration-200',
-        input: 'w-full px-3 py-2 border-none text-base text-gray-700 placeholder-gray-400',
-        selectIcon: 'dark:text-white'
-    },
-    freeTags: {
-        tag: 'border border-primary formkit-invalid:border-red rounded-full px-3 flex items-center text-gray-600',
-        tagIcon: 'ms-2 text-lg cursor-pointer text-gray-600',
-        inputWrapper: 'formkit-disabled:bg-gray-200 formkit-disabled:cursor-not-allowed formkit-disabled:pointer-events-none rounded-[25px] bg-white flex items-center ring-1 ring-gray-400 formkit-invalid:ring-red focus-within:ring-primary-400 focus-within:ring-2 [&>label:first-child]:focus-within:text-primary-500 mt-2 transition-all duration-200',
-        input: 'w-full px-3 py-2 border-none text-base text-gray-700 placeholder-gray-400',
-        inputIcon: 'i-bi-plus me-2 text-lg text-gray-600',
-        button: 'bg-primary-500 hover:bg-primary-400 text-primary-50 min-w-[200px] py-2 px-3 text-base rounded-full mt-3 disabled:bg-gray-200 disabled:cursor-not-allowed disabled:text-gray-400',
-        suggestionsHeadline: 'text-sm text-gray-600 font-semibold mt-5 mb-3',
-        suggestionsTag: 'border border-primary rounded-full px-3 flex items-center text-gray-600',
-        suggestionsIcon: 'i-bi-plus text-lg text-gray-600 ms-2 cursor-pointer',
-        selectIcon: 'dark:text-white'
-    },
-    image: {
-        placeholder: 'dark:text-white',
-        inner: 'block shadow-none w-full',
-        uploader: 'relative p-4 text-center w-full h-full flex items-center justify-center',
-        input: 'absolute top-0 left-0 right-0 bottom-0 opacity-0 cursor-pointer',
-        fileList: 'p-0',
-        fileItem: 'rounded-[20px] flex items-center h-full',
-        fileItemImage: 'w-28 h-full rounded-[20px] object-cover object-center me-4',
-        fileItemImageName: 'me-4 dark:text-white',
-        fileItemRemove: 'appearance-none bg-none border-none font-bold shadow-none ms-auto cursor-pointer me-4 hover:text-red-500',
-        container: 'h-36 border border-dashed formkit-invalid:border-red border-gray-200 rounded-[20px]',
-    },
-    // Specific styles apply only to a given input type
-    color: {
-        inner: 'flex max-w-[5.5em] w-full formkit-prefix-icon:max-w-[7.5em] formkit-suffix-icon:formkit-prefix-icon:max-w-[10em]',
-        input: '$reset appearance-none w-full cursor-pointer border-none rounded p-0 m-0 bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none',
-        suffixIcon: 'min-w-[2.5em] pr-0 pl-0 m-auto'
-    },
-    file: {
-        fileItem: 'flex items-center text-gray-800 mb-1 last:mb-0',
-        fileItemIcon: 'w-4 mr-2 shrink-0',
-        fileList: 'shrink grow peer px-3 py-2 formkit-multiple:data-[has-multiple="true"]:mb-6',
-        fileName: 'break-all grow text-ellipsis',
-        fileRemove: 'relative z-[2] ml-auto text-[0px] hover:text-red-500 pl-2 peer-data-[has-multiple=true]:text-sm peer-data-[has-multiple=true]:text-primary-500 peer-data-[has-multiple=true]:ml-3 peer-data-[has-multiple=true]:mb-2 formkit-multiple:bottom-[0.15em] formkit-multiple:pl-0 formkit-multiple:ml-0 formkit-multiple:left-[1em] formkit-multiple:formkit-prefix-icon:left-[3.75em]',
-        fileRemoveIcon: 'block text-base w-3 relative z-[2]',
-        inner: 'relative cursor-pointer formkit-multiple:[&>button]:absolute',
-        input: 'cursor-pointer text-transparent absolute top-0 right-0 left-0 bottom-0 opacity-0 z-[2]',
-        noFiles: 'flex w-full items-center px-3 py-2 text-gray-400',
-        noFilesIcon: 'w-4 mr-2'
-    },
-    radio: {
-        decorator: '!w-3 !h-3 rounded-full ring-gray-300',
-        decoratorIcon: 'w-3 !p-[2px]',
-        fieldset: 'border-none !p-0 !m-0 max-w-none !mt-2',
-        options: 'flex flex-row gap-5 w-full',
-        option: '',
-        icon: 'text-md i-bi-eye dark:text-white',
-        legend: 'flex items-center',
-        label: `text-gray-700 font-normal text-[15px] leading-[140%] !mt-1`,
-        wrapper: '!mb-0',
-        inner: '',
-    },
-    search: {
-        suffixIcon: 'dark:text-gray-700'
-    },
-    range: {
-        inner: '$reset flex items-center max-w-md',
-        input: '$reset w-full mb-1 h-2 p-0 rounded-full',
-        prefixIcon: '$reset w-4 mr-1 flex self-stretch grow-0 shrink-0 [&>svg]:max-w-[1em] [&>svg]:max-h-[1em] [&>svg]:m-auto',
-        suffixIcon: '$reset w-4 ml-1 flex self-stretch grow-0 shrink-0 [&>svg]:max-w-[1em] [&>svg]:max-h-[1em] [&>svg]:m-auto'
-    },
-    select: {
-        inner: 'flex relative items-center rounded mb-1 ring-1 ring-gray-400 formkit-invalid:ring-red focus-within:ring-primary-500 focus-within:ring-2 [&>span:first-child]:focus-within:text-primary-500',
-        input: 'w-full pl-3 pr-8 py-2 border-none text-base text-gray-700 placeholder-gray-300 formkit-multiple:p-0 data-[placeholder="true"]:text-gray-400 formkit-multiple:data-[placeholder="true"]:text-inherit appearance-none bg-none',
-        selectIcon: 'flex p-[3px] shrink-0 w-5 mr-2 -ml-[1.5em] h-full pointer-events-none dark:text-text-gray-700',
-        option: 'formkit-multiple:p-3 formkit-multiple:text-sm text-gray-700'
-    },
-    textarea: {
-        inner: 'flex rounded mb-1 ring-1 ring-gray-400 formkit-invalid:ring-red focus-within:ring-primary-400 [&>label:first-child]:focus-within:text-primary-500',
-        input: 'block w-full h-32 px-3 py-3 border-none text-base text-gray-700 placeholder-gray-400 focus:shadow-outline',
-    },
-}

package/nuxt-base-template/formkit.config.js

@@ -1,33 +0,0 @@
-import { de } from '@formkit/i18n';
-import { genesisIcons } from '@formkit/icons';
-import { generateClasses } from '@formkit/themes';
-import formkitTheme from './formkit-theme.js'
-import { addAsteriskPlugin } from '~/forms/plugins/asterisk-plugin';
-import { scrollToErrors } from '~/forms/plugins/scroll-error-plugin';
-import { createInput } from '@formkit/vue';
-import { valueChangesPlugin } from "~/forms/plugins/value-changes-plugin";
-
-import InputImage from "~/forms/inputs/InputImage.vue";
-import InputTags from "~/forms/inputs/InputTags.vue";
-import InputFreeTags from "~/forms/inputs/InputFreeTags.vue";
-import InputCheckbox from "~/forms/inputs/InputCheckbox.vue";
-import InputToggle from "~/forms/inputs/InputToggle.vue";
-
-export default {
-  locales: { de },
-  locale: 'de',
-  plugins: [addAsteriskPlugin, scrollToErrors, valueChangesPlugin],
-  inputs: {
-    image: createInput(InputImage),
-    tags: createInput(InputTags),
-    freeTags: createInput(InputFreeTags),
-    checkbox: createInput(InputCheckbox),
-    toggle: createInput(InputToggle),
-  },
-  icons: {
-    ...genesisIcons,
-  },
-  config: {
-    classes: generateClasses(formkitTheme),
-  },
-};