@appscode/design-system 1.1.0-beta.8 → 1.1.0-beta.9
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/package.json
CHANGED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
interface Substep {
|
|
2
|
+
component: string;
|
|
3
|
+
identifier: number;
|
|
4
|
+
title: string;
|
|
5
|
+
isVisible: boolean;
|
|
6
|
+
isValid: () => boolean;
|
|
7
|
+
nextStep: () => void;
|
|
8
|
+
nextStepButtonText?: () => string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export interface Step {
|
|
12
|
+
identifier: number;
|
|
13
|
+
title: string;
|
|
14
|
+
isVisible: boolean;
|
|
15
|
+
substeps: Substep[];
|
|
16
|
+
}
|
|
@@ -1,65 +1,69 @@
|
|
|
1
1
|
<script lang="ts" setup>
|
|
2
2
|
import FeCheck from "~icons/fe/check";
|
|
3
|
+
import type { Step } from "../../types/importFlow";
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
steps?: Step[];
|
|
7
|
+
activeStepIdentifier?: number;
|
|
8
|
+
activeSubStepIdentifier?: number;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
withDefaults(defineProps<Props>(), {
|
|
12
|
+
steps: () => [],
|
|
13
|
+
activeStepIdentifier: 1,
|
|
14
|
+
activeSubStepIdentifier: 1,
|
|
15
|
+
});
|
|
3
16
|
</script>
|
|
4
17
|
|
|
5
18
|
<template>
|
|
6
|
-
|
|
7
|
-
|
|
19
|
+
<li
|
|
20
|
+
v-for="step in steps"
|
|
21
|
+
:key="step.identifier"
|
|
22
|
+
:class="{
|
|
23
|
+
'is-hidden': !step.isVisible,
|
|
24
|
+
}"
|
|
25
|
+
>
|
|
8
26
|
<strong
|
|
9
|
-
|
|
10
|
-
|
|
27
|
+
:class="{
|
|
28
|
+
'is-active': step.identifier < activeStepIdentifier,
|
|
29
|
+
}"
|
|
11
30
|
>
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
>
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<li>
|
|
26
|
-
<strong
|
|
27
|
-
><span class="step-count"> <FeCheck /> </span>
|
|
28
|
-
<span class="label-text">Select Cluster</span></strong
|
|
29
|
-
>
|
|
30
|
-
</li>
|
|
31
|
-
</ul>
|
|
32
|
-
</li>
|
|
33
|
-
<!-- steps 01-->
|
|
34
|
-
|
|
35
|
-
<!-- steps 02-->
|
|
36
|
-
<li>
|
|
37
|
-
<strong
|
|
38
|
-
><span class="step-count">2</span>
|
|
39
|
-
<span class="label-text">IMPORT</span></strong
|
|
31
|
+
<span
|
|
32
|
+
:class="{
|
|
33
|
+
'step-count': true,
|
|
34
|
+
'is-active': step.identifier < activeStepIdentifier,
|
|
35
|
+
}"
|
|
36
|
+
>{{ step.identifier }}</span
|
|
37
|
+
>
|
|
38
|
+
<span class="label-text">{{ step.title }}</span>
|
|
39
|
+
</strong>
|
|
40
|
+
<ul
|
|
41
|
+
:class="{
|
|
42
|
+
'is-hidden': step.identifier !== activeStepIdentifier,
|
|
43
|
+
}"
|
|
40
44
|
>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<strong
|
|
50
|
-
|
|
51
|
-
<span
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
45
|
+
<li
|
|
46
|
+
v-for="substep in step.substeps"
|
|
47
|
+
:key="substep?.identifier"
|
|
48
|
+
:class="{
|
|
49
|
+
'is-hidden': !substep.isVisible,
|
|
50
|
+
'is-active': substep.identifier < activeSubStepIdentifier,
|
|
51
|
+
}"
|
|
52
|
+
>
|
|
53
|
+
<strong>
|
|
54
|
+
<span class="step-count"><FeCheck /></span>
|
|
55
|
+
<span
|
|
56
|
+
:class="{
|
|
57
|
+
'label-text': true,
|
|
58
|
+
'has-text-weight-semibold':
|
|
59
|
+
substep.identifier <= activeSubStepIdentifier,
|
|
60
|
+
}"
|
|
61
|
+
>{{ substep.title }}</span
|
|
62
|
+
>
|
|
63
|
+
</strong>
|
|
59
64
|
</li>
|
|
60
65
|
</ul>
|
|
61
66
|
</li>
|
|
62
|
-
<!-- steps 02-->
|
|
63
67
|
</template>
|
|
64
68
|
|
|
65
69
|
<style lang="scss" scoped>
|