@dargmuesli/nuxt-vio 2.0.1 → 3.0.0-beta.10

package/app.config.ts

@@ -1,57 +1,100 @@
-import { useSeoMeta } from '@unhead/vue'
+import { useServerSeoMeta } from '@unhead/vue'
 
 export default defineAppConfig({
-  legalNotice: undefined,
-  privacyPolicy: undefined,
-  seoMeta: {
-    twitterSite: '@dargmuesli',
+  vio: {
+    pages: undefined,
+    seoMeta: undefined,
+    server: {
+      middleware: {
+        headers: {
+          csp: {
+            default: {
+              'Cross-Origin-Opener-Policy': 'same-origin',
+              // 'Cross-Origin-Embedder-Policy', 'require-corp') // https://stackoverflow.com/questions/71904052/getting-notsameoriginafterdefaultedtosameoriginbycoep-error-with-helmet
+              'Cross-Origin-Resource-Policy': 'same-origin',
+              // 'Expect-CT', 'max-age=0') // deprecated (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expect-CT)
+              NEL: '\'{"report_to":"default","max_age":31536000,"include_subdomains":true}\'',
+              'Origin-Agent-Cluster': '?1',
+              'Permissions-Policy': '',
+              'Referrer-Policy': 'no-referrer',
+              'Report-To':
+                '\'{"group":"default":"max_age":31536000:"endpoints":[{"url":"https://dargmuesli.report-uri.com/a/d/g"}]:"include_subdomains":true}\'',
+              'X-Content-Type-Options': 'nosniff',
+              'X-DNS-Prefetch-Control': 'off',
+              'X-Download-Options': 'noopen',
+              'X-Frame-Options': 'SAMEORIGIN',
+              'X-Permitted-Cross-Domain-Policies': 'none',
+              'X-XSS-Protection': '1; mode=block', // TODO: set back to `0` once CSP does not use `unsafe-*` anymore (https://github.com/maevsi/maevsi/issues/1047)
+            },
+            production: {
+              'Strict-Transport-Security':
+                'max-age=31536000; includeSubDomains; preload',
+            },
+          },
+        },
+      },
+    },
+    themeColor: undefined,
   },
-  themeColor: '#202020',
 })
 
 declare module 'nuxt/schema' {
   interface AppConfigInput {
-    legalNotice?: {
-      contact: {
-        email: string
-      }
-      responsibility: {
-        address: {
-          city: string
-          name: string
-          street: string
-        }
-      }
-      tmg: {
-        address: {
-          city: string
-          name: string
-          street: string
+    vio: {
+      pages?: {
+        legalNotice?: {
+          contact: {
+            email: string
+          }
+          responsibility: {
+            address: {
+              city: string
+              name: string
+              street: string
+            }
+          }
+          tmg: {
+            address: {
+              city: string
+              name: string
+              street: string
+            }
+          }
         }
-      }
-    }
-    privacyPolicy?: {
-      hostingCdn?: {
-        external: {
-          address: {
-            city: 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
+              }
+            }
           }
         }
       }
-      mandatoryInfo?: {
-        responsible: {
-          address: {
-            city: string
-            email: string
-            name: string
-            street: string
+      seoMeta?: Parameters<typeof useServerSeoMeta>[0]
+      server?: {
+        middleware: {
+          headers: {
+            csp: {
+              default: Record<string, string>
+              production: Record<string, string>
+            }
           }
         }
       }
+      themeColor?: string
     }
-    seoMeta?: Parameters<typeof useSeoMeta>[0]
-    themeColor?: string
   }
 }

package/components/vio/_/VioApp.vue

@@ -0,0 +1,92 @@
+<template>
+  <div :data-is-loading="isLoading" data-testid="is-loading">
+    <NuxtLayout>
+      <!-- `NuxtLayout` can't have mulitple child nodes (https://github.com/nuxt/nuxt/issues/21759) -->
+      <div>
+        <NuxtPage :site-description="siteDescriptionProp" />
+        <CookieControl :locale="locale" />
+      </div>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Locale } from '@dargmuesli/nuxt-cookie-control/dist/runtime/types'
+import type { WritableComputedRef } from 'vue'
+
+export interface Props {
+  ogImageAlt: string
+  ogImageComponent?: string
+  siteDescription: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  ogImageComponent: undefined,
+})
+const ogImageAltProp = toRef(() => props.ogImageAlt)
+const ogImageComponentProp = toRef(() => props.ogImageComponent)
+const siteDescriptionProp = toRef(() => props.siteDescription)
+
+const { $dayjs } = useNuxtApp()
+const i18n = useI18n()
+const cookieControl = useCookieControl()
+const siteConfig = useSiteConfig()
+
+const { loadingIds, indicateLoadingDone } = useLoadingDoneIndicator('app')
+
+// data
+const locale = i18n.locale as WritableComputedRef<Locale>
+
+// methods
+const init = () => {
+  if (process.client) {
+    const cookieTimezone = useCookie(TIMEZONE_COOKIE_NAME, {
+      // default: () => undefined, // setting `default` on the client side only does not write the cookie
+      httpOnly: false,
+      sameSite: 'strict',
+      secure: true,
+    })
+    // @ts-ignore `tz` should be part of `$dayjs` (https://github.com/iamkun/dayjs/issues/2106)
+    cookieTimezone.value = $dayjs.tz.guess()
+  }
+}
+
+// computations
+const isLoading = computed(() => !!loadingIds.value.length)
+
+// lifecycle
+onMounted(() => indicateLoadingDone())
+watch(
+  () => cookieControl.cookiesEnabledIds.value,
+  (current, previous) => {
+    if (
+      (!previous?.includes('ga') && current?.includes('ga')) ||
+      (previous?.includes('ga') && !current?.includes('ga'))
+    ) {
+      window.location.reload()
+    }
+  },
+  { deep: true },
+)
+
+// initialization
+updateSiteConfig({
+  description: siteDescriptionProp.value,
+})
+defineOgImage({
+  alt: ogImageAltProp.value,
+  component: ogImageComponentProp.value,
+  description: siteDescriptionProp.value,
+})
+useAppLayout()
+useFavicons()
+usePolyfills()
+useSchemaOrg([
+  defineWebSite({
+    description: siteDescriptionProp,
+    inLanguage: locale,
+    name: siteConfig.name,
+  }),
+  defineWebPage(),
+])
+init()
+</script>

package/components/{VioError.vue → vio/_/VioError.vue}

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

package/components/{VioLink.vue → vio/_/VioLink.vue}

@@ -12,7 +12,7 @@
   >
     <slot />
   </a>
-  <NuxtLink
+  <NuxtLinkLocale
     v-else
     :aria-label="ariaLabel"
     :class="classes"
@@ -20,7 +20,7 @@
     @click="emit('click')"
   >
     <slot />
-  </NuxtLink>
+  </NuxtLinkLocale>
 </template>
 
 <script setup lang="ts">

package/components/vio/button/VioButtonColored.vue

@@ -0,0 +1,52 @@
+<template>
+  <VioButton
+    :is-to-relative="isToRelative"
+    :aria-label="ariaLabel"
+    class="rounded-md border px-4 py-2 font-medium"
+    :class="
+      [
+        ...(isPrimary
+          ? [
+              'border-transparent bg-gray-800 text-text-bright hover:bg-black dark:bg-yellow-500  dark:text-gray-800 dark:hover:bg-yellow-600',
+            ]
+          : [
+              'border-gray-300 text-text-dark hover:bg-black/5 dark:border-gray-600 dark:text-text-bright dark:hover:bg-black/30',
+            ]),
+      ].join(' ')
+    "
+    :disabled="disabled"
+    :to="to"
+    :type="type"
+    @click="emit('click')"
+  >
+    <slot />
+    <template #prefix>
+      <slot name="prefix" />
+    </template>
+    <template #suffix>
+      <slot name="suffix" />
+    </template>
+  </VioButton>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  ariaLabel: string
+  disabled?: boolean
+  isPrimary?: boolean
+  isToRelative?: boolean
+  to?: string
+  type?: 'button' | 'reset' | 'submit'
+}
+withDefaults(defineProps<Props>(), {
+  disabled: false,
+  isPrimary: true,
+  isToRelative: false,
+  to: undefined,
+  type: 'button',
+})
+
+const emit = defineEmits<{
+  click: []
+}>()
+</script>

package/components/vio/card/VioCard.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="overflow-hidden rounded-lg"
+    :class="[backgroundColor, ...(isHigh ? ['px-4 py-6'] : ['p-4'])]"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  backgroundColor?: string
+  isHigh?: boolean
+}
+withDefaults(defineProps<Props>(), {
+  backgroundColor: 'bg-background-brighten dark:bg-background-darken',
+  isHigh: false,
+})
+</script>

package/components/vio/card/state/VioCardState.vue

@@ -0,0 +1,20 @@
+<template>
+  <VioCard
+    :background-color="backgroundColor"
+    class="border-0 text-center font-medium text-white"
+    :class="{ 'rounded-none': isEdgy }"
+  >
+    <slot />
+  </VioCard>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  backgroundColor?: string
+  isEdgy?: boolean
+}
+withDefaults(defineProps<Props>(), {
+  backgroundColor: undefined,
+  isEdgy: false,
+})
+</script>

