feat: add split by separator + order by numeric + no sort

Fix #764 #1279 #1090
Small screen UI Fix

components.d.ts

@@ -132,6 +132,7 @@ declare module '@vue/runtime-core' {
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
@@ -144,6 +145,7 @@ declare module '@vue/runtime-core' {
     NMenu: typeof import('naive-ui')['NMenu']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSlider: typeof import('naive-ui')['NSlider']
+    NSpace: typeof import('naive-ui')['NSpace']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']

src/tools/list-converter/list-converter.models.test.ts

@@ -6,7 +6,7 @@ describe('list-converter', () => {
   describe('convert', () => {
     it('should convert a given list', () => {
       const options: ConvertOptions = {
-        separator: ', ',
+        itemsSeparator: ', ',
         trimItems: true,
         removeDuplicates: true,
         itemPrefix: '"',
@@ -19,6 +19,7 @@ describe('list-converter', () => {
         sortList: null,
         lowerCase: false,
         keepLineBreaks: false,
+        splitBySeparator: '',
       };
       const input = `
         1
@@ -33,7 +34,7 @@ describe('list-converter', () => {
 
     it('should return an empty value for an empty input', () => {
       const options: ConvertOptions = {
-        separator: ', ',
+        itemsSeparator: ', ',
         trimItems: true,
         removeDuplicates: true,
         itemPrefix: '',
@@ -46,13 +47,14 @@ describe('list-converter', () => {
         sortList: null,
         lowerCase: false,
         keepLineBreaks: false,
+        splitBySeparator: '',
       };
       expect(convert('', options)).toEqual('');
     });
 
     it('should keep line breaks', () => {
       const options: ConvertOptions = {
-        separator: '',
+        itemsSeparator: '',
         trimItems: true,
         itemPrefix: '<li>',
         itemSuffix: '</li>',
@@ -65,6 +67,7 @@ describe('list-converter', () => {
         removeDuplicates: false,
         reverseList: false,
         sortList: null,
+        splitBySeparator: '',
       };
       const input = `
         1
@@ -81,30 +84,104 @@ describe('list-converter', () => {
 
     it('should remove prefix and suffix', () => {
       const options: ConvertOptions = {
-        separator: '',
+        itemsSeparator: '',
         trimItems: true,
         itemPrefix: '',
         itemSuffix: '',
-        removeItemPrefix: '\<li\>',
-        removeItemSuffix: '\</li\>',
+        removeItemPrefix: '<li>',
+        removeItemSuffix: '</li>',
         listPrefix: '',
         listSuffix: '',
         keepLineBreaks: true,
         lowerCase: false,
         removeDuplicates: false,
         reverseList: false,
         sortList: null,
+        splitBySeparator: '',
       };
       const input = `
 <li>1</li>
 <li>2</li>
 <li>3</li>
         `;
-      const expected = `
-1
+      const expected = `1
 2
+3`;
+      expect(convert(input, options)).toEqual(expected);
+    });
+
+    it('should split by separator', () => {
+      const options: ConvertOptions = {
+        itemsSeparator: '',
+        trimItems: true,
+        itemPrefix: '',
+        itemSuffix: '',
+        removeItemPrefix: '',
+        removeItemSuffix: '',
+        listPrefix: '',
+        listSuffix: '',
+        keepLineBreaks: true,
+        lowerCase: false,
+        removeDuplicates: false,
+        reverseList: false,
+        sortList: null,
+        splitBySeparator: ',',
+      };
+      const input = '1,2,3';
+      const expected = `1
+2
+3`;
+      expect(convert(input, options)).toEqual(expected);
+    });
+
+    it('should sort by asc-num', () => {
+      const options: ConvertOptions = {
+        itemsSeparator: '',
+        trimItems: true,
+        itemPrefix: '',
+        itemSuffix: '',
+        removeItemPrefix: '',
+        removeItemSuffix: '',
+        listPrefix: '',
+        listSuffix: '',
+        keepLineBreaks: true,
+        lowerCase: false,
+        removeDuplicates: false,
+        reverseList: false,
+        sortList: 'asc-num',
+        splitBySeparator: '',
+      };
+      const input = `3
+20
+1`;
+      const expected = `1
 3
-`;
+20`;
+      expect(convert(input, options)).toEqual(expected);
+    });
+    it('should sort by desc', () => {
+      const options: ConvertOptions = {
+        itemsSeparator: '',
+        trimItems: true,
+        itemPrefix: '',
+        itemSuffix: '',
+        removeItemPrefix: '',
+        removeItemSuffix: '',
+        listPrefix: '',
+        listSuffix: '',
+        keepLineBreaks: true,
+        lowerCase: false,
+        removeDuplicates: false,
+        reverseList: false,
+        sortList: 'desc',
+        splitBySeparator: '',
+      };
+      const input = `1
+20
+3`;
+      const expected = `3
+20
+1`;
       expect(convert(input, options)).toEqual(expected);
     });
   });

src/tools/list-converter/list-converter.models.ts

@@ -14,16 +14,16 @@ function convert(list: string, options: ConvertOptions): string {
 
   return _.chain(list)
     .thru(whenever(options.lowerCase, text => text.toLowerCase()))
-    .split('\n')
+    .split(new RegExp(`[${options.splitBySeparator}\n]`, 'g'))
     .thru(whenever(options.removeDuplicates, _.uniq))
     .thru(whenever(options.reverseList, _.reverse))
-    .thru(whenever(!_.isNull(options.sortList), parts => parts.sort(byOrder({ order: options.sortList }))))
     .map(whenever(options.trimItems, _.trim))
+    .thru(whenever(!_.isNull(options.sortList), parts => parts.sort(byOrder({ order: options.sortList }))))
     .without('')
     .map(p => options.removeItemPrefix ? p.replace(new RegExp(`^${options.removeItemPrefix}`, 'g'), '') : p)
     .map(p => options.removeItemSuffix ? p.replace(new RegExp(`${options.removeItemSuffix}$`, 'g'), '') : p)
     .map(p => options.itemPrefix + p + options.itemSuffix)
-    .join(options.separator + lineBreak)
-    .thru(text => [options.listPrefix, text, options.listSuffix].join(lineBreak))
+    .join(options.itemsSeparator + lineBreak)
+    .thru(text => [options.listPrefix, text, options.listSuffix].filter(l => l !== '').join(lineBreak))
     .value();
 }

src/tools/list-converter/list-converter.types.ts

@@ -1,4 +1,4 @@
-export type SortOrder = 'asc' | 'desc' | null;
+export type SortOrder = null | 'asc' | 'desc' | 'asc-num' | 'desc-num';
 
 export interface ConvertOptions {
   lowerCase: boolean
@@ -12,6 +12,7 @@ export interface ConvertOptions {
   reverseList: boolean
   sortList: SortOrder
   removeDuplicates: boolean
-  separator: string
+  itemsSeparator: string
+  splitBySeparator: string
   keepLineBreaks: boolean
 }

src/tools/list-converter/list-converter.vue

@@ -4,15 +4,25 @@ import { convert } from './list-converter.models';
 import type { ConvertOptions } from './list-converter.types';
 
 const sortOrderOptions = [
+  {
+    label: 'No Sort',
+    value: null,
+  },
   {
     label: 'Sort ascending',
     value: 'asc',
-    disabled: false,
   },
   {
     label: 'Sort descending',
     value: 'desc',
-    disabled: false,
+  },
+  {
+    label: 'Sort ascending (Numeric)',
+    value: 'asc-num',
+  },
+  {
+    label: 'Sort descending (Numeric)',
+    value: 'desc-num',
   },
 ];
 
@@ -29,7 +39,8 @@ const conversionConfig = useStorage<ConvertOptions>('list-converter:conversionCo
   listSuffix: '',
   reverseList: false,
   sortList: null,
-  separator: ', ',
+  itemsSeparator: ', ',
+  splitBySeparator: '',
 });
 
 function transformer(value: string) {
@@ -41,7 +52,7 @@ function transformer(value: string) {
   <div style="flex: 0 0 100%">
     <div style="margin: 0 auto; max-width: 600px">
       <c-card>
-        <div flex>
+        <n-space>
           <div>
             <n-form-item label="Trim list items" label-placement="left" label-width="150" :show-feedback="false" mb-2>
               <n-switch v-model:value="conversionConfig.trimItems" />
@@ -62,7 +73,7 @@ function transformer(value: string) {
               <n-switch v-model:value="conversionConfig.keepLineBreaks" />
             </n-form-item>
           </div>
-          <div flex-1>
+          <div>
             <c-select
               v-model:value="conversionConfig.sortList"
               label="Sort list"
@@ -78,13 +89,23 @@ function transformer(value: string) {
             />
 
             <c-input-text
-              v-model:value="conversionConfig.separator"
-              label="Separator"
+              v-model:value="conversionConfig.itemsSeparator"
+              label="Items Separator"
+              label-position="left"
+              label-width="120px"
+              label-align="right"
+              mb-2
+              placeholder="Items separator"
+            />
+
+            <c-input-text
+              v-model:value="conversionConfig.splitBySeparator"
+              label="Split Separator"
               label-position="left"
               label-width="120px"
               label-align="right"
               mb-2
-              placeholder=","
+              placeholder="Separator for splitting"
             />
 
             <n-form-item label="Unwrap item" label-placement="left" label-width="120" :show-feedback="false" mb-2>
@@ -125,7 +146,7 @@ function transformer(value: string) {
               />
             </n-form-item>
           </div>
-        </div>
+        </n-space>
       </c-card>
     </div>
   </div>

src/utils/array.ts

@@ -1,7 +1,13 @@
 export { byOrder };
 
-function byOrder({ order }: { order: 'asc' | 'desc' | null | undefined }) {
+function byOrder({ order }: { order: 'asc' | 'desc' | 'asc-num' | 'desc-num' | null | undefined }) {
   return (a: string, b: string) => {
+    if (order === 'asc-num' || order === 'desc-num') {
+      const numOpt = {
+        numeric: true,
+      };
+      return order === 'asc-num' ? a.localeCompare(b, undefined, numOpt) : b.localeCompare(a, undefined, numOpt);
+    }
     return order === 'asc' ? a.localeCompare(b) : b.localeCompare(a);
   };
 }