Merge d812c072d0 into e1b4f9aafe

2024-08-08 00:20:37 +09:00 · 2024-08-08 00:20:37 +09:00 · aecc02646a
commit aecc02646a
parent e1b4f9aafe d812c072d0
15 changed files with 125 additions and 56 deletions
--- a/package.json
+++ b/package.json
@ -64,7 +64,7 @@
    "highlight.js": "^11.7.0",
    "iarna-toml-esm": "^3.0.5",
    "ibantools": "^4.3.3",
-    "js-base64": "^3.7.6",
+    "js-base64": "^3.7.7",
    "json5": "^2.2.3",
    "jwt-decode": "^3.1.2",
    "libphonenumber-js": "^1.10.28",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -93,7 +93,7 @@ dependencies:
    specifier: ^4.3.3
    version: 4.3.3
  js-base64:
-    specifier: ^3.7.6
+    specifier: ^3.7.7
    version: 3.7.7
  json5:
    specifier: ^2.2.3
@ -166,7 +166,7 @@ dependencies:
    version: 3.3.4
  vue-i18n:
    specifier: ^9.9.1
-    version: 9.9.1(vue@3.3.4)
+    version: 9.13.1(vue@3.3.4)
  vue-router:
    specifier: ^4.1.6
    version: 4.1.6(vue@3.3.4)
@ -189,7 +189,7 @@ devDependencies:
    version: 1.1.50
  '@intlify/unplugin-vue-i18n':
    specifier: ^2.0.0
-    version: 2.0.0(rollup@2.79.1)(vue-i18n@9.9.1)
+    version: 2.0.0(rollup@2.79.1)(vue-i18n@9.13.1)
  '@playwright/test':
    specifier: ^1.32.3
    version: 1.32.3
@ -2209,8 +2209,8 @@ packages:
      - supports-color
    dev: true

-  /@intlify/bundle-utils@7.5.0(vue-i18n@9.9.1):
-    resolution: {integrity: sha512-6DymqusddBQ8kVtVBsVFFF7arNfIhuLacOmmsqayT2vl427j9m0VX12mMC+cgoVIodSpRfzYPaPTdPuJq7mK0Q==}
+  /@intlify/bundle-utils@7.5.1(vue-i18n@9.13.1):
+    resolution: {integrity: sha512-UovJl10oBIlmYEcWw+VIHdKY5Uv5sdPG0b/b6bOYxGLln3UwB75+2dlc0F3Fsa0RhoznQ5Rp589/BZpABpE4Xw==}
    engines: {node: '>= 14.16'}
    peerDependencies:
      petite-vue-i18n: '*'
@ -2221,8 +2221,8 @@ packages:
      vue-i18n:
        optional: true
    dependencies:
-      '@intlify/message-compiler': 9.9.1
-      '@intlify/shared': 9.9.1
+      '@intlify/message-compiler': 9.13.1
+      '@intlify/shared': 9.13.1
      acorn: 8.11.2
      escodegen: 2.1.0
      estree-walker: 2.0.2
@ -2230,29 +2230,29 @@ packages:
      magic-string: 0.30.5
      mlly: 1.4.2
      source-map-js: 1.0.2
-      vue-i18n: 9.9.1(vue@3.3.4)
+      vue-i18n: 9.13.1(vue@3.3.4)
      yaml-eslint-parser: 1.2.2
    dev: true

-  /@intlify/core-base@9.9.1:
-    resolution: {integrity: sha512-qsV15dg7jNX2faBRyKMgZS8UcFJViWEUPLdzZ9UR0kQZpFVeIpc0AG7ZOfeP7pX2T9SQ5jSiorq/tii9nkkafA==}
+  /@intlify/core-base@9.13.1:
+    resolution: {integrity: sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==}
    engines: {node: '>= 16'}
    dependencies:
-      '@intlify/message-compiler': 9.9.1
-      '@intlify/shared': 9.9.1
+      '@intlify/message-compiler': 9.13.1
+      '@intlify/shared': 9.13.1

-  /@intlify/message-compiler@9.9.1:
-    resolution: {integrity: sha512-zTvP6X6HeumHOXuAE1CMMsV6tTX+opKMOxO1OHTCg5N5Sm/F7d8o2jdT6W6L5oHUsJ/vvkGefHIs7Q3hfowmsA==}
+  /@intlify/message-compiler@9.13.1:
+    resolution: {integrity: sha512-SKsVa4ajYGBVm7sHMXd5qX70O2XXjm55zdZB3VeMFCvQyvLew/dLvq3MqnaIsTMF1VkkOb9Ttr6tHcMlyPDL9w==}
    engines: {node: '>= 16'}
    dependencies:
