bfg-common 1.3.558 → 1.3.559

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

@@ -10,9 +10,13 @@
           {{ localization.timeFormat }}
         </div>
         <div class="form-second-title">
-          {{ description }}
+          {{ props.description }}
         </div>
-        <div v-for="(item, key) in formatOptions" :key="key" class="radio">
+        <div
+          v-for="(item, key) in props.formatOptions"
+          :key="key"
+          class="radio"
+        >
           <ui-radio
             v-model="timeItem"
             :test-id="item.testId"
@@ -30,36 +34,15 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_RadioItem } 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 { formatOptionsFunc } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/config/formatOptions'
 
 const props = defineProps<{
-  timeFormat: UI_T_TimeValue
+  description: string
+  formatOptions: UI_I_RadioItem[]
 }>()
-const emits = defineEmits<{
-  (event: 'update', value: UI_T_TimeValue): void
-}>()
-const localization = computed<UI_I_Localization>(() => useLocal())
 
-const config = useRuntimeConfig()
-const description = computed<string>(() =>
-  localization.value.timeFormatDesc.replaceAll(
-    '{trademark}',
-    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
-  )
-)
-
-const formatOptions = readonly<UI_I_RadioItem[]>(
-  formatOptionsFunc(localization.value)
-)
+const localization = computed<UI_I_Localization>(() => useLocal())
 
-const timeItem = computed({
-  get() {
-    return props.timeFormat
-  },
-  set(newValue: UI_T_TimeValue) {
-    emits('update', newValue)
-  },
-})
+const timeItem = defineModel<UI_T_TimeValue>()
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,17 +1,16 @@
 <template>
-  <form id="time-format-form" class="compact ng-valid ng-dirty ng-touched">
+  <form id="time-format-form" class="compact">
     <div class="description">
-      {{ description }}
+      {{ props.description }}
     </div>
 
-    <div v-for="(item, key) in formatOptions" :key="key" class="radio">
+    <div v-for="(item, key) in props.formatOptions" :key="key" class="radio">
       <input
         :id="item.value"
         v-model="timeItem"
         :data-id="item.testId"
         type="radio"
         :value="item.value"
-        @change="onChange"
       />
       <label :for="item.value">
         {{ item.label }}
@@ -21,36 +20,15 @@
 </template>
 
 <script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_RadioItem } 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 { formatOptionsFunc } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/config/formatOptions'
 
 const props = defineProps<{
-  timeFormat: UI_T_TimeValue
+  description: string
+  formatOptions: UI_I_RadioItem[]
 }>()
-const emits = defineEmits<{
-  (event: 'update', value: UI_T_TimeValue): void
-}>()
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const config = useRuntimeConfig()
-const description = computed<string>(() =>
-  localization.value.timeFormatDesc.replaceAll(
-    '{trademark}',
-    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
-  )
-)
-
-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 = defineModel<UI_T_TimeValue>()
 </script>
 
 <style lang="scss" scoped>

package/components/common/layout/theHeader/userMenu/modals/preferences/view/View.vue

@@ -0,0 +1,45 @@
+<template>
+  <common-layout-the-header-user-menu-modals-preferences-view-new
+    v-if="props.newView"
+    v-model="model"
+    :description="description"
+  />
+  <common-layout-the-header-user-menu-modals-preferences-view-old
+    v-else
+    v-model="model"
+    :description="description"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  newView: boolean
+  newViewLocal: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-is-new-view', value: boolean): void
+}>()
+
+const config = useRuntimeConfig()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const description = computed<string>(() => {
+  return localization.value.viewDesc.replaceAll(
+    '{trademark}',
+    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
+  )
+})
+
+const model = computed<boolean>({
+  get() {
+    return props.newViewLocal
+  },
+  set(newValue: boolean) {
+    emits('update-is-new-view', newValue)
+  },
+})
+</script>

package/components/common/layout/theHeader/userMenu/modals/preferences/view/ViewNew.vue

@@ -10,11 +10,11 @@
           {{ localization.view }}
         </div>
         <div class="form-second-title">
-          {{ description }}
+          {{ props.description }}
         </div>
 
         <div class="flex-align-center">
-          <ui-switch v-model="isNewViewLocal" :label="localization.newView" />
+          <ui-switch v-model="newViewLocal" :label="localization.newView" />
         </div>
       </div>
     </div>
@@ -25,97 +25,10 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const props = defineProps<{
-  isNewView: boolean
+  description: string
 }>()
 
