@appscode/design-system 1.0.43-alpha.110 → 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,15 +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
|
-
const activeFile = this.previewYamls
|
|
128
|
+
const activeFile = this.previewYamls.find(
|
|
129
|
+
element => element.uid === this.activeKey
|
|
130
|
+
);
|
|
171
131
|
return activeFile || { content: "", format: "yaml" };
|
|
172
132
|
},
|
|
173
133
|
showCopyBtn() {
|
|
@@ -192,16 +152,6 @@ export default {
|
|
|
192
152
|
}
|
|
193
153
|
},
|
|
194
154
|
methods: {
|
|
195
|
-
initActivePreview() {
|
|
196
|
-
this.activePreview = this.previewYamls[0] && this.previewYamls[0].name;
|
|
197
|
-
this.hideValue = this.previewYamls[0].isSecret;
|
|
198
|
-
this.activeKey = 0;
|
|
199
|
-
},
|
|
200
|
-
setActivePreview(previewYaml, idx) {
|
|
201
|
-
this.activePreview = previewYaml.name;
|
|
202
|
-
this.hideValue = previewYaml.isSecret;
|
|
203
|
-
this.activeKey = idx;
|
|
204
|
-
},
|
|
205
155
|
onCopy() {
|
|
206
156
|
this.$toasted.global.success("Value copied successfully").goAway(1000);
|
|
207
157
|
},
|
|
@@ -209,27 +159,22 @@ export default {
|
|
|
209
159
|
this.$toasted.global.error("Copying failed").goAway(1000);
|
|
210
160
|
},
|
|
211
161
|
decode(str) {
|
|
212
|
-
if (str && this.
|
|
162
|
+
if (str && this.toggleHideValue === false) return str.content;
|
|
213
163
|
else return "";
|
|
214
164
|
},
|
|
215
165
|
encode(str) {
|
|
216
|
-
if (str && this.
|
|
166
|
+
if (str && this.toggleHideValue === false) return str.content;
|
|
217
167
|
else return "";
|
|
218
168
|
},
|
|
219
169
|
confirmDelete(flag) {
|
|
220
170
|
if (flag) this.$emit("deleteResource", this.activeKey);
|
|
171
|
+
},
|
|
172
|
+
setActiveKey(key) {
|
|
173
|
+
this.activeKey = key;
|
|
174
|
+
this.toggleHideValue = this.activeFile.isSecret;
|
|
221
175
|
}
|
|
222
176
|
},
|
|
223
177
|
watch: {
|
|
224
|
-
previewYamls: {
|
|
225
|
-
deep: true,
|
|
226
|
-
immediate: true,
|
|
227
|
-
handler(n) {
|
|
228
|
-
if (n.length) {
|
|
229
|
-
this.initActivePreview();
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
},
|
|
233
178
|
deleteModalStatus(n) {
|
|
234
179
|
if (n === "closed") this.showDeleteDataModal = false;
|
|
235
180
|
}
|