Merge pull request #582 from madeindjs/WF-25

feat(ui): add copy to clipboard for JSON viewer - WF-25
writer · Oct 22, 2024 · 135dea3 · 135dea3
2 parents 874d5be + 14de1cc
commit 135dea3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/src/ui/src/components/core/base/BaseControlBar.vue b/src/ui/src/components/core/base/BaseControlBar.vue
@@ -37,10 +37,11 @@ function copyToClipboard({ text = "" }: { text?: string }) {
 @import "@/renderer/sharedStyles.css";
 
 .BaseControlBar {
-	margin: 10px 0;
+	margin-top: 8px;
 	display: flex;
 	flex-direction: row;
 	justify-content: flex-end;
+	gap: 8px;
 }
 
 .control-button {
@@ -50,7 +51,6 @@ function copyToClipboard({ text = "" }: { text?: string }) {
 	color: white;
 	cursor: pointer;
 	font-size: 11px;
-	margin-right: 10px;
 	padding: 4px 8px;
 
 	&:hover {

diff --git a/src/ui/src/components/core/content/CoreJsonViewer.vue b/src/ui/src/components/core/content/CoreJsonViewer.vue
@@ -6,6 +6,10 @@
 			:initial-depth="initialDepth"
 		/>
 		<BaseJsonViewerChildrenCounter v-else :data="{}" />
+		<BaseControlBar
+			v-if="fields.copy.value === 'yes'"
+			:copy-structured-content="dataAsString"
+		/>
 	</div>
 </template>
 
@@ -55,6 +59,17 @@ const definition: WriterComponentDefinition = {
 			type: FieldType.Number,
 			init: "0",
 		},
+		copy: {
+			name: "Copy",
+			desc: "If active, adds a control bar with copy JSON button.",
+			type: FieldType.Text,
+			options: {
+				yes: "yes",
+				no: "no",
+			},
+			default: "no",
+			category: FieldCategory.Style,
+		},
 		jsonViewerIndentationSpacing: {
 			name: "JSON indentation",
 			type: FieldType.Width,
@@ -75,13 +90,15 @@ export default { writer: definition };
 <script setup lang="ts">
 import { computed, inject } from "vue";
 import injectionKeys from "@/injectionKeys";
-import type { JsonData } from "../base/BaseJsonViewer.vue";
-import BaseJsonViewer from "../base/BaseJsonViewer.vue";
-import BaseJsonViewerChildrenCounter from "../base/BaseJsonViewerChildrenCounter.vue";
+import type { JsonData } from "@/components/core/base/BaseJsonViewer.vue";
+import BaseJsonViewer from "@/components/core/base/BaseJsonViewer.vue";
+import BaseJsonViewerChildrenCounter from "@/components/core/base/BaseJsonViewerChildrenCounter.vue";
+import BaseControlBar from "@/components/core/base/BaseControlBar.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 
 const data = computed(() => fields.data.value as JsonData);
+const dataAsString = computed(() => JSON.stringify(data.value));
 
 const initialDepth = computed(() => Number(fields.initialDepth.value) || 0);
 </script>