@dargmuesli/nuxt-vio 3.0.0-beta.14 → 3.0.0-beta.16

package/components/vio/form/input/VioFormInput.vue

@@ -51,7 +51,7 @@
           />
           <div v-if="validationProperty && isValidatable">
             <VioFormInputIconWrapper v-if="validationProperty.$pending">
-              <IconHourglass
+              <VioIconHourglass
                 class="text-blue-600"
                 :title="t('globalStatusLoading')"
               />
@@ -61,14 +61,14 @@
                 validationProperty.$model && !validationProperty.$invalid
               "
             >
-              <IconCheckCircle class="text-green-600" :title="t('valid')" />
+              <VioIconCheckCircle class="text-green-600" :title="t('valid')" />
             </VioFormInputIconWrapper>
             <VioFormInputIconWrapper
               v-else-if="
                 validationProperty.$model && validationProperty.$invalid
               "
             >
-              <IconExclamationCircle
+              <VioIconExclamationCircle
                 class="text-red-600"
                 :title="t('validNot')"
               />

package/components/vio/form/input/state/VioFormInputStateError.vue

@@ -11,7 +11,7 @@
     "
     class="text-red-600"
   >
-    <IconExclamationCircle v-if="formInput && validationProperty" />
+    <VioIconExclamationCircle v-if="formInput && validationProperty" />
     <slot />
   </VioFormInputState>
 </template>

package/components/vio/form/input/state/VioFormInputStateInfo.vue

@@ -11,7 +11,7 @@
     "
     class="text-gray-500 dark:text-gray-400"
   >
-    <IconInformationCircle />
+    <VioIconInformationCircle />
     <slot />
   </VioFormInputState>
 </template>

package/components/vio/icon/IconArrowRight.vue

@@ -1,5 +1,5 @@
 <template>
-  <IconContainer
+  <VioIconContainer
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
@@ -11,7 +11,7 @@
       stroke-linejoin="round"
       d="M14 5l7 7m0 0l-7 7m7-7H3"
     />
-  </IconContainer>
+  </VioIconContainer>
 </template>
 
 <script setup lang="ts">

package/components/vio/icon/IconCalendar.vue

@@ -1,5 +1,5 @@
 <template>
-  <IconContainer
+  <VioIconContainer
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
@@ -11,7 +11,7 @@
       stroke-width="2"
       d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
     />
-  </IconContainer>
+  </VioIconContainer>
 </template>
 
 <script setup lang="ts">

package/components/vio/icon/IconCheckCircle.vue

@@ -1,5 +1,5 @@
 <template>
-  <IconContainer
+  <VioIconContainer
     viewBox="0 0 20 20"
     fill="currentColor"
     :title="title || t('title')"
@@ -9,7 +9,7 @@
       d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
       clip-rule="evenodd"
     />
-  </IconContainer>
+  </VioIconContainer>
 </template>
 
 <script setup lang="ts">

package/components/vio/icon/IconDownload.vue

@@ -1,5 +1,5 @@
 <template>
-  <IconContainer
+  <VioIconContainer
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
@@ -11,7 +11,7 @@
       stroke-width="2"
       d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
     />
-  </IconContainer>
+  </VioIconContainer>
 </template>
 
 <script setup lang="ts">

package/components/vio/icon/IconExclamationCircle.vue

@@ -1,5 +1,5 @@
 <template>
-  <IconContainer
+  <VioIconContainer
     viewBox="0 0 20 20"
     fill="currentColor"
     :title="title || t('title')"
@@ -9,7 +9,7 @@
       d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
       clip-rule="evenodd"
     />
-  </IconContainer>
+  </VioIconContainer>
 </template>
 
 <script setup lang="ts">

package/components/vio/icon/IconHome.vue

@@ -1,5 +1,5 @@
 <template>
-  <IconContainer
+  <VioIconContainer
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
@@ -11,7 +11,7 @@
       stroke-width="2"
       d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
     />
-  </IconContainer>
+  </VioIconContainer>
 </template>
 
 <script setup lang="ts">

package/components/vio/icon/IconHourglass.vue

@@ -1,5 +1,5 @@
 <template>
-  <IconContainer
+  <VioIconContainer
     aria-hidden="true"
     focusable="false"
     data-prefix="fas"
@@ -12,7 +12,7 @@
       fill="currentColor"
       d="M352 0C369.7 0 384 14.33 384 32C384 49.67 369.7 64 352 64V74.98C352 117.4 335.1 158.1 305.1 188.1L237.3 256L305.1 323.9C335.1 353.9 352 394.6 352 437V448C369.7 448 384 462.3 384 480C384 497.7 369.7 512 352 512H32C14.33 512 0 497.7 0 480C0 462.3 14.33 448 32 448V437C32 394.6 48.86 353.9 78.86 323.9L146.7 256L78.86 188.1C48.86 158.1 32 117.4 32 74.98V64C14.33 64 0 49.67 0 32C0 14.33 14.33 0 32 0H352zM111.1 128H272C282.4 112.4 288 93.98 288 74.98V64H96V74.98C96 93.98 101.6 112.4 111.1 128zM111.1 384H272C268.5 378.7 264.5 373.7 259.9 369.1L192 301.3L124.1 369.1C119.5 373.7 115.5 378.7 111.1 384V384z"
     />
-  </IconContainer>
+  </VioIconContainer>
 </template>
 
 <script setup lang="ts">

package/components/vio/layout/VioLayoutBreadcrumbs.vue

@@ -6,7 +6,7 @@
       :is-colored="false"
       :to="localePath('/')"
     >
