mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-26 01:36:15 -04:00
feat(tool): case converter
This commit is contained in:
parent
c1e76695e4
commit
7a7372df19
5 changed files with 384 additions and 5 deletions
76
src/tools/case-converter/case-converter.vue
Normal file
76
src/tools/case-converter/case-converter.vue
Normal file
|
@ -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>
|
12
src/tools/case-converter/index.ts
Normal file
12
src/tools/case-converter/index.ts
Normal file
|
@ -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,
|
||||
};
|
||||
|
|
@ -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',
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue