@zap-wunschlachen/wl-shared-components 1.0.24 → 1.0.26

package/src/components/OtpInput/OtpInput.vue

@@ -1,144 +1,144 @@
-<template>
-  <form class="wl-otp-input" @submit.prevent="props.submitFn" aria-labelledby="page-heading"
-    :aria-describedby="error ? 'form-error' : undefined" data-testid="root">
-    <div class="title-container">
-      <h2 id="page-heading" ref="heading">{{ t('wl.otp_input.enter_sms_code') }}</h2>
-      <p>{{ t('wl.otp_input.code_was_sent', { phoneNumber }) }}</p>
-    </div>
-
-    <div class="input-container">
-      <v-otp-input 
-        v-model="internalValue" 
-        autofocus
-        rounded="lg"
-        :loading="loading" 
-        :error="error" 
-        :focus-all="error"
-        :focused="error" 
-        @update:model-value="onResetError"
-        type="number"
-      />
-    </div>
-
-    <div class="message-container">
-      <p :id="error ? 'form-error' : 'form-success'" :style="statusMessageStyle"
-        :role="error ? 'alert' : 'status'"
-        :aria-live="error ? 'assertive' : 'polite'" aria-atomic="true">
-        {{ message }}
-      </p>
-    </div>
-
-    <div class="button-container">
-      <slot name="buttons">
-        <Button :label="t('wl.otp_input.confirm')" :disabled="disableSubmitBtn" width="226" @click="onSubmit" type="submit" />
-        <Button :label="t('wl.otp_input.resend')" variant='outlined' :disabled="disableResendBtn" width="226" @click="onResend" />
-      </slot>
-    </div>
-  </form>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, type CSSProperties, PropType } from 'vue';
-import './OtpInput.css';
-import Button from '../Button/Button.vue';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-const props = defineProps({
-  phoneNumber: {
-    type: String,
-    required: true
-  },
-
-  message: {
-    type: String,
-    default: ''
-  },
-
-  otpState: {
-    type: String,
-    default: 'default'
-  },
-
-  submitFn: {
-    type: Function,
-    required: true
-  },
-
-  resendFn: {
-    type: Function,
-    required: true
-  },
-
-  loading: {
-    type: Boolean,
-    default: false
-  },
-
-  colors: {
-    type: Object as PropType<{
-      error?: string;
-      success?: string;
-    }>,
-    default: () => ({
-      error: 'var(--Error-Red-0)',
-      success: 'var(--Success-Green-0)'
-    })
-  },
-  disableSubmitBtn: {
-    type: Boolean,
-    default: false
-  },
-  disableResendBtn: {
-    type: Boolean,
-    default: false
-  }
-});
-
-enum ValidationState {
-  DEFAULT = "default",
-  ERROR = "error",
-  SUCCESS = "success",
-}
-
-const emit = defineEmits([
-  'update:modelValue'
-]);
-
-const state = computed(() => localOtpState.value as ValidationState);
-const error = computed(() => state.value === ValidationState.ERROR);
-const loading = computed(() => props.loading);
-const internalValue = ref('')
-const localOtpState = ref(props.otpState)
-
-const statusMessageStyle = computed<CSSProperties>(() => ({
-  visibility: state.value === ValidationState.DEFAULT ? 'hidden' : 'visible',
-  color: state.value === ValidationState.ERROR
-    ? `${props.colors.error} !important`
-    : `${props.colors.success} !important`,
-  minHeight: '1.5em'
-}));
-
-watch(() => props.otpState, (newVal) => {
-  localOtpState.value = newVal;
-});
-
-watch(internalValue, () => {
-  emit('update:modelValue', internalValue.value)
-}, { immediate: true })
-
-function onSubmit() {
-  props.submitFn();
-}
-
-function onResend() {
-  internalValue.value = '';
-  props.resendFn();
-}
-
-function onResetError(){
-  localOtpState.value = ValidationState.DEFAULT;
-}
-
+<template>
+  <form class="wl-otp-input" @submit.prevent="props.submitFn" aria-labelledby="page-heading"
+    :aria-describedby="error ? 'form-error' : undefined" data-testid="root">
+    <div class="title-container">
+      <h2 id="page-heading" ref="heading">{{ t('wl.otp_input.enter_sms_code') }}</h2>
+      <p>{{ t('wl.otp_input.code_was_sent', { phoneNumber }) }}</p>
+    </div>
+
+    <div class="input-container">
+      <v-otp-input 
+        v-model="internalValue" 
+        autofocus
+        rounded="lg"
+        :loading="loading" 
+        :error="error" 
+        :focus-all="error"
+        :focused="error" 
+        @update:model-value="onResetError"
+        type="number"
+      />
+    </div>
+
+    <div class="message-container">
+      <p :id="error ? 'form-error' : 'form-success'" :style="statusMessageStyle"
+        :role="error ? 'alert' : 'status'"
+        :aria-live="error ? 'assertive' : 'polite'" aria-atomic="true">
+        {{ message }}
+      </p>
+    </div>
+
+    <div class="button-container">
+      <slot name="buttons">
+        <Button :label="t('wl.otp_input.confirm')" :disabled="disableSubmitBtn" width="226" @click="onSubmit" type="submit" />
+        <Button :label="t('wl.otp_input.resend')" variant='outlined' :disabled="disableResendBtn" width="226" @click="onResend" />
+      </slot>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, type CSSProperties, PropType } from 'vue';
+import './OtpInput.css';
+import Button from '../Button/Button.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const props = defineProps({
+  phoneNumber: {
+    type: String,
+    required: true
+  },
+
+  message: {
+    type: String,
+    default: ''
+  },
+
+  otpState: {
+    type: String,
+    default: 'default'
+  },
+
+  submitFn: {
+    type: Function,
+    required: true
+  },
+
+  resendFn: {
+    type: Function,
+    required: true
+  },
+
+  loading: {
+    type: Boolean,
+    default: false
+  },
+
+  colors: {
+    type: Object as PropType<{
+      error?: string;
+      success?: string;
+    }>,
+    default: () => ({
+      error: 'var(--Error-Red-0)',
+      success: 'var(--Success-Green-0)'
+    })
+  },
+  disableSubmitBtn: {
+    type: Boolean,
+    default: false
+  },
+  disableResendBtn: {
+    type: Boolean,
+    default: false
+  }
+});
+
+enum ValidationState {
+  DEFAULT = "default",
+  ERROR = "error",
+  SUCCESS = "success",
+}
+
+const emit = defineEmits([
+  'update:modelValue'
+]);
+
+const state = computed(() => localOtpState.value as ValidationState);
+const error = computed(() => state.value === ValidationState.ERROR);
+const loading = computed(() => props.loading);
+const internalValue = ref('')
+const localOtpState = ref(props.otpState)
+
+const statusMessageStyle = computed<CSSProperties>(() => ({
+  visibility: state.value === ValidationState.DEFAULT ? 'hidden' : 'visible',
+  color: state.value === ValidationState.ERROR
+    ? `${props.colors.error} !important`
+    : `${props.colors.success} !important`,
+  minHeight: '1.5em'
+}));
+
+watch(() => props.otpState, (newVal) => {
+  localOtpState.value = newVal;
+});
+
+watch(internalValue, () => {
+  emit('update:modelValue', internalValue.value)
+}, { immediate: true })
+
+function onSubmit() {
+  props.submitFn();
+}
+
+function onResend() {
+  internalValue.value = '';
+  props.resendFn();
+}
+
+function onResetError(){
+  localOtpState.value = ValidationState.DEFAULT;
+}
+
 </script>

