From 42bc9196ffc2f64b77f9cb42136255fc74815034 Mon Sep 17 00:00:00 2001
From: Giulio Ganci <giulioganci@gmail.com>
Date: Wed, 11 May 2022 23:30:31 +0200
Subject: [PATCH] feat(UI): select tab replace with BaseSelect component

---
 src/renderer/components/FakerSelect.vue       |  51 ++----
 src/renderer/components/ModalEditSchema.vue   |  21 ++-
 src/renderer/components/ModalExportSchema.vue |  30 ++--
 src/renderer/components/ModalFakerRows.vue    | 154 +++++++-----------
 src/renderer/components/ModalNewSchema.vue    |  18 +-
 src/renderer/components/ModalSettings.vue     |  55 ++-----
 .../components/WorkspaceTabNewFunction.vue    |  85 ++++------
 .../components/WorkspaceTabNewRoutine.vue     |  58 +++----
 .../components/WorkspaceTabNewScheduler.vue   |  40 ++---
 .../components/WorkspaceTabNewTable.vue       |  40 +++--
 .../components/WorkspaceTabNewTrigger.vue     |  70 ++++----
 .../WorkspaceTabNewTriggerFunction.vue        |  38 ++---
 .../components/WorkspaceTabNewView.vue        |  72 ++++----
 .../components/WorkspaceTabPropsFunction.vue  |  88 ++++------
 .../WorkspaceTabPropsFunctionParamsModal.vue  |  29 ++--
 .../components/WorkspaceTabPropsRoutine.vue   |  58 +++----
 .../WorkspaceTabPropsRoutineParamsModal.vue   |  29 ++--
 .../components/WorkspaceTabPropsScheduler.vue |  40 ++---
 .../WorkspaceTabPropsSchedulerTimingModal.vue |  52 +++---
 .../components/WorkspaceTabPropsTable.vue     |  36 ++--
 .../WorkspaceTabPropsTableForeignModal.vue    |  47 ++----
 .../WorkspaceTabPropsTableIndexesModal.vue    |  20 +--
 .../components/WorkspaceTabPropsTableRow.vue  |  54 +++---
 .../components/WorkspaceTabPropsTrigger.vue   |  71 ++++----
 .../WorkspaceTabPropsTriggerFunction.vue      |  38 ++---
 .../components/WorkspaceTabPropsView.vue      |  72 ++++----
 src/renderer/components/WorkspaceTabQuery.vue |  33 ++--
 .../components/WorkspaceTabQueryTableRow.vue  |  37 ++---
 src/renderer/scss/main.scss                   |   3 +-
 29 files changed, 588 insertions(+), 851 deletions(-)

diff --git a/src/renderer/components/FakerSelect.vue b/src/renderer/components/FakerSelect.vue
index 125cf0c6..b99a483f 100644
--- a/src/renderer/components/FakerSelect.vue
+++ b/src/renderer/components/FakerSelect.vue
@@ -1,38 +1,26 @@
 <template>
    <fieldset class="input-group mb-0">
-      <select
+      <BaseSelect
          v-model="selectedGroup"
          class="form-select"
+         :options="[{name: 'manual'}, ...fakerGroups]"
+         :option-label="(opt) => opt.name === 'manual' ? $t('message.manualValue') : $t(`faker.${opt.name}`)"
+         option-track-by="name"
          :disabled="!isChecked"
          style="flex-grow: 0;"
          @change="onChange"
-      >
-         <option value="manual">
-            {{ $t('message.manualValue') }}
-         </option>
-         <option
-            v-for="group in fakerGroups"
-            :key="group.name"
-            :value="group.name"
-         >
-            {{ $t(`faker.${group.name}`) }}
-         </option>
-      </select>
-      <select
+      />
+
+      <BaseSelect
          v-if="selectedGroup !== 'manual'"
          v-model="selectedMethod"
+         :options="fakerMethods"
+         :option-label="(opt) => $t(`faker.${opt.name}`)"
+         option-track-by="name"
          class="form-select"
          :disabled="!isChecked"
          @change="onChange"
-      >
-         <option
-            v-for="method in fakerMethods"
-            :key="method.name"
-            :value="method.name"
-         >
-            {{ $t(`faker.${method.name}`) }}
-         </option>
-      </select>
+      />
       <ForeignKeySelect
          v-else-if="foreignKeys.includes(field.name)"
          ref="formInput"
@@ -66,21 +54,14 @@
          :type="inputProps().type"
          :disabled="!isChecked"
       >
-      <select
+      <BaseSelect
          v-else-if="enumArray"
          v-model="selectedValue"
+         :options="enumArray"
          class="form-select"
          :disabled="!isChecked"
          @change="onChange"
-      >
-         <option
-            v-for="val in enumArray"
-            :key="val"
-            :value="val"
-         >
-            {{ val }}
-         </option>
-      </select>
+      />
       <input
          v-else
          ref="formInput"
