mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-05-04 13:29:13 -04:00
72 lines
1.3 KiB
Vue
72 lines
1.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import xPathToCss from 'xpath-to-css';
|
||
|
|
import cssToXpath from 'csstoxpath';
|
||
|
|
import TextareaCopyable from '@/components/TextareaCopyable.vue';
|
||
|
|
|
||
|
|
const cssInput = ref('');
|
||
|
|
const xpathOutput = computed(
|
||
|
|
() => {
|
||
|
|
try {
|
||
|
|
return cssToXpath(cssInput.value);
|
||
|
|
}
|
||
|
|
catch (e: any) {
|
||
|
|
return e.toString();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
);
|
||
|
|
|
||
|
|
const xpathInput = ref('');
|
||
|
|
const cssOutput = computed(
|
||
|
|
() => {
|
||
|
|
try {
|
||
|
|
return xPathToCss(xpathInput.value);
|
||
|
|
}
|
||
|
|
catch (e: any) {
|
||
|
|
return e.toString();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div max-w-600>
|
||
|
|
<c-card title="CSS to XPath">
|
||
|
|
<c-input-text
|
||
|
|
v-model:value="cssInput"
|
||
|
|
placeholder="Put your CSS selector here..."
|
||
|
|
label="CSS selector to convert"
|
||
|
|
raw-text
|
||
|
|
mb-5
|
||
|
|
/>
|
||
|
|
|
||
|
|
<n-divider />
|
||
|
|
|
||
|
|
<TextareaCopyable
|
||
|
|
label="XPath expression"
|
||
|
|
:value="xpathOutput"
|
||
|
|
readonly
|
||
|
|
mb-5
|
||
|
|
/>
|
||
|
|
</c-card>
|
||
|
|
|
||
|
|
<c-card title="XPath to CSS" mt-5>
|
||
|
|
<c-input-text
|
||
|
|
v-model:value="xpathInput"
|
||
|
|
placeholder="Put your XPath expression here..."
|
||
|
|
label="XPath expression to convert"
|
||
|
|
raw-text
|
||
|
|
mb-5
|
||
|
|
/>
|
||
|
|
|
||
|
|
<n-divider />
|
||
|
|
|
||
|
|
<TextareaCopyable
|
||
|
|
label="CSS Selector"
|
||
|
|
:value="cssOutput"
|
||
|
|
readonly
|
||
|
|
mb-5
|
||
|
|
/>
|
||
|
|
</c-card>
|
||
|
|
</div>
|
||
|
|
</template>
|