create-nuxt-base 0.1.19 → 0.1.21

package/nuxt-base-template/src/components/transition/TransitionFade.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  startDuration?: number | `${number}`;
+  leaveDuration?: number | `${number}`;
+}>(), {
+  startDuration: 100,
+  leaveDuration: 100,
+});
+</script>
+
+<template>
+  <div :style="`--start-duration: ${props.startDuration}ms; --leave-duration: ${props.leaveDuration}ms;`">
+    <Transition
+      enter-active-class="transition ease-out duration-[--start-duration]"
+      enter-from-class="transform opacity-0"
+      enter-to-class="transform opacity-100"
+      leave-active-class="transition ease-in duration-[--leave-duration]"
+      leave-from-class="transform opacity-100"
+      leave-to-class="transform opacity-0"
+    >
+      <slot></slot>
+    </Transition>
+  </div>
+</template>

package/nuxt-base-template/src/components/transition/TransitionFadeScale.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  startDuration?: number | `${number}`;
+  leaveDuration?: number | `${number}`;
+}>(), {
+  startDuration: 100,
+  leaveDuration: 100,
+});
+</script>
+
+<template>
+  <div :style="`--start-duration: ${props.startDuration}ms; --leave-duration: ${props.leaveDuration}ms;`">
+    <Transition
+      enter-active-class="transition ease-out duration-[--start-duration]"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-[--leave-duration]"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <slot></slot>
+    </Transition>
+  </div>
+</template>

package/nuxt-base-template/src/components/transition/TransitionSlide.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <Transition
+    enter-active-class="transition ease-out duration-500"
+    enter-from-class="transform translate-x-full"
+    enter-to-class="transform translate-x-0"
+    leave-active-class="transition ease-in duration-500"
+    leave-from-class="transform translate-x-0"
+    leave-to-class="transform translate-x-full"
+  >
+    <slot></slot>
+  </Transition>
+</template>

package/nuxt-base-template/src/components/transition/TransitionSlideBottom.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <Transition
+    enter-active-class="transition ease-out duration-500"
+    enter-from-class="transform translate-y-full"
+    enter-to-class="transform translate-y-0"
+    leave-active-class="transition ease-in duration-500"
+    leave-from-class="transform translate-y-0"
+    leave-to-class="transform translate-y-full"
+  >
+    <slot></slot>
+  </Transition>
+</template>

package/nuxt-base-template/src/components/transition/TransitionSlideRevert.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <Transition
+    enter-active-class="transition ease-out duration-500"
+    enter-from-class="transform translate-x-[-100%]"
+    enter-to-class="transform translate-x-0"
+    leave-active-class="transition ease-in duration-500"
+    leave-from-class="transform translate-x-0"
+    leave-to-class="transform translate-x-[-100%]"
+  >
+    <slot></slot>
+  </Transition>
+</template>

package/nuxt-base-template/src/composables/use-auth-fetch.ts

@@ -0,0 +1,19 @@
+import type { ExtractedRouteMethod, NitroFetchOptions, NitroFetchRequest, TypedInternalResponse } from 'nitropack';
+
+export function useAuthFetch<DefaultT = unknown, DefaultR extends NitroFetchRequest = NitroFetchRequest, T = DefaultT, R extends NitroFetchRequest = DefaultR, O extends NitroFetchOptions<R> = NitroFetchOptions<R>>(request: R, opts?: O): Promise<TypedInternalResponse<R, T, ExtractedRouteMethod<R, O>>>  {
+  const { requestNewToken } = useAuth();
+  const config = useRuntimeConfig();
+
+  // @ts-expect-error - because of nice types from ofetch <3
+  return $fetch(request, {
+    ...opts,
+    baseURL: config.public.apiUrl,
+    retry: 3,
+    async onRequest({ request, options }) {
+      const { token } = await requestNewToken();
+      options.headers = {
+        'Authorization': 'Bearer ' + token,
+      };
+    },
+  });
+}

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

@@ -0,0 +1,21 @@
+import { useFetch } from '@vueuse/core';
+import { useHelper } from '~/composables/use-helper';
+
+export function useFile() {
+  const { isValidMongoID } = useHelper();
+  async function getFileInfo(id: string | undefined): Promise<any> {
+    const config = useRuntimeConfig();
+
+    if (!id) {
+      return null;
+    }
+
+    if (!isValidMongoID(id)) {
+      return id;
+    }
+
+    return useFetch<File>(config.public.apiUrl + '/files/info/' + id, { method: 'GET' });
+  }
+
+  return { getFileInfo };
+}

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

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

