Merge branch 'feat/format-transformer-download' into chore/all-my-stuffs

# Conflicts:
#	package.json
#	pnpm-lock.yaml
#	src/components/TextareaCopyable.vue

Author: sharevb

package.json

@@ -99,7 +99,6 @@
     "js-base64": "^3.7.7",
     "jsbarcode": "^3.11.6",
     "iconv-lite": "^0.6.3",
-    "js-base64": "^3.7.6",
     "js-base64": "^3.7.7",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",

pnpm-lock.yaml

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import _ from 'lodash';
+import { Base64 } from 'js-base64';
 import type { UseValidationRule } from '@/composable/validation';
 import CInputText from '@/ui/c-input-text/c-input-text.vue';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
 
 const props = withDefaults(
   defineProps<{
@@ -12,6 +14,8 @@ const props = withDefaults(
     inputDefault?: string
     outputLabel?: string
     outputLanguage?: string
+    downloadFileName?: string
+    downloadButtonText?: string
   }>(),
   {
     transformer: _.identity,
@@ -21,16 +25,27 @@ const props = withDefaults(
     inputPlaceholder: 'Input...',
     outputLabel: 'Output',
     outputLanguage: '',
+    downloadFileName: '',
+    downloadButtonText: 'Download',
   },
 );
 
-const { transformer, inputValidationRules, inputLabel, outputLabel, outputLanguage, inputPlaceholder, inputDefault }
-  = toRefs(props);
+const {
+  transformer, inputValidationRules, inputLabel, outputLabel, outputLanguage,
+  inputPlaceholder, inputDefault, downloadFileName, downloadButtonText,
+} = toRefs(props);
 
 const inputElement = ref<typeof CInputText>();
 
 const input = ref(inputDefault.value);
 const output = computed(() => transformer.value(input.value));
+
+const outputBase64 = computed(() => Base64.encode(output.value));
+const { download } = useDownloadFileFromBase64(
+  {
+    source: outputBase64,
+    filename: downloadFileName,
+  });
 </script>
 
 <template>
@@ -53,5 +68,11 @@ const output = computed(() => transformer.value(input.value));
       {{ outputLabel }}
     </div>
     <textarea-copyable :value="output" :language="outputLanguage" :follow-height-of="inputElement?.inputWrapperRef" />
+
+    <div v-if="downloadFileName !== '' && output !== ''" mt-5 flex justify-center>
+      <c-button secondary @click="download">
+        {{ downloadButtonText }}
+      </c-button>
+    </div>
   </div>
 </template>

src/components/FormatTransformer.vue

@@ -25,16 +25,8 @@ const props = withDefaults(
     copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
     copyMessage?: string
     wordWrap?: boolean
-<<<<<<< HEAD
-<<<<<<< HEAD
     downloadFileName?: string
     downloadButtonText?: string
-=======
->>>>>>> feat/cert-key-parser
-=======
-    downloadFileName?: string
-    downloadButtonText?: string
->>>>>>> feat/email-parser
   }>(),
   {
     followHeightOf: null,

src/components/TextareaCopyable.vue

@@ -23,5 +23,6 @@ const rules: UseValidationRule<string>[] = [
     output-language="json"
     :input-validation-rules="rules"
     :transformer="transformer"
+    download-file-name="output.json"
   />
 </template>

src/tools/json-minify/json-minify.vue

@@ -28,5 +28,6 @@ const rules: UseValidationRule<string>[] = [
     output-label="CSV version of your JSON"
     :input-validation-rules="rules"
     :transformer="transformer"
+    download-file-name="output.csv"
   />
 </template>

src/tools/json-to-csv/json-to-csv.vue

@@ -24,5 +24,6 @@ const rules: UseValidationRule<string>[] = [
     output-language="toml"
     :input-validation-rules="rules"
     :transformer="transformer"
+    download-file-name="output.toml"
   />
 </template>

src/tools/json-to-toml/json-to-toml.vue

@@ -23,5 +23,6 @@ const rules: UseValidationRule<string>[] = [
     output-language="yaml"
     :input-validation-rules="rules"
     :transformer="transformer"
+    download-file-name="output.yaml"
   />
 </template>

src/tools/json-to-yaml-converter/json-to-yaml.vue

@@ -119,5 +119,6 @@ function transformer(value: string) {
     input-placeholder="Paste your input data here..."
     output-label="Your transformed data"
     :transformer="transformer"
+    download-file-name="output.txt"
   />
 </template>

src/tools/list-converter/list-converter.vue

@@ -22,5 +22,6 @@ const rules: UseValidationRule<string>[] = [
     output-language="json"
     :input-validation-rules="rules"
     :transformer="transformer"
+    download-file-name="output.json"
   />
 </template>