bfg-common 1.5.435 → 1.5.436

package/components/common/vm/actions/add/New.vue

@@ -626,7 +626,7 @@ const isCompatibilityAlertWrapperEmpty = ref<boolean>(false)
   &.customize-hardware {
     height: inherit;
     max-height: 100%;
-    padding-bottom: 16px;
+    //padding-bottom: 16px;
 
     :deep(.tabs-wrapper) {
       overflow-y: auto;

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/CpuOld.vue

@@ -41,6 +41,7 @@
           </div>
 
           <common-vm-actions-common-customize-hardware-virtual-hardware-cpu-tooltip
+            v-model:selected-tooltip="selectedTooltip"
             :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
           />
         </div>
@@ -112,6 +113,7 @@
           v-model:cpu-model="cpuModel"
           v-model:passthrough-host-cpu="passthroughHostCpu"
           v-model:host-model-cpu="hostModelCpu"
+          v-model:selected-tooltip="selectedTooltip"
           :cpu-models="props.cpuModels"
           :is-edit="props.isEdit"
           :error-validation-fields="props.errorValidationFields"
@@ -180,6 +182,8 @@ const emits = defineEmits<{
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedTooltip = ref<string>('')
 </script>
 
 <style scoped lang="scss"></style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/model/Model.vue

@@ -16,6 +16,7 @@
     v-else
     v-model:passthrough-host-cpu="passthroughHostCpuLocal"
     v-model:host-model-cpu="hostModelCpuLocal"
+    v-model:selected-tooltip="selectedTooltip"
     :cpu-model="props.cpuModel"
     :cpu-model-options="cpuModelOptions"
     :disabled="props.disabled"
@@ -34,6 +35,8 @@ import type {
 import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 
+const selectedTooltip = defineModel<string>('selectedTooltip', { required: true })
+
 const props = defineProps<{
   cpuModel: string
   passthroughHostCpu: boolean

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/model/ModelOld.vue

@@ -57,13 +57,13 @@
                   height="24px"
                   name="info-circle"
                   class="cursor-pointer"
-                  @click.stop="isShowPassthroughHost = !isShowPassthroughHost"
+                  @click.stop="selectedTooltip = selectedTooltip === 'passthroughHostCpu' ? '' : 'passthroughHostCpu'"
                 />
                 <Teleport to="body">
                   <atoms-tooltip-signpost
-                    v-if="isShowPassthroughHost"
+                    v-if="selectedTooltip === 'passthroughHostCpu'"
                     elem-id="passthrough-help-icon"
-                    @hide="isShowPassthroughHost = false"
+                    @hide="selectedTooltip = ''"
                   >
                     <h3 class="passthrough-help-title">
                       {{ localization.mainNavigation.help }}
@@ -99,13 +99,13 @@
                   name="info-circle"
                   class="cursor-pointer"
                   data-id="show-host-model-help-icon"
-                  @click.stop="isShowHostModel = !isShowHostModel"
+                  @click.stop="selectedTooltip = selectedTooltip === 'hostModel' ? '' : 'hostModel'"
                 />
                 <Teleport to="body">
                   <atoms-tooltip-signpost
-                    v-if="isShowHostModel"
+                    v-if="selectedTooltip === 'hostModel'"
                     elem-id="host-model-help-icon"
-                    @hide="isShowHostModel = false"
+                    @hide="selectedTooltip = ''"
                   >
                     <h3 class="host-model-help-title">
                       {{ localization.mainNavigation.help }}
@@ -135,6 +135,7 @@ import type {
 } from '~/lib/models/interfaces'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 
+const selectedTooltip = defineModel<string>('selectedTooltip', { required: true })
 const passthroughHostCpu = defineModel<boolean>('passthroughHostCpu')
 const hostModelCpu = defineModel<boolean>('hostModelCpu')
 
@@ -153,8 +154,6 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const isShowPassthroughHost = ref<boolean>(false)
-const isShowHostModel = ref<boolean>(false)
 </script>
 
 <style scoped lang="scss">

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/tooltip/Tooltip.vue

@@ -5,11 +5,15 @@
   />
   <common-vm-actions-common-customize-hardware-virtual-hardware-cpu-tooltip-old
     v-else
+    v-model:selected-tooltip="selectedTooltip"
     :description="props.vmCpuHelpTextSecond"
   />
 </template>
 
 <script lang="ts" setup>
+
+const selectedTooltip = defineModel<string>('selectedTooltip', { required: true })
+
 const props = defineProps<{
   vmCpuHelpTextSecond: string
 }>()

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/tooltip/TooltipOld.vue

@@ -6,13 +6,13 @@
       height="24px"
       name="info-circle"
       data-id="show-cpu-help-icon"
-      @click.stop="isShowCpuHelp = !isShowCpuHelp"
+      @click.stop="selectedTooltip = selectedTooltip === 'cpu' ? '' : 'cpu'"
     />
     <Teleport to="body">
       <atoms-tooltip-signpost
-        v-if="isShowCpuHelp"
+        v-if="selectedTooltip === 'cpu'"
         elem-id="cpu-help-icon"
-        @hide="isShowCpuHelp = false"
+        @hide="selectedTooltip = ''"
       >
         <h3 class="cpu-help-title">
           {{ localization.mainNavigation.help }}
@@ -47,13 +47,13 @@
 <script lang="ts" setup>
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
+const selectedTooltip = defineModel<string>('selectedTooltip', { required: true })
 const props = defineProps<{
   description: string
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const isShowCpuHelp = ref<boolean>(false)
 </script>
 
 <style lang="scss" scoped></style>

package/components/common/vm/actions/common/select/compatibility/New.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="select-compatibility pt-4">
+  <div class="select-compatibility py-4">
     <Teleport to="#compatibility-alert-wrapper">
       <ui-alert
         v-show="props.apiError.length"
@@ -13,7 +13,7 @@
     <h3 class="select-compatibility-description pb-4">
       {{ props.description }}
     </h3>
-    <div class="version-select-wrap">
+    <div :class="['version-select-wrap', `elements-count-${versionsLocal.length}`]">
       <div
         v-for="item in versionsLocal"
         :key="item.value"
@@ -128,9 +128,13 @@ const versionsLocal = computed(() => {
 
   .version-select-wrap {
     display: grid;
-    grid-template-columns: repeat(3, 32.3%);
+    grid-template-columns: repeat(2, 50%);
     gap: 12px;
 
+    &.elements-count-3 {
+      grid-template-columns: repeat(3, 32.3%);
+    }
+
     .version-select {
       background-color: var(--select-compatibility-bg-color);
       box-shadow: inset 0 0 0 1px var(--select-compatibility-border-color);

package/components/common/vm/actions/common/select/name/Old.vue

@@ -107,6 +107,8 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   }
 }
 .content-signpost {
+  user-select: none;
+
   .icon-show-help {
     cursor: pointer;
   }

package/components/common/vm/actions/common/select/storage/new/New.vue

@@ -19,6 +19,7 @@
         :loading="props.isDatastoreLoading"
         :default-layout="false"
         :texts="tableTexts"
+        :skeleton="skeletonData"
         test-id="select-storage-data-table"
         server-off
         size="sm"
@@ -84,7 +85,10 @@
 </template>
 
 <script setup lang="ts">
-import type { UI_I_DataTableOptions } from 'bfg-uikit/components/ui/dataTable/models/interfaces'
+import type {
+  UI_I_DataTableOptions,
+  UI_I_DataTableSkeleton,
+} from 'bfg-uikit/components/ui/dataTable/models/interfaces'
 import type {
   UI_I_DataTable,
   UI_I_TableTexts,
@@ -169,6 +173,12 @@ const onSelectRow = (selectedData: UI_I_DataTable): void => {
 
   emits('change-storage', selectedItemIndex)
 }
+
+const skeletonData = ref<UI_I_DataTableSkeleton>({
+  columnsCount: 5,
+  headColumns: [],
+  bodyColumns: [],
+})
 </script>
 
 <style>

package/components/common/vmt/actions/add/New.vue

@@ -321,7 +321,7 @@ const isStorageAlertWrapperEmpty = ref<boolean>(false)
   &.customize-hardware {
     height: inherit;
     max-height: 100%;
-    padding-bottom: 16px;
+    //padding-bottom: 16px;
 
     :deep(.tabs-wrapper) {
       overflow-y: auto;

package/components/common/wizards/datastore/add/steps/hostAccessibility/HostAccessibilityNew.vue

@@ -48,6 +48,7 @@ const tabsLocal = computed<UI_I_CollapseNavItem[]>(() =>
 .host-accessibility {
   &__tab {
     padding: 16px 0;
+    overflow-x: auto;
   }
 }
 </style>

package/components/common/wizards/datastore/add/steps/hostAccessibility/table/new/New.vue

@@ -103,6 +103,12 @@ const onSelectRow = (value: UI_I_DataTableBody[]): void => {
 <style lang="scss" scoped>
 .host-accessibility-table {
   margin-bottom: 10px;
+  :deep(.column-manager-button.sm span) {
+    font-weight: 500;
+  }
+  :deep(.table-title .title-container h6) {
+    font-size: 12px;
+  }
   &__icon {
     margin-right: 4px;
   }

package/components/common/wizards/datastore/add/steps/nameAndDevice/table/new/New.vue

@@ -146,19 +146,14 @@ const onSelectRow = (value: UI_I_DataTableBody[]): void => {
 }
 </script>
 
-<style>
-:root {
-  --select-storage-border-color: #e9ebed;
-  --select-storage-bg-color: #ffffff;
-}
-:root.dark-theme {
-  --select-storage-border-color: #e9ebed1f;
-  --select-storage-bg-color: var(--wizard-right-bg);
-}
-</style>
-
 <style lang="scss" scoped>
 .device-table-container {
+  :deep(.column-manager-button.sm span) {
+    font-weight: 500;
+  }
+  :deep(.table-title .title-container h6) {
+    font-size: 12px;
+  }
   .device-table {
     &__icon {
       margin-right: 4px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.435",
+  "version": "1.5.436",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",