mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-24 08:46:15 -04:00
feat(Case Converter): Add lowercase and uppercase (#534)
* feat(case converter): add uppercase and lowercase * (case converter) correctly use stripRegexp * style: lint fix * feat(ui): added c-select in the ui lib (#550) * feat(ui): added c-select in the ui lib * refactor(ui): switched n-select to c-select * feat(new tool): emoji picker (#551) * chore(deps): update dependency @vitejs/plugin-vue to v4 (#496) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @vitejs/plugin-vue-jsx to v3 (#497) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * refactor(case converter): using nocase to convert to upper and lower case * refactor(case converter): config based case changes --------- Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
This commit is contained in:
parent
56d74d07a8
commit
7b6232a151
3 changed files with 79 additions and 52 deletions
|
@ -19,62 +19,88 @@ const baseConfig = {
|
|||
};
|
||||
|
||||
const input = ref('lorem ipsum dolor sit amet');
|
||||
|
||||
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="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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue