Add calculatePosition prop to vue-select in all webapps

lib/vue/src/components/permissions/CPermissionsModal.vue

@@ -56,6 +56,7 @@
               :options="roles"
               :get-option-key="getOptionRoleKey"
               append-to-body
+              :calculate-position="calculateDropdownPosition"
               class="h-100 bg-white"
               @input="onRoleChange"
             />
@@ -190,6 +191,7 @@
           clearable
           :disabled="!!add.userID"
           :placeholder="labels.add.role.placeholder"
+          :calculate-position="calculateDropdownPosition"
           class="bg-white"
         />
       </b-form-group>
@@ -210,6 +212,7 @@
           label="name"
           clearable
           :placeholder="labels.add.user.placeholder"
+          :calculate-position="calculateDropdownPosition"
           class="bg-white"
           @search="searchUsers"
         />
@@ -221,6 +224,7 @@
 import { modalOpenEventName, split } from './def.ts'
 import { VueSelect } from 'vue-select'
 import Rules from './form/Rules.vue'
+import calculateDropdownPosition from '../../mixins/vue-select-position'
 
 export default {
   i18nOptions: {
@@ -232,6 +236,10 @@ export default {
     VueSelect,
   },
 
+  mixins: [
+    calculateDropdownPosition
+  ],
+
   props: {
     labels: {
       required: false,

lib/vue/src/components/privacy/CSensitivityLevelPicker.vue

@@ -9,6 +9,7 @@
     :placeholder="placeholder"
     :reduce="l => l.sensitivityLevelID"
     append-to-body
+    :calculate-position="calculateDropdownPosition"
     class="bg-white"
     @input="onInput"
   />
@@ -17,12 +18,17 @@
 <script>
 import { NoID } from '@cortezaproject/corteza-js'
 import { VueSelect } from 'vue-select'
+import calculateDropdownPosition from '../../mixins/vue-select-position'
 
 export default {
   components: {
     VueSelect,
   },
 
+  mixins: [
+    calculateDropdownPosition
+  ],
+
   props: {
     value: {
       type: String,

lib/vue/src/components/prompts/kinds/CPromptComposeRecordPicker.vue

@@ -12,7 +12,7 @@
         :get-option-key="getOptionKey"
         :loading="processing"
         append-to-body
-        :calculate-position="calculatePosition"
+        :calculate-position="calculateDropdownPosition"
         option-value="recordID"
         option-text="label"
         placeholder="Select record"
@@ -202,7 +202,7 @@ export default {
       }
     }, 300),
 
-    calculatePosition (dropdownList, component, { width }) {
+    calculateDropdownPosition (dropdownList, component, { width }) {
       /**
        * We need to explicitly define the dropdown width since
        * it is usually inherited from the parent with CSS.

lib/vue/src/mixins/index.ts

@@ -1,2 +1,3 @@
 export { default as corredor } from './corredor'
 export { default as files } from './files'
+export { default as vueSelectPosition } from './vue-select-position'

lib/vue/src/mixins/vue-select-position.js

@@ -0,0 +1,48 @@
+import { createPopper } from '@popperjs/core'
+
+export default {
+  methods: {
+    calculateDropdownPosition (dropdownList, component, { width }) {
+      /**
+       * We need to explicitly define the dropdown width since
+       * it is usually inherited from the parent with CSS.
+       */
+      dropdownList.style.width = width
+
+      /**
+       * Here we position the dropdownList relative to the $refs.toggle Element.
+       *
+       * The 'offset' modifier aligns the dropdown so that the $refs.toggle and
+       * the dropdownList overlap by 1 pixel.
+       *
+       * The 'toggleClass' modifier adds a 'drop-up' class to the Vue Select
+       * wrapper so that we can set some styles for when the dropdown is placed
+       * above.
+       */
+      const popper = createPopper(component.$refs.toggle, dropdownList, {
+        placement: 'bottom',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, -1],
+            },
+          },
+          {
+            name: 'toggleClass',
+            enabled: true,
+            phase: 'write',
+            fn ({ state }) {
+              component.$el.classList.toggle('drop-up', state.placement === 'top')
+            },
+          }],
+      })
+
+      /**
+       * To prevent memory leaks Popper needs to be destroyed.
+       * If you return function, it will be called just before dropdown is removed from DOM.
+       */
+      return () => popper.destroy()
+    },
+  },
+}