create-nuxt-base 0.1.20 → 0.1.21

package/nuxt-base-template/src/forms/inputs/InputTags.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+interface TagOption {
+  label: string;
+  value: string;
+}
+
+const props = defineProps({
+  context: Object,
+});
+
+const inputRef = ref();
+const inputValue = ref<string>();
+const inputFocus = ref();
+const name = props.context?.name;
+const placeholder = props.context?.attrs?.placeholder;
+const tags = ref<TagOption[]>([]);
+const defaultOptions: TagOption[] = [...props?.context?.attrs?.options] || [];
+const selectOptions = ref<TagOption[]>([...props?.context?.attrs?.options]);
+patch();
+
+function patch() {
+  const values = props.context?._value;
+  if (!values) {
+    return;
+  }
+
+  if (Array.isArray(values)) {
+    for (let item of values) {
+      handleSelect(item);
+    }
+  } else {
+    handleSelect(values);
+  }
+}
+
+function handleSelect(value: string) {
+  const tag = selectOptions.value.find((e) => e.value === value);
+  const included = tags.value?.find((e) => e.value === tag?.value) ?? false;
+
+  if (!tag) {
+    return;
+  }
+
+  if (!included) {
+    tags.value.push(tag);
+    selectOptions.value = defaultOptions.filter((e) => e.value !== tag.value);
+  }
+
+  props.context?.node.input(tags.value.map((e) => e.value));
+  inputValue.value = '';
+}
+
+function handleInput(event: any) {
+  const value = event.target.value.toLowerCase();
+
+  if (!value) {
+    selectOptions.value = defaultOptions.filter((e: TagOption) => !props.context?._value?.includes(e.value));
+  } else {
+    selectOptions.value = selectOptions.value.filter((e: TagOption) => e.label.toLowerCase().includes(value));
+  }
+}
+
+function removeTag(tag: TagOption) {
+  tags.value.splice(tags.value.findIndex((e) => e.value === tag.value), 1);
+  props.context?.node.input(tags.value.map((e) => e.value));
+  selectOptions.value = defaultOptions.filter((e: TagOption) => !props.context?._value?.includes(e.value));
+}
+
+function setFocus() {
+  inputFocus.value = true;
+  inputValue.value = '';
+  selectOptions.value = defaultOptions.filter((e: TagOption) => !props.context?._value?.includes(e.value));
+}
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-row flex-wrap gap-2">
+      <span v-for="tag of tags" :key="tag.value" :class="context?.classes.tag">{{ tag.label }} <span class="i-bi-x" :class="context?.classes.tagIcon" @click="removeTag(tag)"></span> </span>
+    </div>
+    <div v-if="selectOptions.length" class="relative" :class="context?.classes.inputWrapper">
+      <div class="relative w-full flex items-center">
+        <input
+          :id="props.context?.id"
+          ref="inputRef"
+          v-model="inputValue"
+          autocomplete="off"
+          :name="name" type="text" :placeholder="placeholder" :class="context?.classes.input" @focus="setFocus"
+          @blur="inputFocus = false" @input="handleInput"
+        />
+        <span :class="context?.classes.selectIcon" class="formkit-select-icon flex p-[3px] shrink-0 w-5 mr-2 -ml-[1.5em] h-full pointer-events-none formkit-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 7"><path d="M8,6.5c-.13,0-.26-.05-.35-.15L3.15,1.85c-.2-.2-.2-.51,0-.71,.2-.2,.51-.2,.71,0l4.15,4.15L12.15,1.15c.2-.2,.51-.2,.71,0,.2,.2,.2,.51,0,.71l-4.5,4.5c-.1,.1-.23,.15-.35,.15Z" fill="currentColor" /></svg></span>
+      </div>
+      <TransitionFade :start-duration="200" :leave-duration="200">
+        <div
+          v-show="inputFocus && defaultOptions.length"
+          class="absolute right-0 left-0 z-50 h-fit max-h-12 flex flex-col justify-start items-start"
+          :style="`top: ${inputRef?.clientHeight + 1}px`"
+          :class="context?.classes.dropdown"
+        >
+          <div v-if="selectOptions.length" class="w-full">
+            <button v-for="option of selectOptions" :key="option.value" :class="context?.classes.dropdownItem" @click="handleSelect(option.value)">
+              {{ option.label }}
+            </button>
+          </div>
+          <div v-else :class="context?.classes.noItemsFound">
+            Keine Einträge gefunden
+          </div>
+        </div>
+      </TransitionFade>
+    </div>
+  </div>
+</template>

package/nuxt-base-template/src/forms/inputs/InputToggle.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps({
+  context: Object,
+});
+const inputValue = ref(props?.context?._value ?? false);
+
+watch(() => inputValue.value, () => {
+  props.context?.node.input(inputValue.value);
+});
+</script>
+
+<template>
+  <div class="flex justify-between items-center" @click="inputValue = !inputValue">
+    <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': inputValue }">
+      <div class="bg-white w-4 h-4 rounded-full shadow-md transform duration-300 ease-in-out" :class="{ 'translate-x-2': inputValue }"></div>
+    </div>
+  </div>
+</template>

