DS-79-design-corrections-inputs-changements-couleur-bordure

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 close = () => {
+  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="close"
       :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;

components/AInput.vue

@@ -75,6 +75,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") {
@@ -96,6 +110,7 @@ const preventClear = (event: KeyboardEvent) => {
     :class="[
       type === 'phone' && 'a-input-phone',
       state !== 'default' && `a-input-${state}`,
+      { 'is-not-empty': isInputFilledToChangeBorderColor },
     ]"
     :style="{
       width: full && '100%',
@@ -264,7 +279,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;

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;
 

components/ATextarea.vue

@@ -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,14 @@ const color = useColor(mainColor);
   border-radius: 5px;
   overflow: hidden;
 
+  &.is-not-empty {
+    border-color: var(--a-grey-light);
+  }
+
+  &:focus-within {
+    border-color: #0969da;
+  }
+
   &.hasLabel {
     padding-top: 30px;