create-nuxt-base 0.2.1 → 0.2.3

package/nuxt-base-template/src/components/form/FormToggle.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { ErrorMessage, useField } from 'vee-validate';
-
-const props = defineProps<{
-  disabled?: boolean;
-  label?: string;
-  name: string;
-}>();
-
-const { handleChange, meta, value, setTouched } = useField(() => props.name);
-
-watch(
-  () => value.value,
-  () => {
-    handleChange(value.value);
-    setTouched(true);
-  }
-);
-</script>
-
-<template>
-  <div class="relative mt-3 pb-2">
-    <label v-if="label" :for="name" class="block text-sm font-medium leading-6 text-foreground">{{ label }}{{ meta.required ? '*' : '' }}</label>
-    <BaseToggle v-model:active="value" :disabled="disabled" />
-    <ErrorMessage class="absolute -bottom-2.5 text-xs font-light text-red-600" :name="name" />
-  </div>
-</template>

package/nuxt-base-template/src/components/modal/Modal.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { twMerge } from 'tailwind-merge';
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-const props = withDefaults(
-  defineProps<{
-    show: boolean;
-    showInner: boolean;
-    backgroundColor?: string;
-    size?: 'auto' | 'sm' | 'md' | 'lg';
-  }>(),
-  {
-    backgroundColor: '#FFF',
-    size: 'auto',
-  }
-);
-
-const emit = defineEmits<{
-  (event: 'cancel'): void;
-}>();
-
-const attributes = useAttrs() as { class: string };
-const sizeClasses: Record<typeof props.size, string> = {
-  auto: 'w-4/5 md:w-auto',
-  sm: 'w-4/5 md:w-1/4',
-  md: 'w-4/5 md:w-3/6',
-  lg: 'w-4/5 md:w-4/5',
-};
-const defaultClasses = 'duration-200 w-full overflow-hidden rounded-[20px] p-4 bg-[--bg-color] bg-background flex flex-col gap-4';
-const classes = twMerge(defaultClasses, sizeClasses[props.size], attributes?.class);
-</script>
-
-<template>
-  <div class="relative z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true" :style="`--bg-color: ${props.backgroundColor};`">
-    <TransitionFade>
-      <div v-show="show" class="fixed inset-0 bg-background/30 backdrop-blur-sm transition-opacity flex justify-center items-center" @click="emit('cancel')">
-        <TransitionFade class="w-full flex justify-center">
-          <div v-show="showInner" :class="classes" @click.stop>
-            <slot></slot>
-          </div>
-        </TransitionFade>
-      </div>
-    </TransitionFade>
-  </div>
-</template>

package/nuxt-base-template/src/components/modal/ModalConfirm.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import type { ModalContext } from '~/composables/use-modal';
-
-const props = defineProps<{
-  context: ModalContext<{
-    cancelText: string;
-    confirmColor?: 'primary' | 'secondary' | 'green' | 'yellow' | 'lightprimary' | 'danger';
-    confirmText: string;
-    text: string;
-    title: string;
-  }>;
-}>();
-const { close } = useModal();
-</script>
-
-<template>
-  <Modal class="p-10 relative" :show="context.show" :show-inner="context.showInner" :size="context.size" @cancel="context.closable ? close() : null">
-    <div class="flex items-center justify-center mb-2">
-      <div class="font-semibold text-xl text-foreground">
-        {{ context?.data?.title }}
-      </div>
-      <button class="absolute top-5 right-5" @click="close()">
-        <span class="i-bi-x text-2xl hover:text-primary-500 duration-200"></span>
-      </button>
-    </div>
-    <div class="mb-5 text-foreground">
-      {{ context?.data?.text }}
-    </div>
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
-      <BaseButton appearance="outline" color="primary" @click="context?.confirm?.(false)">
-        {{ context?.data?.cancelText || 'Abbrechen' }}
-      </BaseButton>
-      <BaseButton :color="context?.data?.confirmColor || 'primary'" @click="context?.confirm?.(true)">
-        {{ context?.data?.confirmText || 'Ok' }}
-      </BaseButton>
-    </div>
-  </Modal>
-</template>

package/nuxt-base-template/src/components/modal/ModalContainer.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const { activeModal } = useModal();
-</script>
-
-<template>
-  <component :is="activeModal.component" v-if="activeModal" :context="activeModal" />
-</template>

