bfg-common 1.5.82 → 1.5.84

package/components/common/vm/actions/editSettings/new/New.vue

@@ -1,179 +1,185 @@
-<template>
-  <div class="edit-vm">
-    <ui-modal
-      show
-      test-id="edit-vm-wizard"
-      size="sm"
-      width="720px"
-      :title="localization.common.editSettings"
-      :subtitle="props.vmNameOld"
-      :texts="modalTextsLocal"
-      :is-disabled-accept="props.loading"
-      @submit="emits('validate')"
-      @hide="emits('hide')"
-    >
-      <template #content>
-        <common-vm-actions-edit-settings-new-skeleton
-          v-if="!vmSettings || props.loading"
-        />
-
-        <div v-else class="vm-context">
-          <common-vm-actions-common-customize-hardware
-            v-model:vm-name="vmName"
-            v-model:guest-machine-type="vmSettings.guestMachineType"
-            v-model:guest-os-family="vmSettings.guestOsFamily"
-            v-model:guest-os-version="vmSettings.guestOsVersion"
-            :project="props.project"
-            :storage="vmSettings.storage"
-            :hard-disks-for-boot-options="props.virtualHardwareHardDisks"
-            :cd-dvd-drives-for-boot-options="props.virtualHardwareCdDvdDrives"
-            :networks-for-boot-options="props.virtualHardwareNetworks"
-            :cd-dvd-drives="vmSettings.cdDvdDrives"
-            :hard-disks="vmSettings.hardDisks"
-            :networks="vmSettings.networks"
-            :max-cpus="vmSettings.maxCpus"
-            :max-memory="vmSettings.maxMemory"
-            :cpu-models="vmSettings.cpuModels"
-            :cpu="vmSettings.cpu"
-            :memory="vmSettings.memory"
-            :video-card="vmSettings.videoCard"
-            :usb-controller="vmSettings.usbController"
-            :pci-devices="vmSettings.pciDevices"
-            :selected-nav-item="props.selectedNavItem"
-            :hard-disks-for-edit="vmSettings.hardDisks"
-            :options="vmSettings.options"
-            :nodes="props.nodes"
-            :files="props.files"
-            :networks-table="props.networksTable"
-            :error-validation-fields="props.errorValidationFields"
-            :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
-            :passthrough-devices="props.passthroughDevices"
-            :mediated-devices="props.mediatedDevices"
-            :state="props.state"
-            :get-datastore-table-func="props.getDatastoreTableFunc"
-            :datastore="props.datastore"
-            :customize-hardware-submit="props.customizeHardwareSubmit"
-            is-edit
-            @get-storage="emits('get-storage', $event)"
-            @get-folders-or-files="emits('get-folders-or-files', $event)"
-            @get-active-device-child="emits('get-active-device-child', $event)"
-            @show-datastore-child="emits('show-datastore-child', $event)"
-            @get-networks-table="emits('get-networks-table', $event)"
-            @get-pci-devices="emits('get-pci-devices')"
-            @change-boot-order="emits('change-boot-order', $event)"
-            @send-data="emits('change-customize-hardware', $event)"
-          />
-        </div>
-      </template>
-
-      <template #footerLeftContent><span></span></template>
-    </ui-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
-import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
-import type {
-  UI_I_PciDevice,
-  UI_I_VmSettings,
-} from '~/lib/models/store/vm/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_SendDataCustomizeHardware } from '~/components/common/vm/actions/common/customizeHardware/lib/models/interfaces'
-import type {
-  UI_I_SendDataNewCdDvdDrive,
-  UI_I_SendDataNewHardDisk,
-  UI_I_SendDataNewNetwork,
-} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
-import type { UI_T_SelectedNavItem } from '~/components/common/vm/actions/common/lib/models/types'
-import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
-import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
-import type {
-  UI_I_DatastoreTableItem,
-  UI_I_FolderOrFileTreePayload,
-} from '~/lib/models/store/storage/interfaces'
-import type { UI_T_ChangeBootOrder } from '~/components/common/vm/actions/lib/models/types'
-import { modalTexts } from '~/components/common/vm/actions/editSettings/lib/config/modal'
-
-const vmName = defineModel<string>('vmName', { required: true })
-
-const vmSettings = defineModel<UI_I_VmSettings | null>('vmSettings', {
-  required: true,
-})
-
-const props = defineProps<{
-  nodes: UI_I_FileTreeNode[]
-  files: UI_I_FileTreeNode[]
-  project: UI_T_Project
-  loading: boolean
-  datastore: UI_I_DatastoreTableItem[]
-  networksTable: UI_I_NetworkTableItem[]
-  selectedNavItem: UI_T_SelectedNavItem
-  vmCpuHelpTextSecond: string
-  errorValidationFields: UI_I_ErrorValidationField<string>[]
-  virtualHardwareNetworks: UI_I_SendDataNewNetwork[] | null
-  virtualHardwareHardDisks: UI_I_SendDataNewHardDisk[] | null
-  virtualHardwareCdDvdDrives: UI_I_SendDataNewCdDvdDrive[] | null
-  state?: string | number
-  vmNameOld?: string
-  passthroughDevices?: UI_I_PciDevice[]
-  mediatedDevices?: any[]
-  getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
-  customizeHardwareSubmit?: null | Function
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'validate'): void
-  (event: 'update-vm'): void
-  (event: 'get-storage', value: UI_I_TablePayload): void
-  (event: 'get-pci-devices'): void
-  (event: 'change-boot-order', value: UI_T_ChangeBootOrder): void
-  (event: 'get-networks-table', value: UI_I_TablePayload): void
-  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
-  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
-  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
-  (
-    event: 'change-customize-hardware',
-    value: UI_I_SendDataCustomizeHardware
-  ): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const modalTextsLocal = computed<UI_I_ModalTexts>(() =>
-  modalTexts(localization.value)
-)
-</script>
-
-<style>
-:root {
-  --vm-wizard-sub-title: #4d5d69;
-  --vm-wizard-title-circle: #9da6ad;
-}
-:root.dark-theme {
-  --vm-wizard-sub-title: #9da6ad;
-  --vm-wizard-title-circle: #4d5d69;
-}
-</style>
-<style scoped lang="scss">
-:deep(.modal-header h3) {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-.circle {
-  width: 4px;
-  height: 4px;
-  background-color: var(--vm-wizard-title-circle);
-  border-radius: 50px;
-}
-.sub-title {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 16.94px;
-  color: var(--vm-wizard-sub-title);
-}
-</style>
+<template>
+  <div class="edit-vm">
+    <ui-modal
+      show
+      test-id="edit-vm-wizard"
+      size="sm"
+      width="720px"
+      :title="localization.common.editSettings"
+      :subtitle="props.vmNameOld"
+      :texts="modalTextsLocal"
+      :is-disabled-accept="props.loading"
+      @submit="emits('validate')"
+      @hide="emits('hide')"
+    >
+      <template #content>
+        <common-vm-actions-edit-settings-new-skeleton
+          v-if="!vmSettings || props.loading"
+        />
+
+        <div v-else class="vm-context">
+          <common-vm-actions-common-customize-hardware
+            v-model:vm-name="vmName"
+            v-model:guest-machine-type="vmSettings.guestMachineType"
+            v-model:guest-os-family="vmSettings.guestOsFamily"
+            v-model:guest-os-version="vmSettings.guestOsVersion"
+            :project="props.project"
+            :storage="vmSettings.storage"
+            :hard-disks-for-boot-options="props.virtualHardwareHardDisks"
+            :cd-dvd-drives-for-boot-options="props.virtualHardwareCdDvdDrives"
+            :networks-for-boot-options="props.virtualHardwareNetworks"
+            :cd-dvd-drives="vmSettings.cdDvdDrives"
+            :hard-disks="vmSettings.hardDisks"
+            :networks="vmSettings.networks"
+            :max-cpus="vmSettings.maxCpus"
+            :max-memory="vmSettings.maxMemory"
+            :cpu-models="vmSettings.cpuModels"
+            :cpu="vmSettings.cpu"
+            :memory="vmSettings.memory"
+            :video-card="vmSettings.videoCard"
+            :usb-controller="vmSettings.usbController"
+            :pci-devices="vmSettings.pciDevices"
+            :selected-nav-item="props.selectedNavItem"
+            :hard-disks-for-edit="vmSettings.hardDisks"
+            :options="vmSettings.options"
+            :nodes="props.nodes"
+            :files="props.files"
+            :networks-table="props.networksTable"
+            :error-validation-fields="props.errorValidationFields"
+            :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
+            :passthrough-devices="props.passthroughDevices"
+            :mediated-devices="props.mediatedDevices"
+            :state="props.state"
+            :get-datastore-table-func="props.getDatastoreTableFunc"
+            :datastore="props.datastore"
+            :customize-hardware-submit="props.customizeHardwareSubmit"
+            is-edit
+            @get-storage="emits('get-storage', $event)"
+            @get-folders-or-files="emits('get-folders-or-files', $event)"
+            @get-active-device-child="emits('get-active-device-child', $event)"
+            @show-datastore-child="emits('show-datastore-child', $event)"
+            @get-networks-table="emits('get-networks-table', $event)"
+            @get-pci-devices="emits('get-pci-devices')"
+            @change-boot-order="emits('change-boot-order', $event)"
+            @send-data="emits('change-customize-hardware', $event)"
+          />
+        </div>
+      </template>
+
+      <template #footerLeftContent><span></span></template>
+    </ui-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type {
+  UI_I_PciDevice,
+  UI_I_VmSettings,
+} from '~/lib/models/store/vm/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SendDataCustomizeHardware } from '~/components/common/vm/actions/common/customizeHardware/lib/models/interfaces'
+import type {
+  UI_I_SendDataNewCdDvdDrive,
+  UI_I_SendDataNewHardDisk,
+  UI_I_SendDataNewNetwork,
+} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
+import type { UI_T_SelectedNavItem } from '~/components/common/vm/actions/common/lib/models/types'
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+import type {
+  UI_I_DatastoreTableItem,
+  UI_I_FolderOrFileTreePayload,
+} from '~/lib/models/store/storage/interfaces'
+import type { UI_T_ChangeBootOrder } from '~/components/common/vm/actions/lib/models/types'
+import { modalTexts } from '~/components/common/vm/actions/editSettings/lib/config/modal'
+
+const vmName = defineModel<string>('vmName', { required: true })
+
+const vmSettings = defineModel<UI_I_VmSettings | null>('vmSettings', {
+  required: true,
+})
+
+const props = defineProps<{
+  nodes: UI_I_FileTreeNode[]
+  files: UI_I_FileTreeNode[]
+  project: UI_T_Project
+  loading: boolean
+  datastore: UI_I_DatastoreTableItem[]
+  networksTable: UI_I_NetworkTableItem[]
+  selectedNavItem: UI_T_SelectedNavItem
+  vmCpuHelpTextSecond: string
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+  virtualHardwareNetworks: UI_I_SendDataNewNetwork[] | null
+  virtualHardwareHardDisks: UI_I_SendDataNewHardDisk[] | null
+  virtualHardwareCdDvdDrives: UI_I_SendDataNewCdDvdDrive[] | null
+  state?: string | number
+  vmNameOld?: string
+  passthroughDevices?: UI_I_PciDevice[]
+  mediatedDevices?: any[]
+  getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
+  customizeHardwareSubmit?: null | Function
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'validate'): void
+  (event: 'update-vm'): void
+  (event: 'get-storage', value: UI_I_TablePayload): void
+  (event: 'get-pci-devices'): void
+  (event: 'change-boot-order', value: UI_T_ChangeBootOrder): void
+  (event: 'get-networks-table', value: UI_I_TablePayload): void
+  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
+  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
+  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
+  (
+    event: 'change-customize-hardware',
+    value: UI_I_SendDataCustomizeHardware
+  ): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTextsLocal = computed<UI_I_ModalTexts>(() =>
+  modalTexts(localization.value)
+)
+</script>
+
+<!--<style>-->
+<!--:root {-->
+<!--  &#45;&#45;vm-wizard-sub-title: #4d5d69;-->
+<!--  &#45;&#45;vm-wizard-title-circle: #9da6ad;-->
+<!--}-->
+<!--:root.dark-theme {-->
+<!--  &#45;&#45;vm-wizard-sub-title: #9da6ad;-->
+<!--  &#45;&#45;vm-wizard-title-circle: #4d5d69;-->
+<!--}-->
+<!--</style>-->
+<style scoped lang="scss">
+:deep(.modal-body) {
+  overflow: hidden;
+}
+:deep(.modal-header h3) {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.vm-context {
+  max-height: inherit;
+}
+//.circle {
+//  width: 4px;
+//  height: 4px;
+//  background-color: var(--vm-wizard-title-circle);
+//  border-radius: 50px;
+//}
+//.sub-title {
+//  font-size: 14px;
+//  font-weight: 500;
+//  line-height: 16.94px;
+//  color: var(--vm-wizard-sub-title);
+//}
+</style>

package/components/common/vm/actions/editSettings/new/Skeleton.vue

@@ -1,88 +1,88 @@
-<template>
-  <div class="skeleton-wrap">
-    <div class="tabs">
-      <ui-skeleton-item width="64px" height="16px" />
-      <ui-skeleton-item width="64px" height="16px" />
-    </div>
-    <div class="actions">
-      <ui-skeleton-item width="80px" height="16px" />
-      <ui-skeleton-item width="152px" height="32px" border-radius="6px" />
-    </div>
-    <div class="stack-block-wrap">
-      <div class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-
-      <div v-for="item in 2" :key="item" class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
-          <ui-skeleton-item width="80px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-
-      <div v-for="item in 5" :key="item" class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="196px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.skeleton-wrap {
-  padding: 0 32px;
-
-  .tabs {
-    display: flex;
-    align-items: center;
-    gap: 56px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid var(--divider-color);
-  }
-
-  .actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 12px 0;
-  }
-
-  .stack-block-wrap {
-    display: grid;
-    grid-gap: 12px;
-
-    .stack-block {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
-      background: var(--stack-block-bg-color);
-      border-radius: 6px;
-
-      .stack-label,
-      .stack-value {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="skeleton-wrap">
+    <div class="tabs">
+      <ui-skeleton-item width="64px" height="16px" />
+      <ui-skeleton-item width="64px" height="16px" />
+    </div>
+    <div class="actions">
+      <ui-skeleton-item width="80px" height="16px" />
+      <ui-skeleton-item width="152px" height="32px" border-radius="6px" />
+    </div>
+    <div class="stack-block-wrap">
+      <div class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+
+      <div v-for="item in 2" :key="item" class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
+          <ui-skeleton-item width="80px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+
+      <div v-for="item in 5" :key="item" class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="196px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.skeleton-wrap {
+  padding: 0 32px;
+
+  .tabs {
+    display: flex;
+    align-items: center;
+    gap: 56px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--divider-color);
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 12px 0;
+  }
+
+  .stack-block-wrap {
+    display: grid;
+    grid-gap: 12px;
+
+    .stack-block {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      background: var(--stack-block-bg-color);
+      border-radius: 6px;
+
+      .stack-label,
+      .stack-value {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+    }
+  }
+}
+</style>