@redseed/redseed-ui-vue3 2.18.0 → 2.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "2.18.0",
+  "version": "2.18.2",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {

package/src/components/FormField/FormFieldSelect.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { ref } from 'vue'
-import { onClickOutside } from '@vueuse/core'
+import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue'
+import { onClickOutside, useResizeObserver, useElementBounding } from '@vueuse/core'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { ChevronDownIcon, CheckIcon } from '@heroicons/vue/24/outline'
 
@@ -19,14 +19,11 @@ const props = defineProps({
 
 const emit = defineEmits(['change'])
 
-const formFieldSelectElement = ref(null)
-
-onClickOutside(formFieldSelectElement, () => close())
-
 const isOpen = ref(false)
 
 function toggleOptions() {
     isOpen.value = !isOpen.value
+    if (isOpen.value) setTimeout(() => calculateDropdownPosition(), 1)
 }
 
 function close() {
@@ -43,7 +40,78 @@ function nativeChoose(event) {
     emit('change', event.target.value)
 }
 
+const formFieldSelectElement = ref(null)
 const selectElement = ref(null)
+const dropdownElement = ref(null)
+
+onClickOutside(formFieldSelectElement, () => close())
+
+// useResizeObserver(formFieldSelectElement, (entries) => {
+//     const entry = entries[0]
+//     const { width } = entry.contentRect
+//     dropdownWidth.value = width
+// })
+
+// watchEffect(() => calculateDropdownPosition())
+
+const selectElementBounding = useElementBounding(selectElement)
+
+function calculateDropdownPosition() {
+    if (!dropdownElement.value) return
+
+    /**
+     * Get the viewport height
+     */
+    const viewportHeight = window.innerHeight
+    // console.log('viewportHeight', viewportHeight)
+
+    /**
+     * Get the dropdown element height
+     */
+    const dropdownElementHeight = dropdownElement.value.offsetHeight
+    // console.log('dropdownElementHeight', dropdownElementHeight)
+
+    /**
+     * Get space above the select element
+     */
+    const spaceAboveSelectElement = selectElementBounding.top.value
+    // console.log('spaceAboveSelectElement', spaceAboveSelectElement)
+
+    /**
+     * Get space below the select element
+     */
+    const spaceBelowSelectElement = viewportHeight - selectElementBounding.bottom.value
+    // console.log('spaceBelowSelectElement', spaceBelowSelectElement)
+
+    dropdownElement.value.style.width = `${selectElementBounding.width.value}px`
+
+    if (spaceAboveSelectElement <= dropdownElementHeight
+        && spaceBelowSelectElement <= dropdownElementHeight) {
+        dropdownElement.value.style.top = '0'
+        dropdownElement.value.style.bottom = 'auto'
+        return
+    } else if (spaceBelowSelectElement > dropdownElementHeight) {
+        // console.log('space below >= dropdown height')
+        dropdownElement.value.style.top = `${selectElementBounding.bottom.value}px`
+        // console.log('dropdownElement.value.style.top', dropdownElement.value.style.top)
+        dropdownElement.value.style.bottom = 'auto'
+        return
+    } else if (spaceAboveSelectElement > dropdownElementHeight) {
+        // console.log('space above > dropdown height')
+        dropdownElement.value.style.top = 'auto'
+        dropdownElement.value.style.bottom = `${spaceBelowSelectElement + selectElementBounding.height.value + 8}px`
+        // console.log('dropdownElement.value.style.bottom', dropdownElement.value.style.bottom)
+        return
+    }
+}
+
+onMounted(() => {
+    window.addEventListener('resize', () => calculateDropdownPosition())
+})
+
+onUnmounted(() => {
+    window.removeEventListener('resize', () => calculateDropdownPosition())
+})
 
 defineExpose({
     focus() {
@@ -89,45 +157,49 @@ defineExpose({
             </option>
         </select>
 
-        <transition
-            enter-active-class="enter-active-class"
-            enter-from-class="enter-from-class"
-            enter-to-class="enter-to-class"
-            leave-active-class="leave-active-class"
-            leave-from-class="leave-from-class"
-            leave-to-class="leave-to-class"
-        >
-            <div v-show="isOpen"
-                :class="[
-                    'rsui-form-field-select__options',
-                    { 'rsui-form-field-select__options--open': isOpen }
-                ]"
+        <Teleport to="body">
+            <transition
+                enter-active-class="enter-active-class"
+                enter-from-class="enter-from-class"
+                enter-to-class="enter-to-class"
+                leave-active-class="leave-active-class"
+                leave-from-class="leave-from-class"
+                leave-to-class="leave-to-class"
             >
-                <div class="rsui-form-field-select__option rsui-form-field-select__option--disabled"
-                    value=""
+                <div ref="dropdownElement"
+                    v-show="isOpen"
+                    :class="[
+                        'rsui-form-field-select__options',
+                        { 'rsui-form-field-select__options--open': isOpen }
+                    ]"
                 >
-                    <div class="rsui-form-field-select__option-label">
-                        <slot name="default-option">
-                            Select an option
-                        </slot>
-                    </div>
-                </div>
-                <div v-for="option in options"
-                    :key="option.value"
-                    class="rsui-form-field-select__option"
-                    @click="choose(option)"
-                >
-                    <div class="rsui-form-field-select__option-label"
-                        :title="option.label"
+                    <div class="rsui-form-field-select__option rsui-form-field-select__option--disabled"
+                        value=""
                     >
-                        {{ option.label }}
+                        <div class="rsui-form-field-select__option-label">
+                            <slot name="default-option">
+                                Select an option
+                            </slot>
+                        </div>
                     </div>
-                    <div class="rsui-form-field-select__option-icon">
-                        <CheckIcon v-if="option.value === model"></CheckIcon>
+                    <div v-for="option in options"
+                        :key="option.value"
+                        class="rsui-form-field-select__option"
+                        @click="choose(option)"
+                    >
+                        <div class="rsui-form-field-select__option-label"
+                            :title="option.label"
+                        >
+                            {{ option.label }}
+                        </div>
+                        <div class="rsui-form-field-select__option-icon">
+                            <CheckIcon v-if="option.value === model"></CheckIcon>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </transition>
+            </transition>
+        </Teleport>
+
         <div :class="[
             'rsui-form-field-select__icon',
             { 'rsui-form-field-select__icon--open': isOpen }
@@ -173,8 +245,9 @@ defineExpose({
     }
 
     &__options {
-        @apply hidden absolute origin-top w-full z-10;
+        @apply hidden absolute top-0 w-full z-10;
         @apply bg-white p-2 mt-2 rounded-md shadow-full-light;
+        @apply max-h-[80vh] sm:max-h-[60vh] overflow-y-auto;
         &--open {
             @apply block;
         }