mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-08 15:15:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(case converter): config based case changes

Browse source
This commit is contained in:
Corentin Thomasset 2023-08-09 23:27:59 +02:00
parent 325f27b547
commit 7abefcd913
No known key found for this signature in database
GPG key ID: DBD997E935996158
2 changed files with 77 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

131
src/tools/case-converter/case-converter.vue
View file

@ -20,66 +20,87 @@ const baseConfig = {
const input = ref('lorem ipsum dolor sit amet');
// Using noCase to convert to lowercase and uppercase to ensure consistent splitting
const toLowerCase = (str: string) => noCase(str, baseConfig).toLocaleLowerCase();
const toUpperCase = (str: string) => noCase(str, baseConfig).toLocaleUpperCase();
const formats = computed(() => [
{
label: 'Lowercase:',
value: noCase(input.value, baseConfig).toLocaleLowerCase(),
},
{
label: 'Uppercase:',
value: noCase(input.value, baseConfig).toLocaleUpperCase(),
},
{
label: 'Camelcase:',
value: camelCase(input.value, baseConfig),
},
{
label: 'Capitalcase:',
value: capitalCase(input.value, baseConfig),
},
{
label: 'Constantcase:',
value: constantCase(input.value, baseConfig),
},
{
label: 'Dotcase:',
value: dotCase(input.value, baseConfig),
},
{
label: 'Headercase:',
value: headerCase(input.value, baseConfig),
},
{
label: 'Nocase:',
value: noCase(input.value, baseConfig),
},
{
label: 'Paramcase:',
value: paramCase(input.value, baseConfig),
},
{
label: 'Pascalcase:',
value: pascalCase(input.value, baseConfig),
},
{
label: 'Pathcase:',
value: pathCase(input.value, baseConfig),
},
{
label: 'Sentencecase:',
value: sentenceCase(input.value, baseConfig),
},
{
label: 'Snakecase:',
value: snakeCase(input.value, baseConfig),
},
]);
const inputLabelAlignmentConfig = {
labelPosition: 'left',
labelWidth: '120px',
labelAlign: 'right',
};
</script>
<template>
<c-card>
<n-form label-width="120" label-placement="left" :show-feedback="false">
<c-input-text
v-model:value="input" label="Your string" label-position="left" label-width="120px"
label-align="right" placeholder="Your string..." raw-text
/>
<c-input-text
v-model:value="input"
label="Your string:"
placeholder="Your string..."
raw-text
v-bind="inputLabelAlignmentConfig"
/>
<n-divider />
<div divider my-16px />
<n-form-item label="Lowercase:">
<InputCopyable :value="toLowerCase(input)" />
</n-form-item>
<n-form-item label="Uppercase:">
<InputCopyable :value="toUpperCase(input)" />
</n-form-item>
<n-form-item label="Camelcase:">
<InputCopyable :value="camelCase(input, baseConfig)" />
</n-form-item>
<n-form-item label="Capitalcase:">
<InputCopyable :value="capitalCase(input, baseConfig)" />
</n-form-item>
<n-form-item label="Constantcase:">
<InputCopyable :value="constantCase(input, baseConfig)" />
</n-form-item>
<n-form-item label="Dotcase:">
<InputCopyable :value="dotCase(input, baseConfig)" />
</n-form-item>
<n-form-item label="Headercase:">
<InputCopyable :value="headerCase(input, baseConfig)" />
</n-form-item>
<n-form-item label="Nocase:">
<InputCopyable :value="noCase(input, baseConfig)" />
</n-form-item>
<n-form-item label="Paramcase:">
<InputCopyable :value="paramCase(input, baseConfig)" />
</n-form-item>
<n-form-item label="Pascalcase:">
<InputCopyable :value="pascalCase(input, baseConfig)" />
</n-form-item>
<n-form-item label="Pathcase:">
<InputCopyable :value="pathCase(input, baseConfig)" />
</n-form-item>
<n-form-item label="Sentencecase:">
<InputCopyable :value="sentenceCase(input, baseConfig)" />
</n-form-item>
<n-form-item label="Snakecase:">
<InputCopyable :value="snakeCase(input, baseConfig)" />
</n-form-item>
</n-form>
<InputCopyable
v-for="format in formats"
:key="format.label"
:value="format.value"
:label="format.label"
v-bind="inputLabelAlignmentConfig"
mb-1
/>
</c-card>
</template>
<style lang="less" scoped>
.n-form-item {
margin: 5px 0;
}
</style>

1
unocss.config.ts
View file

@ -19,5 +19,6 @@ export default defineConfig({
},
shortcuts: {
'pretty-scrollbar': 'scrollbar scrollbar-rounded scrollbar-thumb-color-gray-300 scrollbar-track-color-gray-100 dark:scrollbar-thumb-color-#424242 dark:scrollbar-track-color-#686868',
'divider': 'h-1px bg-current op-10',
},
});