@appscode/design-system 1.0.43-alpha.102 → 1.0.43-alpha.106
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 +1 -1
- package/vue-components/v2/button/DownloadBtn.vue +45 -0
- package/vue-components/v2/editor/ResourceKeyValueEditor.vue +41 -32
- package/vue-components/v2/loaders/ResourceLoader.vue +90 -0
- package/vue-components/v2/loaders/SidebarLoader.vue +32 -0
- package/vue-components/v2/modals/DeleteConfirmationModal.vue +77 -0
- package/vue-components/v2/navbar/User.vue +3 -0
package/package.json
CHANGED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<ac-button
|
|
3
|
+
modifier-classes="is-primary is-square"
|
|
4
|
+
icon-class="download"
|
|
5
|
+
:is-loader-active="isFetching"
|
|
6
|
+
@click="download()"
|
|
7
|
+
/>
|
|
8
|
+
</template>
|
|
9
|
+
|
|
10
|
+
<script>
|
|
11
|
+
import downloadFunc from "downloadjs";
|
|
12
|
+
|
|
13
|
+
export default {
|
|
14
|
+
components: {
|
|
15
|
+
AcButton: () => import("./../button/Button.vue")
|
|
16
|
+
},
|
|
17
|
+
props: {
|
|
18
|
+
fileData: {
|
|
19
|
+
type: String,
|
|
20
|
+
default: ""
|
|
21
|
+
},
|
|
22
|
+
fileName: {
|
|
23
|
+
type: String,
|
|
24
|
+
default: ""
|
|
25
|
+
},
|
|
26
|
+
isFetching: {
|
|
27
|
+
type: Boolean,
|
|
28
|
+
default: false
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
data() {
|
|
32
|
+
return {
|
|
33
|
+
downloadIcon: "fa fa-cloud-download"
|
|
34
|
+
};
|
|
35
|
+
},
|
|
36
|
+
component: {
|
|
37
|
+
downloadFunc
|
|
38
|
+
},
|
|
39
|
+
methods: {
|
|
40
|
+
download() {
|
|
41
|
+
downloadFunc(this.fileData, this.fileName);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
</script>
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
<ac-button
|
|
28
28
|
modifier-classes="is-square is-primary"
|
|
29
29
|
icon-class="pencil-square-o"
|
|
30
|
+
:class="{ 'is-loading': isUpdateActive }"
|
|
30
31
|
@click.prevent="
|
|
31
32
|
$emit('updateData', activeKey, previewYamls[activeKey])
|
|
32
33
|
"
|
|
@@ -41,8 +42,9 @@
|
|
|
41
42
|
<delete-confirmation-modal
|
|
42
43
|
title="Delete Resource"
|
|
43
44
|
message="Do you want to delete "
|
|
44
|
-
:
|
|
45
|
+
:item-name="activePreview"
|
|
45
46
|
:open="showDeleteDataModal"
|
|
47
|
+
:is-delete-active="deleteModalStatus === 'loading'"
|
|
46
48
|
@delete-confirmation-modal$confirm="confirmDelete"
|
|
47
49
|
@closemodal="showDeleteDataModal = false"
|
|
48
50
|
/>
|
|
@@ -89,7 +91,7 @@
|
|
|
89
91
|
:language="activeFile.format"
|
|
90
92
|
:read-only="isEditorReadOnly"
|
|
91
93
|
:editor-height="60"
|
|
92
|
-
:show-minimap="
|
|
94
|
+
:show-minimap="showMinimap"
|
|
93
95
|
/>
|
|
94
96
|
<span v-else> *************** </span>
|
|
95
97
|
</div>
|
|
@@ -103,66 +105,70 @@
|
|
|
103
105
|
<script>
|
|
104
106
|
export default {
|
|
105
107
|
components: {
|
|
106
|
-
AcButton: () =>
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
import(
|
|
112
|
-
"@appscode/design-system/vue-components/v2/content/ContentTable.vue"
|
|
113
|
-
),
|
|
114
|
-
HeaderItem: () =>
|
|
115
|
-
import("@appscode/design-system/vue-components/v2/header/HeaderItem.vue"),
|
|
116
|
-
AcButton: () =>
|
|
117
|
-
import("@appscode/design-system/vue-components/v2/button/Button"),
|
|
118
|
-
DownloadBtn: () => import("@/components/buttons/DownloadBtn.vue"),
|
|
108
|
+
AcButton: () => import("./../button/Button.vue"),
|
|
109
|
+
Editor: () => import("./../editor/Editor.vue"),
|
|
110
|
+
ContentTable: () => import("./../content/ContentTable.vue"),
|
|
111
|
+
HeaderItem: () => import("./../header/HeaderItem.vue"),
|
|
112
|
+
DownloadBtn: () => import("./../button/DownloadBtn.vue"),
|
|
119
113
|
DeleteConfirmationModal: () =>
|
|
120
|
-
import("
|
|
121
|
-
ResourceLoader: () => import("
|
|
122
|
-
SidebarLoader: () => import("
|
|
114
|
+
import("./../modals/DeleteConfirmationModal.vue"),
|
|
115
|
+
ResourceLoader: () => import("./../loaders/ResourceLoader.vue"),
|
|
116
|
+
SidebarLoader: () => import("./../loaders/SidebarLoader.vue")
|
|
123
117
|
},
|
|
124
118
|
props: {
|
|
125
119
|
title: {
|
|
126
120
|
type: String,
|
|
127
|
-
default: "Title"
|
|
121
|
+
default: "Title"
|
|
128
122
|
},
|
|
129
123
|
isSearchable: {
|
|
130
124
|
type: Boolean,
|
|
131
|
-
default: false
|
|
125
|
+
default: false
|
|
132
126
|
},
|
|
133
127
|
isPreviewLoading: {
|
|
134
128
|
type: Boolean,
|
|
135
|
-
default: false
|
|
129
|
+
default: false
|
|
136
130
|
},
|
|
137
131
|
isEditorReadOnly: {
|
|
138
132
|
type: Boolean,
|
|
139
|
-
default: false
|
|
133
|
+
default: false
|
|
140
134
|
},
|
|
141
135
|
previewYamls: {
|
|
142
136
|
type: Array,
|
|
143
137
|
default: () => {
|
|
144
138
|
[];
|
|
145
|
-
}
|
|
139
|
+
}
|
|
146
140
|
},
|
|
147
141
|
visibleBtn: {
|
|
148
142
|
type: Object,
|
|
149
143
|
default: () => {
|
|
150
144
|
return {};
|
|
151
|
-
}
|
|
145
|
+
}
|
|
152
146
|
},
|
|
147
|
+
showMinimap: {
|
|
148
|
+
type: Boolean,
|
|
149
|
+
default: false
|
|
150
|
+
},
|
|
151
|
+
isUpdateActive: {
|
|
152
|
+
type: Boolean,
|
|
153
|
+
default: false
|
|
154
|
+
},
|
|
155
|
+
deleteModalStatus: {
|
|
156
|
+
type: String,
|
|
157
|
+
default: "closed"
|
|
158
|
+
}
|
|
153
159
|
},
|
|
154
160
|
data() {
|
|
155
161
|
return {
|
|
156
162
|
activePreview: "",
|
|
157
163
|
activeKey: 0,
|
|
158
164
|
hideValue: "",
|
|
159
|
-
showDeleteDataModal: false
|
|
165
|
+
showDeleteDataModal: false
|
|
160
166
|
};
|
|
161
167
|
},
|
|
162
168
|
computed: {
|
|
163
169
|
activeFile() {
|
|
164
170
|
const activeFile = this.previewYamls.find(
|
|
165
|
-
|
|
171
|
+
p => p.name === this.activePreview
|
|
166
172
|
);
|
|
167
173
|
|
|
168
174
|
return activeFile || { content: "", format: "yaml" };
|
|
@@ -186,7 +192,7 @@ export default {
|
|
|
186
192
|
showDeleteBtn() {
|
|
187
193
|
if (this.visibleBtn.showDeleteBtn) return true;
|
|
188
194
|
else return false;
|
|
189
|
-
}
|
|
195
|
+
}
|
|
190
196
|
},
|
|
191
197
|
methods: {
|
|
192
198
|
initActivePreview() {
|
|
@@ -206,16 +212,16 @@ export default {
|
|
|
206
212
|
this.$toasted.global.error("Copying failed").goAway(1000);
|
|
207
213
|
},
|
|
208
214
|
decode(str) {
|
|
209
|
-
if (this.hideValue === false) return str.content;
|
|
215
|
+
if (str && this.hideValue === false) return str.content;
|
|
210
216
|
else return "";
|
|
211
217
|
},
|
|
212
218
|
encode(str) {
|
|
213
|
-
if (this.hideValue === false) return str.content;
|
|
219
|
+
if (str && this.hideValue === false) return str.content;
|
|
214
220
|
else return "";
|
|
215
221
|
},
|
|
216
222
|
confirmDelete(flag) {
|
|
217
223
|
if (flag) this.$emit("deleteResource", this.activeKey);
|
|
218
|
-
}
|
|
224
|
+
}
|
|
219
225
|
},
|
|
220
226
|
watch: {
|
|
221
227
|
previewYamls: {
|
|
@@ -225,8 +231,11 @@ export default {
|
|
|
225
231
|
if (n.length) {
|
|
226
232
|
this.initActivePreview();
|
|
227
233
|
}
|
|
228
|
-
}
|
|
234
|
+
}
|
|
229
235
|
},
|
|
230
|
-
|
|
236
|
+
deleteModalStatus(n) {
|
|
237
|
+
if (n === "closed") this.showDeleteDataModal = false;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
231
240
|
};
|
|
232
241
|
</script>
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<content-loader
|
|
4
|
+
:width="100"
|
|
5
|
+
:height="40"
|
|
6
|
+
:speed="2"
|
|
7
|
+
:primaryColor="'#f5f7f9'"
|
|
8
|
+
>
|
|
9
|
+
<rect x="1" y="1" rx="1" ry="1" width="14" height="1" />
|
|
10
|
+
<rect x="17" y="1" rx="1" ry="1" width="13" height="1" />
|
|
11
|
+
<rect x="32" y="1" rx="1" ry="1" width="8" height="1" />
|
|
12
|
+
|
|
13
|
+
<rect x="7" y="3" rx="1" ry="1" width="14" height="1" />
|
|
14
|
+
<rect x="23" y="3" rx="1" ry="1" width="13" height="1" />
|
|
15
|
+
<rect x="38" y="3" rx="1" ry="1" width="8" height="1" />
|
|
16
|
+
|
|
17
|
+
<rect x="13" y="5" rx="1" ry="1" width="8" height="1" />
|
|
18
|
+
<rect x="23" y="5" rx="1" ry="1" width="15" height="1" />
|
|
19
|
+
<rect x="40" y="5" rx="1" ry="1" width="4" height="1" />
|
|
20
|
+
|
|
21
|
+
<rect x="13" y="7" rx="1" ry="1" width="10" height="1" />
|
|
22
|
+
<rect x="25" y="7" rx="1" ry="1" width="20" height="1" />
|
|
23
|
+
|
|
24
|
+
<rect x="7" y="10" rx="1" ry="1" width="14" height="1" />
|
|
25
|
+
<rect x="23" y="10" rx="1" ry="1" width="13" height="1" />
|
|
26
|
+
<rect x="38" y="10" rx="1" ry="1" width="8" height="1" />
|
|
27
|
+
|
|
28
|
+
<rect x="13" y="12" rx="1" ry="1" width="8" height="1" />
|
|
29
|
+
<rect x="23" y="12" rx="1" ry="1" width="15" height="1" />
|
|
30
|
+
<rect x="40" y="12" rx="1" ry="1" width="4" height="1" />
|
|
31
|
+
|
|
32
|
+
<rect x="13" y="14" rx="1" ry="1" width="10" height="1" />
|
|
33
|
+
<rect x="25" y="14" rx="1" ry="1" width="20" height="1" />
|
|
34
|
+
|
|
35
|
+
<rect x="7" y="17" rx="1" ry="1" width="14" height="1" />
|
|
36
|
+
<rect x="23" y="17" rx="1" ry="1" width="13" height="1" />
|
|
37
|
+
<rect x="38" y="17" rx="1" ry="1" width="8" height="1" />
|
|
38
|
+
|
|
39
|
+
<rect x="13" y="19" rx="1" ry="1" width="8" height="1" />
|
|
40
|
+
<rect x="23" y="19" rx="1" ry="1" width="15" height="1" />
|
|
41
|
+
<rect x="40" y="19" rx="1" ry="1" width="4" height="1" />
|
|
42
|
+
|
|
43
|
+
<rect x="7" y="22" rx="1" ry="1" width="14" height="1" />
|
|
44
|
+
<rect x="23" y="22" rx="1" ry="1" width="13" height="1" />
|
|
45
|
+
<rect x="38" y="22" rx="1" ry="1" width="8" height="1" />
|
|
46
|
+
|
|
47
|
+
<rect x="13" y="24" rx="1" ry="1" width="8" height="1" />
|
|
48
|
+
<rect x="23" y="24" rx="1" ry="1" width="15" height="1" />
|
|
49
|
+
<rect x="40" y="24" rx="1" ry="1" width="4" height="1" />
|
|
50
|
+
|
|
51
|
+
<rect x="1" y="26" rx="1" ry="1" width="14" height="1" />
|
|
52
|
+
<rect x="17" y="26" rx="1" ry="1" width="13" height="1" />
|
|
53
|
+
<rect x="32" y="26" rx="1" ry="1" width="8" height="1" />
|
|
54
|
+
|
|
55
|
+
<rect x="7" y="29" rx="1" ry="1" width="14" height="1" />
|
|
56
|
+
<rect x="23" y="29" rx="1" ry="1" width="13" height="1" />
|
|
57
|
+
<rect x="38" y="29" rx="1" ry="1" width="8" height="1" />
|
|
58
|
+
|
|
59
|
+
<rect x="13" y="31" rx="1" ry="1" width="8" height="1" />
|
|
60
|
+
<rect x="23" y="31" rx="1" ry="1" width="15" height="1" />
|
|
61
|
+
<rect x="40" y="31" rx="1" ry="1" width="4" height="1" />
|
|
62
|
+
|
|
63
|
+
<rect x="7" y="33" rx="1" ry="1" width="14" height="1" />
|
|
64
|
+
<rect x="23" y="33" rx="1" ry="1" width="13" height="1" />
|
|
65
|
+
<rect x="38" y="33" rx="1" ry="1" width="8" height="1" />
|
|
66
|
+
|
|
67
|
+
<rect x="13" y="35" rx="1" ry="1" width="8" height="1" />
|
|
68
|
+
<rect x="23" y="35" rx="1" ry="1" width="15" height="1" />
|
|
69
|
+
<rect x="40" y="35" rx="1" ry="1" width="4" height="1" />
|
|
70
|
+
|
|
71
|
+
<rect x="13" y="37" rx="1" ry="1" width="8" height="1" />
|
|
72
|
+
<rect x="23" y="37" rx="1" ry="1" width="15" height="1" />
|
|
73
|
+
<rect x="40" y="37" rx="1" ry="1" width="4" height="1" />
|
|
74
|
+
|
|
75
|
+
<rect x="1" y="39" rx="1" ry="1" width="14" height="1" />
|
|
76
|
+
<rect x="17" y="39" rx="1" ry="1" width="13" height="1" />
|
|
77
|
+
<rect x="32" y="39" rx="1" ry="1" width="8" height="1" />
|
|
78
|
+
</content-loader>
|
|
79
|
+
</div>
|
|
80
|
+
</template>
|
|
81
|
+
|
|
82
|
+
<script>
|
|
83
|
+
import { ContentLoader } from "vue-content-loader";
|
|
84
|
+
|
|
85
|
+
export default {
|
|
86
|
+
components: {
|
|
87
|
+
ContentLoader,
|
|
88
|
+
},
|
|
89
|
+
};
|
|
90
|
+
</script>
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<content-loader
|
|
4
|
+
:width="100"
|
|
5
|
+
:height="175"
|
|
6
|
+
:speed="2"
|
|
7
|
+
:primaryColor="'#dcdee6'"
|
|
8
|
+
>
|
|
9
|
+
<rect x="2" y="1" rx="3" ry="3" width="96" height="20" />
|
|
10
|
+
<rect x="15" y="23" rx="3" ry="3" width="83" height="15" />
|
|
11
|
+
<rect x="15" y="40" rx="3" ry="3" width="83" height="15" />
|
|
12
|
+
<rect x="15" y="57" rx="3" ry="3" width="83" height="15" />
|
|
13
|
+
|
|
14
|
+
<rect x="2" y="78" rx="3" ry="3" width="96" height="20" />
|
|
15
|
+
<rect x="15" y="100" rx="3" ry="3" width="83" height="15" />
|
|
16
|
+
<rect x="15" y="117" rx="3" ry="3" width="83" height="15" />
|
|
17
|
+
<rect x="15" y="134" rx="3" ry="3" width="83" height="15" />
|
|
18
|
+
|
|
19
|
+
<rect x="2" y="155" rx="3" ry="3" width="96" height="20" />
|
|
20
|
+
</content-loader>
|
|
21
|
+
</div>
|
|
22
|
+
</template>
|
|
23
|
+
|
|
24
|
+
<script>
|
|
25
|
+
import { ContentLoader } from "vue-content-loader";
|
|
26
|
+
|
|
27
|
+
export default {
|
|
28
|
+
components: {
|
|
29
|
+
ContentLoader,
|
|
30
|
+
},
|
|
31
|
+
};
|
|
32
|
+
</script>
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<!-- modal start -->
|
|
3
|
+
<modal
|
|
4
|
+
:title="title"
|
|
5
|
+
modifier-classes="is-normal"
|
|
6
|
+
:open="open"
|
|
7
|
+
@closemodal="closeModal"
|
|
8
|
+
>
|
|
9
|
+
<!-- freedom content start -->
|
|
10
|
+
<div class="action-message pt-35 pb-35 has-text-centered">
|
|
11
|
+
<h5 class="is-message">{{ message }} {{ itemName ? "" : "?" }}</h5>
|
|
12
|
+
<p class="is-description">{{ itemName }} {{ itemName ? "?" : "" }}</p>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<!-- freedom content end -->
|
|
16
|
+
|
|
17
|
+
<!-- modal footer start -->
|
|
18
|
+
<template #modal-footer-controls>
|
|
19
|
+
<ac-button
|
|
20
|
+
@click.stop="closeModal"
|
|
21
|
+
title="Cancel"
|
|
22
|
+
modifier-classes="is-outlined"
|
|
23
|
+
/>
|
|
24
|
+
<ac-button
|
|
25
|
+
modifier-classes="is-danger"
|
|
26
|
+
:is-loader-active="isDeleteActive"
|
|
27
|
+
title="Yes"
|
|
28
|
+
@click.stop="confirm(true)"
|
|
29
|
+
/>
|
|
30
|
+
</template>
|
|
31
|
+
</modal>
|
|
32
|
+
<!-- modal end -->
|
|
33
|
+
</template>
|
|
34
|
+
|
|
35
|
+
<script>
|
|
36
|
+
export default {
|
|
37
|
+
components: {
|
|
38
|
+
Modal: () => import("./../modal/Modal.vue"),
|
|
39
|
+
AcButton: () => import("./../button/Button.vue")
|
|
40
|
+
},
|
|
41
|
+
props: {
|
|
42
|
+
open: {
|
|
43
|
+
type: Boolean,
|
|
44
|
+
default: false
|
|
45
|
+
},
|
|
46
|
+
title: {
|
|
47
|
+
type: String,
|
|
48
|
+
default: ""
|
|
49
|
+
},
|
|
50
|
+
message: {
|
|
51
|
+
type: String,
|
|
52
|
+
default: ""
|
|
53
|
+
},
|
|
54
|
+
itemName: {
|
|
55
|
+
type: String,
|
|
56
|
+
default: ""
|
|
57
|
+
},
|
|
58
|
+
isLoading: {
|
|
59
|
+
type: Boolean,
|
|
60
|
+
default: false
|
|
61
|
+
},
|
|
62
|
+
isDeleteActive: {
|
|
63
|
+
type: Boolean,
|
|
64
|
+
default: false
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
methods: {
|
|
68
|
+
confirm(response) {
|
|
69
|
+
this.$emit("delete-confirmation-modal$confirm", response);
|
|
70
|
+
},
|
|
71
|
+
closeModal() {
|
|
72
|
+
this.confirm(false);
|
|
73
|
+
this.$emit("closemodal", true);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
</script>
|