Dropdown improvements (#40)

* Disableability, Up or down rendering

* Switch to scale animation

* Update DropdownSelect.vue

* Fix animation

* bump

* adjustments

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

docs/components/dropdown-select.md

@@ -7,18 +7,29 @@ const value = ref(null)
 
 <DemoContainer>
   <DropdownSelect
-    id="report-type"
     v-model="value"
-    :options="['Daily', 'Weekly', 'Monthly']"
+    :options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
     placeholder="Choose Frequency"
   />
+  <DropdownSelect
+    v-model="value"
+    :options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
+    placeholder="Choose Frequency"
+    render-up
+  />
+  <DropdownSelect
+    v-model="value"
+    :options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
+    placeholder="Choose Frequency"
+    disabled
+  />
 </DemoContainer>
 
 ```vue
 <DropdownSelect
-  id="report-type"
+  v-model="value"
-  v-model="reportType"
+  :options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
-  :options="['Daily', 'Weekly', 'Monthly']"
   placeholder="Choose Frequency"
+  render-up
 />
 ```

lib/components/base/DropdownSelect.vue

@@ -12,35 +12,50 @@
     @keydown.up.prevent="focusPreviousOption"
     @keydown.down.prevent="focusNextOptionOrOpen"
   >
-    <div class="selected" :class="{ 'dropdown-open': dropdownVisible }" @click="toggleDropdown">
+    <div
+      class="selected"
+      :class="{
+        disabled: disabled,
+        'render-down': dropdownVisible && !renderUp && !disabled,
+        'render-up': dropdownVisible && renderUp && !disabled,
+      }"
+      @click="toggleDropdown"
+    >
       <span>{{ selectedOption }}</span>
       <i class="arrow" :class="{ rotate: dropdownVisible }"></i>
     </div>
-    <transition name="slide-fade">
+    <div class="options-wrapper" :class="{ down: !renderUp, up: renderUp }">
-      <div v-show="dropdownVisible" class="options" role="listbox">
+      <transition name="options">
         <div
-          v-for="(option, index) in options"
+          v-show="dropdownVisible"
-          :key="index"
+          class="options"
-          ref="optionElements"
+          role="listbox"
-          tabindex="-1"
+          :class="{ down: !renderUp, up: renderUp }"
-          role="option"
-          :class="{ 'selected-option': selectedValue === option }"
-          :aria-selected="selectedValue === option"
-          class="option"
-          @click="selectOption(option, index)"
-          @keydown.space.prevent="selectOption(option, index)"
         >
-          <input
+          <div
-            :id="`${name}-${index}`"
+            v-for="(option, index) in options"
-            v-model="radioValue"
+            :key="index"
-            type="radio"
+            ref="optionElements"
-            :value="option"
+            tabindex="-1"
-            :name="name"
+            role="option"
-          />
+            :class="{ 'selected-option': selectedValue === option }"
-          <label :for="`${name}-${index}`">{{ option }}</label>
+            :aria-selected="selectedValue === option"
+            class="option"
+            @click="selectOption(option, index)"
+            @keydown.space.prevent="selectOption(option, index)"
+          >
+            <input
+              :id="`${name}-${index}`"
+              v-model="radioValue"
+              type="radio"
+              :value="option"
+              :name="name"
+            />
+            <label :for="`${name}-${index}`">{{ option }}</label>
+          </div>
         </div>
-      </div>
+      </transition>
-    </transition>
+    </div>
   </div>
 </template>
 
@@ -67,6 +82,14 @@ export default {
       type: String,
       default: null,
     },
