From cd0a135d893b5e86da1f73ce77c1eaa6f69dcd47 Mon Sep 17 00:00:00 2001
From: LeoTiTo <lochuutran12@gmail.com>
Date: Wed, 14 May 2025 17:06:21 +0200
Subject: [PATCH 1/4] feat: update border color for filled input fields in
 AInput, ASelect, and ATextarea components

---
 components/AInput.vue    | 21 ++++++++++++++++++++-
 components/ASelect.vue   | 23 +++++++++++++++++++++--
 components/ATextarea.vue | 25 ++++++++++++++++++++++---
 3 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/components/AInput.vue b/components/AInput.vue
index 8a4dd12..0d53280 100644
--- a/components/AInput.vue
+++ b/components/AInput.vue
@@ -67,6 +67,20 @@ const onInputChange = (newValue: string[]) => {
   inputValue.value = newValue;
 };
 
+const isInputFilledToChangeBorderColor = computed(() => {
+  const currentValue = model.value;
+  if (currentValue === null || currentValue === undefined) {
+    return false;
+  }
+  if (typeof currentValue === 'string') {
+    return currentValue.length > 0;
+  }
+  if (Array.isArray(currentValue)) {
+    return currentValue.length > 0;
+  }
+  return true;
+});
+
 //LISTEN KEYDOWN
 const handleKeydown = (event: KeyboardEvent) => {
   if (props.type === "time") {
@@ -88,6 +102,7 @@ const preventClear = (event: KeyboardEvent) => {
     :class="[
       type === 'phone' && 'a-input-phone',
       state !== 'default' && `a-input-${state}`,
+      { 'is-not-empty': isInputFilledToChangeBorderColor },
     ]"
     :style="{
       width: full && '100%',
@@ -256,7 +271,11 @@ const preventClear = (event: KeyboardEvent) => {
   display: flex;
   background: var(--a-white);
   overflow: visible;
-  border: 1px solid var(--a-grey-light);
+  border: 1px solid var(--a-grey-lighter);
+
+  &.is-not-empty {
+      border-color: var(--a-grey-light);
+  }
 
   &:focus-within {
     border-color: #0969da;
diff --git a/components/ASelect.vue b/components/ASelect.vue
index 34c3c38..92028e0 100644
--- a/components/ASelect.vue
+++ b/components/ASelect.vue
@@ -34,7 +34,7 @@ const props = withDefaults(defineProps<ASelectProps>(), {
   noResults: "No results found",
   noOptions: "The list is empty",
   placeholder: "Type your tag..",
-  color: "grey-light",
+  color: "grey-lighter",
   tagColor: "primary",
   arrowColor: "grey",
   mode: "tags",
@@ -75,12 +75,27 @@ const isInputFilled = computed(() => inputValue?.value?.length > 0);
 const onInputChange = (newValue: string[]) => {
   inputValue.value = newValue;
 };
+
+const isInputFilledToChangeBorderColor = computed(() => {
+  const currentValue = value.value;
+  if (currentValue === null || currentValue === undefined) {
+    return false;
+  }
+  if (typeof currentValue === 'string') {
+    return currentValue.length > 0;
+  }
+  if (Array.isArray(currentValue)) {
+    return currentValue.length > 0;
+  }
+  return true;
+});
+
 </script>
 
 <template>
   <div
     class="a-select"
-    :class="{ labelised: label, 'is-not-empty': isInputFilled }"
+    :class="{ labelised: label, 'is-not-empty': isInputFilledToChangeBorderColor }"
   >
     <Multiselect
       v-model="value"
@@ -186,6 +201,10 @@ const onInputChange = (newValue: string[]) => {
   --ms-option-py: 14px;
   --ms-option-px: 12px;
 
+  &.is-not-empty {
+    --ms-border-color: var(--a-grey-light);
+  }
+
   &:focus-within {
     --ms-border-color: #0969da;
 
diff --git a/components/ATextarea.vue b/components/ATextarea.vue
index 8c04d39..ae7af23 100644
--- a/components/ATextarea.vue
+++ b/components/ATextarea.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useFocus } from "@vueuse/core";
-import { computed, ref, watch } from "vue";
+import { computed, ref, vModelCheckbox, watch } from "vue";
 import type { Colors } from "../stores/color";
 import { useColor } from "../stores/color";
 
@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<ATextareaProps>(), {
   modelValue: "",
   label: "",
   required: false,
-  color: "grey-light",
+  color: "grey-lighter",
   placeholder: "",
 });
 const value = ref(props.modelValue);
@@ -53,10 +53,25 @@ defineExpose({
 
 const mainColor = computed(() => props.color);
 const color = useColor(mainColor);
+
+const isInputFilledToChangeBorderColor = computed(() => {
+  const currentValue = value.value;
+  if (currentValue === null || currentValue === undefined) {
+    return false;
+  }
+  if (typeof currentValue === 'string') {
+    return currentValue.length > 0;
+  }
+  if (Array.isArray(currentValue)) {
+    return currentValue.length > 0;
+  }
+  return true;
+});
+
 </script>
 
 <template>
-  <div class="a-text-area" :class="{ hasLabel: label }">
+  <div class="a-text-area" :class="[{ hasLabel: label }, { 'is-not-empty': isInputFilledToChangeBorderColor},]">
     <p v-if="label">{{ label }} <span v-if="required">*</span></p>
     <textarea
       ref="textarea"
@@ -76,6 +91,10 @@ const color = useColor(mainColor);
   border-radius: 5px;
   overflow: hidden;
 
+  &.is-not-empty {
+    border-color: var(--a-grey-light);
+  }
+
   &.hasLabel {
     padding-top: 30px;
 

From b697b8bad1ff13501eb03f2f9e26c0882a1e66f3 Mon Sep 17 00:00:00 2001
From: LeoTiTo <lochuutran12@gmail.com>
Date: Thu, 15 May 2025 16:46:56 +0200
Subject: [PATCH 2/4] feat: enhance ADatePicker and ATextarea components with
 dynamic border color changes based on input state

---
 components/ADatePicker.vue | 46 +++++++++++++++++++++++++++++++++++---
 components/ATextarea.vue   |  4 ++++
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/components/ADatePicker.vue b/components/ADatePicker.vue
index d3986da..cc61a89 100644
--- a/components/ADatePicker.vue
+++ b/components/ADatePicker.vue
@@ -5,6 +5,7 @@ import {
   shallowRef,
   computed,
   toRaw,
+  ref,
 } from "vue";
 import moment from "moment";
 import { useI18n } from "vue-i18n";
@@ -278,7 +279,11 @@ const dayNames = computed(() => {
   ];
 });
 
+const isOpen = ref(false);
+
 const onOpen = () => {
+  isOpen.value = true;
+
   //MODIFY CLOCK POSITION ON TYPE RANGE
   setTimeout(() => {
     if (props.type === "range") {
@@ -287,10 +292,29 @@ const onOpen = () => {
     }
   }, 100);
 };
+
+const onClose = () => {
+  isOpen.value = false;
+};
+
+const isInputFilledToChangeBorderColor = computed(() => {
+  const curr = date.value;
+  if (!curr) return false;
+  if (Array.isArray(curr)) {
+    return curr.some((d) => !!d);
+  }
+  return true;
+});
 </script>
 
 <template>
-  <div class="a-date-picker">
+  <div
+    class="a-date-picker"
+    :class="[
+      { 'is-not-empty': isInputFilledToChangeBorderColor },
+      { 'is-calendar-open': isOpen },
+    ]"
+  >
     <VueDatePicker
       v-model="date"
       :auto-apply="!hasValidation"
@@ -304,6 +328,7 @@ const onOpen = () => {
       :day-names="dayNames"
       time-picker-inline
       @open="onOpen"
+      @closed="onClose"
       :locale="locale"
       :enable-time-picker="hasTime"
       :range="type === 'range'"
@@ -312,10 +337,25 @@ const onOpen = () => {
       :action-row="{
         showSelect: hasValidation,
         showCancel: hasValidation,
-      }" />
+      }"
+    />
   </div>
 </template>
 <style lang="scss">
+.a-date-picker {
+  &.is-not-empty {
+    .dp__input_wrap .dp__input {
+      border-color: var(--a-grey-dark);
+    }
+  }
+
+  &.is-calendar-open {
+    .dp__input_wrap .dp__input {
+      border-color: #0969da !important;
+    }
+  }
+}
+
 .dp__main {
   .dp__input_wrap {
     .dp__input {
@@ -635,7 +675,7 @@ const onOpen = () => {
   --dp-primary-disabled-color: var(--a-tertiary-light);
   --dp-primary-text-color: #f8f5f5;
   --dp-secondary-color: #c0c4cc;
-  --dp-border-color: var(--a-grey-light);
+  --dp-border-color: var(--a-grey-lighter);
   --dp-menu-border-color: #ddd;
   --dp-border-color-hover: #aaaeb7;
   --dp-border-color-focus: #0969da;
diff --git a/components/ATextarea.vue b/components/ATextarea.vue
index ae7af23..cbc7b3c 100644
--- a/components/ATextarea.vue
+++ b/components/ATextarea.vue
@@ -95,6 +95,10 @@ const isInputFilledToChangeBorderColor = computed(() => {
     border-color: var(--a-grey-light);
   }
 
+  &:focus-within {
+    border-color: #0969da;
+  }
+
   &.hasLabel {
     padding-top: 30px;
 

From b787e3072a166c4ded2a9d485543c31bd96db17c Mon Sep 17 00:00:00 2001
From: LeoTiTo <lochuutran12@gmail.com>
Date: Thu, 15 May 2025 17:13:02 +0200
Subject: [PATCH 3/4] fix: remove unused vModelCheckbox import from ATextarea
 component

---
 components/ATextarea.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ATextarea.vue b/components/ATextarea.vue
index cbc7b3c..aa407fe 100644
--- a/components/ATextarea.vue
+++ b/components/ATextarea.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useFocus } from "@vueuse/core";
-import { computed, ref, vModelCheckbox, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import type { Colors } from "../stores/color";
 import { useColor } from "../stores/color";
 

From 826c34f430da20b6881e404d16e6726c07d3da46 Mon Sep 17 00:00:00 2001
From: LeoTiTo <lochuutran12@gmail.com>
Date: Wed, 21 May 2025 09:35:47 +0200
Subject: [PATCH 4/4] refactor: rename onClose to close in ADatePicker
 component for clarity

---
 components/ADatePicker.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/ADatePicker.vue b/components/ADatePicker.vue
index cc61a89..8ccb103 100644
--- a/components/ADatePicker.vue
+++ b/components/ADatePicker.vue
@@ -293,7 +293,7 @@ const onOpen = () => {
   }, 100);
 };
 
-const onClose = () => {
+const close = () => {
   isOpen.value = false;
 };
 
@@ -328,7 +328,7 @@ const isInputFilledToChangeBorderColor = computed(() => {
       :day-names="dayNames"
       time-picker-inline
       @open="onOpen"
-      @closed="onClose"
+      @closed="close"
       :locale="locale"
       :enable-time-picker="hasTime"
       :range="type === 'range'"