feat(UI): ForeignKeySelect implements BaseSelect component

src/renderer/components/BaseSelect.vue

@@ -6,7 +6,7 @@
       role="combobox"
       :tabindex="searchable ? -1 : tabindex"
       @focus="activate()"
-      @blur="searchable ? false : deactivate()"
+      @blur="searchable ? false : handleBlurEvent()"
       @keyup.esc="deactivate()"
       @keydown.self.down.prevent="moveDown()"
       @keydown.self.up.prevent="moveUp"
@@ -23,8 +23,8 @@
             :tabindex="tabindex"
             :value="searchText"
             @input="searchText = $event.target.value"
-            @focus.prevent="activate()"
+            @focus.prevent="!isOpen ? activate() : false"
-            @blur.prevent="deactivate()"
+            @blur.prevent="handleBlurEvent()"
             @keyup.esc="deactivate()"
             @keydown.down.prevent="keyArrows('down')"
             @keydown.up.prevent="keyArrows('up')"
@@ -32,10 +32,14 @@
          >
          <span v-if="searchable && !isOpen || !searchable">{{ currentOptionLabel }}</span>
       </div>
-      <div
+      <Teleport
          v-if="isOpen"
+         ref="teleportEl"
+         :to="dropdownContainer"
+      >
+         <div
             ref="optionList"
-         class="select__list-wrapper"
+            :class="`select__list-wrapper ${dropdownClass ? dropdownClass : '' }`"
          >
             <ul class="select__list" @mousedown.prevent>
                <li
@@ -59,11 +63,12 @@
                </li>
             </ul>
          </div>
+      </Teleport>
    </div>
 </template>
 
 <script>