-      <IconHome classes="h-6 w-6" />
+      <VioIconHome classes="h-6 w-6" />
     </VioLink>
     <ul v-if="prefixes" class="flex items-center gap-2">
       <li

package/components/vio/layout/VioLayoutFooter.vue

@@ -3,7 +3,7 @@
     <div class="flex flex-col gap-8">
       <div class="flex items-center">
         <VioLayoutHr />
-        <IconLogo class="mx-12 h-12 w-12 opacity-60 brightness-0 invert" />
+        <slot name="logo" />
         <VioLayoutHr />
       </div>
       <!-- Justifying evenly, instead of "between", centers a single element. -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "3.0.0-beta.14",
+  "version": "3.0.0-beta.16",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/utils/constants.ts

@@ -30,3 +30,48 @@ export const I18N_VUE_CONFIG = {
 export const TIMEZONE_COOKIE_NAME = [COOKIE_PREFIX, 'tz'].join(COOKIE_SEPARATOR)
 export const TIMEZONE_HEADER_KEY = `X-${SITE_NAME}-Timezone`
 export const VALIDATION_SUGGESTION_TITLE_LENGTH_MAXIMUM = 300
+export const VIO_NUXT_BASE_CONFIG = ({
+  baseUrl,
+  siteName,
+  stagingHost,
+}: {
+  baseUrl: string
+  siteName: string
+  stagingHost: string
+}) => ({
+  app: {
+    head: {
+      title: SITE_NAME, // fallback data to prevent invalid html at generation
+    },
+  },
+  runtimeConfig: {
+    public: {
+      i18n: {
+        baseUrl,
+      },
+      vio: {
+        stagingHost:
+          process.env.NODE_ENV !== 'production' &&
+          !process.env.NUXT_PUBLIC_STACK_DOMAIN
+            ? stagingHost
+            : undefined,
+      },
+    },
+  },
+  typescript: {
+    tsConfig: {
+      compilerOptions: {
+        esModuleInterop: true,
+        // moduleResolution: 'bundler',
+        // noErrorTruncation: true,
+      },
+    },
+  },
+
+  // modules
+  i18n: I18N_MODULE_CONFIG, // `langDir`, `lazy` and `locales` must be configured to extend a layer having lazy-loaded translations (https://v8.i18n.nuxtjs.org/guide/layers#locales)
+  site: {
+    name: siteName,
+    url: baseUrl,
+  },
+})

package/components/vio/layout/VioLayoutHeader.vue

@@ -1,101 +0,0 @@
-<template>
-  <header class="mb-8 flex items-center justify-between gap-4">
-    <VioButton :aria-label="t('creal')" :to="localePath('/')">
-      <span class="text-lg font-bold">{{ t('creal') }}</span>
-      <template #prefix>
-        <IconLogo class="h-10 w-10" />
-      </template>
-    </VioButton>
-    <VioLink
-      v-if="eventsCurrentCount"
-      class="flex items-center gap-2 rounded-full border px-4 py-2 font-bold focus:rounded-full sm:px-4"
-      :is-colored="false"
-      :to="localePath('/events')"
-    >
-      <VioLayoutLivePulse />
-      <span class="hidden whitespace-nowrap sm:inline">
-        {{ t('live') }}
-      </span>
-    </VioLink>
-    <VioLink
-      v-else-if="eventsFutureCount"
-      class="flex items-center gap-2 rounded-full border px-2 py-2 font-bold focus:rounded-full sm:px-4"
-      :is-colored="false"
-      :to="localePath('/events')"
-    >
-      <VioLayoutLivePulse />
-      <span class="hidden whitespace-nowrap sm:inline">
-        {{ t('eventsFuture') }}
-      </span>
-    </VioLink>
-    <VioButton
-      :aria-label="t('bookCreal')"
-      class="basis-0 text-lg font-bold"
-      :is-colored="false"
-      :to="`mailto:e-mail+creal@jonas-thelemann.de?subject=${encodeURIComponent(
-        t('bookingSubject'),
-      )}`"
-    >
-      <span class="basis-0 whitespace-nowrap">{{ t('bookCreal') }}</span>
-      <template #suffix>
-        <IconArrowRight />
-      </template>
-    </VioButton>
-  </header>
-</template>
-
-<script setup lang="ts">
-const { t } = useI18n()
-const localePath = useLocalePath()
-const strapiFetch = useStrapiFetch()
-const dateTime = useDateTime()
-
-// async data
-let eventsCurrentCount = 0
-let eventsFutureCount = 0
-
-// data
-const now = dateTime()
-
-// methods
-const init = async () => {
-  eventsCurrentCount = (
-    (await strapiFetch('/events', {
-      query: {
-        'filters[$and][0][dateStart][$lte]': now.toISOString(),
-        'filters[$and][1][$or][0][dateEnd][$gt]': now.toISOString(),
-        'filters[$and][1][$or][1][dateStart][$gte]': now
-          .startOf('day')
-          .toISOString(),
-      },
-    })) as any
-  ).meta.pagination.total
-  eventsFutureCount = (
-    (await strapiFetch('/events', {
-      query: {
-        'filters[dateStart][$gt]': now.toISOString(),
-      },
-    })) as any
-  ).meta.pagination.total
-}
-
-// initialization
-try {
-  await init()
-} catch (error: any) {}
-</script>
-
-<i18n lang="yaml">
-en:
-  bookCreal: Book cReal
-  bookingSubject: Booking Request
-  creal: cReal
-  eventsFuture: Upcoming events
-  live: Live
-de:
-  bookCreal: cReal buchen
-  bookingSubject: Buchungsanfrage
-  creal: cReal
-  eventsFuture: Kommende Veranstaltungen
-  live: Live
-</i18n>