bfg-common 1.5.489 → 1.5.491

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (112) hide show
  1. package/CODE_STYLE.md +109 -109
  2. package/assets/img/icons/icons-sprite-dark-3.svg +227 -227
  3. package/assets/img/icons/icons-sprite-dark-5.svg +488 -488
  4. package/assets/img/icons/icons-sprite-light-3.svg +227 -227
  5. package/assets/img/icons/icons-sprite-light-5.svg +488 -488
  6. package/components/atoms/TheIcon3.vue +50 -50
  7. package/components/atoms/collapse/CollapseNav.vue +170 -170
  8. package/components/atoms/perPage/PerPage.vue +58 -58
  9. package/components/atoms/table/dataGrid/DataGridPagination.vue +97 -97
  10. package/components/atoms/table/dataGrid/lib/config/settingsTable.ts +94 -94
  11. package/components/atoms/table/dataGrid/lib/utils/export.ts +16 -16
  12. package/components/common/browse/blocks/contents/filesNew/Skeleton.vue +18 -18
  13. package/components/common/browse/blocks/lib/models/types.ts +1 -1
  14. package/components/common/browse/lib/models/interfaces.ts +5 -5
  15. package/components/common/context/lib/models/interfaces.ts +33 -33
  16. package/components/common/diagramMain/DiagramMain.vue +905 -905
  17. package/components/common/diagramMain/modals/remove/RemoveModalNew.vue +106 -106
  18. package/components/common/diagramMain/network/Contents.vue +497 -497
  19. package/components/common/layout/theHeader/helpMenu/About.vue +79 -79
  20. package/components/common/layout/theHeader/helpMenu/aboutOld/AboutOld.vue +79 -79
  21. package/components/common/pages/backups/DetailView.vue +52 -52
  22. package/components/common/pages/backups/lib/models/interfaces.ts +36 -36
  23. package/components/common/pages/backups/modals/Modals.vue +243 -243
  24. package/components/common/pages/backups/modals/createBackup/configuration/Configuration.vue +29 -29
  25. package/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/config/options.ts +6 -6
  26. package/components/common/pages/backups/modals/createBackup/datastores/tableView/TableView.vue +95 -95
  27. package/components/common/pages/backups/modals/createBackup/general/General.vue +141 -141
  28. package/components/common/pages/backups/modals/createBackup/lib/config/strategyOptions.ts +12 -12
  29. package/components/common/pages/backups/modals/lib/config/restore.ts +115 -115
  30. package/components/common/pages/backups/modals/lib/models/interfaces.ts +186 -186
  31. package/components/common/pages/backups/modals/restore/disks/Disks.vue +27 -27
  32. package/components/common/pages/backups/modals/restore/disks/tableView/lib/config/table.ts +117 -117
  33. package/components/common/pages/backups/modals/restore/name/Name.vue +166 -166
  34. package/components/common/pages/backups/modals/restore/name/lib/models/interfaces.ts +6 -6
  35. package/components/common/pages/backups/modals/restore/networks/Networks.vue +67 -67
  36. package/components/common/pages/backups/modals/restore/networks/table/Table.vue +214 -214
  37. package/components/common/pages/backups/modals/restore/types/lib/config/typeOptions.ts +25 -25
  38. package/components/common/pages/backups/tools/Tools.vue +75 -75
  39. package/components/common/pages/backups/tools/lib/config/tabs.ts +36 -36
  40. package/components/common/pages/home/lib/models/interfaces.ts +48 -48
  41. package/components/common/pages/home/widgets/hosts/Hosts.vue +27 -27
  42. package/components/common/pages/home/widgets/hosts/lib/config/items.ts +23 -23
  43. package/components/common/pages/home/widgets/vms/VmsOld.vue +35 -35
  44. package/components/common/pages/home/widgets/vms/lib/config/items.ts +19 -19
  45. package/components/common/pages/scheduledTasks/lib/utils/utils.ts +84 -84
  46. package/components/common/readyToComplete/ReadyToComplete.vue +17 -17
  47. package/components/common/select/radio/RadioGroup.vue +137 -137
  48. package/components/common/spiceConsole/Drawer.vue +392 -392
  49. package/components/common/spiceConsole/SpiceConsole.vue +184 -184
  50. package/components/common/spiceConsole/lib/models/interfaces.ts +5 -5
  51. package/components/common/tools/Actions.vue +207 -207
  52. package/components/common/treeView/TreeView.vue +52 -52
  53. package/components/common/vm/actions/add/Add.vue +877 -877
  54. package/components/common/vm/actions/add/New.vue +1 -1
  55. package/components/common/vm/actions/add/Old.vue +1 -1
  56. package/components/common/vm/actions/add/folderTreeView/FolderTreeView.vue +72 -72
  57. package/components/common/vm/actions/add/folderTreeView/New.vue +40 -40
  58. package/components/common/vm/actions/add/lib/config/steps.ts +347 -331
  59. package/components/common/vm/actions/clone/Clone.vue +1 -1
  60. package/components/common/vm/actions/clone/toTemplate/ToTemplate.vue +1 -1
  61. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/Cpu.vue +368 -368
  62. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/shares/Shares.vue +140 -140
  63. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/shares/lib/config/options.ts +28 -28
  64. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/location/Location.vue +154 -154
  65. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/location/new/table/Table.vue +99 -99
  66. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/macAddress/MacAddress.vue +119 -119
  67. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/DynamicDirectPathIo.vue +31 -31
  68. package/components/common/vm/actions/common/customizeHardware/virtualHardware/other/Other.vue +16 -16
  69. package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/numberDisplays/NumberDisplays.vue +53 -53
  70. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/delay/Delay.vue +32 -32
  71. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/firmware/Firmware.vue +60 -60
  72. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/Order.vue +174 -174
  73. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/keymap/Keymap.vue +32 -32
  74. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/Password.vue +103 -103
  75. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/usbRedirection/UsbRedirection.vue +28 -28
  76. package/components/common/vm/actions/common/select/compatibility/Old.vue +107 -107
  77. package/components/common/vm/actions/common/select/computeResource/ComputeResource.vue +143 -143
  78. package/components/common/vm/actions/common/select/computeResource/New.vue +184 -184
  79. package/components/common/vm/actions/common/select/computeResource/treeView/TreeView.vue +131 -131
  80. package/components/common/vm/actions/common/select/createType/CreateType.vue +38 -38
  81. package/components/common/vm/actions/common/select/createType/lib/models/interfaces.ts +5 -5
  82. package/components/common/vm/actions/common/select/name/Name.vue +200 -200
  83. package/components/common/vm/actions/common/select/name/New.vue +3 -4
  84. package/components/common/vm/actions/common/select/name/Old.vue +130 -131
  85. package/components/common/vm/actions/common/select/os/Old.vue +152 -152
  86. package/components/common/vm/actions/common/select/os/Os.vue +139 -139
  87. package/components/common/vm/actions/common/select/storage/new/New.vue +320 -320
  88. package/components/common/vm/actions/common/select/storage/new/lib/models/interfaces.ts +5 -5
  89. package/components/common/vm/actions/common/select/storage/new/lib/utils/utils.ts +21 -21
  90. package/components/common/vm/actions/common/select/template/old/Old.vue +50 -50
  91. package/components/common/vm/actions/editSettings/new/Skeleton.vue +88 -88
  92. package/components/common/vm/actions/register/Register.vue +267 -267
  93. package/components/common/vm/actions/register/lib/config/steps.ts +86 -86
  94. package/components/common/wizards/datastore/add/steps/typeMode/lib/config/typeOptions.ts +43 -43
  95. package/components/common/wizards/vm/migrate/select/network/Network.vue +103 -103
  96. package/composables/useAppVersion.ts +21 -21
  97. package/composables/useLocal.ts +6 -6
  98. package/composables/useLocalCommon.ts +39 -39
  99. package/package.json +1 -1
  100. package/plugins/date.ts +233 -233
  101. package/plugins/panelStates.ts +70 -70
  102. package/plugins/text.ts +59 -59
  103. package/public/spice-console/lib/images/bitmap.js +203 -203
  104. package/public/spice-console/network/spicechannel.js +440 -440
  105. package/public/spice-console/run.js +210 -210
  106. package/store/main/mutations.ts +7 -7
  107. package/store/main/state.ts +7 -7
  108. package/components/common/vmt/actions/add/Add.vue +0 -549
  109. package/components/common/vmt/actions/add/New.vue +0 -346
  110. package/components/common/vmt/actions/add/Old.vue +0 -305
  111. package/components/common/vmt/actions/add/lib/config/steps.ts +0 -107
  112. package/components/common/vmt/actions/add/lib/models/interfaces.ts +0 -23