-const isNewViewLocal = computed({
-  get() {
-    return props.isNewView
-  },
-  set(newValue: boolean) {
-    emits('update', newValue)
-  },
-})
-
-const emits = defineEmits<{
-  (event: 'update', value: boolean): void
-}>()
-
-const config = useRuntimeConfig()
+const newViewLocal = defineModel<boolean>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
-
-const description = computed<string>(() => {
-  return localization.value.viewDesc.replaceAll(
-    '{trademark}',
-    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
-  )
-})
-
-</script>
-
-<style lang="scss" scoped>
-.description {
-  margin-bottom: 10px;
-}
-
-label {
-  margin-right: 6px;
-}
-
-input[type='checkbox'] {
-  --active: var(--checkbox-value-active-color);
-  --active-inner: var(--checkbox-mark-color);
-  --border: var(--checkbox-mark-color);
-  --background: var(--checkbox-mark-background-color);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  height: 20px;
-  outline: none;
-  display: inline-block;
-  vertical-align: top;
-  position: relative;
-  margin: 0;
-  cursor: pointer;
-  border: 1px solid var(--bc, var(--border));
-  background: var(--b, var(--background));
-  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
-  &:after {
-    content: '';
-    display: block;
-    left: 0;
-    top: 0;
-    position: absolute;
-    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
-      opacity var(--d-o, 0.2s);
-  }
-  &:checked {
-    --b: var(--active);
-    --bc: var(--active);
-    --d-o: 0.3s;
-    --d-t: 0.6s;
-    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
-  }
-}
-input[type='checkbox'] {
-  &.switch {
-    width: 35px;
-    border-radius: 11px;
-    &:after {
-      left: 2px;
-      top: 2px;
-      bottom: 2px;
-      border-radius: 50%;
-      width: 14px;
-      height: 14px;
-      border: 1px solid var(--bc, var(--border));
-      background: var(--ab, var(--border));
-      transform: translateX(var(--x, 0));
-    }
-    &:checked {
-      --ab: var(--active-inner);
-      --x: 14px;
-    }
-  }
-}
-</style>
+</script>

package/components/common/layout/theHeader/userMenu/modals/preferences/view/ViewOld.vue

@@ -1,19 +1,13 @@
 <template>
   <form id="view-form" class="compact">
     <div class="description">
-      {{ description }}
+      {{ props.description }}
     </div>
 
     <div class="flex-align-center">
       <label for="view">{{ localization.newView }}</label>
-      <input
-        id="view"
-        v-model="isNewViewLocal"
-        type="checkbox"
-        class="switch"
-        :disabled="isDisabled"
-        @change="onChange"
-      />
+      <!--        :disabled="isDisabled"-->
+      <input id="view" v-model="newViewLocal" type="checkbox" class="switch" />
     </div>
   </form>
 </template>
@@ -22,29 +16,13 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const props = defineProps<{
-  isNewView: boolean
+  description: string
 }>()
 
-const isNewViewLocal = ref<boolean>(props.isNewView)
-
-const emits = defineEmits<{
-  (event: 'update', value: boolean): void
-}>()
-
-const config = useRuntimeConfig()
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const description = computed<string>(() => {
-  return localization.value.viewDesc.replaceAll(
-    '{trademark}',
-    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
-  )
-})
+const newViewLocal = defineModel<boolean>()
 
-const onChange = (): void => {
-  emits('update', isNewViewLocal.value)
-}
 const isDisabled = ref<boolean>(true)
 // @ts-ignore
 window.tools = new Proxy(

package/components/common/selectLanguage/SelectLanguage.vue

@@ -9,7 +9,6 @@
       :disabled="props.disabled"
       :size="props.size"
       max-height="inherit"
-      @change="onSelect"
     >
       <template #toggleContent>
         <span class="language-dropdown__icon content-icon"
@@ -37,11 +36,12 @@
 
 <script lang="ts" setup>
 import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import { findInLocals } from '~/components/common/selectLanguage/lib/utils/utils'
 
 const props = withDefaults(
   defineProps<{
     normalizeLang: UI_I_Dropdown[]
-    selectedLang: UI_I_Dropdown
+    modelValue: UI_I_Dropdown
     disabled?: boolean
     width?: string
     size?: 'sm' | 'md'
@@ -54,21 +54,17 @@ const props = withDefaults(
 )
 
 const emits = defineEmits<{
-  (event: 'change', lang: UI_I_Dropdown): void
+  (event: 'update:model-value', newValue: 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
+const selectedLang = computed<UI_I_Dropdown>({
+  get() {
+    return props.modelValue
   },
-  { deep: true, immediate: true }
-)
+  set(newValue: UI_I_Dropdown) {
+    emits('update:model-value', newValue)
+  },
+})
 </script>
 
 <style lang="scss" scoped>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/browseView/BrowseView.vue

@@ -17,13 +17,13 @@
 </template>
 
 <script lang="ts" setup>
-import { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
-import { UI_I_TablePayload } from '~/lib/models/table/interfaces'
-import { UI_I_FolderOrFileTreePayload } from '~/lib/models/store/storage/interfaces'
-import { UI_I_CurrentDirNodesArguments } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/browseView/lib/models/interfaces'
-import { UI_I_Localization } from '~/lib/models/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import { UI_I_FileInfo } from '~/components/common/browse/lib/models/interfaces'
+import type { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
+import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+import type { UI_I_FolderOrFileTreePayload } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_CurrentDirNodesArguments } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/browseView/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_FileInfo } from '~/components/common/browse/lib/models/interfaces'
 
 const props = defineProps<{
   show: boolean

package/composables/useEnvLanguage.ts

@@ -3,7 +3,10 @@ export function useEnvLanguage(): string {
 
   let localizationCode = 'en_US'
   const langFromLocalStorage =
-    useLocalStorage('lang') || $store.getters['main/getInterfaceLang'] // Из $store для Сферы, но думаю нужно сделать одинаково из localStorage
+    useLocalStorage('lang') ||
+    useLocalStorage('languageType') ||
+    $store.getters['main/getInterfaceLang'] // Из $store для Сферы, но думаю нужно сделать одинаково из localStorage
+
   if (langFromLocalStorage) {
     if (
       langFromLocalStorage === 'en_US' ||

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.3.558",
+  "version": "1.3.559",
   "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.79",
+    "bfg-uikit": "1.0.86",
     "html2canvas": "^1.4.1",
     "prettier-eslint": "^15.0.1"
   }