bfg-common 1.3.206 → 1.3.207

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.
@@ -1,89 +1,95 @@
1
- <template>
2
- <div :class="['alert', status]">
3
- <div class="alert-items">
4
- <slot v-if="$slots.headline" name="headline" :icon="iconName" />
5
-
6
- <slot name="body">
7
- <div v-for="(item, key) in items" :key="key" class="alert-item">
8
- <div v-if="!$slots.headline" class="alert-icon-wrapper">
9
- <atoms-the-icon
10
- :class="['alert-icon', iconName]"
11
- :name="iconName"
12
- />
13
- </div>
14
-
15
- <slot :item="item" :index="key">
16
- <span class="alert-text">{{ item }}</span>
17
- </slot>
18
- </div>
19
- </slot>
20
- </div>
21
- <button
22
- v-if="!hideCloseIcon"
23
- :id="`${props.testId}-close-button`"
24
- class="close"
25
- @click="removeAlert"
26
- >
27
- <atoms-the-icon class="alert-icon" name="close" />
28
- </button>
29
- </div>
30
- </template>
31
-
32
- <script setup lang="ts">
33
- import { UI_E_IconsByStatus } from '~/components/atoms/alert/lib/models/enums'
34
-
35
- const props = withDefaults(
36
- defineProps<{
37
- testId?: string
38
- status: 'alert-danger' | 'alert-warning' | 'alert-info' | 'alert-success'
39
- items: string[] | any
40
- hideCloseIcon?: boolean
41
- }>(),
42
- { testId: 'ui-alert' }
43
- )
44
- const emits = defineEmits<{
45
- (event: 'remove'): void
46
- }>()
47
-
48
- const removeAlert = (): void => {
49
- emits('remove')
50
- }
51
- const iconName = computed<string>(() => UI_E_IconsByStatus[props.status])
52
- </script>
53
-
54
- <style scoped lang="scss">
55
- .alert {
56
- &-info {
57
- fill: #004d8a;
58
- }
59
- &-warning {
60
- background-color: var(--alert-warning-bg-color);
61
- border: 1px solid var(--alert-warning-border-color);
62
- fill: var(--alert-warning-icon-color);
63
- }
64
-
65
- &-icon {
66
- width: 20px;
67
- height: 20px;
68
- }
69
- &-text {
70
- color: var(--global-font-color5);
71
- }
72
-
73
- button.close:focus {
74
- box-shadow: none;
75
- }
76
- }
77
- </style>
78
- <style>
79
- :root {
80
- --alert-warning-icon-color: #d28f00;
81
- --alert-warning-bg-color: #fef3b5;
82
- --alert-warning-border-color: #d28f00;
83
- }
84
- :root.dark-theme {
85
- --alert-warning-icon-color: currentColor;
86
- --alert-warning-bg-color: #816709;
87
- --alert-warning-border-color: transparent;
88
- }
89
- </style>
1
+ <template>
2
+ <div :class="['alert', status]">
3
+ <div class="alert-items">
4
+ <slot v-if="$slots.headline" name="headline" :icon="iconName" />
5
+
6
+ <slot name="body">
7
+ <div v-for="(item, key) in items" :key="key" class="alert-item">
8
+ <div v-if="!$slots.headline" class="alert-icon-wrapper">
9
+ <atoms-the-icon
10
+ :class="['alert-icon', iconName]"
11
+ :name="iconName"
12
+ />
13
+ </div>
14
+
15
+ <slot :item="item" :index="key">
16
+ <span class="alert-text">{{ item }}</span>
17
+ </slot>
18
+ </div>
19
+ </slot>
20
+ </div>
21
+ <button
22
+ v-if="!hideCloseIcon"
23
+ :id="`${props.testId}-close-button`"
24
+ class="close"
25
+ @click="removeAlert"
26
+ >
27
+ <atoms-the-icon class="alert-icon" name="close" />
28
+ </button>
29
+ </div>
30
+ </template>
31
+
32
+ <script setup lang="ts">
33
+ import { UI_E_IconsByStatus } from '~/components/atoms/alert/lib/models/enums'
34
+ import type {
35
+ UI_T_AlertStatus,
36
+ UI_T_AlertIcon,
37
+ } from '~/components/atoms/alert/lib/models/types'
38
+
39
+ const props = withDefaults(
40
+ defineProps<{
41
+ status: UI_T_AlertStatus
42
+ items: string[] | any
43
+ testId?: string
44
+ hideCloseIcon?: boolean
45
+ }>(),
46
+ { testId: 'ui-alert' }
47
+ )
48
+ const emits = defineEmits<{
49
+ (event: 'remove'): void
50
+ }>()
51
+
52
+ const removeAlert = (): void => {
53
+ emits('remove')
54
+ }
55
+ const iconName = computed<UI_T_AlertIcon>(
56
+ () => UI_E_IconsByStatus[props.status as UI_T_AlertStatus]
57
+ )
58
+ </script>
59
+
60
+ <style scoped lang="scss">
61
+ .alert {
62
+ &-info {
63
+ fill: #004d8a;
64
+ }
65
+ &-warning {
66
+ background-color: var(--alert-warning-bg-color);
67
+ border: 1px solid var(--alert-warning-border-color);
68
+ fill: var(--alert-warning-icon-color);
69
+ }
70
+
71
+ &-icon {
72
+ width: 20px;
73
+ height: 20px;
74
+ }
75
+ &-text {
76
+ color: var(--global-font-color5);
77
+ }
78
+
79
+ button.close:focus {
80
+ box-shadow: none;
81
+ }
82
+ }
83
+ </style>
84
+ <style>
85
+ :root {
86
+ --alert-warning-icon-color: #d28f00;
87
+ --alert-warning-bg-color: #fef3b5;
88
+ --alert-warning-border-color: #d28f00;
89
+ }
90
+ :root.dark-theme {
91
+ --alert-warning-icon-color: currentColor;
92
+ --alert-warning-bg-color: #816709;
93
+ --alert-warning-border-color: transparent;
94
+ }
95
+ </style>
@@ -1,167 +1,170 @@
1
- <template>
2
- <div class="notification">
3
- <div
4
- class="notification-container-wrap animation"
5
- :class="{ active: isActive }"
6
- >
7
- <div class="notification-container">
8
- <div v-show="props.show" class="toast">
9
- <atoms-the-icon
10
- class="toast-icon"
11
- :class="iconName !== 'info' && 'with'"
12
- :name="iconName"
13
- />
14
- <div class="toast-content">
15
- <div class="flex-align-center flex-space-between">
16
- <h4>{{ props.title }}</h4>
17
- <button
18
- :id="`${props.testId}-close-button`"
19
- :title="localization.closeNotification"
20
- @click="hide"
21
- >
22
- <atoms-the-icon name="close" />
23
- </button>
24
- </div>
25
- <div class="description">
26
- <slot>
27
- <p class="pre-line">{{ props.description }}</p>
28
- </slot>
29
- </div>
30
- </div>
31
- </div>
32
- </div>
33
- </div>
34
- </div>
35
- </template>
36
-
37
- <script setup lang="ts">
38
- import { UI_I_Localization } from '~/lib/models/interfaces'
39
- import { UI_E_IconsByStatusNotification } from '~/components/atoms/alert/lib/models/enums'
40
- import { UI_T_Status } from '~/components/atoms/alert/lib/models/types'
41
-
42
- const props = withDefaults(
43
- defineProps<{
44
- status: UI_T_Status
45
- id: number
46
- show: boolean
47
- title: string
48
- description: string
49
- testId?: string
50
- }>(),
51
- { testId: 'ui-notification' }
52
- )
53
- const emits = defineEmits<{
54
- (event: 'hide', value: number): void
55
- }>()
56
-
57
- const localization = computed<UI_I_Localization>(() => useLocal())
58
- const hide = (): void => {
59
- isActive.value = false
60
-
61
- setTimeout(() => {
62
- emits('hide', props.id)
63
- }, 200)
64
- }
65
- const isActive = ref<boolean>(false)
66
-
67
- const iconName = computed<string>(
68
- () => UI_E_IconsByStatusNotification[props.status]
69
- )
70
-
71
- setTimeout(() => {
72
- isActive.value = true
73
- }, 1000)
74
- </script>
75
-
76
- <style scoped lang="scss">
77
- @import '~/assets/scss/common/mixins.scss';
78
-
79
- .notification {
80
- .notification-container-wrap {
81
- display: block;
82
- margin-top: 10px;
83
- width: 414px;
84
- position: relative;
85
- right: -600px;
86
- opacity: 0;
87
-
88
- &.active {
89
- right: 0;
90
- opacity: 1;
91
- }
92
-
93
- .notification-container {
94
- @include flex($dir: column, $just: flex-end);
95
- margin-right: 0;
96
-
97
- .toast {
98
- @include flex($dir: row);
99
- background-color: #25333d;
100
- border-radius: 3px;
101
- box-shadow: 0 2px 10px rgb(0 0 0 / 40%);
102
- margin: 0;
103
- padding: 12px;
104
- transform: scale(1);
105
- transform-origin: 100% 0;
106
- width: 100%;
107
-
108
- .toast-icon {
109
- width: 36px;
110
- height: 36px;
111
- &.with {
112
- width: 26px;
113
- height: 26px;
114
- }
115
- }
116
-
117
- .toast-content {
118
- padding-left: 12px;
119
- width: 100%;
120
-
121
- h4 {
122
- color: #e9ecef;
123
- font-size: 14px;
124
- font-weight: 500;
125
- line-height: 24px;
126
- margin-top: 0;
127
- max-width: 240px;
128
- overflow: hidden;
129
- text-overflow: ellipsis;
130
- white-space: nowrap;
131
- }
132
-
133
- button {
134
- background: transparent;
135
- border: none;
136
- border-radius: 100%;
137
- cursor: pointer;
138
- display: inline-block;
139
- height: 30px;
140
- position: absolute;
141
- right: 8px;
142
- top: 8px;
143
- width: 30px;
144
-
145
- svg {
146
- width: 16px;
147
- height: 16px;
148
- fill: #adbbc4;
149
- margin-left: 1px;
150
- margin-top: -8px;
151
- }
152
- }
153
-
154
- .description {
155
- max-height: 60vh;
156
- overflow: auto;
157
-
158
- p {
159
- color: var(--global-font-color6);
160
- }
161
- }
162
- }
163
- }
164
- }
165
- }
166
- }
167
- </style>
1
+ <template>
2
+ <div class="notification">
3
+ <div
4
+ class="notification-container-wrap animation"
5
+ :class="{ active: isActive }"
6
+ >
7
+ <div class="notification-container">
8
+ <div v-show="props.show" class="toast">
9
+ <atoms-the-icon
10
+ class="toast-icon"
11
+ :class="iconName !== 'info' && 'with'"
12
+ :name="iconName"
13
+ />
14
+ <div class="toast-content">
15
+ <div class="flex-align-center flex-space-between">
16
+ <h4>{{ props.title }}</h4>
17
+ <button
18
+ :id="`${props.testId}-close-button`"
19
+ :title="localization.closeNotification"
20
+ @click="hide"
21
+ >
22
+ <atoms-the-icon name="close" />
23
+ </button>
24
+ </div>
25
+ <div class="description">
26
+ <slot>
27
+ <p class="pre-line">{{ props.description }}</p>
28
+ </slot>
29
+ </div>
30
+ </div>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </template>
36
+
37
+ <script setup lang="ts">
38
+ import type { UI_I_Localization } from '~/lib/models/interfaces'
39
+ import type {
40
+ UI_T_NotificationStatus,
41
+ UI_T_NotificationIcon,
42
+ } from '~/components/atoms/alert/lib/models/types'
43
+ import { UI_E_IconsByStatusNotification } from '~/components/atoms/alert/lib/models/enums'
44
+
45
+ const props = withDefaults(
46
+ defineProps<{
47
+ status: UI_T_NotificationStatus
48
+ id: number
49
+ show: boolean
50
+ title: string
51
+ description: string
52
+ testId?: string
53
+ }>(),
54
+ { testId: 'ui-notification' }
55
+ )
56
+ const emits = defineEmits<{
57
+ (event: 'hide', value: number): void
58
+ }>()
59
+
60
+ const localization = computed<UI_I_Localization>(() => useLocal())
61
+ const hide = (): void => {
62
+ isActive.value = false
63
+
64
+ setTimeout(() => {
65
+ emits('hide', props.id)
66
+ }, 200)
67
+ }
68
+ const isActive = ref<boolean>(false)
69
+
70
+ const iconName = computed<UI_T_NotificationIcon>(
71
+ () => UI_E_IconsByStatusNotification[props.status as UI_T_NotificationStatus]
72
+ )
73
+
74
+ setTimeout(() => {
75
+ isActive.value = true
76
+ }, 1000)
77
+ </script>
78
+
79
+ <style scoped lang="scss">
80
+ @import '~/assets/scss/common/mixins.scss';
81
+
82
+ .notification {
83
+ .notification-container-wrap {
84
+ display: block;
85
+ margin-top: 10px;
86
+ width: 414px;
87
+ position: relative;
88
+ right: -600px;
89
+ opacity: 0;
90
+
91
+ &.active {
92
+ right: 0;
93
+ opacity: 1;
94
+ }
95
+
96
+ .notification-container {
97
+ @include flex($dir: column, $just: flex-end);
98
+ margin-right: 0;
99
+
100
+ .toast {
101
+ @include flex($dir: row);
102
+ background-color: #25333d;
103
+ border-radius: 3px;
104
+ box-shadow: 0 2px 10px rgb(0 0 0 / 40%);
105
+ margin: 0;
106
+ padding: 12px;
107
+ transform: scale(1);
108
+ transform-origin: 100% 0;
109
+ width: 100%;
110
+
111
+ .toast-icon {
112
+ width: 36px;
113
+ height: 36px;
114
+ &.with {
115
+ width: 26px;
116
+ height: 26px;
117
+ }
118
+ }
119
+
120
+ .toast-content {
121
+ padding-left: 12px;
122
+ width: 100%;
123
+
124
+ h4 {
125
+ color: #e9ecef;
126
+ font-size: 14px;
127
+ font-weight: 500;
128
+ line-height: 24px;
129
+ margin-top: 0;
130
+ max-width: 240px;
131
+ overflow: hidden;
132
+ text-overflow: ellipsis;
133
+ white-space: nowrap;
134
+ }
135
+
136
+ button {
137
+ background: transparent;
138
+ border: none;
139
+ border-radius: 100%;
140
+ cursor: pointer;
141
+ display: inline-block;
142
+ height: 30px;
143
+ position: absolute;
144
+ right: 8px;
145
+ top: 8px;
146
+ width: 30px;
147
+
148
+ svg {
149
+ width: 16px;
150
+ height: 16px;
151
+ fill: #adbbc4;
152
+ margin-left: 1px;
153
+ margin-top: -8px;
154
+ }
155
+ }
156
+
157
+ .description {
158
+ max-height: 60vh;
159
+ overflow: auto;
160
+
161
+ p {
162
+ color: var(--global-font-color6);
163
+ }
164
+ }
165
+ }
166
+ }
167
+ }
168
+ }
169
+ }
170
+ </style>
@@ -1,4 +1,8 @@
1
- export type UI_T_Status = 'success' | 'error' | 'warning'
1
+ export type UI_T_NotificationStatus = 'success' | 'error' | 'warning'
2
+ export type UI_T_NotificationIcon = 'success-circle' | 'info' | 'warning'
3
+
4
+ export type UI_T_AlertStatus = 'alert-danger' | 'alert-warning' | 'alert-info' | 'alert-success'
5
+ export type UI_T_AlertIcon = 'exclamation-circle' | 'exclamation-triangle' | 'info-circle' | 'success-circle'
2
6
 
