@dargmuesli/nuxt-vio 2.0.0 → 3.0.0-beta.1

package/app.config.ts

@@ -1,8 +1,50 @@
-import { useSeoMeta } from '@unhead/vue'
+import { useServerSeoMeta } from '@unhead/vue'
 
 export default defineAppConfig({
-  legalNotice: undefined as
-    | {
+  vio: {
+    legalNotice: undefined,
+    privacyPolicy: undefined,
+    seoMeta: {
+      twitterSite: '@dargmuesli',
+    },
+    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: '#202020',
+  },
+})
+
+declare module 'nuxt/schema' {
+  interface AppConfig {
+    vio: {
+      legalNotice?: {
         contact: {
           email: string
         }
@@ -21,9 +63,7 @@ export default defineAppConfig({
           }
         }
       }
-    | undefined,
-  privacyPolicy: undefined as
-    | {
+      privacyPolicy?: {
         hostingCdn?: {
           external: {
             address: {
@@ -44,9 +84,18 @@ export default defineAppConfig({
           }
         }
       }
-    | undefined,
-  seoMeta: {
-    twitterSite: '@dargmuesli',
-  } as Parameters<typeof useSeoMeta>[0] | undefined,
-  themeColor: '#202020' as string | undefined,
-})
+      seoMeta?: Parameters<typeof useServerSeoMeta>[0]
+      server: {
+        middleware: {
+          headers: {
+            csp: {
+              default: Record<string, string>
+              production: Record<string, string>
+            }
+          }
+        }
+      }
+      themeColor?: string
+    }
+  }
+}

package/components/{VioApp.vue → _/VioApp.vue}

@@ -14,19 +14,36 @@
 import { Locale } from '@dargmuesli/nuxt-cookie-control/dist/runtime/types'
 
 export interface Props {
-  siteDescription: string
   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 { locale } = useI18n()
 const cookieControl = useCookieControl()
 
 const { loadingIds, indicateLoadingDone } = useLoadingDoneIndicator('app')
 
+// 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)
 
@@ -46,13 +63,14 @@ watch(
 )
 
 // initialization
+init()
 updateSiteConfig({
-  description: props.siteDescription,
+  description: siteDescriptionProp.value,
 })
 defineOgImage({
-  alt: props.ogImageAlt,
-  component: props.ogImageComponent,
-  description: props.siteDescription,
+  alt: ogImageAltProp.value,
+  component: ogImageComponentProp.value,
+  description: siteDescriptionProp.value,
 })
 useAppLayout()
 useFavicons()

package/components/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/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/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/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/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/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/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('globalLoading')"
+              />
+            </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('globalLoading') }}
+        </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/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>

package/components/form/input/VioFormInputUrl.vue

@@ -0,0 +1,54 @@
+<template>
+  <VioFormInput
+    v-if="formInput"
+    :is-optional="isOptional"
+    :id-label="`input-${id}`"
+    :placeholder="t('globalPlaceholderUrl')"
+    :title="t('url')"
+    type="url"
+    :value="formInput"
+    @input="emit('input', $event)"
+  >
+    <template #stateError>
+      <VioFormInputStateError
+        :form-input="formInput"
+        validation-property="maxLength"
+      >
+        {{ t('globalValidationLength') }}
+      </VioFormInputStateError>
+      <VioFormInputStateError
+        :form-input="formInput"
+        validation-property="formatUrlHttps"
+      >
+        {{ t('globalValidationFormatUrlHttps') }}
+      </VioFormInputStateError>
+    </template>
+  </VioFormInput>
+</template>
+
+<script setup lang="ts">
+import type { BaseValidation } from '@vuelidate/core'
+
+export interface Props {
+  formInput: BaseValidation
+  id?: string
+  isOptional?: boolean
+}
+withDefaults(defineProps<Props>(), {
+  id: 'phone-number',
+  isOptional: false,
+})
+
+const emit = defineEmits<{
+  input: [event: string]
+}>()
+
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  url: Weblink
+en:
+  url: Weblink
+</i18n>

package/components/form/input/state/VioFormInputState.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex items-center gap-1">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,32 @@
+<template>
+  <VioFormInputState
+    v-if="
+      (!formInput && !validationProperty) ||
+      (formInput &&
+        formInput[isValidationLive ? '$invalid' : '$error'] &&
+        !formInput.$pending &&
+        validationProperty &&
+        validationProperty in formInput &&
+        formInput[validationProperty].$invalid)
+    "
+    class="text-red-600"
+  >
+    <IconExclamationCircle v-if="formInput && validationProperty" />
+    <slot />
+  </VioFormInputState>
+</template>
+
+<script setup lang="ts">
+import type { BaseValidation } from '@vuelidate/core'
+
+export interface Props {
+  formInput?: BaseValidation
+  isValidationLive?: boolean
+  validationProperty?: string
+}
+withDefaults(defineProps<Props>(), {
+  formInput: undefined,
+  isValidationLive: false,
+  validationProperty: undefined,
+})
+</script>

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

@@ -0,0 +1,32 @@
+<template>
+  <VioFormInputState
+    v-if="
+      (!formInput && !validationProperty) ||
+      (formInput &&
+        formInput[isValidationLive ? '$invalid' : '$error'] &&
+        !formInput.$pending &&
+        validationProperty &&
+        validationProperty in formInput &&
+        formInput[validationProperty].$invalid)
+    "
+    class="text-gray-500 dark:text-gray-400"
+  >
+    <IconInformationCircle />
+    <slot />
+  </VioFormInputState>
+</template>
+
+<script setup lang="ts">
+import type { BaseValidation } from '@vuelidate/core'
+
+export interface Props {
+  formInput?: BaseValidation
+  isValidationLive?: boolean
+  validationProperty?: string
+}
+withDefaults(defineProps<Props>(), {
+  formInput: undefined,
+  isValidationLive: false,
+  validationProperty: undefined,
+})
+</script>