create-nuxt-base 0.1.22 → 0.2.0

package/nuxt-base-template/src/components/hello-world.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  <h1
-    class="text-transparent text-2xl bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600"
-  >
-    Hello World
-  </h1>
-</template>

package/nuxt-base-template/src/composables/use-form-helper.ts

@@ -1,100 +0,0 @@
-import type { FormKitEventListener, FormKitNode } from '@formkit/core';
-import { getNode, submitForm as submitFormkit } from '@formkit/core';
-
-export function useFormHelper() {
-  function prepareNode(node: FormKitNode | undefined, listener: FormKitEventListener, eventName: string = 'input') {
-    if (node?.on) {
-      node.on(eventName, listener);
-    }
-    node?.children?.forEach((childNode) => {
-      prepareNode(childNode as FormKitNode, listener, eventName);
-    });
-  }
-
-  async function valueChanges(nodeId: string, listener: FormKitEventListener, eventName: string = 'input') {
-    // Puffer to load form
-    await new Promise<void>((resolve) => setTimeout(() => {
-      resolve();
-    }, 1));
-    prepareNode(getNode(nodeId), listener, eventName);
-  }
-
-  function submitForm(formId: string) {
-    submitFormkit(formId);
-  }
-
-  function isDirty(formId: string): boolean {
-    const form = getNode(formId);
-        
-    return !!form?.context?.state?.dirty;
-  }
-
-  async function getChangedValue(formId: string): Promise<null | object> {
-    await new Promise(f => setTimeout(f, 100));
-    const form = getNode(formId);
-
-    if (!form) {
-      return null;
-    }
-    return getDifferences(form?.props?.initial, form?.value);
-  }
-
-  function getDifferences(obj1: any, obj2: any): any {
-    if (obj1 === obj2) {
-      return undefined;
-    }
-
-    if (typeof obj1 !== typeof obj2) {
-      return obj2;
-    }
-
-    if (typeof obj1 !== 'object' || obj1 === null || obj2 === null) {
-      return obj2;
-    }
-
-    if (Array.isArray(obj1) !== Array.isArray(obj2)) {
-      return obj2;
-    }
-
-    if (Array.isArray(obj1)) {
-      if (obj1.length !== obj2.length) {
-        return obj2;
-      }
-
-      const diffArray: any[] = [];
-
-      for (let i = 0; i < obj1.length; i++) {
-        const itemDiff = getDifferences(obj1[i], obj2[i]);
-        if (itemDiff !== undefined) {
-          diffArray[i] = itemDiff;
-        }
-      }
-
-      if (diffArray.length === 0) {
-        return undefined;
-      } else {
-        return diffArray;
-      }
-    }
-
-    const keys1 = Object.keys(obj1);
-    const keys2 = Object.keys(obj2);
-
-    const allKeys = new Set([...keys1, ...keys2]);
-    const diffObj: any = {};
-    for (const key of allKeys) {
-      const keyDiff = getDifferences(obj1[key], obj2[key]);
-      if (keyDiff !== undefined) {
-        diffObj[key] = keyDiff;
-      }
-    }
-
-    if (Object.keys(diffObj).length === 0) {
-      return undefined;
-    } else {
-      return diffObj;
-    }
-  }
-
-  return { getChangedValue, getDifferences, isDirty, submitForm, prepareNode, valueChanges };
-}

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