package/components/vio/card/state/VioCardStateAlert.vue

@@ -0,0 +1,14 @@
+<template>
+  <VioCardState background-color="bg-red-600" :is-edgy="isEdgy" role="alert">
+    <slot />
+  </VioCardState>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  isEdgy?: boolean
+}
+withDefaults(defineProps<Props>(), {
+  isEdgy: false,
+})
+</script>

package/components/vio/form/VioForm.vue

@@ -0,0 +1,84 @@
+<template>
+  <form
+    v-if="form"
+    :class="[
+      { 'animate-shake rounded-lg border border-red-500': errors?.length },
+      formClass,
+    ]"
+    novalidate
+    @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">
+        <slot />
+        <div class="flex flex-col items-center justify-between">
+          <VioButtonColored
+            :aria-label="submitName || t('submit')"
+            :class="{
+              'animate-shake': form.$error,
+            }"
+            type="submit"
+            @click="emit('click')"
+          >
+            {{ submitName || t('submit') }}
+            <template #prefix>
+              <slot name="submit-icon" />
+            </template>
+          </VioButtonColored>
+          <VioFormInputStateError v-if="form.$error" class="mt-2">
+            {{ t('globalValidationFailed') }}
+          </VioFormInputStateError>
+        </div>
+        <VioCardStateAlert v-if="errorMessages?.length" class="my-4">
+          <VioLayoutSpanList :span="errorMessages" />
+        </VioCardStateAlert>
+        <div v-if="$slots.assistance" class="flex justify-center">
+          <slot name="assistance" />
+        </div>
+      </div>
+    </VioCard>
+  </form>
+</template>
+
+<script setup lang="ts">
+import type { BaseValidation } from '@vuelidate/core'
+
+import type { BackendError } from '../../../types/api'
+
+export interface Props {
+  errors?: BackendError[]
+  errorsPgIds?: Record<string, string>
+  form: BaseValidation
+  formClass?: string
+  isFormSent?: boolean
+  submitName?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  errors: undefined,
+  errorsPgIds: undefined,
+  formClass: undefined,
+  isFormSent: false,
+  submitName: undefined,
+})
+
+const emit = defineEmits<{
+  click: []
+  submit: [event: Event]
+}>()
+
+const { t } = useI18n()
+
+// computations
+const errorMessages = computed(() =>
+  props.errors
+    ? getCombinedErrorMessages(props.errors, props.errorsPgIds)
+    : undefined,
+)
+</script>
+
+<i18n lang="yaml">
+de:
+  submit: Absenden
+en:
+  submit: Submit
+</i18n>

