bfg-common 1.5.39 → 1.5.40

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 (198) 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/assets/localization/local_be.json +2 -1
  7. package/assets/localization/local_en.json +2 -1
  8. package/assets/localization/local_hy.json +2 -1
  9. package/assets/localization/local_kk.json +2 -1
  10. package/assets/localization/local_ru.json +2 -1
  11. package/assets/localization/local_zh.json +2 -2
  12. package/assets/scss/common/normalize.scss +339 -339
  13. package/components/atoms/TheIcon3.vue +50 -50
  14. package/components/atoms/collapse/CollapseNav.vue +165 -165
  15. package/components/atoms/dropdown/dropdown/Dropdown.vue +168 -168
  16. package/components/atoms/modal/bySteps/BySteps.vue +253 -253
  17. package/components/atoms/perPage/PerPage.vue +58 -58
  18. package/components/atoms/stack/StackBlock.vue +185 -185
  19. package/components/atoms/table/dataGrid/DataGridColumnSwitch.vue +222 -222
  20. package/components/atoms/table/dataGrid/lib/config/settingsTable.ts +94 -94
  21. package/components/atoms/table/dataGrid/lib/utils/export.ts +16 -16
  22. package/components/atoms/tabs/VerticalTabs.vue +105 -105
  23. package/components/atoms/tooltip/Signpost.vue +227 -227
  24. package/components/common/accordion/Recursion.vue +222 -222
  25. package/components/common/browse/BrowseNew.vue +237 -237
  26. package/components/common/browse/BrowseOld.vue +217 -217
  27. package/components/common/browse/blocks/contents/Files.vue +37 -37
  28. package/components/common/browse/blocks/contents/FilesOld.vue +72 -72
  29. package/components/common/browse/blocks/contents/filesNew/FilesNew.vue +96 -96
  30. package/components/common/browse/blocks/contents/filesNew/Skeleton.vue +18 -18
  31. package/components/common/browse/blocks/lib/models/types.ts +1 -1
  32. package/components/common/browse/lib/models/interfaces.ts +5 -5
  33. package/components/common/context/Context.vue +111 -111
  34. package/components/common/context/lib/models/interfaces.ts +31 -31
  35. package/components/common/context/recursion/Recursion.vue +87 -87
  36. package/components/common/context/recursion/RecursionNew.vue +238 -238
  37. package/components/common/context/recursion/RecursionOld.vue +228 -228
  38. package/components/common/details/DetailsItem.vue +109 -109
  39. package/components/common/diagramMain/DiagramMain.vue +897 -897
  40. package/components/common/diagramMain/Header.vue +214 -214
  41. package/components/common/diagramMain/adapter/AdapterItems.vue +61 -61
  42. package/components/common/diagramMain/lib/config/initial.ts +50 -50
  43. package/components/common/diagramMain/lib/models/types.ts +21 -21
  44. package/components/common/diagramMain/lib/utils/utils.ts +331 -331
  45. package/components/common/diagramMain/modals/editSettings/ConfirmTeamingSettingsModal.vue +40 -40
  46. package/components/common/diagramMain/modals/editSettings/tabs/NetworkProperties.vue +214 -214
  47. package/components/common/diagramMain/modals/editSettings/tabs/Security.vue +189 -189
  48. package/components/common/diagramMain/modals/editSettings/tabs/SwitchProperties.vue +163 -163
  49. package/components/common/diagramMain/modals/editSettings/tabs/TeamingFailover.vue +175 -175
  50. package/components/common/diagramMain/modals/editSettings/tabs/port/IpvFourSettings.vue +346 -346
  51. package/components/common/diagramMain/modals/editSettings/tabs/port/PortProperties.vue +205 -205
  52. package/components/common/diagramMain/modals/lib/config/initial.ts +180 -180
  53. package/components/common/diagramMain/modals/lib/config/vmKernelAdapter.ts +90 -90
  54. package/components/common/diagramMain/modals/lib/mappers/mappers.ts +87 -87
  55. package/components/common/diagramMain/modals/lib/utils/index.ts +24 -24
  56. package/components/common/diagramMain/modals/migrateVmkernelAdapter/lib/config/steps.ts +114 -114
  57. package/components/common/diagramMain/modals/migrateVmkernelAdapter/steps/ConnectionSettings.vue +169 -169
  58. package/components/common/diagramMain/modals/migrateVmkernelAdapter/steps/SelectVmkernelAdapter.vue +159 -159
  59. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/common.ts +14 -14
  60. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/connectionSettings.ts +137 -137
  61. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/selectVmkernelAdapter.ts +52 -52
  62. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/validations.ts +19 -19
  63. package/components/common/diagramMain/port/Ports.vue +47 -47
  64. package/components/common/layout/theHeader/helpMenu/About.vue +82 -82
  65. package/components/common/layout/theHeader/helpMenu/aboutNew/AboutNew.vue +103 -103
  66. package/components/common/layout/theHeader/userMenu/modals/preferences/view/ViewOld.vue +112 -112
  67. package/components/common/mainNavigationPanel/MainNavigationPanelNew.vue +336 -336
  68. package/components/common/mainNavigationPanel/MainNavigationPanelOld.vue +311 -311
  69. package/components/common/modals/unsavedChanges/UnsavedChanges.vue +56 -56
  70. package/components/common/monitor/overview/OverviewOld.vue +139 -139
  71. package/components/common/pages/home/StatusContent.vue +49 -49
  72. package/components/common/pages/home/headline/Headline.vue +45 -45
  73. package/components/common/pages/home/headline/HeadlineOld.vue +42 -42
  74. package/components/common/pages/home/lib/models/interfaces.ts +48 -48
  75. package/components/common/pages/home/resource/lib/models/interfaces.ts +4 -1
  76. package/components/common/pages/home/resource/lib/utils/resourceMeter.ts +4 -1
  77. package/components/common/pages/home/widgets/Widgets.vue +49 -49
  78. package/components/common/pages/home/widgets/WidgetsNew.vue +86 -86
  79. package/components/common/pages/home/widgets/WidgetsOld.vue +34 -34
  80. package/components/common/pages/home/widgets/hosts/Hosts.vue +27 -27
  81. package/components/common/pages/home/widgets/hosts/lib/config/items.ts +23 -23
  82. package/components/common/pages/home/widgets/vms/Vms.vue +26 -26
  83. package/components/common/pages/home/widgets/vms/VmsOld.vue +35 -35
  84. package/components/common/pages/home/widgets/vms/lib/config/items.ts +19 -19
  85. package/components/common/pages/packages/Packages.vue +208 -208
  86. package/components/common/pages/shortcuts/block/BlockNew.vue +96 -96
  87. package/components/common/pages/shortcuts/block/BlockOld.vue +68 -68
  88. package/components/common/portlets/customAttributes/Portlet.vue +667 -667
  89. package/components/common/portlets/tag/Portlet.vue +433 -433
  90. package/components/common/recursionTree/RecursionTree.vue +223 -223
  91. package/components/common/select/button/ButtonDropdown.vue +108 -108
  92. package/components/common/spiceConsole/Drawer.vue +370 -370
  93. package/components/common/spiceConsole/lib/models/interfaces.ts +5 -5
  94. package/components/common/split/horizontal/HorizontalNew.vue +376 -376
  95. package/components/common/split/horizontal/HorizontalOld.vue +337 -337
  96. package/components/common/split/vertical/Vertical.vue +160 -160
  97. package/components/common/tools/Actions.vue +188 -188
  98. package/components/common/vm/actions/add/Add.vue +772 -770
  99. package/components/common/vm/actions/add/lib/config/steps.ts +247 -247
  100. package/components/common/vm/actions/clone/Clone.vue +668 -668
  101. package/components/common/vm/actions/clone/lib/config/steps.ts +178 -178
  102. package/components/common/vm/actions/clone/toTemplate/ToTemplate.vue +634 -634
  103. package/components/common/vm/actions/clone/toTemplate/lib/config/steps.ts +116 -116
  104. package/components/common/vm/actions/common/customizeHardware/CustomizeHardware.vue +275 -275
  105. package/components/common/vm/actions/common/customizeHardware/CustomizeHardwareNew.vue +274 -274
  106. package/components/common/vm/actions/common/customizeHardware/CustomizeHardwareOld.vue +177 -177
  107. package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardware.vue +698 -698
  108. package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardwareNew.vue +410 -410
  109. package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardwareOld.vue +319 -319
  110. package/components/common/vm/actions/common/customizeHardware/virtualHardware/browseView/BrowseView.vue +219 -219
  111. package/components/common/vm/actions/common/customizeHardware/virtualHardware/bus/Bus.vue +99 -99
  112. package/components/common/vm/actions/common/customizeHardware/virtualHardware/bus/BusNew.vue +117 -117
  113. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/CdDvdDrive.vue +232 -232
  114. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/CdDvdDriveNew.vue +164 -164
  115. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/CdDvdDriveOld.vue +168 -168
  116. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/media/Media.vue +25 -25
  117. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/media/MediaNew.vue +70 -70
  118. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/media/MediaOld.vue +50 -50
  119. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/Cpu.vue +338 -338
  120. package/components/common/vm/actions/common/customizeHardware/virtualHardware/limit/Limit.vue +220 -220
  121. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/NewHardDisk.vue +368 -368
  122. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/NewHardDiskNew.vue +232 -232
  123. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/NewHardDiskOld.vue +250 -250
  124. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/mode/ModeOld.vue +56 -56
  125. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/sharing/SharingNew.vue +44 -44
  126. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/NewNetwork.vue +286 -286
  127. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/NewNetworkNew.vue +124 -124
  128. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/location/LocationOld.vue +134 -134
  129. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/location/new/New.vue +63 -63
  130. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/location/new/table/lib/config/config.ts +95 -95
  131. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/macAddress/MacAddress.vue +119 -119
  132. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/macAddress/MacAddressNew.vue +69 -69
  133. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/macAddress/MacAddressOld.vue +83 -83
  134. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/NewPciDevice.vue +205 -205
  135. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/directPathIo/DirectPathIoNew.vue +66 -66
  136. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/directPathIo/DirectPathIoOld.vue +62 -62
  137. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/DynamicDirectPathIo.vue +31 -31
  138. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/DynamicDirectPathIoNew.vue +84 -84
  139. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/DynamicDirectPathIoOld.vue +76 -76
  140. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/note/Note.vue +15 -15
  141. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/note/NoteNew.vue +42 -42
  142. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/note/NoteOld.vue +30 -30
  143. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/nvidiaGrid/NvidiaGrid.vue +41 -41
  144. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/nvidiaGrid/NvidiaGridNew.vue +81 -81
  145. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/nvidiaGrid/NvidiaGridOld.vue +84 -84
  146. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newUsbController/NewUsbControllerNew.vue +56 -56
  147. package/components/common/vm/actions/common/customizeHardware/virtualHardware/other/Other.vue +16 -16
  148. package/components/common/vm/actions/common/customizeHardware/virtualHardware/other/OtherNew.vue +30 -30
  149. package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/VideoCardNew.vue +104 -104
  150. package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/VideoCardOld.vue +112 -112
  151. package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/totalVideoMemory/TotalVideoMemoryNew.vue +54 -54
  152. package/components/common/vm/actions/common/customizeHardware/vmoptions/Vmoptions.vue +145 -145
  153. package/components/common/vm/actions/common/customizeHardware/vmoptions/VmoptionsNew.vue +102 -102
  154. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/BootOptionsNew.vue +75 -75
  155. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/delay/Delay.vue +26 -26
  156. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/firmware/Firmware.vue +57 -57
  157. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/firmware/FirmwareNew.vue +42 -42
  158. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/menu/MenuNew.vue +25 -25
  159. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/Order.vue +171 -171
  160. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/OrderNew.vue +50 -50
  161. package/components/common/vm/actions/common/customizeHardware/vmoptions/generalOptions/GeneralOptionsNew.vue +141 -141
  162. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/New.vue +140 -140
  163. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/copyPaste/CopyPasteNew.vue +30 -30
  164. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/fileTransfer/FileTransferNew.vue +30 -30
  165. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/folderSharing/FolderSharingNew.vue +30 -30
  166. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/keymap/Keymap.vue +32 -32
  167. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/keymap/KeymapNew.vue +39 -39
  168. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/Password.vue +103 -103
  169. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/PasswordNew.vue +102 -102
  170. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/PasswordOld.vue +94 -94
  171. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/usbRedirection/UsbRedirection.vue +28 -28
  172. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/usbRedirection/UsbRedirectionNew.vue +38 -38
  173. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/usbRedirection/UsbRedirectionOld.vue +44 -44
  174. package/components/common/vm/actions/common/select/createType/CreateType.vue +74 -74
  175. package/components/common/vm/actions/common/select/storage/Storage.vue +130 -130
  176. package/components/common/vm/actions/common/select/storage/StorageOld.vue +129 -129
  177. package/components/common/vm/actions/common/select/template/Template.vue +65 -62
  178. package/components/common/vm/actions/common/select/template/TemplateTreeView.vue +88 -88
  179. package/components/common/vm/actions/editSettings/new/Skeleton.vue +88 -88
  180. package/components/common/wizards/datastore/add/lib/config/steps.ts +138 -138
  181. package/components/common/wizards/datastore/add/nfs/accessibility/Accessibility.vue +60 -60
  182. package/components/common/wizards/datastore/add/readyComplete/ReadyComplete.vue +92 -92
  183. package/components/common/wizards/network/add/steps/SelectConnectionType.vue +105 -105
  184. package/components/common/wizards/vm/migrate/lib/config/constructDataReady.ts +220 -220
  185. package/components/common/wizards/vm/migrate/select/network/Network.vue +103 -103
  186. package/components/common/wizards/vm/migrate/select/network/table/network/Network.vue +150 -150
  187. package/components/common/wizards/vm/migrate/select/network/table/network/lib/config/advancedTable.ts +91 -91
  188. package/components/common/wizards/vm/migrate/select/priority/Priority.vue +43 -43
  189. package/composables/productNameLocal.ts +30 -30
  190. package/composables/useAppVersion.ts +21 -21
  191. package/package.json +2 -2
  192. package/plugins/date.ts +233 -233
  193. package/plugins/directives.ts +24 -24
  194. package/public/spice-console/lib/images/bitmap.js +203 -203
  195. package/public/spice-console/network/spicechannel.js +383 -383
  196. package/store/main/mutations.ts +7 -7
  197. package/store/main/state.ts +7 -7
  198. package/store/tasks/mappers/recentTasks.ts +64 -64
