Replace some select components with CInputSelect

2023-12-20 17:42:49 +01:00
parent fdcb27ebe3
commit be5ff4d095
97 changed files with 712 additions and 1095 deletions
@@ -27,15 +27,13 @@
        v-model="param.value"
      />

-      <vue-select
+      <c-input-select
        v-else-if="param.label === 'workflow'"
        v-model="param.value"
        :options="workflows"
        :get-option-key="getOptionKey"
        :reduce="wf => wf.workflowID"
        :placeholder="$t('filters.placeholders.workflow')"
-        :calculate-position="calculateDropdownPosition"
-        class="bg-white rounded"
      />

      <b-form-select
@@ -112,6 +110,7 @@
          v-model="param.value"
          max-rows="6"
        />
+
        <b-input-group v-else>
          <b-input-group-prepend
            v-if="param.label === 'expr'"
@@ -120,6 +119,7 @@
              ƒ
            </b-button>
          </b-input-group-prepend>
+
          <b-form-input
            v-if="param.label === 'expr'"
            v-model="param.value"
@@ -136,13 +136,7 @@
 </template>

 <script>
-import { VueSelect } from 'vue-select'
-
 export default {
-  components: {
-    VueSelect,
-  },
-
  props: {
    filter: {
      type: Object,
@@ -1,12 +1,10 @@
 <template>
-  <vue-select
+  <c-input-select
    data-test-id="select-user"
    :options="user.options"
    :get-option-label="getOptionLabel"
    :get-option-key="getOptionKey"
    :value="user.value"
-    :calculate-position="calculateDropdownPosition"
-    class="bg-white rounded"
    @search="search"
    @input="updateRunAs"
  />
@@ -14,13 +12,8 @@

 <script>
 import { debounce } from 'lodash'
-import { VueSelect } from 'vue-select'

 export default {
-  components: {
-    VueSelect,
-  },
-
  props: {
    userID: {
      type: String,
@@ -2,15 +2,13 @@
  <div
    data-test-id="role-picker"
  >
-    <vue-select
+    <c-input-select
      ref="picker"
      data-test-id="input-role-picker"
      :options="filtered"
      :get-option-key="r => r.value"
      :get-option-label="r => getRoleLabel(r)"
-      :calculate-position="calculateDropdownPosition"
      :placeholder="$t('admin:picker.role.placeholder')"
-      class="bg-white w-100 rounded"
      multiple
      @search="search"
      @input="updateValue($event)"
@@ -45,17 +43,12 @@

 <script>
 import { debounce } from 'lodash'
-import { VueSelect } from 'vue-select'

 function roleSorter (a, b) {
  return `${a.name} ${a.handle} ${a.roleID}`.localeCompare(`${b.name} ${b.handle} ${b.roleID}`)
 }

 export default {
-  components: {
-    VueSelect,
-  },
-
  props: {
    label: {
      type: String,
@@ -26,7 +26,7 @@
        :description="$t('ui.clone.description')"
        class="mb-0"
      >
-        <vue-select
+        <c-input-select
          v-model="selectedRoles"
          data-test-id="select-role-list"
          label="name"
@@ -36,8 +36,6 @@
          :loading="processingRoles"
          multiple
          :placeholder="$t('ui.clone.pick-role')"
-          :calculate-position="calculateDropdownPosition"
-          class="bg-white rounded"
        />
      </b-form-group>
    </b-modal>
@@ -45,17 +43,11 @@
 </template>

 <script>
-import VueSelect from 'vue-select'
-
 export default {
  i18nOptions: {
    namespaces: 'permissions',
  },

-  components: {
-    VueSelect,
-  },
-
  props: {
    roleId: {
      type: String,
@@ -219,7 +219,7 @@
        label-class="text-primary"
        class="mb-0"
      >
-        <vue-select
+        <c-input-select
          key="roleID"
          v-model="add.roleID"
          :data-test-id="`select-${add.mode}-roles`"
@@ -227,11 +227,8 @@
          :get-option-key="getOptionRoleKey"
          :multiple="add.mode === 'eval'"
          label="name"
-          clearable
          :disabled="add.mode === 'eval' && !!add.userID"
          :placeholder="$t('ui.add.role.placeholder')"
-          :calculate-position="calculateDropdownPosition"
-          class="bg-white rounded"
        />
      </b-form-group>

@@ -241,7 +238,7 @@
        label-class="text-primary"
        class="mt-3 mb-0"
      >
-        <vue-select
+        <c-input-select
          key="userID"
          v-model="add.userID"
          :data-test-id="`select-${add.mode}-users`"
@@ -250,10 +247,7 @@
          :options="userOptions"
          :get-option-label="getUserLabel"
          label="name"
-          clearable
          :placeholder="$t('ui.add.user.placeholder')"
-          :calculate-position="calculateDropdownPosition"
-          class="bg-white rounded"
          @search="searchUsers"
        />
      </b-form-group>
@@ -262,7 +256,6 @@
 </template>

 <script>
-import { VueSelect } from 'vue-select'
 import _ from 'lodash'

 export default {
@@ -270,10 +263,6 @@ export default {
    namespaces: 'permissions',
  },

-  components: {
-    VueSelect,
-  },
-
  props: {
    roles: {
      type: Array,
@@ -14,15 +14,13 @@
        label-class="text-primary"
        class="mb-0"
      >
-        <vue-select
+        <c-input-select
          ref="picker"
          data-test-id="input-role-members"
          :options="options"
          :get-option-key="u => u.value"
          :get-option-label="u => getUserLabel(u)"
-          :calculate-position="calculateDropdownPosition"
          :placeholder="$t('admin:picker.member.placeholder')"
-          class="bg-white w-100 rounded"
          multiple
          @search="search"
          @input="updateValue($event)"
@@ -70,7 +68,6 @@

 <script>
 import { debounce } from 'lodash'
-import { VueSelect } from 'vue-select'

 export default {
  i18nOptions: {
@@ -78,10 +75,6 @@ export default {
    keyPrefix: 'editor.members',
  },

-  components: {
-    VueSelect,
-  },
-
  props: {
    currentMembers: {
      type: Array,
@@ -22,7 +22,7 @@ import {
  TooltipComponent,
 } from 'echarts/components'

-const { CCorredorManualButtons, CPermissionsButton, CInputConfirm, CButtonSubmit, CInputCheckbox } = components
+const { CCorredorManualButtons, CPermissionsButton, CInputConfirm, CButtonSubmit, CInputCheckbox, CInputSelect } = components

 Vue.use(PortalVue)
 Vue.component('c-corredor-manual-buttons', CCorredorManualButtons)
@@ -34,6 +34,8 @@ Vue.component('c-input-confirm', CInputConfirm)
 Vue.component('c-button-submit', CButtonSubmit)
 Vue.component('c-input-checkbox', CInputCheckbox)
 Vue.component('c-system-fields', CSystemFields)
+Vue.component('c-input-select', CInputSelect)
+
 use([
  LineChart,
  SVGRenderer,
@@ -3,11 +3,9 @@ import Vue from 'vue'
 import resourceTranslations from './resource-translations'

 import toast from './toast'
-import vueSelectPosition from './vue-select-position'

 import './eventbus'

 Vue.mixin(resourceTranslations)

 Vue.mixin(toast)
-Vue.mixin(vueSelectPosition)
@@ -1,48 +0,0 @@
-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()
-    },
-  },
-}
@@ -76,7 +76,6 @@ th {
 .b-table-sticky-header > .table.b-table > thead > tr > th {
  border: 0;
 }
-
 .v-select {
  min-width: auto;
  position: relative;
@@ -1,4 +1,3 @@
@import "./rtl.scss";
-@import "~vue-select/dist/vue-select.css";
@import "custom";
-@import "./poppins.scss";
+@import "./poppins.scss";