move some common styling and formkit plugin naming (#73)

* move common styling, add wishlist to errorlayout, add naming to formkitplugins

* adjust indent

assets/css/tailwind.css

@@ -28,4 +28,8 @@ h3 {
 
 h4, h5 {
     @apply text-lg;
-}
+}
+
+#__nuxt {
+    @apply grid min-h-screen grid-rows-[auto_1fr_auto];
+}

components/Error/ErrorLayout.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 const customerStore = useCustomerStore();
 const { loading } = storeToRefs(customerStore);
+
 const { refreshCart } = useCart();
+const { getWishlistProducts } = useWishlist();
 
 customerStore.refreshContext();
 refreshCart();
+
+getWishlistProducts();
 </script>
 
 <template>

formkit.config.ts

@@ -3,6 +3,27 @@ import { de } from '@formkit/i18n';
 import { createAutoAnimatePlugin, createFloatingLabelsPlugin } from '@formkit/addons';
 import '@formkit/addons/css/floatingLabels';
 
+export const plugins = {
+    'autoAnimate': createAutoAnimatePlugin
+    (
+        {
+            duration: 250,
+            easing: 'ease-in-out',
+        },
+        {
+            global: ['outer', 'inner'],
+            form: ['form'],
+            repeater: ['items'],
+        }
+    ),
+    'floatingLabels': createFloatingLabelsPlugin
+    (
+        {
+            useAsDefault: true,
+        }
+    ),
+};
+
 export default {
     iconLoader: (iconName: string) => {
         const getIcon = async (iconkey: string) => {
@@ -63,22 +84,7 @@ export default {
     config: {
         rootClasses,
     },
-    plugins: [
-        createAutoAnimatePlugin(
-            {
-                duration: 250,
-                easing: 'ease-in-out',
-            },
-            {
-                global: ['outer', 'inner'],
-                form: ['form'],
-                repeater: ['items'],
-            },
-        ),
-        createFloatingLabelsPlugin({
-            useAsDefault: true, // defaults to false
-        }),
-    ],
+    plugins: Object.values(plugins),
     props: {
         decoratorIcon: 'check',
     },

layouts/default.vue

@@ -24,7 +24,7 @@ if (route.path !== '/wishlist' && wishlistEnabled) {
 </script>
 
 <template>
-    <NuxtLoadingIndicator />
+    <NuxtLoadingIndicator class="!bg-brand-primary !bg-none" />
     <NuxtRouteAnnouncer />
     <UtilityLoadingSpinner v-if="loading" />
 
@@ -44,13 +44,3 @@ if (route.path !== '/wishlist' && wishlistEnabled) {
     <LayoutFooter v-show="!loading" />
     <CookieBanner />
 </template>
-
-<style>
-#__nuxt {
-    @apply grid min-h-screen grid-rows-[auto_1fr_auto];
-}
-
-.nuxt-loading-indicator {
-    @apply !bg-brand-primary !bg-none;
-}
-</style>