bfg-common 1.5.114 → 1.5.116

package/components/common/select/input/Input.vue

@@ -1,8 +1,5 @@
 <template>
-  <section
-    class="select-input clr-flex-row"
-    :class="props.disabled && 'disable'"
-  >
+  <section :class="['select-input clr-flex-row', props.disabled && 'disable']">
     <label
       v-if="props.label"
       :for="`${props.testId}-target`"
@@ -11,8 +8,10 @@
       {{ props.label }}
     </label>
     <div
-      class="select-input__inner mt-0 clr-form-control clr-col-8"
-      :class="!props.defaultStyle && 'select'"
+      :class="[
+        'select-input__inner mt-0 clr-form-control clr-col-8',
+        !props.defaultStyle && 'select',
+      ]"
     >
       <select
         :id="`${props.testId}-target`"

package/components/common/select/radio/RadioGroup.vue

@@ -3,8 +3,7 @@
     <div
       v-for="radio in options"
       :key="radio.value"
-      class="select-option__inner radio"
-      :class="radio.disabled && 'disabled'"
+      :class="['select-option__inner radio', radio.disabled && 'disabled']"
     >
       <div :class="['select-option__container', radio.value]">
         <div class="select-option__wrapper">
@@ -12,9 +11,9 @@
             :id="radio.label"
             v-model="selectedType"
             :data-id="radio.testId"
-            type="radio"
             :value="radio.value"
             :disabled="radio.disabled"
+            type="radio"
           />
           <label :for="radio.label">{{ radio.label }}</label>
 
