@dargmuesli/nuxt-vio 5.0.2 → 7.0.0

package/components/vio/_/VioApp.vue

@@ -2,7 +2,7 @@
   <div :data-is-loading="isLoading" data-testid="is-loading">
     <NuxtLayout>
       <!-- `NuxtLayout` can't have mulitple child nodes (https://github.com/nuxt/nuxt/issues/21759) -->
-      <NuxtPage :site-description="siteDescriptionProp" />
+      <NuxtPage />
     </NuxtLayout>
   </div>
 </template>
@@ -11,18 +11,17 @@
 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 { locale } = useI18n()
 const cookieControl = useCookieControl()
+const siteConfig = useSiteConfig()
 
 const { loadingIds, indicateLoadingDone } = useLoadingDoneIndicator('app')
 
@@ -61,9 +60,6 @@ watch(
 )
 
 // initialization
-updateSiteConfig({
-  description: siteDescriptionProp.value,
-})
 defineOgImage({
   alt: ogImageAltProp.value,
   component: ogImageComponentProp.value,
@@ -73,7 +69,7 @@ useFavicons()
 usePolyfills()
 useSchemaOrg([
   defineWebSite({
-    description: siteDescriptionProp,
+    description: siteConfig.description,
   }),
 ])
 init()

package/components/vio/_/VioError.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1>{{ `${statusCode} - ${statusReason}` }}</h1>
+    <h1>{{ `${statusCode ? `${statusCode} - ` : ''}${statusReason}` }}</h1>
     <div>
       {{ description }}
     </div>
@@ -15,12 +15,13 @@
 import { status } from '@http-util/status-i18n'
 
 export interface Props {
-  statusCode: number
+  statusCode?: number
   statusMessage?: string
   description: string
   stack?: string
 }
 const props = withDefaults(defineProps<Props>(), {
+  statusCode: undefined,
   statusMessage: undefined,
   stack: undefined,
 })

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/composables/useHeadDefault.ts

@@ -8,14 +8,13 @@ export const useHeadDefault = ({
   extension?: UseSeoMetaInput
   title: string | ComputedRef<string>
 }) => {
-  const attrs = useAttrs()
   const siteConfig = useSiteConfig()
 
   const defaults: UseSeoMetaInput = {
-    description: attrs['site-description'] as string, // TODO: remove (https://github.com/harlan-zw/nuxt-site-config/pull/7)
+    description: siteConfig.description,
     msapplicationConfig: `/assets/static/favicon/browserconfig.xml?v=${CACHE_VERSION}`,
     title,
-    twitterDescription: attrs['site-description'] as string,
+    twitterDescription: siteConfig.description,
     twitterTitle: ref(
       TITLE_TEMPLATE({
         siteName: siteConfig.name,

package/locales/de.json

@@ -1,8 +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,8 +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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "5.0.2",
+  "version": "7.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dargmuesli/vio.git"
@@ -75,9 +75,9 @@
     "@nuxtjs/html-validator": "1.5.2",
     "@nuxtjs/i18n": "8.0.0-rc.4",
     "@nuxtjs/tailwindcss": "6.8.0",
-    "@nuxtseo/module": "2.0.0-beta.29",
+    "@nuxtseo/module": "2.0.0-beta.30",
     "@pinia/nuxt": "0.4.11",
-    "@playwright/test": "1.37.1",
+    "@playwright/test": "1.38.0",
     "@tailwindcss/forms": "0.5.6",
     "@tailwindcss/typography": "0.5.10",
     "@types/cookie": "0.5.2",
@@ -92,33 +92,33 @@
     "cookie": "0.5.0",
     "cross-env": "7.0.3",
     "dayjs": "2.0.0-alpha.4",
+    "eslint": "8.49.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-compat": "4.2.0",
     "eslint-plugin-nuxt": "4.0.0",
     "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-yml": "1.9.0",
-    "eslint": "8.49.0",
     "is-https": "4.0.0",
     "jiti": "1.20.0",
     "jose": "4.14.6",
     "lint-staged": "14.0.1",
     "lodash-es": "4.17.21",
-    "nuxt": "3.7.2",
+    "nuxt": "3.7.3",
     "pinia": "2.1.6",
-    "prettier-plugin-tailwindcss": "0.5.4",
     "prettier": "3.0.3",
+    "prettier-plugin-tailwindcss": "0.5.4",
     "serve": "14.2.1",
+    "stylelint": "15.10.3",
     "stylelint-config-recommended-vue": "1.5.0",
     "stylelint-config-standard": "34.0.0",
     "stylelint-no-unsupported-browser-features": "7.0.0",
-    "stylelint": "15.10.3",
     "sweetalert2": "11.7.27",
     "tailwindcss": "3.3.3",
+    "vue": "3.3.4",
     "vue-gtag": "2.0.1",
-    "vue-tsc": "1.8.11",
-    "vue": "3.3.4"
+    "vue-tsc": "1.8.11"
   },
   "peerDependencies": {
-    "playwright-core": "1.37.1"
+    "playwright-core": "1.38.0"
   }
 }

package/plugins/siteConfig.ts

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  const { t } = nuxtApp.vueApp.$nuxt.$i18n
+
+  updateSiteConfig({
+    description: t('globalSeoSiteDescription'),
+  })
+})

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
 }