package/src/components/PhoneInput/PhoneInput.css

@@ -1,32 +1,32 @@
-.wl-phone-input {
-  width: 100%;
-}
-
-.wl-phone-input.border-on-hover .v-phone-input__country__input .v-field__outline__end {
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-  border-top-left-radius: 8px !important;
-  border-bottom-left-radius: 8px !important;
-}
-
-.wl-phone-input.border-on-hover .v-phone-input__phone__input .v-field__outline__start {
-  border-top-right-radius: 8px !important;
-  border-bottom-right-radius: 8px !important;
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-
-.wl-phone-input.border-on-hover :deep(.v-field__outline) {
-  opacity: 0;
-  --v-field-border-opacity: 0;
-}
-
-.wl-phone-input.border-on-hover:hover :deep(.v-field__outline) {
-  opacity: 1;
-  --v-field-border-opacity: 1;
-}
-
-.wl-phone-input.border-on-hover.v-field--focused :deep(.v-field__outline) {
-  opacity: 1;
-  --v-field-border-opacity: 1;
+.wl-phone-input {
+  width: 100%;
+}
+
+.wl-phone-input.border-on-hover .v-phone-input__country__input .v-field__outline__end {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-top-left-radius: 8px !important;
+  border-bottom-left-radius: 8px !important;
+}
+
+.wl-phone-input.border-on-hover .v-phone-input__phone__input .v-field__outline__start {
+  border-top-right-radius: 8px !important;
+  border-bottom-right-radius: 8px !important;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.wl-phone-input.border-on-hover :deep(.v-field__outline) {
+  opacity: 0;
+  --v-field-border-opacity: 0;
+}
+
+.wl-phone-input.border-on-hover:hover :deep(.v-field__outline) {
+  opacity: 1;
+  --v-field-border-opacity: 1;
+}
+
+.wl-phone-input.border-on-hover.v-field--focused :deep(.v-field__outline) {
+  opacity: 1;
+  --v-field-border-opacity: 1;
 }

package/src/components/PhoneInput/PhoneInput.vue

@@ -1,114 +1,114 @@
-<template>
-  <VPhoneInput
-    v-bind="$attrs"
-    ref="inputRef"
-    id="phone"
-    class="wl-phone-input"
-    :class="{
-      'border-on-hover': borderOnHover
-    }"
-    :include-countries="countriesCodes"
-    :aria-label="placeholder"
-    :variant="variant"
-    label=""
-    :appendInnerIcon="appendInnerIcon"
-    :placeHolder="placeholder"
-    display-format="international"
-    :default-country="defaultCountryCode"
-    hide-details
-    :aria-invalid="state === ValidationState.ERROR"
-    :countryIconMode="'svg'"
-    @update:model-value="(value) => emit('update:phone', value)"
-    data-testid="root"
-  />
-</template>
-
-<script setup lang="ts">
-import { defineProps, PropType, ref, nextTick } from 'vue';
-import { VPhoneInput } from 'v-phone-input';
-import './PhoneInput.css'
-
-import "flag-icons/css/flag-icons.min.css";
-import "v-phone-input/dist/v-phone-input.css";
-
-enum ValidationState {
-  DEFAULT = "default",
-  ERROR = "error",
-  SUCCESS = "success",
-}
-
-const props = defineProps({
-  state: {
-    type: String as PropType<ValidationState>,
-    default: ValidationState.DEFAULT
-  },
-
-  placeholder: {
-    type: String,
-    default: ''
-  },
-
-  countriesCodes: {
-    type: Array as PropType<string[]>,
-    default: []
-  },
-
-  defaultCountryCode: {
-    type: String,
-    default: 'DE'
-  },
-
-  appendInnerIcon: {
-    type: String,
-    default: 'heroicons:phone'
-  },
-
-  variant: {
-    type: String,
-    default: 'outlined'
-  },
-
-  borderOnHover: {
-    type: Boolean,
-    default: false
-  }
-});
-
-const emit = defineEmits<{
-  (e: 'update:phone', value: string): void
-}>();
-
-const inputRef = ref(null)
-
-const getNativeInput = () => {
-  return inputRef.value?.phoneInputRef?.$el?.querySelector('input');
-}
-
-const blur = () => {
- nextTick(() => {
-    getNativeInput()?.blur();
-  });
-};
-
-const select = () => {
-  nextTick(() => {
-    getNativeInput()?.select();
-  });
-};
-
-const focus = () => {
-  nextTick(() => {
-    getNativeInput()?.focus();
-  });
-};
-
-defineExpose({
-  blur,
-  select,
-  focus
-});
-
-</script>
-
-<style scoped>
+<template>
+  <VPhoneInput
+    v-bind="$attrs"
+    ref="inputRef"
+    id="phone"
+    class="wl-phone-input"
+    :class="{
+      'border-on-hover': borderOnHover
+    }"
+    :include-countries="countriesCodes"
+    :aria-label="placeholder"
+    :variant="variant"
+    label=""
+    :appendInnerIcon="appendInnerIcon"
+    :placeHolder="placeholder"
+    display-format="international"
+    :default-country="defaultCountryCode"
+    hide-details
+    :aria-invalid="state === ValidationState.ERROR"
+    :countryIconMode="'svg'"
+    @update:model-value="(value) => emit('update:phone', value)"
+    data-testid="root"
+  />
+</template>
+
+<script setup lang="ts">
+import { defineProps, PropType, ref, nextTick } from 'vue';
+import { VPhoneInput } from 'v-phone-input';
+import './PhoneInput.css'
+
+import "flag-icons/css/flag-icons.min.css";
+import "v-phone-input/dist/v-phone-input.css";
+
+enum ValidationState {
+  DEFAULT = "default",
+  ERROR = "error",
+  SUCCESS = "success",
+}
+
+const props = defineProps({
+  state: {
+    type: String as PropType<ValidationState>,
+    default: ValidationState.DEFAULT
+  },
+
+  placeholder: {
+    type: String,
+    default: ''
+  },
+
+  countriesCodes: {
+    type: Array as PropType<string[]>,
+    default: []
+  },
+
+  defaultCountryCode: {
+    type: String,
+    default: 'DE'
+  },
+
+  appendInnerIcon: {
+    type: String,
+    default: 'heroicons:phone'
+  },
+
+  variant: {
+    type: String,
+    default: 'outlined'
+  },
+
+  borderOnHover: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits<{
+  (e: 'update:phone', value: string): void
+}>();
+
+const inputRef = ref(null)
+
+const getNativeInput = () => {
+  return inputRef.value?.phoneInputRef?.$el?.querySelector('input');
+}
+
+const blur = () => {
+ nextTick(() => {
+    getNativeInput()?.blur();
+  });
+};
+
+const select = () => {
+  nextTick(() => {
+    getNativeInput()?.select();
+  });
+};
+
+const focus = () => {
+  nextTick(() => {
+    getNativeInput()?.focus();
+  });
+};
+
+defineExpose({
+  blur,
+  select,
+  focus
+});
+
+</script>
+
+<style scoped>
 </style>