143 lines
2.6 KiB
Vue
143 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import {computed, ref, watch} from 'vue'
|
|
import {useAutoHeightTextarea} from '@/composables/useAutoHeightTextarea'
|
|
|
|
const {
|
|
modelValue,
|
|
} = defineProps<{
|
|
modelValue: string,
|
|
}>()
|
|
|
|
const filterQuery = ref('')
|
|
const {
|
|
textarea: filterInput,
|
|
height,
|
|
} = useAutoHeightTextarea(filterQuery)
|
|
|
|
watch(
|
|
() => modelValue,
|
|
() => {
|
|
filterQuery.value = modelValue
|
|
},
|
|
{immediate: true},
|
|
)
|
|
|
|
const availableFilterFields = [
|
|
'done',
|
|
'dueDate',
|
|
'priority',
|
|
'usePriority',
|
|
'startDate',
|
|
'endDate',
|
|
'percentDone',
|
|
'reminders',
|
|
'assignees',
|
|
'labels',
|
|
]
|
|
|
|
const filterOperators = [
|
|
'!=',
|
|
'=',
|
|
'>',
|
|
'>=',
|
|
'<',
|
|
'<=',
|
|
'like',
|
|
'in',
|
|
'?=',
|
|
]
|
|
|
|
const filterJoinOperators = [
|
|
'&&',
|
|
'||',
|
|
'(',
|
|
')',
|
|
]
|
|
|
|
const highlightedFilterQuery = computed(() => {
|
|
let highlighted = escapeHtml(filterQuery.value)
|
|
filterOperators
|
|
.map(o => ` ${escapeHtml(o)} `)
|
|
.forEach(o => {
|
|
highlighted = highlighted.replaceAll(o, `<span class="filter-query__operator">${o}</span>`)
|
|
})
|
|
filterJoinOperators
|
|
.map(o => escapeHtml(o))
|
|
.forEach(o => {
|
|
highlighted = highlighted.replaceAll(o, `<span class="filter-query__join-operator">${o}</span>`)
|
|
})
|
|
availableFilterFields.forEach(f => {
|
|
highlighted = highlighted.replaceAll(f, `<span class="filter-query__field">${f}</span>`)
|
|
})
|
|
return highlighted
|
|
})
|
|
|
|
function escapeHtml(unsafe: string): string {
|
|
return unsafe
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="field">
|
|
<label class="label">{{ $t('filters.query.title') }}</label>
|
|
<div class="control filter-input">
|
|
<textarea
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
autocapitalize="off"
|
|
spellcheck="false"
|
|
v-model="filterQuery"
|
|
class="input"
|
|
ref="filterInput"
|
|
></textarea>
|
|
<div
|
|
class="filter-input-highlight"
|
|
:style="{'height': height}"
|
|
v-html="highlightedFilterQuery"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.filter-input-highlight span {
|
|
&.filter-query__field {
|
|
color: #faf594;
|
|
}
|
|
|
|
&.filter-query__operator {
|
|
color: hsla(var(--primary-h), var(--primary-s), 80%);
|
|
}
|
|
|
|
&.filter-query__join-operator {
|
|
color: hsla(var(--primary-h), var(--primary-s), 90%);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.filter-input {
|
|
position: relative;
|
|
|
|
textarea {
|
|
position: absolute;
|
|
text-fill-color: transparent;
|
|
-webkit-text-fill-color: transparent;
|
|
background: transparent !important;
|
|
resize: none;
|
|
}
|
|
|
|
.filter-input-highlight {
|
|
height: 2.5em;
|
|
line-height: 1.5;
|
|
padding: .5em .75em;
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
</style>
|