✨ Builds a modal for exporting config to file or clipboard

src/assets/interface-icons/interactive-editor-copy-clipboard.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="copy" class="svg-inline--fa fa-copy fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"></path></svg>

src/components/InteractiveEditor/ExportConfigMenu.vue

@@ -0,0 +1,124 @@
+<template>
+<modal
+    :name="modalName"
+    :resizable="true"
+    width="50%"
+    height="80%"
+    classes="dashy-modal edit-item"
+    @closed="modalClosed"
+  >
+  <div class="export-config-inner">
+    <!-- Download and Copy to CLipboard Buttons -->
+    <h3>{{ $t('interactive-editor.export.export-title') }}</h3>
+    <div class="download-button-container">
+      <Button :click="copyConfigToClipboard"
+        v-tooltip="tooltip($t('interactive-editor.export.copy-clipboard-tooltip'))">
+        {{ $t('interactive-editor.export.copy-clipboard-btn') }}
+        <CopyConfigIcon />
+      </Button>
+      <Button :click="downloadConfig"
+        v-tooltip="tooltip($t('interactive-editor.export.download-file-tooltip'))">
+        {{ $t('interactive-editor.export.download-file-btn') }}
+        <DownloadConfigIcon />
+      </Button>
+    </div>
+    <!-- View Config in Tree Mode Section -->
+    <h3>{{ $t('interactive-editor.export.view-title') }}</h3>
+    <tree-view :data="config" class="config-tree-view" />
+  </div>
+  </modal>
+</template>
+
+<script>
+import JsYaml from 'js-yaml';
+import Button from '@/components/FormElements/Button';
+import StoreKeys from '@/utils/StoreMutations';
+import { modalNames } from '@/utils/defaults';
+
+import DownloadConfigIcon from '@/assets/interface-icons/config-download-file.svg';
+import CopyConfigIcon from '@/assets/interface-icons/interactive-editor-copy-clipboard.svg';
+
+export default {
+  name: 'ExportConfigMenu',
+  components: {
+    Button,
+    CopyConfigIcon,
+    DownloadConfigIcon,
+  },
+  data() {
+    return {
+      modalName: modalNames.EXPORT_CONFIG_MENU,
+    };
+  },
+  props: {},
+  computed: {
+    config() {
+      return this.$store.state.config;
+    },
+  },
+  methods: {
+    convertJsonToYaml() {
+      return JsYaml.dump(this.config);
+    },
+    downloadConfig() {
+      const filename = 'dashy_conf.yml';
+      const config = this.convertJsonToYaml();
+      const element = document.createElement('a');
+      element.setAttribute('href', `data:text/plain;charset=utf-8, ${encodeURIComponent(config)}`);
+      element.setAttribute('download', filename);
+      element.style.display = 'none';
+      document.body.appendChild(element);
+      element.click();
+      document.body.removeChild(element);
+    },
+    copyConfigToClipboard() {
+      const config = this.convertJsonToYaml();
+      navigator.clipboard.writeText(config);
+      this.$toasted.show(this.$t('config.data-copied-msg'));
+    },
+    modalClosed() {
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+    },
+    tooltip(content) {
+      return {
+        content, trigger: 'hover focus', delay: 250, classes: 'in-modal-tt',
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '@/styles/style-helpers.scss';
+@import '@/styles/media-queries.scss';
+.tooltip { z-index: 99; }
+.export-config-inner {
+  padding: 1rem;
+  background: var(--interactive-editor-background);
+  color: var(--interactive-editor-color);
+  height: 100%;
+  overflow-y: auto;
+  h3 {
+    margin: 1rem 0;
+  }
+  .download-button-container {
+    display: flex;
+    justify-content: center;
+    padding: 0 0.5rem 1rem;
+    border-bottom: 1px dashed var(--interactive-editor-color);
+    button { margin: 0 1rem; }
+  }
+  .config-tree-view {
+    padding: 0.5rem;
+    font-family: var(--font-monospace);
+    color: var(--interactive-editor-color);
+    background: var(--interactive-editor-background-darker);
+    border-radius: var(--curve-factor);
+    box-shadow: 0px 0px 3px var(--interactive-editor-color);
+    span {
+      font-family: var(--font-monospace);
+    }
+  }
+}
+
+</style>