feat(tool): case converter

3 files changed, 90 insertions, 1 deletions

diff --git a/src/tools/case-converter/case-converter.vue b/src/tools/case-converter/case-converter.vue
new file mode 100644
index 0000000..e4a8e02
--- /dev/null
+++ b/src/tools/case-converter/case-converter.vue
@@ -0,0 +1,76 @@
+<template>
+  <n-card>
+    <n-form
+      label-width="120"
+      label-placement="left"
+      :show-feedback="false"
+    >
+      <n-form-item label="Your string:">
+        <n-input v-model:value="input" />
+      </n-form-item>
+
+      <n-divider />
+
+
+      <n-form-item label="Camelcase:">
+        <n-input :value="camelCase(input)" />
+      </n-form-item>
+      <n-form-item label="Capitalcase:">
+        <n-input :value="capitalCase(input)" />
+      </n-form-item>
+      <n-form-item label="Constantcase:">
+        <n-input :value="constantCase(input)" />
+      </n-form-item>
+      <n-form-item label="Dotcase:">
+        <n-input :value="dotCase(input)" />
+      </n-form-item>
+      <n-form-item label="Headercase:">
+        <n-input :value="headerCase(input)" />
+      </n-form-item>
+      <n-form-item label="Nocase:">
+        <n-input :value="noCase(input)" />
+      </n-form-item>
+      <n-form-item label="Paramcase:">
+        <n-input :value="paramCase(input)" />
+      </n-form-item>
+      <n-form-item label="Pascalcase:">
+        <n-input :value="pascalCase(input)" />
+      </n-form-item>
+      <n-form-item label="Pathcase:">
+        <n-input :value="pathCase(input)" />
+      </n-form-item>
+      <n-form-item label="Sentencecase:">
+        <n-input :value="sentenceCase(input)" />
+      </n-form-item>
+      <n-form-item label="Snakecase:">
+        <n-input :value="snakeCase(input)" />
+      </n-form-item>
+    </n-form>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  camelCase,
+  capitalCase,
+  constantCase,
+  dotCase,
+  headerCase,
+  noCase,
+  paramCase,
+  pascalCase,
+  pathCase,
+  sentenceCase,
+  snakeCase,
+} from "change-case";
+
+const input = ref('lorem ipsum dolor sit amet')
+
+</script>
+
+<style lang="less" scoped>
+.n-form-item {
+  margin: 5px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/tools/case-converter/index.ts b/src/tools/case-converter/index.ts
new file mode 100644
index 0000000..a6a00e0
--- /dev/null
+++ b/src/tools/case-converter/index.ts
@@ -0,0 +1,12 @@
+import { LetterCaseToggle } from '@vicons/tabler';
+import type { ITool } from './../Tool';
+
+export const tool: ITool = {
+  name: 'Case converter',
+  path: '/case-converter',
+  description: 'Change the case of a string and chose between different formats',
+  keywords: ['case', 'converter', 'camelCase', 'capitalCase', 'constantCase', 'dotCase', 'headerCase', 'noCase', 'paramCase', 'pascalCase', 'pathCase', 'sentenceCase', 'snakeCase', ],
+  component: () => import('./case-converter.vue'),
+  icon: LetterCaseToggle,
+};
+
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 8079133..9ca90dd 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,7 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './Tool';
 
+import { tool as caseConverter } from './case-converter';
 import { tool as colorConverter } from './color-converter';
 import { tool as qrCodeGenerator } from './qr-code-generator';
 import { tool as base64Converter } from './base64-converter';
@@ -28,7 +29,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Converter',
     icon: LockOpen,
-    components: [dateTimeConverter, baseConverter, romanNumeralConverter, base64Converter, colorConverter],
+    components: [dateTimeConverter, baseConverter, romanNumeralConverter, base64Converter, colorConverter, caseConverter],
   },
   {
     name: 'Web',