bfg-common 1.5.262 → 1.5.264

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 (140) hide show
  1. package/CODE_STYLE.md +109 -109
  2. package/assets/localization/local_be.json +27 -2
  3. package/assets/localization/local_en.json +27 -2
  4. package/assets/localization/local_hy.json +27 -2
  5. package/assets/localization/local_kk.json +27 -2
  6. package/assets/localization/local_ru.json +27 -2
  7. package/assets/localization/local_zh.json +27 -2
  8. package/assets/scss/common/theme.scss +24 -0
  9. package/components/atoms/TheIcon3.vue +50 -50
  10. package/components/atoms/perPage/PerPage.vue +58 -58
  11. package/components/atoms/stack/StackBlock.vue +185 -185
  12. package/components/atoms/table/dataGrid/DataGrid.vue +1717 -1717
  13. package/components/atoms/table/dataGrid/lib/config/settingsTable.ts +94 -94
  14. package/components/atoms/table/dataGrid/lib/utils/export.ts +16 -16
  15. package/components/atoms/table/info/lib/models/interfaces.ts +10 -10
  16. package/components/atoms/tabs/VerticalTabs.vue +105 -105
  17. package/components/common/backup/storage/actions/add/Add.vue +250 -250
  18. package/components/common/backup/storage/actions/add/Old.vue +116 -116
  19. package/components/common/backup/storage/actions/add/lib/config/steps.ts +168 -168
  20. package/components/common/backup/storage/actions/add/steps/hostAccessibility/HostAccessibility.vue +52 -52
  21. package/components/common/backup/storage/actions/add/steps/name/New.vue +102 -102
  22. package/components/common/backup/storage/actions/add/steps/nameAndConfigure/NameAndConfigure.vue +42 -42
  23. package/components/common/backup/storage/actions/add/steps/readyComplete/ReadyComplete.vue +45 -45
  24. package/components/common/backup/storage/actions/add/steps/readyComplete/ReadyCompleteNew.vue +160 -160
  25. package/components/common/backup/storage/actions/add/steps/readyComplete/lib/config/propertiesDetails.ts +243 -243
  26. package/components/common/backup/storage/actions/delete/Delete.vue +65 -65
  27. package/components/common/browse/blocks/contents/filesNew/Skeleton.vue +18 -18
  28. package/components/common/context/lib/models/interfaces.ts +31 -31
  29. package/components/common/diagramMain/DiagramMain.vue +897 -897
  30. package/components/common/diagramMain/Header.vue +214 -214
  31. package/components/common/diagramMain/modals/viewSettings/viewSettings/ViewSettingsOld.vue +1 -1
  32. package/components/common/layout/theHeader/helpMenu/About.vue +82 -82
  33. package/components/common/layout/theHeader/userMenu/modals/preferences/view/ViewOld.vue +112 -112
  34. package/components/common/monitor/overview/OverviewOld.vue +139 -139
  35. package/components/common/pages/home/headline/Headline.vue +45 -45
  36. package/components/common/pages/home/headline/HeadlineOld.vue +42 -42
  37. package/components/common/pages/home/lib/models/interfaces.ts +48 -48
  38. package/components/common/pages/home/widgets/Widgets.vue +49 -49
  39. package/components/common/pages/home/widgets/WidgetsNew.vue +86 -86
  40. package/components/common/pages/home/widgets/WidgetsOld.vue +34 -34
  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/Vms.vue +26 -26
  44. package/components/common/pages/home/widgets/vms/VmsOld.vue +35 -35
  45. package/components/common/pages/home/widgets/vms/lib/config/items.ts +19 -19
  46. package/components/common/pages/licensing/listView/ListView.vue +2 -2
  47. package/components/common/pages/packages/Packages.vue +208 -208
  48. package/components/common/pages/shortcuts/block/BlockOld.vue +68 -68
  49. package/components/common/readyToComplete/ReadyToComplete.vue +17 -17
  50. package/components/common/recursionTree/RecursionTree.vue +223 -223
  51. package/components/common/resource/simple/Simple.vue +2 -2
  52. package/components/common/select/button/ButtonDropdown.vue +108 -108
  53. package/components/common/spiceConsole/Drawer.vue +377 -377
  54. package/components/common/spiceConsole/lib/models/interfaces.ts +5 -5
  55. package/components/common/vm/actions/add/Add.vue +823 -823
  56. package/components/common/vm/actions/add/Old.vue +382 -382
  57. package/components/common/vm/actions/add/folderTreeView/FolderTreeView.vue +72 -72
  58. package/components/common/vm/actions/add/folderTreeView/New.vue +40 -40
  59. package/components/common/vm/actions/add/folderTreeView/Old.vue +50 -50
  60. package/components/common/vm/actions/clone/lib/config/steps.ts +291 -291
  61. package/components/common/vm/actions/clone/toTemplate/lib/config/steps.ts +116 -116
  62. package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardwareOld.vue +321 -321
  63. package/components/common/vm/actions/common/customizeHardware/virtualHardware/browseView/BrowseView.vue +227 -227
  64. package/components/common/vm/actions/common/customizeHardware/virtualHardware/bus/Bus.vue +100 -100
  65. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/CdDvdDrive.vue +232 -232
  66. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/CdDvdDriveOld.vue +168 -168
  67. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/media/Media.vue +25 -25
  68. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/media/MediaNew.vue +78 -78
  69. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/media/MediaOld.vue +50 -50
  70. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/shares/Shares.vue +140 -140
  71. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/shares/lib/config/options.ts +28 -28
  72. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/tooltip/TooltipNew.vue +154 -154
  73. package/components/common/vm/actions/common/customizeHardware/virtualHardware/limit/Limit.vue +220 -220
  74. package/components/common/vm/actions/common/customizeHardware/virtualHardware/memory/Memory.vue +307 -307
  75. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/NewHardDisk.vue +385 -385
  76. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/location/Location.vue +154 -154
  77. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/location/LocationNew.vue +75 -75
  78. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/location/LocationOld.vue +85 -85
  79. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/NewNetwork.vue +288 -288
  80. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/location/new/table/lib/config/config.ts +94 -94
  81. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/macAddress/MacAddress.vue +119 -119
  82. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/NewPciDevice.vue +205 -205
  83. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/directPathIo/DirectPathIoNew.vue +66 -66
  84. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/directPathIo/DirectPathIoOld.vue +62 -62
  85. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/DynamicDirectPathIo.vue +31 -31
  86. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/DynamicDirectPathIoOld.vue +76 -76
  87. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/note/Note.vue +15 -15
  88. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/note/NoteNew.vue +42 -42
  89. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/note/NoteOld.vue +30 -30
  90. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/nvidiaGrid/NvidiaGridOld.vue +84 -84
  91. package/components/common/vm/actions/common/customizeHardware/virtualHardware/other/Other.vue +16 -16
  92. package/components/common/vm/actions/common/customizeHardware/virtualHardware/other/inputDevices/InputDevicesNew.vue +40 -40
  93. package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/VideoCard.vue +154 -147
  94. package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/VideoCardNew.vue +2 -1
  95. package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/VideoCardOld.vue +2 -1
  96. package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/numberDisplays/NumberDisplays.vue +53 -53
  97. package/components/common/vm/actions/common/customizeHardware/vmoptions/Vmoptions.vue +145 -145
  98. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/delay/Delay.vue +32 -32
  99. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/firmware/Firmware.vue +60 -60
  100. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/Order.vue +174 -174
  101. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/copyPaste/CopyPasteNew.vue +31 -31
  102. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/fileTransfer/FileTransferNew.vue +31 -31
  103. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/keymap/Keymap.vue +32 -32
  104. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/Password.vue +103 -103
  105. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/PasswordNew.vue +128 -128
  106. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/usbRedirection/UsbRedirection.vue +28 -28
  107. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/usbRedirection/UsbRedirectionNew.vue +39 -39
  108. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/usbRedirection/UsbRedirectionOld.vue +44 -44
  109. package/components/common/vm/actions/common/lib/utils/capabilities.ts +52 -52
  110. package/components/common/vm/actions/common/select/compatibility/Old.vue +107 -107
  111. package/components/common/vm/actions/common/select/computeResource/treeView/New.vue +44 -44
  112. package/components/common/vm/actions/common/select/computeResource/treeView/TreeView.vue +118 -118
  113. package/components/common/vm/actions/common/select/createType/CreateType.vue +38 -38
  114. package/components/common/vm/actions/common/select/createType/lib/models/interfaces.ts +5 -5
  115. package/components/common/vm/actions/common/select/name/Name.vue +174 -174
  116. package/components/common/vm/actions/common/select/os/Old.vue +152 -152
  117. package/components/common/vm/actions/common/select/os/Os.vue +139 -139
  118. package/components/common/vm/actions/common/select/storage/new/lib/models/interfaces.ts +5 -5
  119. package/components/common/vm/actions/common/select/storage/new/lib/utils/utils.ts +21 -21
  120. package/components/common/vm/actions/editSettings/new/Skeleton.vue +88 -88
  121. package/components/common/vmt/actions/add/Add.vue +641 -641
  122. package/components/common/vmt/actions/add/lib/config/steps.ts +107 -107
  123. package/components/common/vmt/actions/add/lib/models/interfaces.ts +23 -23
  124. package/components/common/wizards/vm/migrate/lib/config/constructDataReady.ts +220 -220
  125. package/components/common/wizards/vm/migrate/lib/config/steps.ts +157 -157
  126. package/components/common/wizards/vm/migrate/lib/validations.ts +68 -68
  127. package/components/common/wizards/vm/migrate/select/computeResource/tableView/TableView.vue +135 -135
  128. package/components/common/wizards/vm/migrate/select/network/Network.vue +103 -103
  129. package/components/common/wizards/vm/migrate/select/network/table/network/lib/config/advancedTable.ts +91 -91
  130. package/composables/productNameLocal.ts +30 -30
  131. package/composables/useAppVersion.ts +21 -21
  132. package/package.json +2 -2
  133. package/plugins/date.ts +233 -233
  134. package/plugins/panelStates.ts +70 -70
  135. package/plugins/text.ts +59 -59
  136. package/public/spice-console/lib/images/bitmap.js +203 -203
  137. package/public/spice-console/network/spicechannel.js +387 -387
  138. package/store/main/mutations.ts +7 -7
  139. package/store/main/state.ts +7 -7
  140. package/store/tasks/mappers/recentTasks.ts +64 -64
