@dargmuesli/nuxt-vio 6.0.0 → 8.0.0

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

@@ -16,7 +16,7 @@
             'form-input-warning': warning,
             'form-input-error': value?.$error,
           }"
-          :for="idLabel"
+          :for="idLabelFull"
         >
           <span>{{ title }}</span>
           <span
@@ -36,7 +36,7 @@
           <slot v-if="$slots.default" />
           <input
             v-else
-            :id="idLabel"
+            :id="idLabelFull"
             class="form-input"
             :class="{
               'rounded-r-none': $slots.icon,
@@ -58,14 +58,14 @@
             </VioFormInputIconWrapper>
             <VioFormInputIconWrapper
               v-else-if="
-                validationProperty.$model && !validationProperty.$invalid
+                !!validationProperty.$model && !validationProperty.$invalid
               "
             >
               <VioIconCheckCircle class="text-green-600" :title="t('valid')" />
             </VioFormInputIconWrapper>
             <VioFormInputIconWrapper
               v-else-if="
-                validationProperty.$model && validationProperty.$invalid
+                !!validationProperty.$model && validationProperty.$invalid
               "
             >
               <VioIconExclamationCircle
@@ -84,6 +84,10 @@
         </span>
       </div>
       <div class="md:w-1/3" />
+      <div class="md:w-2/3">
+        <slot name="inputSuffix" />
+      </div>
+      <div class="md:w-1/3" />
       <div class="md:w-2/3">
         <slot name="stateSuccess" />
       </div>
@@ -102,6 +106,10 @@
       <div class="md:w-2/3">
         <slot name="stateError" />
       </div>
+      <div class="md:w-1/3" />
+      <div class="md:w-2/3">
+        <slot name="assistance" />
+      </div>
     </div>
   </div>
 </template>