@@ -1,52 +0,0 @@
-export function useHelper() {
-  function removeFields(obj: any): any {
-    const ignoreFields = ['id', '__typename'];
-    if (Array.isArray(obj)) {
-      return obj.map(item => removeFields(item));
-    } else if (typeof obj === 'object' && obj !== null) {
-      const newObj: any = {};
-      for (const key in obj) {
-        if (!ignoreFields.includes(key)) {
-          newObj[key] = removeFields(obj[key]);
-        }
-      }
-      return newObj;
-    } else {
-      return obj;
-    }
-  }
-
-  function removeNullOrUndefined(obj: any): any {
-    if (Array.isArray(obj)) {
-      return obj.map(item => removeNullOrUndefined(item)).filter(item => item !== null && item !== undefined);
-    } else if (typeof obj === 'object' && obj !== null) {
-      const newObj: any = {};
-      for (const key in obj) {
-        const value = removeNullOrUndefined(obj[key]);
-        if (value !== null && value !== undefined) {
-          newObj[key] = value;
-        }
-      }
-      return newObj;
-    } else {
-      return obj;
-    }
-  }
-
-  function isValidMongoID(id: string): boolean {
-    const validHexChars = /^[0-9a-fA-F]{24}$/;
-
-    return validHexChars.test(id);
-  }
-
-  function groupBy<T>(arr: T[], fn: (item: T) => any) {
-    return arr.reduce<Record<string, T[]>>((prev, curr) => {
-      const groupKey = fn(curr);
-      const group = prev[groupKey] || [];
-      group.push(curr);
-      return { ...prev, [groupKey]: group };
-    }, {});
-  }
-
-  return { removeFields, removeNullOrUndefined, isValidMongoID, groupBy };
-}

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

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  context: Object,
-});
-const name = props.context.name;
-const label = props.context.attrs.text;
-
-function setInput(e) {
-  props.context.node.input(e.target.checked);
-}
-</script>
-
-<template>
-  <div :class="context.classes.container">
-    <label :id="props.context?.id" :class="context.classes.wrapper">
-      <div :class="context.classes.inner">
-        <input :class="context.classes.input" type="checkbox" :name="name" @input="setInput" />
-        <span :class="context.classes.decorator" aria-hidden="true">
-          <span :class="[context.classes.decoratorIcon, context.classes.icon]">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 27">
-              <polygon fill="currentColor" points="26.99 0 10.13 17.17 4.69 11.63 0 16.41 10.4 27 15.05 22.27 15.09 22.31 32 5.1 26.99 0" />
-            </svg>
-          </span>
-        </span>
-      </div>
-    </label>
-    <span :class="context.classes.label" v-html="label"></span>
-  </div>
-</template>

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

