feat(tool): case converter

This commit is contained in:
Corentin Thomasset 2022-04-16 00:03:31 +02:00
parent c1e76695e4
commit 7a7372df19
No known key found for this signature in database
GPG key ID: DBD997E935996158
5 changed files with 384 additions and 5 deletions

View 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>

View 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,
};

View file

@ -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',