feat(select): add rotate transition on dropdown indicator when menu is open

Author: TotomInc

docs/styling.md

@@ -84,6 +84,7 @@ For a complete list of CSS variables, we recommend to take a look at the source-
   --vs-indicator-icon-size: 20px;
   --vs-indicator-icon-color: var(--vs-text-color);
   --vs-indicator-icon-cursor: pointer;
+  --vs-indicator-dropdown-icon-transition: transform 0.2s ease-out;
 
   --vs-spinner-color: var(--vs-text-color);
   --vs-spinner-size: 16px;

src/Indicators.vue

@@ -7,6 +7,7 @@ import Spinner from "./Spinner.vue";
 
 defineProps<{
   hasSelectedOption: boolean;
+  isMenuOpen: boolean;
   isClearable: boolean;
   isLoading: boolean;
   isDisabled: boolean;
@@ -45,6 +46,7 @@ defineExpose({ containerRef, clearButtonRef, dropdownButtonRef });
       ref="dropdownButton"
       type="button"
       class="dropdown-icon"
+      :class="{ active: isMenuOpen }"
       tabindex="-1"
       :disabled="isDisabled"
       @click.stop="emit('toggle')"
@@ -60,7 +62,7 @@ defineExpose({ containerRef, clearButtonRef, dropdownButtonRef });
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="css" scoped>
 .indicators-container {
   display: flex;
   align-items: center;
@@ -92,9 +94,14 @@ defineExpose({ containerRef, clearButtonRef, dropdownButtonRef });
   border: 0;
   width: var(--vs-indicator-icon-size);
   height: var(--vs-indicator-icon-size);
-  color: var(vs-indicator-icon-colo);
+  color: var(--vs-indicator-icon-color);
   background: none;
   outline: none;
   cursor: var(--vs-indicator-icon-cursor);
+  transition: var(--vs-indicator-dropdown-icon-transition);
+}
+
+.dropdown-icon.active {
+  transform: rotate(180deg);
 }
 </style>

src/Select.vue

@@ -416,6 +416,7 @@ onBeforeUnmount(() => {
       <Indicators
         ref="indicators"
         :has-selected-option="selectedOptions.length > 0"
+        :is-menu-open="menuOpen"
         :is-clearable="isClearable"
         :is-loading="isLoading"
         :is-disabled="isDisabled"
@@ -566,6 +567,7 @@ onBeforeUnmount(() => {
   --vs-indicator-icon-size: 20px;
   --vs-indicator-icon-color: var(--vs-text-color);
   --vs-indicator-icon-cursor: pointer;
+  --vs-indicator-dropdown-icon-transition: transform 0.2s ease-out;
 
   --vs-spinner-color: var(--vs-text-color);
   --vs-spinner-size: 16px;