-import { defineComponent, computed, ref, watch } from 'vue';
+import { defineComponent, computed, ref, watch, nextTick, onMounted, onUnmounted } from 'vue';
 
 export default defineComponent({
    name: 'BaseSelect',
@@ -71,6 +76,9 @@ export default defineComponent({
       modelValue: {
          type: [String, Number, Object]
       },
+      value: {
+         type: [String, Number, Object]
+      },
       searchable: {
          type: Boolean,
          default: true
@@ -89,21 +97,35 @@ export default defineComponent({
       },
       optionTrackBy: {
          type: [String, Function],
-         default: (opt) => opt.id || opt.value
+         default: () => (opt) => {
+            for (const guess of ['id', 'value']) if (opt[guess]) return guess;
+         }
       },
       optionLabel: {
          type: [String, Function],
-         default: (opt) => opt.label
+         default: () => (opt) => opt.label ? 'label' : undefined
       },
       closeOnSelect: {
          type: Boolean,
          default: true
+      },
+      dropdownContainer: {
+         type: String,
+         default: '#main-content'
+      },
+      dropdownOffsets: {
+         type: Object,
+         default: () => ({ top: 10, left: 0 })
+      },
+      dropdownClass: {
+         type: String
       }
    },
-   emits: ['select', 'open', 'close', 'update:modelValue'],
+   emits: ['select', 'open', 'close', 'update:modelValue', 'change', 'blur'],
    setup (props, { emit }) {
       const hightlightedIndex = ref(0);
       const isOpen = ref(false);
+      const internalValue = ref(props.modelValue || props.value);
       const el = ref(null);
       const searchInput = ref(null);
       const optionList = ref(null);
@@ -134,12 +156,12 @@ export default defineComponent({
       });
 
       const getOptionValue = (opt) => {
-         const key = typeof props.optionTrackBy === 'function' ? props.optionTrackBy() : props.optionTrackBy;
+         const key = typeof props.optionTrackBy === 'function' ? props.optionTrackBy(opt) : props.optionTrackBy;
          return key ? opt[key] : opt;
       };
 
       const getOptionLabel = (opt) => {
-         const key = typeof props.optionLabel === 'function' ? props.optionLabel() : props.optionLabel;
+         const key = typeof props.optionLabel === 'function' ? props.optionLabel(opt) : props.optionLabel;
          return key ? opt[key] : opt;
       };
 
@@ -153,19 +175,22 @@ export default defineComponent({
       });
 
       const select = (opt) => {
+         internalValue.value = opt;
          emit('select', opt);
          emit('update:modelValue', getOptionValue(opt));
+         emit('change', opt);
 
          if (props.closeOnSelect)
             deactivate();
       };
 
       const isSelected = (opt) => {
-         return props.modelValue === getOptionValue(opt);
+         return internalValue.value === getOptionValue(opt);
       };
 
       const activate = () => {
          if (isOpen.value) return;
+         isOpen.value = true;
 
          if (props.searchable)
             searchInput.value.focus();
@@ -173,14 +198,13 @@ export default defineComponent({
          else
             el.value.focus();
 
-         isOpen.value = true;
+         nextTick(() => adjustListPosition());
 
          emit('open');
       };
 
       const deactivate = () => {
          if (!isOpen.value) return;
-
          isOpen.value = false;
 
          if (props.searchable)
@@ -194,6 +218,16 @@ export default defineComponent({
          emit('close');
       };
 
+      const adjustListPosition = () => {
+         const element = el.value;
+         const { left, top } = element.getBoundingClientRect();
+         const { left: offsetLeft = 0, top: offsetTop = 0 } = props.dropdownOffsets;
+
+         optionList.value.style.left = `${left + offsetLeft}px`;
+         optionList.value.style.top = `${top + element.clientHeight + offsetTop}px`;
+         optionList.value.style.minWidth = `${element.clientWidth}px`;
+      };
+
       const keyArrows = (direction) => {
          const sum = direction === 'down' ? +1 : -1;
          const index = hightlightedIndex.value + sum;
@@ -211,6 +245,18 @@ export default defineComponent({
             optionList.value.scrollTop = optEl.offsetTop - optionList.value.clientHeight + optEl.clientHeight;
       };
 
+      const handleBlurEvent = () => {
+         deactivate();
+         emit('blur');
+      };
+
+      onMounted(() => {
+         window.addEventListener('resize', adjustListPosition);
+      });
+      onUnmounted(() => {
+         window.removeEventListener('resize', adjustListPosition);
+      });
+
       return {
          el,
          searchInput,
@@ -228,7 +274,8 @@ export default defineComponent({
          isOpen,
          hightlightedIndex,
          optionList,
-         optionRefs
+         optionRefs,
+         handleBlurEvent
       };
    }
 });
@@ -236,7 +283,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .select {
-  position: relative;
+
   display: block;
 
   &__search-input {
@@ -248,10 +295,9 @@ export default defineComponent({
   }
 
   &__list-wrapper {
-    position: absolute;
+    position: fixed;
     display: block;
-    width: 100%;
+    z-index: 5;
-    z-index: 50;
     -webkit-overflow-scrolling: touch;
     max-height: 240px;
     overflow: auto;

src/renderer/components/ForeignKeySelect.vue

@@ -1,23 +1,15 @@
 <template>
-   <select
+   <BaseSelect
       ref="editField"
+      :options="foreigns"
       class="form-select pl-1 pr-4"
       :class="{'small-select': size === 'small'}"
+      :value="currentValue"
+      dropdown-class="select-sm"
+      dropdown-container=".workspace-query-results > .vscroll"
       @change="onChange"
       @blur="$emit('blur')"
-   >
+   />
-      <option v-if="!isValidDefault" :value="modelValue">
-         {{ modelValue === null ? 'NULL' : modelValue }}
-      </option>
-      <option
-         v-for="row in foreignList"
-         :key="row.foreign_column"
-         :value="row.foreign_column"
-         :selected="row.foreign_column === modelValue"
-      >
-         {{ row.foreign_column }} {{ cutText('foreign_description' in row ? ` - ${row.foreign_description}` : '') }}
-      </option>
-   </select>
 </template>
 
 <script>
@@ -26,8 +18,11 @@ import Tables from '@/ipc-api/Tables';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import { TEXT, LONG_TEXT } from 'common/fieldTypes';
+import BaseSelect from '@/components/BaseSelect.vue';
+
 export default {
    name: 'ForeignKeySelect',
+   components: { BaseSelect },
    props: {
       modelValue: [String, Number],
       keyUsage: Object,
@@ -47,7 +42,8 @@ export default {
    },
    data () {
       return {
-         foreignList: []
+         foreignList: [],
+         currentValue: this.modelValue
       };
    },
    computed: {
@@ -55,6 +51,17 @@ export default {
          if (!this.foreignList.length) return true;
          if (this.modelValue === null) return false;
          return this.foreignList.some(foreign => foreign.foreign_column.toString() === this.modelValue.toString());
+      },
+      foreigns () {
+         const list = [];
+
+         if (!this.isValidDefault)
+            list.push({ value: this.modelValue, label: this.modelValue === null ? 'NULL' : this.modelValue });
+
+         for (const row of this.foreignList)
+            list.push({ value: row.foreign_column, label: `${row.foreign_column} ${this.cutText('foreign_description' in row ? ` - ${row.foreign_description}` : '')}` });
+
+         return list;
       }
    },
    async created () {
@@ -95,8 +102,8 @@ export default {
       }
    },
    methods: {
-      onChange () {
+      onChange (opt) {
-         this.$emit('update:modelValue', this.$refs.editField.value);
+         this.$emit('update:modelValue', opt.value);
       },
       cutText (val) {
          if (typeof val !== 'string') return val;

src/renderer/components/WorkspaceEditConnectionPanel.vue

@@ -56,6 +56,8 @@
                               option-track-by="slug"
                               option-label="name"
                               class="form-select"
+                              dropdown-container=".workspace .connection-panel-wrapper"
+                              :dropdown-offsets="{top: 10}"
                            />
                         </div>
                      </div>

src/renderer/scss/main.scss

@@ -302,11 +302,7 @@ option:checked {
       border-color: $primary-color !important;
       @include control-shadow();
     }
-
+  }
-    .select__list-wrapper {
-      border: 1px solid transparent;
-      border-radius: $border-radius;
-      box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
 }
 
 .select__list {
@@ -314,17 +310,19 @@ option:checked {
   li {
     margin: 0;
     padding: 0.3rem 0.8rem;
-      }
-    }
 
-    &.select-sm {
+    .select-sm & {
-      .select__list {
-        li {
       padding: 0.05rem 0.3rem;
     }
   }
 }
 
+.select__list-wrapper {
+  border: 1px solid transparent;
+  border-radius: $border-radius;
+  box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
+}
+
 .select__option--selected {
   background: rgba($primary-color, 0.25);
 }
@@ -332,8 +330,6 @@ option:checked {
 .select__option--highlight {
   background: $primary-color;
 }
-  }
-}
 
 .form-input[type="file"] {
   overflow: hidden;

src/renderer/scss/themes/dark-theme.scss

@@ -121,14 +121,12 @@
     border-color: $primary-color;
   }
 
-  .form-select {
   .select {
     &__list-wrapper {
       border-color: $bg-color-gray;
       background-color: $bg-color-light-dark;
     }
   }
-  }
 
   .form-input[readonly] {
     background-color: $bg-color-dark;

src/renderer/scss/themes/light-theme.scss

@@ -18,7 +18,6 @@
     background: #ababab;
   }
 
-  .form-select {
   .select {
     &__list-wrapper {
       border: #bcc3ce;
@@ -29,7 +28,6 @@
       color: $light-color;
     }
   }
-  }
 
   .menu {
     .menu-item a {