package/nuxt-base-template/src/forms/plugins/asterisk-plugin.ts

@@ -0,0 +1,29 @@
+const isCheckboxAndRadioMultiple = (node: any) => (node.props.type === 'checkbox' || node.props.type === 'radio') && node.props.options;
+
+export function addAsteriskPlugin(node: any) {
+  node.on('created', () => {
+    const isRequired = node.props.parsedRules.some((rule: any) => rule.name === 'required');
+    if (!isRequired) {
+      return;
+    }
+
+    const isMultiOption = isCheckboxAndRadioMultiple(node);
+
+    // if we're going to modify the schema then we need
+    // to update the schemaMemoKey so we don't get an
+    // invalid cached schema.
+    node.props.definition.schemaMemoKey = `required_${isMultiOption ? 'multi_' : ''}${node.props.definition.schemaMemoKey}`;
+
+    const schemaFn = node.props.definition.schema;
+    node.props.definition.schema = (sectionsSchema: any = {}) => {
+      if (isRequired) {
+        if (!isMultiOption) {
+          sectionsSchema.label = {
+            children: ['$label', ' *'],
+          };
+        }
+      }
+      return schemaFn(sectionsSchema);
+    };
+  });
+}

package/nuxt-base-template/src/forms/plugins/scroll-error-plugin.ts

@@ -0,0 +1,36 @@
+import type { FormKitNode } from '@formkit/core';
+
+export function scrollToErrors(node: any) {
+  if (node.props.type === 'form') {
+    function scrollTo(node: FormKitNode) {
+      const el = document.getElementById(node.props.id);
+      if (el) {
+        el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+      }
+    }
+
+    function scrollToErrors() {
+      node.walk((child: any) => {
+        // Check if this child has errors
+        if (child.ledger.value('blocking') || child.ledger.value('errors')) {
+          // We found an input with validation errors
+          scrollTo(child);
+          // Stop searching
+          return false;
+        }
+      }, true);
+    }
+
+    function defaultInvalid(node: FormKitNode) {
+      console.error('FormKit::invalidForm', node);
+    }
+
+    const onSubmitInvalid = node.props.onSubmitInvalid ?? defaultInvalid;
+    node.props.onSubmitInvalid = () => {
+      onSubmitInvalid(node);
+      scrollToErrors();
+    };
+    node.on('unsettled:errors', scrollToErrors);
+  }
+  return false;
+}

package/nuxt-base-template/src/forms/plugins/value-changes-plugin.ts

@@ -0,0 +1,13 @@
+import type { FormKitEvent, FormKitNode } from '@formkit/core';
+
+export function valueChangesPlugin(node: FormKitNode) {
+  const { getDifferences } = useFormHelper();
+  if (node.props.type === 'form') {
+    setTimeout(() => {
+      node.on('commit', (event: FormKitEvent) => {
+        const diff = getDifferences(event.origin.props._init, event.payload);
+        node.emit('valueChanges', { init: event.origin.props._init, current: event.payload, diff: diff });
+      });
+    }, 300);
+  }
+}

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

@@ -0,0 +1,9 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  const { currentUserState } = useAuthState();
+
+  if (to.fullPath.startsWith('/app/admin')) {
+    if (!currentUserState?.value?.roles?.includes('admin')) {
+      return navigateTo('/app');
+    }
+  }
+});

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

