feat: Add Text-Case Transformer functionality

components.d.ts

@@ -89,7 +89,9 @@ declare module '@vue/runtime-core' {
     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
     IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
     'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
+    'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
+    IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
@@ -144,7 +146,10 @@ declare module '@vue/runtime-core' {
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSlider: typeof import('naive-ui')['NSlider']
     NSpin: typeof import('naive-ui')['NSpin']
+    NStatistic: typeof import('naive-ui')['NStatistic']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
@@ -159,6 +164,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
+    SafelinkDecoder: typeof import('./src/tools/safelink-decoder/safelink-decoder.vue')['default']
     SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
     SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
     SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']
@@ -166,6 +172,8 @@ declare module '@vue/runtime-core' {
     SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default']
     TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default']
     TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']
+    TextcaseTransformer: typeof import('./src/tools/text-case-transformer/textcase-transformer.vue')['default']
+    TextCaseTransformer: typeof import('./src/tools/text-case-transformer/text-case-transformer.vue')['default']
     TextDiff: typeof import('./src/tools/text-diff/text-diff.vue')['default']
     TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']
     TextToBinary: typeof import('./src/tools/text-to-binary/text-to-binary.vue')['default']

locales/en.yml

@@ -332,6 +332,10 @@ tools:
     title: JSON minify
     description: Minify and compress your JSON by removing unnecessary white spaces.
 
+  text-case-transformer:
+    title: Text case transformer
+    description: Transform text to different cases (upper, lower, capitalize words, capitalize sentences, remove punctuations, remove extra spaces, reverse text)
+
   ulid-generator:
     title: ULID generator
     description: Generate random Universally Unique Lexicographically Sortable Identifier (ULID).

locales/zh.yml

@@ -336,6 +336,10 @@ tools:
     title: 字符串混淆器
     description: 混淆字符串（如秘密、IBAN 或令牌），使其可共享和可识别，而不泄露其内容。
 
+  text-case-transformer:
+    title: 文本大小写转换器
+    description: 将文本转换为不同的大小写（大写、小写、单词首字母大写、句子首字母大写、去除标点符号、去除多余空格、反转文本）
+    
   base-converter:
     title: 整数基转换器
     description: 在不同的基数（十进制、十六进制、二进制、八进制、base64…）之间转换数字

src/tools/index.ts

@@ -12,6 +12,7 @@ import { tool as macAddressGenerator } from './mac-address-generator';
 import { tool as textToBinary } from './text-to-binary';
 import { tool as ulidGenerator } from './ulid-generator';
 import { tool as ibanValidatorAndParser } from './iban-validator-and-parser';
+import { tool as textCaseTransformer } from './text-case-transformer';
 import { tool as stringObfuscator } from './string-obfuscator';
 import { tool as textDiff } from './text-diff';
 import { tool as emojiPicker } from './emoji-picker';
@@ -168,6 +169,7 @@ export const toolsByCategory: ToolCategory[] = [
       loremIpsumGenerator,
       textStatistics,
       emojiPicker,
+      textCaseTransformer,
       stringObfuscator,
       textDiff,
       numeronymGenerator,

src/tools/text-case-transformer/index.ts

@@ -0,0 +1,13 @@
+import { EyeOff } from '@vicons/tabler';
+import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
+
+export const tool = defineTool({
+  name: translate('tools.text-case-transformer.title'),
+  path: '/text-case-transformer',
+  description: translate('tools.text-case-transformer.description'),
+  keywords: ['string', 'text', 'case', 'transformer', 'secret', 'token', 'hide', 'obscure', 'mask', 'masking'],
+  component: () => import('./text-case-transformer.vue'),
+  icon: EyeOff,
+  createdAt: new Date('2024-04-02'),
+});

src/tools/text-case-transformer/text-case-transformer.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+
+const str = ref('Lorem ipsum dolor sit amet');
+const formattedStr = ref('');
+
+const { copy } = useCopy({ source: formattedStr });
+</script>
+
+<template>
+  <div>
+    <c-input-text v-model:value="str" raw-text placeholder="Enter text" label="Text:" clearable multiline rows="10" />
+
+    <div mt-4 flex gap-10px>
+      <c-button @click="formattedStr = str.toUpperCase()">
+        Uppercase
+      </c-button>
+
+      <c-button @click="formattedStr = str.toLowerCase()">
+        Lowercase
+      </c-button>
+
+      <c-button @click="formattedStr = str.replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase())">
+        Capitalize Words
+      </c-button>
+
+      <c-button @click="formattedStr = str.replace(/(?:^|\.\s*)\w/g, letter => letter.toUpperCase())">
+        Capitalize Sentences
+      </c-button>
+    </div>
+
+    <div mt-4 flex gap-10px>
+      <c-button @click="formattedStr = str.replace(/[^\w\s]/g, ' ')">
+        Remove Punctuation
+      </c-button>
+
+      <c-button @click="formattedStr = str.replace(/\s+/g, ' ').trim()">
+        Remove Extra Spaces
+      </c-button>
+
+      <c-button @click="formattedStr = str.split('').reverse().join('')">
+        Reverse Text
+      </c-button>
+    </div>
+
+    <c-card v-if="formattedStr" mt-60px max-w-600px flex items-center justify-between gap-5px font-mono>
+      <div break-anywhere text-wrap v-html="formattedStr.replace(/\n/g, '<br>')" />
+
+      <c-button @click="copy()">
+        <icon-mdi:content-copy />
+      </c-button>
+    </c-card>
+  </div>
+</template>