@dargmuesli/nuxt-vio 8.1.2 → 8.2.1

package/components/vio/form/VioFormContact.vue

@@ -0,0 +1,116 @@
+<template>
+  <VioForm :form="v$" :is-form-sent="isFormSent" @submit="submit">
+    <input type="hidden" name="static-form-name" value="contact" />
+    <VioFormInput
+      id-label="input-name"
+      :placeholder="t('placeholderName')"
+      :title="t('name')"
+      type="text"
+      :value="v$.name"
+      @input="form.name = $event"
+    >
+      <template #stateError>
+        <!-- <VioFormInputStateError
+            :form-input="v$.name"
+            validation-property="maxLength"
+          >
+            {{ t('globalValidationLength') }}
+          </VioFormInputStateError> -->
+        <VioFormInputStateError
+          :form-input="v$.name"
+          validation-property="required"
+        >
+          {{ t('globalValidationRequired') }}
+        </VioFormInputStateError>
+      </template>
+    </VioFormInput>
+    <VioFormInputEmailAddress
+      :form-input="v$.emailAddress"
+      @input="form.emailAddress = $event"
+    />
+    <VioFormInput
+      id-label="input-message"
+      :title="t('message')"
+      type="textarea"
+      :value="v$.message"
+    >
+      <textarea
+        v-if="v$.message"
+        :id="`${siteConfig.id}-${
+          runtimeConfig.public.vio.isInProduction ? 'prod' : 'dev'
+        }-input-message`"
+        class="form-input"
+        name="message"
+        :placeholder="t('placeholderMessage')"
+        rows="10"
+        :value="v$.message.$model"
+        @input="form.message = ($event.target as HTMLInputElement).value"
+      />
+      <template #stateError>
+        <!-- <VioFormInputStateError
+            :form-input="v$.message"
+            validation-property="maxLength"
+          >
+            {{ t('globalValidationLength') }}
+          </VioFormInputStateError> -->
+        <VioFormInputStateError
+          :form-input="v$.message"
+          validation-property="required"
+        >
+          {{ t('globalValidationRequired') }}
+        </VioFormInputStateError>
+      </template>
+    </VioFormInput>
+  </VioForm>
+</template>
+
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core'
+import { required } from '@vuelidate/validators'
+
+const { t } = useI18n()
+const runtimeConfig = useRuntimeConfig()
+const siteConfig = useSiteConfig()
+
+// data
+const form = reactive({
+  emailAddress: ref<string>(),
+  name: ref<string>(),
+  message: ref<string>(),
+})
+const isFormSent = ref(false)
+
+// methods
+const submit = async (e: Event) =>
+  !(await isFormValid({ v$, isFormSent })) ? e.preventDefault() : undefined
+
+// vuelidate
+const rules = {
+  emailAddress: {
+    // maxLength: maxLength(100),
+    required,
+  },
+  name: {
+    // maxLength: maxLength(250),
+    required,
+  },
+  message: {
+    // maxLength: maxLength(100),
+    required,
+  },
+}
+const v$ = useVuelidate(rules, form)
+</script>
+
+<i18n lang="yaml">
+de:
+  message: Nachricht
+  name: Name
+  placeholderMessage: Guten Tag, …
+  placeholderName: Manu Musterperson
+en:
+  message: Message
+  name: Name
+  placeholderMessage: Hello, …
+  placeholderName: Person Doe
+</i18n>

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

@@ -43,6 +43,7 @@
             }"
             :disabled="isDisabled"
             :placeholder="placeholder"
+            :name="name || idLabelFull"
             :readonly="isReadonly"
             :type="type"
             :value="valueFormatter(value?.$model as string)"
@@ -119,12 +120,13 @@ import type { BaseValidation } from '@vuelidate/core'
 import { consola } from 'consola'
 
 export interface Props {
+  idLabel?: string
   isDisabled?: boolean
   isOptional?: boolean
   isReadonly?: boolean
   isRequired?: boolean
   isValidatable?: boolean
-  idLabel?: string
+  name?: string
   placeholder?: string
   success?: boolean
   title: string
@@ -135,12 +137,13 @@ export interface Props {
   warning?: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
+  idLabel: undefined,
   isDisabled: false,
   isOptional: false,
   isReadonly: false,
   isRequired: false,
   isValidatable: false,
-  idLabel: undefined,
+  name: undefined,
   placeholder: undefined,
   success: false,
   type: undefined,

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

@@ -24,7 +24,6 @@
         {{ t('globalValidationLength') }}
       </VioFormInputStateError>
       <VioFormInputStateError
-        v-if="isRequired"
         :form-input="formInput"
         validation-property="required"
       >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "8.1.2",
+  "version": "8.2.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dargmuesli/vio.git"
@@ -12,7 +12,7 @@
   "engines": {
     "node": "20"
   },
-  "packageManager": "pnpm@8.7.5",
+  "packageManager": "pnpm@8.7.6",
   "files": [
     "assets",
     "components",
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@axe-core/playwright": "4.7.3",
-    "@dargmuesli/nuxt-cookie-control": "6.4.2",
+    "@dargmuesli/nuxt-cookie-control": "7.0.0-beta.1",
     "@heroicons/vue": "2.0.18",
     "@http-util/status-i18n": "0.8.1",
     "@intlify/eslint-plugin-vue-i18n": "3.0.0-next.3",
@@ -76,14 +76,14 @@
     "@nuxtjs/html-validator": "1.5.2",
     "@nuxtjs/i18n": "8.0.0-rc.4",
     "@nuxtjs/tailwindcss": "6.8.0",
-    "@nuxtseo/module": "2.0.0-beta.30",
+    "@nuxtseo/module": "2.0.0-beta.31",
     "@pinia/nuxt": "0.4.11",
-    "@playwright/test": "1.38.0",
+    "@playwright/test": "1.38.1",
     "@tailwindcss/forms": "0.5.6",
     "@tailwindcss/typography": "0.5.10",
     "@types/cookie": "0.5.2",
     "@types/lodash-es": "4.17.9",
-    "@urql/core": "4.1.2",
+    "@urql/core": "4.1.3",
     "@urql/devtools": "2.0.3",
     "@urql/exchange-graphcache": "6.3.3",
     "@urql/vue": "1.1.2",
@@ -117,9 +117,9 @@
     "tailwindcss": "3.3.3",
     "vue": "3.3.4",
     "vue-gtag": "2.0.1",
-    "vue-tsc": "1.8.11"
+    "vue-tsc": "1.8.13"
   },
   "peerDependencies": {
-    "playwright-core": "1.38.0"
+    "playwright-core": "1.38.1"
   }
 }