@@ -1,11 +1,9 @@
 export default defineNuxtRouteMiddleware((to, from) => {
-  const store = useAuthStore();
+  const { accessToken } = useAuthState();
 
-  if (to.fullPath.startsWith('/auth/')) {
-    return;
-  }
-
-  if (!store.token || !store.currentUser) {
-    return navigateTo('/auth/login');
+  if (to.fullPath.startsWith('/app')) {
+    if (!accessToken?.value) {
+      return navigateTo('/auth/login');
+    }
   }
 });

package/nuxt-base-template/src/plugins/4.auth.server.ts

@@ -0,0 +1,70 @@
+import { callWithNuxt, defineNuxtPlugin, useNuxtApp, useRuntimeConfig } from 'nuxt/app';
+import { ofetch } from 'ofetch';
+
+export default defineNuxtPlugin({
+  name: 'auth-server',
+  enforce: 'pre',
+  async setup() {
+    console.debug('4.auth.server.ts::init');
+    const _nuxt = useNuxtApp();
+    const config = await callWithNuxt(_nuxt, useRuntimeConfig);
+    const { refreshToken, accessToken } = await callWithNuxt(_nuxt, useAuthState);
+    const { setCurrentUser, getDecodedAccessToken, setTokens } = await callWithNuxt(_nuxt, useAuth);
+    const payload = accessToken.value ? getDecodedAccessToken(accessToken.value) : null;
+
+    if (!refreshToken.value) {
+      return;
+    }
+
+    const refreshTokenResult = await ofetch(config.public.host, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${refreshToken.value}`,
+      },
+      body: JSON.stringify({
+        query: 'mutation refreshToken {refreshToken {token, refreshToken}}',
+        variables: {},
+      }),
+    }).catch((err) => {
+      console.error('4.auth.server.ts::refreshToken::catch', err.data);
+    });
+
+    console.debug('4.auth.server.ts::refreshTokenResult', refreshTokenResult);
+
+    if (refreshTokenResult?.data) {
+      const data = refreshTokenResult.data.refreshToken;
+      console.debug('4.auth.server.ts::token', data?.token);
+      console.debug('4.auth.server.ts::refreshToken', data?.refreshToken);
+      setTokens(data.token, data.refreshToken);
+
+      if (payload?.id) {
+        const userResult = await ofetch(config.public.host, {
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${refreshTokenResult.data.refreshToken?.token}`,
+          },
+          body: JSON.stringify({
+            query: 'query getUser($id: String!){' +
+                            'getUser(id: $id){' +
+                            'id ' +
+                            'avatar ' +
+                            'firstName ' +
+                            'lastName ' +
+                            'email ' +
+                            'roles ' +
+                            '}}',
+            variables: {
+              id: payload.id,
+            },
+          }),
+        }).catch((err) => {
+          console.error('4.auth.server.ts::getUser::catch', err.data);
+        });
+        console.debug('4.auth.server.ts::getUser::userResult', userResult);
+        if (userResult?.data) {
+          setCurrentUser(userResult?.data?.getUser);
+        }
+      }
+    }
+  },
+});

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

@@ -0,0 +1,12 @@
+import { describe, test } from 'vitest';
+import { setup } from '@nuxt/test-utils';
+
+describe('Initialization', async () => {
+  await setup({
+    // test context options
+  });
+
+  test('Init test', () => {
+    // ... write tests here
+  });
+});

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

@@ -1,9 +1,48 @@
 /** @type {import('tailwindcss').Config} */
+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');
+
 module.exports = {
   darkMode: "class",
-  content: [],
+  content: ['./formkit-theme.js'],
   theme: {
-    extend: {},
+    // fontFamily: {
+    //   montserrat: ['Montserrat'],
+    //   sans: ['Work Sans', 'Montserrat', ...defaultTheme.fontFamily.sans],
+    //   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',
+      //   },
+      // }
+      screens: {
+        '3xl': '2400px'
+      }
+    }
   },
-  plugins: [],
+  plugins: [
+    typography,
+    formkit,
+    forms,
+    iconsPlugin({
+      // Select the icon collections you want to use
+      collections: getIconCollections(['bi']),
+    }),
+  ],
 };

package/nuxt-base-template/tsconfig.json

@@ -1,4 +1,7 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2017"
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nuxt-base",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "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/cypress.config.ts

@@ -1,54 +0,0 @@
-import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
-import * as webpack from '@cypress/webpack-preprocessor';
-import { defineConfig } from 'cypress';
-
-async function setupNodeEvents(
-  on: Cypress.PluginEvents,
-  config: Cypress.PluginConfigOptions,
-): Promise<Cypress.PluginConfigOptions> {
-  await addCucumberPreprocessorPlugin(on, config);
-
-  on(
-    'file:preprocessor',
-    webpack({
-      webpackOptions: {
-        resolve: {
-          extensions: ['.ts', '.js'],
-        },
-        module: {
-          rules: [
-            {
-              test: /\.ts$/,
-              exclude: [/node_modules/],
-              use: [
-                {
-                  loader: 'ts-loader',
-                },
-              ],
-            },
-            {
-              test: /\.feature$/,
-              use: [
-                {
-                  loader: '@badeball/cypress-cucumber-preprocessor/webpack',
-                  options: config,
-                },
-              ],
-            },
-          ],
-        },
-      },
-    }),
-  );
-
-  // Make sure to return the config object as it might have been modified by the plugin.
-  return config;
-}
-
-export default defineConfig({
-  e2e: {
-    setupNodeEvents,
-    supportFile: false,
-    specPattern: ['cypress/e2e/**/*.cy.{js,ts}', 'cypress/integrations/**/*.feature'],
-  },
-});

package/nuxt-base-template/plugins/index.js

@@ -1,5 +0,0 @@
-const cucumber = require('cypress-cucumber-preprocessor').default
-
-module.exports = (on) => {
-  on('file:preprocessor', cucumber())
-}

package/nuxt-base-template/src/tests/hello-world.spec.ts

@@ -1,11 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
-
-import HelloWorld from '../components/hello-world.vue';
-
-describe('HelloWorld', () => {
-  it('is a Vue instance', () => {
-    const wrapper = mount(HelloWorld);
-    expect(wrapper.vm).toBeTruthy();
-  });
-});