1.2.0

Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>

CHANGELOG.md

@@ -3,17 +3,6 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## Next
-- [fix] [GithubContributors] ordered contributors by contribution count
-- [refactor] used vue-typecasting for number inputs
-- [feat] lazy loading tools routes
-- [feat] added [markdown editor](/#/markdown-editor)
-- [feat] added [lorem ipsum generator](/#/lorem-ipsum-generator)
-
-## 1.2.1
-- [fix] [UuidGenerator] added quantity validation rules
-- [refactor] better isInt checker
-
 ## 1.2.0
 - [feat] [UuidGenerator] can generate multiple uuids 
 
@@ -29,4 +18,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [fix] remove history move (incompatible with vercel.com)
 
 ## 1.0.0
-- First release
+- First release

README.md

@@ -2,7 +2,7 @@
 
 Aggregated set of useful tools that every developer may need once in a while. Available [here](https://it-tools.tech).
 
-## Functionalities roadmap
+## Functionality/roadmap
 Here is an unordered list of the current functionalities, and some that may come. 
 
 - [x] Token generator
@@ -15,8 +15,7 @@ Here is an unordered list of the current functionalities, and some that may come
 - [x] Url encoder
 - [x] Base 64 generator
 - [x] Text information
-- [x] Markdown editor
-- [x] Lorem ipsum text generator
+- [ ] Lorem ipsum text generator
 - [ ] Image exif editor/remover
 - [ ] QR code generator
 - [ ] Bip39 pass-phrase generator
@@ -25,8 +24,6 @@ Here is an unordered list of the current functionalities, and some that may come
 - [ ] Image cropper 
 - [ ] Image resizer 
 - [ ] HTTP client (w/ axios)
-- [ ] Math expression evaluator
-- [ ] Math expression graph
 
 You have an idea of a tool? Submit a feature request!
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "1.3.0",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3139,12 +3139,6 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
-        "highlight.js": {
-          "version": "9.18.1",
-          "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.1.tgz",
-          "integrity": "sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==",
-          "dev": true
-        },
         "supports-color": {
           "version": "7.1.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
@@ -4379,11 +4373,6 @@
         "domelementtype": "1"
       }
     },
-    "dompurify": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.0.11.tgz",
-      "integrity": "sha512-qVoGPjIW9IqxRij7klDQQ2j6nSe4UNWANBhZNLnsS7ScTtLb+3YdxkRY8brNTpkUiTtcXsCJO+jS0UCDfenLuA=="
-    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -6264,6 +6253,12 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "highlight.js": {
+      "version": "9.18.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.1.tgz",
+      "integrity": "sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==",
+      "dev": true
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -8108,11 +8103,6 @@
         "object-visit": "^1.0.0"
       }
     },
-    "marked": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-1.1.0.tgz",
-      "integrity": "sha512-EkE7RW6KcXfMHy2PA7Jg0YJE1l8UPEZE8k45tylzmZM30/r1M1MUXWQfJlrSbsTeh7m/XTwHbWUENvAJZpp1YA=="
-    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "it-tools",
   "description": "",
-  "version": "1.3.0",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -13,8 +13,6 @@
     "color-convert": "^2.0.1",
     "color-name": "^1.1.4",
     "core-js": "^3.6.4",
-    "dompurify": "^2.0.11",
-    "marked": "^1.1.0",
     "register-service-worker": "^1.7.1",
     "roboto-fontface": "*",
     "vue": "^2.6.11",

src/App.vue

@@ -1,15 +1,14 @@
 <template>
     <v-app id="inspire">
         <vue-headful
-                :title="currentRoute ? `${currentRoute.text} - IT-Tools` : 'IT-Tools'"
-                :description="currentRoute ? currentRoute.description: 'Aggregated set of useful tools that every developer may need once in a while.'"
-                :keywords="currentRoute ? currentRoute.keywords: null"
-                image="/img/banner.png"
+            :title="currentRoute ? `${currentRoute.text} - IT-Tools` : 'IT-Tools'"
+            :description="currentRoute ? currentRoute.description: 'Aggregated set of useful tools that every developer may need once in a while.'"
+            :keywords="currentRoute ? currentRoute.keywords: null"
+            image="/img/banner.png"
         />
         <v-navigation-drawer v-model="drawer" app clipped>
-            <template v-slot:prepend>
-                <SearchBar class="hidden-sm-and-up"/>
-            </template>
+
+            <SearchBar class="hidden-sm-and-up" />
 
             <v-list dense>
 
@@ -18,7 +17,7 @@
 
                     <v-list-item v-for="item in section.child" :key="item.text" :to="item.path">
                         <v-list-item-action>
-                            <v-icon style="width: 1.25em">{{ item.icon }}</v-icon>
+                            <v-icon>{{ item.icon }}</v-icon>
                         </v-list-item-action>
                         <v-list-item-content>
                             <v-list-item-title>
@@ -100,7 +99,7 @@
             appVersion: 'v' + process.env.APPLICATION_VERSION,
             drawer: null,
             items: toolsComponents,
-            currentRoute: {}
+            currentRoute:{}
         }),
         mounted() {
             this.setTitle()
@@ -108,14 +107,14 @@
         created() {
             this.$vuetify.theme.dark = true
         },
-        methods: {
-            setTitle() {
+        methods:{
+            setTitle(){
                 const path = this.$router.currentRoute.path;
                 this.currentRoute = toolsComponents.map(p => p.child).flat().find(p => p.path === path)
             }
         },
-        watch: {
-            '$route'() {
+        watch:{
+            '$route'(){
                 this.setTitle()
             }
         }
@@ -127,33 +126,6 @@
         overflow-y: auto !important;
     }
 
-    .pretty-scrollbar{
-        &::-webkit-scrollbar {
-            width: 5px!important;
-        }
-
-        /* Track */
-        &::-webkit-scrollbar-track {
-            opacity: 0 !important;
-        }
-
-        /* Handle */
-        &::-webkit-scrollbar-thumb {
-            background: rgba(241, 241, 241, 0.10) !important;
-            border-radius: 10px;
-        }
-
-        /* Handle on hover */
-        &::-webkit-scrollbar-thumb:hover {
-            background: rgba(241, 241, 241, 0.20)!important;
-        }
-    }
-
-
-    .v-navigation-drawer__content{
-        .pretty-scrollbar;
-    }
-
     .single-card {
         width: 100%;
         max-width: 700px !important;

src/components/GithubContributors.vue

@@ -36,7 +36,7 @@
             axios
                 .get(url)
                 .then(({data}) => {
-                    this.contributors = data.sort((a, b) => b.contributions - a.contributions)
+                    this.contributors = data.sort((a, b) => a.contributions - b.contributions)
                     this.loading = false
                 })
                 .catch(() => this.hasError = true)

src/router.js

@@ -1,9 +1,20 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from './routes/Home.vue'
+import TokenGenerator from "./routes/tools/TokenGenerator";
+import Hash from "./routes/tools/Hash";
+import DateConverter from "./routes/tools/DateConverter";
+import UrlEncoder from "./routes/tools/UrlEncoder";
+import FileToBase64 from "./routes/tools/FileToBase64";
+import TextCypher from "./routes/tools/TextCypher";
+import TextStats from "./routes/tools/TextStats";
+import BaseConverter from "./routes/tools/BaseConverter";
+import UuidGenerator from "./routes/tools/UuidGenerator";
+import ColorConverter from "./routes/tools/ColorConverter";
 
 Vue.use(VueRouter)
 
+
 const toolsComponents = [
     {
         title: 'Crypto',
@@ -12,7 +23,7 @@ const toolsComponents = [
                 icon: 'fa-key',
                 text: 'Token generator',
                 path: '/token-generator',
-                component: () => import('./routes/tools/TokenGenerator'),
+                component: TokenGenerator,
                 keywords: ['token', 'random', 'string', 'alphanumeric'],
                 description: 'Generate random tokens.'
             },
@@ -20,14 +31,14 @@ const toolsComponents = [
                 icon: 'fa-fingerprint',
                 text: 'Uuid generator',
                 path: '/uuid-generator',
-                component: () => import('./routes/tools/UuidGenerator'),
+                component: UuidGenerator,
                 keywords: ['token', 'v4', 'string', 'alphanumeric']
             },
             {
                 icon: 'fa-font',
                 text: 'Hash text',
                 path: '/hash',
-                component: () => import('./routes/tools/Hash'),
+                component: Hash,
                 keywords: ['md5', 'sha1', 'sha256', 'sha224', 'sha512', 'sha384', 'sha3', 'ripemd160', 'random']
 
             },
@@ -35,7 +46,7 @@ const toolsComponents = [
                 icon: 'fa-lock',
                 text: 'Cypher/uncypher text',
                 path: '/cypher',
-                component: () => import('./routes/tools/TextCypher'),
+                component: TextCypher,
                 keywords: ['aes', 'tripledes', 'rabbit', 'rabbitlegacy', 'rc4']
             },
         ],
@@ -47,21 +58,21 @@ const toolsComponents = [
                 icon: 'fa-calendar',
                 text: 'Date/Time converter',
                 path: '/date-converter',
-                component: () => import('./routes/tools/DateConverter'),
+                component: DateConverter,
                 keywords: ['locale', 'format', 'iso 8601', 'utc', 'timestamp', 'unix', 'year', 'month', 'day', 'hours', 'minutes', 'seconds']
             },
             {
                 icon: 'fa-exchange-alt',
                 text: 'Base converter',
                 path: '/base-converter',
-                component: () => import('./routes/tools/BaseConverter'),
+                component: BaseConverter,
                 keywords: ['binary', 'hexadecimal', 'decimal']
             },
             {
                 icon: 'fa-palette',
                 text: 'Color picker/converter',
                 path: '/color-picker-converter',
-                component: () => import('./routes/tools/ColorConverter'),
+                component: ColorConverter,
                 keywords: ['rgb', 'rgba', 'hexadecimal', 'hsla', 'red', 'green', 'blue', 'alpha']
             },
         ],
@@ -73,41 +84,27 @@ const toolsComponents = [
                 icon: 'fa-link',
                 text: 'URL encode/decode',
                 path: '/url-encoder',
-                component: () => import('./routes/tools/UrlEncoder'),
+                component: UrlEncoder,
                 keywords: ['%20']
             },
             {
                 icon: 'fa-file-export',
                 text: 'File to Base64',
                 path: '/file-to-base64',
-                component: () => import('./routes/tools/FileToBase64')
+                component: FileToBase64
             },
         ],
     },
     {
-        title: 'Text',
+        title: 'Miscellaneous',
         child: [
             {
-                icon: 'fa-align-left',
+                icon: 'fa-align-left\n',
                 text: 'Text stats',
                 path: '/text-stats',
-                component: () => import('./routes/tools/TextStats'),
+                component: TextStats,
                 keywords: ['word', 'count', 'size', 'bytes', 'length']
             },
-            {
-                icon: 'fab fa-markdown',
-                text: 'Markdown editor',
-                path: '/markdown-editor',
-                component: () => import('./routes/tools/MarkdownEditor'),
-                keywords: ['text', 'html', 'markdown']
-            },
-            {
-                icon: 'fa-align-justify',
-                text: 'Lorem ipsum generator',
-                path: '/lorem-ipsum-generator',
-                component: () => import('./routes/tools/LoremIpsumGenerator'),
-                keywords: ['text', 'dolor', 'sit', 'placeholder', 'fill', 'dummy']
-            }
         ],
     }
 ];

src/routes/About.vue

@@ -11,7 +11,7 @@
             </v-col>
 
         </v-row>
-        <v-row justify="center">
+        <v-row justify="center" >
             <v-col cols="12" md="5" sm="12">
                 <v-card>
                     <v-card-title>Contributors</v-card-title>
@@ -22,7 +22,12 @@
                 <v-card>
                     <v-card-title>Changelog</v-card-title>
                     <v-card-text>
-                        <div v-html="changelog" class="changelog">
+                        <div v-for="(section, i) in changelog" :key="i">
+                            <h2>{{section.title}}</h2>
+                            <ul>
+                                <li v-for="(log, i) in section.logs" :key="i"> {{log}}</li>
+                            </ul>
+                            <br>
                         </div>
                     </v-card-text>
                 </v-card>
@@ -34,8 +39,6 @@
     import Abstract from "../components/Abstract";
     import GithubContributors from "../components/GithubContributors";
     import changelog from "../../CHANGELOG.md"
-    import marked from 'marked'
-    import DOMPurify from 'dompurify';
 
     export default {
         name: "About",
@@ -43,21 +46,28 @@
             changelog: []
         }),
         mounted() {
-            this.changelog = DOMPurify.sanitize(marked('##' + changelog.replace(/^(.*?)##/s, '')));
+
+            this.changelog = ('##' + changelog.replace(/^(.*?)##/s, ''))
+                .split('\n')
+                .filter(v => v !== '')
+                .reduce((sections, v) => {
+                    v = v.trim();
+                    if(v.startsWith('##')){
+                        sections.push({
+                            title: v.replace(/^##/, '').trim(),
+                            logs: []
+                        })
+                    }else {
+                        sections.slice(-1)[0].logs.push(v.replace(/^-/, '').trim())
+                    }
+
+                    return sections
+                }, []);
+            console.log(this.changelog);
         },
         components: {
             Abstract,
             GithubContributors
         },
     }
-</script>
-
-<style scoped lang="less">
-    ::v-deep {
-        .changelog {
-            h2 {
-                margin-top: 10px;
-            }
-        }
-    }
-</style>
+</script>

src/routes/tools/BaseConverter.vue

@@ -8,7 +8,7 @@
                             label="Input base"
                             outlined
                             type="number"
-                            v-model.number="inputBase"
+                            v-model="inputBase"
                             ref="inputBase"
                             hide-details="auto"
                             :rules="baseRules"
@@ -33,7 +33,7 @@
                             label="Output base"
                             outlined
                             type="number"
-                            v-model.number="outputBase"
+                            v-model="outputBase"
                             ref="outputBase"
                             :rules="baseRules"
                     />

src/routes/tools/LoremIpsumGenerator.vue

@@ -1,94 +0,0 @@
-<template>
-    <v-row justify="center" align="center" class="lorem-ipsum-generator">
-        <v-col cols="12" xl="5" lg="6" md="12">
-            <v-card>
-                <v-card-title>Lorem ipsum generator</v-card-title>
-                <v-card-text>
-                    <v-slider v-model="paragraphs" min="1" max="20" label="Paragraphs" thumb-label/>
-                    <v-range-slider v-model="sentencePerParagraph" min="1" max="50" label="Sentences per paragraph"
-                                    thumb-label/>
-                    <v-range-slider v-model="wordPerSentence" min="1" max="50" label="Words per sentence" thumb-label hide-details/>
-                    <v-checkbox v-model="startWithLoremIpsum" label="Start with 'Lorem ipsum ...'" hide-details/>
-                    <v-checkbox v-model="asHTML" label="As HTML" hide-details/>
-                </v-card-text>
-            </v-card>
-        </v-col>
-        <v-col cols="12" xl="5" lg="6" md="12">
-            <v-card>
-                <v-card-text>
-                    <v-textarea outlined readonly hide-details="auto" v-model="loremIpsum" rows="15"
-                                class="text-justify"></v-textarea>
-                    <div class="text-center mt-4">
-                        <v-btn depressed @click="copy()">Copy</v-btn>
-                    </div>
-                </v-card-text>
-            </v-card>
-        </v-col>
-    </v-row>
-</template>
-
-<script>
-    import {copyToClipboard, randFromArray, randIntFromInterval} from "../../utils/helpers";
-
-    const vocabulary = ['a', 'ac', 'accumsan', 'ad', 'adipiscing', 'aenean', 'aliquam', 'aliquet', 'amet', 'ante', 'aptent', 'arcu', 'at', 'auctor', 'bibendum', 'blandit', 'class', 'commodo', 'condimentum', 'congue', 'consectetur', 'consequat', 'conubia', 'convallis', 'cras', 'cubilia', 'cum', 'curabitur', 'curae', 'dapibus', 'diam', 'dictum', 'dictumst', 'dignissim', 'dolor', 'donec', 'dui', 'duis', 'egestas', 'eget', 'eleifend', 'elementum', 'elit', 'enim', 'erat', 'eros', 'est', 'et', 'etiam', 'eu', 'euismod', 'facilisi', 'faucibus', 'felis', 'fermentum', 'feugiat', 'fringilla', 'fusce', 'gravida', 'habitant', 'habitasse', 'hac', 'hendrerit', 'himenaeos', 'iaculis', 'id', 'imperdiet', 'in', 'inceptos', 'integer', 'interdum', 'ipsum', 'justo', 'lacinia', 'lacus', 'laoreet', 'lectus', 'leo', 'ligula', 'litora', 'lobortis', 'lorem', 'luctus', 'maecenas', 'magna', 'magnis', 'malesuada', 'massa', 'mattis', 'mauris', 'metus', 'mi', 'molestie', 'mollis', 'montes', 'morbi', 'mus', 'nam', 'nascetur', 'natoque', 'nec', 'neque', 'netus', 'nisi', 'nisl', 'non', 'nostra', 'nulla', 'nullam', 'nunc', 'odio', 'orci', 'ornare', 'parturient', 'pellentesque', 'penatibus', 'per', 'pharetra', 'phasellus', 'placerat', 'platea', 'porta', 'porttitor', 'posuere', 'potenti', 'praesent', 'pretium', 'primis', 'proin', 'pulvinar', 'purus', 'quam', 'quis', 'quisque', 'rhoncus', 'ridiculus', 'risus', 'rutrum', 'sagittis', 'sapien', 'scelerisque', 'sed', 'sem', 'semper', 'senectus', 'sit', 'sociis', 'sociosqu', 'sodales', 'sollicitudin', 'suscipit', 'suspendisse', 'taciti', 'tellus', 'tempor', 'tempus', 'tincidunt', 'torquent', 'tortor', 'turpis', 'ullamcorper', 'ultrices', 'ultricies', 'urna', 'varius', 'vehicula', 'vel', 'velit', 'venenatis', 'vestibulum', 'vitae', 'vivamus', 'viverra', 'volutpat', 'vulputate'];
-    const firstSentence = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
-
-    const generateSentence = (length) => {
-        let sentence = Array.from({length}).map(() => randFromArray(vocabulary)).join(' ')
-        sentence = sentence.charAt(0).toUpperCase() + sentence.slice(1) + '.'
-        return sentence
-    }
-
-
-    export default {
-        name: "LoremIpsumGenerator",
-        data: () => ({
-            paragraphs: 1,
-            sentencePerParagraph: [3, 8],
-            wordPerSentence: [8, 15],
-            startWithLoremIpsum: true,
-            asHTML: false
-        }),
-        methods:{
-            copy(){
-                copyToClipboard(this.loremIpsum)
-                this.$toast.success('Copied to clipboard.')
-            }
-        },
-        computed: {
-            loremIpsum: function () {
-                const lorem = Array
-                    .from({length: this.paragraphs})
-                    .map(() => {
-                        const length = randIntFromInterval(...this.sentencePerParagraph);
-
-                        return Array.from({length}).map(() => {
-                            const wordCount = randIntFromInterval(...this.wordPerSentence);
-                            return generateSentence(wordCount);
-                        })
-                    });
-
-                if (this.startWithLoremIpsum) {
-                    lorem[0][0] = firstSentence
-                }
-
-                let result;
-                if(this.asHTML){
-                    result = `<p>${lorem.map(s => s.join(' ')).join('</p>\n\n<p>')}</p>`
-                }else{
-                    result = lorem.map(s => s.join(' ')).join('\n\n')
-                }
-
-                return result;
-            }
-        }
-    }
-</script>
-
-<style scoped lang="less">
-    ::v-deep {
-        .v-label{
-            min-width: 200px !important;
-        }
-    }
-</style>

src/routes/tools/MarkdownEditor.vue

@@ -1,77 +0,0 @@
-<template>
-    <v-row justify="center" align="center">
-        <v-col cols="12" xl="5" lg="6" md="12">
-            <v-card>
-                <v-card-text>
-                    <v-textarea v-model="markdown" auto-grow outlined label="Markdown editor"/>
-                    <div class="text-center">
-                        <v-btn @click="copy(markdown)">copy markdown</v-btn>
-                    </div>
-                </v-card-text>
-            </v-card>
-        </v-col>
-        <v-col cols="12" xl="5" lg="6" md="12">
-            <v-card>
-                <v-card-text >
-                    <div class="preview" v-html="html"></div>
-                    <div class="text-center">
-                        <v-divider />
-                        <br>
-                        <v-btn @click="copy(html)">copy html</v-btn>
-                    </div>
-                </v-card-text>
-            </v-card>
-        </v-col>
-    </v-row>
-</template>
-
-<script>
-    // import {debounce} from "../../utils/helpers";
-    import marked from 'marked'
-    import DOMPurify from 'dompurify';
-    import {copyToClipboard} from "../../utils/helpers";
-
-    export default {
-        name: "MarkdownEditor",
-        data: () => ({
-            markdown: '# Hello, World!\nLorem ipsum **dolor** sit *amet*, consectetur adipisicing elit. A aspernatur commodi consequuntur distinctio dolore doloribus eaque earum est ipsum nobis numquam pariatur perspiciatis quasi quis, sed, sunt tempore tenetur, veniam!\n',
-        }),
-        methods: {
-            copy(text){
-                copyToClipboard(text)
-                this.$toast.success('Copied to clipboard.')
-            }
-        },
-        computed: {
-            html() {
-                return DOMPurify.sanitize(marked(this.markdown))
-            }
-        }
-    }
-</script>
-
-<style scoped lang="less">
-    ::v-deep {
-        .preview {
-            padding: 20px;
-
-            h1{
-                margin-bottom: 15px;
-            }
-            code{
-                background-color: rgba(0, 0, 0, 0.3) !important;
-                box-shadow: none;
-                color: #9a9a9a;
-                font-weight: normal;
-            }
-            pre {
-                width: 100%;
-
-                code {
-                    width: 100% !important;
-                    padding: 10px;
-                }
-            }
-        }
-    }
-</style>

src/routes/tools/UuidGenerator.vue

@@ -3,18 +3,8 @@
         <v-card-title>Uuid v4 generator</v-card-title>
 
         <v-card-text>
-            <v-text-field
-                    outlined
-                    v-model.number="quantity"
-                    ref="quantity"
-                    type="number"
-                    label="Quantity"
-                    dense
-                    class="quantity"
-                    :rules="rules.quantity"
-            />
-            <v-textarea outlined v-model="token" class="centered-input" :rows="quantity <= 10 ? quantity : 10"
-                        readonly/>
+            <v-text-field outlined v-model="quantity" type="number" label="Quantity" dense class="quantity"/>
+            <v-textarea outlined v-model="token" class="centered-input" :rows="quantity <= 10 ? quantity : 10" readonly/>
 
             <div class="text-center">
                 <v-btn @click="refreshBool = !refreshBool" depressed class="mr-4">Refresh</v-btn>
@@ -25,7 +15,7 @@
 </template>
 
 <script>
-    import {copyToClipboard, isInt} from "../../utils/helpers";
+    import {copyToClipboard} from "../../utils/helpers";
 
     const noop = () => {
     };
@@ -36,19 +26,8 @@
         name: "UuidGenerator",
         data: () => ({
             refreshBool: true,
-            quantity: 1,
-            rules: {
-                quantity: [
-                    v => !!v || 'Quantity is required',
-                    v => (v > 0 && v <= 50 ) || 'Quantity should be > 0 and <= 50',
-                    v => isInt(v) || 'Quantity should be an integer'
-                ]
-            },
-            isMounted:false
+            quantity: 1
         }),
-        mounted() {
-            this.isMounted = true;
-        },
         methods: {
             copyToken() {
                 copyToClipboard(this.token);
@@ -57,25 +36,21 @@
         },
         computed: {
             token() {
-                if (this.isMounted && this.$refs.quantity.validate()) {
-                    if (this.refreshBool) noop(); // To force recomputation
+                if (this.refreshBool) noop(); // To force recomputation
 
-                    return Array.from({length: this.quantity}, generateUuid).join('\n');
-                } else {
-                    return '';
-                }
+                return Array.from({length: this.quantity}, generateUuid).join('\n');
             }
         }
     }
 </script>
 
 <style scoped lang="less">
-    .quantity {
+    .quantity{
         width: 100px;
         margin: auto;
         text-align: center;
 
-        ::v-deep input {
+        ::v-deep input{
             text-align: center;
         }
     }

src/utils/helpers.js

@@ -25,28 +25,12 @@ const formatBytes = (bytes, decimals = 2) => {
 }
 
 const isInt = (value) => {
-    return Number.isInteger(value);
+    return !isNaN(value) && ((x) => (x | 0) === x)(parseFloat(value))
 }
 
-const debounce = (callback, delay = 300) => {
-    let timer;
-
-    return function(...args) {
-        clearTimeout(timer);
-        timer = setTimeout(() => callback(...args), delay);
-    }
-}
-
-const randFromArray = (array) => array[Math.floor(Math.random() * array.length)];
-
-const randIntFromInterval = (min, max) => Math.floor(Math.random() * (max - min) + min)
-
 export {
     copyToClipboard,
     fileIsImage,
     formatBytes,
-    isInt,
-    debounce,
-    randFromArray,
-    randIntFromInterval
+    isInt
 }