create-nuxt-base 0.1.23 → 0.2.1

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),
-  },
-};

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>