fix(deps): update dependency ufo to v1.1.1

Resolves #3172

.nvmrc

@@ -1 +1 @@
-v18
+18.14.2

.vscode.example/settings.json

@@ -18,6 +18,12 @@
     "javascriptreact",
     "vue"
   ],
+
+  "volar.completion.preferredTagNameCase": "pascal",
+
+  // disable vetur in case it is installed
+  "vetur.validation.template": false,
+
   // i18n ally
   "i18n-ally.localesPaths": [
     "src/i18n/lang"

docker/templates/default.conf.template

@@ -28,6 +28,20 @@ server {
     add_header Cache-Control "public, max-age=0, s-maxage=0, must-revalidate" always;
     try_files $uri /index.html =404;
   }
+  
+  # Disable caching for sw
+  location = /sw.js {
+    autoindex off;
+    expires off;
+    add_header Cache-Control "public, max-age=0, s-maxage=0, must-revalidate" always;
+  }
+
+  # Disable caching for webmanifest
+  location = /manifest.webmanifest {
+    autoindex off;
+    expires off;
+    add_header Cache-Control "public, max-age=0, s-maxage=0, must-revalidate" always;
+  }
 
   # favicon.ico
   location = /favicon.ico {

package.json

@@ -13,7 +13,7 @@
   },
   "homepage": "https://vikunja.io/",
   "funding": "https://opencollective.com/vikunja",
-  "packageManager": "pnpm@7.27.0",
+  "packageManager": "pnpm@7.28.0",
   "keywords": [
     "todo",
     "productivity",
@@ -53,17 +53,17 @@
     "@infectoone/vue-ganttastic": "2.1.4",
     "@intlify/unplugin-vue-i18n": "0.8.2",
     "@kyvg/vue3-notification": "2.9.0",
-    "@sentry/tracing": "7.37.2",
-    "@sentry/vue": "7.37.2",
+    "@sentry/tracing": "7.39.0",
+    "@sentry/vue": "7.39.0",
     "@types/is-touch-device": "1.0.0",
     "@types/lodash.clonedeep": "4.5.7",
     "@types/sortablejs": "1.15.0",
-    "@vueuse/core": "9.12.0",
-    "axios": "1.3.3",
-    "blurhash": "2.0.4",
+    "@vueuse/core": "9.13.0",
+    "axios": "1.3.4",
+    "blurhash": "2.0.5",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
-    "codemirror": "5.65.11",
+    "codemirror": "5.65.12",
     "date-fns": "2.29.3",
     "dayjs": "1.11.7",
     "dompurify": "3.0.0",
@@ -78,11 +78,11 @@
     "klona": "2.0.6",
     "lodash.debounce": "4.0.8",
     "marked": "4.2.12",
-    "pinia": "2.0.30",
+    "pinia": "2.0.32",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
     "sortablejs": "1.15.0",
-    "ufo": "1.0.1",
+    "ufo": "1.1.1",
     "vue": "3.2.47",
     "vue-advanced-cropper": "2.8.8",
     "vue-flatpickr-component": "11.0.2",
@@ -93,11 +93,11 @@
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "2.2.3",
-    "@cypress/vite-dev-server": "5.0.2",
+    "@cypress/vite-dev-server": "5.0.4",
     "@cypress/vue": "5.0.4",
     "@faker-js/faker": "7.6.0",
-    "@histoire/plugin-screenshot": "0.15.3",
-    "@histoire/plugin-vue": "0.15.3",
+    "@histoire/plugin-screenshot": "0.15.8",
+    "@histoire/plugin-vue": "0.15.8",
     "@rushstack/eslint-patch": "1.2.0",
     "@types/codemirror": "5.60.7",
     "@types/dompurify": "2.4.0",
@@ -105,41 +105,41 @@
     "@types/focus-within": "1.0.1",
     "@types/lodash.debounce": "4.0.7",
     "@types/marked": "4.0.8",
-    "@types/node": "18.13.0",
+    "@types/node": "18.14.2",
     "@types/postcss-preset-env": "7.7.0",
-    "@typescript-eslint/eslint-plugin": "5.52.0",
-    "@typescript-eslint/parser": "5.52.0",
+    "@typescript-eslint/eslint-plugin": "5.54.0",
+    "@typescript-eslint/parser": "5.54.0",
     "@vitejs/plugin-legacy": "4.0.1",
     "@vitejs/plugin-vue": "4.0.0",
     "@vue/eslint-config-typescript": "11.0.2",
-    "@vue/test-utils": "2.2.10",
+    "@vue/test-utils": "2.3.0",
     "@vue/tsconfig": "0.1.3",
     "autoprefixer": "10.4.13",
     "browserslist": "4.21.5",
-    "caniuse-lite": "1.0.30001451",
+    "caniuse-lite": "1.0.30001458",
     "csstype": "3.1.1",
-    "cypress": "12.5.1",
-    "esbuild": "0.17.8",
-    "eslint": "8.34.0",
+    "cypress": "12.7.0",
+    "esbuild": "0.17.10",
+    "eslint": "8.35.0",
     "eslint-plugin-vue": "9.9.0",
-    "happy-dom": "8.2.6",
-    "histoire": "0.15.3",
-    "netlify-cli": "12.12.0",
+    "happy-dom": "8.9.0",
+    "histoire": "0.15.8",
+    "netlify-cli": "13.0.0",
     "postcss": "8.4.21",
     "postcss-easing-gradients": "3.0.1",
     "postcss-easings": "3.0.1",
     "postcss-preset-env": "8.0.1",
-    "rollup": "3.15.0",
+    "rollup": "3.17.3",
     "rollup-plugin-visualizer": "5.9.0",
-    "sass": "1.58.1",
-    "start-server-and-test": "1.15.4",
+    "sass": "1.58.3",
+    "start-server-and-test": "2.0.0",
     "typescript": "4.9.5",
-    "vite": "4.1.1",
+    "vite": "4.1.4",
     "vite-plugin-inject-preload": "1.3.0",
     "vite-plugin-pwa": "0.14.4",
     "vite-svg-loader": "4.0.0",
-    "vitest": "0.28.5",
-    "vue-tsc": "1.1.0",
+    "vitest": "0.29.1",
+    "vue-tsc": "1.2.0",
     "wait-on": "7.0.1",
     "workbox-cli": "6.5.4"
   }

src/components/home/navigation.vue

@@ -122,6 +122,7 @@
 									<span class="list-menu-title">{{ getListTitle(l) }}</span>
 								</BaseButton>
 								<BaseButton
+									v-if="l.id > 0"
 									class="favorite"
 									:class="{'is-favorite': l.isFavorite}"
 									@click="listStore.toggleListFavorite(l)"
@@ -411,12 +412,16 @@ $vikunja-nav-selected-width: 0.4rem;
 				opacity: 0;
 				transition: opacity $transition;
 				margin-right: .25rem;
-				cursor: grab;
 			}