package/nuxt-base-template/src/components/modal/ModalInfo.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { ModalContext } from '~/composables/use-modal';
-
-const props = defineProps<{ context: ModalContext<{ text: string; title: string }> }>();
-const { close } = useModal();
-</script>
-
-<template>
-  <Modal class="p-10 relative" :show="context.show" :show-inner="context.showInner" :size="context.size" @cancel="context.closable ? close() : null">
-    <div class="flex items-center justify-center mb-2">
-      <div class="font-semibold text-xl text-foreground">
-        {{ context?.data?.title }}
-      </div>
-      <button class="absolute top-5 right-5" @click="close()">
-        <span class="i-bi-x text-2xl hover:text-primary-500 duration-200"></span>
-      </button>
-    </div>
-    <div class="text-center text-foreground mb-6">
-      {{ context?.data?.text }}
-    </div>
-  </Modal>
-</template>

package/nuxt-base-template/src/components/modal/ModalShare.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import type { ModalContext } from '~/composables/use-modal';
-import SocialMediaBubble from '~/components/SocialMediaBubble.vue';
-
-const props = defineProps<{ context: ModalContext<{ link: string; name: string }> }>();
-const { close } = useModal();
-const url = ref<string>('');
-
-onMounted(() => {
-  url.value = props.context.data?.link ? props.context.data?.link : window.location.href;
-});
-
-const copyUrl = () => {
-  useClipboard({ source: url.value }).copy();
-  useNotification().notify({ type: 'success', title: 'Erfolgreich', text: 'Link wurde erfolgreich kopiert!' });
-};
-
-const shareWith = (type: 'mail' | 'whatsapp' | 'facebook' | 'linkedin' | 'twitter') => {
-  switch (type) {
-    case 'mail':
-      open(`mailto:?subject=${props.context.data?.name}&body=${encodeURIComponent(url.value)}`, '_blank');
-      break;
-    case 'whatsapp':
-      open(`https://api.whatsapp.com/send/?text=${encodeURIComponent(url.value)}`, '_blank');
-      break;
-    case 'facebook':
-      open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url.value)}`, '_blank');
-      break;
-    case 'linkedin':
-      open(`https://www.linkedin.com/shareArticle?url=${encodeURIComponent(url.value)}`, '_blank');
-      break;
-    case 'twitter':
-      open(`https://twitter.com/share?url=${encodeURIComponent(url.value)}`, '_blank');
-      break;
-  }
-};
-</script>
-
-<template>
-  <Modal class="p-10 relative" :show="context.show" :show-inner="context.showInner" :size="context.size" @cancel="context.closable ? close() : null">
-    <div class="flex items-center justify-center mb-4">
-      <div class="font-semibold text-xl text-foreground">Teilen</div>
-      <button class="absolute top-5 right-5" @click="close()">
-        <span class="i-bi-x text-2xl hover:text-primary-500"></span>
-      </button>
-    </div>
-    <div class="text-center text-foreground">
-      <div class="flex justify-around max-w-md mx-auto gap-3 py-2 mb-5 overflow-x-scroll">
-        <SocialMediaBubble title="E-Mail" bg-color="#bbbbbb" icon="i-bi-envelope" @click="shareWith('mail')" />
-        <SocialMediaBubble title="Whatsapp" bg-color="#25d366" icon="i-bi-whatsapp" @click="shareWith('whatsapp')" />
-        <SocialMediaBubble title="Facebook" bg-color="#3b5998" icon="i-bi-facebook" @click="shareWith('facebook')" />
-        <SocialMediaBubble title="LinkedIn" bg-color="#0a66c2" icon="i-bi-linkedin" @click="shareWith('linkedin')" />
-        <SocialMediaBubble title="X / Twitter" bg-color="#000000" icon="i-bi-twitter-x" @click="shareWith('twitter')" />
-      </div>
-      <div class="flex items-center gap-3 justify-between p-3 border border-border rounded-lg">
-        <span class="text-ellipsis overflow-hidden">
-          {{ url }}
-        </span>
-        <BaseButton size="sm" @click="copyUrl()"> Kopieren </BaseButton>
-      </div>
-    </div>
-  </Modal>
-</template>

