feat(filter): add auto resize for filter query input

src/components/project/partials/FilterInput.vue

@@ -0,0 +1,142 @@
+<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, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#039;')
+}
+</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>

src/components/project/partials/filters.vue

@@ -27,6 +27,9 @@
 				{{ $t('filters.attributes.sortAlphabetically') }}
 			</fancycheckbox>
 		</div>
+		
+		<FilterInput v-model="filterQuery"/>
+		
 		<div class="field">
 			<label class="label">{{ $t('misc.search') }}</label>
 			<div class="control">
@@ -204,6 +207,7 @@ import ProjectService from '@/services/project'
 
 // FIXME: do not use this here for now. instead create new version from DEFAULT_PARAMS
 import {getDefaultParams} from '@/composables/useTaskList'
+import FilterInput from '@/components/project/partials/FilterInput.vue'
 
 // FIXME: merge with DEFAULT_PARAMS in taskProject.js
 const DEFAULT_PARAMS = {
@@ -217,6 +221,9 @@ const DEFAULT_PARAMS = {
 	s: '',
 } as const
 
+// FIXME: use params
+const filterQuery = ref('')
+
 const DEFAULT_FILTERS = {
 	done: false,
 	dueDate: '',

src/components/tasks/add-task.vue

@@ -71,7 +71,7 @@ const props = defineProps({
 const emit = defineEmits(['taskAdded'])
 
 const newTaskTitle = ref('')
-const newTaskInput = useAutoHeightTextarea(newTaskTitle)
+const {textarea: newTaskInput} = useAutoHeightTextarea(newTaskTitle)
 
 const {t} = useI18n({useScope: 'global'})
 const authStore = useAuthStore()

src/composables/useAutoHeightTextarea.ts

@@ -6,6 +6,7 @@ import {debouncedWatch, tryOnMounted, useWindowSize, type MaybeRef} from '@vueus
 export function useAutoHeightTextarea(value: MaybeRef<string>) {
 	const textarea = ref<HTMLTextAreaElement | null>(null)
 	const minHeight = ref(0)
+	const height = ref('')
 
 	// adapted from https://github.com/LeaVerou/stretchy/blob/47f5f065c733029acccb755cae793009645809e2/src/stretchy.js#L34
 	function resize(textareaEl: HTMLTextAreaElement | null) {
@@ -23,14 +24,13 @@ export function useAutoHeightTextarea(value: MaybeRef<string>) {
 
 		textareaEl.style.minHeight = ''
 		textareaEl.style.height = '0'
-		const offset = textareaEl.offsetHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom)
-		const height = textareaEl.scrollHeight + offset + 'px'
+		height.value = textareaEl.scrollHeight + 'px'
 
-		textareaEl.style.height = height
+		textareaEl.style.height = height.value
 
 		// calculate min-height for the first time
 		if (!minHeight.value) {
-			minHeight.value = parseFloat(height)
+			minHeight.value = parseFloat(height.value)
 		}
 
 		textareaEl.style.minHeight = minHeight.value.toString()
@@ -68,5 +68,8 @@ export function useAutoHeightTextarea(value: MaybeRef<string>) {
 		},
 	)
 
-	return textarea
+	return {
+		textarea,
+		height,
+	}
 }

src/i18n/lang/en.json

@@ -410,6 +410,9 @@
     "edit": {
       "title": "Edit This Saved Filter",
       "success": "The filter was saved successfully."
+    },
+    "query": {
+      "title": "Query"
     }
   },
   "migrate": {