-      '@intlify/shared': 9.9.1
+      '@intlify/shared': 9.13.1
      source-map-js: 1.0.2

-  /@intlify/shared@9.9.1:
-    resolution: {integrity: sha512-b3Pta1nwkz5rGq434v0psHwEwHGy1pYCttfcM22IE//K9owbpkEvFptx9VcuRAxjQdrO2If249cmDDjBu5wMDA==}
+  /@intlify/shared@9.13.1:
+    resolution: {integrity: sha512-u3b6BKGhE6j/JeRU6C/RL2FgyJfy6LakbtfeVF8fJXURpZZTzfh3e05J0bu0XPw447Q6/WUp3C4ajv4TMS4YsQ==}
    engines: {node: '>= 16'}

-  /@intlify/unplugin-vue-i18n@2.0.0(rollup@2.79.1)(vue-i18n@9.9.1):
+  /@intlify/unplugin-vue-i18n@2.0.0(rollup@2.79.1)(vue-i18n@9.13.1):
    resolution: {integrity: sha512-1oKvm92L9l2od2H9wKx2ZvR4tzn7gUtd7bPLI7AWUmm7U9H1iEypndt5d985ypxGsEs0gToDaKTrytbBIJwwSg==}
    engines: {node: '>= 14.16'}
    peerDependencies:
@ -2267,8 +2267,8 @@ packages:
      vue-i18n-bridge:
        optional: true
    dependencies:
-      '@intlify/bundle-utils': 7.5.0(vue-i18n@9.9.1)
-      '@intlify/shared': 9.9.1
+      '@intlify/bundle-utils': 7.5.1(vue-i18n@9.13.1)
+      '@intlify/shared': 9.13.1
      '@rollup/pluginutils': 5.0.5(rollup@2.79.1)
      '@vue/compiler-sfc': 3.3.4
      debug: 4.3.4
@ -2279,7 +2279,7 @@ packages:
      picocolors: 1.0.0
      source-map-js: 1.0.2
      unplugin: 1.4.0
-      vue-i18n: 9.9.1(vue@3.3.4)
+      vue-i18n: 9.13.1(vue@3.3.4)
    transitivePeerDependencies:
      - rollup
      - supports-color
@ -3354,7 +3354,7 @@ packages:
    dependencies:
      '@unhead/dom': 0.5.1
      '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.8.0(vue@3.3.4)
+      '@vueuse/shared': 10.11.0(vue@3.3.4)
      unhead: 0.5.1
      vue: 3.3.4
    transitivePeerDependencies:
@ -3987,19 +3987,19 @@ packages:
      - vue
    dev: false

-  /@vueuse/shared@10.3.0(vue@3.3.4):
-    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
+  /@vueuse/shared@10.11.0(vue@3.3.4):
+    resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==}
    dependencies:
-      vue-demi: 0.14.5(vue@3.3.4)
+      vue-demi: 0.14.10(vue@3.3.4)
    transitivePeerDependencies:
      - '@vue/composition-api'
      - vue
    dev: false

-  /@vueuse/shared@10.8.0(vue@3.3.4):
-    resolution: {integrity: sha512-dUdy6zwHhULGxmr9YUg8e+EnB39gcM4Fe2oKBSrh3cOsV30JcMPtsyuspgFCUo5xxFNaeMf/W2yyKfST7Bg8oQ==}
+  /@vueuse/shared@10.3.0(vue@3.3.4):
+    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
    dependencies:
-      vue-demi: 0.14.7(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
    transitivePeerDependencies:
      - '@vue/composition-api'
      - vue
@ -9143,8 +9143,8 @@ packages:
      vue: 3.3.4
    dev: false

-  /vue-demi@0.14.5(vue@3.3.4):
-    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
+  /vue-demi@0.14.10(vue@3.3.4):
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
    engines: {node: '>=12'}
    hasBin: true
    requiresBuild: true
@ -9158,8 +9158,8 @@ packages:
      vue: 3.3.4
    dev: false

-  /vue-demi@0.14.7(vue@3.3.4):
-    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
+  /vue-demi@0.14.5(vue@3.3.4):
+    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
    engines: {node: '>=12'}
    hasBin: true
    requiresBuild: true
@ -9191,14 +9191,14 @@ packages:
      - supports-color
    dev: true

-  /vue-i18n@9.9.1(vue@3.3.4):
-    resolution: {integrity: sha512-xyQ4VspLdNSPTKBFBPWa1tvtj+9HuockZwgFeD2OhxxXuC2CWeNvV4seu2o9+vbQOyQbhAM5Ez56oxUrrnTWdw==}
+  /vue-i18n@9.13.1(vue@3.3.4):
+    resolution: {integrity: sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==}
    engines: {node: '>= 16'}
    peerDependencies:
      vue: ^3.0.0
    dependencies:
-      '@intlify/core-base': 9.9.1
-      '@intlify/shared': 9.9.1
+      '@intlify/core-base': 9.13.1
+      '@intlify/shared': 9.13.1
      '@vue/devtools-api': 6.5.0
      vue: 3.3.4

@ -9449,6 +9449,7 @@ packages:

  /workbox-google-analytics@7.0.0:
    resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==}
