diff options
| -rw-r--r-- | src/components/InputCopyable.vue | 2 | ||||
| -rw-r--r-- | src/tools/case-converter/case-converter.vue | 128 | ||||
| -rw-r--r-- | unocss.config.ts | 1 |
3 files changed, 79 insertions, 52 deletions
diff --git a/src/components/InputCopyable.vue b/src/components/InputCopyable.vue index 0c68909..db26f45 100644 --- a/src/components/InputCopyable.vue +++ b/src/components/InputCopyable.vue @@ -11,7 +11,7 @@ const { copy } = useClipboard({ source: value }); function onCopyClicked() { copy(); - tooltipText.value = 'Copied !'; + tooltipText.value = 'Copied!'; setTimeout(() => { tooltipText.value = 'Copy to clipboard'; diff --git a/src/tools/case-converter/case-converter.vue b/src/tools/case-converter/case-converter.vue index 1a2e3af..e43744c 100644 --- a/src/tools/case-converter/case-converter.vue +++ b/src/tools/case-converter/case-converter.vue @@ -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> diff --git a/unocss.config.ts b/unocss.config.ts index 0ce8f70..6da6873 100644 --- a/unocss.config.ts +++ b/unocss.config.ts @@ -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', }, }); |