+
 			&:hover .handle {
 				opacity: 1;
 			}
 		}
+		
+		&:not(.dragging-disabled) .handle {
+			cursor: grab;
+		}
 	}
 }
 

src/components/input/fancycheckbox.vue

@@ -7,7 +7,7 @@
 			@change="(event: Event) => updateData((event.target as HTMLInputElement).checked)"
 			type="checkbox"
 		/>
-		<label :for="checkBoxId" class="check">
+		<label :for="checkBoxId" class="check" @click.prevent="check">
 			<svg height="18px" viewBox="0 0 18 18" width="18px">
 				<path
 					d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
@@ -56,6 +56,11 @@ function updateData(newChecked: boolean) {
 	emit('update:modelValue', newChecked)
 	emit('change', newChecked)
 }
+
+function check() {
+	checked.value = !checked.value
+	updateData(checked.value)
+}
 </script>
 
 

src/components/tasks/partials/singleTaskInList.vue

@@ -1,5 +1,9 @@
 <template>
-	<div :class="{'is-loading': taskService.loading}" class="task loader-container">
+	<router-link
+		:to="taskDetailRoute"
+		:class="{'is-loading': taskService.loading}"
+		class="task loader-container"
+	>
 		<fancycheckbox
 			:disabled="(isArchived || disabled) && !canMarkAsDone"
 			@change="markAsDone"
