Vue + <script setup> + TypeScript: TodoMVC 08 要素にアニメーションを加える

<script setup lang="ts">
import { computed, onMounted, ref, watchEffect } from 'vue';
import { fetch, getNewId, save } from './TodoStorage';
import TodoInput from './components/TodoInput.vue';
import TodoList from './components/TodoList.vue';
import TodoController from './components/TodoController.vue';

export interface Todo {
	id: number;
	title: string;
	completed: boolean;
}
const todos = ref(fetch());
const visibility = ref('all');
const remaining = computed(() => getActive(todos.value).length);
const allDone = computed(() => remaining.value === 0);
const filteredTodos = computed((): Todo[] => {
	switch (visibility.value) {
		case 'all':
			return todos.value;
		case 'active':
			return todos.value.filter((todo) => !todo.completed);
		case 'completed':
			return todos.value.filter((todo) => todo.completed);
		default:
			return todos.value;
	}
});
watchEffect(() => save(todos.value));
const addTodo = (todoTitle: string) => {
	if (!todoTitle) return;
	todos.value.push({
		id: getNewId(),
		title: todoTitle,
		completed: false,
	});
};
const removeTodo = (todo: Todo) => {
	todos.value = todos.value.filter((item) => item !== todo);
};
const done = (todo: Todo, completed: boolean) => {
	todo.completed = completed;
};
const getActive = (todos: Todo[]) => {
	return todos.filter((todo) => !todo.completed);
};
const onHashChange = () => {
	visibility.value = window.location.hash.replace(/#\/?/, '');
};
const removeCompleted = () => {
	todos.value = getActive(todos.value);
};
const toggleAll = (checked: boolean) => {
	todos.value.forEach((todo) => (todo.completed = checked));
};
onMounted(() => {
	window.addEventListener('hashchange', onHashChange);
});
</script>

<template>
	<section id="app" class="todoapp">
		<header class="header">
			<Transition appear name="todo-head">
				<h1>todos</h1>
			</Transition>
			<TodoInput @addTodo="addTodo" />
		</header>
		<TodoList
			:allDone="allDone"
			:filteredTodos="filteredTodos"
			:todos="todos"
			@removeTodo="removeTodo"
			@done="done"
			@toggleAll="toggleAll"
		/>
		<TodoController
			:todos="todos"
			:remaining="remaining"
			:visibility="visibility"
			@removeCompleted="removeCompleted"
		/>
	</section>
</template>

<style scoped>
.todo-head-enter-active {
	transition: 1s ease-in;
}
.todo-head-enter-from {
	opacity: 0;
	transform: translateY(-40px);
}
</style>

<style>
@import url("https://unpkg.com/todomvc-app-css@2.4.2/index.css");
</style>

<script setup lang="ts">
import { ref } from 'vue';
import type { Todo } from '../App.vue';
import TodoEdit from './TodoEdit.vue';
import TodoItem from './TodoItem.vue';

interface Props {
	allDone: boolean;
	filteredTodos: Todo[];
}
interface Emits {
	(event: 'removeTodo', todo: Todo): void;
	(event: 'done', todo: Todo, completed: boolean): void;
	(event: 'toggleAll', checked: boolean): void;
}
defineProps<Props>();
const emit = defineEmits<Emits>();
const editedTodo = ref<Todo | null>(null);
const removeTodo = (todo: Todo) => {
	emit('removeTodo', todo);
};
const done = (todo: Todo, completed: boolean) => {
	emit('done', todo, completed);
};
const editTodo = (todo: Todo) => {
	editedTodo.value = todo;
};
const cancelEdit = () => {
	editedTodo.value = null;
};
const doneEdit = (todoTitle: string) => {
	if (!editedTodo.value) return;
	const title = todoTitle.trim();
	if (title) {
		editedTodo.value.title = title;
	} else {
		removeTodo(editedTodo.value);
	}
	editedTodo.value = null;
};
const onChange = ({ target }: Event) => {
	if (!(target instanceof HTMLInputElement)) return;
	emit('toggleAll', target.checked);
};
</script>

<template>
	<section class="main">
		<input
			id="toggle-all"
			type="checkbox"
			class="toggle-all"
			:checked="allDone"
			@change="onChange"
		/>
		<label for="toggle-all">Mark all as complete</label>
		<TransitionGroup class="todo-list" name="todo-item" tag="ul">
			<li
				v-for="todo in filteredTodos"
				:class="[
					'todo-item',
					{ completed: todo.completed, editing: todo == editedTodo },
				]"
				:key="todo.id"
			>
				<TodoItem
					:todo="todo"
					@removeTodo="removeTodo"
					@done="done"
					@editTodo="editTodo"
				/>
				<TodoEdit
					:editedTodo="editedTodo"
					:todo="todo"
					@cancelEdit="cancelEdit"
					@doneEdit="doneEdit"
				/>
			</li>
		</TransitionGroup>
	</section>
</template>

<style scoped>
.todo-item {
	transition: 1s;
}
.todo-item-enter-from,
.todo-item-leave-to {
	opacity: 0;
	transform: translateX(200px);
}
.todo-item-leave-active {
	position: absolute;
}
</style>