@@ -1,98 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  context: Object,
-});
-
-const inputRef = ref();
-const inputValue = ref<string>();
-const name = props.context?.name;
-const placeholder = props.context?.attrs?.placeholder;
-const defaultSuggestions = [...props.context?.attrs?.suggestions] || [];
-const suggestions = ref<string[]>([...props.context?.attrs?.suggestions]);
-const tags = ref<string[]>([]);
-patch();
-
-function patch() {
-  const values = props.context?._value;
-  if (values && Array.isArray(values)) {
-    for (let item of values) {
-      addTag(item);
-    }
-  }
-}
-
-
-function addTag(tag?: string) {
-  if (!inputValue.value && !tag) {
-    return;
-  }
-
-  if (tag) {
-    tags.value.push(tag);
-    // remove tag from suggestions
-    if (suggestions.value.findIndex((e) => e === tag) >= 0) {
-      suggestions.value.splice(suggestions.value.findIndex((e) => e === tag), 1);
-    }
-  } else {
-    if (!tags.value.includes(inputValue.value as string)) {
-      tags.value.push(inputValue.value as string);
-    }
-
-    if (suggestions.value.includes(inputValue.value as string)) {
-      if (suggestions.value.findIndex((e) => e === tag) >= 0) {
-        suggestions.value.splice(suggestions.value.findIndex((e) => e === inputValue.value), 1);
-      }
-    }
-
-    inputValue.value = '';
-  }
-
-  props.context?.node.input(tags.value);
-}
-
-function removeTag(tag: string) {
-  tags.value.splice(tags.value.findIndex((e) => e === tag), 1);
-
-  if (defaultSuggestions.includes(tag) && !suggestions.value.includes(tag)) {
-    suggestions.value.push(tag);
-  }
-
-  props.context?.node.input(tags.value);
-}
-</script>
-
-<template>
-  <div class="flex flex-col">
-    <div class="flex flex-row flex-wrap gap-2">
-      <span v-for="(tag, index) of tags" :key="index" :class="context?.classes.tag">{{ tag }} <span class="i-bi-x" :class="context?.classes.tagIcon" @click="removeTag(tag)"></span> </span>
-    </div>
-    <div :class="context?.classes.inputWrapper">
-      <input
-        :id="props.context?.id"
-        ref="inputRef"
-        v-model="inputValue"
-        :name="name"
-        type="text"
-        :placeholder="placeholder"
-        :class="context?.classes.input"
-        @keydown.enter.prevent="addTag()"
-      />
-      <span :class="context?.classes.inputIcon"></span>
-    </div>
-    <div>
-      <button type="button" :disabled="!inputValue" :class="context?.classes.button" @click="addTag()">
-        {{ context?.attrs.buttonText ?? context?.attrs['button-text'] }}
-      </button>
-    </div>
-    <div v-if="suggestions?.length" :class="context?.classes.suggestionsWrapper">
-      <p :class="context?.classes.suggestionsHeadline">
-        Beliebte Skills
-      </p>
-      <div class="flex flex-row flex-wrap gap-2">
-        <div v-for="(tag, index) of suggestions" :key="index" :class="context?.classes.suggestionsTag">
-          {{ tag }} <span :class="context?.classes.suggestionsIcon" @click="addTag(tag)"></span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

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

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  context: Object,
-});
-
-const value = ref('');
-const label = props.context?.label;
-const text = props.context?.attrs.text;
-const name = props.context?.name;
-const config = useRuntimeConfig();
-await getPreviewUrl(props.context?._value);
-
-watch(() => props.context?._value, async () => {
-  await getPreviewUrl(props.context?._value);
-});
-
-function handleInput(e: any) {
-  if (!e) {
-    props.context?.node.input(null);
-    return;
-  }
-
-  props.context?.node.input(e.target.files[0]);
-}
-
-async function getPreviewUrl(src: string | File) {
-  if (!src) {
-    value.value = '';
-  }
-
-  const validHexChars = /^[0-9a-fA-F]{24}$/;
-  if (typeof src === 'object' && validHexChars.test(src?.id)) {
-    // return config.public.apiUrl + '/files/' + src.id;
-    const response = await useAuthFetch(config.public.apiUrl + '/files/' + src?.id, { method: 'GET' });
-    value.value = URL.createObjectURL(response as any);
-  }
-  else if (typeof src === 'string') {
-    value.value = src;
-  } else if (src instanceof File) {
-    value.value = URL.createObjectURL(src);
-  }
-}
-</script>
-
-<template>
-  <div class="image-container" :class="props?.context?.classes.container">
-    <div v-if="!props.context?._value" :class="props?.context?.classes.uploader">
-      <label :class="context?.classes.placeholder">{{ text }}</label>
-      <input
-        :id="props.context?.id"
-        :name="name"
-        type="file"
-        :class="props?.context?.classes.input"
-        @input="handleInput"
-      />
-    </div>
-    <div v-else :class="props?.context.classes.fileItem">
-      <img :src="value" :class="props?.context?.classes.fileItemImage" />
-      <span :class="props?.context.classes.fileItemImageName">{{ props.context?._value?.name ?? props.context?._value?.filename }}</span>
-      <button type="button" :class="props?.context.classes.fileItemRemove" @click="handleInput(null)">
-        Entfernen
-      </button>
-    </div>
-  </div>
-</template>

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

@@ -1,112 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-<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

@@ -1,29 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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/plugins/4.auth.server.ts

@@ -1,70 +0,0 @@
-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);
-        }
-      }
-    }
-  },
-});