fix filterable mixin and FiltersInline component

[4dr1en]

Description

fix filter inline no firing event update:modelValue

Playground

<template>
	<PageContainer>
		{{ filters }}
		<FiltersInline v-model="filters" @update:modelValue="console.log">
			<template #name="{ attrs }">
				<VTextField
					v-bind="attrs"
					label="Nom"
					color="primary"
					variant="outlined"
					hide-details
				/>
			</template>

			<template #folder="{ attrs }">
				<p class="text-secondary mb-4">
					Vous pouvez filtrer entre les dossiers de type
					<b>Arrêt de Travail (AT)</b> et
					<b>Maladie Professionnelle (MP)</b> ou <b>Autre</b>.
				</p>
				<VSelect
					v-bind="attrs"
					:items="folderTypes"
					color="primary"
					label="Type de dossier"
					multiple
					variant="outlined"
					return-object
					hide-details
				/>
			</template>

			<template #checkbox="{ attrs }">
				<v-radio-group v-bind="attrs">
					<v-radio label="Option One" value="one" color="primary"></v-radio>
					<v-radio label="Option 2 (string)" value="2" color="primary"></v-radio>
					<v-radio :value="3" label="Option 3 (integer)" color="primary"></v-radio>
				</v-radio-group>
			</template>
		</FiltersInline>
	</PageContainer>
</template>

<script lang="ts">
import PageContainer from "@/elements/PageContainer/PageContainer.vue";
import FiltersInline from "@/patterns/FiltersInline/FiltersInline.vue";

import { defineComponent } from "vue";

export default defineComponent({
	components: {
		PageContainer,
		FiltersInline
	},
	data() {
		return {
			filters: [
				{
					name: "name",
					title: "Identité",
				},
				{
					name: "folder",
					title: "Type de dossier",
				},
				{
					name: "checkbox",
					title: "Checkbox",
				}
			],

			folderTypes: [
				{
					title: "AT",
					value: "at",
				},
				{
					title: "MP",
					value: "mp",
				},
				{
					title: "Autre",
					value: "other",
				},
			],

			professionList: [
				{
					label: "Chirurgien-dentiste",
					value: "chirurgien-dentiste",
				},
				{
					label: "Infirmier",
					value: "infirmier",
				},
				{
					label: "Orthophoniste",
					value: "orthophoniste",
				},
				{
					label: "Orthoptiste",
					value: "orthoptiste",
				},
				{
					label: "Pédicure-podologue",
					value: "pedicure-podologue",
				},
				{
					label: "Pharmacien",
					value: "pharmacien",
				},
			],
		};
	},
});
</script>

Type de changement

• Nouvelle fonctionnalité
• Correction de bug
• Changement cassant
• Refactoring
• Maintenance
• Documentation
• Ce changement nécessite une mise à jour de la documentation

Checklist

• Ma Pull Request pointe vers la bonne branche
• Mon code suit le style de code du projet
• J'ai effectué une review de mon propre code
• J'ai commenté mon code, en particulier dans les parties difficiles à comprendre
• J'ai apporté les modifications correspondantes à la documentation
• Mes modifications ne génèrent aucun nouveau warning
• J'ai ajouté des tests qui prouvent que mon correctif est efficace ou que ma fonctionnalité fonctionne
• Les tests unitaires passent localement avec mes modifications
• J'ai mis à jour le fichier Changelog