feat(tool): base64 string converter

src/plugins/naive.plugin.ts

@@ -46,9 +46,11 @@ import {
   NDivider,
   NStatistic,
   NTable,
+  NUploadDragger,
 } from 'naive-ui';
 
 const components = [
+  NUploadDragger,
   NTable,
   NStatistic,
   NDivider,

src/tools/base64-converter/base64-converter.service.test.ts

@@ -0,0 +1,6 @@
+import { expect, describe, it } from 'vitest';
+// import { } from './base64-converter.service';
+//
+// describe('base64-converter', () => {
+//
+// })

src/tools/base64-converter/base64-converter.vue

@@ -0,0 +1,66 @@
+<template>
+  <n-card title="Text to base64">
+    <n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." />
+    <n-input :value="textBase64" type="textarea" readonly />
+    <n-space justify="center">
+      <n-button @click="copyTextBase64()" secondary>Copy</n-button>
+    </n-space>
+  </n-card>
+
+  <n-card title="File to base64">
+    <n-upload :show-file-list="true" :on-before-upload="onUpload" list-type="image" v-model:file-list="fileList">
+      <n-upload-dragger>
+        <div style="margin-bottom: 12px">
+          <n-icon size="35" :depth="3" :component="Upload" />
+        </div>
+        <n-text style="font-size: 14px">
+          Click or drag a file to this area to upload
+        </n-text>
+      </n-upload-dragger>
+    </n-upload>
+
+    <n-input :value="fileBase64" type="textarea" readonly />
+    <n-space justify="center">
+      <n-button @click="copyFileBase64()" secondary>Copy</n-button>
+    </n-space>
+  </n-card>
+
+</template>
+
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy'
+import { useBase64 } from '@vueuse/core'
+import { Upload } from '@vicons/tabler'
+import { ref, type Ref } from 'vue'
+import type { UploadFileInfo } from 'naive-ui';
+
+const textInput = ref('')
+const { base64: textBase64 } = useBase64(textInput)
+const { copy: copyTextBase64 } = useCopy({ source: textBase64, text: 'Base64 string copied to the clipboard' })
+
+const fileList = ref()
+const fileInput = ref() as Ref<File>
+const { base64: fileBase64 } = useBase64(fileInput)
+const { copy: copyFileBase64 } = useCopy({ source: fileBase64, text: 'Base64 string copied to the clipboard' })
+
+
+function onUpload({ file: { file }, }: { file: UploadFileInfo }) {
+  if (file) {
+    fileList.value = []
+    fileInput.value = file
+  }
+}
+
+</script>
+
+<style lang="less" scoped>
+.n-input,
+.n-upload,
+.n-card {
+  margin-bottom: 15px;
+}
+
+::v-deep(.n-upload-trigger) {
+  width: 100%;
+}
+</style>

src/tools/base64-converter/index.ts

@@ -0,0 +1,11 @@
+import { FileDigit } from '@vicons/tabler';
+import type { ITool } from './../Tool';
+
+export const tool: ITool = {
+  name: 'Base64 converter',
+  path: '/base64-converter',
+  description: "Convert string, files or images into a it's base64 representation.",
+  keywords: ['base64', 'converter', 'upload', 'image', 'file', 'convertion', 'web', 'data', 'format'],
+  component: () => import('./base64-converter.vue'),
+  icon: FileDigit,
+};

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './Tool';
 
+import { tool as base64Converter } from './base64-converter';
 import { tool as crontabGenerator } from './crontab-generator';
 import { tool as textStatistics } from './text-statistics';
 import { tool as tokenGenerator } from './token-generator';
@@ -25,7 +26,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Converter',
     icon: LockOpen,
-    components: [dateTimeConverter, baseConverter, romanNumeralConverter],
+    components: [dateTimeConverter, baseConverter, romanNumeralConverter, base64Converter],
   },
   {
     name: 'Web',