@@ -1,131 +1,130 @@
1
- <template>
2
- <div class="select-name">
3
- <atoms-alert
4
- v-show="props.errors.length"
5
- :items="props.errors"
6
- status="alert-danger"
7
- test-id="name-alert"
8
- @remove="emits('remove-validation-errors')"
9
- />
10
-
11
- <form id="virtual-machine-form" @submit.prevent>
12
- <label for="virtual-machine-name">{{ localization.common.name }}:</label>
13
- <input
14
- id="virtual-machine-name"
15
- v-model.trim="vmName"
16
- data-id="virtual-machine-name-input"
17
- type="text"
18
- maxlength="54"
19
- />
20
- <div id="vm-name-help-icon" class="content-signpost relative">
21
- <atoms-the-icon
22
- data-id="show-vm-name-help-icon"
23
- class="icon-show-help"
24
- fill="#0072a3"
25
- width="24px"
26
- height="24px"
27
- name="info-circle"
28
- @click="isShowHelp = !isShowHelp"
29
- />
30
- <atoms-tooltip-signpost
31
- v-if="isShowHelp"
32
- test-id="help-signpost"
33
- elem-id="vm-name-help-icon"
34
- @hide="isShowHelp = false"
35
- >
36
- <p>
37
- {{ localization.common.vmNameValidationDescription }}
38
- </p>
39
- </atoms-tooltip-signpost>
40
- </div>
41
- </form>
42
-
43
- <template v-if="props.project === 'sphere'">
44
- <p class="new-vm-name-and-folder-instructions mt-1">
45
- {{ locationDescription }}
46
- </p>
47
- <div class="tree-view-wrap">
48
- <common-vm-actions-add-folder-tree-view
49
- :data-center="props.dataCenter"
50
- @select-node="emits('select-node', $event)"
51
- />
52
- </div>
53
- </template>
54
- </div>
55
- </template>
56
-
57
- <script setup lang="ts">
58
- // import { API_UI_I_Error } from '~/lib/models/store/interfaces'
59
- import type { UI_I_Localization } from '~/lib/models/interfaces'
60
- import type { UI_T_Project } from '~/lib/models/types'
61
- import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
62
-
63
- const vmName = defineModel<string>('vmName', { required: true })
64
- const isShowHelp = defineModel<boolean>('isShowHelp', { required: true })
65
-
66
- const props = withDefaults(
67
- defineProps<{
68
- project: UI_T_Project
69
- errors: string[]
70
- isVmt: boolean
71
- dataCenter?: UI_I_TreeNode // для сферы
72
- }>(),
73
- {
74
- dataCenter: undefined,
75
- }
76
- )
77
- const emits = defineEmits<{
78
- (event: 'remove-validation-errors'): void
79
- (event: 'select-node', value: UI_I_TreeNode): void
80
- }>()
81
-
82
- const localization = computed<UI_I_Localization>(() => useLocal())
83
-
84
- const locationDescription = computed<string>(() =>
85
- props.isVmt
86
- ? localization.value.vmt.selectLocationTemplate
87
- : localization.value.common.selectLocationVirtualMachine
88
- )
89
- </script>
90
-
91
- <style scoped lang="scss">
92
- .select-name {
93
- form {
94
- display: flex;
95
- align-items: center;
96
- padding-top: 20px;
97
-
98
- label {
99
- width: 216px;
100
- }
101
- input {
102
- width: 345px;
103
- }
104
- }
105
-
106
- .tree-view-wrap {
107
- position: relative;
108
- border: 1px solid #000;
109
- padding: 5px;
110
- max-height: 300px;
111
- min-height: 200px;
112
- overflow: auto;
113
- margin-bottom: 10px;
114
- }
115
- }
116
- .content-signpost {
117
- user-select: none;
118
-
119
- .icon-show-help {
120
- cursor: pointer;
121
- }
122
-
123
- .help-title {
124
- font-size: 22px;
125
- margin-bottom: 24px;
126
- }
127
- .signpost {
128
- max-width: 360px;
129
- }
130
- }
131
- </style>
1
+ <template>
2
+ <div class="select-name">
3
+ <atoms-alert
4
+ v-show="props.errors.length"
5
+ :items="props.errors"
6
+ status="alert-danger"
7
+ test-id="name-alert"
8
+ @remove="emits('remove-validation-errors')"
9
+ />
10
+
11
+ <form id="virtual-machine-form" @submit.prevent>
12
+ <label for="virtual-machine-name">{{ localization.common.name }}:</label>
13
+ <input
14
+ id="virtual-machine-name"
15
+ v-model.trim="vmName"
16
+ data-id="virtual-machine-name-input"
17
+ type="text"
18
+ maxlength="54"
19
+ />
20
+ <div id="vm-name-help-icon" class="content-signpost relative">
21
+ <atoms-the-icon
22
+ data-id="show-vm-name-help-icon"
23
+ class="icon-show-help"
24
+ fill="#0072a3"
25
+ width="24px"
26
+ height="24px"
27
+ name="info-circle"
28
+ @click="isShowHelp = !isShowHelp"
29
+ />
30
+ <atoms-tooltip-signpost
31
+ v-if="isShowHelp"
32
+ test-id="help-signpost"
33
+ elem-id="vm-name-help-icon"
34
+ @hide="isShowHelp = false"
35
+ >
36
+ <p>
37
+ {{ localization.common.vmNameValidationDescription }}
38
+ </p>
39
+ </atoms-tooltip-signpost>
40
+ </div>
41
+ </form>
42
+
43
+ <template v-if="props.hasLocation">
44
+ <p class="new-vm-name-and-folder-instructions mt-1">
45
+ {{ locationDescription }}
46
+ </p>
47
+ <div class="tree-view-wrap">
48
+ <common-vm-actions-add-folder-tree-view
49
+ :data-center="props.dataCenter"
50
+ @select-node="emits('select-node', $event)"
51
+ />
52
+ </div>
53
+ </template>
54
+ </div>
55
+ </template>
56
+
57
+ <script setup lang="ts">
58
+ // import { API_UI_I_Error } from '~/lib/models/store/interfaces'
59
+ import type { UI_I_Localization } from '~/lib/models/interfaces'
60
+ import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
61
+
62
+ const vmName = defineModel<string>('vmName', { required: true })
63
+ const isShowHelp = defineModel<boolean>('isShowHelp', { required: true })
64
+
65
+ const props = withDefaults(
66
+ defineProps<{
67
+ hasLocation: boolean
68
+ errors: string[]
69
+ isVmt: boolean
70
+ dataCenter?: UI_I_TreeNode | null // для сферы
71
+ }>(),
72
+ {
73
+ dataCenter: null,
74
+ }
75
+ )
76
+ const emits = defineEmits<{
77
+ (event: 'remove-validation-errors'): void
78
+ (event: 'select-node', value: UI_I_TreeNode): void
79
+ }>()
80
+
81
+ const localization = computed<UI_I_Localization>(() => useLocal())
82
+
83
+ const locationDescription = computed<string>(() =>
84
+ props.isVmt
85
+ ? localization.value.vmt.selectLocationTemplate
86
+ : localization.value.common.selectLocationVirtualMachine
87
+ )
88
+ </script>
89
+
90
+ <style scoped lang="scss">
91
+ .select-name {
92
+ form {
93
+ display: flex;
94
+ align-items: center;
95
+ padding-top: 20px;
96
+
97
+ label {
98
+ width: 216px;
99
+ }
100
+ input {
101
+ width: 345px;
102
+ }
103
+ }
104
+
105
+ .tree-view-wrap {
106
+ position: relative;
107
+ border: 1px solid #000;
108
+ padding: 5px;
109
+ max-height: 300px;
110
+ min-height: 200px;
111
+ overflow: auto;
112
+ margin-bottom: 10px;
113
+ }
114
+ }
115
+ .content-signpost {
116
+ user-select: none;
117
+
118
+ .icon-show-help {
119
+ cursor: pointer;
120
+ }
121
+
122
+ .help-title {
123
+ font-size: 22px;
124
+ margin-bottom: 24px;
125
+ }
126
+ .signpost {
127
+ max-width: 360px;
128
+ }
129
+ }
130
+ </style>
@@ -1,152 +1,152 @@
1
- <template>
2
- <div class="select-os">
3
- <p class="select-os-block">
4
- {{ localization.common.identifyingGuestSystemInstallation }}
5
- </p>
6
- <div class="select-os-block os-select-wrap table-row">
7
- <label for="machine-type-select" class="table-cell"
8
- >{{ localization.common.machineType }}:</label
9
- >
10
-
11
- <atoms-tooltip-error
12
- :has-error="!!props.apiErrorMachineType"
13
- selector="#vm-wizard-machine-type-select"
14
- @remove="emits('remove-error-by-title', 'machine_type')"
15
- >
16
- <template #elem>
17
- <select
18
- id="vm-wizard-machine-type-select"
19
- v-model="machineType"
20
- data-id="vm-wizard-machine-type-select"
21
- class="table-cell"
22
- >
23
- <option
24
- v-for="item in props.machineTypeOptions"
25
- :key="item.value"
26
- :value="item"
27
- >
28
- {{ item.text }}
29
- </option>
30
- </select>
31
- </template>
32
- <template #content>{{ props.apiErrorMachineType }}</template>
33
- </atoms-tooltip-error>
34
- </div>
35
- <div class="select-os-block os-select-wrap table-row">
36
- <label for="os-select" class="table-cell"
37
- >{{ localization.common.guestOsFamily }}:</label
38
- >
39
-
40
- <atoms-tooltip-error
41
- :has-error="!!props.apiErrorGuestOsFamily"
42
- selector="#vm-wizard-os-select"
43
- @remove="emits('remove-error-by-title', 'guest_os_family')"
44
- >
45
- <template #elem>
46
- <select
47
- id="vm-wizard-os-select"
48
- v-model="guestOsFamily"
49
- data-id="vm-wizard-os-select"
50
- class="table-cell"
51
- @change="emits('change-os')"
52
- >
53
- <option
54
- v-for="item in props.osOptions"
55
- :key="item.value"
56
- :value="item"
57
- >
58
- {{ item.text }}
59
- </option>
60
- </select>
61
- </template>
62
- <template #content>{{ props.apiErrorGuestOsFamily }}</template>
63
- </atoms-tooltip-error>
64
- </div>
65
- <div class="select-os-block os-select-wrap table-row">
66
- <label for="os-version-select" class="table-cell"
67
- >{{ localization.common.guestOsVersion }}:</label
68
- >
69
-
70
- <atoms-tooltip-error
71
- :has-error="!!props.apiErrorGuestOsVersion"
72
- selector="#vm-wizard-os-version-select"
73
- @remove="emits('remove-error-by-title', 'guest_os_version')"
74
- >
75
- <template #elem>
76
- <select
77
- id="vm-wizard-os-version-select"
78
- v-model="guestOsVersion"
79
- data-id="vm-wizard-os-version-select"
80
- class="table-cell"
81
- >
82
- <option
83
- v-for="item in props.versionsOptions"
84
- :key="item.value"
85
- :value="item"
86
- >
87
- {{ item.text }}
88
- </option>
89
- </select>
90
- </template>
91
- <template #content>{{ props.apiErrorGuestOsVersion }}</template>
92
- </atoms-tooltip-error>
93
- </div>
94
- </div>
95
- </template>
96
-
97
- <script setup lang="ts">
98
- import type { UI_I_Localization } from '~/lib/models/interfaces'
99
- import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
100
-
101
- const machineType = defineModel<UI_I_OptionItem | null>('machine-type', {
102
- required: true,
103
- })
104
- const guestOsFamily = defineModel<UI_I_OptionItem | null>('guest-os-family', {
105
- required: true,
106
- })
107
- const guestOsVersion = defineModel<UI_I_OptionItem | null>('guest-os-version', {
108
- required: true,
109
- })
110
-
111
- const props = defineProps<{
112
- apiErrorMachineType: string
113
- machineTypeOptions: UI_I_OptionItem[]
114
- apiErrorGuestOsFamily: string
115
- osOptions: UI_I_OptionItem[]
116
- apiErrorGuestOsVersion: string
117
- versionsOptions: UI_I_OptionItem[]
118
- }>()
119
- const emits = defineEmits<{
120
- (event: 'remove-error-by-title', value: string): void
121
- (event: 'change-os'): void
122
- }>()
123
- const localization = computed<UI_I_Localization>(() => useLocal())
124
- </script>
125
-
126
- <style scoped lang="scss">
127
- .select-os {
128
- .select-os-block {
129
- label:not(.windows-virtualization-label) {
130
- padding: 0 5px 5px 0;
131
- }
132
-
133
- .windows-virtualization-label {
134
- padding: 0 4px;
135
- }
136
- }
137
- }
138
-
139
- #os-select-help-icon {
140
- h3 {
141
- margin-top: 7px;
142
- font-size: 22px;
143
- color: #565656;
144
- }
145
- p {
146
- width: 310px;
147
- margin-top: 24px;
148
- font-size: 14px;
149
- color: #565656;
150
- }
151
- }
152
- </style>
1
+ <template>
2
+ <div class="select-os">
3
+ <p class="select-os-block">
4
+ {{ localization.common.identifyingGuestSystemInstallation }}
5
+ </p>
6
+ <div class="select-os-block os-select-wrap table-row">
7
+ <label for="machine-type-select" class="table-cell"
8
+ >{{ localization.common.machineType }}:</label
9
+ >
10
+
11
+ <atoms-tooltip-error
12
+ :has-error="!!props.apiErrorMachineType"
13
+ selector="#vm-wizard-machine-type-select"
14
+ @remove="emits('remove-error-by-title', 'machine_type')"
15
+ >
16
+ <template #elem>
17
+ <select
18
+ id="vm-wizard-machine-type-select"
19
+ v-model="machineType"
20
+ data-id="vm-wizard-machine-type-select"
21
+ class="table-cell"
22
+ >
23
+ <option
24
+ v-for="item in props.machineTypeOptions"
25
+ :key="item.value"
26
+ :value="item"
27
+ >
28
+ {{ item.text }}
29
+ </option>
30
+ </select>
31
+ </template>
32
+ <template #content>{{ props.apiErrorMachineType }}</template>
33
+ </atoms-tooltip-error>
34
+ </div>
35
+ <div class="select-os-block os-select-wrap table-row">
36
+ <label for="os-select" class="table-cell"
37
+ >{{ localization.common.guestOsFamily }}:</label
38
+ >
39
+
40
+ <atoms-tooltip-error
41
+ :has-error="!!props.apiErrorGuestOsFamily"
42
+ selector="#vm-wizard-os-select"
43
+ @remove="emits('remove-error-by-title', 'guest_os_family')"
44
+ >
45
+ <template #elem>
46
+ <select
47
+ id="vm-wizard-os-select"
48
+ v-model="guestOsFamily"
49
+ data-id="vm-wizard-os-select"
50
+ class="table-cell"
51
+ @change="emits('change-os')"
52
+ >
53
+ <option
54
+ v-for="item in props.osOptions"
55
+ :key="item.value"
56
+ :value="item"
57
+ >
58
+ {{ item.text }}
59
+ </option>
60
+ </select>
61
+ </template>
62
+ <template #content>{{ props.apiErrorGuestOsFamily }}</template>
63
+ </atoms-tooltip-error>
64
+ </div>
65
+ <div class="select-os-block os-select-wrap table-row">
66
+ <label for="os-version-select" class="table-cell"
67
+ >{{ localization.common.guestOsVersion }}:</label
68
+ >
69
+
70
+ <atoms-tooltip-error
71
+ :has-error="!!props.apiErrorGuestOsVersion"
72
+ selector="#vm-wizard-os-version-select"
73
+ @remove="emits('remove-error-by-title', 'guest_os_version')"
74
+ >
75
+ <template #elem>
76
+ <select
77
+ id="vm-wizard-os-version-select"
78
+ v-model="guestOsVersion"
79
+ data-id="vm-wizard-os-version-select"
80
+ class="table-cell"
81
+ >
82
+ <option
83
+ v-for="item in props.versionsOptions"
84
+ :key="item.value"
85
+ :value="item"
86
+ >
87
+ {{ item.text }}
88
+ </option>
89
+ </select>
90
+ </template>
91
+ <template #content>{{ props.apiErrorGuestOsVersion }}</template>
92
+ </atoms-tooltip-error>
93
+ </div>
94
+ </div>
95
+ </template>
96
+
97
+ <script setup lang="ts">
98
+ import type { UI_I_Localization } from '~/lib/models/interfaces'
99
+ import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
100
+
101
+ const machineType = defineModel<UI_I_OptionItem | null>('machine-type', {
102
+ required: true,
103
+ })
104
+ const guestOsFamily = defineModel<UI_I_OptionItem | null>('guest-os-family', {
105
+ required: true,
106
+ })
107
+ const guestOsVersion = defineModel<UI_I_OptionItem | null>('guest-os-version', {
108
+ required: true,
109
+ })
110
+
111
+ const props = defineProps<{
112
+ apiErrorMachineType: string
113
+ machineTypeOptions: UI_I_OptionItem[]
114
+ apiErrorGuestOsFamily: string
115
+ osOptions: UI_I_OptionItem[]
116
+ apiErrorGuestOsVersion: string
117
+ versionsOptions: UI_I_OptionItem[]
118
+ }>()
119
+ const emits = defineEmits<{
120
+ (event: 'remove-error-by-title', value: string): void
121
+ (event: 'change-os'): void
122
+ }>()
123
+ const localization = computed<UI_I_Localization>(() => useLocal())
124
+ </script>
125
+
126
+ <style scoped lang="scss">
127
+ .select-os {
128
+ .select-os-block {
129
+ label:not(.windows-virtualization-label) {
130
+ padding: 0 5px 5px 0;
131
+ }
132
+
133
+ .windows-virtualization-label {
134
+ padding: 0 4px;
135
+ }
136
+ }
137
+ }
138
+
139
+ #os-select-help-icon {
140
+ h3 {
141
+ margin-top: 7px;
142
+ font-size: 22px;
143
+ color: #565656;
144
+ }
145
+ p {
146
+ width: 310px;
147
+ margin-top: 24px;
148
+ font-size: 14px;
149
+ color: #565656;
150
+ }
151
+ }
152
+ </style>