bfg-common 1.3.525 → 1.3.528

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

@@ -17,6 +17,7 @@
     :is-dark-theme="props.isDarkTheme"
     @toggle-main-menu="emits('toggle-main-menu')"
     @show-preference="emits('show-preference')"
+    @reset-preference="emits('reset-preference')"
     @hide-preference="emits('hide-preference')"
     @global-refresh="emits('global-refresh')"
     @update-time-format="emits('update-time-format', $event)"
@@ -55,6 +56,7 @@
 </template>
 
 <script setup lang="ts">
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
 import type { UI_T_Project } from '~/lib/models/types'
 import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
 
@@ -69,7 +71,7 @@ const props = defineProps<{
   hostname: string
   isPreference: boolean
   selectedLanguageType: string
-  selectedLang: string
+  selectedLang: UI_I_Dropdown
   newView: boolean
   newViewLocal: boolean
   timeFormat: string
@@ -80,10 +82,11 @@ const emits = defineEmits<{
   (event: 'toggle-main-menu'): void
   (event: 'global-refresh'): void
   (event: 'show-preference'): void
+  (event: 'reset-preference'): void
   (event: 'hide-preference'): void
   (event: 'change-theme-mode'): void
   (event: 'update-time-format', value: UI_T_TimeValue): void
-  (event: 'update-language', 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: 'submit-preferences'): void

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

@@ -65,6 +65,7 @@
             :new-view="props.newView"
             :project="props.project"
             @show-preference="emits('show-preference')"
+            @reset-preference="emits('reset-preference')"
             @hide-preference="emits('hide-preference')"
             @change-theme-mode="emits('change-theme-mode')"
             @update-time-format="emits('update-time-format', $event)"
@@ -80,6 +81,7 @@
 </template>
 
 <script setup lang="ts">
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
 import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
 import type { UI_T_Project } from '~/lib/models/types'
 
@@ -94,7 +96,7 @@ const props = defineProps<{
   hostname: string
   isPreference: boolean
   selectedLanguageType: string
-  selectedLang: string
+  selectedLang: UI_I_Dropdown
   newView: boolean
   timeFormat: string
   isDarkTheme: boolean
@@ -104,10 +106,11 @@ const emits = defineEmits<{
   (event: 'toggle-main-menu'): void
   (event: 'global-refresh'): void
   (event: 'show-preference'): void
+  (event: 'reset-preference'): void
   (event: 'hide-preference'): void
   (event: 'change-theme-mode'): void
   (event: 'update-time-format', value: UI_T_TimeValue): void
-  (event: 'update-language', 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: 'submit-preferences'): void

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

@@ -68,14 +68,14 @@
           :is-preference="props.isPreference"
           :time-format="props.timeFormat"
           :selected-language-type="props.selectedLanguageType"
-          :selected-language="props.selectedLang"
+          :selected-language="props.selectedLang.value"
           :new-view="props.newView"
           :project="props.project"
           @show-preference="emits('show-preference')"
           @hide-preference="emits('hide-preference')"
           @change-theme-mode="emits('change-theme-mode')"
           @update-time-format="emits('update-time-format', $event)"
-          @update-language="emits('update-language', $event)"
+          @update-language="onUpdateLanguage"
           @update-is-browser="emits('update-is-browser', $event)"
           @update-is-new-view="emits('update-is-new-view', $event)"
           @submit-preferences="emits('submit-preferences')"
@@ -100,8 +100,10 @@
 </template>
 
 <script setup lang="ts">
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
 import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
 import type { UI_T_Project } from '~/lib/models/types'
+import { findInLocals } from '~/components/common/selectLanguage/lib/utils/utils'
 
 const props = defineProps<{
   companyName: string
@@ -114,7 +116,7 @@ const props = defineProps<{
   hostname: string
   isPreference: boolean
   selectedLanguageType: string
-  selectedLang: string
+  selectedLang: UI_I_Dropdown
   newView: boolean
   timeFormat: string
 }>()
@@ -126,12 +128,17 @@ const emits = defineEmits<{
   (event: 'hide-preference'): void
   (event: 'change-theme-mode'): void
   (event: 'update-time-format', value: UI_T_TimeValue): void
-  (event: 'update-language', 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: 'submit-preferences'): void
 }>()
 
+const onUpdateLanguage = (language: string): void => {
+  const languageObj = findInLocals(language)
+  emits('update-language', languageObj)
+}
+
 const isShowFeedback = ref<boolean>(false)
 </script>
 

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

@@ -28,6 +28,7 @@
       :selected-language="props.selectedLanguage"
       :project="props.project"
       @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)"
@@ -39,6 +40,7 @@
 </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, 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'
@@ -50,15 +52,16 @@ const props = defineProps<{
   newView: boolean
   timeFormat: UI_T_TimeValue
   selectedLanguageType: UI_T_LangValue
-  selectedLanguage: UI_T_LangValue
+  selectedLanguage: UI_I_Dropdown
   userFromStore?: UI_I_User
 }>()
 const emits = defineEmits<{
   (event: 'show-preference'): void
+  (event: 'reset-preference'): void
   (event: 'hide-preference'): void
   (event: 'change-theme-mode'): void
   (event: 'update-time-format', value: UI_T_TimeValue): void
-  (event: 'update-language', value: string): 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

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

@@ -8,6 +8,7 @@
     :selected-language-type="props.selectedLanguageType"
     :selected-language="props.selectedLanguage"
     @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)"
@@ -34,6 +35,7 @@
 </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, 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'
@@ -44,15 +46,16 @@ const props = defineProps<{
   user?: UI_I_User
   newView: boolean
   selectedLanguageType: UI_T_LangValue
-  selectedLanguage: UI_T_LangValue
+  selectedLanguage: UI_I_Dropdown
   isNewView: 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: 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: 'submit'): void

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

@@ -3,6 +3,7 @@
     test-id="user-preferences-modal"
     width="580px"
     :title="localization.preferences"
+    @reset="emits('reset')"
     @submit="emits('submit')"
     @hide="onHide"
   >
@@ -21,7 +22,7 @@
             :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)"
           />
         </ui-modal-block-form-standard>
@@ -52,6 +53,7 @@
 </template>
 
 <script setup lang="ts">
+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'
@@ -60,7 +62,7 @@ import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMe
 const props = defineProps<{
   project: UI_T_Project
   timeFormat: UI_T_TimeValue
-  selectedLanguage: UI_T_LangValue
+  selectedLanguage: UI_I_Dropdown
   selectedLanguageType: UI_T_LangValue
   newView: boolean
   user?: UI_I_User
@@ -69,10 +71,11 @@ 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-language', value: UI_I_Dropdown): void
   (event: 'update-is-browser', value: string): void
   (event: 'update-is-new-view', value: boolean): void
   (event: 'submit'): void
+  (event: 'reset'): void
 }>()
 
 const { $store }: any = useNuxtApp()

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

@@ -1,5 +1,5 @@
 <template>
-  <form id="change-language-form">
+  <form id="change-language-form" @submit.prevent>
     <div class="flex">
       <ui-modal-icon>
         <ui-icon-icon3 name="language-new" width="20" height="20" />
@@ -14,32 +14,23 @@
         </div>
 
         <div v-for="(item, key) in radioOptions" :key="key" class="radio flex">
-          <input
-            :id="item.label"
+          <ui-radio
             v-model="languageMode"
-            :data-id="item.testId"
-            type="radio"
+            :test-id="item.testId"
+            :label="item.label"
             :value="item.value"
-            @change="onChange"
+            size="sm"
           />
-          <label :for="item.label"> {{ item.label }} </label>
-
-          <span v-if="item.selectLang" class="select select-lang">
-            <select
-              id="language-select"
-              v-model="selectedLanguageLocal"
-              :disabled="languageMode !== item.value"
-              data-id="language-select"
+
+          <span v-if="item.selectLang" class="select">
+            <common-select-language
+              :normalize-lang="locales"
+              :selected-lang="selectedLanguageLocal"
+              :disabled="props.selectedType === 'BROWSER'"
+              width="97px"
+              size="sm"
               @change="onSelectLang"
-            >
-              <option
-                v-for="(item2, key2) in langOptions"
-                :key="key2"
-                :value="item2.value"
-              >
-                {{ item2.text }}
-              </option>
-            </select>
+            />
           </span>
         </div>
       </div>
@@ -48,26 +39,25 @@
 </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, UI_T_Project } 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_LanguageItem,
-  UI_I_RadioItemLang,
-} from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/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 { langConfig } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/config/lang'
 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<{
   selectedType: UI_T_LangValue
-  selectedLanguage: UI_T_LangValue
+  selectedLanguage: UI_I_Dropdown
   project: UI_T_Project
 }>()
 
 const emits = defineEmits<{
-  (event: 'update', value: string): void
+  (event: 'update-language', value: UI_I_Dropdown): void
   (event: 'update-language-type', value: UI_T_SelectedRadio): void
   (event: 'update-is-browser', value: string): void
 }>()
@@ -89,35 +79,34 @@ const radioOptions = readonly<UI_I_RadioItemLang[]>(
   radioOptionsFunc(localization.value)
 )
 
-const langOptions = ref<UI_I_LanguageItem[]>(langConfig)
-
-const selectedLanguageLocal = ref<string>(props.selectedLanguage)
+const selectedLanguageLocal = ref<UI_I_Dropdown>(props.selectedLanguage)
 
 const setPreferenceLang = (language: string): void => {
-  let browserLang = language
+  let currentLang = language
 
-  language === 'BROWSER' && (browserLang = defineBrowserLangFunc())
+  language === 'BROWSER' &&
+    (currentLang = findInLocals(defineBrowserLangFunc()))
 
   if (props.project === 'sphere') {
     const { $store }: any = useNuxtApp()
 
     $store.dispatch('profile/A_PREFERENCES_FOR_CHANGING', {
-      language: browserLang,
+      language: currentLang,
     })
   } else if (props.project === 'procurator') {
-    emits('update', browserLang)
+    emits('update-language', currentLang)
   }
 }
 
-const onSelectLang = (): void => {
-  selectedLanguageLocal.value && setPreferenceLang(selectedLanguageLocal.value)
+const onSelectLang = (newValue): void => {
+  selectedLanguageLocal.value && setPreferenceLang(newValue)
 }
 
 const onChange = (): void => {
   const lang =
     languageMode.value === 'LANG'
       ? selectedLanguageLocal.value
-      : languageMode.value
+      : languageMode.value // 'BROWSER'
 
   lang && setPreferenceLang(lang)
 
@@ -132,24 +121,35 @@ const updateIsBrowser = (value: string): void => {
 watch(
   languageMode,
   (newValue) => {
+    onChange()
     newValue && updateIsBrowser(newValue)
   },
   { immediate: true }
 )
+
+watch(
+  () => props.selectedLanguage,
+  (newValue) => {
+    selectedLanguageLocal.value = newValue
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.selectedType,
+  (newValue) => {
+    languageMode.value = UI_E_DetectSelectedRadio[newValue]
+  },
+  { immediate: true }
+)
 </script>
 
 <style lang="scss" scoped>
-.radio {
-  margin-bottom: 5px;
-  &:nth-child(2) {
-    margin-top: 10px;
-  }
+.radio:not(:last-child) {
+  margin-bottom: 12px;
 }
-.select-lang {
-  margin-left: 3px;
-  height: 24px;
-  & > select {
-    height: 100%;
-  }
+
+.select {
+  margin-left: 8px;
 }
 </style>

package/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/TimeFormatNew.vue

@@ -12,19 +12,14 @@
         <div class="form-second-title">
           {{ description }}
         </div>
-
         <div v-for="(item, key) in formatOptions" :key="key" class="radio">
-          <input
-            :id="item.value"
+          <ui-radio
             v-model="timeItem"
-            :data-id="item.testId"
-            type="radio"
+            :test-id="item.testId"
+            :label="item.label"
             :value="item.value"
-            @change="onChange"
+            size="sm"
           />
-          <label :for="item.value">
-            {{ item.label }}
-          </label>
         </div>
       </div>
     </div>
@@ -57,22 +52,18 @@ const formatOptions = readonly<UI_I_RadioItem[]>(
   formatOptionsFunc(localization.value)
 )
 
-const timeItem = ref<UI_T_TimeValue>(props.timeFormat)
-
-const onChange = (): void => {
-  emits('update', timeItem.value)
-}
+const timeItem = computed({
+  get() {
+    return props.timeFormat
+  },
+  set(newValue: UI_T_TimeValue) {
+    emits('update', newValue)
+  },
+})
 </script>
 
 <style lang="scss" scoped>
-.radio {
-  margin-bottom: 5px;
-  &:nth-child(2) {
-    margin-top: 10px;
-  }
-}
-input[type='radio']:focus:checked + label::before,
-input[type='radio']:focus + label::before {
-  box-shadow: inset 0 0 0 0.25rem #0094d2;
+.radio:not(:last-child) {
+  margin-bottom: 12px;
 }
 </style>

package/components/common/selectLanguage/SelectLanguage.vue

@@ -0,0 +1,134 @@
+<template>
+  <div :class="['language-dropdown', props.size]">
+    <ui-select
+      v-model="selectedLang"
+      test-id="select-language"
+      :items="props.normalizeLang"
+      :width="props.size === 'md' ? '114px' : '97px'"
+      arrow-stroke-width="2.4"
+      :disabled="props.disabled"
+      :size="props.size"
+      max-height="inherit"
+      @change="onSelect"
+    >
+      <template #toggleContent>
+        <span class="language-dropdown__icon content-icon"
+          ><ui-icon-icon2
+            :name="selectedLang?.iconName"
+            :height="props.size === 'md' ? '16' : '13'"
+            :width="props.size === 'md' ? '24' : '19'"
+          ></ui-icon-icon2
+        ></span>
+        {{ selectedLang?.text }}
+      </template>
+      <template #row="{ item }">
+        <span class="language-dropdown__icon dropdown-icon">
+          <ui-icon-icon2
+            :name="item.iconName"
+            :height="props.size === 'md' ? '16' : '13'"
+            :width="props.size === 'md' ? '24' : '19'"
+          ></ui-icon-icon2>
+        </span>
+        <span class="ui-item-text">{{ item.text }}</span>
+      </template>
+    </ui-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    normalizeLang: UI_I_Dropdown[]
+    selectedLang: UI_I_Dropdown
+    disabled?: boolean
+    width?: string
+    size?: 'sm' | 'md'
+  }>(),
+  {
+    disabled: false,
+    width: '114px',
+    size: 'md',
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'change', lang: UI_I_Dropdown): void
+}>()
+
+const selectedLang = ref<UI_I_Dropdown>(props.selectedLang)
+const onSelect = (lang: UI_I_Dropdown): void => {
+  emits('change', lang)
+}
+
+watch(
+  () => props.selectedLang,
+  (newValue: UI_I_Dropdown) => {
+    selectedLang.value = newValue
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+.language-dropdown {
+  &.sm {
+    .language-dropdown__icon {
+      margin-right: 8px;
+      &.content-icon {
+        margin-right: 6px;
+      }
+    }
+
+    font-size: 12px;
+    line-height: 14.52px;
+    font-weight: 500;
+  }
+
+  &.md {
+    .language-dropdown__icon {
+      margin-right: 8px;
+      &.content-icon {
+        margin-right: 8px;
+      }
+    }
+
+    font-size: 14px;
+    line-height: 16.94px;
+    font-weight: 500;
+  }
+
+  :deep(.ui-dropdown-menu-item) {
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+    &:not(.disabled):not(.selected):hover {
+      background-color: var(--dropdown-item-hover-bg-color);
+
+      .ui-item-text {
+        color: var(--dropdown-item-hover-color);
+      }
+    }
+
+    & .ui-item-text {
+      color: var(--dropdown-item-color);
+      font-weight: 500;
+    }
+
+    &.selected {
+      .ui-item-text {
+        color: var(--dropdown-item-selected-color);
+      }
+    }
+  }
+
+  &__icon {
+    display: flex;
+  }
+}
+</style>

package/components/common/selectLanguage/lib/config/config.ts

@@ -0,0 +1,34 @@
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+
+export const locales: UI_I_Dropdown[] = [
+  {
+    text: 'RU',
+    value: 'ru_RU',
+    iconName: 'ru-flag',
+  },
+  {
+    text: 'AM',
+    value: 'hy_AM',
+    iconName: 'am-flag',
+  },
+  {
+    text: 'BY',
+    value: 'be_BY',
+    iconName: 'be-flag',
+  },
+  {
+    text: 'KZ',
+    value: 'kk_KZ',
+    iconName: 'kk-flag',
+  },
+  {
+    text: 'CN',
+    value: 'zh_CHS',
+    iconName: 'zh-flag',
+  },
+  {
+    text: 'EN',
+    value: 'en_US',
+    iconName: 'en-flag',
+  },
+]

package/components/common/selectLanguage/lib/utils/utils.ts

@@ -0,0 +1,5 @@
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import { locales } from '~/components/common/selectLanguage/lib/config/config'
+
+export const findInLocals = (find: string): UI_I_Dropdown =>
+  locales.find((lang: UI_I_Dropdown) => lang.value === find) || locales[0]

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.3.525",
+  "version": "1.3.528",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -35,7 +35,7 @@
     "@vueuse/components": "^10.1.2",
     "date-fns": "^2.29.3",
     "bfg-nuxt-3-graph": "^1.0.15",
-    "bfg-uikit": "1.0.71",
+    "bfg-uikit": "1.0.77",
     "html2canvas": "^1.4.1",
     "prettier-eslint": "^15.0.1"
   }