bfg-common 1.3.558 → 1.3.559

package/components/common/browse/blocks/info/Size.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   value: number
 }>()
 const { $binary } = useNuxtApp()
-const size = computed(() => $binary.round(props.value, true))
+const size = computed<string>(() => $binary.round(props.value, true))
 </script>
 
 <style scoped lang="scss"></style>

package/components/common/layout/theHeader/TheHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <common-layout-the-header-new
-    v-if="newView"
+    v-if="props.newView"
     :company-name="props.companyName"
     :is-beta="props.isBeta"
     :is-dev="props.isDev"
@@ -11,10 +11,13 @@
     :is-preference="props.isPreference"
     :selected-language-type="props.selectedLanguageType"
     :selected-lang="props.selectedLang"
-    :new-view="props.newViewLocal"
+    :new-view="props.newView"
+    :new-view-local="props.newViewLocal"
     :time-format="props.timeFormat"
     :project="props.project"
     :is-dark-theme="props.isDarkTheme"
+    :remote-console="props.remoteConsole"
+    :vm-cluster="props.vmCluster"
     @toggle-main-menu="emits('toggle-main-menu')"
     @show-preference="emits('show-preference')"
     @reset-preference="emits('reset-preference')"
@@ -25,6 +28,8 @@
     @update-language="emits('update-language', $event)"
     @update-is-browser="emits('update-is-browser', $event)"
     @update-is-new-view="emits('update-is-new-view', $event)"
+    @update-remote-console="emits('update-remote-console', $event)"
+    @update-vm-clusters="emits('update-vm-clusters', $event)"
     @submit-preferences="emits('submit-preferences')"
   />
   <common-layout-the-header-old
@@ -39,9 +44,12 @@
     :is-preference="props.isPreference"
     :selected-language-type="props.selectedLanguageType"
     :selected-lang="props.selectedLang"
-    :new-view="props.newViewLocal"
+    :new-view="props.newView"
+    :new-view-local="props.newViewLocal"
     :time-format="props.timeFormat"
     :project="props.project"
+    :remote-console="props.remoteConsole"
+    :vm-cluster="props.vmCluster"
     @toggle-main-menu="emits('toggle-main-menu')"
     @show-preference="emits('show-preference')"
     @hide-preference="emits('hide-preference')"
@@ -51,6 +59,8 @@
     @update-language="emits('update-language', $event)"
     @update-is-browser="emits('update-is-browser', $event)"
     @update-is-new-view="emits('update-is-new-view', $event)"
+    @update-remote-console="emits('update-remote-console', $event)"
+    @update-vm-clusters="emits('update-vm-clusters', $event)"
     @submit-preferences="emits('submit-preferences')"
   />
 </template>
