it-tools/src/tools/css-prettifier/css-prettifier.vue
2024-04-03 23:00:43 +02:00

37 lines
767 B
Vue

<script setup lang="ts">
import beautify from 'js-beautify';
import TextareaCopyable from '@/components/TextareaCopyable.vue';
const inputCSS = ref('');
const outputCSS = computed(() => {
return beautify.css(inputCSS.value, {
indent_char: ' ',
indent_size: 2,
sep: '\n',
});
});
</script>
<template>
<div>
<c-input-text
v-model:value="inputCSS"
multiline raw-text
placeholder="Your CSS content..."
rows="8"
autofocus
label="Your CSS to format (can paste from clipboard):"
/>
<n-divider />
<n-form-item label="Output prettified CSS:">
<TextareaCopyable
:value="outputCSS"
multiline
language="css"
word-wrap
/>
</n-form-item>
</div>
</template>