@nethserver/ns8-ui-lib 1.8.0 → 1.9.0
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.
- package/dist/ns8-ui-lib.esm.js +636 -538
- package/dist/ns8-ui-lib.min.js +1 -1
- package/dist/ns8-ui-lib.ssr.js +600 -508
- package/package.json +1 -1
- package/src/lib-components/NsBackupCard.vue +0 -1
- package/src/lib-components/NsInfoCard.vue +13 -3
- package/src/lib-components/NsProgress.vue +75 -0
- package/src/lib-components/NsStatusCard.vue +1 -2
- package/src/lib-components/NsSystemdServiceCard.vue +3 -2
package/package.json
CHANGED
|
@@ -28,7 +28,9 @@
|
|
|
28
28
|
</div>
|
|
29
29
|
<template v-else>
|
|
30
30
|
<div v-if="title" class="row">
|
|
31
|
-
<h3 class="title
|
|
31
|
+
<h3 :class="['title', wrapTitle ? 'wrap-text' : 'ellipsis']">
|
|
32
|
+
{{ title }}
|
|
33
|
+
</h3>
|
|
32
34
|
<cv-interactive-tooltip
|
|
33
35
|
v-if="$slots.titleTooltip || titleTooltip"
|
|
34
36
|
:alignment="titleTooltipAlignment"
|
|
@@ -102,6 +104,7 @@ export default {
|
|
|
102
104
|
isErrorShown: false,
|
|
103
105
|
errorTitle: String,
|
|
104
106
|
errorDescription: String,
|
|
107
|
+
wrapTitle: Boolean,
|
|
105
108
|
light: Boolean,
|
|
106
109
|
},
|
|
107
110
|
computed: {
|
|
@@ -119,7 +122,6 @@ export default {
|
|
|
119
122
|
.info-card {
|
|
120
123
|
display: flex;
|
|
121
124
|
flex-direction: column;
|
|
122
|
-
justify-content: center;
|
|
123
125
|
min-height: 7rem;
|
|
124
126
|
// needed for abosulute positioning of overflow menu
|
|
125
127
|
position: relative;
|
|
@@ -142,11 +144,19 @@ export default {
|
|
|
142
144
|
margin-left: 0.25rem;
|
|
143
145
|
margin-right: 0.25rem;
|
|
144
146
|
margin-bottom: 0.5rem;
|
|
145
|
-
|
|
147
|
+
text-align: center;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.ellipsis {
|
|
146
151
|
text-overflow: ellipsis;
|
|
152
|
+
overflow: hidden;
|
|
147
153
|
white-space: nowrap;
|
|
148
154
|
}
|
|
149
155
|
|
|
156
|
+
.wrap-text {
|
|
157
|
+
overflow-wrap: anywhere;
|
|
158
|
+
}
|
|
159
|
+
|
|
150
160
|
.title-tooltip {
|
|
151
161
|
position: relative;
|
|
152
162
|
top: -2px;
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Copyright (C) 2025 Nethesis S.r.l.
|
|
3
|
+
SPDX-License-Identifier: GPL-3.0-or-later
|
|
4
|
+
-->
|
|
5
|
+
<template>
|
|
6
|
+
<div class="ns-progress">
|
|
7
|
+
<div
|
|
8
|
+
v-for="(s, index) in steps"
|
|
9
|
+
:key="s.id"
|
|
10
|
+
:class="['step', { 'step-complete-or-current': stepNumber >= index }]"
|
|
11
|
+
>
|
|
12
|
+
<CheckmarkOutline16 v-if="stepNumber > index" class="icon primary" />
|
|
13
|
+
<CircleFilled16 v-else-if="stepNumber === index" class="icon primary" />
|
|
14
|
+
<RadioButton16 v-else class="icon" />
|
|
15
|
+
<span>{{ s.label }}</span>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</template>
|
|
19
|
+
|
|
20
|
+
<script>
|
|
21
|
+
import {
|
|
22
|
+
CircleFilled16,
|
|
23
|
+
CheckmarkOutline16,
|
|
24
|
+
RadioButton16,
|
|
25
|
+
} from "@carbon/icons-vue";
|
|
26
|
+
|
|
27
|
+
export default {
|
|
28
|
+
name: "NsProgress",
|
|
29
|
+
components: {
|
|
30
|
+
CheckmarkOutline16,
|
|
31
|
+
CircleFilled16,
|
|
32
|
+
RadioButton16,
|
|
33
|
+
},
|
|
34
|
+
props: {
|
|
35
|
+
stepId: {
|
|
36
|
+
type: String,
|
|
37
|
+
required: true,
|
|
38
|
+
},
|
|
39
|
+
steps: { type: Array, default: () => [] },
|
|
40
|
+
},
|
|
41
|
+
computed: {
|
|
42
|
+
stepNumber() {
|
|
43
|
+
return this.steps.findIndex((s) => s.id === this.stepId);
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
};
|
|
47
|
+
</script>
|
|
48
|
+
|
|
49
|
+
<style scoped lang="scss">
|
|
50
|
+
.ns-progress {
|
|
51
|
+
display: flex;
|
|
52
|
+
justify-content: space-between;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.step {
|
|
56
|
+
display: flex;
|
|
57
|
+
flex: 1;
|
|
58
|
+
gap: 0.5rem;
|
|
59
|
+
border-top: 2px solid #e0e0e0;
|
|
60
|
+
padding-top: 0.5rem;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.step-complete-or-current {
|
|
64
|
+
border-top: 2px solid #00a2de;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.icon {
|
|
68
|
+
flex-shrink: 0;
|
|
69
|
+
margin-left: 0.5rem;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.primary {
|
|
73
|
+
color: #00a2de;
|
|
74
|
+
}
|
|
75
|
+
</style>
|
|
@@ -102,7 +102,6 @@ export default {
|
|
|
102
102
|
.status-card {
|
|
103
103
|
display: flex;
|
|
104
104
|
flex-direction: column;
|
|
105
|
-
justify-content: center;
|
|
106
105
|
}
|
|
107
106
|
|
|
108
107
|
.row {
|
|
@@ -146,4 +145,4 @@ export default {
|
|
|
146
145
|
margin-left: 0.5rem;
|
|
147
146
|
margin-right: 0.5rem;
|
|
148
147
|
}
|
|
149
|
-
</style>
|
|
148
|
+
</style>
|
|
@@ -78,7 +78,6 @@ export default {
|
|
|
78
78
|
.service-card {
|
|
79
79
|
display: flex;
|
|
80
80
|
flex-direction: column;
|
|
81
|
-
justify-content: center;
|
|
82
81
|
}
|
|
83
82
|
|
|
84
83
|
.row {
|
|
@@ -92,6 +91,8 @@ export default {
|
|
|
92
91
|
margin-left: 0.25rem;
|
|
93
92
|
margin-right: 0.25rem;
|
|
94
93
|
margin-bottom: 0.5rem;
|
|
94
|
+
text-align: center;
|
|
95
|
+
overflow-wrap: anywhere;
|
|
95
96
|
}
|
|
96
97
|
|
|
97
98
|
.success-icon {
|
|
@@ -118,4 +119,4 @@ export default {
|
|
|
118
119
|
margin-left: 0.5rem;
|
|
119
120
|
margin-right: 0.5rem;
|
|
120
121
|
}
|
|
121
|
-
</style>
|
|
122
|
+
</style>
|