@viur/shop-components 0.1.15 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Frontend Vue components for the shop module of ViUR",
   "repository": {
     "type": "git",

package/src/components/AddressForm.vue

@@ -7,7 +7,7 @@
         :skelkey="state.skelkey"
         :values="{'address_type':state.address_type, 'customer_type':'private'}"
         :useCategories="false"
-        :layout="AddressFormLayout"
+        :layout="shopStore.state.UserDataLayout"
         @change="formChange"
         :default-language="state.language"
         error-style="decent"
@@ -18,7 +18,6 @@
 <script setup>
 import {computed, reactive, watch} from 'vue'
 import LoadingHandler from './LoadingHandler.vue';
-import AddressFormLayout from './AddressFormLayout.vue';
 import ViForm from "@viur/vue-utils/forms/ViForm.vue";
 import {useViurShopStore} from "../shop";
 import {useAddress} from "../composables/address";
@@ -91,4 +90,4 @@ watch(()=>addressState.billingIsShipping, (newVal,oldVal)=>{
 
 <style scoped>
 
-</style>
+</style>

package/src/components/AddressFormLayout.vue

@@ -52,12 +52,12 @@
   </slot>
 
   <slot boneName="email"
-        :widget="getBoneWidget(formState.structure['email']['type'])"
+        :widget="EmailCheckBone"
         label="placeholder">
   </slot>
 
   <slot boneName="phone"
-        :widget="getBoneWidget(formState.structure['phone']['type'])"
+        :widget="PhoneCheckBone"
         label="placeholder">
   </slot>
 
@@ -66,6 +66,8 @@
 <script setup>
 import { inject } from "vue";
 import { getBoneWidget } from "@viur/vue-utils/bones/edit";
+import EmailCheckBone from "../custombones/EmailCheckBone.vue";
+import PhoneCheckBone from "../custombones/PhoneCheckBone.vue";
 
 const formState = inject("formState");
 const formUpdate = inject("formUpdate");
@@ -114,6 +116,13 @@ const formUpdate = inject("formUpdate");
 :deep(.wrapper-bone-country){
   grid-column: 1 / span 4;
 }
+:deep(.wrapper-bone-email){
+  grid-column: 1 / span 4;
+}
+
+:deep(.wrapper-bone-phone){
+  grid-column: 1 / span 4;
+}
 
 :deep(.wrapper-bone-is_default){
   padding: var(--sl-spacing-x-small) 0;

package/src/custombones/EmailCheckBone.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="widget-bone-wrapper-email">
+  <sl-input
+    class="widget-bone widget-bone-email widget-bone-email-default"
+    :class="([`widget-bone-email-${name}`])"
+    :name="name"
+    ref="emailBone"
+    :disabled="boneState.readonly"
+    type="email"
+    :value="value"
+    @sl-change="changeEvent"
+    :required="boneState.bonestructure.required && !boneState.bonestructure.multiple  && !boneState.bonestructure.languages"
+    :placeholder="boneState.label==='placeholder'?boneState?.bonestructure?.descr:undefined"
+    :data-user-invalid="boneState.errorMessages.length===0?undefined:true"
+  ></sl-input>
+
+  <sl-input
+    class="widget-bone widget-bone-email widget-bone-email-repeat"
+    :class="([`widget-bone-email-${name}`])"
+    ref="emailBone2"
+    :disabled="boneState.readonly"
+    type="email"
+    @sl-change="changeEvent"
+    :required="boneState.bonestructure.required && !boneState.bonestructure.multiple  && !boneState.bonestructure.languages"
+    :placeholder="boneState.label==='placeholder'?boneState?.bonestructure?.descr:undefined"
+    :data-user-invalid="boneState.errorMessages.length===0?undefined:true"
+  ></sl-input>
+
+</div>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, ref, watchEffect } from "vue"
+import { useTimeoutFn } from "@vueuse/core"
+import { useI18n } from "vue-i18n"
+  defineOptions({
+    inheritAttrs: false
+  })
+  const props = defineProps( {
+    name: String,
+    value: [Object, String, Number, Boolean, Array],
+    index: Number,
+    lang: String,
+    bone:Object,
+    autofocus: Boolean
+  })
+  const i18n = useI18n()
+  const emit = defineEmits( ["change"])
+
+    const boneState = inject("boneState")
+    const state = reactive({
+
+    })
+
+    const emailBone = ref(null)
+    const emailBone2 = ref(null)
+
+    function changeEvent(event) {
+      console.dir(event.target)
+      if(emailBone.value.value!==emailBone2.value.value){
+        emailBone.value.setCustomValidity(i18n.t("messages.password_equal_error"))
+        emailBone.value.reportValidity()
+        console.log(event.target.classList)
+        if (!event.target.classList.contains('widget-bone-email-repeat')){
+          emit("change", props.name, event.target.value, props.lang, props.index,false)
+        }
+      }else{
+        emailBone.value.setCustomValidity('')
+        emit("change", props.name, event.target.value, props.lang, props.index,true)
+      }
+
+
+
+    }
+
+    watchEffect(() => {
+      if (props.autofocus) {
+        if (emailBone.value && emailBone.value !== null && emailBone !== null) {
+          const { start } = useTimeoutFn(() => {
+            emailBone.value.focus()
+          }, 600)
+
+          start()
+        }
+      }
+    })
+
+    onMounted(() => {
+      emit("change", props.name, props.value, props.lang, props.index) //init
+    })
+
+</script>
+
+<style scoped>
+sl-input {
+  width: 100%;
+
+  &::part(base) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  @media (max-width: 900px) {
+    &::part(base) {
+      border-top-right-radius: 0;
+      border-bottom-left-radius: var(--sl-border-radius-medium);
+    }
+  }
+}
+
+.widget-bone-wrapper-email{
+  display:flex;
+  gap: var(--sl-spacing-small);
+}
+</style>

package/src/custombones/PhoneCheckBone.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="widget-bone-wrapper-string">
+  <sl-input
+    class="widget-bone widget-bone-string widget-bone-string-default"
+    :class="([`widget-bone-string-${name}`])"
+    :name="name"
+    ref="stringBone"
+    :disabled="boneState.readonly"
+    :value="value"
+    @sl-change="changeEvent"
+    :required="boneState.bonestructure.required && !boneState.bonestructure.multiple  && !boneState.bonestructure.languages"
+    :placeholder="boneState.label==='placeholder'?boneState?.bonestructure?.descr:undefined"
+    :data-user-invalid="boneState.errorMessages.length===0?undefined:true"
+    :pattern="state.pattern"
+    :maxlength="boneState.maxlength"
+    :minlength="boneState.minlength"
+  ></sl-input>
+
+  <sl-input
+    class="widget-bone widget-bone-string widget-bone-string-repeat"
+    :class="([`widget-bone-email-${name}`])"
+    ref="stringBone2"
+    :disabled="boneState.readonly"
+
+    @sl-change="changeEvent"
+    :required="boneState.bonestructure.required && !boneState.bonestructure.multiple  && !boneState.bonestructure.languages"
+    :placeholder="boneState.label==='placeholder'?boneState?.bonestructure?.descr:undefined"
+    :data-user-invalid="boneState.errorMessages.length===0?undefined:true"
+    :pattern="state.pattern"
+    :maxlength="boneState.maxlength"
+    :minlength="boneState.minlength"
+  ></sl-input>
+
+</div>
+</template>
+
+<script setup>
+import { reactive, onMounted, inject, ref, watchEffect, computed } from "vue"
+import { useTimeoutFn } from "@vueuse/core"
+import { useI18n } from "vue-i18n"
+  defineOptions({
+    inheritAttrs: false
+  })
+  const props = defineProps( {
+    name: String,
+    value: [Object, String, Number, Boolean, Array],
+    index: Number,
+    lang: String,
+    bone:Object,
+    autofocus: Boolean
+  })
+  const i18n = useI18n()
+  const emit = defineEmits( ["change"])
+
+    const boneState = inject("boneState")
+    const state = reactive({
+      pattern: computed(() => {
+        let pat = boneState.params?.pattern
+        if (!pat) return undefined
+
+        if (typeof(pat) === "String"){
+          return pat
+        }
+        return pat?.[boneState.defaultLanguage]
+      }),
+      pattern_error:computed(()=>{
+        let pat = boneState.params?.pattern_error
+        if (!pat) return ''
+
+        if (typeof(pat) === "String"){
+          return pat
+        }
+        return pat?.[boneState.defaultLanguage]?pat?.[boneState.defaultLanguage]:''
+      })
+    })
+
+    const stringBone = ref(null)
+    const stringBone2 = ref(null)
+
+    function changeEvent(event) {
+      for (const bone of [stringBone, stringBone2]){
+        let valid = bone.value.reportValidity()
+        let validStates = bone.value.validity
+        if(validStates['patternMismatch']){
+          bone.value.setCustomValidity(state.pattern_error)
+          return
+        }else{
+          bone.value.setCustomValidity('')
+        }
+      }
+      if(stringBone.value.value!==stringBone2.value.value){
+        stringBone.value.setCustomValidity(i18n.t("messages.phone_equal_error"))
+        stringBone.value.reportValidity()
+        console.log(event.target.classList)
+        if (!event.target.classList.contains('widget-bone-string-repeat')){
+          emit("change", props.name, event.target.value, props.lang, props.index,false)
+        }
+      }else{
+        stringBone.value.setCustomValidity('')
+        emit("change", props.name, event.target.value, props.lang, props.index,true)
+      }
+    }
+
+    watchEffect(() => {
+      if (props.autofocus) {
+        if (stringBone.value && stringBone.value !== null && stringBone !== null) {
+          const { start } = useTimeoutFn(() => {
+            stringBone.value.focus()
+          }, 600)
+
+          start()
+        }
+      }
+    })
+
+    onMounted(() => {
+      emit("change", props.name, props.value, props.lang, props.index) //init
+    })
+
+</script>
+
+<style scoped>
+sl-input {
+  width: 100%;
+
+  &::part(base) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  @media (max-width: 900px) {
+    &::part(base) {
+      border-top-right-radius: 0;
+      border-bottom-left-radius: var(--sl-border-radius-medium);
+    }
+  }
+}
+
+.widget-bone-wrapper-string{
+  display:flex;
+  gap: var(--sl-spacing-small);
+  margin-bottom:var(--sl-spacing-small);
+}
+</style>

package/src/shop.js

@@ -3,6 +3,7 @@ import { reactive, computed, watch, shallowRef } from "vue";
 import {ShopCart, ShopUserDataGuest, ShopShippingMethod, ShopPaymentProvider, ShopOrderComplete, ShopOrderConfirm} from './Steps/index'
 import { defineStore } from "pinia";
 import { useUrlSearchParams } from '@vueuse/core'
+import AddressFormLayout from './components/AddressFormLayout.vue';
 
 import { Request } from "@viur/vue-utils";
 
@@ -119,8 +120,8 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
 
 
         //checkout
-        paymentProviderData:null
-
+        paymentProviderData:null,
+        UserDataLayout: shallowRef(AddressFormLayout)
     })
 
     function addTab({name, component, displayname, iconname, iconlibrary,active})

package/src/translations/de.js

@@ -60,5 +60,7 @@ export default {
     wait_for_payment: 'Warte auf Zahlung...',
     remove_article_from_cart: 'Wollen sie den Artikel wirklich entfernen?',
     order_check_later: 'Sie können Ihre Bestellung am Ende noch einmal überprüfen.',
+    password_equal_error: 'E-Mail-Adressen stimmen nicht überein.',
+    phone_equal_error: "Telefonnummern stimmen nicht überein."
   },
 };

package/src/translations/fr.js

@@ -54,5 +54,7 @@ export default {
     wait_for_payment: 'Warte auf Zahlung...',
     remove_article_from_cart: 'Désirez-vous vraiment supprimer cet article du panier?',
     order_check_later: 'Vous pourrez revérifier vos données avant de valider votre commande.',
+    password_equal_error: "Les adresses e-mail ne correspondent pas.",
+    phone_equal_error: "Les numéros de téléphone ne correspondent pas."
   },
 };