@@ -119,7 +127,7 @@ export interface Props {
   idLabel?: string
   placeholder?: string
   success?: boolean
-  title?: string
+  title: string
   type?: string
   validationProperty?: BaseValidation
   value?: BaseValidation
@@ -135,14 +143,12 @@ const props = withDefaults(defineProps<Props>(), {
   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: []
@@ -151,11 +157,19 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const runtimeConfig = useRuntimeConfig()
+
+// data
+const idLabelFull = props.idLabel
+  ? `maevsi-${runtimeConfig.public.vio.isInProduction ? 'prod' : 'dev'}-${
+      props.idLabel
+    }`
+  : undefined
 
 // initialization
 if (
   !props.placeholder &&
-  typeProp.value &&
+  props.type &&
   ![
     'checkbox',
     'datetime-local',
@@ -164,15 +178,15 @@ if (
     'textarea',
     'tiptap',
     'radio',
-  ].includes(typeProp.value)
+  ].includes(props.type)
 ) {
   consola.warn(`placeholder is missing for ${props.idLabel}!`)
 }
 
 if (
   !props.value &&
-  typeProp.value &&
-  !['checkbox', 'select'].includes(typeProp.value)
+  props.type &&
+  !['checkbox', 'select'].includes(props.type)
 ) {
   consola.warn(`value is missing for ${props.idLabel}!`)
 }

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

@@ -0,0 +1,65 @@
+<template>
+  <VioFormInput
+    v-if="formInput"
+    :is-optional="isOptional"
+    :id-label="`input-${id}`"
+    :placeholder="t('globalPlaceholderEmailAddress')"
+    :title="title || t('emailAddress')"
+    type="email"
+    :value="formInput"
+    @input="emit('input', $event)"
+  >
+    <template #stateError>
+      <VioFormInputStateError
+        :form-input="formInput"
+        validation-property="email"
+      >
+        {{ t('globalValidationFormat') }}
+      </VioFormInputStateError>
+      <VioFormInputStateError
+        :form-input="formInput"
+        validation-property="lengthMax"
+      >
+        {{ t('globalValidationLength') }}
+      </VioFormInputStateError>
+      <VioFormInputStateError
+        v-if="isRequired"
+        :form-input="formInput"
+        validation-property="required"
+      >
+        {{ t('globalValidationRequired') }}
+      </VioFormInputStateError>
+    </template>
+  </VioFormInput>
+</template>
+
+<script setup lang="ts">
+import type { BaseValidation } from '@vuelidate/core'
+
+export interface Props {
+  formInput: BaseValidation
+  id?: string
+  isOptional?: boolean
+  isRequired?: boolean
+  title?: string
+}
+withDefaults(defineProps<Props>(), {
+  id: 'email-address',
+  isOptional: false,
+  isRequired: false,
+  title: undefined,
+})
+
+const emit = defineEmits<{
+  input: [event: string]
+}>()
+
+const { t } = useI18n()
+</script>
+
+<i18n lang="yaml">
+de:
+  emailAddress: E-Mail-Adresse
+en:
+  emailAddress: Email address
+</i18n>

package/components/vio/icon/VioIconArrowLeft.vue

@@ -0,0 +1,9 @@
+<template>
+  <VioIconContainer>
+    <ArrowLeftIcon />
+  </VioIconContainer>
+</template>
+
+<script setup lang="ts">
+import { ArrowLeftIcon } from '@heroicons/vue/24/outline'
+</script>

package/components/vio/icon/VioIconContainer.vue

@@ -7,9 +7,10 @@
 <script setup lang="ts">
 export interface Props {
   classes?: string
-  title: string
+  title?: string
 }
 withDefaults(defineProps<Props>(), {
   classes: 'h-5 md:h-6 w-5 md:w-6 shrink-0',
+  title: undefined,
 })
 </script>

package/components/vio/layout/VioLayout.vue

@@ -1,8 +1,14 @@
 <template>
   <div class="container mx-auto p-4 md:px-8">
+    <header v-if="$slots.header">
+      <slot name="header" />
+    </header>
     <main>
       <slot />
     </main>
+    <footer v-if="$slots.footer">
+      <slot name="footer" />
+    </footer>
     <CookieControl :locale="locale" />
   </div>
 </template>

package/locales/de.json

@@ -1,9 +1,11 @@
 {
+  "globalPlaceholderEmailAddress": "e-mail{'@'}adres.se",
   "globalPlaceholderUrl": "https://websei.te",
   "globalSeoSiteDescription": "Vio ist {'@'}dargmueslis Nuxt layer.",
   "globalStatusError": "Fehler",
   "globalStatusLoading": "Lade...",
   "globalValidationFailed": "Bitte überprüfe deine Eingaben 🙈",
+  "globalValidationFormat": "Falsches Format",
   "globalValidationFormatIncorrect": "Falsches Format",
   "globalValidationFormatUrlHttps": "Muss mit \"https://\" beginnen",
   "globalValidationLength": "Zu lang",

package/locales/en.json

@@ -1,9 +1,11 @@
 {
+  "globalPlaceholderEmailAddress": "email{'@'}addre.ss",
   "globalPlaceholderUrl": "https://websi.te",
   "globalSeoSiteDescription": "Vio is {'@'}dargmuesli's Nuxt layer.",
   "globalStatusError": "Error",
   "globalStatusLoading": "Loading...",
   "globalValidationFailed": "Please check your input 🙈",
+  "globalValidationFormat": "Incorrect format",
   "globalValidationFormatIncorrect": "Incorrect format",
   "globalValidationFormatUrlHttps": "Must start with \"https://\"",
   "globalValidationLength": "Too long",

package/nuxt.config.ts

@@ -126,7 +126,7 @@ export default defineNuxtConfig(
         locales: ['en', 'de'],
       },
       htmlValidator: {
-        failOnError: false, // TODO: fix invalid html in nuxt html template (https://github.com/nuxt/nuxt/issues/22526)
+        failOnError: true,
         logLevel: 'warning',
       },
       i18n: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "6.0.0",
+  "version": "8.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dargmuesli/vio.git"
@@ -67,9 +67,10 @@
   "dependencies": {
     "@axe-core/playwright": "4.7.3",
     "@dargmuesli/nuxt-cookie-control": "6.4.2",
+    "@heroicons/vue": "2.0.18",
     "@http-util/status-i18n": "0.8.1",
     "@intlify/eslint-plugin-vue-i18n": "3.0.0-next.3",
-    "@nuxt/image": "1.0.0-rc.1",
+    "@nuxt/image": "1.0.0-rc.2",
     "@nuxtjs/color-mode": "3.3.0",
     "@nuxtjs/eslint-config-typescript": "12.1.0",
     "@nuxtjs/html-validator": "1.5.2",

package/tailwind.config.ts

@@ -136,17 +136,17 @@ export default {
           },
         },
         '.form-input-error': {
-          input: {
+          '.form-input': {
             borderColor: theme('colors.red.500'),
           },
         },
         '.form-input-success': {
-          input: {
+          '.form-input': {
             borderColor: theme('colors.green.600'),
           },
         },
         '.form-input-warning': {
-          input: {
+          '.form-input': {
             borderColor: theme('colors.yellow.600'),
           },
         },

package/utils/constants.ts

@@ -49,7 +49,6 @@ export const TITLE_TEMPLATE = ({
   siteName: string
   title?: string
 }) => (title && title !== siteName ? `${title} · ${siteName}` : siteName)
-export const VALIDATION_SUGGESTION_TITLE_LENGTH_MAXIMUM = 300
 export const VERIFICATION_FORMAT_UUID = helpers.regex(REGEX_UUID)
 export const VIO_NUXT_BASE_CONFIG = ({
   defaultLocale,

package/utils/form.ts

@@ -1,19 +1,20 @@
-import type { ApiData } from '../types/api'
+import { consola } from 'consola'
 
-export const formPreSubmit = async (
-  api: ApiData,
-  v$: any,
-  isFormSent: Ref<boolean>,
-): Promise<boolean> => {
-  api.value.errors = []
+export const isFormValid = async ({
+  v$,
+  isFormSent,
+}: {
+  v$: any
+  isFormSent: Ref<boolean>
+}): Promise<boolean> => {
   v$.value.$touch()
 
-  const isFormValid = await v$.value.$validate()
-  isFormSent.value = isFormValid
+  const isValid = await v$.value.$validate()
+  isFormSent.value = isValid
 
-  if (!isFormValid) {
-    throw new Error('Form is invalid!')
+  if (!isValid) {
+    consola.error('Form in invalid!')
   }
 
-  return isFormValid
+  return isValid
 }