bfg-common 1.5.381 → 1.5.383

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 (144) 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 +17 -4
  7. package/assets/localization/local_en.json +17 -4
  8. package/assets/localization/local_hy.json +17 -4
  9. package/assets/localization/local_kk.json +17 -4
  10. package/assets/localization/local_ru.json +17 -4
  11. package/assets/localization/local_zh.json +17 -4
  12. package/components/atoms/TheIcon3.vue +50 -50
  13. package/components/atoms/collapse/CollapseNav.vue +170 -170
  14. package/components/atoms/collapse/CollapseNavItem.vue +226 -226
  15. package/components/atoms/nav/NavBar.vue +147 -147
  16. package/components/atoms/perPage/PerPage.vue +58 -58
  17. package/components/atoms/table/dataGrid/DataGrid.vue +1717 -1717
  18. package/components/atoms/table/dataGrid/lib/config/settingsTable.ts +94 -94
  19. package/components/atoms/table/dataGrid/lib/utils/export.ts +16 -16
  20. package/components/atoms/tabs/VerticalTabs.vue +105 -105
  21. package/components/common/backup/storage/actions/add/lib/config/steps.ts +168 -168
  22. package/components/common/backup/storage/actions/add/steps/hostAccessibility/HostAccessibility.vue +52 -52
  23. package/components/common/backup/storage/actions/add/steps/readyComplete/ReadyComplete.vue +45 -45
  24. package/components/common/backup/storage/actions/delete/Delete.vue +65 -65
  25. package/components/common/browse/blocks/Container.vue +234 -234
  26. package/components/common/browse/blocks/contents/filesNew/Skeleton.vue +18 -18
  27. package/components/common/context/lib/models/interfaces.ts +33 -33
  28. package/components/common/diagramMain/modals/lib/config/networkModal.ts +398 -398
  29. package/components/common/diagramMain/network/Network.vue +141 -141
  30. package/components/common/layout/theHeader/helpMenu/About.vue +82 -82
  31. package/components/common/layout/theHeader/userMenu/modals/preferences/view/ViewOld.vue +112 -112
  32. package/components/common/monitor/overview/OverviewOld.vue +139 -139
  33. package/components/common/pages/home/headline/Headline.vue +45 -45
  34. package/components/common/pages/home/headline/HeadlineOld.vue +42 -42
  35. package/components/common/pages/home/lib/models/interfaces.ts +48 -48
  36. package/components/common/pages/home/widgets/Widgets.vue +49 -49
  37. package/components/common/pages/home/widgets/WidgetsNew.vue +88 -88
  38. package/components/common/pages/home/widgets/WidgetsOld.vue +36 -36
  39. package/components/common/pages/home/widgets/hosts/Hosts.vue +27 -27
  40. package/components/common/pages/home/widgets/hosts/lib/config/items.ts +23 -23
  41. package/components/common/pages/home/widgets/vms/Vms.vue +26 -26
  42. package/components/common/pages/home/widgets/vms/VmsOld.vue +35 -35
  43. package/components/common/pages/home/widgets/vms/lib/config/items.ts +19 -19
  44. package/components/common/pages/packages/Packages.vue +208 -208
  45. package/components/common/pages/shortcuts/block/BlockOld.vue +68 -68
  46. package/components/common/readyToComplete/New.vue +129 -129
  47. package/components/common/readyToComplete/ReadyToComplete.vue +17 -17
  48. package/components/common/recursionTree/RecursionTree.vue +223 -223
  49. package/components/common/select/button/ButtonDropdown.vue +112 -112
  50. package/components/common/spiceConsole/Drawer.vue +381 -381
  51. package/components/common/spiceConsole/SpiceConsole.vue +127 -127
  52. package/components/common/spiceConsole/lib/models/interfaces.ts +5 -5
  53. package/components/common/tools/Actions.vue +207 -207
  54. package/components/common/vm/actions/add/Old.vue +388 -388
  55. package/components/common/vm/actions/add/folderTreeView/FolderTreeView.vue +72 -72
  56. package/components/common/vm/actions/add/folderTreeView/New.vue +40 -40
  57. package/components/common/vm/actions/add/folderTreeView/Old.vue +50 -50
  58. package/components/common/vm/actions/clone/Clone.vue +823 -823
  59. package/components/common/vm/actions/clone/lib/config/steps.ts +291 -291
  60. package/components/common/vm/actions/clone/toTemplate/lib/config/steps.ts +116 -116
  61. package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardwareOld.vue +321 -321
  62. package/components/common/vm/actions/common/customizeHardware/virtualHardware/browseView/BrowseView.vue +227 -227
  63. package/components/common/vm/actions/common/customizeHardware/virtualHardware/bus/Bus.vue +100 -100
  64. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/CdDvdDrive.vue +232 -232
  65. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/CdDvdDriveOld.vue +168 -168
  66. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/media/Media.vue +25 -25
  67. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/media/MediaNew.vue +78 -78
  68. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/media/MediaOld.vue +50 -50
  69. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/shares/Shares.vue +140 -140
  70. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/shares/lib/config/options.ts +28 -28
  71. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/tooltip/TooltipNew.vue +154 -154
  72. package/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/config/dropdownItems.ts +155 -155
  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/LocationOld.vue +85 -85
  78. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/NewNetwork.vue +288 -288
  79. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/location/new/table/lib/config/config.ts +94 -94
  80. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/macAddress/MacAddress.vue +119 -119
  81. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/NewPciDevice.vue +205 -205
  82. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/directPathIo/DirectPathIoNew.vue +66 -66
  83. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/directPathIo/DirectPathIoOld.vue +62 -62
  84. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/DynamicDirectPathIo.vue +31 -31
  85. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/DynamicDirectPathIoOld.vue +76 -76
  86. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/note/Note.vue +15 -15
  87. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/note/NoteNew.vue +42 -42
  88. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/note/NoteOld.vue +30 -30
  89. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/nvidiaGrid/NvidiaGridOld.vue +84 -84
  90. package/components/common/vm/actions/common/customizeHardware/virtualHardware/other/Other.vue +16 -16
  91. package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/VideoCard.vue +154 -154
  92. package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/numberDisplays/NumberDisplays.vue +53 -53
  93. package/components/common/vm/actions/common/customizeHardware/vmoptions/Vmoptions.vue +155 -155
  94. package/components/common/vm/actions/common/customizeHardware/vmoptions/VmoptionsNew.vue +130 -130
  95. package/components/common/vm/actions/common/customizeHardware/vmoptions/VmoptionsOld.vue +113 -113
  96. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/delay/Delay.vue +32 -32
  97. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/firmware/Firmware.vue +60 -60
  98. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/Order.vue +174 -174
  99. package/components/common/vm/actions/common/customizeHardware/vmoptions/generalOptions/GeneralOptions.vue +95 -95
  100. package/components/common/vm/actions/common/customizeHardware/vmoptions/generalOptions/GeneralOptionsOld.vue +155 -155
  101. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/keymap/Keymap.vue +32 -32
  102. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/keymap/KeymapOld.vue +44 -44
  103. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/password/Password.vue +103 -103
  104. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/usbRedirection/UsbRedirection.vue +28 -28
  105. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/usbRedirection/UsbRedirectionOld.vue +44 -44
  106. package/components/common/vm/actions/common/select/compatibility/Old.vue +107 -107
  107. package/components/common/vm/actions/common/select/computeResource/ComputeResource.vue +143 -143
  108. package/components/common/vm/actions/common/select/computeResource/New.vue +184 -184
  109. package/components/common/vm/actions/common/select/computeResource/treeView/TreeView.vue +131 -131
  110. package/components/common/vm/actions/common/select/createType/CreateType.vue +38 -38
  111. package/components/common/vm/actions/common/select/createType/lib/config/items.ts +48 -48
  112. package/components/common/vm/actions/common/select/createType/lib/models/interfaces.ts +5 -5
  113. package/components/common/vm/actions/common/select/name/Name.vue +174 -174
  114. package/components/common/vm/actions/common/select/os/Old.vue +152 -152
  115. package/components/common/vm/actions/common/select/os/Os.vue +139 -139
  116. package/components/common/vm/actions/common/select/storage/Storage.vue +155 -155
  117. package/components/common/vm/actions/common/select/storage/new/New.vue +300 -300
  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/EditSettings.vue +242 -242
  121. package/components/common/vm/actions/editSettings/new/Skeleton.vue +88 -88
  122. package/components/common/vmt/actions/add/lib/models/interfaces.ts +23 -23
  123. package/components/common/wizards/network/add/steps/SelectConnectionType.vue +104 -104
  124. package/components/common/wizards/network/add/steps/SelectedTargetDevice.vue +467 -467
  125. package/components/common/wizards/vm/migrate/Migrate.vue +349 -349
  126. package/components/common/wizards/vm/migrate/lib/config/constructDataReady.ts +220 -220
  127. package/components/common/wizards/vm/migrate/lib/config/steps.ts +157 -157
  128. package/components/common/wizards/vm/migrate/lib/validations.ts +68 -68
  129. package/components/common/wizards/vm/migrate/select/network/Network.vue +103 -103
  130. package/components/common/wizards/vm/migrate/select/network/table/network/lib/config/advancedTable.ts +91 -91
  131. package/components/common/wizards/vm/migrate/select/type/lib/config/typeOptions.ts +45 -45
  132. package/composables/productNameLocal.ts +30 -30
  133. package/composables/useAppVersion.ts +21 -21
  134. package/lib/models/interfaces.ts +1 -0
  135. package/lib/models/types.ts +1 -0
  136. package/package.json +1 -1
  137. package/plugins/date.ts +233 -233
  138. package/plugins/panelStates.ts +70 -70
  139. package/plugins/text.ts +59 -59
  140. package/public/spice-console/lib/images/bitmap.js +203 -203
  141. package/public/spice-console/network/spicechannel.js +390 -390
  142. package/store/main/mutations.ts +7 -7
  143. package/store/main/state.ts +7 -7
  144. 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,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>