@@ -12,8 +16,7 @@
 			class="mr-1"
 		/>
 		
-		<router-link
-			:to="taskDetailRoute"
+		<div
 			:class="{ 'done': task.done, 'show-list': showList && taskList !== null}"
 			class="tasktext"
 		>
@@ -93,7 +96,7 @@
 			</span>
 
 			<checklist-summary :task="task"/>
-		</router-link>
+		</div>
 
 		<progress
 			class="progress is-small"
@@ -114,14 +117,14 @@
 
 		<BaseButton
 			:class="{'is-favorite': task.isFavorite}"
-			@click="toggleFavorite"
+			@click.prevent="toggleFavorite"
 			class="favorite"
 		>
 			<icon icon="star" v-if="task.isFavorite"/>
 			<icon :icon="['far', 'star']" v-else/>
 		</BaseButton>
 		<slot />
-	</div>
+	</router-link>
 </template>
 
 <script setup lang="ts">
@@ -284,8 +287,12 @@ function hideDeferDueDatePopup(e) {
 	cursor: pointer;
 	border-radius: $radius;
 	border: 2px solid transparent;
+	
+	color: var(--text);
+	transition: color ease $transition-duration;
 
 	&:hover {
+		color: var(--grey-900);
 		background-color: var(--grey-100);
 	}
 
@@ -331,15 +338,6 @@ function hideDeferDueDatePopup(e) {
 
 	}
 
-	a {
-		color: var(--text);
-		transition: color ease $transition-duration;
-
-		&:hover {
-			color: var(--grey-900);
-		}
-	}
-
 	.favorite {
 		opacity: 0;
 		text-align: center;

src/i18n/lang/ca-ES.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "New Saved Filter",
       "description": "A saved filter is a virtual list which is computed from a set of filters each time it is accessed. Once created, it will appear in a special namespace.",
-      "action": "Create new saved filter"
+      "action": "Create new saved filter",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Delete this saved filter",

src/i18n/lang/cs-CZ.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "Nový uložený filtr",
       "description": "Uložený filtr je virtuální seznam, který se počítá ze sady filtrů pokaždé, když je přístupný. Jakmile bude vytvořen, objeví se ve speciálním prostoru.",
-      "action": "Vytvořit uložený filtr"
+      "action": "Vytvořit uložený filtr",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Smazat tento uložený filtr",

src/i18n/lang/da-DK.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "Nyt Gemt Filter",
       "description": "Et gemt filter er en virtuel liste, som beregnes ud fra et sæt filtre, hver gang det er tilgået. Når den er oprettet, vises den i et særligt navneområde.",
-      "action": "Opret nyt gemt filter"
+      "action": "Opret nyt gemt filter",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Slet dette gemte filter",

src/i18n/lang/de-DE.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "Neuer gespeicherter Filter",
       "description": "Ein gespeicherter Filter ist eine virtuelle Liste, die bei jedem Zugriff aus einem Satz von Filtern errechnet wird. Einmal erstellt, erscheint diese in einem speziellen Namespace.",
-      "action": "Neuen gespeicherten Filter erstellen"
+      "action": "Neuen gespeicherten Filter erstellen",
+      "titleRequired": "Bitte gib den Titel für den Filter an."
     },
     "delete": {
       "header": "Diesen gespeicherten Filter löschen",

src/i18n/lang/de-swiss.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "Neuer gespeicherter Filter",
       "description": "En gspeicherete Filter isch e virtuelli Liste, welche vomene Satz a Filter zemmegsetzt wird, sobald me uf sie zuegriift. Wenn sie mal erstellt worde isch, erhaltet si ihren eigene Namensruum.",
-      "action": "Neue gspeicherete Filter erstelle"
+      "action": "Neue gspeicherete Filter erstelle",
+      "titleRequired": "Bitte gib den Titel für den Filter an."
     },
     "delete": {
       "header": "De g'speicheret Filter chüble",

src/i18n/lang/en.json

@@ -405,7 +405,8 @@
     "create": {
       "title": "New Saved Filter",
       "description": "A saved filter is a virtual list which is computed from a set of filters each time it is accessed. Once created, it will appear in a special namespace.",
-      "action": "Create new saved filter"
+      "action": "Create new saved filter",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Delete this saved filter",

src/i18n/lang/es-ES.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "New Saved Filter",
       "description": "A saved filter is a virtual list which is computed from a set of filters each time it is accessed. Once created, it will appear in a special namespace.",
-      "action": "Create new saved filter"
+      "action": "Create new saved filter",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Delete this saved filter",

src/i18n/lang/fr-FR.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "Nouveau filtre enregistré",
       "description": "Un filtre enregistré est une liste virtuelle qui est calculée à partir d’un ensemble de filtres à chaque fois qu’on y accède. Une fois créé, il apparaît dans un espace de noms spécial.",
-      "action": "Créer un nouveau filtre enregistré"
+      "action": "Créer un nouveau filtre enregistré",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Supprimer ce filtre enregistré",

src/i18n/lang/it-IT.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "Nuovo Filtro Salvato",
       "description": "Un filtro salvato è una lista virtuale che viene calcolata da un insieme di filtri di volta in volta. Una volta creato, apparirà in un namespace speciale.",
-      "action": "Crea nuovo filtro salvato"
+      "action": "Crea nuovo filtro salvato",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Elimina questo filtro salvato",
@@ -911,7 +912,7 @@
     }
   },
   "update": {
-    "available": "There is an update available!",
+    "available": "È disponibile un aggiornamento!",
     "do": "Aggiorna Adesso"
   },
   "menu": {

src/i18n/lang/nl-NL.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "New Saved Filter",
       "description": "A saved filter is a virtual list which is computed from a set of filters each time it is accessed. Once created, it will appear in a special namespace.",
-      "action": "Create new saved filter"
+      "action": "Create new saved filter",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Delete this saved filter",

src/i18n/lang/no-NO.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "Nytt lagret filter",
       "description": "Et lagret filter er en virtuell liste som beregnes fra et sett med filtre hver gang det åpnes. Når du er opprettet, vil det vises i et eget navneområde.",
-      "action": "Opprett nytt filter"
+      "action": "Opprett nytt filter",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Slett dette lagrede filteret",

src/i18n/lang/pl-PL.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "Nowy filtr stały",
       "description": "Filtr stały to wirtualna lista, która jest kalkulowana na podstawie zestawu filtrów przy każdym wejściu w nią. Po utworzeniu pojawi się w specjalnej sekcji.",
-      "action": "Utwórz nowy filtr stały"
+      "action": "Utwórz nowy filtr stały",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Usuń ten filtr stały",

src/i18n/lang/pt-BR.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "Novo filtro salvo",
       "description": "A saved filter is a virtual list which is computed from a set of filters each time it is accessed. Once created, it will appear in a special namespace.",
-      "action": "Create new saved filter"
+      "action": "Create new saved filter",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Delete this saved filter",

src/i18n/lang/pt-PT.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "Novo Filtro Memorizado",
       "description": "Um filtro memorizado é uma lista virtual que é compilada a partir de um conjunto de filtros de cada vez que é acedido. Uma vez criado, irá aparecer num espaço especial.",
-      "action": "Criar novo filtro memorizado"
+      "action": "Criar novo filtro memorizado",
+      "titleRequired": "Por favor, insere um título para o filtro."
     },
     "delete": {
       "header": "Eliminar este filtro memorizado",

src/i18n/lang/ro-RO.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "New Saved Filter",
       "description": "A saved filter is a virtual list which is computed from a set of filters each time it is accessed. Once created, it will appear in a special namespace.",
-      "action": "Create new saved filter"
+      "action": "Create new saved filter",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Delete this saved filter",

src/i18n/lang/ru-RU.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "Создать сохранённый фильтр",
       "description": "Сохранённый фильтр — это виртуальный список, построенный из набора фильтров. При создании отображается в специальном пространстве имён.",
-      "action": "Создать новый сохранённый фильтр"
+      "action": "Создать новый сохранённый фильтр",
+      "titleRequired": "Укажите название фильтра."
     },
     "delete": {
       "header": "Удалить этот сохранённый фильтр",

src/i18n/lang/sk-SK.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "New Saved Filter",
       "description": "A saved filter is a virtual list which is computed from a set of filters each time it is accessed. Once created, it will appear in a special namespace.",
-      "action": "Create new saved filter"
+      "action": "Create new saved filter",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Delete this saved filter",

src/i18n/lang/sv-SE.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "New Saved Filter",
       "description": "A saved filter is a virtual list which is computed from a set of filters each time it is accessed. Once created, it will appear in a special namespace.",
-      "action": "Create new saved filter"
+      "action": "Create new saved filter",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Delete this saved filter",

src/i18n/lang/tr-TR.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "New Saved Filter",
       "description": "A saved filter is a virtual list which is computed from a set of filters each time it is accessed. Once created, it will appear in a special namespace.",
-      "action": "Create new saved filter"
+      "action": "Create new saved filter",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Delete this saved filter",

src/i18n/lang/vi-VN.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "Bộ lọc đã lưu mới",
       "description": "Bộ lọc sẵn là một danh sách ảo được chọn từ một tập hợp các bộ lọc. Sau khi được tạo, nó sẽ xuất hiện trong một không gian làm việc đặc biệt.",
-      "action": "Tạo thêm bộ lọc sẵn"
+      "action": "Tạo thêm bộ lọc sẵn",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Xóa bộ lọc sẵn này",

src/i18n/lang/zh-CN.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "新保存的过滤器",
       "description": "保存的过滤器是一个虚拟列表，在每次访问时从一组过滤器中计算出来。 创建后，它将出现在一个特殊的命名空间里。",
-      "action": "创建新保存的过滤器"
+      "action": "创建新保存的过滤器",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "删除此保存的过滤器",

src/i18n/lang/zh-TW.json

@@ -404,7 +404,8 @@
     "create": {
       "title": "New Saved Filter",
       "description": "A saved filter is a virtual list which is computed from a set of filters each time it is accessed. Once created, it will appear in a special namespace.",
-      "action": "Create new saved filter"
+      "action": "Create new saved filter",
+      "titleRequired": "Please provide a title for the filter."
     },
     "delete": {
       "header": "Delete this saved filter",

src/services/savedFilter.ts

@@ -2,6 +2,7 @@ import {computed, ref, shallowReactive, unref, watch} from 'vue'
 import {useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 import type {MaybeRef} from '@vueuse/core'
+import {useDebounceFn} from '@vueuse/core'
 
 import type {IList} from '@/modelTypes/IList'
 import type {ISavedFilter} from '@/modelTypes/ISavedFilter'
@@ -133,14 +134,38 @@ export function useSavedFilter(listId?: MaybeRef<IList['id']>) {
 		router.push({name: 'namespaces.index'})
 	}
 
+	const titleValid = ref(true)
+	const validateTitleField = useDebounceFn(() => {
+		titleValid.value = filter.value.title !== ''
+	}, 100)
+
+	async function createFilterWithValidation() {
+		if (!titleValid.value) {
+			return
+		}
+		return createFilter()
+	}
+	
+	async function saveFilterWithValidation() {
+		if (!titleValid.value) {
+			return
+		}
+		return saveFilter()
+	}
+
 	return {
 		createFilter,
+		createFilterWithValidation,
 		saveFilter,
+		saveFilterWithValidation,
 		deleteFilter,
 
 		filter,
 		filters,
 
 		filterService,
+		
+		titleValid,
+		validateTitleField,
 	}
 }

src/views/filters/FilterEdit.vue

@@ -3,25 +3,27 @@
 		:title="$t('filters.edit.title')"
 		primary-icon=""
 		:primary-label="$t('misc.save')"
-		@primary="saveFilter"
+		@primary="saveFilterWithValidation"
 		:tertiary="$t('misc.delete')"
 		@tertiary="$router.push({ name: 'filter.settings.delete', params: { id: listId } })"
 	>
-		<form @submit.prevent="saveFilter()">
+		<form @submit.prevent="saveFilterWithValidation()">
 			<div class="field">
 				<label class="label" for="title">{{ $t('filters.attributes.title') }}</label>
 				<div class="control">
 					<input
-						:class="{ 'disabled': filterService.loading}"
+						v-model="filter.title"
+						:class="{ 'disabled': filterService.loading, 'is-danger': !titleValid  }"
 						:disabled="filterService.loading || undefined"
-						@keyup.enter="saveFilter"
 						class="input"
-						id="title"
+						id="Title"
 						:placeholder="$t('filters.attributes.titlePlaceholder')"
 						type="text"
 						v-focus
-						v-model="filter.title"/>
+						@focusout="validateTitleField"
+					/>
 				</div>
+				<p class="help is-danger" v-if="!titleValid">{{ $t('filters.create.titleRequired') }}</p>
 			</div>
 			<div class="field">
 				<label class="label" for="description">{{ $t('filters.attributes.description') }}</label>
@@ -65,9 +67,11 @@ import type {IList} from '@/modelTypes/IList'
 const props = defineProps<{ listId: IList['id'] }>()
 
 const {
-	saveFilter,
+	saveFilterWithValidation,
 	filter,
 	filters,
 	filterService,
+	titleValid,
+	validateTitleField,
 } = useSavedFilter(toRef(props, 'listId'))
 </script>

src/views/filters/FilterNew.vue

@@ -12,15 +12,17 @@
 						<div class="control">
 							<input
 								v-model="filter.title"
-								:class="{ 'disabled': filterService.loading}"
+								:class="{ 'disabled': filterService.loading, 'is-danger': !titleValid  }"
 								:disabled="filterService.loading || undefined"
 								class="input"
 								id="Title"
 								:placeholder="$t('filters.attributes.titlePlaceholder')"
 								type="text"
 								v-focus
+								@focusout="validateTitleField"
 							/>
 						</div>
+						<p class="help is-danger" v-if="!titleValid">{{ $t('filters.create.titleRequired') }}</p>
 					</div>
 					<div class="field">
 						<label class="label" for="description">{{ $t('filters.attributes.description') }}</label>
@@ -51,8 +53,8 @@
 					<template #footer>
 						<x-button
 							:loading="filterService.loading"
-							:disabled="filterService.loading"
-							@click="createFilter()"
+							:disabled="filterService.loading || !titleValid"
+							@click="createFilterWithValidation()"
 							class="is-fullwidth"
 						>
 							{{ $t('filters.create.action') }}
@@ -71,7 +73,9 @@ import {useSavedFilter} from '@/services/savedFilter'
 const {
 	filter,
 	filters,
-	createFilter,
+	createFilterWithValidation,
 	filterService,
+	titleValid,
+	validateTitleField,
 } = useSavedFilter()
 </script>