bfg-common 1.3.259 → 1.3.261

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,142 +1,142 @@
1
- <template>
2
- <div class="summary-meters-block meters-block">
3
- <ul class="summary-items-list">
4
- <li
5
- v-for="(resource, key) in progressPresent"
6
- :key="key"
7
- class="resource-meter"
8
- >
9
- <div class="meters-block__flex">
10
- <span
11
- class="title"
12
- tabindex="0"
13
- :data-id="`meters-block-${resource.type}`"
14
- >
15
- {{ resource.blockTitle }}
16
- </span>
17
- <span>
18
- <span
19
- class="resource-meter-top-right-info"
20
- :data-id="`resource-meter-free-${resource.type}`"
21
- >
22
- {{ localization.free }}:
23
- </span>
24
- <span
25
- class="resource-meter-top-right-info"
26
- :data-id="`resource-meter-free-${resource.type}-value`"
27
- >{{ resource.free.text }}</span
28
- >
29
- </span>
30
- </div>
31
- <div class="progress">
32
- <progress
33
- :max="resource.capacity.value"
34
- :value="resource.used.value"
35
- />
36
- </div>
37
- <div class="meters-block__flex">
38
- <span>
39
- <span
40
- class="resource-meter-bottom-left-info"
41
- :data-id="`resource-meter-used-${resource.type}`"
42
- >
43
- {{ localization.used }}:
44
- </span>
45
- <span
46
- class="resource-meter-bottom-left-info"
47
- :data-id="`resource-meter-used-${resource.type}-value`"
48
- >
49
- {{ resource.used.text }}
50
- </span>
51
- </span>
52
- <span>
53
- <span
54
- class="resource-meter-bottom-right-info"
55
- :data-id="`resource-meter-capacity-${resource.type}`"
56
- >
57
- {{ localization.capacity }}:
58
- </span>
59
- <span
60
- class="resource-meter-bottom-right-info"
61
- :data-id="`resource-meter-capacity-${resource.type}-value`"
62
- >
63
- {{ resource.capacity.text }}
64
- </span>
65
- </span>
66
- </div>
67
- </li>
68
- </ul>
69
- </div>
70
- </template>
71
-
72
- <script lang="ts" setup>
73
- import { UI_I_Localization } from '~/lib/models/interfaces'
74
- import { UI_I_Resources } from '~/components/common/resource/lib/models/interfaces'
75
-
76
- const props = defineProps<{
77
- progress: UI_I_Resources[]
78
- }>()
79
-
80
- const progressPresent = computed<UI_I_Resources[]>(() => {
81
- return props.progress.map((progress) => {
82
- return {
83
- ...progress,
84
- blockTitle:
85
- progress.type === 'cpu'
86
- ? localization.value.latinCpu
87
- : localization.value[progress.type],
88
- }
89
- })
90
- })
91
-
92
- const localization = computed<UI_I_Localization>(() => useLocal())
93
- </script>
94
-
95
- <style lang="scss" scoped>
96
- @import 'bfg-common/assets/scss/common/mixins.scss';
97
- $bar-graph-width: 256px;
98
- .meters-block {
99
- &__flex {
100
- @include flex($just: space-between, $dir: row, $align: center);
101
- }
102
- }
103
- .summary-meters-block {
104
- min-width: $bar-graph-width;
105
- .summary-items-list {
106
- margin-bottom: 10px;
107
- .resource-meter {
108
- list-style-type: none;
109
- margin-bottom: 6px;
110
- line-height: 16px;
111
- span {
112
- font-size: 10px;
113
- }
114
- .progress {
115
- border-radius: 3px;
116
- progress {
117
- &::-webkit-progress-value {
118
- background: var(--progress-color);
119
- }
120
- &::-webkit-progress-bar {
121
- background: var(--progress-bg-color);
122
- }
123
- }
124
- }
125
- }
126
- }
127
- .global-refresh-content {
128
- text-align: right;
129
-
130
- .btn-global-refresh {
131
- border: unset;
132
- background: unset;
133
- color: var(--link-visited-color);
134
- cursor: pointer;
135
-
136
- &:hover {
137
- text-decoration: underline;
138
- }
139
- }
140
- }
141
- }
142
- </style>
1
+ <template>
2
+ <div class="summary-meters-block meters-block">
3
+ <ul class="summary-items-list">
4
+ <li
5
+ v-for="(resource, key) in progressPresent"
6
+ :key="key"
7
+ class="resource-meter"
8
+ >
9
+ <div class="meters-block__flex">
10
+ <span
11
+ class="title"
12
+ tabindex="0"
13
+ :data-id="`meters-block-${resource.type}`"
14
+ >
15
+ {{ resource.blockTitle }}
16
+ </span>
17
+ <span>
18
+ <span
19
+ class="resource-meter-top-right-info"
20
+ :data-id="`resource-meter-free-${resource.type}`"
21
+ >
22
+ {{ localization.free }}:
23
+ </span>
24
+ <span
25
+ class="resource-meter-top-right-info"
26
+ :data-id="`resource-meter-free-${resource.type}-value`"
27
+ >{{ resource.free.text }}</span
28
+ >
29
+ </span>
30
+ </div>
31
+ <div class="progress">
32
+ <progress
33
+ :max="resource.capacity.value"
34
+ :value="resource.used.value"
35
+ />
36
+ </div>
37
+ <div class="meters-block__flex">
38
+ <span>
39
+ <span
40
+ class="resource-meter-bottom-left-info"
41
+ :data-id="`resource-meter-used-${resource.type}`"
42
+ >
43
+ {{ localization.used }}:
44
+ </span>
45
+ <span
46
+ class="resource-meter-bottom-left-info"
47
+ :data-id="`resource-meter-used-${resource.type}-value`"
48
+ >
49
+ {{ resource.used.text }}
50
+ </span>
51
+ </span>
52
+ <span>
53
+ <span
54
+ class="resource-meter-bottom-right-info"
55
+ :data-id="`resource-meter-capacity-${resource.type}`"
56
+ >
57
+ {{ localization.capacity }}:
58
+ </span>
59
+ <span
60
+ class="resource-meter-bottom-right-info"
61
+ :data-id="`resource-meter-capacity-${resource.type}-value`"
62
+ >
63
+ {{ resource.capacity.text }}
64
+ </span>
65
+ </span>
66
+ </div>
67
+ </li>
68
+ </ul>
69
+ </div>
70
+ </template>
71
+
72
+ <script lang="ts" setup>
73
+ import { UI_I_Localization } from '~/lib/models/interfaces'
74
+ import { UI_I_Resources } from '~/components/common/resource/lib/models/interfaces'
75
+
76
+ const props = defineProps<{
77
+ progress: UI_I_Resources[]
78
+ }>()
79
+
80
+ const progressPresent = computed<UI_I_Resources[]>(() => {
81
+ return props.progress.map((progress) => {
82
+ return {
83
+ ...progress,
84
+ blockTitle:
85
+ progress.type === 'cpu'
86
+ ? localization.value.latinCpu
87
+ : localization.value[progress.type],
88
+ }
89
+ })
90
+ })
91
+
92
+ const localization = computed<UI_I_Localization>(() => useLocal())
93
+ </script>
94
+
95
+ <style lang="scss" scoped>
96
+ @import 'bfg-common/assets/scss/common/mixins.scss';
97
+ $bar-graph-width: 256px;
98
+ .meters-block {
99
+ &__flex {
100
+ @include flex($just: space-between, $dir: row, $align: center);
101
+ }
102
+ }
103
+ .summary-meters-block {
104
+ min-width: $bar-graph-width;
105
+ .summary-items-list {
106
+ margin-bottom: 10px;
107
+ .resource-meter {
108
+ list-style-type: none;
109
+ margin-bottom: 6px;
110
+ line-height: 16px;
111
+ span {
112
+ font-size: 10px;
113
+ }
114
+ .progress {
115
+ border-radius: 3px;
116
+ progress {
117
+ &::-webkit-progress-value {
118
+ background: var(--progress-color);
119
+ }
120
+ &::-webkit-progress-bar {
121
+ background: var(--progress-bg-color);
122
+ }
123
+ }
124
+ }
125
+ }
126
+ }
127
+ .global-refresh-content {
128
+ text-align: right;
129
+
130
+ .btn-global-refresh {
131
+ border: unset;
132
+ background: unset;
133
+ color: var(--link-visited-color);
134
+ cursor: pointer;
135
+
136
+ &:hover {
137
+ text-decoration: underline;
138
+ }
139
+ }
140
+ }
141
+ }
142
+ </style>