+    deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
    dependencies:
      workbox-background-sync: 7.0.0
      workbox-core: 7.0.0
--- a/src/components/FormatTransformer.vue
+++ b/src/components/FormatTransformer.vue
@ -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>
--- a/src/components/TextareaCopyable.vue
+++ b/src/components/TextareaCopyable.vue
@ -7,7 +7,15 @@ import sqlHljs from 'highlight.js/lib/languages/sql';
 import xmlHljs from 'highlight.js/lib/languages/xml';
 import yamlHljs from 'highlight.js/lib/languages/yaml';
 import iniHljs from 'highlight.js/lib/languages/ini';
+import bashHljs from 'highlight.js/lib/languages/bash';
+import markdownHljs from 'highlight.js/lib/languages/markdown';
+import jsHljs from 'highlight.js/lib/languages/javascript';
+import cssHljs from 'highlight.js/lib/languages/css';
+import goHljs from 'highlight.js/lib/languages/go';
+import csharpHljs from 'highlight.js/lib/languages/csharp';
+import { Base64 } from 'js-base64';
 import { useCopy } from '@/composable/copy';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';

 const props = withDefaults(
  defineProps<{
@ -16,12 +24,17 @@ const props = withDefaults(
    language?: string
    copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
    copyMessage?: string
+    wordWrap?: boolean
+    downloadFileName?: string
+    downloadButtonText?: string
  }>(),
  {
    followHeightOf: null,
    language: 'txt',
    copyPlacement: 'top-right',
    copyMessage: 'Copy to clipboard',
+    downloadFileName: '',
+    downloadButtonText: 'Download',
  },
 );
 hljs.registerLanguage('sql', sqlHljs);
@ -30,12 +43,25 @@ hljs.registerLanguage('html', xmlHljs);
 hljs.registerLanguage('xml', xmlHljs);
 hljs.registerLanguage('yaml', yamlHljs);
 hljs.registerLanguage('toml', iniHljs);
+hljs.registerLanguage('bash', bashHljs);
+hljs.registerLanguage('markdown', markdownHljs);
+hljs.registerLanguage('css', cssHljs);
+hljs.registerLanguage('javascript', jsHljs);
+hljs.registerLanguage('go', goHljs);
+hljs.registerLanguage('csharp', csharpHljs);

-const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
+const { value, language, followHeightOf, copyPlacement, copyMessage, downloadFileName, downloadButtonText } = toRefs(props);
 const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };

 const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
 const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.value);
+
+const valueBase64 = computed(() => Base64.encode(value.value));
+const { download } = useDownloadFileFromBase64(
+  {
+    source: valueBase64,
+    filename: downloadFileName,
+  });
 </script>

 <template>
@ -47,11 +73,16 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
        :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
      >
        <n-config-provider :hljs="hljs">
-          <n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
+          <n-code :code="value" :language="language" :word-wrap="wordWrap" :trim="false" data-test-id="area-content" />
        </n-config-provider>
      </n-scrollbar>
-      <div absolute right-10px top-10px>
-        <c-tooltip v-if="value" :tooltip="tooltipText" position="left">
+      <div
+        v-if="value && copyPlacement !== 'none'"
+        absolute right-10px
+        :top-10px="copyPlacement === 'top-right' ? '' : 'no'"
+        :bottom-10px="copyPlacement === 'bottom-right' ? '' : 'no'"
+      >
+        <c-tooltip v-if="value && copyPlacement !== 'outside'" :tooltip="tooltipText" position="left">
          <c-button circle important:h-10 important:w-10 @click="copy()">
            <n-icon size="22" :component="Copy" />
          </c-button>
@ -63,6 +94,11 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
        {{ tooltipText }}
      </c-button>
    </div>
+    <div v-if="downloadFileName !== '' && value !== ''" mt-5 flex justify-center>
+      <c-button secondary @click="download">
+        {{ downloadButtonText }}
+      </c-button>
+    </div>
  </div>
 </template>

