Reviewed-on: #270 Reviewed-by: Adam Bem <bema@noreply.example.com> Co-authored-by: widlam <mikolaj.widla@gmail.com> Co-committed-by: widlam <mikolaj.widla@gmail.com>
		
			
				
	
	
		
			31 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			31 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <script setup lang="ts">
 | |
| import { ref } from 'vue';
 | |
| import EncodeUriButton from '@components/encoder/EncodeUriButtonComponent.vue'
 | |
| import CodeEditorComponent from '@/components/common/CodeEditorComponent.vue';
 | |
| 
 | |
| 
 | |
| const uri = ref("")
 | |
| 
 | |
| function setTextFieldValue(newVal : string){
 | |
|     console.log(newVal)
 | |
|     uri.value = newVal
 | |
| }
 | |
| 
 | |
| function clear(){
 | |
|     uri.value = "";
 | |
| }
 | |
| </script>
 | |
| 
 | |
| <template>
 | |
|     <div class="flex flex-col w-full h-full gap-4" id="layout">
 | |
|         <div id="toolbar" class="flex flex-col gap-4 items-center lg:flex-row place-content-between">
 | |
|             <span class="dark:text-slate-100">URI Encoder</span>
 | |
|             <div class="flex flex-wrap gap-2 justify-center">
 | |
|                 <button class="tool-button" @click="clear()">Clear</button>
 | |
|                 <EncodeUriButton @update:result="setTextFieldValue" :code="uri" operation="Encode" />
 | |
|                 <EncodeUriButton @update:result="setTextFieldValue" :code="uri" operation="Decode" />  
 | |
|             </div>
 | |
|         </div>
 | |
|         <CodeEditorComponent @update:updated-code="setTextFieldValue" :code="uri" :config="{disabled:false,language:'uri'}" />
 | |
|     </div>
 | |
| </template> |