feat(tools): added case converter

tools/text/case-converter.vue

@@ -0,0 +1,133 @@
+<template>
+  <ToolWrapper :config="$toolConfig">
+    <v-text-field
+      v-model="text"
+      outlined
+      label="Input text"
+    />
+
+    <v-row no-dense>
+      <v-col v-for="item of cases" :key="item.title" class="section" lg="6">
+        <h2 class="section-title">
+          {{ item.title }}
+        </h2>
+        {{ item.description }}
+        <v-text-field
+          dense
+          readonly
+          outlined
+          :value="item.transform(text)"
+          append-icon="mdi-content-copy"
+          hide-details
+          @click:append="copy(item.transform(text))"
+        />
+      </v-col>
+    </v-row>
+  </ToolWrapper>
+</template>
+
+<tool>
+title: 'Case converter'
+description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus distinctio dolor dolorum eaque eligendi, facilis impedit laboriosam odit placeat.'
+icon: mdi-format-letter-case-upper
+keywords: [ flatcase, camelcase ]
+path: '/case-converter'
+</tool>
+
+<script lang="ts">
+import {Component} from 'nuxt-property-decorator'
+import * as changeCase from 'change-case'
+import {CopyableMixin} from '~/mixins/copyable.mixin'
+import Tool from '~/components/Tool.vue'
+
+@Component({
+  mixins: [CopyableMixin]
+})
+export default class CaseConverter extends Tool {
+  text = 'lorem ipsum'
+  changeCase = changeCase
+
+  cases = [
+    {
+      title: 'Lowercase',
+      description: 'Basically lowercase',
+      transform: (s: string) => s.toLowerCase()
+    },
+    {
+      title: 'Uppercase',
+      description: 'Basically uppercase',
+      transform: (s: string) => s.toUpperCase()
+    },
+    {
+      title: 'Camel case',
+      description: 'String with the separator denoted by the next word capitalized.',
+      transform: changeCase.camelCase
+    },
+    {
+      title: 'Snake case',
+      description: 'Lower case string with underscores between words.',
+      transform: changeCase.snakeCase
+    },
+    {
+      title: 'Kebab case',
+      description: 'Lower cased string with dashes between words.',
+      transform: changeCase.paramCase
+    },
+    {
+      title: 'Capital case',
+      description: 'Space separated string with each word capitalized.',
+      transform: changeCase.capitalCase
+    },
+    {
+      title: 'Constant case',
+      description: 'Upper case string with an underscore between words.',
+      transform: changeCase.constantCase
+    },
+    {
+      title: 'Dot case',
+      description: 'Lower case string with a period between words.',
+      transform: changeCase.dotCase
+    },
+    {
+      title: 'Header case',
+      description: 'Dash separated string of capitalized words.',
+      transform: changeCase.headerCase
+    },
+    {
+      title: 'No case',
+      description: 'Lower cased string with spaces between words.',
+      transform: changeCase.noCase
+    },
+    {
+      title: 'Pascal case',
+      description: 'String of capitalized words without separators.',
+      transform: changeCase.pascalCase
+    },
+    {
+      title: 'Path case',
+      description: 'Lower case string with slashes between words.',
+      transform: changeCase.pathCase
+    },
+    {
+      title: 'Sentence case',
+      description: 'Lower case with spaces between words, then capitalize the string.',
+      transform: changeCase.sentenceCase
+    },
+    {
+      title: 'Swap case',
+      description: 'Swap every character from upper to lower case, or lower to upper case.',
+      transform: (s: string) => s.replace(/\w/g, (val: string) => val === val.toLowerCase() ? val.toUpperCase() : val.toLowerCase())
+    },
+    {
+      title: 'Sponge case',
+      description: 'Transform into a string with random capitalization applied.',
+      transform: (s: string) => s.replace(/\w/g, (val: string) => Math.random() > 0.5 ? val.toUpperCase() : val.toLowerCase())
+    }
+  ]
+}
+
+</script>
+
+<style scoped lang="less">
+
+</style>