--- a/src/composable/downloadBase64.ts
+++ b/src/composable/downloadBase64.ts
@ -1,6 +1,7 @@
 import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types';
-import type { Ref } from 'vue';
+import type { MaybeRef, Ref } from 'vue';
 import _ from 'lodash';
+import { get } from '@vueuse/core';

 export {
  getMimeTypeFromBase64,
@ -75,21 +76,11 @@ function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }:
 }

 function useDownloadFileFromBase64(
-  { source, filename, extension, fileMimeType }:
-  { source: Ref<string>; filename?: string; extension?: string; fileMimeType?: string }) {
-  return {
-    download() {
-      downloadFromBase64({ sourceValue: source.value, filename, extension, fileMimeType });
-    },
-  };
-}
-
-function useDownloadFileFromBase64Refs(
  { source, filename, extension }:
-  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  { source: MaybeRef<string>; filename?: MaybeRef<string>; extension?: MaybeRef<string> }) {
  return {
    download() {
-      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+      downloadFromBase64({ sourceValue: get(source), filename: get(filename), extension: get(extension) });
    },
  };
 }
@ -116,3 +107,13 @@ function previewImageFromBase64(base64String: string): HTMLImageElement {

  return img;
 }
+
+function useDownloadFileFromBase64Refs(
+  { source, filename, extension }:
+  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  return {
+    download() {
+      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+    },
+  };
+}
--- a/src/tools/json-minify/json-minify.vue
+++ b/src/tools/json-minify/json-minify.vue
@ -23,5 +23,6 @@ const rules: UseValidationRule<string>[] = [
    output-language="json"
    :input-validation-rules="rules"
    :transformer="transformer"
+    download-file-name="output.json"
  />
 </template>
--- a/src/tools/json-to-csv/json-to-csv.vue
+++ b/src/tools/json-to-csv/json-to-csv.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>
--- a/src/tools/json-to-toml/json-to-toml.vue
+++ b/src/tools/json-to-toml/json-to-toml.vue
@ -24,5 +24,6 @@ const rules: UseValidationRule<string>[] = [
    output-language="toml"
    :input-validation-rules="rules"
    :transformer="transformer"
+    download-file-name="output.toml"
  />
 </template>
--- a/src/tools/json-to-yaml-converter/json-to-yaml.vue
+++ b/src/tools/json-to-yaml-converter/json-to-yaml.vue
@ -23,5 +23,6 @@ const rules: UseValidationRule<string>[] = [
    output-language="yaml"
    :input-validation-rules="rules"
    :transformer="transformer"
+    download-file-name="output.yaml"
  />
 </template>
--- a/src/tools/list-converter/list-converter.vue
+++ b/src/tools/list-converter/list-converter.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>
--- a/src/tools/toml-to-json/toml-to-json.vue
+++ b/src/tools/toml-to-json/toml-to-json.vue
@ -22,5 +22,6 @@ const rules: UseValidationRule<string>[] = [
    output-language="json"
    :input-validation-rules="rules"
    :transformer="transformer"
+    download-file-name="output.json"
  />
 </template>
--- a/src/tools/toml-to-yaml/toml-to-yaml.vue
+++ b/src/tools/toml-to-yaml/toml-to-yaml.vue
@ -23,5 +23,6 @@ const rules: UseValidationRule<string>[] = [
    output-language="yaml"
    :input-validation-rules="rules"
    :transformer="transformer"
+    download-file-name="output.yaml"
  />
 </template>
--- a/src/tools/xml-formatter/xml-formatter.vue
+++ b/src/tools/xml-formatter/xml-formatter.vue
@ -42,5 +42,6 @@ const rules: UseValidationRule<string>[] = [
    :input-validation-rules="rules"
    :transformer="transformer"
    :input-default="defaultValue"
+    download-file-name="output.xml"
  />
 </template>
--- a/src/tools/yaml-to-json-converter/yaml-to-json.vue
+++ b/src/tools/yaml-to-json-converter/yaml-to-json.vue
@ -27,5 +27,6 @@ const rules: UseValidationRule<string>[] = [
    output-language="json"
    :input-validation-rules="rules"
    :transformer="transformer"
+    download-file-name="output.json"
  />
 </template>
--- a/src/tools/yaml-to-toml/yaml-to-toml.vue
+++ b/src/tools/yaml-to-toml/yaml-to-toml.vue
@ -24,5 +24,6 @@ const rules: UseValidationRule<string>[] = [
    output-language="toml"
    :input-validation-rules="rules"
    :transformer="transformer"
+    download-file-name="output.toml"
  />
 </template>