edvoyui-component-library-test-flight 0.0.242 → 0.0.244

package/dist/components/alerts/EUIAlerts.d.ts

@@ -26,7 +26,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         default: string;
     };
     alertType: {
-        type: PropType<"Default" | "Warning" | "Success" | "Error">;
+        type: PropType<"Default" | "Info" | "Warning" | "Success" | "Error">;
         default: string;
     };
     alertIcon: {
@@ -53,7 +53,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         default: string;
     };
     alertType: {
-        type: PropType<"Default" | "Warning" | "Success" | "Error">;
+        type: PropType<"Default" | "Info" | "Warning" | "Success" | "Error">;
         default: string;
     };
     alertIcon: {
@@ -71,7 +71,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     showAlert: boolean;
     heading: string;
     textMessage: string;
-    alertType: "Success" | "Error" | "Default" | "Warning";
+    alertType: "Success" | "Error" | "Default" | "Info" | "Warning";
     alertIcon: string | Function | Record<string, any>;
     actionItems: boolean;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/alerts/EUIAlerts.vue

@@ -7,7 +7,7 @@
     leave-from-class="opacity-100"
     leave-to-class="opacity-0"
   >
-    <div v-if="showAlert" :class="['p-4 rounded-md', alertsClass.bgColor]">
+    <div v-if="showAlert" :class="['px-4 py-4 rounded-lg border border-solid', alertsClass.bgColor]">
       <div
         :class="[closeIcon && !textMessage ? 'items-center pr-2 flex' : 'flex items-start']"
       >
@@ -87,8 +87,10 @@ import {
   CheckCircleIcon,
   XCircleIcon,
   XMarkIcon,
+  InformationCircleIcon
 } from "@heroicons/vue/24/solid";
 
+
 const props = defineProps({
   showAlert: {
     type: Boolean,
@@ -103,7 +105,7 @@ const props = defineProps({
     default: "",
   },
   alertType: {
-    type: String as PropType<"Default" | "Warning" | "Success" | "Error">,
+    type: String as PropType<"Default"  | "Info" | "Warning" | "Success" | "Error">,
     default: "Default",
   },
   alertIcon: {
@@ -127,7 +129,22 @@ const onClose = () => {
 const alertsClass = computed(() => {
   const iconClasses = {
     Default: {
-      bgColor: "bg-blue-50",
+      bgColor: "bg-gray-100 border-gray-200",
+      leftIcon: {
+        icon: InformationCircleIcon,
+        color: "text-gray-600",
+      },
+      titleColor: "text-gray-800",
+      textColor: "text-gray-700",
+      btnPrimary:
+        "bg-gray-700 hover:bg-gray-800 focus:ring-gray-600 focus:ring-offset-gray-50",
+      btnTertiary:
+        "text-gray-500 bg-gray-50 hover:bg-gray-100 focus:ring-gray-600 focus:ring-offset-gray-50",
+      btnClose:
+        "bg-gray-50 text-gray-500 hover:bg-gray-100 focus:ring-gray-600 focus:ring-offset-gray-50",
+    },
+    Info: {
+      bgColor: "bg-blue-50 border-blue-200",
       leftIcon: {
         icon: CheckCircleIcon,
         color: "text-blue-400",
@@ -142,7 +159,7 @@ const alertsClass = computed(() => {
         "bg-blue-50 text-blue-500 hover:bg-blue-100 focus:ring-blue-600 focus:ring-offset-blue-50",
     },
     Warning: {
-      bgColor: "bg-yellow-50",
+      bgColor: "bg-yellow-50 border-orange-200",
       leftIcon: {
         icon: ExclamationTriangleIcon,
         color: "text-yellow-400",
@@ -157,7 +174,7 @@ const alertsClass = computed(() => {
         "bg-yellow-50 text-yellow-500 hover:bg-yellow-100 focus:ring-yellow-600 focus:ring-offset-yellow-50",
     },
     Success: {
-      bgColor: "bg-green-50",
+      bgColor: "bg-green-50 border-green-200",
       leftIcon: {
         icon: CheckCircleIcon,
         color: "text-green-400",
@@ -172,7 +189,7 @@ const alertsClass = computed(() => {
         "bg-green-50 text-green-500 hover:bg-green-100 focus:ring-green-600 focus:ring-offset-green-50",
     },
     Error: {
-      bgColor: "bg-red-50",
+      bgColor: "bg-red-50 border-red-200",
       leftIcon: {
         icon: XCircleIcon,
         color: "text-red-400",

package/dist/components/telephone/EUITelephone.vue

@@ -48,6 +48,7 @@
         :class="[getIconClass()]"
         @on-input="onInputChanged"
         @country-changed="onCountryChanged"
+        @focus="onFocus"
         @blur="onBlur"
       ></vue-tel-input>
     </button>
@@ -85,7 +86,7 @@ import "vue-tel-input/vue-tel-input.css";
 
 type TelephoneInputMeta = PhoneMeta & { number: string };
 
-const emit = defineEmits(["update:modelValue", "blur", "update:isValid"]);
+const emit = defineEmits(["update:modelValue", "blur", "focus", "update:isValid"]);
 
 const props = defineProps({
   modelValue: {
@@ -170,6 +171,7 @@ const inputValue = computed(() => {
 });
 
 const mobile = ref(String(props.modelValue ?? ""));
+const isFocused = ref(false);
 const isTouched = ref(false);
 const telephoneIsValid = ref(props.isValid);
 const activeCountry = ref<CountryObject | null>(null);
@@ -252,10 +254,16 @@ const bindProps = computed<VueTelInputProps>(() => ({
   },
 }));
 
+const onFocus = () => {
+  isFocused.value = true;
+  emit("focus");
+};
+
 const onInputChanged = (
   _formattedNumber: string,
   phoneObject: TelephoneInputMeta,
 ) => {
+  isFocused.value = true;
   telephoneIsValid.value = Boolean(phoneObject.valid);
   hasError.value = !telephoneIsValid.value;
 
@@ -267,6 +275,7 @@ const onInputChanged = (
 };
 
 const onBlur = () => {
+  isFocused.value = false;
   isTouched.value = true;
   emit("blur");
 };
@@ -320,9 +329,19 @@ const internalErrorMessage = computed(() => {
   return "Enter a valid phone number";
 });
 
-const errorMessage = computed(
-  () => externalErrorMessage.value || internalErrorMessage.value,
-);
+const errorMessage = computed(() => {
+  if (props.readonly || props.disabled) return "";
+
+  if (isFocused.value && !telephoneIsValid.value) {
+    return "";
+  }
+
+  if (isTouched.value) {
+    return internalErrorMessage.value || externalErrorMessage.value || "";
+  }
+
+  return externalErrorMessage.value || "";
+});
 
 const getIconClass = () => {
   switch (props.iconType) {