@dargmuesli/nuxt-vio 3.0.0-beta.2 → 3.0.0-beta.21

package/app.config.ts

@@ -2,11 +2,8 @@ import { useServerSeoMeta } from '@unhead/vue'
 
 export default defineAppConfig({
   vio: {
-    legalNotice: undefined,
-    privacyPolicy: undefined,
-    seoMeta: {
-      twitterSite: '@dargmuesli',
-    },
+    pages: undefined,
+    seoMeta: undefined,
     server: {
       middleware: {
         headers: {
@@ -37,55 +34,57 @@ export default defineAppConfig({
         },
       },
     },
-    themeColor: '#202020',
+    themeColor: undefined,
   },
 })
 
 declare module 'nuxt/schema' {
-  interface AppConfig {
+  interface AppConfigInput {
     vio: {
-      legalNotice?: {
-        contact: {
-          email: string
-        }
-        responsibility: {
-          address: {
-            city: string
-            name: string
-            street: string
-          }
-        }
-        tmg: {
-          address: {
-            city: string
-            name: string
-            street: string
+      pages?: {
+        legalNotice?: {
+          contact: {
+            email: string
           }
-        }
-      }
-      privacyPolicy?: {
-        hostingCdn?: {
-          external: {
+          responsibility: {
             address: {
               city: string
               name: string
               street: string
             }
           }
-        }
-        mandatoryInfo?: {
-          responsible: {
+          tmg: {
             address: {
               city: string
-              email: string
               name: string
               street: string
             }
           }
         }
+        privacyPolicy?: {
+          hostingCdn?: {
+            external: {
+              address: {
+                city: string
+                name: string
+                street: string
+              }
+            }
+          }
+          mandatoryInfo?: {
+            responsible: {
+              address: {
+                city: string
+                email: string
+                name: string
+                street: string
+              }
+            }
+          }
+        }
       }
       seoMeta?: Parameters<typeof useServerSeoMeta>[0]
-      server: {
+      server?: {
         middleware: {
           headers: {
             csp: {

package/assets/css/tailwind.css

@@ -1,43 +1,58 @@
+/* stylelint-disable at-rule-no-unknown */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+/* stylelint-enable at-rule-no-unknown */
 
+/* doiuse-disable css-cascade-layers */
 @layer base {
+  /* doiuse-enable css-cascade-layers */
   a:focus {
-    @apply outline-none ring;
+    /* doiuse-disable css-nesting */
+    @apply outline-none ring; /* doiuse-enable css-nesting */
   }
 
   button:focus {
-    @apply outline-none ring;
+    /* doiuse-disable css-nesting */
+    @apply outline-none ring; /* doiuse-enable css-nesting */
   }
 
   thead {
-    @apply sticky top-0 z-10 vio-bg-darken;
+    /* doiuse-disable css-nesting */
+    @apply vio-bg-darken sticky top-0 z-10; /* doiuse-enable css-nesting */
   }
 
   tbody {
-    @apply divide-y vio-divide-darken;
+    /* doiuse-disable css-nesting */
+    @apply vio-divide-darken divide-y; /* doiuse-enable css-nesting */
   }
 }
 
+/* doiuse-disable css-cascade-layers */
 @layer utilities {
+  /* doiuse-enable css-cascade-layers */
   .vio-prose {
-    @apply m-auto prose dark:prose-invert prose-sm sm:prose-base lg:prose-lg xl:prose-xl; /* 2xl:prose-2xl */
+    /* doiuse-disable css-nesting */
+    @apply prose prose-sm dark:prose-invert sm:prose-base lg:prose-lg xl:prose-xl; /* 2xl:prose-2xl */ /* doiuse-enable css-nesting */
   }
 
   .vio-prose-fullwidth {
-    @apply vio-prose max-w-full sm:max-w-full md:max-w-full xl:max-w-full 2xl:max-w-full;
+    /* doiuse-disable css-nesting */
+    @apply vio-prose max-w-full sm:max-w-full md:max-w-full xl:max-w-full 2xl:max-w-full; /* doiuse-enable css-nesting */
   }
 
   .vio-divide-darken {
-    @apply divide-background-brighten dark:divide-background-darken;
+    /* doiuse-disable css-nesting */
+    @apply divide-background-brighten dark:divide-background-darken; /* doiuse-enable css-nesting */
   }
 
   .vio-bg-darken {
-    @apply bg-background-brighten dark:bg-background-darken;
+    /* doiuse-disable css-nesting */
+    @apply bg-background-brighten dark:bg-background-darken; /* doiuse-enable css-nesting */
   }
 
   .vio-border-darken {
-    @apply border-background-brighten dark:border-background-darken;
+    /* doiuse-disable css-nesting */
+    @apply border-background-brighten dark:border-background-darken; /* doiuse-enable css-nesting */
   }
 }

package/components/vio/_/VioApp.vue

@@ -3,7 +3,7 @@
     <NuxtLayout>
       <!-- `NuxtLayout` can't have mulitple child nodes (https://github.com/nuxt/nuxt/issues/21759) -->
       <div>
-        <NuxtPage />
+        <NuxtPage :site-description="siteDescriptionProp" />
         <CookieControl :locale="locale" />
       </div>
     </NuxtLayout>
@@ -29,6 +29,7 @@ const siteDescriptionProp = toRef(() => props.siteDescription)
 const { $dayjs } = useNuxtApp()
 const i18n = useI18n()
 const cookieControl = useCookieControl()
+const siteConfig = useSiteConfig()
 
 const { loadingIds, indicateLoadingDone } = useLoadingDoneIndicator('app')
 
@@ -37,6 +38,8 @@ const locale = i18n.locale as WritableComputedRef<Locale>
 
 // methods
 const init = () => {
+  $dayjs.locale(locale.value)
+
   if (process.client) {
     const cookieTimezone = useCookie(TIMEZONE_COOKIE_NAME, {
       // default: () => undefined, // setting `default` on the client side only does not write the cookie
@@ -68,7 +71,6 @@ watch(
 )
 
 // initialization
-init()
 updateSiteConfig({
   description: siteDescriptionProp.value,
 })
@@ -79,4 +81,14 @@ defineOgImage({
 })
 useAppLayout()
 useFavicons()
+usePolyfills()
+useSchemaOrg([
+  defineWebSite({
+    description: siteDescriptionProp,
+    inLanguage: locale,
+    name: siteConfig.name,
+  }),
+  defineWebPage(),
+])
+init()
 </script>

package/components/vio/_/VioError.vue

@@ -3,7 +3,10 @@
   <div>
     {{ description }}
   </div>
-  <pre v-if="stack && !runtimeConfig.public.isInProduction" v-html="stack" />
+  <pre
+    v-if="stack && !runtimeConfig.public.vio.isInProduction"
+    v-html="stack"
+  />
 </template>
 
 <script setup lang="ts">

package/components/vio/_/VioLink.vue

@@ -1,9 +1,9 @@
 <template>
   <a
-    v-if="to.match(/^((ftp|http(s)?):\/\/|(mailto):)/)"
+    v-if="to?.toString().match(/^((ftp|http(s)?):\/\/|(mailto):)/)"
     :aria-label="ariaLabel"
     :class="classes"
-    :href="to"
+    :href="to.toString()"
     :rel="
       [...(nofollow ? ['nofollow'] : []), 'noopener', 'noreferrer'].join(' ')
     "
@@ -12,7 +12,7 @@
   >
     <slot />
   </a>
-  <NuxtLink
+  <NuxtLinkLocale
     v-else
     :aria-label="ariaLabel"
     :class="classes"
@@ -20,17 +20,19 @@
     @click="emit('click')"
   >
     <slot />
-  </NuxtLink>
+  </NuxtLinkLocale>
 </template>
 
 <script setup lang="ts">
+import { NuxtLinkProps } from '#app'
+
 export interface Props {
   ariaLabel?: string
   isColored?: boolean
   isToRelative?: boolean
   isUnderlined?: boolean
   nofollow?: boolean
-  to: string
+  to: NuxtLinkProps['to']
 }
 const props = withDefaults(defineProps<Props>(), {
   ariaLabel: undefined,

package/components/vio/form/VioForm.vue

@@ -9,7 +9,7 @@
     @submit="(e) => emit('submit', e)"
   >
     <VioCard class="flex flex-col" is-high>
-      <div class="flex flex-col min-h-0 overflow-y-auto gap-6">
+      <div class="flex min-h-0 flex-col gap-6 overflow-y-auto">
         <slot />
         <div class="flex flex-col items-center justify-between">
           <VioButtonColored
@@ -43,7 +43,7 @@
 <script setup lang="ts">
 import type { BaseValidation } from '@vuelidate/core'
 
-import type { BackendError } from '~/../types/api'
+import type { BackendError } from '../../../types/api'
 
 export interface Props {
   errors?: BackendError[]

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

@@ -51,9 +51,9 @@
           />
           <div v-if="validationProperty && isValidatable">
             <VioFormInputIconWrapper v-if="validationProperty.$pending">
-              <IconHourglass
+              <VioIconHourglass
                 class="text-blue-600"
-                :title="t('globalLoading')"
+                :title="t('globalStatusLoading')"
               />
             </VioFormInputIconWrapper>
             <VioFormInputIconWrapper
@@ -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')"
               />
@@ -91,7 +91,7 @@
       <div class="md:w-2/3">
         <slot name="stateInfo" />
         <VioFormInputStateInfo v-if="value?.$pending">
-          {{ t('globalLoading') }}
+          {{ t('globalStatusLoading') }}
         </VioFormInputStateInfo>
       </div>
       <div class="md:w-1/3" />

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 brightness-0 opacity-60 invert" />
+        <slot name="logo" />
         <VioLayoutHr />
       </div>
       <!-- Justifying evenly, instead of "between", centers a single element. -->
@@ -24,11 +24,11 @@
 
 <script setup lang="ts">
 const { t } = useI18n()
-const config = useRuntimeConfig()
+const runtimeConfig = useRuntimeConfig()
 
 // computations
 const year = computed(() =>
-  config.public.isTesting ? 1337 : new Date().getFullYear(),
+  runtimeConfig.public.vio.isTesting ? 1337 : new Date().getFullYear(),
 )
 </script>
 

package/components/vio/layout/VioLayoutFooterCategory.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-1 flex-col items-start p-4 basis-1/2 md:flex-none md:basis-auto gap-2"
+    class="flex flex-1 basis-1/2 flex-col items-start gap-2 p-4 md:flex-none md:basis-auto"
   >
     <span class="whitespace-nowrap text-lg font-medium leading-7">
       {{ heading }}

package/components/vio/loader/indicator/VioLoaderIndicator.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     class="flex h-full items-center justify-center"
-    :title="t('globalLoading')"
+    :title="t('globalStatusLoading')"
   >
-    <div class="flex items-center justify-center w-1/2">
+    <div class="flex w-1/2 items-center justify-center">
       <slot />
     </div>
   </div>

package/components/vio/loader/indicator/VioLoaderIndicatorPing.vue

@@ -1,8 +1,8 @@
 <template>
   <VioLoaderIndicator>
     <div
-      class="w-1/2 aspect-square animate-ping rounded-full bg-gray-500"
-      :title="t('globalLoading')"
+      class="aspect-square w-1/2 animate-ping rounded-full bg-gray-500"
+      :title="t('globalStatusLoading')"
     />
   </VioLoaderIndicator>
 </template>

package/components/vio/page/VioPageLegalNotice.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vio-prose">
+  <div class="vio-prose m-auto">
     <h1>{{ title }}</h1>
     <h2>{{ t('tmg') }}</h2>
     <address>
@@ -9,13 +9,13 @@
           <br />
         </template>
         <template #city>
-          {{ appConfig.legalNotice.tmg.address.city }}
+          {{ appConfig.vio.pages.legalNotice.tmg.address.city }}
         </template>
         <template #name>
-          {{ appConfig.legalNotice.tmg.address.name }}
+          {{ appConfig.vio.pages.legalNotice.tmg.address.name }}
         </template>
         <template #street>
-          {{ appConfig.legalNotice.tmg.address.street }}
+          {{ appConfig.vio.pages.legalNotice.tmg.address.street }}
         </template>
       </i18n-t>
     </address>
@@ -24,7 +24,9 @@
     <p>
       <slot v-if="$slots.contactEmail" name="contactEmail" />
       <span v-else>
-        {{ t('email', { email: appConfig.legalNotice.contact.email }) }}
+        {{
+          t('email', { email: appConfig.vio.pages.legalNotice.contact.email })
+        }}
       </span>
     </p>
 
@@ -36,13 +38,13 @@
           <br />
         </template>
         <template #city>
-          {{ appConfig.legalNotice.responsibility.address.city }}
+          {{ appConfig.vio.pages.legalNotice.responsibility.address.city }}
         </template>
         <template #name>
-          {{ appConfig.legalNotice.responsibility.address.name }}
+          {{ appConfig.vio.pages.legalNotice.responsibility.address.name }}
         </template>
         <template #street>
-          {{ appConfig.legalNotice.responsibility.address.street }}
+          {{ appConfig.vio.pages.legalNotice.responsibility.address.street }}
         </template>
       </i18n-t>
     </address>
@@ -73,7 +75,7 @@ const { t } = useI18n()
 const title = t('title')
 
 // initialization
-useServerSeoMeta({ title })
+useHeadDefault({ title })
 </script>
 
 <i18n lang="yaml">

package/components/vio/page/VioPagePrivacyPolicy.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vio-prose">
+  <div class="vio-prose m-auto">
     <h1>{{ title }}</h1>
     <ol v-if="isEnabled">
       <li v-if="isEnabled.summary">
@@ -64,14 +64,21 @@
                   <br />
                 </template>
                 <template #city>
-                  {{ appConfig.privacyPolicy.hostingCdn.external.address.city }}
+                  {{
+                    appConfig.vio.pages.privacyPolicy.hostingCdn.external
+                      .address.city
+                  }}
                 </template>
                 <template #name>
-                  {{ appConfig.privacyPolicy.hostingCdn.external.address.name }}
+                  {{
+                    appConfig.vio.pages.privacyPolicy.hostingCdn.external
+                      .address.name
+                  }}
                 </template>
                 <template #street>
                   {{
-                    appConfig.privacyPolicy.hostingCdn.external.address.street
+                    appConfig.vio.pages.privacyPolicy.hostingCdn.external
+                      .address.street
                   }}
                 </template>
               </i18n-t>
@@ -109,29 +116,29 @@
                 </template>
                 <template #city>
                   {{
-                    appConfig.privacyPolicy.mandatoryInfo.responsible.address
-                      .city
+                    appConfig.vio.pages.privacyPolicy.mandatoryInfo.responsible
+                      .address.city
                   }}
                 </template>
                 <template #email>
                   {{
                     t('email', {
                       email:
-                        appConfig.privacyPolicy.mandatoryInfo.responsible
-                          .address.email,
+                        appConfig.vio.pages.privacyPolicy.mandatoryInfo
+                          .responsible.address.email,
                     })
                   }}
                 </template>
                 <template #name>
                   {{
-                    appConfig.privacyPolicy.mandatoryInfo.responsible.address
-                      .name
+                    appConfig.vio.pages.privacyPolicy.mandatoryInfo.responsible
+                      .address.name
                   }}
                 </template>
                 <template #street>
                   {{
-                    appConfig.privacyPolicy.mandatoryInfo.responsible.address
-                      .street
+                    appConfig.vio.pages.privacyPolicy.mandatoryInfo.responsible
+                      .address.street
                   }}
                 </template>
               </i18n-t>
@@ -502,7 +509,7 @@ const { t } = useI18n()
 const title = t('title')
 
 // initialization
-useServerSeoMeta({ title })
+useHeadDefault({ title })
 </script>
 
 <i18n lang="yaml">