package/nuxt-base-template/src/components/notification/Notification.vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  title: string;
-  text?: string;
-  duration: number;
-  type: 'success' | 'error' | 'warning' | 'info';
-}>();
-
-const emit = defineEmits<{
-  (event: 'close'): void;
-}>();
-
-const process = ref(100);
-let durationLeft = props.duration - (500 + 130);
-onMounted(() => {
-  const interval = setInterval(() => {
-    durationLeft -= 30;
-    process.value = (durationLeft / props.duration) * 100;
-  }, 30);
-  setTimeout(() => {
-    clearInterval(interval);
-    emit('close');
-  }, props.duration);
-});
-
-const icon: Record<typeof props.type, string> = {
-  success: 'i-bi-check-circle',
-  error: 'i-bi-exclamation-circle',
-  warning: 'i-bi-exclamation-triangle',
-  info: 'i-bi-info-circle',
-};
-
-const accentColor: Record<typeof props.type, string> = {
-  success: '#059669',
-  error: '#DC2626',
-  warning: '#D97706',
-  info: '#3B82F6',
-};
-</script>
-
-<template>
-  <div
-    :style="`--accent-color: ${accentColor[props.type]}`"
-    class="pointer-events-auto relative w-full max-w-sm overflow-hidden rounded-lg bg-white dark:bg-gray-950 shadow-lg ring-1 ring-black ring-opacity-5 z-[99999px]"
-  >
-    <div
-      :style="{
-        width: `${process}%`
-      }"
-      class="bg-[--accent-color] h-[5px] duration-100 transition-[width] w-[width] absolute bottom-0"
-    ></div>
-    <div class="p-4">
-      <div class="flex items-start">
-        <div class="flex-shrink-0">
-          <span :class="icon[props.type]" class="h-6 w-6 text-[--accent-color]"></span>
-        </div>
-        <div class="ml-3 w-0 flex-1 pt-0.5">
-          <p class="text-sm font-semibold text-gray-900 dark:text-white">
-            {{ props.title }}
-          </p>
-          <p v-if="props.text" class="mt-1 text-sm text-gray-500 dark:text-white">
-            {{ props.text }}
-          </p>
-        </div>
-        <div class="ml-4 flex flex-shrink-0">
-          <button
-            type="button"
-            class="inline-flex rounded-md bg-white text-gray-400 dark:bg-gray-100 dark:text-white hover:text-gray-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
-            @click="emit('close')"
-          >
-            <span class="sr-only">Close</span>
-            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path
-                d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/nuxt-base-template/src/components/notification/NotificationContainer.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-const { notifications, remove } = useNotification();
-</script>
-
-<template>
-  <div aria-live="assertive" class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-[99999]">
-    <TransitionGroup tag="div" name="list" class="flex w-full flex-col items-center space-y-4 sm:items-end">
-      <Notification
-        v-for="notification in notifications"
-        :key="notification.uuid"
-        :text="notification.text"
-        :title="notification.title"
-        :type="notification.type"
-        :duration="notification.duration!"
-        @close="remove(notification.uuid)"
-      />
-    </TransitionGroup>
-  </div>
-</template>
-
-<style>
-.list-move,
-  /* apply transition to moving elements */
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.5s ease;
-}
-
-.list-enter-from,
-.list-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-/* ensure leaving items are taken out of layout flow so that moving
-   animations can be calculated correctly. */
-.list-leave-active {
-  position: absolute;
-}
-</style>

package/nuxt-base-template/src/components/pwa/pwa-install-banner.vue

