@zap-wunschlachen/wl-shared-components 1.0.0

package/src/components/OtpInput/OtpInput.vue

@@ -0,0 +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;
+}
+
+</script>

package/src/components/PhoneInput/PhoneInput.css

@@ -0,0 +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;
+}

package/src/components/PhoneInput/PhoneInput.vue

@@ -0,0 +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>
+</style>

package/src/components/Select/Select.css

@@ -0,0 +1,150 @@
+.wl-select .v-field__outline {
+  opacity: 1 !important; /* Set the opacity to 1 */
+  --v-field-border-opacity: 1 !important; /* Ensure full opacity for the border */
+  color: var(--Soft-Concrete-2) !important; /*  border color */
+}
+
+/* Active state border color */
+.wl-select .v-field--active .v-field__outline {
+  color: var(--Soft-Concrete-2) !important; /* Active border color */
+  opacity: 1 !important;
+  --v-field-border-opacity: 1 !important;
+}
+
+.wl-select .v-label.v-field-label {
+  color: var(--Dental-Blue--3) !important;
+  opacity: 1 !important;
+}
+
+/* Default input text color */
+.wl-select .v-field__input {
+  color: var(--Dental-Blue-0);
+  opacity: 1;
+}
+
+.wl-select .v-field--focused .v-field__input {
+  color: var(--Dental-Blue-0);
+  opacity: 1;
+}
+
+.v-combobox__content .v-list-item:hover,
+.v-combobox__content .v-list-item.v-list-item--active {
+  color: var(--Dental-Blue-0);
+  border-left: 4px solid var(--Dental-Blue-0); /* Blue border */
+  padding-left: 12px; /* Adjust padding to make space for the border */
+}
+
+.v-combobox__content .v-list-item__overlay {
+  background: var(--Dental-Light-Blue--1) !important;
+}
+
+.v-combobox__content .v-list-item__content {
+  color: var(--Dental-Blue-0);
+}
+
+/* Focused state border color */
+.v-field[aria-expanded='true'] .v-field__outline {
+  color: var(--Soft-Concrete-2) !important;
+  opacity: 1 !important;
+
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.v-combobox__content {
+  border: 2px solid var(--Soft-Concrete-2);
+  border-bottom-left-radius: 8px !important;
+  border-bottom-right-radius: 8px !important;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+  box-shadow: none;
+}
+
+.v-combobox__selection .v-chip {
+  background: var(--Dental-Light-Blue-0);
+  color: var(--Dental-Blue-1);
+  border-radius: 8px;
+}
+
+.wl-select .v-icon {
+  color: var(--Dental-Blue-0);
+}
+
+/* Disabled state styles */
+.wl-select .v-field--disabled,
+.wl-select .v-field--disabled .v-label.v-field-label,
+.wl-select .v-field--disabled .v-field__input,
+.wl-select .v-field--disabled .v-icon {
+  color: #bdbdbd !important;           /* Grey text and icon */
+  background-color: #f5f5f5 !important; /* Light grey background */
+  opacity: 1 !important;               /* Ensure full opacity */
+  cursor: not-allowed !important;
+}
+
+.wl-select .v-field--disabled .v-field__outline {
+  border-color: #e0e0e0 !important;    /* Lighter grey border */
+}
+
+.wl-select .v-field--disabled .v-combobox__selection .v-chip {
+  background: #e0e0e0 !important;
+  color: #bdbdbd !important;
+  border: 1px solid #bdbdbd !important;
+}
+
+/* Optionally, dim the dropdown if open while disabled */
+.wl-select .v-field--disabled .v-combobox__content {
+  background: #f5f5f5 !important;
+  color: #bdbdbd !important;
+  pointer-events: none;
+}
+
+/* Error state styles */
+.wl-select .v-field--error,
+.wl-select .v-field--error .v-label.v-field-label,
+.wl-select .v-field--error .v-field__input,
+.wl-select .v-field--error .v-icon {
+  background-color: #fdeaea !important; /* Light red background */
+  color: #b71c1c !important;            /* Dark red text and icon */
+  border-color: #b71c1c !important;     /* Dark red border */
+}
+
+.wl-select .v-field--error .v-field__outline {
+  --v-field-border-opacity: 1 !important;
+}
+
+.wl-select .v-field--error .v-combobox__selection .v-chip {
+  background: #fdeaea !important; /* Light red background */
+  color: #b71c1c !important;      /* Dark red text */
+  border: 1px solid #b71c1c !important;
+}
+
+.wl-select .v-field--error .v-combobox__content {
+  background: #fdeaea !important;
+  color: #b71c1c !important;
+  border-color: #b71c1c !important;
+}
+
+.wl-select .v-field--error .v-field__input {
+  color: #b71c1c !important;
+  background: #fdeaea !important;
+}
+
+.wl-select .v-field--disabled .v-field__input {
+  color: #bdbdbd !important;
+  background: #f5f5f5 !important;
+}
+
+.wl-select.border-on-hover .v-field__outline {
+  opacity: 0 !important;
+  --v-field-border-opacity: 0 !important;
+}
+
+.wl-select.border-on-hover:hover .v-field__outline {
+  opacity: 1 !important;
+  --v-field-border-opacity: 1 !important;
+}
+
+.wl-select.border-on-hover .v-field--focused .v-field__outline {
+  opacity: 1 !important;
+  --v-field-border-opacity: 1 !important;
+}