create-nuxt-base 0.1.23 → 0.2.1

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ErrorMessage, useField } from 'vee-validate';
+
+enum InputType {
+  Password = 'password',
+  Text = 'text',
+}
+
+const props = defineProps<{
+  label: string;
+  name: string;
+  placeholder: string;
+}>();
+
+const type = ref<InputType>(InputType.Password);
+const { handleBlur, handleChange, meta, value, setTouched } = useField(() => props.name);
+
+function changeType() {
+  type.value = type.value === InputType.Password ? InputType.Text : InputType.Password;
+}
+</script>
+
+<template>
+  <div class="mt-3">
+    <label v-if="label" :for="name" class="block text-sm font-medium leading-6 text-foreground">{{ label }}{{ meta.required ? '*' : '' }}</label>
+    <div class="relative mt-2 pb-2">
+      <div class="relative">
+        <input
+          :id="name"
+          v-model="value"
+          :type="type"
+          :name="name"
+          @blur="handleBlur"
+          @focus="setTouched(true)"
+          @change="handleChange"
+          class="bg-background block w-full rounded-md border-0 py-1.5 text-foreground shadow-sm ring-1 ring-inset ring-border placeholder:text-foreground/50 focus:ring-1 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
+          :placeholder="placeholder"
+        />
+        <button type="button" class="absolute right-2 bottom-1/2 transform translate-y-1/2 text-secondary-100 flex items-center hover:text-primary-500" @click="changeType()">
+          <span v-if="type === 'password'" class="i-bi-eye"></span>
+          <span v-else class="i-bi-eye-slash"></span>
+        </button>
+      </div>
+      <ErrorMessage class="absolute -bottom-2.5 text-xs font-light text-red-600" :name="name" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ErrorMessage, useField } from 'vee-validate';
+
+interface Option {
+  label: string;
+  value: any;
+}
+
+const props = defineProps<{
+  disabled?: boolean;
+  label?: string;
+  multiple?: boolean;
+  name: string;
+  options: Option[];
+  placeholder?: string;
+}>();
+
+const { handleBlur, handleChange, meta, value, setTouched } = useField(() => props.name);
+</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>
+    <select
+      :id="name"
+      v-model="value"
+      @focus="setTouched(true)"
+      :name="name"
+      :multiple="multiple ?? false"
+      :disabled="disabled"
+      class="bg-background mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-foreground ring-1 ring-inset ring-border focus:ring-1 focus:ring-primary-500 sm:text-sm sm:leading-6"
+      @blur="handleBlur"
+      @change="handleChange"
+    >
+      <option class="text-foreground/50" :value="null" disabled selected>{{ placeholder }}</option>
+      <option v-for="option of options" :value="option.value">{{ option.label }}</option>
+    </select>
+    <ErrorMessage class="absolute -bottom-2.5 text-xs font-light text-red-600" :name="name" />
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps<{
+  isSubmitting?: boolean;
+  label: string;
+}>();
+</script>
+
+<template>
+  <div>
+    <BaseButton v-if="isSubmitting" type="button" disabled>
+      <span class="animate-bounce">.</span>
+      <span class="animate-bounce delay-150">.</span>
+      <span class="animate-bounce delay-300 me-1">.</span>
+      Loading
+    </BaseButton>
+    <BaseButton v-else type="submit"> {{ label }} </BaseButton>
+  </div>
+</template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ErrorMessage, useField } from 'vee-validate';
+
+const props = defineProps<{
+  disabled?: boolean;
+  label?: string;
+  name: string;
+  placeholder?: string;
+  cols?: number;
+  maxlength?: number;
+}>();
+
+const { handleBlur, handleChange, value, meta, setTouched } = useField(() => props.name);
+</script>
+
+<template>
+  <div class="mt-3">
+    <label v-if="label" :for="name" class="block text-sm font-medium leading-6 text-foreground">{{ label }}{{ meta.required ? '*' : '' }}</label>
+    <div class="relative mt-2 pb-2">
+      <textarea
+        :id="name"
+        :cols="cols"
+        :maxlength="maxlength"
+        :name="name"
+        v-model="value"
+        :disabled="disabled"
+        @blur="handleBlur"
+        @focus="setTouched(true)"
+        @change="handleChange"
+        class="bg-background block resize-none w-full rounded-md border-0 py-1.5 text-foreground shadow-sm ring-1 ring-inset ring-border placeholder:text-foreground/50 focus:ring-1 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
+        :placeholder="placeholder"
+      />
+      <ErrorMessage class="absolute -bottom-2.5 text-xs font-light text-red-600" :name="name" />
+    </div>
+  </div>
+</template>

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

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

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