@@ -1,224 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    addHomeButtonLabel?: string;
-    body?: string;
-    buttonLabel?: string;
-    closePrompt?: string;
-    debug?: boolean;
-    delay?: number;
-    iosBackgroundColor?: string;
-    iosBackgroundColorDark?: string;
-    iosBorderColor?: string;
-    iosBorderColorDark?: string;
-    iosButtonColoDark?: string;
-    iosButtonColor?: string;
-    iosOverlayColor?: string;
-    iosOverlayColorDark?: string;
-    iosTextColor?: string;
-    iosTextColorDark?: string;
-    iosTitleColor?: string;
-    iosTitleColorDark?: string;
-    title?: string;
-  }>(),
-  {
-    addHomeButtonLabel: '2) Drücken Sie auf "Zum Home-Bildschirm".',
-    body: 'Diese Website verfügt über eine App-Funktionalität. Fügen Sie sie zu Ihrem Startbildschirm hinzu, um sie im Vollbildmodus und offline zu nutzen.',
-    buttonLabel: '1) Drücken Sie die Schaltfläche "Teilen".',
-    closePrompt: 'Abbrechen',
-    debug: false,
-
-    delay: 1000,
-    iosBackgroundColor: 'rgba(255, 255, 255, 0.9)',
-
-    iosBackgroundColorDark: 'rgba(65, 65, 65, 0.7)',
-    iosBorderColor: 'rgba(60, 60, 67, 0.29)',
-
-    iosBorderColorDark: 'rgba(140, 140, 140, 0.7)',
-    iosButtonColoDark: 'rgba(9, 132, 255, 1)',
-
-    iosButtonColor: 'rgba(0, 85, 179, 1)',
-    iosOverlayColor: 'rgba(10, 10, 10, 0.5)',
-
-    iosOverlayColorDark: 'rgba(10, 10, 10, 0.5)',
-    iosTextColor: 'rgba(60, 60, 67, 0.6)',
-
-    iosTextColorDark: 'rgba(235, 235, 245, 0.6)',
-    iosTitleColor: 'rgba(0, 0, 0, 1)',
-
-    iosTitleColorDark: 'rgba(255, 255, 255, 1)',
-    title: 'Zum Startbildschirm hinzufügen',
-  }
-);
-
-const cssVariables = [
-  `--ios-overlay: ${props.iosOverlayColor}`,
-  `--ios-overlay-dark: ${props.iosOverlayColorDark}`,
-  `--ios-background: ${props.iosBackgroundColor}`,
-  `--ios-background-dark: ${props.iosBackgroundColorDark}`,
-  `--ios-button: ${props.iosButtonColor}`,
-  `--ios-button-dark: ${props.iosButtonColor}`,
-  `--ios-border: ${props.iosBorderColor}`,
-  `--ios-border-dark: ${props.iosBorderColorDark}`,
-  `--ios-title: ${props.iosTitleColor}`,
-  `--ios-title-dark: ${props.iosTitleColorDark}`,
-  `--ios-text: ${props.iosTextColor}`,
-  `--ios-text-dark: ${props.iosTextColorDark}`,
-].join(';');
-
-const HomeIcon = defineComponent({
-  render: () =>
-    h('svg', { fill: 'currentColor', viewBox: '0 0 578 584' }, [
-      h('path', {
-        'clip-rule': 'evenodd',
-        d: 'M101 35l19-1h333c12 0 23 0 35 3 17 3 34 12 44 27 13 16 16 38 16 58v329c0 19 0 39-8 57a65 65 0 0 1-37 37c-18 7-38 7-57 7H130c-21 1-44 0-63-10-14-7-25-20-30-34-6-15-8-30-8-45V121c1-21 5-44 19-61 13-16 33-23 53-25m7 46c-10 1-19 6-24 14-7 8-9 20-9 31v334c0 12 2 25 10 34 9 10 23 12 35 12h336c14 1 30-3 38-15 6-9 8-20 8-31V125c0-12-2-24-10-33-9-9-22-12-35-12H121l-13 1z',
-        'fill-rule': 'evenodd',
-      }),
-      h('path', {
-        'clip-rule': 'evenodd',
-        d: 'M271 161c9-11 31-10 38 4 3 5 3 11 3 17v87h88c7 0 16 1 21 7 6 6 7 14 6 22a21 21 0 0 1-10 14c-5 4-11 5-17 5h-88v82c0 7-1 15-6 20-10 10-29 10-37-2-3-6-4-13-4-19v-81h-87c-8-1-17-3-23-9-5-6-6-15-4-22a21 21 0 0 1 11-14c6-3 13-3 19-3h84v-88c0-7 1-14 6-20z',
-        'fill-rule': 'evenodd',
-      }),
-    ]),
-});
-
-const ShareIcon = defineComponent({
-  render: () =>
-    h('svg', { fill: 'currentColor', viewBox: '0 0 566 670' }, [
-      h('path', {
-        'clip-rule': 'evenodd',
-        d: 'M255 12c4-4 10-8 16-8s12 3 16 8l94 89c3 4 6 7 8 12 2 6 0 14-5 19-7 8-20 9-28 2l-7-7-57-60 2 54v276c0 12-10 22-22 22-12 1-24-10-23-22V110l1-43-60 65c-5 5-13 8-21 6a19 19 0 0 1-16-17c-1-7 2-13 7-18l95-91z',
-        'fill-rule': 'evenodd',
-      }),
-      h('path', {
-        'clip-rule': 'evenodd',
-        d: 'M43 207c16-17 40-23 63-23h83v46h-79c-12 0-25 3-33 13-8 9-10 21-10 33v260c0 13 0 27 6 38 5 12 18 18 30 19l14 1h302c14 0 28 0 40-8 11-7 16-21 16-34V276c0-11-2-24-9-33-8-10-22-13-34-13h-78v-46h75c13 0 25 1 37 4 16 4 31 13 41 27 11 17 14 37 14 57v280c0 20-3 41-15 58a71 71 0 0 1-45 27c-11 2-23 3-34 3H109c-19-1-40-4-56-15-14-9-23-23-27-38-4-12-5-25-5-38V270c1-22 6-47 22-63z',
-        'fill-rule': 'evenodd',
-      }),
-    ]),
-});
-
-const showBanner = ref(false);
-
-watch(
-  () => showBanner.value,
-  () => {
-    if (showBanner.value) {
-      // Disable scrolling of background
-      document.body.style.overflowY = 'hidden';
-    } else {
-      // Deactivate scrolling of background
-      document.body.style.overflowY = '';
-    }
-  }
-);
-
-interface BeforeInstallPromptEvent {
-  prompt: () => void;
-}
-const { storagePrefix } = useRuntimeConfig().public;
-const deferredPrompt = ref<BeforeInstallPromptEvent | null>();
-
-const cancelCookie = () => useCookie(`${storagePrefix}_pwa_prompt_canceled`, { default: () => false });
-
-function cancel() {
-  cancelCookie().value = true;
-  showBanner.value = false;
-}
-
-function deviceCheck() {
-  const isiOS = /iphone|ipad|ipod/.test(window.navigator.userAgent.toLowerCase());
-  const isiPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints >= 2;
-  const isStandalone = 'standalone' in window.navigator && window.navigator.standalone;
-
-  return (isiOS || isiPadOS) && !isStandalone;
-}
-
-function reactivate() {
-  cancelCookie().value = false;
-  showBanner.value = true;
-}
-
-function showInAppInstallPromotion() {
-  if (deferredPrompt.value) {
-    deferredPrompt.value.prompt();
-  }
-}
-
-onMounted(() => {
-  if (!cancelCookie().value) {
-    showBanner.value = deviceCheck();
-  }
-
-  // This variable will save the event for later use.
-  let deferredPrompt;
-  window.addEventListener('beforeinstallprompt', (e) => {
-    // Prevents the default mini-infobar or install dialog from appearing on mobile
-    e.preventDefault();
-    // Save the event because you'll need to trigger it later.
-    deferredPrompt = e;
-    // Show your customized install prompt for your PWA
-    // Your own UI doesn't have to be a single element, you
-    // can have buttons in different locations, or wait to prompt
-    // as part of a critical journey.
-    showInAppInstallPromotion();
-  });
-});
-
-defineExpose({
-  reactivate,
-});
-</script>
-
-<template>
-  <Transition
-    enter-active-class="ease-out duration-500 delay-500"
-    enter-from-class="translate-y-full"
-    enter-to-class="translate-x-0"
-    leave-active-class="ease-in duration-500"
-    leave-from-class="translate-x-0"
-    leave-to-class="translate-y-full"
-  >
-    <div v-show="showBanner" :style="cssVariables" class="bottom-0 w-full fixed !z-[9998] p-2 max-w-md mx-auto">
-      <div class="bg-[var(--ios-background)] backdrop-blur-sm overflow-hidden dark:bg-[var(--ios-background-dark)] rounded-lg">
-        <div class="flex justify-between border-b border-[var(--ios-border)] dark:border-[var(--ios-border-dark)]">
-          <h4 class="text-[var(--ios-title)] dark:text-[var(--ios-title-dark)] text-md p-4">
-            {{ props.title }}
-          </h4>
-          <button class="text-[var(--ios-button)] dark:text-[var(--ios-button-dark)] text-base p-4" @click="cancel()">
-            {{ props.closePrompt }}
-          </button>
-        </div>
-        <div class="px-8 py-4">
-          <p class="text-[var(--ios-text)] dark:text-[var(--ios-text-dark)] text-center text-sm border-b px-4 pb-4 border-[var(--ios-border)] dark:border-[var(--ios-border-dark)]">
-            {{ props.body }}
-          </p>
-          <div class="flex flex-col gap-4 p-4 pt-8">
-            <div class="flex justify-start items-center gap-6">
-              <ShareIcon class="h-8 w-auto text-[var(--ios-button)] dark:text-[var(--ios-button-dark)]" />
-              <p class="text-sm text-left text-[var(--ios-text)] dark:text-[var(--ios-text-dark)]">
-                {{ props.buttonLabel }}
-              </p>
-            </div>
-            <div class="flex justify-start items-center gap-6">
-              <HomeIcon class="h-8 w-auto text-[var(--ios-button)] dark:text-[var(--ios-button-dark)]" />
-              <p class="text-sm text-left text-[var(--ios-text)] dark:text-[var(--ios-text-dark)]">
-                {{ props.addHomeButtonLabel }}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Transition>
-  <Transition
-    enter-active-class="ease-out duration-1000"
-    enter-from-class="opacity-0"
-    enter-to-class="opacity-100"
-    leave-active-class="ease-in duration-1000"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-  >
-    <div v-show="showBanner" :style="cssVariables" class="absolute inset-0 bg-black/50 !z-[9997] min-h-screen w-full"></div>
-  </Transition>
-</template>