@@ -113,7 +112,7 @@ const selectedType = computed<string | number>({
 .radio {
   margin-bottom: 5px;
   //&:nth-child(2) {
-    //margin-top: 10px; // ?
+  //margin-top: 10px; // ?
   //}
   &.disabled {
     opacity: 0.7;

package/components/common/selectLanguage/SelectLanguage.vue

@@ -1,31 +1,31 @@
 <template>
   <div :class="['language-dropdown', props.size]">
     <ui-select
-        v-model="selectedLang"
-        test-id="select-language"
-        :items="itemsLocal"
-        :width="props.size === 'md' ? '114px' : '97px'"
-        arrow-stroke-width="2.4"
-        :disabled="props.disabled"
-        :size="props.size"
-        max-height="inherit"
+      v-model="selectedLang"
+      :items="itemsLocal"
+      :width="props.size === 'md' ? '114px' : '97px'"
+      :disabled="props.disabled"
+      :size="props.size"
+      max-height="inherit"
+      test-id="select-language"
+      arrow-stroke-width="2.4"
     >
       <template #toggleContent>
         <span class="language-dropdown__icon content-icon"
-        ><ui-icon-icon2
+          ><ui-icon-icon2
             :name="selectedLang?.iconName"
             :height="props.size === 'md' ? '16' : '13'"
             :width="props.size === 'md' ? '24' : '19'"
-        ></ui-icon-icon2
+          ></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'"
+            :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>
@@ -36,21 +36,21 @@
 
 <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'
+// import { findInLocals } from '~/components/common/selectLanguage/lib/utils/utils'
 
 const props = withDefaults(
-    defineProps<{
-      normalizeLang: UI_I_Dropdown[]
-      modelValue: UI_I_Dropdown
-      disabled?: boolean
-      width?: string
-      size?: 'sm' | 'md'
-    }>(),
-    {
-      disabled: false,
-      width: '114px',
-      size: 'md',
-    }
+  defineProps<{
+    normalizeLang: UI_I_Dropdown[]
+    modelValue: UI_I_Dropdown
+    disabled?: boolean
+    width?: string
+    size?: 'sm' | 'md'
+  }>(),
+  {
+    disabled: false,
+    width: '114px',
+    size: 'md',
+  }
 )
 
 const emits = defineEmits<{
@@ -67,7 +67,7 @@ const selectedLang = computed<UI_I_Dropdown>({
 })
 
 const itemsLocal = computed(() => {
-  return props.normalizeLang.filter(lang => !lang.disabled)
+  return props.normalizeLang.filter((lang) => !lang.disabled)
 })
 </script>
 

package/components/common/spiceConsole/Drawer.vue

@@ -6,10 +6,10 @@
   >
     <div
       v-if="!isShow"
+      :style="`top: ${y}px;`"
       ref="grab"
       data-id="spice-console-drawer-toggle"
       class="vmw-drawer__open"
-      :style="`top: ${y}px;`"
       @click="toggleDrawer"
     >
       <atoms-the-icon name="arrow" class="vmw-drawer__open-icon" />

package/components/common/spiceConsole/SpiceConsole.vue

@@ -21,8 +21,8 @@ const props = defineProps<{
 }>()
 
 let rfb: any
-const vmScreen = ref(null)
-const fullScreen = ref(null)
+const vmScreen = ref<any>(null)
+const fullScreen = ref<any>(null)
 const { toggle } = useFullscreen(fullScreen)
 
 const connectWS = (): void => {
@@ -52,7 +52,7 @@ const onSendAltCommand = (): void => {
   window.app.sendCtrlAltDelete()
 }
 
-const onConsoleScroll = (event): void => {
+const onConsoleScroll = (event: any): void => {
   app.clientGui.setClientOffset(
     app.clientGui.clientOffsetX,
     event.target.scrollTop

package/components/common/spiceConsole/keyboard/Keyboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="keyboard-draggable" ref="draggable" class="draggable" :style="style">
+  <div id="keyboard-draggable" :style="style" ref="draggable" class="draggable">
     <div id="keyboard" class="keyboard">
       <div
         v-for="(row, rowIndex) in keyboardRowsUI"
@@ -34,7 +34,7 @@
 <script setup lang="ts">
 import { useDraggable } from '@vueuse/core'
 import keyboardRows from '~/components/common/spiceConsole/keyboard/lib/config/keyboardRows'
-import { I_KeyboardRowItem } from '~/components/common/spiceConsole/keyboard/lib/models/interfaces'
+import type { UI_I_KeyboardRowItem } from '~/components/common/spiceConsole/keyboard/lib/models/interfaces'
 
 const draggable = ref<HTMLElement | null>(null)
 
@@ -68,9 +68,9 @@ const isShiftPressedWithoutCapsLock = computed<boolean>(
   () => !isCapsLockOn.value && isShiftPressed.value
 )
 
-const keyboardRowsUI = computed<I_KeyboardRowItem[][]>(() =>
-  keyboardRows.map((row: I_KeyboardRowItem[]) =>
-    row.map((keyItem: I_KeyboardRowItem) => {
+const keyboardRowsUI = computed<UI_I_KeyboardRowItem[][]>(() =>
+  keyboardRows.map((row: UI_I_KeyboardRowItem[]) =>
+    row.map((keyItem: UI_I_KeyboardRowItem) => {
       let rusKeyUI = ''
       let keyUI = ''
 
@@ -177,7 +177,7 @@ const takeOnAlt = (): void => {
 
 const generateEvent = (
   event: string,
-  key: I_KeyboardRowItem,
+  key: UI_I_KeyboardRowItem,
   withOriginal: boolean,
   type?: string
 ): void => {
@@ -204,7 +204,7 @@ const generateEvent = (
 const keyEvent = (
   event: string,
   isCodeEvent: boolean,
-  key: I_KeyboardRowItem
+  key: UI_I_KeyboardRowItem
 ): void => {
   if (isCodeEvent) {
     if (event !== 'keyup') {
@@ -250,7 +250,7 @@ const checkAndOffModifiers = (): void => {
   }
 }
 
-const onKeyPress = (key: I_KeyboardRowItem): void => {
+const onKeyPress = (key: UI_I_KeyboardRowItem): void => {
   window.app.inputProcess.clientGui.inputManager.input.val('')
 
   document.getElementById('inputmanager')?.focus()

package/components/common/spiceConsole/keyboard/lib/config/keyboardRows.ts

@@ -1,6 +1,6 @@
-import { I_KeyboardRowItem } from '~/components/common/spiceConsole/keyboard/lib/models/interfaces'
+import type { UI_I_KeyboardRowItem } from '~/components/common/spiceConsole/keyboard/lib/models/interfaces'
 
-const keyboardRows: I_KeyboardRowItem[][] = [
+const keyboardRows: UI_I_KeyboardRowItem[][] = [
   [
     {
       name: 'Esc',

package/components/common/spiceConsole/keyboard/lib/models/interfaces.ts

@@ -1,4 +1,4 @@
-export interface I_KeyboardRowItem {
+export interface UI_I_KeyboardRowItem {
   name: string
   key: string | number
   value: string

package/components/common/split/horizontal/HorizontalNew.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { isRtl } from 'bfg-uikit/lib/config/trl'
+import { isRtl } from '~/node_modules/bfg-uikit/lib/config/trl'
 
 const props = withDefaults(
   defineProps<{
@@ -70,7 +70,7 @@ const emits = defineEmits<{
   (event: 'dragend', value: number): void
 }>()
 
-const leftPanelStyle = computed(() => {
+const leftPanelStyle = computed<any>(() => {
   let width = `calc(${leftPanelWLocal.value}% - 1.5px)`
   if (isRtl.value) {
     width = `calc(${100 - leftPanelWLocal.value}% - 1.5px)`
@@ -83,7 +83,7 @@ const leftPanelStyle = computed(() => {
   return { width }
 })
 
-const rightPanelStyle = computed(() => {
+const rightPanelStyle = computed<any>(() => {
   let width = `calc(${100 - leftPanelWLocal.value}% - 1.5px)`
   if (isRtl.value) {
     width = `calc(${leftPanelWLocal.value}% - 1.5px)`
@@ -136,12 +136,12 @@ const mouseup = (): void => {
   emits('dragend', leftPanelWLocal.value)
 }
 
-let mousemove = (e: MouseEvent): void => {
+let mousemove = (event: MouseEvent): void => {
   if (!isGrab.value) return
 
-  e.preventDefault()
+  event.preventDefault()
   isDrag.value = true
-  doDrag(e.clientX)
+  doDrag(event.clientX)
 }
 mousemove = useThrottle(mousemove)
 
@@ -161,7 +161,7 @@ const doDrag = (clientX: number): void => {
 
 const elementId = `horizontal${useUniqueId()}`
 
-const keydown = (e: KeyboardEvent): void => {
+const keydown = (event: KeyboardEvent): void => {
   if (!isFocus.value) return
 
   const gutter = document.getElementById(`gutter-${elementId}`)
@@ -170,10 +170,10 @@ const keydown = (e: KeyboardEvent): void => {
 
   const gutterLeft = ~~(gutter.getBoundingClientRect().left + 1.5)
 
-  if (e.keyCode === 39) {
+  if (event.keyCode === 39) {
     doDrag(gutterLeft + 10)
   }
-  if (e.keyCode === 37) {
+  if (event.keyCode === 37) {
     doDrag(gutterLeft - 10)
   }
 }

package/components/common/split/horizontal/HorizontalOld.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { isRtl } from 'bfg-uikit/lib/config/trl'
+import { isRtl } from '~/node_modules/bfg-uikit/lib/config/trl'
 
 const props = withDefaults(
   defineProps<{
@@ -66,7 +66,7 @@ const emits = defineEmits<{
   (event: 'dragend', value: number): void
 }>()
 
-const leftPanelStyle = computed(() => {
+const leftPanelStyle = computed<any>(() => {
   let width = `calc(${leftPanelW.value}% - 1.5px)`
   if (isRtl.value) {
     width = `calc(${100 - leftPanelW.value}% - 1.5px)`
@@ -78,7 +78,7 @@ const leftPanelStyle = computed(() => {
 
   return { width }
 })
-const rightPanelStyle = computed(() => {
+const rightPanelStyle = computed<any>(() => {
   let width = `calc(${100 - leftPanelW.value}% - 1.5px)`
   if (isRtl.value) {
     width = `calc(${leftPanelW.value}% - 1.5px)`
@@ -129,12 +129,12 @@ const mouseup = (): void => {
   emits('dragend', leftPanelW.value)
 }
 
-let mousemove = (e: MouseEvent): void => {
+let mousemove = (event: MouseEvent): void => {
   if (!isGrab.value) return
 
-  e.preventDefault()
+  event.preventDefault()
   isDrag.value = true
-  doDrag(e.clientX)
+  doDrag(event.clientX)
 }
 mousemove = useThrottle(mousemove)
 
@@ -154,7 +154,7 @@ const doDrag = (clientX: number): void => {
 
 const elementId = `horizontal${useUniqueId()}`
 
-const keydown = (e: KeyboardEvent): void => {
+const keydown = (event: KeyboardEvent): void => {
   if (!isFocus.value) return
 
   const gutter = document.getElementById(`gutter-${elementId}`)
@@ -163,10 +163,10 @@ const keydown = (e: KeyboardEvent): void => {
 
   const gutterLeft = ~~(gutter.getBoundingClientRect().left + 1.5)
 
-  if (e.keyCode === 39) {
+  if (event.keyCode === 39) {
     doDrag(gutterLeft + 10)
   }
-  if (e.keyCode === 37) {
+  if (event.keyCode === 37) {
     doDrag(gutterLeft - 10)
   }
 }

package/components/common/split/vertical/Vertical.vue

@@ -39,18 +39,21 @@
 <script setup lang="ts">
 import type { UI_I_SplitVerticalStyle } from '~/components/common/split/vertical/lib/models/interfaces'
 
-const props = withDefaults(defineProps<{
-  parentElementSelector: string
-  topPanelHForce?: string
-  topPanelH?: number
-  topPanelMinHeight?: number
-  bottomPanelMinHeight?: number
-}>(), {
-  topPanelMinHeight: 200, // 200px
-  bottomPanelMinHeight: 200, // 200px
-  topPanelHForce: '',
-  topPanelH: undefined,
-})
+const props = withDefaults(
+  defineProps<{
+    parentElementSelector: string
+    topPanelHForce?: string
+    topPanelH?: number
+    topPanelMinHeight?: number
+    bottomPanelMinHeight?: number
+  }>(),
+  {
+    topPanelMinHeight: 200, // 200px
+    bottomPanelMinHeight: 200, // 200px
+    topPanelHForce: '',
+    topPanelH: undefined,
+  }
+)
 const emits = defineEmits<{
   (event: 'dragend', value: number): void
 }>()
@@ -96,15 +99,15 @@ const mouseup = (): void => {
 
   emits('dragend', topPanelH.value)
 }
-let mousemove = (e: MouseEvent): void => {
+let mousemove = (event: MouseEvent): void => {
   if (!isGrab.value) {
     return
   }
 
-  e.preventDefault()
+  event.preventDefault()
   isDrag.value = true
 
-  doDrag(e.clientY)
+  doDrag(event.clientY)
 }
 mousemove = useThrottle(mousemove)
 
@@ -125,7 +128,7 @@ const doDrag = (clientY: number): void => {
 }
 
 const elementId = `vertical${useUniqueId()}`
-const keydown = (e: KeyboardEvent): void => {
+const keydown = (event: KeyboardEvent): void => {
   if (!isFocus.value) return
 
   const gutter = document.getElementById(`gutter-${elementId}`)
@@ -134,10 +137,10 @@ const keydown = (e: KeyboardEvent): void => {
 
   const gutterTop = ~~(gutter.getBoundingClientRect().top + 1.5)
 
-  if (e.keyCode === 40) {
+  if (event.keyCode === 40) {
     doDrag(gutterTop + 10)
   }
-  if (e.keyCode === 38) {
+  if (event.keyCode === 38) {
     doDrag(gutterTop - 10)
   }
 }
@@ -156,5 +159,4 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>

package/components/common/split/vertical/VerticalNew.vue

@@ -1,6 +1,9 @@
 <template>
-  <div :id="props.elementId" :class="['fill-parent vertical', { dragging: props.isDrag }]">
-    <div class="vui-horizontal-panel firstPanel" :style="props.topPanelStyle">
+  <div
+    :id="props.elementId"
+    :class="['fill-parent vertical', { dragging: props.isDrag }]"
+  >
+    <div :style="props.topPanelStyle" class="vui-horizontal-panel firstPanel">
       <div class="vui-horizontal-panel sec-nav-container">
         <slot name="firstPanel" />
       </div>
@@ -17,7 +20,7 @@
       <div class="gutter-vertical-handler"></div>
     </div>
 
-    <div class="secondPanel bottom" :style="props.bottomPanelStyle">
+    <div :style="props.bottomPanelStyle" class="secondPanel bottom">
       <slot name="secondPanel" />
     </div>
   </div>
@@ -37,12 +40,12 @@ const props = defineProps<{
 
 <style>
 :root {
-  --gutter-handler-active-bg-color: #FFFFFFCC;
-  --second-panel-box-shadow: 0 4px 20px 0 #0000001F;
+  --gutter-handler-active-bg-color: #ffffffcc;
+  --second-panel-box-shadow: 0 4px 20px 0 #0000001f;
 }
 :root.dark-theme {
-  --gutter-handler-active-bg-color: #213444CC;
-  --second-panel-box-shadow: 0 4px 20px 0 #0000001F, 0 -1px 12px 0 #00000014;
+  --gutter-handler-active-bg-color: #213444cc;
+  --second-panel-box-shadow: 0 4px 20px 0 #0000001f, 0 -1px 12px 0 #00000014;
 }
 </style>
 

package/components/common/split/vertical/VerticalOld.vue

@@ -1,18 +1,21 @@
 <template>
-  <div :id="props.elementId" :class="['fill-parent vertical', { dragging: props.isDrag }]">
-    <div class="vui-horizontal-panel firstPanel" :style="props.topPanelStyle">
+  <div
+    :id="props.elementId"
+    :class="['fill-parent vertical', { dragging: props.isDrag }]"
+  >
+    <div :style="props.topPanelStyle" class="vui-horizontal-panel firstPanel">
       <div class="vui-horizontal-panel sec-nav-container">
         <slot name="firstPanel" />
       </div>
     </div>
 
     <div
-        :id="`gutter-${props.elementId}`"
-        class="gutter gutter-vertical"
-        tabindex="0"
-        @mousedown="isGrab = true"
-        @focus="isFocus = true"
-        @blur="isFocus = false"
+      :id="`gutter-${props.elementId}`"
+      class="gutter gutter-vertical"
+      tabindex="0"
+      @mousedown="isGrab = true"
+      @focus="isFocus = true"
+      @blur="isFocus = false"
     >
       <div class="gutter-vertical-handler"></div>
     </div>

package/components/common/summary/notification/NotificationOld.vue

@@ -1,9 +1,9 @@
 <template>
   <atoms-alert
     v-show="props.notifications.length"
+    :items="props.notifications"
     test-id="summary-notification"
     status="alert-warning"
-    :items="props.notifications"
     hide-close-icon
     class="notification"
   >
@@ -29,10 +29,11 @@
 </template>
 
 <script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
 const props = defineProps<{
   notifications: string[]
 }>()
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 </script>

package/components/common/titleBar/titleBarNew/notification/Notification.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="notification-content">
     <ui-button
+      :class="{ active: isShowNotificationDropdown }"
       test-id="notification-toggle"
       is-without-sizes
       is-without-height
       variant="text"
-      :class="{ active: isShowNotificationDropdown }"
       @click="isShowNotificationDropdown = !isShowNotificationDropdown"
     >
       <ui-icon name="notification" width="18" height="18" />
     </ui-button>
     <ui-popup-window
       v-model="isShowNotificationDropdown"
+      :margin-between-trigger="8"
       elem-id="notification-toggle"
       width="382px"
       max-height="410px"
-      :margin-between-trigger="8"
     >
       <div class="notification-body">
         <div class="top-content grid items-center">
@@ -32,8 +32,8 @@
         <div class="tabs-content">
           <ui-tabs
             v-model="selectedTab"
-            test-id="notifications-tab-list"
             :tabs="tabs"
+            test-id="notifications-tab-list"
             type="underline"
           >
             <template #default="{ item }">
@@ -77,8 +77,8 @@
                 @click="onToggleActionDropdown(key)"
               >
                 <atoms-the-icon
-                  name="ellipsis-vertical"
                   :class="['action-icon', { active: actionsIsShow[key] }]"
+                  name="ellipsis-vertical"
                 />
               </ui-button>
               <template v-if="item.actions.length">

package/components/common/tools/Actions.vue

@@ -2,8 +2,8 @@
   <!--  :style="{ 'padding-right': rightSpace + 'px' }"-->
   <div
     :id="id"
-    class="btn-group"
     :style="{ paddingRight: spaceForCollapseBtn + 'px' }"
+    class="btn-group"
   >
     <div v-for="(button, key) in props.actions" :key="button.type">
       <label v-if="button.uploaded" v-development="button.development">
@@ -17,9 +17,9 @@
         <input
           :id="`select-file-button-${key}`"
           :data-id="button.testId"
-          type="file"
           :disabled="button.disabled"
           :multiple="button?.multiple || false"
+          type="file"
           class="btn-group__file"
           @change="(event) => onSelectFiles(event, button.type, key)"
         />
@@ -42,8 +42,8 @@
       v-show="collapsedItems.length"
       :test-id="`${props.testId}-item`"
       :items="collapsedItems"
-      close-after-click
       class="nav-tabs"
+      close-after-click
       @change="onClickButton"
       @select-file="onSelectFiles"
     />
@@ -125,7 +125,6 @@ watch(
 //   { deep: true }
 // )
 
-
 const spaceForCollapseBtn = ref<number>(65)
 const outputSize = (): void => {
   const el = document.getElementById(id.value)

package/components/common/vm/actions/common/customizeHardware/CustomizeHardware.vue

@@ -140,6 +140,7 @@ import type {
   UI_I_PciDevice,
 } from '~/lib/models/store/vm/interfaces'
 import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
 import { navItemsFunc } from '~/components/common/vm/actions/common/customizeHardware/lib/config/navItems'
 
 const vmName = defineModel<string>('vmName', { required: true })
@@ -201,7 +202,7 @@ const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const navItems = computed<UI_I_TabItem[]>(() =>
+const navItems = computed<UI_I_CollapseNavItem[]>(() =>
   navItemsFunc(localization.value)
 )
 const selectedNavItemLocal = ref<number>(0)