@@ -0,0 +1,38 @@
+<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/{base/BaseModalContainer.vue → modal/ModalContainer.vue}

@@ -4,4 +4,4 @@ const { activeModal } = useModal();
 
 <template>
   <component :is="activeModal.component" v-if="activeModal" :context="activeModal" />
-</template>
+</template>

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

@@ -0,0 +1,22 @@
+<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/{ModalShare.vue → modal/ModalShare.vue}

@@ -2,7 +2,7 @@
 import type { ModalContext } from '~/composables/use-modal';
 import SocialMediaBubble from '~/components/SocialMediaBubble.vue';
 
-const props = defineProps<{ context: ModalContext }>();
+const props = defineProps<{ context: ModalContext<{ link: string; name: string }> }>();
 const { close } = useModal();
 const url = ref<string>('');
 
@@ -18,7 +18,7 @@ const copyUrl = () => {
 const shareWith = (type: 'mail' | 'whatsapp' | 'facebook' | 'linkedin' | 'twitter') => {
   switch (type) {
     case 'mail':
-      open(`mailto:?subject=RegioKonneX&body=${encodeURIComponent(url.value)}`, '_blank');
+      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');
@@ -39,14 +39,12 @@ const shareWith = (type: 'mail' | 'whatsapp' | 'facebook' | 'linkedin' | 'twitte
 <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 dark:text-white">
-        Teilen
-      </div>
+      <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 dark:text-white">
+    <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')" />
@@ -54,14 +52,12 @@ const shareWith = (type: 'mail' | 'whatsapp' | 'facebook' | 'linkedin' | 'twitte
         <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-gray-300 rounded-lg">
+      <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>
+        <BaseButton size="sm" @click="copyUrl()"> Kopieren </BaseButton>
       </div>
     </div>
   </Modal>
-</template>
+</template>

package/nuxt-base-template/src/components/{base/BaseNotification.vue → notification/Notification.vue}

@@ -15,7 +15,7 @@ let durationLeft = props.duration - (500 + 130);
 onMounted(() => {
   const interval = setInterval(() => {
     durationLeft -= 30;
-    process.value = durationLeft / props.duration * 100;
+    process.value = (durationLeft / props.duration) * 100;
   }, 30);
   setTimeout(() => {
     clearInterval(interval);
@@ -41,17 +41,18 @@ const accentColor: Record<typeof props.type, string> = {
 <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]"
+    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"
+        width: `${process}%`
+      }"
+      class="bg-[--accent-color] h-[5px] duration-100 transition-[width] w-[width] absolute bottom-0"
     ></div>
-    <div class="p-4 ">
+    <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>
+          <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">
@@ -78,4 +79,4 @@ const accentColor: Record<typeof props.type, string> = {
       </div>
     </div>
   </div>
-</template>
+</template>

package/nuxt-base-template/src/components/{base/BaseNotificationContainer.vue → notification/NotificationContainer.vue}

@@ -4,10 +4,16 @@ const { notifications, remove } = useNotification();
 
 <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"
-    >
-      <BaseNotification 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 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>
@@ -31,4 +37,4 @@ const { notifications, remove } = useNotification();
 .list-leave-active {
   position: absolute;
 }
-</style>
+</style>

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

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

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

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
-  startDuration?: number | `${number}`;
-  leaveDuration?: number | `${number}`;
-}>(), {
-  startDuration: 100,
-  leaveDuration: 100,
-});
+const props = withDefaults(
+  defineProps<{
+    startDuration?: number | `${number}`;
+    leaveDuration?: number | `${number}`;
+  }>(),
+  {
+    startDuration: 100,
+    leaveDuration: 100,
+  }
+);
 </script>
 
 <template>