@@ -109,12 +90,14 @@ import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from
 import BaseUploadInput from '@/components/BaseUploadInput';
 import ForeignKeySelect from '@/components/ForeignKeySelect';
 import FakerMethods from 'common/FakerMethods';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'FakerSelect',
    components: {
       ForeignKeySelect,
-      BaseUploadInput
+      BaseUploadInput,
+      BaseSelect
    },
    props: {
       type: String,
diff --git a/src/renderer/components/ModalEditSchema.vue b/src/renderer/components/ModalEditSchema.vue
index 9f9cac62..20a69fac 100644
--- a/src/renderer/components/ModalEditSchema.vue
+++ b/src/renderer/components/ModalEditSchema.vue
@@ -21,6 +21,7 @@
                         </div>
                         <div class="col-9">
                            <input
+                              ref="firstInput"
                               v-model="database.name"
                               class="form-input"
                               type="text"
@@ -35,19 +36,13 @@
                            <label class="form-label">{{ $t('word.collation') }}</label>
                         </div>
                         <div class="col-9">
-                           <select
-                              ref="firstInput"
+                           <BaseSelect
                               v-model="database.collation"
                               class="form-select"
-                           >
-                              <option
-                                 v-for="collation in collations"
-                                 :key="collation.id"
-                                 :value="collation.collation"
-                              >
-                                 {{ collation.collation }}
-                              </option>
-                           </select>
+                              :options="collations"
+                              option-label="collation"
+                              option-track-by="collation"
+                           />
                            <small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
                         </div>
                      </div>
@@ -72,9 +67,13 @@ import { storeToRefs } from 'pinia';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import Schema from '@/ipc-api/Schema';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'ModalEditSchema',
+   components: {
+      BaseSelect
+   },
    props: {
       selectedSchema: String
    },
diff --git a/src/renderer/components/ModalExportSchema.vue b/src/renderer/components/ModalExportSchema.vue
index 5bc5ec8a..fe652511 100644
--- a/src/renderer/components/ModalExportSchema.vue
+++ b/src/renderer/components/ModalExportSchema.vue
@@ -206,14 +206,11 @@
                               >
                            </div>
                            <div class="column col-6">
-                              <select v-model="options.sqlInsertDivider" class="form-select">
-                                 <option value="bytes">
-                                    KiB
-                                 </option>
-                                 <option value="rows">
-                                    {{ $tc('word.row', 2) }}
-                                 </option>
-                              </select>
+                              <BaseSelect
+                                 v-model="options.sqlInsertDivider"
+                                 class="form-select"
+                                 :options="[{value: 'bytes', label: 'KiB'}, {value: 'rows', label: $tc('word.row', 2)}]"
+                              />
                            </div>
                         </div>
                      </div>
@@ -223,14 +220,11 @@
                      </div>
                      <div class="columns">
                         <div class="column h5 mb-4">
-                           <select v-model="options.outputFormat" class="form-select">
-                              <option value="sql">
-                                 {{ $t('message.singleFile', {ext: '.sql'}) }}
-                              </option>
-                              <option value="sql.zip">
-                                 {{ $t('message.zipCompressedFile', {ext: '.sql'}) }}
-                              </option>
-                           </select>
+                           <BaseSelect
+                              v-model="options.outputFormat"
+                              class="form-select"
+                              :options="[{value: 'sql', label: $t('message.singleFile', {ext: '.sql'})}, {value: 'sql.zip', label: $t('message.zipCompressedFile', {ext: '.sql'})}]"
+                           />
                         </div>
                      </div>
                   </div>
@@ -278,9 +272,13 @@ import { useWorkspacesStore } from '@/stores/workspaces';
 import customizations from 'common/customizations';
 import Application from '@/ipc-api/Application';
 import Schema from '@/ipc-api/Schema';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'ModalExportSchema',
+   components: {
+      BaseSelect
+   },
    props: {
       selectedSchema: String
    },
diff --git a/src/renderer/components/ModalFakerRows.vue b/src/renderer/components/ModalFakerRows.vue
index 4552c6e4..d8f4543f 100644
--- a/src/renderer/components/ModalFakerRows.vue
+++ b/src/renderer/components/ModalFakerRows.vue
@@ -72,99 +72,11 @@
                      class="tooltip tooltip-right ml-2"
                      :data-tooltip="$t('message.fakeDataLanguage')"
                   >
-                     <select v-model="fakerLocale" class="form-select">
-                        <option value="ar">
-                           Arabic
-                        </option><option value="az">
-                           Azerbaijani
-                        </option><option value="zh_CN">
-                           Chinese
-                        </option><option value="zh_TW">
-                           Chinese (Taiwan)
-                        </option><option value="cz">
-                           Czech
-                        </option><option value="nl">
-                           Dutch
-                        </option><option value="nl_BE">
-                           Dutch (Belgium)
-                        </option><option value="en">
-                           English
-                        </option><option value="en_AU_ocker">
-                           English (Australia Ocker)
-                        </option><option value="en_AU">
-                           English (Australia)
-                        </option><option value="en_BORK">
-                           English (Bork)
-                        </option><option value="en_CA">
-                           English (Canada)
-                        </option><option value="en_GB">
-                           English (Great Britain)
-                        </option><option value="en_IND">
-                           English (India)
-                        </option><option value="en_IE">
-                           English (Ireland)
-                        </option><option value="en_ZA">
-                           English (South Africa)
-                        </option><option value="en_US">
-                           English (United States)
-                        </option><option value="fa">
-                           Farsi
-                        </option><option value="fi">
-                           Finnish
-                        </option><option value="fr">
-                           French
-                        </option><option value="fr_CA">
-                           French (Canada)
-                        </option><option value="fr_CH">
-                           French (Switzerland)
-                        </option><option value="ge">
-                           Georgian
-                        </option><option value="de">
-                           German
-                        </option><option value="de_AT">
-                           German (Austria)
-                        </option><option value="de_CH">
-                           German (Switzerland)
-                        </option><option value="hr">
-                           Hrvatski
-                        </option><option value="id_ID">
-                           Indonesia
-                        </option><option value="it">
-                           Italian
-                        </option><option value="ja">
-                           Japanese
-                        </option><option value="ko">
-                           Korean
-                        </option><option value="nep">
-                           Nepalese
-                        </option><option value="nb_NO">
-                           Norwegian
-                        </option><option value="pl">
-                           Polish
-                        </option><option value="pt_BR">
-                           Portuguese (Brazil)
-                        </option><option value="pt_PT">
-                           Portuguese (Portugal)
-                        </option><option value="ro">
-                           Romanian
-                        </option><option value="ru">
-                           Russian
-                        </option><option value="sk">
-                           Slovakian
-                        </option><option value="es">
-                           Spanish
-                        </option><option value="es_MX">
-                           Spanish (Mexico)
-                        </option><option value="sv">
-                           Swedish
-                        </option><option value="tr">
-                           Turkish
-                        </option><option value="uk">
-                           Ukrainian
-                        </option><option value="vi">
-                           Vietnamese
-                        </option>
-                     </select>
+                     <BaseSelect
+                        v-model="fakerLocale"
+                        :options="locales"
+                        class="form-select"
+                     />
                   </div>
                </div>
                <div class="column col-auto">
@@ -193,11 +105,13 @@ import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import Tables from '@/ipc-api/Tables';
 import FakerSelect from '@/components/FakerSelect';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'ModalFakerRows',
    components: {
-      FakerSelect
+      FakerSelect,
+      BaseSelect
    },
    props: {
       tabUid: [String, Number],
@@ -210,14 +124,62 @@ export default {
       const workspacesStore = useWorkspacesStore();
 
       const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
-
       const { getWorkspace, getWorkspaceTab } = workspacesStore;
+      const locales = [
+         { value: 'ar', label: 'Arabic' },
+         { value: 'az', label: 'Azerbaijani' },
+         { value: 'zh_CN', label: 'Chinese' },
+         { value: 'zh_TW', label: 'Chinese (Taiwan)' },
+         { value: 'cz', label: 'Czech' },
+         { value: 'nl', label: 'Dutch' },
+         { value: 'nl_BE', label: 'Dutch (Belgium)' },
+         { value: 'en', label: 'English' },
+         { value: 'en_AU_ocker', label: 'English (Australia Ocker)' },
+         { value: 'en_AU', label: 'English (Australia)' },
+         { value: 'en_BORK', label: 'English (Bork)' },
+         { value: 'en_CA', label: 'English (Canada)' },
+         { value: 'en_GB', label: 'English (Great Britain)' },
+         { value: 'en_IND', label: 'English (India)' },
+         { value: 'en_IE', label: 'English (Ireland)' },
+         { value: 'en_ZA', label: 'English (South Africa)' },
+         { value: 'en_US', label: 'English (United States)' },
+         { value: 'fa', label: 'Farsi' },
+         { value: 'fi', label: 'Finnish' },
+         { value: 'fr', label: 'French' },
+         { value: 'fr_CA', label: 'French (Canada)' },
+         { value: 'fr_CH', label: 'French (Switzerland)' },
+         { value: 'ge', label: 'Georgian' },
+         { value: 'de', label: 'German' },
+         { value: 'de_AT', label: 'German (Austria)' },
+         { value: 'de_CH', label: 'German (Switzerland)' },
+         { value: 'hr', label: 'Hrvatski' },
+         { value: 'id_ID', label: 'Indonesia' },
+         { value: 'it', label: 'Italian' },
+         { value: 'ja', label: 'Japanese' },
+         { value: 'ko', label: 'Korean' },
+         { value: 'nep', label: 'Nepalese' },
+         { value: 'nb_NO', label: 'Norwegian' },
+         { value: 'pl', label: 'Polish' },
+         { value: 'pt_BR', label: 'Portuguese (Brazil)' },
+         { value: 'pt_PT', label: 'Portuguese (Portugal)' },
+         { value: 'ro', label: 'Romanian' },
+         { value: 'ru', label: 'Russian' },
+         { value: 'sk', label: 'Slovakian' },
+         { value: 'es', label: 'Spanish' },
+         { value: 'es_MX', label: 'Spanish (Mexico)' },
+         { value: 'sv', label: 'Swedish' },
+         { value: 'tr', label: 'Turkish' },
+         { value: 'uk', label: 'Ukrainian' },
+         { value: 'vi', label: 'Vietnamese' }
+
+      ];
 
       return {
          addNotification,
          selectedWorkspace,
          getWorkspace,
-         getWorkspaceTab
+         getWorkspaceTab,
+         locales
       };
    },
    data () {
diff --git a/src/renderer/components/ModalNewSchema.vue b/src/renderer/components/ModalNewSchema.vue
index a1b21334..5d7b6f1a 100644
--- a/src/renderer/components/ModalNewSchema.vue
+++ b/src/renderer/components/ModalNewSchema.vue
@@ -35,15 +35,13 @@
                            <label class="form-label">{{ $t('word.collation') }}</label>
                         </div>
                         <div class="col-9">
-                           <select v-model="database.collation" class="form-select">
-                              <option
-                                 v-for="collation in collations"
-                                 :key="collation.id"
-                                 :value="collation.collation"
-                              >
-                                 {{ collation.collation }}
-                              </option>
-                           </select>
+                           <BaseSelect
+                              v-model="database.collation"
+                              class="form-select"
+                              :options="collations"
+                              option-label="collation"
+                              option-track-by="collation"
+                           />
                            <small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
                         </div>
                      </div>
@@ -72,9 +70,11 @@ import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import Schema from '@/ipc-api/Schema';
 import { storeToRefs } from 'pinia';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'ModalNewSchema',
+   components: { BaseSelect },
    emits: ['reload', 'close'],
    setup () {
       const { addNotification } = useNotificationsStore();
diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
index a00442e6..5337a19a 100644
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -69,19 +69,14 @@
                                     </label>
                                  </div>
                                  <div class="col-3 col-sm-12">
-                                    <select
+                                    <BaseSelect
                                        v-model="localLocale"
                                        class="form-select"
+                                       :options="locales"
+                                       option-track-by="code"
+                                       option-label="name"
                                        @change="changeLocale(localLocale)"
-                                    >
-                                       <option
-                                          v-for="(locale, key) in locales"
-                                          :key="key"
-                                          :value="locale.code"
-                                       >
-                                          {{ locale.name }}
-                                       </option>
-                                    </select>
+                                    />
                                  </div>
                                  <div class="col-4 col-sm-12 px-2 p-vcentered">
                                     <small class="d-block" style="line-height:1.1; font-size:70%;">
@@ -97,18 +92,12 @@
                                     </label>
                                  </div>
                                  <div class="col-3 col-sm-12">
-                                    <select
+                                    <BaseSelect
                                        v-model="localPageSize"
                                        class="form-select"
+                                       :options="pageSizes"
                                        @change="changePageSize(+localPageSize)"
-                                    >
-                                       <option
-                                          v-for="size in pageSizes"
-                                          :key="size"
-                                       >
-                                          {{ size }}
-                                       </option>
-                                    </select>
+                                    />
                                  </div>
                               </div>
                               <div class="form-group column col-12 mb-0">
@@ -231,26 +220,16 @@
                               {{ $t('message.editorTheme') }}
                            </div>
                            <div class="column col-6 h5 mb-4">
-                              <select
+                              <BaseSelect
                                  v-model="localEditorTheme"
                                  class="form-select"
+                                 :options="editorThemes"
+                                 option-label="name"
+                                 option-track-by="code"
+                                 group-label="group"
+                                 group-values="themes"
                                  @change="changeEditorTheme(localEditorTheme)"
-                              >
-                                 <optgroup
-                                    v-for="group in editorThemes"
-                                    :key="group.group"
-                                    :label="group.group"
-                                 >
-                                    <option
-                                       v-for="theme in group.themes"
-                                       :key="theme.name"
-                                       :value="theme.code"
-                                       :selected="editorTheme === theme.code"
-                                    >
-                                       {{ theme.name }}
-                                    </option>
-                                 </optgroup>
-                              </select>
+                              />
                            </div>
                            <div class="column col-6 mb-4">
                               <div class="btn-group btn-group-block">
@@ -332,13 +311,15 @@ import localesNames from '@/i18n/supported-locales';
 import ModalSettingsUpdate from '@/components/ModalSettingsUpdate';
 import ModalSettingsChangelog from '@/components/ModalSettingsChangelog';
 import BaseTextEditor from '@/components/BaseTextEditor';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'ModalSettings',
    components: {
       ModalSettingsUpdate,
       ModalSettingsChangelog,
-      BaseTextEditor
+      BaseTextEditor,
+      BaseSelect
    },
    setup () {
       const applicationStore = useApplicationStore();
diff --git a/src/renderer/components/WorkspaceTabNewFunction.vue b/src/renderer/components/WorkspaceTabNewFunction.vue
index 663798b3..e58c1162 100644
--- a/src/renderer/components/WorkspaceTabNewFunction.vue
+++ b/src/renderer/components/WorkspaceTabNewFunction.vue
@@ -57,11 +57,11 @@
                   <label class="form-label">
                      {{ $t('word.language') }}
                   </label>
-                  <select v-model="localFunction.language" class="form-select">
-                     <option v-for="language in customizations.languages" :key="language">
-                        {{ language }}
-                     </option>
-                  </select>
+                  <BaseSelect
+                     v-model="localFunction.language"
+                     :options="customizations.languages"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="customizations.definer" class="column col-auto">
@@ -69,27 +69,13 @@
                   <label class="form-label">
                      {{ $t('word.definer') }}
                   </label>
-                  <select
-                     v-if="workspace.users.length"
+                  <BaseSelect
                      v-model="localFunction.definer"
+                     :options="[{value: '', name:$t('message.currentUser')}, ...workspace.users]"
+                     :option-label="(user) => user.value === '' ? user.name : `${user.name}@${user.host}`"
+                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
+                  />
                </div>
             </div>
             <div class="column col-auto">
@@ -98,29 +84,16 @@
                      {{ $t('word.returns') }}
                   </label>
                   <div class="input-group">
-                     <select
+                     <BaseSelect
                         v-model="localFunction.returns"
                         class="form-select text-uppercase"
+                        :options="[{ name: 'VOID' }, ...workspace.dataTypes]"
+                        group-label="group"
+                        group-values="types"
+                        option-label="name"
+                        option-track-by="name"
                         style="max-width: 150px;"
-                     >
-                        <option v-if="localFunction.returns === 'VOID'">
-                           VOID
-                        </option>
-                        <optgroup
-                           v-for="group in workspace.dataTypes"
-                           :key="group.group"
-                           :label="group.group"
-                        >
-                           <option
-                              v-for="type in group.types"
-                              :key="type.name"
-                              :selected="localFunction.returns === type.name"
-                              :value="type.name"
-                           >
-                              {{ type.name }}
-                           </option>
-                        </optgroup>
-                     </select>
+                     />
                      <input
                         v-if="customizations.parametersLength"
                         v-model="localFunction.returnsLength"
@@ -150,10 +123,11 @@
                   <label class="form-label">
                      {{ $t('message.sqlSecurity') }}
                   </label>
-                  <select v-model="localFunction.security" class="form-select">
-                     <option>DEFINER</option>
-                     <option>INVOKER</option>
-                  </select>
+                  <BaseSelect
+                     v-model="localFunction.security"
+                     :options="['DEFINER', 'INVOKER']"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="customizations.functionDataAccess" class="column col-auto">
@@ -161,12 +135,11 @@
                   <label class="form-label">
                      {{ $t('message.dataAccess') }}
                   </label>
-                  <select v-model="localFunction.dataAccess" class="form-select">
-                     <option>CONTAINS SQL</option>
-                     <option>NO SQL</option>
-                     <option>READS SQL DATA</option>
-                     <option>MODIFIES SQL DATA</option>
-                  </select>
+                  <BaseSelect
+                     v-model="localFunction.dataAccess"
+                     :options="['CONTAINS SQL', 'NO SQL', 'READS SQL DATA', 'MODIFIES SQL DATA']"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="customizations.functionDeterministic" class="column col-auto">
@@ -210,13 +183,15 @@ import QueryEditor from '@/components/QueryEditor';
 import WorkspaceTabPropsFunctionParamsModal from '@/components/WorkspaceTabPropsFunctionParamsModal';
 import Functions from '@/ipc-api/Functions';
 import { storeToRefs } from 'pinia';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabNewFunction',
    components: {
       BaseLoader,
       QueryEditor,
-      WorkspaceTabPropsFunctionParamsModal
+      WorkspaceTabPropsFunctionParamsModal,
+      BaseSelect
    },
    props: {
       tabUid: String,
diff --git a/src/renderer/components/WorkspaceTabNewRoutine.vue b/src/renderer/components/WorkspaceTabNewRoutine.vue
index 4b81e4ba..1ef4d413 100644
--- a/src/renderer/components/WorkspaceTabNewRoutine.vue
+++ b/src/renderer/components/WorkspaceTabNewRoutine.vue
@@ -57,11 +57,11 @@
                   <label class="form-label">
                      {{ $t('word.language') }}
                   </label>
-                  <select v-model="localRoutine.language" class="form-select">
-                     <option v-for="language in customizations.languages" :key="language">
-                        {{ language }}
-                     </option>
-                  </select>
+                  <BaseSelect
+                     v-model="localRoutine.language"
+                     :options="customizations.languages"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="customizations.definer" class="column col-auto">
@@ -69,27 +69,13 @@
                   <label class="form-label">
                      {{ $t('word.definer') }}
                   </label>
-                  <select
-                     v-if="workspace.users.length"
+                  <BaseSelect
                      v-model="localRoutine.definer"
+                     :options="[{value: '', name:$t('message.currentUser')}, ...workspace.users]"
+                     :option-label="(user) => user.value === '' ? user.name : `${user.name}@${user.host}`"
+                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
+                  />
                </div>
             </div>
             <div v-if="customizations.comment" class="column">
@@ -109,10 +95,11 @@
                   <label class="form-label">
                      {{ $t('message.sqlSecurity') }}
                   </label>
-                  <select v-model="localRoutine.security" class="form-select">
-                     <option>DEFINER</option>
-                     <option>INVOKER</option>
-                  </select>
+                  <BaseSelect
+                     v-model="localRoutine.security"
+                     :options="['DEFINER', 'INVOKER']"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="customizations.procedureDataAccess" class="column col-auto">
@@ -120,12 +107,11 @@
                   <label class="form-label">
                      {{ $t('message.dataAccess') }}
                   </label>
-                  <select v-model="localRoutine.dataAccess" class="form-select">
-                     <option>CONTAINS SQL</option>
-                     <option>NO SQL</option>
-                     <option>READS SQL DATA</option>
-                     <option>MODIFIES SQL DATA</option>
-                  </select>
+                  <BaseSelect
+                     v-model="localRoutine.dataAccess"
+                     :options="['CONTAINS SQL', 'NO SQL', 'READS SQL DATA', 'MODIFIES SQL DATA']"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="customizations.procedureDeterministic" class="column col-auto">
@@ -170,13 +156,15 @@ import BaseLoader from '@/components/BaseLoader';
 import WorkspaceTabPropsRoutineParamsModal from '@/components/WorkspaceTabPropsRoutineParamsModal';
 import Routines from '@/ipc-api/Routines';
 import { storeToRefs } from 'pinia';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabNewRoutine',
    components: {
       QueryEditor,
       BaseLoader,
-      WorkspaceTabPropsRoutineParamsModal
+      WorkspaceTabPropsRoutineParamsModal,
+      BaseSelect
    },
    props: {
       tabUid: String,
diff --git a/src/renderer/components/WorkspaceTabNewScheduler.vue b/src/renderer/components/WorkspaceTabNewScheduler.vue
index 2a8d9698..9b1df4f1 100644
--- a/src/renderer/components/WorkspaceTabNewScheduler.vue
+++ b/src/renderer/components/WorkspaceTabNewScheduler.vue
@@ -52,30 +52,13 @@
             <div class="column col-auto">
                <div class="form-group">
                   <label class="form-label">{{ $t('word.definer') }}</label>
-                  <select
-                     v-if="workspace.users.length"
+                  <BaseSelect
                      v-model="localScheduler.definer"
+                     :options="users"
+                     :option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
+                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option v-if="!isDefinerInUsers" :value="originalScheduler.definer">
-                        {{ originalScheduler.definer.replaceAll('`', '') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
+                  />
                </div>
             </div>
             <div class="column">
@@ -149,13 +132,15 @@ import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import WorkspaceTabPropsSchedulerTimingModal from '@/components/WorkspaceTabPropsSchedulerTimingModal';
 import Schedulers from '@/ipc-api/Schedulers';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabNewScheduler',
    components: {
       BaseLoader,
       QueryEditor,
-      WorkspaceTabPropsSchedulerTimingModal
+      WorkspaceTabPropsSchedulerTimingModal,
+      BaseSelect
    },
    props: {
       tabUid: String,
@@ -220,6 +205,15 @@ export default {
             .map(schema => schema.tables);
 
          return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
+      },
+      users () {
+         const users = [{ value: '' }, ...this.workspace.users];
+         if (!this.isDefinerInUsers) {
+            const [name, host] = this.originalScheduler.definer.replaceAll('`', '').split('@');
+            users.unshift({ name, host });
+         }
+
+         return users;
       }
    },
    watch: {
diff --git a/src/renderer/components/WorkspaceTabNewTable.vue b/src/renderer/components/WorkspaceTabNewTable.vue
index 2ad38112..bc211bb5 100644
--- a/src/renderer/components/WorkspaceTabNewTable.vue
+++ b/src/renderer/components/WorkspaceTabNewTable.vue
@@ -88,15 +88,13 @@
                   <label class="form-label">
                      {{ $t('word.collation') }}
                   </label>
-                  <select v-model="localOptions.collation" class="form-select">
-                     <option
-                        v-for="collation in workspace.collations"
-                        :key="collation.id"
-                        :value="collation.collation"
-                     >
-                        {{ collation.collation }}
-                     </option>
-                  </select>
+                  <BaseSelect
+                     v-model="localOptions.collation"
+                     :options="workspace.collations"
+                     option-label="collation"
+                     option-track-by="collation"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="workspace.customizations.engines" class="column col-auto">
@@ -104,15 +102,13 @@
                   <label class="form-label">
                      {{ $t('word.engine') }}
                   </label>
-                  <select v-model="localOptions.engine" class="form-select">
-                     <option
-                        v-for="engine in workspace.engines"
-                        :key="engine.name"
-                        :value="engine.name"
-                     >
-                        {{ engine.name }}
-                     </option>
-                  </select>
+                  <BaseSelect
+                     v-model="localOptions.engine"
+                     class="form-select"
+                     :options="workspace.engines"
+                     option-label="name"
+                     option-track-by="name"
+                  />
                </div>
             </div>
          </div>
@@ -175,6 +171,7 @@ import WorkspaceTabPropsTableFields from '@/components/WorkspaceTabPropsTableFie
 import WorkspaceTabPropsTableIndexesModal from '@/components/WorkspaceTabPropsTableIndexesModal';
 import WorkspaceTabPropsTableForeignModal from '@/components/WorkspaceTabPropsTableForeignModal';
 import WorkspaceTabNewTableEmptyState from '@/components/WorkspaceTabNewTableEmptyState';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabNewTable',
@@ -183,7 +180,8 @@ export default {
       WorkspaceTabPropsTableFields,
       WorkspaceTabPropsTableIndexesModal,
       WorkspaceTabPropsTableForeignModal,
-      WorkspaceTabNewTableEmptyState
+      WorkspaceTabNewTableEmptyState,
+      BaseSelect
    },
    props: {
       tabUid: String,
@@ -247,12 +245,12 @@ export default {
       },
       defaultCollation () {
          if (this.workspace.customizations.collations)
-            return this.getDatabaseVariable(this.selectedWorkspace, 'collation_server').value || '';
+            return this.getDatabaseVariable(this.selectedWorkspace, 'collation_server')?.value || '';
          return '';
       },
       defaultEngine () {
          if (this.workspace.customizations.engines)
-            return this.workspace.engines.find(engine => engine.isDefault).name;
+            return this.workspace.engines?.find(engine => engine.isDefault)?.name || '';
          return '';
       },
       schemaTables () {
diff --git a/src/renderer/components/WorkspaceTabNewTrigger.vue b/src/renderer/components/WorkspaceTabNewTrigger.vue
index 97600f9f..61c7f690 100644
--- a/src/renderer/components/WorkspaceTabNewTrigger.vue
+++ b/src/renderer/components/WorkspaceTabNewTrigger.vue
@@ -46,60 +46,43 @@
             <div v-if="customizations.definer" class="column col-auto">
                <div class="form-group">
                   <label class="form-label">{{ $t('word.definer') }}</label>
-                  <select
-                     v-if="workspace.users.length"
+                  <BaseSelect
                      v-model="localTrigger.definer"
+                     :options="users"
+                     :option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
+                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option v-if="!isDefinerInUsers" :value="originalTrigger.definer">
-                        {{ originalTrigger.definer.replaceAll('`', '') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
+                  />
                </div>
             </div>
             <fieldset class="column columns mb-0" :disabled="customizations.triggerOnlyRename">
                <div class="column col-auto">
                   <div class="form-group">
                      <label class="form-label">{{ $t('word.table') }}</label>
-                     <select v-model="localTrigger.table" class="form-select">
-                        <option v-for="table in schemaTables" :key="table.name">
-                           {{ table.name }}
-                        </option>
-                     </select>
+                     <BaseSelect
+                        v-model="localTrigger.table"
+                        :options="schemaTables"
+                        option-label="name"
+                        option-track-by="name"
+                        class="form-select"
+                     />
                   </div>
                </div>
                <div class="column col-auto">
                   <div class="form-group">
                      <label class="form-label">{{ $t('word.event') }}</label>
                      <div class="input-group">
-                        <select v-model="localTrigger.activation" class="form-select">
-                           <option>BEFORE</option>
-                           <option>AFTER</option>
-                        </select>
-                        <select
+                        <BaseSelect
+                           v-model="localTrigger.activation"
+                           :options="['BEFORE', 'AFTER']"
+                           class="form-select"
+                        />
+                        <BaseSelect
                            v-if="!customizations.triggerMultipleEvents"
                            v-model="localTrigger.event"
+                           :options="Object.keys(localEvents)"
                            class="form-select"
-                        >
-                           <option v-for="event in Object.keys(localEvents)" :key="event">
-                              {{ event }}
-                           </option>
-                        </select>
+                        />
                         <div v-if="customizations.triggerMultipleEvents" class="px-4">
                            <label
                               v-for="event in Object.keys(localEvents)"
@@ -138,12 +121,14 @@ import { useWorkspacesStore } from '@/stores/workspaces';
 import QueryEditor from '@/components/QueryEditor';
 import BaseLoader from '@/components/BaseLoader';
 import Triggers from '@/ipc-api/Triggers';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabNewTrigger',
    components: {
       BaseLoader,
-      QueryEditor
+      QueryEditor,
+      BaseSelect
    },
    props: {
       tabUid: String,
@@ -211,6 +196,15 @@ export default {
             .map(schema => schema.tables);
 
          return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
+      },
+      users () {
+         const users = [{ value: '' }, ...this.workspace.users];
+         if (!this.isDefinerInUsers) {
+            const [name, host] = this.originalTrigger.definer.replaceAll('`', '').split('@');
+            users.unshift({ name, host });
+         }
+
+         return users;
       }
    },
    watch: {
diff --git a/src/renderer/components/WorkspaceTabNewTriggerFunction.vue b/src/renderer/components/WorkspaceTabNewTriggerFunction.vue
index e067654d..836aa01d 100644
--- a/src/renderer/components/WorkspaceTabNewTriggerFunction.vue
+++ b/src/renderer/components/WorkspaceTabNewTriggerFunction.vue
@@ -45,11 +45,11 @@
                   <label class="form-label">
                      {{ $t('word.language') }}
                   </label>
-                  <select v-model="localFunction.language" class="form-select">
-                     <option v-for="language in customizations.triggerFunctionlanguages" :key="language">
-                        {{ language }}
-                     </option>
-                  </select>
+                  <BaseSelect
+                     v-model="localFunction.language"
+                     :options="customizations.triggerFunctionlanguages"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="customizations.definer" class="column col-auto">
@@ -57,27 +57,13 @@
                   <label class="form-label">
                      {{ $t('word.definer') }}
                   </label>
-                  <select
-                     v-if="workspace.users.length"
+                  <BaseSelect
                      v-model="localFunction.definer"
+                     :options="workspace.users"
+                     :option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
+                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
+                  />
                </div>
             </div>
             <div v-if="customizations.comment" class="form-group">
@@ -114,12 +100,14 @@ import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import Functions from '@/ipc-api/Functions';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabNewTriggerFunction',
    components: {
       BaseLoader,
-      QueryEditor
+      QueryEditor,
+      BaseSelect
    },
    props: {
       tabUid: String,
diff --git a/src/renderer/components/WorkspaceTabNewView.vue b/src/renderer/components/WorkspaceTabNewView.vue
index 87e26267..eb77711d 100644
--- a/src/renderer/components/WorkspaceTabNewView.vue
+++ b/src/renderer/components/WorkspaceTabNewView.vue
@@ -46,61 +46,44 @@
             <div class="column col-auto">
                <div v-if="workspace.customizations.definer" class="form-group">
                   <label class="form-label">{{ $t('word.definer') }}</label>
-                  <select
-                     v-if="workspace.users.length"
+                  <BaseSelect
                      v-model="localView.definer"
+                     :options="users"
+                     :option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
+                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option v-if="!isDefinerInUsers" :value="originalView.definer">
-                        {{ originalView.definer.replaceAll('`', '') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
+                  />
                </div>
             </div>
             <div class="column col-auto mr-2">
                <div v-if="workspace.customizations.viewSqlSecurity" class="form-group">
                   <label class="form-label">{{ $t('message.sqlSecurity') }}</label>
-                  <select v-model="localView.security" class="form-select">
-                     <option>DEFINER</option>
-                     <option>INVOKER</option>
-                  </select>
+                  <BaseSelect
+                     v-model="localView.security"
+                     :options="['DEFINER', 'INVOKER']"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div class="column col-auto mr-2">
                <div v-if="workspace.customizations.viewAlgorithm" class="form-group">
                   <label class="form-label">{{ $t('word.algorithm') }}</label>
-                  <select v-model="localView.algorithm" class="form-select">
-                     <option>UNDEFINED</option>
-                     <option>MERGE</option>
-                     <option>TEMPTABLE</option>
-                  </select>
+                  <BaseSelect
+                     v-model="localView.algorithm"
+                     :options="['UNDEFINED', 'MERGE', 'TEMPTABLE']"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="workspace.customizations.viewUpdateOption" class="column col-auto mr-2">
                <div class="form-group">
                   <label class="form-label">{{ $t('message.updateOption') }}</label>
-                  <select v-model="localView.updateOption" class="form-select">
-                     <option value="">
-                        None
-                     </option>
-                     <option>CASCADED</option>
-                     <option>LOCAL</option>
-                  </select>
+                  <BaseSelect
+                     v-model="localView.updateOption"
+                     :option-track-by="(user) => user.value"
+                     :options="[{label: 'None', value: ''}, {label: 'CASCADED', value: 'CASCADED'}, {label: 'LOCAL', value: 'LOCAL'}]"
+                     class="form-select"
+                  />
                </div>
             </div>
          </div>
@@ -127,12 +110,14 @@ import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import Views from '@/ipc-api/Views';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabNewView',
    components: {
       BaseLoader,
-      QueryEditor
+      QueryEditor,
+      BaseSelect
    },
    props: {
       tabUid: String,
@@ -189,6 +174,15 @@ export default {
       },
       isDefinerInUsers () {
          return this.originalView ? this.workspace.users.some(user => this.originalView.definer === `\`${user.name}\`@\`${user.host}\``) : true;
+      },
+      users () {
+         const users = [{ value: '' }, ...this.workspace.users];
+         if (!this.isDefinerInUsers) {
+            const [name, host] = this.originalView.definer.replaceAll('`', '').split('@');
+            users.unshift({ name, host });
+         }
+
+         return users;
       }
    },
    watch: {
diff --git a/src/renderer/components/WorkspaceTabPropsFunction.vue b/src/renderer/components/WorkspaceTabPropsFunction.vue
index 664a533e..f5732f70 100644
--- a/src/renderer/components/WorkspaceTabPropsFunction.vue
+++ b/src/renderer/components/WorkspaceTabPropsFunction.vue
@@ -66,11 +66,11 @@
                   <label class="form-label">
                      {{ $t('word.language') }}
                   </label>
-                  <select v-model="localFunction.language" class="form-select">
-                     <option v-for="language in customizations.languages" :key="language">
-                        {{ language }}
-                     </option>
-                  </select>
+                  <BaseSelect
+                     v-model="localFunction.language"
+                     :options="customizations.languages"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="customizations.definer" class="column col-auto">
@@ -78,27 +78,13 @@
                   <label class="form-label">
                      {{ $t('word.definer') }}
                   </label>
-                  <select
-                     v-if="workspace.users.length"
+                  <BaseSelect
                      v-model="localFunction.definer"
+                     :options="[{value: '', name:$t('message.currentUser')}, ...workspace.users]"
+                     :option-label="(user) => user.value === '' ? user.name : `${user.name}@${user.host}`"
+                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
+                  />
                </div>
             </div>
             <div class="column col-auto">
@@ -107,32 +93,16 @@
                      {{ $t('word.returns') }}
                   </label>
                   <div class="input-group">
-                     <select
+                     <BaseSelect
                         v-model="localFunction.returns"
                         class="form-select text-uppercase"
+                        :options="[{ name: 'VOID' }, ...workspace.dataTypes]"
+                        group-label="group"
+                        group-values="types"
+                        option-label="name"
+                        option-track-by="name"
                         style="max-width: 150px;"
-                     >
-                        <option v-if="localFunction.returns === 'VOID'">
-                           VOID
-                        </option>
-                        <option v-if="!isInDataTypes">
-                           {{ localFunction.returns }}
-                        </option>
-                        <optgroup
-                           v-for="group in workspace.dataTypes"
-                           :key="group.group"
-                           :label="group.group"
-                        >
-                           <option
-                              v-for="type in group.types"
-                              :key="type.name"
-                              :selected="localFunction.returns === type.name"
-                              :value="type.name"
-                           >
-                              {{ type.name }}
-                           </option>
-                        </optgroup>
-                     </select>
+                     />
                      <input
                         v-if="customizations.parametersLength"
                         v-model="localFunction.returnsLength"
@@ -162,10 +132,11 @@
                   <label class="form-label">
                      {{ $t('message.sqlSecurity') }}
                   </label>
-                  <select v-model="localFunction.security" class="form-select">
-                     <option>DEFINER</option>
-                     <option>INVOKER</option>
-                  </select>
+                  <BaseSelect
+                     v-model="localFunction.security"
+                     :options="['DEFINER', 'INVOKER']"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="customizations.functionDataAccess" class="column col-auto">
@@ -173,12 +144,11 @@
                   <label class="form-label">
                      {{ $t('message.dataAccess') }}
                   </label>
-                  <select v-model="localFunction.dataAccess" class="form-select">
-                     <option>CONTAINS SQL</option>
-                     <option>NO SQL</option>
-                     <option>READS SQL DATA</option>
-                     <option>MODIFIES SQL DATA</option>
-                  </select>
+                  <BaseSelect
+                     v-model="localFunction.dataAccess"
+                     :options="['CONTAINS SQL', 'NO SQL', 'READS SQL DATA', 'MODIFIES SQL DATA']"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="customizations.functionDeterministic" class="column col-auto">
@@ -231,6 +201,7 @@ import QueryEditor from '@/components/QueryEditor';
 import WorkspaceTabPropsFunctionParamsModal from '@/components/WorkspaceTabPropsFunctionParamsModal';
 import ModalAskParameters from '@/components/ModalAskParameters';
 import Functions from '@/ipc-api/Functions';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabPropsFunction',
@@ -238,7 +209,8 @@ export default {
       BaseLoader,
       QueryEditor,
       WorkspaceTabPropsFunctionParamsModal,
-      ModalAskParameters
+      ModalAskParameters,
+      BaseSelect
    },
    props: {
       tabUid: String,
diff --git a/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue b/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue
index 11bb999e..78078537 100644
--- a/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue
@@ -89,22 +89,15 @@
                         {{ $t('word.type') }}
                      </label>
                      <div class="column">
-                        <select v-model="selectedParamObj.type" class="form-select text-uppercase">
-                           <optgroup
-                              v-for="group in workspace.dataTypes"
-                              :key="group.group"
-                              :label="group.group"
-                           >
-                              <option
-                                 v-for="type in group.types"
-                                 :key="type.name"
-                                 :selected="selectedParamObj.type.toUpperCase() === type.name"
-                                 :value="type.name"
-                              >
-                                 {{ type.name }}
-                              </option>
-                           </optgroup>
-                        </select>
+                        <BaseSelect
+                           v-model="selectedParamObj.type"
+                           class="form-select text-uppercase"
+                           :options="workspace.dataTypes"
+                           group-label="group"
+                           group-values="types"
+                           option-label="name"
+                           option-track-by="name"
+                        />
                      </div>
                   </div>
                   <div v-if="customizations.parametersLength" class="form-group">
@@ -174,11 +167,13 @@
 <script>
 import { uidGen } from 'common/libs/uidGen';
 import ConfirmModal from '@/components/BaseConfirmModal';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabPropsFunctionParamsModal',
    components: {
-      ConfirmModal
+      ConfirmModal,
+      BaseSelect
    },
    props: {
       localParameters: {
diff --git a/src/renderer/components/WorkspaceTabPropsRoutine.vue b/src/renderer/components/WorkspaceTabPropsRoutine.vue
index a7532ef5..d61cf4b5 100644
--- a/src/renderer/components/WorkspaceTabPropsRoutine.vue
+++ b/src/renderer/components/WorkspaceTabPropsRoutine.vue
@@ -66,11 +66,11 @@
                   <label class="form-label">
                      {{ $t('word.language') }}
                   </label>
-                  <select v-model="localRoutine.language" class="form-select">
-                     <option v-for="language in customizations.languages" :key="language">
-                        {{ language }}
-                     </option>
-                  </select>
+                  <BaseSelect
+                     v-model="localRoutine.language"
+                     :options="customizations.languages"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="customizations.definer" class="column col-auto">
@@ -78,27 +78,13 @@
                   <label class="form-label">
                      {{ $t('word.definer') }}
                   </label>
-                  <select
-                     v-if="workspace.users.length"
+                  <BaseSelect
                      v-model="localRoutine.definer"
+                     :options="[{value: '', name:$t('message.currentUser')}, ...workspace.users]"
+                     :option-label="(user) => user.value === '' ? user.name : `${user.name}@${user.host}`"
+                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
+                  />
                </div>
             </div>
             <div v-if="customizations.comment" class="column">
@@ -118,10 +104,11 @@
                   <label class="form-label">
                      {{ $t('message.sqlSecurity') }}
                   </label>
-                  <select v-model="localRoutine.security" class="form-select">
-                     <option>DEFINER</option>
-                     <option>INVOKER</option>
-                  </select>
+                  <BaseSelect
+                     v-model="localRoutine.security"
+                     :options="['DEFINER', 'INVOKER']"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="customizations.procedureDataAccess" class="column col-auto">
@@ -129,12 +116,11 @@
                   <label class="form-label">
                      {{ $t('message.dataAccess') }}
                   </label>
-                  <select v-model="localRoutine.dataAccess" class="form-select">
-                     <option>CONTAINS SQL</option>
-                     <option>NO SQL</option>
-                     <option>READS SQL DATA</option>
-                     <option>MODIFIES SQL DATA</option>
-                  </select>
+                  <BaseSelect
+                     v-model="localRoutine.dataAccess"
+                     :options="['CONTAINS SQL', 'NO SQL', 'READS SQL DATA', 'MODIFIES SQL DATA']"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="customizations.procedureDeterministic" class="column col-auto">
@@ -187,6 +173,7 @@ import BaseLoader from '@/components/BaseLoader';
 import WorkspaceTabPropsRoutineParamsModal from '@/components/WorkspaceTabPropsRoutineParamsModal';
 import ModalAskParameters from '@/components/ModalAskParameters';
 import Routines from '@/ipc-api/Routines';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabPropsRoutine',
@@ -194,7 +181,8 @@ export default {
       QueryEditor,
       BaseLoader,
       WorkspaceTabPropsRoutineParamsModal,
-      ModalAskParameters
+      ModalAskParameters,
+      BaseSelect
    },
    props: {
       tabUid: String,
diff --git a/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue b/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue
index 2b87ee62..8dcb225b 100644
--- a/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue
@@ -89,22 +89,15 @@
                         {{ $t('word.type') }}
                      </label>
                      <div class="column">
-                        <select v-model="selectedParamObj.type" class="form-select text-uppercase">
-                           <optgroup
-                              v-for="group in workspace.dataTypes"
-                              :key="group.group"
-                              :label="group.group"
-                           >
-                              <option
-                                 v-for="type in group.types"
-                                 :key="type.name"
-                                 :selected="selectedParamObj.type.toUpperCase() === type.name"
-                                 :value="type.name"
-                              >
-                                 {{ type.name }}
-                              </option>
-                           </optgroup>
-                        </select>
+                        <BaseSelect
+                           v-model="selectedParamObj.type"
+                           class="form-select text-uppercase"
+                           :options="workspace.dataTypes"
+                           group-label="group"
+                           group-values="types"
+                           option-label="name"
+                           option-track-by="name"
+                        />
                      </div>
                   </div>
                   <div v-if="customizations.parametersLength" class="form-group">
@@ -174,11 +167,13 @@
 <script>
 import { uidGen } from 'common/libs/uidGen';
 import ConfirmModal from '@/components/BaseConfirmModal';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabPropsRoutineParamsModal',
    components: {
-      ConfirmModal
+      ConfirmModal,
+      BaseSelect
    },
    props: {
       localParameters: {
diff --git a/src/renderer/components/WorkspaceTabPropsScheduler.vue b/src/renderer/components/WorkspaceTabPropsScheduler.vue
index a17bbfa2..214602f4 100644
--- a/src/renderer/components/WorkspaceTabPropsScheduler.vue
+++ b/src/renderer/components/WorkspaceTabPropsScheduler.vue
@@ -51,30 +51,13 @@
             <div class="column col-auto">
                <div class="form-group">
                   <label class="form-label">{{ $t('word.definer') }}</label>
-                  <select
-                     v-if="workspace.users.length"
+                  <BaseSelect
                      v-model="localScheduler.definer"
+                     :options="users"
+                     :option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
+                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option v-if="!isDefinerInUsers" :value="originalScheduler.definer">
-                        {{ originalScheduler.definer.replaceAll('`', '') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
+                  />
                </div>
             </div>
             <div class="column">
@@ -148,13 +131,15 @@ import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import WorkspaceTabPropsSchedulerTimingModal from '@/components/WorkspaceTabPropsSchedulerTimingModal';
 import Schedulers from '@/ipc-api/Schedulers';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabPropsScheduler',
    components: {
       BaseLoader,
       QueryEditor,
-      WorkspaceTabPropsSchedulerTimingModal
+      WorkspaceTabPropsSchedulerTimingModal,
+      BaseSelect
    },
    props: {
       tabUid: String,
@@ -217,6 +202,15 @@ export default {
             .map(schema => schema.tables);
 
          return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
+      },
+      users () {
+         const users = [{ value: '' }, ...this.workspace.users];
+         if (!this.isDefinerInUsers) {
+            const [name, host] = this.originalScheduler.definer.replaceAll('`', '').split('@');
+            users.unshift({ name, host });
+         }
+
+         return users;
       }
    },
    watch: {
diff --git a/src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue b/src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue
index 8a167875..1f2edc25 100644
--- a/src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue
@@ -18,14 +18,11 @@
                   {{ $t('word.execution') }}
                </label>
                <div class="column">
-                  <select
-                     ref="firstInput"
+                  <BaseSelect
                      v-model="optionsProxy.execution"
+                     :options="['EVERY', 'ONCE']"
                      class="form-select"
-                  >
-                     <option>EVERY</option>
-                     <option>ONCE</option>
-                  </select>
+                  />
                </div>
             </div>
             <div v-if="optionsProxy.execution === 'EVERY'">
@@ -39,27 +36,26 @@
                            type="text"
                            @keypress="isNumberOrMinus($event)"
                         >
-                        <select
+                        <BaseSelect
                            v-model="optionsProxy.every[1]"
                            class="form-select text-uppercase"
+                           :options="['YEAR',
+                                      'QUARTER',
+                                      'MONTH',
+                                      'WEEK',
+                                      'DAY',
+                                      'HOUR',
+                                      'MINUTE',
+                                      'SECOND',
+                                      'YEAR_MONTH',
+                                      'DAY_HOUR',
+                                      'DAY_MINUTE',
+                                      'DAY_SECOND',
+                                      'HOUR_MINUTE',
+                                      'HOUR_SECOND',
+                                      'MINUTE_SECOND']"
                            style="width: 0;"
-                        >
-                           <option>YEAR</option>
-                           <option>QUARTER</option>
-                           <option>MONTH</option>
-                           <option>WEEK</option>
-                           <option>DAY</option>
-                           <option>HOUR</option>
-                           <option>MINUTE</option>
-                           <option>SECOND</option>
-                           <option>YEAR_MONTH</option>
-                           <option>DAY_HOUR</option>
-                           <option>DAY_MINUTE</option>
-                           <option>DAY_SECOND</option>
-                           <option>HOUR_MINUTE</option>
-                           <option>HOUR_SECOND</option>
-                           <option>MINUTE_SECOND</option>
-                        </select>
+                        />
                      </div>
                   </div>
                </div>
@@ -140,11 +136,13 @@
 <script>
 import moment from 'moment';
 import ConfirmModal from '@/components/BaseConfirmModal';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabPropsSchedulerTimingModal',
    components: {
-      ConfirmModal
+      ConfirmModal,
+      BaseSelect
    },
    props: {
       localOptions: Object,
@@ -169,10 +167,6 @@ export default {
       if (!this.optionsProxy.starts) this.optionsProxy.starts = moment().format('YYYY-MM-DD HH:mm:ss');
       if (!this.optionsProxy.ends) this.optionsProxy.ends = moment().format('YYYY-MM-DD HH:mm:ss');
       if (!this.optionsProxy.every.length) this.optionsProxy.every = ['1', 'DAY'];
-
-      setTimeout(() => {
-         this.$refs.firstInput.focus();
-      }, 20);
    },
    methods: {
       confirmOptionsChange () {
diff --git a/src/renderer/components/WorkspaceTabPropsTable.vue b/src/renderer/components/WorkspaceTabPropsTable.vue
index afb417fb..7e16937e 100644
--- a/src/renderer/components/WorkspaceTabPropsTable.vue
+++ b/src/renderer/components/WorkspaceTabPropsTable.vue
@@ -101,15 +101,13 @@
                   <label class="form-label">
                      {{ $t('word.collation') }}
                   </label>
-                  <select v-model="localOptions.collation" class="form-select">
-                     <option
-                        v-for="collation in workspace.collations"
-                        :key="collation.id"
-                        :value="collation.collation"
-                     >
-                        {{ collation.collation }}
-                     </option>
-                  </select>
+                  <BaseSelect
+                     v-model="localOptions.collation"
+                     :options="workspace.collations"
+                     option-label="collation"
+                     option-track-by="collation"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="workspace.customizations.engines" class="column col-auto">
@@ -117,15 +115,13 @@
                   <label class="form-label">
                      {{ $t('word.engine') }}
                   </label>
-                  <select v-model="localOptions.engine" class="form-select">
-                     <option
-                        v-for="engine in workspace.engines"
-                        :key="engine.name"
-                        :value="engine.name"
-                     >
-                        {{ engine.name }}
-                     </option>
-                  </select>
+                  <BaseSelect
+                     v-model="localOptions.engine"
+                     class="form-select"
+                     :options="workspace.engines"
+                     option-label="name"
+                     option-track-by="name"
+                  />
                </div>
             </div>
          </div>
@@ -186,6 +182,7 @@ import BaseLoader from '@/components/BaseLoader';
 import WorkspaceTabPropsTableFields from '@/components/WorkspaceTabPropsTableFields';
 import WorkspaceTabPropsTableIndexesModal from '@/components/WorkspaceTabPropsTableIndexesModal';
 import WorkspaceTabPropsTableForeignModal from '@/components/WorkspaceTabPropsTableForeignModal';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabPropsTable',
@@ -193,7 +190,8 @@ export default {
       BaseLoader,
       WorkspaceTabPropsTableFields,
       WorkspaceTabPropsTableIndexesModal,
-      WorkspaceTabPropsTableForeignModal
+      WorkspaceTabPropsTableForeignModal,
+      BaseSelect
    },
    props: {
       tabUid: String,
diff --git a/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue b/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue
index 73c3f9e8..1da5be31 100644
--- a/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue
@@ -117,19 +117,14 @@
                         {{ $t('message.referenceTable') }}
                      </label>
                      <div class="column">
-                        <select
+                        <BaseSelect
                            v-model="selectedForeignObj.refTable"
+                           :options="schemaTables"
+                           option-label="name"
+                           option-track-by="name"
                            class="form-select"
                            @change="reloadRefFields"
-                        >
-                           <option
-                              v-for="schemaTable in schemaTables"
-                              :key="schemaTable.name"
-                              :value="schemaTable.name"
-                           >
-                              {{ schemaTable.name }}
-                           </option>
-                        </select>
+                        />
                      </div>
                   </div>
                   <div class="form-group mb-4">
@@ -153,15 +148,11 @@
                         {{ $t('message.onUpdate') }}
                      </label>
                      <div class="column">
-                        <select v-model="selectedForeignObj.onUpdate" class="form-select">
-                           <option
-                              v-for="action in foreignActions"
-                              :key="action"
-                              :value="action"
-                           >
-                              {{ action }}
-                           </option>
-                        </select>
+                        <BaseSelect
+                           v-model="selectedForeignObj.onUpdate"
+                           :options="foreignActions"
+                           class="form-select"
+                        />
                      </div>
                   </div>
                   <div class="form-group">
@@ -169,15 +160,11 @@
                         {{ $t('message.onDelete') }}
                      </label>
                      <div class="column">
-                        <select v-model="selectedForeignObj.onDelete" class="form-select">
-                           <option
-                              v-for="action in foreignActions"
-                              :key="action"
-                              :value="action"
-                           >
-                              {{ action }}
-                           </option>
-                        </select>
+                        <BaseSelect
+                           v-model="selectedForeignObj.onDelete"
+                           :options="foreignActions"
+                           class="form-select"
+                        />
                      </div>
                   </div>
                </form>
@@ -206,11 +193,13 @@ import { useNotificationsStore } from '@/stores/notifications';
 import { uidGen } from 'common/libs/uidGen';
 import Tables from '@/ipc-api/Tables';
 import ConfirmModal from '@/components/BaseConfirmModal';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabPropsTableForeignModal',
    components: {
-      ConfirmModal
+      ConfirmModal,
+      BaseSelect
    },
    props: {
       localKeyUsage: Array,
diff --git a/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue b/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue
index ee2bba71..8f8b44e6 100644
--- a/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue
@@ -89,16 +89,12 @@
                         {{ $t('word.type') }}
                      </label>
                      <div class="column">
-                        <select v-model="selectedIndexObj.type" class="form-select">
-                           <option
-                              v-for="index in indexTypes"
-                              :key="index"
-                              :value="index"
-                              :disabled="index === 'PRIMARY' && hasPrimary"
-                           >
-                              {{ index }}
-                           </option>
-                        </select>
+                        <BaseSelect
+                           v-model="selectedIndexObj.type"
+                           :options="indexTypes"
+                           :option-disabled="(opt) => opt === 'PRIMARY'"
+                           class="form-select"
+                        />
                      </div>
                   </div>
                   <div class="form-group">
@@ -140,11 +136,13 @@
 <script>
 import { uidGen } from 'common/libs/uidGen';
 import ConfirmModal from '@/components/BaseConfirmModal';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabPropsTableIndexesModal',
    components: {
-      ConfirmModal
+      ConfirmModal,
+      BaseSelect
    },
    props: {
       localIndexes: Array,
diff --git a/src/renderer/components/WorkspaceTabPropsTableRow.vue b/src/renderer/components/WorkspaceTabPropsTableRow.vue
index d402f341..3bdf2842 100644
--- a/src/renderer/components/WorkspaceTabPropsTableRow.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableRow.vue
@@ -53,31 +53,18 @@
          >
             {{ localRow.type }}
          </span>
-         <select
+         <BaseSelect
             v-else
             ref="editField"
             v-model="editingContent"
+            :options="types"
+            group-label="group"
+            group-values="types"
+            option-label="name"
+            option-track-by="name"
             class="form-select editable-field pl-1 pr-4 small-select text-uppercase"
             @blur="editOFF"
-         >
-            <option v-if="!isInDataTypes">
-               {{ row.type }}
-            </option>
-            <optgroup
-               v-for="group in dataTypes"
-               :key="group.group"
-               :label="group.group"
-            >
-               <option
-                  v-for="type in group.types"
-                  :key="type.name"
-                  :selected="localRow.type === type.name"
-                  :value="type.name"
-               >
-                  {{ type.name }}
-               </option>
-            </optgroup>
-         </select>
+         />
       </div>
       <div
          v-if="customizations.tableArray"
@@ -218,22 +205,16 @@
             >
                {{ localRow.collation }}
             </span>
-            <select
+            <BaseSelect
                v-else
                ref="editField"
                v-model="editingContent"
+               :options="collations"
+               option-label="collation"
+               option-track-by="collation"
                class="form-select small-select pl-1 pr-4 editable-field"
                @blur="editOFF"
-            >
-               <option
-                  v-for="collation in collations"
-                  :key="collation.collation"
-                  :selected="localRow.collation === collation.collation"
-                  :value="collation.collation"
-               >
-                  {{ collation.collation }}
-               </option>
-            </select>
+            />
          </template>
       </div>
       <ConfirmModal
@@ -347,11 +328,13 @@ import { storeToRefs } from 'pinia';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import ConfirmModal from '@/components/BaseConfirmModal';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabPropsTableRow',
    components: {
-      ConfirmModal
+      ConfirmModal,
+      BaseSelect
    },
    props: {
       row: Object,
@@ -431,6 +414,13 @@ export default {
             typeNames = [...groupTypeNames, ...typeNames];
          }
          return typeNames.includes(this.row.type);
+      },
+      types () {
+         const types = [...this.dataTypes];
+         if (!this.isInDataTypes)
+            types.unshift({ name: this.row });
+
+         return types;
       }
    },
    watch: {
diff --git a/src/renderer/components/WorkspaceTabPropsTrigger.vue b/src/renderer/components/WorkspaceTabPropsTrigger.vue
index b315cef6..f2bc9a48 100644
--- a/src/renderer/components/WorkspaceTabPropsTrigger.vue
+++ b/src/renderer/components/WorkspaceTabPropsTrigger.vue
@@ -45,60 +45,44 @@
             <div v-if="customizations.definer" class="column col-auto">
                <div class="form-group">
                   <label class="form-label">{{ $t('word.definer') }}</label>
-                  <select
-                     v-if="workspace.users.length"
+                  <BaseSelect
                      v-model="localTrigger.definer"
+                     :options="users"
+                     :option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
+                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option v-if="!isDefinerInUsers" :value="originalTrigger.definer">
-                        {{ originalTrigger.definer.replaceAll('`', '') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
+                  />
                </div>
             </div>
             <fieldset class="column columns mb-0" :disabled="customizations.triggerOnlyRename">
                <div class="column col-auto">
                   <div class="form-group">
                      <label class="form-label">{{ $t('word.table') }}</label>
-                     <select v-model="localTrigger.table" class="form-select">
-                        <option v-for="table in schemaTables" :key="table.name">
-                           {{ table.name }}
-                        </option>
-                     </select>
+                     <BaseSelect
+                        v-model="localTrigger.table"
+                        :options="schemaTables"
+                        option-label="name"
+                        option-track-by="name"
+                        class="form-select"
+                     />
                   </div>
                </div>
                <div class="column col-auto">
                   <div class="form-group">
                      <label class="form-label">{{ $t('word.event') }}</label>
                      <div class="input-group">
-                        <select v-model="localTrigger.activation" class="form-select">
-                           <option>BEFORE</option>
-                           <option>AFTER</option>
-                        </select>
-                        <select
+                        <BaseSelect
+                           v-model="localTrigger.activation"
+                           :options="['BEFORE', 'AFTER']"
+                           class="form-select"
+                        />
+                        <BaseSelect
                            v-if="!customizations.triggerMultipleEvents"
                            v-model="localTrigger.event"
+                           :options="Object.keys(localEvents)"
                            class="form-select"
-                        >
-                           <option v-for="event in Object.keys(localEvents)" :key="event">
-                              {{ event }}
-                           </option>
-                        </select>
+                        />
+
                         <div v-if="customizations.triggerMultipleEvents" class="px-4">
                            <label
                               v-for="event in Object.keys(localEvents)"
@@ -137,12 +121,14 @@ import { useWorkspacesStore } from '@/stores/workspaces';
 import QueryEditor from '@/components/QueryEditor';
 import BaseLoader from '@/components/BaseLoader';
 import Triggers from '@/ipc-api/Triggers';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabPropsTrigger',
    components: {
       BaseLoader,
-      QueryEditor
+      QueryEditor,
+      BaseSelect
    },
    props: {
       tabUid: String,
@@ -208,6 +194,15 @@ export default {
             .map(schema => schema.tables);
 
          return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
+      },
+      users () {
+         const users = [{ value: '' }, ...this.workspace.users];
+         if (!this.isDefinerInUsers) {
+            const [name, host] = this.originalTrigger.definer.replaceAll('`', '').split('@');
+            users.unshift({ name, host });
+         }
+
+         return users;
       }
    },
    watch: {
diff --git a/src/renderer/components/WorkspaceTabPropsTriggerFunction.vue b/src/renderer/components/WorkspaceTabPropsTriggerFunction.vue
index 4b5c9c72..23b2aa19 100644
--- a/src/renderer/components/WorkspaceTabPropsTriggerFunction.vue
+++ b/src/renderer/components/WorkspaceTabPropsTriggerFunction.vue
@@ -32,11 +32,11 @@
                   <label class="form-label">
                      {{ $t('word.language') }}
                   </label>
-                  <select v-model="localFunction.language" class="form-select">
-                     <option v-for="language in customizations.triggerFunctionlanguages" :key="language">
-                        {{ language }}
-                     </option>
-                  </select>
+                  <BaseSelect
+                     v-model="localFunction.language"
+                     :options="customizations.triggerFunctionlanguages"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="customizations.definer" class="column col-auto">
@@ -44,27 +44,13 @@
                   <label class="form-label">
                      {{ $t('word.definer') }}
                   </label>
-                  <select
-                     v-if="workspace.users.length"
+                  <BaseSelect
                      v-model="localFunction.definer"
+                     :options="workspace.users"
+                     :option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
+                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
+                  />
                </div>
             </div>
             <div v-if="customizations.comment" class="form-group">
@@ -110,13 +96,15 @@ import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import ModalAskParameters from '@/components/ModalAskParameters';
 import Functions from '@/ipc-api/Functions';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabPropsTriggerFunction',
    components: {
       BaseLoader,
       QueryEditor,
-      ModalAskParameters
+      ModalAskParameters,
+      BaseSelect
    },
    props: {
       tabUid: String,
diff --git a/src/renderer/components/WorkspaceTabPropsView.vue b/src/renderer/components/WorkspaceTabPropsView.vue
index feb95e82..80520513 100644
--- a/src/renderer/components/WorkspaceTabPropsView.vue
+++ b/src/renderer/components/WorkspaceTabPropsView.vue
@@ -45,61 +45,44 @@
             <div class="column col-auto">
                <div v-if="workspace.customizations.definer" class="form-group">
                   <label class="form-label">{{ $t('word.definer') }}</label>
-                  <select
-                     v-if="workspace.users.length"
+                  <BaseSelect
                      v-model="localView.definer"
+                     :options="users"
+                     :option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
+                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option v-if="!isDefinerInUsers" :value="originalView.definer">
-                        {{ originalView.definer.replaceAll('`', '') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
+                  />
                </div>
             </div>
             <div class="column col-auto mr-2">
                <div v-if="workspace.customizations.viewSqlSecurity" class="form-group">
                   <label class="form-label">{{ $t('message.sqlSecurity') }}</label>
-                  <select v-model="localView.security" class="form-select">
-                     <option>DEFINER</option>
-                     <option>INVOKER</option>
-                  </select>
+                  <BaseSelect
+                     v-model="localView.security"
+                     :options="['DEFINER', 'INVOKER']"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div class="column col-auto mr-2">
                <div v-if="workspace.customizations.viewAlgorithm" class="form-group">
                   <label class="form-label">{{ $t('word.algorithm') }}</label>
-                  <select v-model="localView.algorithm" class="form-select">
-                     <option>UNDEFINED</option>
-                     <option>MERGE</option>
-                     <option>TEMPTABLE</option>
-                  </select>
+                  <BaseSelect
+                     v-model="localView.algorithm"
+                     :options="['UNDEFINED', 'MERGE', 'TEMPTABLE']"
+                     class="form-select"
+                  />
                </div>
             </div>
             <div v-if="workspace.customizations.viewUpdateOption" class="column col-auto mr-2">
                <div class="form-group">
                   <label class="form-label">{{ $t('message.updateOption') }}</label>
-                  <select v-model="localView.updateOption" class="form-select">
-                     <option value="">
-                        None
-                     </option>
-                     <option>CASCADED</option>
-                     <option>LOCAL</option>
-                  </select>
+                  <BaseSelect
+                     v-model="localView.updateOption"
+                     :option-track-by="(user) => user.value"
+                     :options="[{label: 'None', value: ''}, {label: 'CASCADED', value: 'CASCADED'}, {label: 'LOCAL', value: 'LOCAL'}]"
+                     class="form-select"
+                  />
                </div>
             </div>
          </div>
@@ -126,12 +109,14 @@ import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import Views from '@/ipc-api/Views';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabPropsView',
    components: {
       BaseLoader,
-      QueryEditor
+      QueryEditor,
+      BaseSelect
    },
    props: {
       tabUid: String,
@@ -184,6 +169,15 @@ export default {
       },
       isDefinerInUsers () {
          return this.originalView ? this.workspace.users.some(user => this.originalView.definer === `\`${user.name}\`@\`${user.host}\``) : true;
+      },
+      users () {
+         const users = [{ value: '' }, ...this.workspace.users];
+         if (!this.isDefinerInUsers) {
+            const [name, host] = this.originalView.definer.replaceAll('`', '').split('@');
+            users.unshift({ name, host });
+         }
+
+         return users;
       }
    },
    watch: {
diff --git a/src/renderer/components/WorkspaceTabQuery.vue b/src/renderer/components/WorkspaceTabQuery.vue
index ecd2dcb7..43e07c44 100644
--- a/src/renderer/components/WorkspaceTabQuery.vue
+++ b/src/renderer/components/WorkspaceTabQuery.vue
@@ -115,14 +115,13 @@
                </div>
                <div class="input-group pr-2" :title="$t('message.commitMode')">
                   <i class="input-group-addon addon-sm mdi mdi-24px mdi-source-commit p-0" />
-                  <select v-model="autocommit" class="form-select select-sm text-bold">
-                     <option :value="true">
-                        {{ $t('message.autoCommit') }}
-                     </option>
-                     <option :value="false">
-                        {{ $t('message.manualCommit') }}
-                     </option>
-                  </select>
+                  <BaseSelect
+                     v-model="autocommit"
+                     :options="[{value: true, label: $t('message.autoCommit')}, {value: false, label: $t('message.manualCommit')}]"
+                     :option-label="opt => opt.label"
+                     :option-track-by="opt => opt.value"
+                     class="form-select select-sm text-bold"
+                  />
                </div>
             </div>
             <div class="workspace-query-info">
@@ -149,14 +148,12 @@
                </div>
                <div class="input-group" :title="$t('word.schema')">
                   <i class="input-group-addon addon-sm mdi mdi-24px mdi-database" />
-                  <select v-model="selectedSchema" class="form-select select-sm text-bold">
-                     <option :value="null">
-                        {{ $t('message.noSchema') }}
-                     </option>
-                     <option v-for="schemaName in databaseSchemas" :key="schemaName">
-                        {{ schemaName }}
-                     </option>
-                  </select>
+
+                  <BaseSelect
+                     v-model="selectedSchema"
+                     :options="[{value: 'null', label: $t('message.noSchema')}, ...databaseSchemas.map(el => ({label: el, value: el}))]"
+                     class="form-select select-sm text-bold"
+                  />
                </div>
             </div>
          </div>
@@ -199,6 +196,7 @@ import WorkspaceTabQueryTable from '@/components/WorkspaceTabQueryTable';
 import WorkspaceTabQueryEmptyState from '@/components/WorkspaceTabQueryEmptyState';
 import ModalHistory from '@/components/ModalHistory';
 import tableTabs from '@/mixins/tableTabs';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabQuery',
@@ -207,7 +205,8 @@ export default {
       QueryEditor,
       WorkspaceTabQueryTable,
       WorkspaceTabQueryEmptyState,
-      ModalHistory
+      ModalHistory,
+      BaseSelect
    },
    mixins: [tableTabs],
    props: {
diff --git a/src/renderer/components/WorkspaceTabQueryTableRow.vue b/src/renderer/components/WorkspaceTabQueryTableRow.vue
index 23646447..daf1d14f 100644
--- a/src/renderer/components/WorkspaceTabQueryTableRow.vue
+++ b/src/renderer/components/WorkspaceTabQueryTableRow.vue
@@ -38,25 +38,21 @@
                   class="editable-field form-input input-sm px-1"
                   @blur="editOFF"
                >
-               <select
+               <BaseSelect
                   v-else-if="inputProps.type === 'boolean'"
                   v-model="editingContent"
+                  :options="['true', 'false']"
                   class="form-select small-select editable-field"
                   @blur="editOFF"
-               >
-                  <option>true</option>
-                  <option>false</option>
-               </select>
-               <select
+               />
+               <BaseSelect
                   v-else-if="enumArray"
                   v-model="editingContent"
+                  :options="enumArray"
                   class="form-select small-select editable-field"
+                  dropdown-class="small-select"
                   @blur="editOFF"
-               >
-                  <option v-for="value in enumArray" :key="value">
-                     {{ value }}
-                  </option>
-               </select>
+               />
                <input
                   v-else
                   ref="editField"
@@ -95,19 +91,14 @@
                      <label for="editorMode" class="form-label mr-2">
                         <b>{{ $t('word.content') }}</b>:
                      </label>
-                     <select
+                     <BaseSelect
                         id="editorMode"
                         v-model="editorMode"
+                        :options="availableLanguages"
+                        option-label="name"
+                        option-track-by="slug"
                         class="form-select select-sm"
-                     >
-                        <option
-                           v-for="language in availableLanguages"
-                           :key="language.slug"
-                           :value="language.slug"
-                        >
-                           {{ language.name }}
-                        </option>
-                     </select>
+                     />
                   </div>
                   <div class="d-flex">
                      <div class="p-vcentered">
@@ -223,6 +214,7 @@ import ConfirmModal from '@/components/BaseConfirmModal';
 import TextEditor from '@/components/BaseTextEditor';
 import BaseMap from '@/components/BaseMap';
 import ForeignKeySelect from '@/components/ForeignKeySelect';
+import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
    name: 'WorkspaceTabQueryTableRow',
@@ -230,7 +222,8 @@ export default {
       ConfirmModal,
       TextEditor,
       ForeignKeySelect,
-      BaseMap
+      BaseMap,
+      BaseSelect
    },
    props: {
       row: Object,
diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
index 17683722..76ec038c 100644
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -311,7 +311,8 @@ option:checked {
     margin: 0;
     padding: 0.3rem 0.8rem;
 
-    .select-sm & {
+    .select-sm &,
+    .small-select & {
       padding: 0.05rem 0.3rem;
     }
   }