83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { compareLists } from './list-comparer.service';
|
|
|
|
const compareConfig = useStorage<{ ignoreCase: boolean; trimItems: boolean; noDuplicate: boolean; separator: string }>('list-cmp:conf', {
|
|
ignoreCase: false,
|
|
trimItems: true,
|
|
noDuplicate: false,
|
|
separator: '',
|
|
});
|
|
const list1 = ref('');
|
|
const list2 = ref('');
|
|
|
|
const compareResult = computed(() => {
|
|
return compareLists({
|
|
list1: list1.value,
|
|
list2: list2.value,
|
|
ignoreCase: compareConfig.value.ignoreCase,
|
|
trimItems: compareConfig.value.trimItems,
|
|
separator: compareConfig.value.separator,
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<n-space justify="center" gap-1 align="baseline">
|
|
<n-form-item
|
|
label="Trim items"
|
|
label-placement="left"
|
|
>
|
|
<n-switch v-model:value="compareConfig.trimItems" />
|
|
</n-form-item>
|
|
|
|
<n-form-item
|
|
label="Ignore case"
|
|
label-placement="left"
|
|
mb-2
|
|
>
|
|
<n-switch v-model:value="compareConfig.ignoreCase" />
|
|
</n-form-item>
|
|
|
|
<n-form-item
|
|
label="Separator"
|
|
label-placement="left"
|
|
>
|
|
<n-input
|
|
v-model:value="compareConfig.separator"
|
|
placeholder="Additional separator"
|
|
/>
|
|
</n-form-item>
|
|
</n-space>
|
|
|
|
<div flex gap-1>
|
|
<c-input-text
|
|
v-model:value="list1"
|
|
multiline
|
|
rows="10"
|
|
label="List 1"
|
|
/>
|
|
<c-input-text
|
|
v-model:value="list2"
|
|
multiline
|
|
rows="10"
|
|
label="List 2"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="list1 || list2">
|
|
<n-divider />
|
|
|
|
<c-card title="Items in both lists" mb-2>
|
|
<textarea-copyable :value="compareResult.same.join('\n')" />
|
|
</c-card>
|
|
<c-card title="Items in List 1 but not in List 2" mb-2>
|
|
<textarea-copyable :value="compareResult.list1Not2.join('\n')" />
|
|
</c-card>
|
|
<c-card title="Items in List 2 but not in List 1" mb-2>
|
|
<textarea-copyable :value="compareResult.list2Not1.join('\n')" />
|
|
</c-card>
|
|
</div>
|
|
</div>
|
|
</template>
|