@@ -1,94 +1,94 @@
1
- import type { UI_ColumnSettingsStrategy } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
2
- import type {
3
- UI_I_ColumnKey,
4
- UI_I_HeadItem,
5
- } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
6
- import type { UI_I_DropdownButtonItem } from '~/components/common/select/button/lib/models/interfaces'
7
- import type { UI_I_Localization } from '~/lib/models/interfaces'
8
- import {
9
- constructColumnKey,
10
- constructHeadItem,
11
- } from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
12
-
13
- export const defaultColumnKeys = (
14
- items: [string, boolean, string, string][],
15
- strategy?: UI_ColumnSettingsStrategy
16
- ): UI_I_ColumnKey[] => {
17
- const result: UI_I_ColumnKey[] = []
18
- items.forEach((item, i) => {
19
- let col: string = `col${i}` // Стандартное значение по умолчанию
20
-
21
- if (strategy) {
22
- // Проходим по ключам объекта и ищем соответствие индекса i в значениях
23
- for (const key in strategy) {
24
- if (strategy[key].includes(i)) {
25
- col = key
26
- break
27
- }
28
- }
29
- }
30
-
31
- result.push(
32
- constructColumnKey(col, item[0], item[1], `show-column-${item[3]}`)
33
- )
34
- })
35
- return result
36
- }
37
-
38
- export const defaultHeadItems = (
39
- items: [string, boolean, string, string][],
40
- strategy?: UI_ColumnSettingsStrategy
41
- ): UI_I_HeadItem[] => {
42
- const result: UI_I_HeadItem[] = []
43
- items.forEach((item, i) => {
44
- let col: string = `col${i}` // Стандартное значение по умолчанию
45
-
46
- if (strategy) {
47
- // Проходим по ключам объекта и ищем соответствие индекса i в значениях
48
- for (const key in strategy) {
49
- if (strategy[key].includes(i)) {
50
- col = key
51
- break
52
- }
53
- }
54
- }
55
-
56
- result.push(
57
- constructHeadItem(
58
- col,
59
- item[0],
60
- item[3],
61
- false,
62
- item[2],
63
- undefined,
64
- item[3]
65
- )
66
- )
67
- })
68
- return result
69
- }
70
-
71
- export const exportItemsFunc = (
72
- localization: UI_I_Localization,
73
- rows: number,
74
- selectedRows: number,
75
- testId: string
76
- ): UI_I_DropdownButtonItem[] => {
77
- return [
78
- {
79
- text: localization.common.allRowsCount.replace('{0}', '' + rows),
80
- type: '0',
81
- disabled: false,
82
- testId: `${testId}-export-all`,
83
- },
84
- {
85
- text: localization.common.selectedRowsCount.replace(
86
- '{0}',
87
- '' + selectedRows
88
- ),
89
- type: '1',
90
- disabled: false,
91
- testId: `${testId}-export-selected`,
92
- },
93
- ]
94
- }
1
+ import type { UI_ColumnSettingsStrategy } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
2
+ import type {
3
+ UI_I_ColumnKey,
4
+ UI_I_HeadItem,
5
+ } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
6
+ import type { UI_I_DropdownButtonItem } from '~/components/common/select/button/lib/models/interfaces'
7
+ import type { UI_I_Localization } from '~/lib/models/interfaces'
8
+ import {
9
+ constructColumnKey,
10
+ constructHeadItem,
11
+ } from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
12
+
13
+ export const defaultColumnKeys = (
14
+ items: [string, boolean, string, string][],
15
+ strategy?: UI_ColumnSettingsStrategy
16
+ ): UI_I_ColumnKey[] => {
17
+ const result: UI_I_ColumnKey[] = []
18
+ items.forEach((item, i) => {
19
+ let col: string = `col${i}` // Стандартное значение по умолчанию
20
+
21
+ if (strategy) {
22
+ // Проходим по ключам объекта и ищем соответствие индекса i в значениях
23
+ for (const key in strategy) {
24
+ if (strategy[key].includes(i)) {
25
+ col = key
26
+ break
27
+ }
28
+ }
29
+ }
30
+
31
+ result.push(
32
+ constructColumnKey(col, item[0], item[1], `show-column-${item[3]}`)
33
+ )
34
+ })
35
+ return result
36
+ }
37
+
38
+ export const defaultHeadItems = (
39
+ items: [string, boolean, string, string][],
40
+ strategy?: UI_ColumnSettingsStrategy
41
+ ): UI_I_HeadItem[] => {
42
+ const result: UI_I_HeadItem[] = []
43
+ items.forEach((item, i) => {
44
+ let col: string = `col${i}` // Стандартное значение по умолчанию
45
+
46
+ if (strategy) {
47
+ // Проходим по ключам объекта и ищем соответствие индекса i в значениях
48
+ for (const key in strategy) {
49
+ if (strategy[key].includes(i)) {
50
+ col = key
51
+ break
52
+ }
53
+ }
54
+ }
55
+
56
+ result.push(
57
+ constructHeadItem(
58
+ col,
59
+ item[0],
60
+ item[3],
61
+ false,
62
+ item[2],
63
+ undefined,
64
+ item[3]
65
+ )
66
+ )
67
+ })
68
+ return result
69
+ }
70
+
71
+ export const exportItemsFunc = (
72
+ localization: UI_I_Localization,
73
+ rows: number,
74
+ selectedRows: number,
75
+ testId: string
76
+ ): UI_I_DropdownButtonItem[] => {
77
+ return [
78
+ {
79
+ text: localization.common.allRowsCount.replace('{0}', '' + rows),
80
+ type: '0',
81
+ disabled: false,
82
+ testId: `${testId}-export-all`,
83
+ },
84
+ {
85
+ text: localization.common.selectedRowsCount.replace(
86
+ '{0}',
87
+ '' + selectedRows
88
+ ),
89
+ type: '1',
90
+ disabled: false,
91
+ testId: `${testId}-export-selected`,
92
+ },
93
+ ]
94
+ }
@@ -1,16 +1,16 @@
1
- export const generateCsvAndDownload = (rows: HTMLElement[]): void => {
2
- const content: string[] = []
3
- rows.forEach((row: HTMLElement) => {
4
- content.push(row.innerText.replaceAll(';', ',').replaceAll('\n', ';'))
5
- })
6
-
7
- const csvContent = 'data:text/csv;charset=utf-8,' + content.join('\n')
8
-
9
- const encodedUri = encodeURI(csvContent)
10
- const link = document.createElement('a')
11
- link.setAttribute('href', encodedUri)
12
- link.setAttribute('download', 'my_data.csv')
13
- document.body.appendChild(link)
14
-
15
- link.click()
16
- }
1
+ export const generateCsvAndDownload = (rows: HTMLElement[]): void => {
2
+ const content: string[] = []
3
+ rows.forEach((row: HTMLElement) => {
4
+ content.push(row.innerText.replaceAll(';', ',').replaceAll('\n', ';'))
5
+ })
6
+
7
+ const csvContent = 'data:text/csv;charset=utf-8,' + content.join('\n')
8
+
9
+ const encodedUri = encodeURI(csvContent)
10
+ const link = document.createElement('a')
11
+ link.setAttribute('href', encodedUri)
12
+ link.setAttribute('download', 'my_data.csv')
13
+ document.body.appendChild(link)
14
+
15
+ link.click()
16
+ }
@@ -1,10 +1,10 @@
1
- export interface UI_I_TableInfoItem {
2
- label: string
3
- value: any
4
- isProperty?: boolean
5
- key?: string
6
- localization?: string
7
- localizationTemplate?: string
8
- isCapital?: boolean
9
- iconName?: string
10
- }
1
+ export interface UI_I_TableInfoItem {
2
+ label: string
3
+ value: any
4
+ isProperty?: boolean
5
+ key?: string
6
+ localization?: string
7
+ localizationTemplate?: string
8
+ isCapital?: boolean
9
+ iconName?: string
10
+ }
@@ -1,105 +1,105 @@
1
- <template>
2
- <nav class="sidenav vertical-groups-sidenav">
3
- <ul class="sidenav-content">
4
- <li
5
- v-for="(item, key) in props.items"
6
- :id="`${props.testId}-item-${key}`"
7
- :data-id="item.testId"
8
- :key="item.value"
9
- :class="[
10
- 'vertical-nav-link group-nav-link',
11
- { active: item.value === props.modelValue },
12
- { disabled: item.disabled },
13
- ]"
14
- :title="item.title || item.text"
15
- @click="selectItem(item)"
16
- >
17
- {{ item.text }}
18
- </li>
19
- </ul>
20
- </nav>
21
- </template>
22
- <script setup lang="ts">
23
- import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
24
-
25
- const props = withDefaults(
26
- defineProps<{
27
- modelValue: string | number
28
- items: UI_I_VerticalTabs[]
29
- hasErrorMessages?: number | boolean
30
- testId?: string
31
- }>(),
32
- { testId: 'ui-vertical-tabs' }
33
- )
34
-
35
- const emits = defineEmits<{
36
- (event: 'update:model-value', value: string): void
37
- (event: 'set-alert'): void
38
- }>()
39
-
40
- const selectItem = ({
41
- value,
42
- disabled,
43
- }: {
44
- value: string
45
- disabled: boolean
46
- }): void => {
47
- if (disabled) return
48
- if (
49
- props.hasErrorMessages === undefined ||
50
- props.hasErrorMessages === 0 ||
51
- props.hasErrorMessages === false
52
- ) {
53
- emits('update:model-value', value)
54
- return
55
- }
56
- emits('set-alert')
57
- }
58
- </script>
59
-
60
- <style>
61
- :root {
62
- --vertical-tabs-nav-link: --grey-100;
63
- --vertical-tabs-bg-color: #fafafa;
64
- }
65
- :root.dark-theme {
66
- --vertical-tabs-nav-link: #ffffff;
67
- --vertical-tabs-bg-color: transparent;
68
- }
69
- </style>
70
- <style lang="scss" scoped>
71
- .vertical-groups-sidenav {
72
- min-height: 94%;
73
- background-color: var(--vertical-tabs-bg-color);
74
-
75
- .vertical-nav-link {
76
- display: inline-block;
77
- width: 100%;
78
- margin-top: 5px;
79
- padding-left: 12px;
80
- color: var(--vertical-tabs-nav-link);
81
- border-bottom: 1px solid transparent;
82
- text-decoration: none;
83
- font-size: 14px;
84
- cursor: pointer;
85
- border-radius: 2.5px 0 0 2.5px;
86
-
87
- &.active {
88
- color: var(--vertical-nav-active-item-color);
89
- background: var(--vertical-nav-active-bg-color);
90
- border-bottom: 1px solid transparent;
91
- }
92
-
93
- &.disabled {
94
- cursor: not-allowed;
95
- opacity: 0.6;
96
- }
97
-
98
- &:hover:not(.active) {
99
- background: var(--vertical-nav-hover-bg-color);
100
- color: var(--blue-950);
101
- border-bottom: 1px solid #666;
102
- }
103
- }
104
- }
105
- </style>
1
+ <template>
2
+ <nav class="sidenav vertical-groups-sidenav">
3
+ <ul class="sidenav-content">
4
+ <li
5
+ v-for="(item, key) in props.items"
6
+ :id="`${props.testId}-item-${key}`"
7
+ :data-id="item.testId"
8
+ :key="item.value"
9
+ :class="[
10
+ 'vertical-nav-link group-nav-link',
11
+ { active: item.value === props.modelValue },
12
+ { disabled: item.disabled },
13
+ ]"
14
+ :title="item.title || item.text"
15
+ @click="selectItem(item)"
16
+ >
17
+ {{ item.text }}
18
+ </li>
19
+ </ul>
20
+ </nav>
21
+ </template>
22
+ <script setup lang="ts">
23
+ import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
24
+
25
+ const props = withDefaults(
26
+ defineProps<{
27
+ modelValue: string | number
28
+ items: UI_I_VerticalTabs[]
29
+ hasErrorMessages?: number | boolean
30
+ testId?: string
31
+ }>(),
32
+ { testId: 'ui-vertical-tabs' }
33
+ )
34
+
35
+ const emits = defineEmits<{
36
+ (event: 'update:model-value', value: string): void
37
+ (event: 'set-alert'): void
38
+ }>()
39
+
40
+ const selectItem = ({
41
+ value,
42
+ disabled,
43
+ }: {
44
+ value: string
45
+ disabled: boolean
46
+ }): void => {
47
+ if (disabled) return
48
+ if (
49
+ props.hasErrorMessages === undefined ||
50
+ props.hasErrorMessages === 0 ||
51
+ props.hasErrorMessages === false
52
+ ) {
53
+ emits('update:model-value', value)
54
+ return
55
+ }
56
+ emits('set-alert')
57
+ }
58
+ </script>
59
+
60
+ <style>
61
+ :root {
62
+ --vertical-tabs-nav-link: --grey-100;
63
+ --vertical-tabs-bg-color: #fafafa;
64
+ }
65
+ :root.dark-theme {
66
+ --vertical-tabs-nav-link: #ffffff;
67
+ --vertical-tabs-bg-color: transparent;
68
+ }
69
+ </style>
70
+ <style lang="scss" scoped>
71
+ .vertical-groups-sidenav {
72
+ min-height: 94%;
73
+ background-color: var(--vertical-tabs-bg-color);
74
+
75
+ .vertical-nav-link {
76
+ display: inline-block;
77
+ width: 100%;
78
+ margin-top: 5px;
79
+ padding-left: 12px;
80
+ color: var(--vertical-tabs-nav-link);
81
+ border-bottom: 1px solid transparent;
82
+ text-decoration: none;
83
+ font-size: 14px;
84
+ cursor: pointer;
85
+ border-radius: 2.5px 0 0 2.5px;
86
+
87
+ &.active {
88
+ color: var(--vertical-nav-active-item-color);
89
+ background: var(--vertical-nav-active-bg-color);
90
+ border-bottom: 1px solid transparent;
91
+ }
92
+
93
+ &.disabled {
94
+ cursor: not-allowed;
95
+ opacity: 0.6;
96
+ }
97
+
98
+ &:hover:not(.active) {
99
+ background: var(--vertical-nav-hover-bg-color);
100
+ color: var(--blue-950);
101
+ border-bottom: 1px solid #666;
102
+ }
103
+ }
104
+ }
105
+ </style>