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>

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';

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
-      <c-input-text
+      v-model:value="input"
-        v-model:value="input"
+      label="Your string:"
-        label="Your string"
+      placeholder="Your string..."
-        label-position="left"
+      raw-text
-        label-width="120px"
+      v-bind="inputLabelAlignmentConfig"
-        label-align="right"
+    />
-        placeholder="Your string..."
-        raw-text
-      />
 
-      <n-divider />
+    <div divider my-16px />
 
-      <n-form-item label="Camelcase:">
+    <InputCopyable
-        <InputCopyable :value="camelCase(input, baseConfig)" />
+      v-for="format in formats"
-      </n-form-item>
+      :key="format.label"
-      <n-form-item label="Capitalcase:">
+      :value="format.value"
-        <InputCopyable :value="capitalCase(input, baseConfig)" />
+      :label="format.label"
-      </n-form-item>
+      v-bind="inputLabelAlignmentConfig"
-      <n-form-item label="Constantcase:">
+      mb-1
-        <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>
   </c-card>
 </template>
-
-<style lang="less" scoped>
-.n-form-item {
-  margin: 5px 0;
-}
-</style>

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',
   },
 });