@appscode/design-system 1.0.43-alpha.108 → 1.0.43-alpha.111
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,133 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="ac-preview is-active is-not-fixed">
|
|
3
|
+
<div class="ac-preview-inner">
|
|
4
|
+
<!-- preview body start -->
|
|
5
|
+
<div class="ac-preview-body mt-0 pt-15 pl-20">
|
|
6
|
+
<div
|
|
7
|
+
v-if="isPreviewLoading || (!isPreviewLoading && previewYamls)"
|
|
8
|
+
class="left-content"
|
|
9
|
+
>
|
|
10
|
+
<div class="ac-files">
|
|
11
|
+
<ul v-if="!isPreviewLoading">
|
|
12
|
+
<li
|
|
13
|
+
v-for="(previewYaml, idx) in filteredYamls"
|
|
14
|
+
:key="previewYaml.name + idx"
|
|
15
|
+
:class="{ 'is-active': activeKey === previewYaml.uid }"
|
|
16
|
+
>
|
|
17
|
+
<a @click.prevent="setActivePreview(previewYaml.uid)">
|
|
18
|
+
<span>
|
|
19
|
+
<img
|
|
20
|
+
src="~@appscode/design-system-images/icons/file-icon.svg"
|
|
21
|
+
alt=""
|
|
22
|
+
/>
|
|
23
|
+
</span>
|
|
24
|
+
<span>{{ previewYaml.name }}</span>
|
|
25
|
+
</a>
|
|
26
|
+
</li>
|
|
27
|
+
</ul>
|
|
28
|
+
<sidebar-loader v-else />
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="right-content">
|
|
32
|
+
<div class="right-content">
|
|
33
|
+
<resource-loader v-if="isPreviewLoading" />
|
|
34
|
+
<editor
|
|
35
|
+
v-else-if="!isPreviewLoading && !hideValue"
|
|
36
|
+
v-model="activeFile.content"
|
|
37
|
+
:original-value="activeFile.content"
|
|
38
|
+
:language="activeFile.format"
|
|
39
|
+
:read-only="isEditorReadOnly"
|
|
40
|
+
:editor-height="60"
|
|
41
|
+
:show-minimap="showMinimap"
|
|
42
|
+
/>
|
|
43
|
+
<span v-else> *************** </span>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</template>
|
|
50
|
+
<script>
|
|
51
|
+
export default {
|
|
52
|
+
components: {
|
|
53
|
+
Editor: () => import("./Editor.vue"),
|
|
54
|
+
ResourceLoader: () => import("./../loaders/ResourceLoader.vue"),
|
|
55
|
+
SidebarLoader: () => import("./../loaders/SidebarLoader.vue")
|
|
56
|
+
},
|
|
57
|
+
props: {
|
|
58
|
+
searchText: {
|
|
59
|
+
type: String,
|
|
60
|
+
default: ""
|
|
61
|
+
},
|
|
62
|
+
toggleHideValue: {
|
|
63
|
+
type: Boolean,
|
|
64
|
+
default: true
|
|
65
|
+
},
|
|
66
|
+
isPreviewLoading: {
|
|
67
|
+
type: Boolean,
|
|
68
|
+
default: false
|
|
69
|
+
},
|
|
70
|
+
isEditorReadOnly: {
|
|
71
|
+
type: Boolean,
|
|
72
|
+
default: false
|
|
73
|
+
},
|
|
74
|
+
previewYamls: {
|
|
75
|
+
type: Array,
|
|
76
|
+
default: () => {
|
|
77
|
+
[];
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
showMinimap: {
|
|
81
|
+
type: Boolean,
|
|
82
|
+
default: false
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
data() {
|
|
86
|
+
return {
|
|
87
|
+
activeKey: "",
|
|
88
|
+
hideValue: ""
|
|
89
|
+
};
|
|
90
|
+
},
|
|
91
|
+
computed: {
|
|
92
|
+
activeFile() {
|
|
93
|
+
const activeFile = this.filteredYamls.find(
|
|
94
|
+
element => element.uid === this.activeKey
|
|
95
|
+
);
|
|
96
|
+
return activeFile || { content: "No resource available", format: "yaml" };
|
|
97
|
+
},
|
|
98
|
+
filteredYamls() {
|
|
99
|
+
if (this.searchText) {
|
|
100
|
+
return this.previewYamls.filter(
|
|
101
|
+
element => JSON.stringify(element).search(this.searchText) > -1
|
|
102
|
+
);
|
|
103
|
+
} else return this.previewYamls;
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
methods: {
|
|
107
|
+
initActivePreview() {
|
|
108
|
+
this.activeKey = this.previewYamls[0].uid;
|
|
109
|
+
this.hideValue = this.activeFile.isSecret;
|
|
110
|
+
this.$emit("setActiveKey", this.activeKey);
|
|
111
|
+
},
|
|
112
|
+
setActivePreview(uid) {
|
|
113
|
+
this.activeKey = uid;
|
|
114
|
+
this.hideValue = this.activeFile.isSecret;
|
|
115
|
+
this.$emit("setActiveKey", this.activeKey);
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
watch: {
|
|
119
|
+
previewYamls: {
|
|
120
|
+
deep: true,
|
|
121
|
+
immediate: true,
|
|
122
|
+
handler(n) {
|
|
123
|
+
if (n.length) {
|
|
124
|
+
this.initActivePreview();
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
toggleHideValue(n) {
|
|
129
|
+
this.hideValue = n;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
</script>
|
|
@@ -4,23 +4,23 @@
|
|
|
4
4
|
<header-item v-if="showHideBtn">
|
|
5
5
|
<ac-button
|
|
6
6
|
modifier-classes="is-square is-primary"
|
|
7
|
-
:icon-class="
|
|
8
|
-
@click.prevent="
|
|
7
|
+
:icon-class="toggleHideValue ? 'eye-slash' : 'eye'"
|
|
8
|
+
@click.prevent="toggleHideValue = !toggleHideValue"
|
|
9
9
|
/>
|
|
10
10
|
</header-item>
|
|
11
11
|
<header-item v-if="showCopyBtn">
|
|
12
12
|
<ac-button
|
|
13
13
|
modifier-classes="is-square is-primary"
|
|
14
14
|
icon-class="copy"
|
|
15
|
-
v-clipboard:copy="decode(
|
|
15
|
+
v-clipboard:copy="decode(activeFile)"
|
|
16
16
|
v-clipboard:success="onCopy"
|
|
17
17
|
v-clipboard:error="onError"
|
|
18
18
|
/>
|
|
19
19
|
</header-item>
|
|
20
20
|
<header-item v-if="showDownloadBtn">
|
|
21
21
|
<download-btn
|
|
22
|
-
:file-data="decode(
|
|
23
|
-
:file-name="
|
|
22
|
+
:file-data="decode(activeFile)"
|
|
23
|
+
:file-name="activeFile.name"
|
|
24
24
|
/>
|
|
25
25
|
</header-item>
|
|
26
26
|
<header-item v-if="showUpdateBtn && !isEditorReadOnly">
|
|
@@ -28,9 +28,7 @@
|
|
|
28
28
|
modifier-classes="is-square is-primary"
|
|
29
29
|
icon-class="pencil-square-o"
|
|
30
30
|
:class="{ 'is-loading': isUpdateActive }"
|
|
31
|
-
@click.prevent="
|
|
32
|
-
$emit('updateData', activeKey, previewYamls[activeKey])
|
|
33
|
-
"
|
|
31
|
+
@click.prevent="$emit('updateData', activeKey, activeFile)"
|
|
34
32
|
/>
|
|
35
33
|
</header-item>
|
|
36
34
|
<header-item v-if="showDeleteBtn">
|
|
@@ -42,7 +40,7 @@
|
|
|
42
40
|
<delete-confirmation-modal
|
|
43
41
|
title="Delete Resource"
|
|
44
42
|
message="Do you want to delete "
|
|
45
|
-
:item-name="
|
|
43
|
+
:item-name="activeFile.name"
|
|
46
44
|
:open="showDeleteDataModal"
|
|
47
45
|
:is-delete-active="deleteModalStatus === 'loading'"
|
|
48
46
|
@delete-confirmation-modal$confirm="confirmDelete"
|
|
@@ -51,54 +49,16 @@
|
|
|
51
49
|
</header-item>
|
|
52
50
|
<slot name="content-action" />
|
|
53
51
|
</template>
|
|
54
|
-
<template #content>
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<ul v-if="!isPreviewLoading">
|
|
65
|
-
<li
|
|
66
|
-
v-for="(previewYaml, idx) in previewYamls"
|
|
67
|
-
:key="previewYaml.name + idx"
|
|
68
|
-
:class="{ 'is-active': activeKey === idx }"
|
|
69
|
-
>
|
|
70
|
-
<a @click.prevent="setActivePreview(previewYaml, idx)">
|
|
71
|
-
<span>
|
|
72
|
-
<img
|
|
73
|
-
src="~@appscode/design-system-images/icons/file-icon.svg"
|
|
74
|
-
alt=""
|
|
75
|
-
/>
|
|
76
|
-
</span>
|
|
77
|
-
<span>{{ previewYaml.name }}</span>
|
|
78
|
-
</a>
|
|
79
|
-
</li>
|
|
80
|
-
</ul>
|
|
81
|
-
<sidebar-loader v-else />
|
|
82
|
-
</div>
|
|
83
|
-
</div>
|
|
84
|
-
<div class="right-content">
|
|
85
|
-
<div class="right-content">
|
|
86
|
-
<resource-loader v-if="isPreviewLoading" />
|
|
87
|
-
<editor
|
|
88
|
-
v-else-if="!isPreviewLoading && !hideValue"
|
|
89
|
-
v-model="activeFile.content"
|
|
90
|
-
:original-value="activeFile.content"
|
|
91
|
-
:language="activeFile.format"
|
|
92
|
-
:read-only="isEditorReadOnly"
|
|
93
|
-
:editor-height="60"
|
|
94
|
-
:show-minimap="showMinimap"
|
|
95
|
-
/>
|
|
96
|
-
<span v-else> *************** </span>
|
|
97
|
-
</div>
|
|
98
|
-
</div>
|
|
99
|
-
</div>
|
|
100
|
-
</div>
|
|
101
|
-
</div>
|
|
52
|
+
<template #content="{ searchText }">
|
|
53
|
+
<filtered-file-editor
|
|
54
|
+
:search-text="searchText"
|
|
55
|
+
:toggle-hide-value="toggleHideValue"
|
|
56
|
+
:is-preview-loading="isPreviewLoading"
|
|
57
|
+
:is-editor-read-only="isEditorReadOnly"
|
|
58
|
+
:previewYamls="previewYamls"
|
|
59
|
+
:showMinimap="showMinimap"
|
|
60
|
+
@setActiveKey="setActiveKey"
|
|
61
|
+
/>
|
|
102
62
|
</template>
|
|
103
63
|
</content-table>
|
|
104
64
|
</template>
|
|
@@ -112,8 +72,7 @@ export default {
|
|
|
112
72
|
DownloadBtn: () => import("./../button/DownloadBtn.vue"),
|
|
113
73
|
DeleteConfirmationModal: () =>
|
|
114
74
|
import("./../modals/DeleteConfirmationModal.vue"),
|
|
115
|
-
|
|
116
|
-
SidebarLoader: () => import("./../loaders/SidebarLoader.vue")
|
|
75
|
+
FilteredFileEditor: () => import("./FilteredFileEditor.vue")
|
|
117
76
|
},
|
|
118
77
|
props: {
|
|
119
78
|
title: {
|
|
@@ -159,18 +118,16 @@ export default {
|
|
|
159
118
|
},
|
|
160
119
|
data() {
|
|
161
120
|
return {
|
|
162
|
-
activePreview: "",
|
|
163
121
|
activeKey: 0,
|
|
164
|
-
|
|
122
|
+
toggleHideValue: "",
|
|
165
123
|
showDeleteDataModal: false
|
|
166
124
|
};
|
|
167
125
|
},
|
|
168
126
|
computed: {
|
|
169
127
|
activeFile() {
|
|
170
128
|
const activeFile = this.previewYamls.find(
|
|
171
|
-
|
|
129
|
+
element => element.uid === this.activeKey
|
|
172
130
|
);
|
|
173
|
-
|
|
174
131
|
return activeFile || { content: "", format: "yaml" };
|
|
175
132
|
},
|
|
176
133
|
showCopyBtn() {
|
|
@@ -195,16 +152,6 @@ export default {
|
|
|
195
152
|
}
|
|
196
153
|
},
|
|
197
154
|
methods: {
|
|
198
|
-
initActivePreview() {
|
|
199
|
-
this.activePreview = this.previewYamls[0] && this.previewYamls[0].name;
|
|
200
|
-
this.hideValue = this.previewYamls[0].isSecret;
|
|
201
|
-
this.activeKey = 0;
|
|
202
|
-
},
|
|
203
|
-
setActivePreview(previewYaml, idx) {
|
|
204
|
-
this.activePreview = previewYaml.name;
|
|
205
|
-
this.hideValue = previewYaml.isSecret;
|
|
206
|
-
this.activeKey = idx;
|
|
207
|
-
},
|
|
208
155
|
onCopy() {
|
|
209
156
|
this.$toasted.global.success("Value copied successfully").goAway(1000);
|
|
210
157
|
},
|
|
@@ -212,27 +159,22 @@ export default {
|
|
|
212
159
|
this.$toasted.global.error("Copying failed").goAway(1000);
|
|
213
160
|
},
|
|
214
161
|
decode(str) {
|
|
215
|
-
if (str && this.
|
|
162
|
+
if (str && this.toggleHideValue === false) return str.content;
|
|
216
163
|
else return "";
|
|
217
164
|
},
|
|
218
165
|
encode(str) {
|
|
219
|
-
if (str && this.
|
|
166
|
+
if (str && this.toggleHideValue === false) return str.content;
|
|
220
167
|
else return "";
|
|
221
168
|
},
|
|
222
169
|
confirmDelete(flag) {
|
|
223
170
|
if (flag) this.$emit("deleteResource", this.activeKey);
|
|
171
|
+
},
|
|
172
|
+
setActiveKey(key) {
|
|
173
|
+
this.activeKey = key;
|
|
174
|
+
this.toggleHideValue = this.activeFile.isSecret;
|
|
224
175
|
}
|
|
225
176
|
},
|
|
226
177
|
watch: {
|
|
227
|
-
previewYamls: {
|
|
228
|
-
deep: true,
|
|
229
|
-
immediate: true,
|
|
230
|
-
handler(n) {
|
|
231
|
-
if (n.length) {
|
|
232
|
-
this.initActivePreview();
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
},
|
|
236
178
|
deleteModalStatus(n) {
|
|
237
179
|
if (n === "closed") this.showDeleteDataModal = false;
|
|
238
180
|
}
|