@appscode/design-system 1.1.0-beta.7 → 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/base/utilities/_global.scss +1 -0
- package/package.json +1 -1
- package/vue-components/types/importFlow.ts +16 -0
- package/vue-components/v2/editor/FilteredFileEditor.vue +2 -2
- package/vue-components/v3/cards/Cluster.vue +3 -0
- package/vue-components/v3/content/ContentTable.vue +1 -1
- package/vue-components/v3/editor/FilteredFileEditor.vue +1 -1
- package/vue-components/v3/sidebar/Sidebar.vue +1 -0
- package/vue-components/v3/sidebar/Steps.vue +55 -51
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
|
+
}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
v-if="isPreviewLoading || (!isPreviewLoading && previewYamls)"
|
|
8
8
|
class="left-content"
|
|
9
9
|
>
|
|
10
|
-
<div class="ac-files ac-hscrollbar pt-0">
|
|
10
|
+
<div class="ac-files ac-hscrollbar ac-vscrollbar pt-0">
|
|
11
11
|
<ul v-if="!isPreviewLoading">
|
|
12
12
|
<li
|
|
13
13
|
v-for="(previewYaml, idx) in filteredYamls"
|
|
@@ -59,8 +59,8 @@
|
|
|
59
59
|
</div>
|
|
60
60
|
</template>
|
|
61
61
|
<script>
|
|
62
|
-
import Preloader from "../preloader/Preloader.vue";
|
|
63
62
|
import Banner from "../banner/Banner.vue";
|
|
63
|
+
import Preloader from "../preloader/Preloader.vue";
|
|
64
64
|
export default {
|
|
65
65
|
components: {
|
|
66
66
|
Editor: () => ({
|
|
@@ -137,7 +137,7 @@ watch(
|
|
|
137
137
|
</strong>
|
|
138
138
|
<template v-else>
|
|
139
139
|
<div v-if="!isPreviewLoading && previewYamls" class="left-content">
|
|
140
|
-
<div class="ac-files ac-hscrollbar pt-0">
|
|
140
|
+
<div class="ac-files ac-hscrollbar ac-vscrollbar pt-0">
|
|
141
141
|
<ul v-if="!isPreviewLoading">
|
|
142
142
|
<li
|
|
143
143
|
v-for="(previewYaml, idx) in filteredYamls"
|
|
@@ -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>
|