3
7
 
4
8
 
@@ -1,5 +1,5 @@
1
1
  import type { UI_I_State, UI_I_ListIndex } from '~/lib/models/interfaces'
2
- import { UI_E_Kind } from '~/lib/models/enums'
2
+ import { UI_E_Kind, UI_E_State } from '~/lib/models/enums'
3
3
  import { UI_E_NetworkType } from './enums'
4
4
  import { UI_T_Adapters } from '~/components/common/diagramMain/lib/models/types'
5
5
  import {
@@ -351,7 +351,7 @@ export interface UI_I_ModalsInitialData<T = string | number | boolean> {
351
351
  carrier?: boolean
352
352
  speed?: number
353
353
  duplex?: string
354
- networks?: null
354
+ networks?: string[] | null
355
355
  srIov?: boolean
356
356
  cdp?: boolean
357
357
  lldp?: boolean
@@ -486,13 +486,7 @@ export interface API_UI_I_Shaping {
486
486
  peak_bw?: number
487
487
  }
488
488
  export interface API_UI_I_State {
489
- state: 0 | 1 | 2 | 3
490
- // enum State {
491
- // UNKNOWN = 0;
492
- // OK = 1;
493
- // WARNING = 2;
494
- // ERROR = 3;
495
- // }
489
+ state: UI_E_State
496
490
  errors?: string[]
497
491
  }
498
492
 
@@ -63,17 +63,20 @@ export const adapterViewSettingsFunc = (
63
63
  name: localization.actualSpeedDuplex,
64
64
  value: initialData.carrier
65
65
  ? `${initialData.speed} ${localization.gbitS}, ${initialData.duplex} Duplex`
66
- : '',
66
+ : localization.down,
67
67
  },
68
68
  {
69
69
  name: localization.configuredSpeedDuplex,
70
70
  value: initialData.carrier
71
71
  ? `${initialData.speed} ${localization.gbitS}, ${initialData.duplex} Duplex`
72
- : '',
72
+ : localization.autoNegotiate,
73
73
  },
74
74
  {
75
75
  name: localization.networks,
76
- value: initialData.networks || '',
76
+ value:
77
+ initialData.networks && initialData.networks?.length > 0
78
+ ? initialData.networks
79
+ : localization.noNetworks,
77
80
  },
78
81
  ],
79
82
  },
@@ -102,10 +105,13 @@ export const adapterViewSettingsFunc = (
102
105
  },
103
106
  ]
104
107
 
105
- export const adapterPopupFieldsFunc = (localization: UI_I_Localization, id: string) => [
108
+ export const adapterPopupFieldsFunc = (
109
+ localization: UI_I_Localization,
110
+ id: string
111
+ ) => [
106
112
  {
107
113
  text: localization.viewSettings,
108
114
  value: 'adapter-view-settings',
109
- testId: `adapter-view-${id}`
115
+ testId: `adapter-view-${id}`,
110
116
  },
111
117
  ]
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "bfg-common",
3
3
  "private": false,
4
- "version": "1.3.206",
4
+ "version": "1.3.207",
5
5
  "scripts": {
6
6
  "build": "nuxt build",
7
7
  "dev": "nuxt dev --port=3002",