32 lines
		
	
	
		
			856 B
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			32 lines
		
	
	
		
			856 B
		
	
	
	
		
			Vue
		
	
	
	
	
	
<script setup lang="ts">
 | 
						|
import { parse as parseYaml } from 'yaml';
 | 
						|
import type { UseValidationRule } from '@/composable/validation';
 | 
						|
import { isNotThrowing } from '@/utils/boolean';
 | 
						|
import { withDefaultOnError } from '@/utils/defaults';
 | 
						|
 | 
						|
function transformer(value: string) {
 | 
						|
  return withDefaultOnError(() => {
 | 
						|
    const obj = parseYaml(value);
 | 
						|
    return obj ? JSON.stringify(obj, null, 3) : '';
 | 
						|
  }, '');
 | 
						|
}
 | 
						|
 | 
						|
const rules: UseValidationRule<string>[] = [
 | 
						|
  {
 | 
						|
    validator: (value: string) => isNotThrowing(() => parseYaml(value)),
 | 
						|
    message: 'Provided YAML is not valid.',
 | 
						|
  },
 | 
						|
];
 | 
						|
</script>
 | 
						|
 | 
						|
<template>
 | 
						|
  <format-transformer
 | 
						|
    input-label="Your YAML"
 | 
						|
    input-placeholder="Paste your yaml here..."
 | 
						|
    output-label="JSON from your YAML"
 | 
						|
    output-language="json"
 | 
						|
    :input-validation-rules="rules"
 | 
						|
    :transformer="transformer"
 | 
						|
  />
 | 
						|
</template>
 |