feat: can generate multiple uuids
Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
		
							parent
							
								
									6f7c399823
								
							
						
					
					
						commit
						84e727a43a
					
				| @ -3,11 +3,12 @@ | |||||||
|         <v-card-title>Uuid v4 generator</v-card-title> |         <v-card-title>Uuid v4 generator</v-card-title> | ||||||
| 
 | 
 | ||||||
|         <v-card-text> |         <v-card-text> | ||||||
|             <v-text-field outlined v-model="token" class="centered-input"/> |             <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"> |             <div class="text-center"> | ||||||
|                 <v-btn @click="refreshBool = !refreshBool" depressed class="mr-4">Refresh</v-btn> |                 <v-btn @click="refreshBool = !refreshBool" depressed class="mr-4">Refresh</v-btn> | ||||||
|                 <v-btn @click="copyToken()" depressed>Copy token</v-btn> |                 <v-btn @click="copyToken()" depressed>Copy uuid{{ quantity > 1 ? 's' : ''}}</v-btn> | ||||||
|             </div> |             </div> | ||||||
|         </v-card-text> |         </v-card-text> | ||||||
|     </v-card> |     </v-card> | ||||||
| @ -19,10 +20,13 @@ | |||||||
|     const noop = () => { |     const noop = () => { | ||||||
|     }; |     }; | ||||||
| 
 | 
 | ||||||
|  |     const generateUuid = () => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)); | ||||||
|  | 
 | ||||||
|     export default { |     export default { | ||||||
|         name: "UuidGenerator", |         name: "UuidGenerator", | ||||||
|         data: () => ({ |         data: () => ({ | ||||||
|             refreshBool: true |             refreshBool: true, | ||||||
|  |             quantity: 1 | ||||||
|         }), |         }), | ||||||
|         methods: { |         methods: { | ||||||
|             copyToken() { |             copyToken() { | ||||||
| @ -34,14 +38,26 @@ | |||||||
|             token() { |             token() { | ||||||
|                 if (this.refreshBool) noop(); // To force recomputation |                 if (this.refreshBool) noop(); // To force recomputation | ||||||
| 
 | 
 | ||||||
|                 return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)); |                 return Array.from({length: this.quantity}, generateUuid).join('\n'); | ||||||
|             } |             } | ||||||
|         } |         } | ||||||
|     } |     } | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <style scoped> | <style scoped lang="less"> | ||||||
|     ::v-deep .centered-input input { |     .quantity{ | ||||||
|         text-align: center |         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> | </style> | ||||||
		Loading…
	
		Reference in New Issue
	
	Block a user