package/components/vio/form/VioFormCheckbox.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <input
+      :id="`input-${formKey}`"
+      class="rounded"
+      type="checkbox"
+      :checked="value"
+      @change="emit('change', ($event.target as HTMLInputElement).checked)"
+    />
+    <label class="pl-2" :for="`input-${formKey}`"><slot /></label>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  formKey?: string
+  value?: boolean
+}
+withDefaults(defineProps<Props>(), {
+  formKey: undefined,
+  value: undefined,
+})
+
+const emit = defineEmits<{
+  change: [change: boolean]
+}>()
+</script>

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

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <div
+      :class="{
+        'form-input-success': success,
+        'form-input-warning': warning,
+        'form-input-error': value?.$error,
+      }"
+      class="flex-wrap md:flex md:items-center"
+    >
+      <div class="mb-1 md:mb-0 md:w-1/3 md:pr-4 md:text-right">
+        <label
+          class="inline-flex items-baseline gap-2 font-semibold md:flex-col md:items-end md:gap-0"
+          :class="{
+            'form-input-success': success,
+            'form-input-warning': warning,
+            'form-input-error': value?.$error,
+          }"
+          :for="idLabel"
+        >
+          <span>{{ title }}</span>
+          <span
+            class="text-xs font-medium text-gray-500 dark:text-gray-400 md:text-right"
+          >
+            <span v-if="isRequired">
+              {{ t('required') }}
+            </span>
+            <span v-if="isOptional">
+              {{ t('optional') }}
+            </span>
+          </span>
+        </label>
+      </div>
+      <div class="flex md:mt-1 md:w-2/3">
+        <div class="relative min-w-0 grow">
+          <slot v-if="$slots.default" />
+          <input
+            v-else
+            :id="idLabel"
+            class="form-input"
+            :class="{
+              'rounded-r-none': $slots.icon,
+            }"
+            :disabled="isDisabled"
+            :placeholder="placeholder"
+            :readonly="isReadonly"
+            :type="type"
+            :value="valueFormatter(value?.$model as string)"
+            @input="emit('input', ($event.target as HTMLInputElement)?.value)"
+            @click="emit('click')"
+          />
+          <div v-if="validationProperty && isValidatable">
+            <VioFormInputIconWrapper v-if="validationProperty.$pending">
+              <IconHourglass
+                class="text-blue-600"
+                :title="t('globalStatusLoading')"
+              />
+            </VioFormInputIconWrapper>
+            <VioFormInputIconWrapper
+              v-else-if="
+                validationProperty.$model && !validationProperty.$invalid
+              "
+            >
+              <IconCheckCircle class="text-green-600" :title="t('valid')" />
+            </VioFormInputIconWrapper>
+            <VioFormInputIconWrapper
+              v-else-if="
+                validationProperty.$model && validationProperty.$invalid
+              "
+            >
+              <IconExclamationCircle
+                class="text-red-600"
+                :title="t('validNot')"
+              />
+            </VioFormInputIconWrapper>
+          </div>
+        </div>
+        <span
+          v-if="$slots.icon"
+          class="inline-flex cursor-pointer items-center rounded-r-md border border-l-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-600"
+          @click="emit('icon')"
+        >
+          <slot name="icon" />
+        </span>
+      </div>
+      <div class="md:w-1/3" />
+      <div class="md:w-2/3">
+        <slot name="stateSuccess" />
+      </div>
+      <div class="md:w-1/3" />
+      <div class="md:w-2/3">
+        <slot name="stateInfo" />
+        <VioFormInputStateInfo v-if="value?.$pending">
+          {{ t('globalStatusLoading') }}
+        </VioFormInputStateInfo>
+      </div>
+      <div class="md:w-1/3" />
+      <div class="md:w-2/3">
+        <slot name="stateWarning" />
+      </div>
+      <div class="md:w-1/3" />
+      <div class="md:w-2/3">
+        <slot name="stateError" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { BaseValidation } from '@vuelidate/core'
+import { consola } from 'consola'
+
+export interface Props {
+  isDisabled?: boolean
+  isOptional?: boolean
+  isReadonly?: boolean
+  isRequired?: boolean
+  isValidatable?: boolean
+  idLabel?: string
+  placeholder?: string
+  success?: boolean
+  title?: string
+  type?: string
+  validationProperty?: BaseValidation
+  value?: BaseValidation
+  valueFormatter?: (x?: string) => typeof x | undefined
+  warning?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  isDisabled: false,
+  isOptional: false,
+  isReadonly: false,
+  isRequired: false,
+  isValidatable: false,
+  idLabel: undefined,
+  placeholder: undefined,
+  success: false,
+  title: undefined,
+  type: undefined,
+  validationProperty: undefined,
+  value: undefined,
+  valueFormatter: (x?: string) => x,
+  warning: false,
+})
+const typeProp = toRef(() => props.type)
+
+const emit = defineEmits<{
+  icon: []
+  input: [input: string]
+  click: []
+}>()
+
+const { t } = useI18n()
+
+// initialization
+if (
+  !props.placeholder &&
+  typeProp.value &&
+  ![
+    'checkbox',
+    'datetime-local',
+    'number',
+    'select',
+    'textarea',
+    'tiptap',
+    'radio',
+  ].includes(typeProp.value)
+) {
+  consola.warn(`placeholder is missing for ${props.idLabel}!`)
+}
+
+if (
+  !props.value &&
+  typeProp.value &&
+  !['checkbox', 'select'].includes(typeProp.value)
+) {
+  consola.warn(`value is missing for ${props.idLabel}!`)
+}
+</script>
+
+<i18n lang="yaml">
+de:
+  optional: optional
+  required: Pflichtfeld
+  valid: Gültig
+  validNot: Ungültig
+en:
+  optional: optional
+  required: required
+  valid: valid
+  validNot: invalid
+</i18n>

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

@@ -0,0 +1,7 @@
+<template>
+  <span class="absolute right-0 top-1/2 -translate-y-1/2 px-3">
+    <div class="rounded-full bg-gray-50">
+      <slot />
+    </div>
+  </span>
+</template>