+    renderUp: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['input', 'change', 'update:modelValue'],
   data() {
@@ -92,8 +115,10 @@ export default {
   },
   methods: {
     toggleDropdown() {
-      this.dropdownVisible = !this.dropdownVisible
+      if (!this.disabled) {
-      this.$refs.dropdown.focus()
+        this.dropdownVisible = !this.dropdownVisible
+        this.$refs.dropdown.focus()
+      }
     },
     selectOption(option, index) {
       this.radioValue = option
@@ -101,8 +126,10 @@ export default {
       this.dropdownVisible = false
     },
     onFocus() {
-      this.focusedOptionIndex = this.options.findIndex((option) => option === this.selectedValue)
+      if (!this.disabled) {
-      this.dropdownVisible = true
+        this.focusedOptionIndex = this.options.findIndex((option) => option === this.selectedValue)
+        this.dropdownVisible = true
+      }
     },
     onBlur(event) {
       if (!this.isChildOfDropdown(event.relatedTarget)) {
@@ -110,19 +137,23 @@ export default {
       }
     },
     focusPreviousOption() {
-      if (!this.dropdownVisible) {
+      if (!this.disabled) {
-        this.toggleDropdown()
+        if (!this.dropdownVisible) {
+          this.toggleDropdown()
+        }
+        this.focusedOptionIndex =
+          (this.focusedOptionIndex + this.options.length - 1) % this.options.length
+        this.$refs.optionElements[this.focusedOptionIndex].focus()
       }
-      this.focusedOptionIndex =
-        (this.focusedOptionIndex + this.options.length - 1) % this.options.length
-      this.$refs.optionElements[this.focusedOptionIndex].focus()
     },
     focusNextOptionOrOpen() {
-      if (!this.dropdownVisible) {
+      if (!this.disabled) {
-        this.toggleDropdown()
+        if (!this.dropdownVisible) {
+          this.toggleDropdown()
+        }
+        this.focusedOptionIndex = (this.focusedOptionIndex + 1) % this.options.length
+        this.$refs.optionElements[this.focusedOptionIndex].focus()
       }
-      this.focusedOptionIndex = (this.focusedOptionIndex + 1) % this.options.length
-      this.$refs.optionElements[this.focusedOptionIndex].focus()
     },
     isChildOfDropdown(element) {
       let currentNode = element
@@ -158,12 +189,16 @@ export default {
     user-select: none;
     border-radius: var(--radius-md);
 
-    &:hover {
+    &.disabled {
-      filter: brightness(1.25);
+      cursor: not-allowed;
-      transition: filter 0.3s ease-in-out;
+      filter: brightness(0.75);
     }
 
-    &.dropdown-open {
+    &.render-up {
+      border-radius: 0 0 var(--radius-md) var(--radius-md);
+    }
+
+    &.render-down {
       border-radius: var(--radius-md) var(--radius-md) 0 0;
     }
 
@@ -181,7 +216,7 @@ export default {
       border-left: 0.4rem solid transparent;
       border-right: 0.4rem solid transparent;
       border-top: 0.4rem solid var(--color-base);
-      transition: transform 0.3s ease;
+      transition: transform 0.2s ease;
       &.rotate {
         transform: rotate(180deg);
       }
@@ -189,11 +224,10 @@ export default {
   }
 
   .options {
-    position: absolute;
-    width: 100%;
     z-index: 10;
-    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+    max-height: min(12rem);
-    overflow: hidden;
+    overflow-y: auto;
+    box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
 
     .option {
       background-color: var(--color-button-bg);
@@ -204,19 +238,20 @@ export default {
       user-select: none;
 
       &:hover {
-        filter: brightness(1.25);
+        filter: brightness(0.85);
-        transition: filter 0.3s ease-in-out;
+        transition: filter 0.2s ease-in-out;
       }
 
       &:focus {
         outline: 0;
-        filter: brightness(1.25);
+        filter: brightness(0.85);
-        transition: filter 0.3s ease-in-out;
+        transition: filter 0.2s ease-in-out;
       }
 
       &.selected-option {
         background-color: var(--color-brand);
         color: var(--color-accent-contrast);
+        font-weight: bolder;
       }
 
       input {
@@ -226,24 +261,43 @@ export default {
   }
 }
 
-.slide-fade-enter {
+.options-enter-active,
-  opacity: 0;
+.options-leave-active {
-  transform: translateY(-20px);
+  transition: transform 0.2s ease;
 }
 
-.slide-fade-enter-to {
+.options-enter-from,
-  opacity: 1;
+.options-leave-to {
-  transform: translateY(0);
+  &.up {
+    transform: translateY(100%);
+  }
+
+  &.down {
+    transform: translateY(-100%);
+  }
 }
 
-.slide-fade-enter-active,
+.options-enter-to,
-.slide-fade-leave-active {
+.options-leave-from {
-  transition: opacity 0.5s ease, transform 0.3s ease;
+  &.up {
+    transform: translateY(0%);
+  }
 }
 
-.slide-fade-leave,
+.options-wrapper {
-.slide-fade-leave-to {
+  position: absolute;
-  opacity: 0;
+  width: 100%;
-  transform: translateY(-20px);
+  overflow: auto;
+  z-index: 9;
+
+  &.up {
+    top: 0;
+    transform: translateY(-100%);
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+  }
+
+  &.down {
+    border-radius: 0 0 var(--radius-md) var(--radius-md);
+  }
 }
 </style>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "files": [
     "dist"
   ],