@@ -72,6 +82,8 @@ const props = defineProps<{
   isPreference: boolean
   selectedLanguageType: string
   selectedLang: UI_I_Dropdown
+  remoteConsole: string
+  vmCluster: boolean
   newView: boolean
   newViewLocal: boolean
   timeFormat: string
@@ -89,6 +101,8 @@ const emits = defineEmits<{
   (event: 'update-language', value: UI_I_Dropdown): void
   (event: 'update-is-browser', value: string): void
   (event: 'update-is-new-view', value: boolean): void
+  (event: 'update-remote-console', value: string): void
+  (event: 'update-vm-clusters', value: boolean): void
   (event: 'submit-preferences'): void
 }>()
 </script>

package/components/common/layout/theHeader/TheHeaderNew.vue

@@ -63,7 +63,10 @@
             :selected-language-type="props.selectedLanguageType"
             :selected-language="props.selectedLang"
             :new-view="props.newView"
+            :new-view-local="props.newViewLocal"
             :project="props.project"
+            :remote-console="props.remoteConsole"
+            :vm-cluster="props.vmCluster"
             @show-preference="emits('show-preference')"
             @reset-preference="emits('reset-preference')"
             @hide-preference="emits('hide-preference')"
@@ -72,6 +75,8 @@
             @update-language="emits('update-language', $event)"
             @update-is-browser="emits('update-is-browser', $event)"
             @update-is-new-view="emits('update-is-new-view', $event)"
+            @update-remote-console="emits('update-remote-console', $event)"
+            @update-vm-clusters="emits('update-vm-clusters', $event)"
             @submit-preferences="emits('submit-preferences')"
           />
         </div>
@@ -97,7 +102,10 @@ const props = defineProps<{
   isPreference: boolean
   selectedLanguageType: string
   selectedLang: UI_I_Dropdown
+  remoteConsole: string
+  vmCluster: boolean
   newView: boolean
+  newViewLocal: boolean
   timeFormat: string
   isDarkTheme: boolean
 }>()
@@ -113,6 +121,8 @@ const emits = defineEmits<{
   (event: 'update-language', value: UI_I_Dropdown): void
   (event: 'update-is-browser', value: string): void
   (event: 'update-is-new-view', value: boolean): void
+  (event: 'update-remote-console', value: string): void
+  (event: 'update-vm-clusters', value: boolean): void
   (event: 'submit-preferences'): void
 }>()
 </script>

package/components/common/layout/theHeader/TheHeaderOld.vue

@@ -70,7 +70,10 @@
           :selected-language-type="props.selectedLanguageType"
           :selected-language="props.selectedLang.value"
           :new-view="props.newView"
+          :new-view-local="props.newViewLocal"
           :project="props.project"
+          :remote-console="props.remoteConsole"
+          :vm-cluster="props.vmClusters"
           @show-preference="emits('show-preference')"
           @hide-preference="emits('hide-preference')"
           @change-theme-mode="emits('change-theme-mode')"
@@ -78,6 +81,8 @@
           @update-language="onUpdateLanguage"
           @update-is-browser="emits('update-is-browser', $event)"
           @update-is-new-view="emits('update-is-new-view', $event)"
+          @update-remote-console="emits('update-remote-console', $event)"
+          @update-vm-clusters="emits('update-vm-clusters', $event)"
           @submit-preferences="emits('submit-preferences')"
         />
 
@@ -117,7 +122,10 @@ const props = defineProps<{
   isPreference: boolean
   selectedLanguageType: string
   selectedLang: UI_I_Dropdown
+  remoteConsole: string
+  vmCluster: boolean
   newView: boolean
+  newViewLocal: boolean
   timeFormat: string
 }>()
 
@@ -131,6 +139,8 @@ const emits = defineEmits<{
   (event: 'update-language', value: UI_I_Dropdown): void
   (event: 'update-is-browser', value: string): void
   (event: 'update-is-new-view', value: boolean): void
+  (event: 'update-remote-console', value: string): void
+  (event: 'update-vm-clusters', value: boolean): void
   (event: 'submit-preferences'): void
 }>()
 

package/components/common/layout/theHeader/ThemeSwitch.vue

@@ -18,7 +18,7 @@ const emits = defineEmits<{
   (event: 'change-theme-mode'): void
 }>()
 
-const model = computed({
+const model = computed<boolean>({
   get() {
     return props.isDarkTheme
   },

package/components/common/layout/theHeader/userMenu/UserMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <common-layout-the-header-user-menu-user-menu-new
-    v-if="isNewView"
+    v-if="props.newView"
     :hostname="props.hostname"
     @select-dropdown="onSelectDropdown"
   />
@@ -21,19 +21,21 @@
     <common-layout-the-header-user-menu-modals-preferences
       v-if="props.isPreference"
       :time-format="props.timeFormat"
-      :user="props.userFromStore"
       :new-view="props.newView"
-      :is-new-view="isNewView"
+      :new-view-local="props.newViewLocal"
       :selected-language-type="props.selectedLanguageType"
       :selected-language="props.selectedLanguage"
       :project="props.project"
+      :remote-console="props.remoteConsole"
+      :vm-cluster="props.vmCluster"
       @hide="emits('hide-preference')"
       @reset="emits('reset-preference')"
       @update-time-format="emits('update-time-format', $event)"
       @update-language="emits('update-language', $event)"
-      @update-language-type="emits('update-language-type', $event)"
       @update-is-browser="emits('update-is-browser', $event)"
       @update-is-new-view="emits('update-is-new-view', $event)"
+      @update-remote-console="emits('update-remote-console', $event)"
+      @update-vm-clusters="emits('update-vm-clusters', $event)"
       @submit="emits('submit-preferences')"
     />
   </Teleport>
@@ -42,7 +44,6 @@
 <script setup lang="ts">
 import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
 import type { UI_T_LangValue, UI_T_Project } from '~/lib/models/types'
-import type { UI_I_User } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
 import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
 
 const props = defineProps<{
@@ -50,10 +51,12 @@ const props = defineProps<{
   project: UI_T_Project
   isPreference: boolean
   newView: boolean
+  newViewLocal: boolean
   timeFormat: UI_T_TimeValue
   selectedLanguageType: UI_T_LangValue
   selectedLanguage: UI_I_Dropdown
-  userFromStore?: UI_I_User
+  remoteConsole: string
+  vmCluster: boolean
 }>()
 const emits = defineEmits<{
   (event: 'show-preference'): void
@@ -62,16 +65,15 @@ const emits = defineEmits<{
   (event: 'change-theme-mode'): void
   (event: 'update-time-format', value: UI_T_TimeValue): void
   (event: 'update-language', value: UI_I_Dropdown): void
-  (event: 'update-language-type', value: string): void
   (event: 'update-is-browser', value: string): void
   (event: 'update-is-new-view', value: boolean): void
+  (event: 'update-remote-console', value: string): void
+  (event: 'update-vm-clusters', value: boolean): void
   (event: 'submit-preferences'): void
 }>()
 
 const { $store }: any = useNuxtApp()
 
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
 const isChangePassword = ref<boolean>(false)
 
 const onLogout = async (): Promise<void> => {

package/components/common/layout/theHeader/userMenu/modals/preferences/Preferences.vue

@@ -1,35 +1,41 @@
 <template>
   <common-layout-the-header-user-menu-modals-preferences-new
-    v-if="props.isNewView"
+    v-if="props.newView"
     :project="props.project"
     :time-format="props.timeFormat"
-    :user="props.user"
     :new-view="props.newView"
+    :new-view-local="props.newViewLocal"
     :selected-language-type="props.selectedLanguageType"
     :selected-language="props.selectedLanguage"
+    :remote-console="props.remoteConsole"
+    :vm-cluster="props.vmCluster"
     @hide="emits('hide')"
     @reset="emits('reset')"
     @update-time-format="emits('update-time-format', $event)"
     @update-language="emits('update-language', $event)"
-    @update-language-type="emits('update-language-type', $event)"
     @update-is-browser="emits('update-is-browser', $event)"
     @update-is-new-view="emits('update-is-new-view', $event)"
+    @update-remote-console="emits('update-remote-console', $event)"
+    @update-vm-clusters="emits('update-vm-clusters', $event)"
     @submit="emits('submit')"
   />
   <common-layout-the-header-user-menu-modals-preferences-old
     v-else
     :project="props.project"
     :time-format="props.timeFormat"
-    :user="props.user"
     :new-view="props.newView"
+    :new-view-local="props.newViewLocal"
     :selected-language-type="props.selectedLanguageType"
     :selected-language="props.selectedLanguage"
+    :remote-console="props.remoteConsole"
+    :vm-cluster="props.vmCluster"
     @hide="emits('hide')"
     @update-time-format="emits('update-time-format', $event)"
     @update-language="emits('update-language', $event)"
-    @update-language-type="emits('update-language-type', $event)"
     @update-is-browser="emits('update-is-browser', $event)"
     @update-is-new-view="emits('update-is-new-view', $event)"
+    @update-remote-console="emits('update-remote-console', $event)"
+    @update-vm-clusters="emits('update-vm-clusters', $event)"
     @submit="emits('submit')"
   />
 </template>
@@ -37,27 +43,28 @@
 <script setup lang="ts">
 import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
 import type { UI_T_LangValue, UI_T_Project } from '~/lib/models/types'
-import type { UI_I_User } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
 import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
 
 const props = defineProps<{
   project: UI_T_Project
   timeFormat: UI_T_TimeValue
-  user?: UI_I_User
   newView: boolean
+  newViewLocal: boolean
   selectedLanguageType: UI_T_LangValue
   selectedLanguage: UI_I_Dropdown
-  isNewView: boolean
+  remoteConsole: string
+  vmCluster: boolean
 }>()
 
 const emits = defineEmits<{
   (event: 'hide'): void
   (event: 'reset'): void
   (event: 'update-time-format', value: UI_T_TimeValue): void
-  (event: 'update-language-type', value: string): void
   (event: 'update-language', value: UI_I_Dropdown): void
   (event: 'update-is-browser', value: string): void
   (event: 'update-is-new-view', value: boolean): void
+  (event: 'update-remote-console', value: string): void
+  (event: 'update-vm-clusters', value: boolean): void
   (event: 'submit'): void
 }>()
 </script>

package/components/common/layout/theHeader/userMenu/modals/preferences/PreferencesNew.vue

@@ -10,41 +10,44 @@
     <template #content>
       <ui-modal-block-standard>
         <ui-modal-block-form-standard>
-          <common-layout-the-header-user-menu-modals-preferences-time-format-new
+          <common-layout-the-header-user-menu-modals-preferences-time-format
+            :new-view="props.newView"
             :time-format="props.timeFormat"
-            @update="emits('update-time-format', $event)"
+            @update-time-format="emits('update-time-format', $event)"
           />
         </ui-modal-block-form-standard>
 
         <ui-modal-block-form-standard>
-          <common-layout-the-header-user-menu-modals-preferences-change-language-new
+          <common-layout-the-header-user-menu-modals-preferences-change-language
+            :new-view="props.newView"
             :selected-type="props.selectedLanguageType"
             :selected-language="props.selectedLanguage"
-            :project="props.project"
-            @update-language-type="emits('update-language-type', $event)"
             @update-language="emits('update-language', $event)"
             @update-is-browser="emits('update-is-browser', $event)"
           />
         </ui-modal-block-form-standard>
 
         <ui-modal-block-form-standard v-if="isSphere">
-          <common-layout-the-header-user-menu-modals-preferences-inventory
-            :vm-cluster="props.user?.ui_options?.vm_in_hosts_clusters"
+          <common-layout-the-header-user-menu-modals-preferences-default-console
+            :new-view="props.newView"
+            :remote-console="props.remoteConsole"
+            @update-remote-console="emits('update-remote-console', $event)"
           />
         </ui-modal-block-form-standard>
 
         <ui-modal-block-form-standard v-if="isSphere">
-          <common-layout-the-header-user-menu-modals-preferences-default-console
-            :remote-console="props.user?.ui_options?.remote_console"
-            :project="props.project"
+          <common-layout-the-header-user-menu-modals-preferences-inventory
+            :new-view="props.newView"
+            :vm-cluster="props.vmCluster"
+            @update-vm-clusters="emits('update-vm-clusters', $event)"
           />
         </ui-modal-block-form-standard>
 
         <ui-modal-block-form-standard without-border-bottom>
-          <common-layout-the-header-user-menu-modals-preferences-view-new
-            :project="props.project"
-            :is-new-view="props.newView"
-            @update="emits('update-is-new-view', $event)"
+          <common-layout-the-header-user-menu-modals-preferences-view
+            :new-view="props.newView"
+            :new-view-local="props.newViewLocal"
+            @update-is-new-view="emits('update-is-new-view', $event)"
           />
         </ui-modal-block-form-standard>
       </ui-modal-block-standard>
@@ -56,7 +59,6 @@
 import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_T_LangValue, UI_T_Project } from '~/lib/models/types'
-import type { UI_I_User } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
 import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
 
 const props = defineProps<{
@@ -65,15 +67,18 @@ const props = defineProps<{
   selectedLanguage: UI_I_Dropdown
   selectedLanguageType: UI_T_LangValue
   newView: boolean
-  user?: UI_I_User
+  newViewLocal: boolean
+  remoteConsole: string
+  vmCluster: boolean
 }>()
 const emits = defineEmits<{
   (event: 'hide'): void
   (event: 'update-time-format', value: UI_T_TimeValue): void
-  (event: 'update-language-type', value: string): void
   (event: 'update-language', value: UI_I_Dropdown): void
   (event: 'update-is-browser', value: string): void
   (event: 'update-is-new-view', value: boolean): void
+  (event: 'update-remote-console', value: string): void
+  (event: 'update-vm-clusters', value: boolean): void
   (event: 'submit'): void
   (event: 'reset'): void
 }>()
@@ -86,9 +91,5 @@ const isSphere = ref<boolean>(props.project === 'sphere')
 
 const onHide = (): void => {
   emits('hide')
-
-  if (isSphere.value) {
-    $store.dispatch('profile/A_PREFERENCES_FOR_CHANGING', { clear: true })
-  }
 }
 </script>

package/components/common/layout/theHeader/userMenu/modals/preferences/PreferencesOld.vue

@@ -14,38 +14,41 @@
         :items="tabsItems"
       />
 
-      <common-layout-the-header-user-menu-modals-preferences-time-format-old
+      <common-layout-the-header-user-menu-modals-preferences-time-format
         v-if="selectedTab === 'time-tab'"
+        :new-view="props.newView"
         :time-format="props.timeFormat"
-        @update="emits('update-time-format', $event)"
+        @update-time-format="emits('update-time-format', $event)"
       />
 
-      <common-layout-the-header-user-menu-modals-preferences-change-language-old
+      <common-layout-the-header-user-menu-modals-preferences-change-language
         v-if="selectedTab === 'language-tab'"
+        :new-view="props.newView"
         :selected-type="props.selectedLanguageType"
         :selected-language="props.selectedLanguage"
-        :project="props.project"
-        @update-language-type="emits('update-language-type', $event)"
-        @update="emits('update-language', $event)"
+        @update-language="emits('update-language', $event)"
         @update-is-browser="emits('update-is-browser', $event)"
       />
 
       <common-layout-the-header-user-menu-modals-preferences-inventory
         v-if="selectedTab === 'inventory-tab' && isSphere"
-        :vm-cluster="props.user?.ui_options?.vm_in_hosts_clusters"
+        :new-view="props.newView"
+        :vm-cluster="props.vmCluster"
+        @update-vm-clusters="emits('update-vm-clusters', $event)"
       />
 
       <common-layout-the-header-user-menu-modals-preferences-default-console
         v-if="selectedTab === 'console-tab' && isSphere"
-        :remote-console="props.user?.ui_options?.remote_console"
-        :project="props.project"
+        :new-view="props.newView"
+        :remote-console="props.remoteConsole"
+        @update-remote-console="emits('update-remote-console', $event)"
       />
 
-      <common-layout-the-header-user-menu-modals-preferences-view-old
+      <common-layout-the-header-user-menu-modals-preferences-view
         v-if="selectedTab === 'view-tab'"
-        :project="props.project"
-        :is-new-view="props.newView"
-        @update="emits('update-is-new-view', $event)"
+        :new-view="props.newView"
+        :new-view-local="props.newViewLocal"
+        @update-is-new-view="emits('update-is-new-view', $event)"
       />
     </template>
 
@@ -75,7 +78,6 @@ import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/model
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_T_LangValue, UI_T_Project } from '~/lib/models/types'
 import type { UI_T_UserPreferenceTab } from '~/components/common/layout/theHeader/userMenu/modals/preferences/lib/models/types'
-import type { UI_I_User } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
 import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
 import { preferencesTabs } from '~/components/common/layout/theHeader/userMenu/modals/preferences/lib/config/preferencesTabs'
 
@@ -85,15 +87,17 @@ const props = defineProps<{
   selectedLanguage: UI_T_LangValue
   selectedLanguageType: UI_T_LangValue
   newView: boolean
-  user?: UI_I_User
+  remoteConsole: string
+  vmCluster: boolean
 }>()
 const emits = defineEmits<{
   (event: 'hide'): void
   (event: 'update-time-format', value: UI_T_TimeValue): void
-  (event: 'update-language-type', value: string): void
   (event: 'update-language', value: string): void
   (event: 'update-is-browser', value: string): void
   (event: 'update-is-new-view', value: boolean): void
+  (event: 'update-remote-console', value: string): void
+  (event: 'update-vm-clusters', value: boolean): void
   (event: 'submit'): void
 }>()
 
@@ -113,7 +117,6 @@ const onHide = (): void => {
 
   if (isSphere.value) {
     selectedTab.value = 'time-tab'
-    $store.dispatch('profile/A_PREFERENCES_FOR_CHANGING', { clear: true })
   }
 }
 </script>

package/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/ChangeLanguage.vue

@@ -0,0 +1,110 @@
+<template>
+  <common-layout-the-header-user-menu-modals-preferences-change-language-new
+    v-if="props.newView"
+    :selected-language="selectedLanguageLocal"
+    :description="description"
+    :radio-options="radioOptions"
+    :language-mode="languageMode"
+    :locales="locales"
+    @update-language="onSelectLang"
+    @update-is-browser="onUpdateIsBrowser"
+  />
+  <common-layout-the-header-user-menu-modals-preferences-change-language-old
+    v-else
+    :selected-language="selectedLanguageLocal"
+    :description="description"
+    :radio-options="radioOptions"
+    :language-mode="languageMode"
+    :locales="locales"
+    @update-language="onSelectLang"
+    @update-is-browser="onUpdateIsBrowser"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_T_LangValue } from '~/lib/models/types'
+import type { UI_T_SelectedRadio } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/types'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_RadioItemLang } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/interfaces'
+import { locales } from '~/components/common/selectLanguage/lib/config/config'
+import { findInLocals } from '~/components/common/selectLanguage/lib/utils/utils'
+import { UI_E_DetectSelectedRadio } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/enums'
+import { radioOptionsFunc } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/config/radioOptions'
+import { defineBrowserLangFunc } from '~/components/common/layout/theHeader/lib/utils/localization'
+
+const props = defineProps<{
+  newView: boolean
+  selectedType: UI_T_LangValue
+  selectedLanguage: UI_I_Dropdown
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-language', value: UI_I_Dropdown): void
+  (event: 'update-is-browser', value: string): void
+}>()
+
+const config = useRuntimeConfig()
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const description = computed<string>(() => {
+  return localization.value.languageDesc.replaceAll(
+    '{trademark}',
+    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
+  )
+})
+
+const radioOptions = readonly<UI_I_RadioItemLang[]>(
+  radioOptionsFunc(localization.value)
+)
+
+const languageMode = ref<UI_T_SelectedRadio>(
+  UI_E_DetectSelectedRadio[props.selectedType]
+)
+
+const selectedLanguageLocal = ref<UI_I_Dropdown>(props.selectedLanguage)
+
+const setPreferenceLang = (language: string): void => {
+  let currentLang = language
+
+  language === 'BROWSER' &&
+    (currentLang = findInLocals(defineBrowserLangFunc()))
+
+  emits('update-language', currentLang)
+}
+
+const onSelectLang = (newValue: string): void => {
+  selectedLanguageLocal.value && setPreferenceLang(newValue)
+}
+
+const onChange = (): void => {
+  const lang =
+    languageMode.value === 'LANG'
+      ? selectedLanguageLocal.value
+      : languageMode.value // 'BROWSER'
+
+  lang && setPreferenceLang(lang)
+}
+
+const onUpdateIsBrowser = (value: string): void => {
+  emits('update-is-browser', value)
+}
+
+watch(
+  () => props.selectedLanguage,
+  (newValue: UI_I_Dropdown) => {
+    selectedLanguageLocal.value = newValue
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.selectedType,
+  (newValue: UI_T_LangValue) => {
+    languageMode.value = UI_E_DetectSelectedRadio[newValue]
+    onChange()
+    newValue && onUpdateIsBrowser(newValue)
+  },
+  { immediate: true }
+)
+</script>