@@ -0,0 +1,52 @@
+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/composables/use-modal.ts

@@ -0,0 +1,84 @@
+interface Modal<T> {
+  component: any;
+  data?: T;
+  size?: 'sm' | 'md' | 'lg' | 'auto';
+  closable?: boolean;
+  confirm?: (confirmed: boolean) => void;
+}
+
+export interface ModalContext<T = object> {
+  component: any;
+  data?: T;
+  show: boolean;
+  showInner: boolean;
+  size?: 'sm' | 'md' | 'lg' | 'auto';
+  closable?: boolean;
+  confirm?: (confirmed: boolean) => void;
+}
+
+const modalState = <T>() => useState<ModalContext<T> | null>(() => null);
+
+export function useModal<T = object>() {
+  const modal = modalState<T>();
+
+  const open = (modalConfig: Modal<T>) => {
+    let delay = 0;
+    if (modal.value) {
+      delay = 130;
+    }
+
+    const data = Object.assign(modalConfig, { show: false, showInner: false }) as ModalContext<T>;
+    data.size ??= 'md';
+    data.closable ??= true;
+
+    setTimeout(() => {
+      modal.value = data;
+    }, delay);
+
+    // Disable scrolling of background
+    document.body.style.overflowY = 'hidden';
+
+    setTimeout(() => {
+      if (modal.value) {
+        modal.value.show = true;
+      }
+    }, 30 + delay);
+
+    setTimeout(() => {
+      if (modal.value) {
+        modal.value.showInner = true;
+      }
+    }, 100 + delay);
+  };
+
+  const close = (duration?: number) => {
+    let animationDuration = duration;
+
+    if (typeof animationDuration !== 'number') {
+      animationDuration = 100;
+    }
+
+    if (modal.value) {
+      modal.value.showInner = false;
+
+      setTimeout(() => {
+        if (modal.value) {
+          modal.value.show = false;
+        }
+      }, 30 + animationDuration);
+    }
+
+    // Deactivate scrolling of background
+    document.body.style.overflowY = '';
+
+    setTimeout(() => {
+      modal.value = null;
+    }, 130 + animationDuration);
+  };
+
+  return {
+    activeModal: modal,
+    open,
+    close,
+  };
+}

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

@@ -0,0 +1,29 @@
+import { randomUUID } from 'uncrypto';
+
+interface Notification {
+  title: string;
+  text?: string;
+  type: 'success' | 'error' | 'warning' | 'info';
+  duration?: number;
+}
+
+const notificationState = () => useState<Array<Notification & { uuid: string }>>(() => []);
+
+export function useNotification() {
+  const notifications = notificationState();
+  const notify = (message: Notification) => {
+    const data = Object.assign(message, { uuid: randomUUID() });
+    data.duration ??= 5000;
+    notifications.value.push(data);
+  };
+
+  const remove = (uuid: string) => {
+    notifications.value = notifications.value.filter(n => n.uuid !== uuid);
+  };
+
+  return {
+    notify,
+    remove,
+    notifications,
+  };
+}

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

@@ -0,0 +1,22 @@
+import { ModalShare } from '#components';
+import { useModal } from '~/composables/use-modal';
+
+export function useShare() {
+  const route = useRoute();
+
+  function share(title?: string, text?: string, url?: string) {
+    if (window?.navigator?.share) {
+      window.navigator.share({
+        url: url ?? route.fullPath,
+        title: title,
+        text: text ?? window.location.origin,
+      });
+    } else {
+      useModal().open({ component: ModalShare, size: 'md', data: { link: url ?? window.location.origin } });
+    }
+  }
+
+  return {
+    share,
+  };
+}

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+const props = defineProps({
+  error: Object,
+});
+
+console.error(props.error);
+const debugWord = ref<string>('');
+const { current } = useMagicKeys();
+
+watch(() => current.values(),
+  () => {
+    if (current.values().next().value === 'escape') {
+      debugWord.value = '';
+      return;
+    }
+
+    if (debugWord.value === 'debug') {
+      return;
+    }
+
+    if (current.values().next().value && !debugWord.value.includes(current.values().next().value)) {
+      debugWord.value += current.values().next().value;
+    }
+  },
+);
+
+const handleError = () => clearError({ redirect: '/' });
+</script>
+
+<template>
+  <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>
+        <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>
+    </div>
+  </NuxtLayout>
+</template>

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

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

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

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