@@ -1,368 +1,368 @@
1
- <template>
2
- <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-new
3
- v-if="isNewView"
4
- v-model:delete-files-from-datastore="deleteFilesFromDatastore"
5
- v-model:size="size"
6
- v-model:hard-disk-type="hardDiskType"
7
- v-model:disk-provisioning="diskProvisioning"
8
- v-model:sharing="sharing"
9
- v-model:limit-iops="limitIops"
10
- v-model:limit-iops-type="limitIopsType"
11
- v-model:limit-iops-invalid="limitIopsInvalid"
12
- v-model:disk-mode="diskMode"
13
- v-model:cache="cache"
14
- v-model:bus="bus"
15
- :is-removable="isRemovable"
16
- :label="label"
17
- :hard-disk-invalid="hardDiskInvalid"
18
- :error-text="hardDiskLocalAndApiErrorsTexts"
19
- :hard-disk-type-error-local-text="hardDiskTypeErrorLocalText"
20
- :is-disabled-size="isDisabledSize"
21
- :hard-disk-type-options="hardDiskTypeOptions"
22
- :max-hard-disk="maxHardDisk"
23
- :location="location"
24
- :is-running="isRunning"
25
- :is-new-hard-disk="!isNotNewHardDisk"
26
- :is-edit="props.isEdit"
27
- :datastore="props.datastore"
28
- :get-datastore-table-func="props.getDatastoreTableFunc"
29
- :error-validation-fields="props.errorValidationFields"
30
- :index="props.index"
31
- :type="props.type"
32
- :hard-disk="props.hardDisk"
33
- :guest-machine-type="props.guestMachineType"
34
- :is-new-type="isNewType"
35
- :compute-resource="props.computeResource"
36
- @remove="emits('remove')"
37
- @roll-back="emits('roll-back')"
38
- @validate-size="onValidateSize"
39
- @change-storage="onChangeStorage"
40
- @remove-error-by-title="emits('remove-error-by-title', $event)"
41
- />
42
- <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-old
43
- v-else
44
- v-model:delete-files-from-datastore="deleteFilesFromDatastore"
45
- v-model:size="size"
46
- v-model:hard-disk-type="hardDiskType"
47
- v-model:disk-provisioning="diskProvisioning"
48
- v-model:sharing="sharing"
49
- v-model:limit-iops="limitIops"
50
- v-model:limit-iops-type="limitIopsType"
51
- v-model:limit-iops-invalid="limitIopsInvalid"
52
- v-model:disk-mode="diskMode"
53
- v-model:cache="cache"
54
- v-model:bus="bus"
55
- :is-removable="isRemovable"
56
- :label="label"
57
- :hard-disk-invalid="hardDiskInvalid"
58
- :error-text="hardDiskLocalAndApiErrorsTexts"
59
- :hard-disk-type-error-local-text="hardDiskTypeErrorLocalText"
60
- :is-disabled-size="isDisabledSize"
61
- :hard-disk-type-options="hardDiskTypeOptions"
62
- :max-hard-disk="maxHardDisk"
63
- :location="location"
64
- :is-running="isRunning"
65
- :is-new-hard-disk="!isNotNewHardDisk"
66
- :is-edit="props.isEdit"
67
- :datastore="props.datastore"
68
- :get-datastore-table-func="props.getDatastoreTableFunc"
69
- :error-validation-fields="props.errorValidationFields"
70
- :index="props.index"
71
- :type="props.type"
72
- :hard-disk="props.hardDisk"
73
- :guest-machine-type="props.guestMachineType"
74
- :is-new-type="isNewType"
75
- :compute-resource="props.computeResource"
76
- @remove="emits('remove')"
77
- @roll-back="emits('roll-back')"
78
- @validate-size="onValidateSize"
79
- @change-storage="onChangeStorage"
80
- @remove-error-by-title="emits('remove-error-by-title', $event)"
81
- />
82
- </template>
83
-
84
- <script setup lang="ts">
85
- import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
86
- import type {
87
- UI_I_SendDataNewHardDisk,
88
- UI_I_SendDataNewHardDiskStorage,
89
- } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
90
- import type { UI_T_HardDiskType } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
91
- import type { UI_I_Localization } from '~/lib/models/interfaces'
92
- import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
93
- import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
94
- import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
95
- import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
96
- import { binaryOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/config/binaryOptions'
97
-
98
- const props = defineProps<{
99
- storage: UI_I_DatastoreTableItem | null
100
- hardDisk: UI_I_SendDataNewHardDisk
101
- type: UI_T_HardDiskType
102
- index: number
103
- errorValidationFields: UI_I_ErrorValidationField<string>[]
104
- getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
105
- datastore: UI_I_DatastoreTableItem[]
106
- isEdit: boolean
107
- state?: string | number
108
- guestMachineType?: UI_I_OptionItem | null
109
- computeResource?: UI_I_TreeNode | null
110
- }>()
111
- const emits = defineEmits<{
112
- (event: 'send-data', value: UI_I_SendDataNewHardDisk): void
113
- (event: 'invalid', value: boolean): void
114
- (event: 'remove'): void
115
- (event: 'roll-back'): void
116
- (event: 'remove-error-by-title', value: string): void
117
- }>()
118
-
119
- const { $store, $binary }: any = useNuxtApp()
120
- const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
121
-
122
- const localization = computed<UI_I_Localization>(() => useLocal())
123
-
124
- const isRunning = computed<boolean>(() => {
125
- return props.state === 2
126
- })
127
-
128
- const isRemovable = computed<boolean>(() => {
129
- return (
130
- !props.isEdit ||
131
- !isRunning.value ||
132
- (isRunning.value && bus.value === 'virtio')
133
- )
134
- })
135
-
136
- const isNewType = computed<boolean>(
137
- () => props.type === 'new' || props.type === 'clone'
138
- )
139
-
140
- const typeError = computed<string>(() => `disk_devices[${props.index}].size`)
141
-
142
- const apiErrorLocal = computed<string>(() => {
143
- return (
144
- props.errorValidationFields?.find(
145
- (message) => message.field === typeError.value
146
- )?.error_message || ''
147
- )
148
- })
149
-
150
- // PC-1796
151
- const isNotNewHardDisk = computed<boolean>(
152
- () => props.type === 'edit' || props.type === 'removed'
153
- )
154
- const label = computed<string>(() => {
155
- // if (props.type === 'edit' || props.type === 'removed')
156
- if (isNotNewHardDisk.value)
157
- return `${localization.value.common.hardDisk} ${props.index + 1}`
158
-
159
- return `${localization.value.common.newHardDisk} *`
160
- })
161
-
162
- const maxHardDisk = computed<number>(() => {
163
- if (props.type === 'exist') return $binary.gbToMb(props.hardDisk.size)
164
-
165
- if (!storage.value) return 0
166
-
167
- if (props.isEdit)
168
- return storage.value.capacity.free_mb + $binary.gbToMb(props.hardDisk.size)
169
-
170
- return storage.value.capacity.free_mb
171
- })
172
- const hardDiskTypeErrorLocalText = computed<string>(() => {
173
- if (+sizeInMb.value > maxHardDisk.value) {
174
- return localization.value.common.diskCapacitySpecifiedGreater
175
- }
176
-
177
- if (+sizeInMb.value <= 0) {
178
- return localization.value.common.diskCapacityCannotZero
179
- }
180
-
181
- return ''
182
- })
183
-
184
- const hardDiskLocalAndApiErrorsTexts = computed<string>(() => {
185
- const localError = hardDiskTypeErrorLocalText.value
186
- const apiError = apiErrorLocal.value
187
-
188
- let result = ''
189
- if (localError && !apiError) result = localError
190
- if (!localError && apiError) result = apiError
191
- if (localError && apiError) result = localError + ', ' + apiError
192
- if (!localError && apiError) result = apiError
193
-
194
- return result
195
- })
196
-
197
- const deleteFilesFromDatastore = ref<boolean>(false)
198
-
199
- const hardDiskType = ref<string>('gb')
200
- const hardDiskTypeOptions = ref<UI_I_OptionItem[]>(
201
- binaryOptionsFunc(localization.value)
202
- )
203
-
204
- const size = ref<number>(props.hardDisk.size) // Изначально всегда приходит в gb
205
- const sizeInMb = computed<number>(() => {
206
- if (hardDiskType.value === 'mb') {
207
- return size.value
208
- }
209
-
210
- return $binary.universalFromTo(size.value, hardDiskType.value, 'mb')
211
- })
212
- const onValidateSize = (): void => {
213
- if (props.type !== 'edit') return
214
- if (sizeInMb.value < $binary.gbToMb(props.hardDisk.size)) {
215
- size.value = $binary.universalFromTo(
216
- props.hardDisk.size,
217
- 'gb',
218
- hardDiskType.value
219
- )
220
- }
221
- }
222
-
223
- const isDisabledSize = computed<boolean>(() => {
224
- return props.type === 'exist' || (props.type === 'edit' && readOnly.value)
225
- })
226
-
227
- const location = ref<UI_I_DatastoreTableItem | null>(props.storage || null)
228
- watch(
229
- () => props.storage,
230
- (newValue) => {
231
- location.value = newValue
232
- storage.value = newValue
233
- }
234
- )
235
- const storage = ref<UI_I_DatastoreTableItem | null>(props.storage)
236
- const onChangeStorage = (item: UI_I_DatastoreTableItem): void => {
237
- storage.value = item
238
- }
239
-
240
- const diskProvisioning = ref<string>('thick')
241
- const sharing = ref<string>('')
242
- const shares = ref<number>(0)
243
-
244
- const limitIops = ref<number>(16)
245
- const limitIopsType = ref<string>('unlimited')
246
- const limitIopsInvalid = ref<boolean>(false)
247
-
248
- const diskMode = ref<string>('dependent')
249
-
250
- const cache = ref<string>('none')
251
-
252
- const bus = ref<string>('ide')
253
-
254
- const readOnly = ref<boolean>(false)
255
-
256
- const discard = ref<string>('')
257
-
258
- const io = ref<string>('')
259
-
260
- const target = ref<string>('')
261
-
262
- watch(
263
- [
264
- sizeInMb,
265
- storage,
266
- diskProvisioning,
267
- sharing,
268
- limitIops,
269
- limitIopsType,
270
- diskMode,
271
- cache,
272
- bus,
273
- deleteFilesFromDatastore,
274
- (): void => props.type,
275
- ],
276
- () => {
277
- const limitIopsLocal =
278
- limitIopsType.value === 'unlimited' ? 0 : limitIops.value
279
- const storageLocal: UI_I_SendDataNewHardDiskStorage = {
280
- id: storage.value?.id || '',
281
- name: storage.value?.name || '',
282
- type: storage.value?.type_text || '',
283
- pool: storage.value?.pool_name || '',
284
- user: '',
285
- endpoint: '',
286
- password: '',
287
- protocol: '',
288
- options: '',
289
- }
290
-
291
- emits('send-data', {
292
- create: props.hardDisk.create,
293
- attach: props.hardDisk.attach,
294
- source: props.hardDisk.source,
295
- size: Math.ceil(sizeInMb.value),
296
- bus: bus.value,
297
- target: target.value,
298
- storage: storageLocal,
299
- device_type: 'disk',
300
- provision_type: diskProvisioning.value,
301
- disk_mode: diskMode.value,
302
- sharing: sharing.value === 'yes',
303
- read_only: readOnly.value,
304
- shares: shares.value,
305
- cache: cache.value,
306
- io: io.value,
307
- limit_iops: limitIopsLocal,
308
- discard: discard.value,
309
- capacity: Math.ceil(sizeInMb.value),
310
- boot_order: props.hardDisk.boot_order,
311
- detach: props.type === 'removed',
312
- remove: props.type === 'removed' && deleteFilesFromDatastore.value, // Проверяем если удалили диск и указали Delete files from datastore
313
- })
314
- },
315
- { immediate: true }
316
- )
317
-
318
- // Добавляем данные для редактирования
319
- watch(
320
- () => props.hardDisk,
321
- (newValue) => {
322
- // TODO refactoring
323
- if (props.type === 'exist') {
324
- diskProvisioning.value = newValue.provision_type || 'thick'
325
- return
326
- }
327
- // if (props.type !== 'edit') return
328
- if (props.type !== 'edit' && props.type !== 'clone') return
329
-
330
- diskProvisioning.value = newValue.provision_type || 'thick'
331
- sharing.value = newValue.sharing ? 'yes' : ''
332
- shares.value = newValue.shares || 0
333
- // limitIopsType.value = newValue.io === 'native' ? 'unlimited' : 'custom'
334
- limitIopsType.value = newValue.limit_iops === 0 ? 'unlimited' : 'custom'
335
- limitIops.value = newValue.limit_iops || 16
336
- diskMode.value = newValue.disk_mode || 'dependent'
337
- cache.value = newValue.cache || 'none'
338
- bus.value = newValue.bus || 'ide'
339
- readOnly.value = newValue.read_only || false
340
- discard.value = newValue.discard || ''
341
- io.value = newValue.io || ''
342
- target.value = newValue.target || ''
343
- },
344
- { immediate: true }
345
- )
346
- watch(
347
- isRunning,
348
- (newValue) => {
349
- if (newValue && props.type === 'new') {
350
- bus.value = 'virtio'
351
- }
352
- },
353
- { immediate: true }
354
- )
355
-
356
- const hardDiskInvalid = computed<boolean>(() => {
357
- return !!hardDiskTypeErrorLocalText.value || limitIopsInvalid.value
358
- })
359
- watch(
360
- hardDiskInvalid,
361
- (newValue) => {
362
- emits('invalid', newValue)
363
- },
364
- { immediate: true }
365
- )
366
- </script>
367
-
368
- <style scoped lang="scss"></style>
1
+ <template>
2
+ <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-new
3
+ v-if="isNewView"
4
+ v-model:delete-files-from-datastore="deleteFilesFromDatastore"
5
+ v-model:size="size"
6
+ v-model:hard-disk-type="hardDiskType"
7
+ v-model:disk-provisioning="diskProvisioning"
8
+ v-model:sharing="sharing"
9
+ v-model:limit-iops="limitIops"
10
+ v-model:limit-iops-type="limitIopsType"
11
+ v-model:limit-iops-invalid="limitIopsInvalid"
12
+ v-model:disk-mode="diskMode"
13
+ v-model:cache="cache"
14
+ v-model:bus="bus"
15
+ :is-removable="isRemovable"
16
+ :label="label"
17
+ :hard-disk-invalid="hardDiskInvalid"
18
+ :error-text="hardDiskLocalAndApiErrorsTexts"
19
+ :hard-disk-type-error-local-text="hardDiskTypeErrorLocalText"
20
+ :is-disabled-size="isDisabledSize"
21
+ :hard-disk-type-options="hardDiskTypeOptions"
22
+ :max-hard-disk="maxHardDisk"
23
+ :location="location"
24
+ :is-running="isRunning"
25
+ :is-new-hard-disk="!isNotNewHardDisk"
26
+ :is-edit="props.isEdit"
27
+ :datastore="props.datastore"
28
+ :get-datastore-table-func="props.getDatastoreTableFunc"
29
+ :error-validation-fields="props.errorValidationFields"
30
+ :index="props.index"
31
+ :type="props.type"
32
+ :hard-disk="props.hardDisk"
33
+ :guest-machine-type="props.guestMachineType"
34
+ :is-new-type="isNewType"
35
+ :compute-resource="props.computeResource"
36
+ @remove="emits('remove')"
37
+ @roll-back="emits('roll-back')"
38
+ @validate-size="onValidateSize"
39
+ @change-storage="onChangeStorage"
40
+ @remove-error-by-title="emits('remove-error-by-title', $event)"
41
+ />
42
+ <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk-old
43
+ v-else
44
+ v-model:delete-files-from-datastore="deleteFilesFromDatastore"
45
+ v-model:size="size"
46
+ v-model:hard-disk-type="hardDiskType"
47
+ v-model:disk-provisioning="diskProvisioning"
48
+ v-model:sharing="sharing"
49
+ v-model:limit-iops="limitIops"
50
+ v-model:limit-iops-type="limitIopsType"
51
+ v-model:limit-iops-invalid="limitIopsInvalid"
52
+ v-model:disk-mode="diskMode"
53
+ v-model:cache="cache"
54
+ v-model:bus="bus"
55
+ :is-removable="isRemovable"
56
+ :label="label"
57
+ :hard-disk-invalid="hardDiskInvalid"
58
+ :error-text="hardDiskLocalAndApiErrorsTexts"
59
+ :hard-disk-type-error-local-text="hardDiskTypeErrorLocalText"
60
+ :is-disabled-size="isDisabledSize"
61
+ :hard-disk-type-options="hardDiskTypeOptions"
62
+ :max-hard-disk="maxHardDisk"
63
+ :location="location"
64
+ :is-running="isRunning"
65
+ :is-new-hard-disk="!isNotNewHardDisk"
66
+ :is-edit="props.isEdit"
67
+ :datastore="props.datastore"
68
+ :get-datastore-table-func="props.getDatastoreTableFunc"
69
+ :error-validation-fields="props.errorValidationFields"
70
+ :index="props.index"
71
+ :type="props.type"
72
+ :hard-disk="props.hardDisk"
73
+ :guest-machine-type="props.guestMachineType"
74
+ :is-new-type="isNewType"
75
+ :compute-resource="props.computeResource"
76
+ @remove="emits('remove')"
77
+ @roll-back="emits('roll-back')"
78
+ @validate-size="onValidateSize"
79
+ @change-storage="onChangeStorage"
80
+ @remove-error-by-title="emits('remove-error-by-title', $event)"
81
+ />
82
+ </template>
83
+
84
+ <script setup lang="ts">
85
+ import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
86
+ import type {
87
+ UI_I_SendDataNewHardDisk,
88
+ UI_I_SendDataNewHardDiskStorage,
89
+ } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
90
+ import type { UI_T_HardDiskType } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
91
+ import type { UI_I_Localization } from '~/lib/models/interfaces'
92
+ import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
93
+ import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
94
+ import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
95
+ import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
96
+ import { binaryOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/config/binaryOptions'
97
+
98
+ const props = defineProps<{
99
+ storage: UI_I_DatastoreTableItem | null
100
+ hardDisk: UI_I_SendDataNewHardDisk
101
+ type: UI_T_HardDiskType
102
+ index: number
103
+ errorValidationFields: UI_I_ErrorValidationField<string>[]
104
+ getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
105
+ datastore: UI_I_DatastoreTableItem[]
106
+ isEdit: boolean
107
+ state?: string | number
108
+ guestMachineType?: UI_I_OptionItem | null
109
+ computeResource?: UI_I_TreeNode | null
110
+ }>()
111
+ const emits = defineEmits<{
112
+ (event: 'send-data', value: UI_I_SendDataNewHardDisk): void
113
+ (event: 'invalid', value: boolean): void
114
+ (event: 'remove'): void
115
+ (event: 'roll-back'): void
116
+ (event: 'remove-error-by-title', value: string): void
117
+ }>()
118
+
119
+ const { $store, $binary }: any = useNuxtApp()
120
+ const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
121
+
122
+ const localization = computed<UI_I_Localization>(() => useLocal())
123
+
124
+ const isRunning = computed<boolean>(() => {
125
+ return props.state === 2
126
+ })
127
+
128
+ const isRemovable = computed<boolean>(() => {
129
+ return (
130
+ !props.isEdit ||
131
+ !isRunning.value ||
132
+ (isRunning.value && bus.value === 'virtio')
133
+ )
134
+ })
135
+
136
+ const isNewType = computed<boolean>(
137
+ () => props.type === 'new' || props.type === 'clone'
138
+ )
139
+
140
+ const typeError = computed<string>(() => `disk_devices[${props.index}].size`)
141
+
142
+ const apiErrorLocal = computed<string>(() => {
143
+ return (
144
+ props.errorValidationFields?.find(
145
+ (message) => message.field === typeError.value
146
+ )?.error_message || ''
147
+ )
148
+ })
149
+
150
+ // PC-1796
151
+ const isNotNewHardDisk = computed<boolean>(
152
+ () => props.type === 'edit' || props.type === 'removed'
153
+ )
154
+ const label = computed<string>(() => {
155
+ // if (props.type === 'edit' || props.type === 'removed')
156
+ if (isNotNewHardDisk.value)
157
+ return `${localization.value.common.hardDisk} ${props.index + 1}`
158
+
159
+ return `${localization.value.common.newHardDisk} *`
160
+ })
161
+
162
+ const maxHardDisk = computed<number>(() => {
163
+ if (props.type === 'exist') return $binary.gbToMb(props.hardDisk.size)
164
+
165
+ if (!storage.value) return 0
166
+
167
+ if (props.isEdit)
168
+ return storage.value.capacity.free_mb + $binary.gbToMb(props.hardDisk.size)
169
+
170
+ return storage.value.capacity.free_mb
171
+ })
172
+ const hardDiskTypeErrorLocalText = computed<string>(() => {
173
+ if (+sizeInMb.value > maxHardDisk.value) {
174
+ return localization.value.common.diskCapacitySpecifiedGreater
175
+ }
176
+
177
+ if (+sizeInMb.value <= 0) {
178
+ return localization.value.common.diskCapacityCannotZero
179
+ }
180
+
181
+ return ''
182
+ })
183
+
184
+ const hardDiskLocalAndApiErrorsTexts = computed<string>(() => {
185
+ const localError = hardDiskTypeErrorLocalText.value
186
+ const apiError = apiErrorLocal.value
187
+
188
+ let result = ''
189
+ if (localError && !apiError) result = localError
190
+ if (!localError && apiError) result = apiError
191
+ if (localError && apiError) result = localError + ', ' + apiError
192
+ if (!localError && apiError) result = apiError
193
+
194
+ return result
195
+ })
196
+
197
+ const deleteFilesFromDatastore = ref<boolean>(false)
198
+
199
+ const hardDiskType = ref<string>('gb')
200
+ const hardDiskTypeOptions = ref<UI_I_OptionItem[]>(
201
+ binaryOptionsFunc(localization.value)
202
+ )
203
+
204
+ const size = ref<number>(props.hardDisk.size) // Изначально всегда приходит в gb
205
+ const sizeInMb = computed<number>(() => {
206
+ if (hardDiskType.value === 'mb') {
207
+ return size.value
208
+ }
209
+
210
+ return $binary.universalFromTo(size.value, hardDiskType.value, 'mb')
211
+ })
212
+ const onValidateSize = (): void => {
213
+ if (props.type !== 'edit') return
214
+ if (sizeInMb.value < $binary.gbToMb(props.hardDisk.size)) {
215
+ size.value = $binary.universalFromTo(
216
+ props.hardDisk.size,
217
+ 'gb',
218
+ hardDiskType.value
219
+ )
220
+ }
221
+ }
222
+
223
+ const isDisabledSize = computed<boolean>(() => {
224
+ return props.type === 'exist' || (props.type === 'edit' && readOnly.value)
225
+ })
226
+
227
+ const location = ref<UI_I_DatastoreTableItem | null>(props.storage || null)
228
+ watch(
229
+ () => props.storage,
230
+ (newValue) => {
231
+ location.value = newValue
232
+ storage.value = newValue
233
+ }
234
+ )
235
+ const storage = ref<UI_I_DatastoreTableItem | null>(props.storage)
236
+ const onChangeStorage = (item: UI_I_DatastoreTableItem): void => {
237
+ storage.value = item
238
+ }
239
+
240
+ const diskProvisioning = ref<string>('thick')
241
+ const sharing = ref<string>('')
242
+ const shares = ref<number>(0)
243
+
244
+ const limitIops = ref<number>(16)
245
+ const limitIopsType = ref<string>('unlimited')
246
+ const limitIopsInvalid = ref<boolean>(false)
247
+
248
+ const diskMode = ref<string>('dependent')
249
+
250
+ const cache = ref<string>('none')
251
+
252
+ const bus = ref<string>('ide')
253
+
254
+ const readOnly = ref<boolean>(false)
255
+
256
+ const discard = ref<string>('')
257
+
258
+ const io = ref<string>('')
259
+
260
+ const target = ref<string>('')
261
+
262
+ watch(
263
+ [
264
+ sizeInMb,
265
+ storage,
266
+ diskProvisioning,
267
+ sharing,
268
+ limitIops,
269
+ limitIopsType,
270
+ diskMode,
271
+ cache,
272
+ bus,
273
+ deleteFilesFromDatastore,
274
+ (): void => props.type,
275
+ ],
276
+ () => {
277
+ const limitIopsLocal =
278
+ limitIopsType.value === 'unlimited' ? 0 : limitIops.value
279
+ const storageLocal: UI_I_SendDataNewHardDiskStorage = {
280
+ id: storage.value?.id || '',
281
+ name: storage.value?.name || '',
282
+ type: storage.value?.type_text || '',
283
+ pool: storage.value?.pool_name || '',
284
+ user: '',
285
+ endpoint: '',
286
+ password: '',
287
+ protocol: '',
288
+ options: '',
289
+ }
290
+
291
+ emits('send-data', {
292
+ create: props.hardDisk.create,
293
+ attach: props.hardDisk.attach,
294
+ source: props.hardDisk.source,
295
+ size: Math.ceil(sizeInMb.value),
296
+ bus: bus.value,
297
+ target: target.value,
298
+ storage: storageLocal,
299
+ device_type: 'disk',
300
+ provision_type: diskProvisioning.value,
301
+ disk_mode: diskMode.value,
302
+ sharing: sharing.value === 'yes',
303
+ read_only: readOnly.value,
304
+ shares: shares.value,
305
+ cache: cache.value,
306
+ io: io.value,
307
+ limit_iops: limitIopsLocal,
308
+ discard: discard.value,
309
+ capacity: Math.ceil(sizeInMb.value),
310
+ boot_order: props.hardDisk.boot_order,
311
+ detach: props.type === 'removed',
312
+ remove: props.type === 'removed' && deleteFilesFromDatastore.value, // Проверяем если удалили диск и указали Delete files from datastore
313
+ })
314
+ },
315
+ { immediate: true }
316
+ )
317
+
318
+ // Добавляем данные для редактирования
319
+ watch(
320
+ () => props.hardDisk,
321
+ (newValue) => {
322
+ // TODO refactoring
323
+ if (props.type === 'exist') {
324
+ diskProvisioning.value = newValue.provision_type || 'thick'
325
+ return
326
+ }
327
+ // if (props.type !== 'edit') return
328
+ if (props.type !== 'edit' && props.type !== 'clone') return
329
+
330
+ diskProvisioning.value = newValue.provision_type || 'thick'
331
+ sharing.value = newValue.sharing ? 'yes' : ''
332
+ shares.value = newValue.shares || 0
333
+ // limitIopsType.value = newValue.io === 'native' ? 'unlimited' : 'custom'
334
+ limitIopsType.value = newValue.limit_iops === 0 ? 'unlimited' : 'custom'
335
+ limitIops.value = newValue.limit_iops || 16
336
+ diskMode.value = newValue.disk_mode || 'dependent'
337
+ cache.value = newValue.cache || 'none'
338
+ bus.value = newValue.bus || 'ide'
339
+ readOnly.value = newValue.read_only || false
340
+ discard.value = newValue.discard || ''
341
+ io.value = newValue.io || ''
342
+ target.value = newValue.target || ''
343
+ },
344
+ { immediate: true }
345
+ )
346
+ watch(
347
+ isRunning,
348
+ (newValue) => {
349
+ if (newValue && props.type === 'new') {
350
+ bus.value = 'virtio'
351
+ }
352
+ },
353
+ { immediate: true }
354
+ )
355
+
356
+ const hardDiskInvalid = computed<boolean>(() => {
357
+ return !!hardDiskTypeErrorLocalText.value || limitIopsInvalid.value
358
+ })
359
+ watch(
360
+ hardDiskInvalid,
361
+ (newValue) => {
362
+ emits('invalid', newValue)
363
+ },
364
+ { immediate: true }
365
+ )
366
+ </script>
367
+
368
+ <style scoped lang="scss"></style>