fc06f01b34
* validating if yaml is correct and collecting format options * Formatting yaml, sorting keys and changing indent size. * Removed unused format options * Fixed lint errors * Installed types for js-yaml * Removed legacy routing and added tool creation date Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com> * Using existing yaml package instead of js-yaml * Update src/tools/yaml-viewer/index.ts --------- Co-authored-by: Isaiah <66272034+isaiah-j@users.noreply.github.com> Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>
73 lines
2.1 KiB
Vue
73 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import yaml from 'yaml';
|
|
import { useStorage } from '@vueuse/core';
|
|
import { formatYaml } from './yaml-models';
|
|
import { withDefaultOnError } from '@/utils/defaults';
|
|
import { useValidation } from '@/composable/validation';
|
|
import TextareaCopyable from '@/components/TextareaCopyable.vue';
|
|
|
|
const inputElement = ref<HTMLElement>();
|
|
|
|
const rawYaml = useStorage('yaml-prettify:raw-yaml', '');
|
|
const indentSize = useStorage('yaml-prettify:indent-size', 2);
|
|
const sortKeys = useStorage('yaml-prettify:sort-keys', false);
|
|
|
|
const cleanYaml = computed(() => withDefaultOnError(() => formatYaml({ rawYaml, indentSize, sortKeys }), ''));
|
|
|
|
const rawYamlValidation = useValidation({
|
|
source: rawYaml,
|
|
rules: [
|
|
{
|
|
validator: v => v === '' || yaml.parse(v),
|
|
message: 'Provided YAML is not valid.',
|
|
},
|
|
],
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div style="flex: 0 0 100%">
|
|
<div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3>
|
|
<n-form-item label="Sort keys :" label-placement="left" label-width="100">
|
|
<n-switch v-model:value="sortKeys" />
|
|
</n-form-item>
|
|
<n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
|
|
<n-input-number v-model:value="indentSize" min="1" max="10" style="width: 100px" />
|
|
</n-form-item>
|
|
</div>
|
|
</div>
|
|
|
|
<n-form-item
|
|
label="Your raw YAML"
|
|
:feedback="rawYamlValidation.message"
|
|
:validation-status="rawYamlValidation.status"
|
|
>
|
|
<c-input-text
|
|
ref="inputElement"
|
|
v-model:value="rawYaml"
|
|
placeholder="Paste your raw YAML here..."
|
|
rows="20"
|
|
multiline
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
autocapitalize="off"
|
|
spellcheck="false"
|
|
monospace
|
|
/>
|
|
</n-form-item>
|
|
<n-form-item label="Prettified version of your YAML">
|
|
<TextareaCopyable :value="cleanYaml" language="yaml" :follow-height-of="inputElement" />
|
|
</n-form-item>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.result-card {
|
|
position: relative;
|
|
.copy-button {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
}
|
|
</style>
|