feat: externalized tool configuration

tools/crypto/uuid-generator.vue

@@ -0,0 +1,90 @@
+<template>
+  <ToolWrapper :config="$toolConfig">
+    <v-text-field
+      v-model.number="quantity"
+      outlined
+      type="number"
+      label="Quantity"
+      dense
+      class="quantity"
+      :rules="rules.quantity"
+    />
+    <v-textarea
+      v-model="token"
+      outlined
+      class="centered-input"
+      :rows="quantity <= 10 ? quantity : 10"
+      readonly
+    />
+
+    <div class="text-center">
+      <v-btn depressed class="mr-4" @click="computeToken">
+        Refresh
+      </v-btn>
+      <v-btn depressed @click="copy(token, `UUID${quantity > 1 ? 's' : ''} copied !`)">
+        Copy UUID{{ quantity > 1 ? 's' : '' }}
+      </v-btn>
+    </div>
+  </ToolWrapper>
+</template>
+
+<tool>
+title: 'UUIDs generator'
+description: 'A universally unique identifier (UUID) is a 128-bit number used to identify information in computer systems. '
+icon: 'mdi-fingerprint'
+keywords: ['uuid', 'v4', 'random', 'id', 'alphanumeric', 'identity']
+path: '/uuid-generator'
+</tool>
+
+<script lang="ts">
+
+import {Component, Ref, Watch} from 'nuxt-property-decorator'
+import {CopyableMixin} from '@/mixins/copyable.mixin'
+import { VTextField } from 'vuetify/lib'
+import Tool from '~/components/Tool.vue'
+
+const generateUuid = () => '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, c => ((c as unknown as number) ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> (c as unknown as number) / 4).toString(16))
+
+@Component({
+  mixins: [CopyableMixin]
+})
+export default class UuidGenerator extends Tool {
+  @Ref() readonly quantityEl! : typeof VTextField
+  token = ''
+  quantity = 1
+  rules = {
+    quantity: [
+      (v: any) => !!v || 'Quantity is required',
+      (v: any) => (v > 0 && v <= 50) || 'Quantity should be > 0 and <= 50',
+      (v: any) => Number.isInteger(v) || 'Quantity should be an integer'
+    ]
+  }
+
+  mounted() {
+    this.computeToken()
+  }
+
+  @Watch('quantity')
+  computeToken() {
+    this.token = Array.from({length: this.quantity}, generateUuid).join('\n')
+  }
+}
+</script>
+
+<style scoped lang="less">
+.quantity {
+  width: 100px;
+  margin: auto;
+  text-align: center;
+
+  ::v-deep input {
+    text-align: center;
+  }
+}
+
+::v-deep .centered-input textarea {
+  text-align: center;
+  margin-top: 13px !important;
+  font-family: Consolas, monospace;
+}
+</style>