kisubootcamp · miseullang · Jan 11, 2025
diff --git a/20250107-2/src/test.vue b/20250107-2/src/test.vue
@@ -0,0 +1,16 @@
+<script>
+export default {
+  name: 'test',
+  data() {
+    return {
+
+    };
+  },
+};
+</script>
+<template>
+
+</template>
+<style scoped>
+
+</style>
diff --git a/TodoList-pinia/.gitignore b/TodoList-pinia/.gitignore
@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+.env
+.env.*
+package-lock.json
+.vscode
diff --git a/TodoList-pinia/README.md b/TodoList-pinia/README.md
@@ -0,0 +1,29 @@
+# vue_todo
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
diff --git a/TodoList-pinia/index.html b/TodoList-pinia/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/TodoList-pinia/jsconfig.json b/TodoList-pinia/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/TodoList-pinia/package.json b/TodoList-pinia/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "vue_todo",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "pinia": "^2.3.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "vite": "^6.0.5",
+    "vite-plugin-vue-devtools": "^7.6.8"
+  }
+}
diff --git a/TodoList-pinia/postcss.config.js b/TodoList-pinia/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/TodoList-pinia/src/App.vue b/TodoList-pinia/src/App.vue
@@ -0,0 +1,16 @@
+<script>
+import Todo from "./components/Todo.vue";
+
+export default {
+  components: {
+    Todo,
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<template>
+  <Todo />
+</template>
+<style></style>
diff --git a/TodoList-pinia/src/assets/css/index.css b/TodoList-pinia/src/assets/css/index.css
@@ -0,0 +1 @@
+@import "./tailwind.css";
diff --git a/TodoList-pinia/src/assets/css/tailwind.css b/TodoList-pinia/src/assets/css/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/TodoList-pinia/src/components/Todo.vue b/TodoList-pinia/src/components/Todo.vue
@@ -0,0 +1,13 @@
+<script setup>
+import TodoEditor from "./TodoEditor.vue";
+import TodoHeader from "./TodoHeader.vue";
+import TodoList from "./TodoList.vue";
+</script>
+
+<template>
+  <div className="max-w-md mx-auto overflow-hidden rounded-lg shadow-lg">
+    <TodoHeader />
+    <TodoEditor />
+    <TodoList />
+  </div>
+</template>
diff --git a/TodoList-pinia/src/components/TodoEditor.vue b/TodoList-pinia/src/components/TodoEditor.vue
@@ -0,0 +1,31 @@
+<script setup>
+import { ref } from "vue";
+import { useTodoStore } from "@/stores/todoStore";
+
+const store = useTodoStore();
+const inputText = ref("");
+
+const handleSubmit = (event) => {
+  event.preventDefault();
+  if (inputText.value.trim() === "") return;
+
+  store.addTodo(inputText.value);
+  inputText.value = "";
+};
+</script>
+
+<template>
+  <form @submit="handleSubmit" class="flex p-4">
+    <input
+      v-model="inputText"
+      type="text"
+      placeholder="Enter a new todo"
+      class="flex-grow p-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+    />
+    <button
+      class="px-4 py-2 text-white transition-colors bg-blue-500 rounded-r-md hover:bg-blue-600"
+    >
+      Add Todo
+    </button>
+  </form>
+</template>
diff --git a/TodoList-pinia/src/components/TodoHeader.vue b/TodoList-pinia/src/components/TodoHeader.vue
@@ -0,0 +1,13 @@
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<template>
+  <header className="bg-blue-500 text-white p-4 text-center">
+    <h1 className="text-2xl font-bold">Todo List</h1>
+  </header>
+</template>
+<style></style>
diff --git a/TodoList-pinia/src/components/TodoList.vue b/TodoList-pinia/src/components/TodoList.vue
@@ -0,0 +1,16 @@
+<script setup>
+import TodoListItem from "./TodoListItem.vue"
+import { useTodoStore } from '@/stores/todoStore';
+
+const store = useTodoStore()
+</script>
+
+<template>
+  <ul className="divide-y divide-gray-200">
+    <TodoListItem
+      v-for="todo in store.todos"
+      :key="todo.id"
+      :todo="todo"
+    />
+  </ul>
+</template>
diff --git a/TodoList-pinia/src/components/TodoListItem.vue b/TodoList-pinia/src/components/TodoListItem.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { useTodoStore } from '@/stores/todoStore';
+
+const props = defineProps({
+  todo: {
+    type: Object,
+    required: true,
+  },
+});
+
+const store = useTodoStore();
+</script>
+
+<template>
+  <li class="flex items-center justify-between p-3 transition-colors hover:bg-gray-100">
+    <input
+      type="checkbox"
+      :checked="todo.completed"
+      @change="() => store.toggleTodo(todo.id)"
+      class="w-4 h-4 focus:ring-blue-400"
+    />
+    <span
+      class="flex-grow ml-2"
+      :class="{ 'line-through text-gray-400': todo.completed }"
+    >
+      {{ todo.text }}
+    </span>
+    <button
+      @click="() => store.deleteTodo(todo.id)"
+      class="ml-4 text-red-500 hover:text-red-700"
+    >
+      Delete
+    </button>
+  </li>
+</template>
diff --git a/TodoList-pinia/src/main.js b/TodoList-pinia/src/main.js
@@ -0,0 +1,10 @@
+import "./assets/css/index.css";
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import App from "./App.vue";
+
+const app = createApp(App);
+const pinia = createPinia();
+
+app.use(pinia); 
+app.mount('#app');
diff --git a/TodoList-pinia/src/stores/todoStore.js b/TodoList-pinia/src/stores/todoStore.js
@@ -0,0 +1,31 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useTodoStore = defineStore("todo", () => {
+  const todos = ref([]);
+
+  const addTodo = (text) => {
+    todos.value.push({
+      id: Date.now(),
+      text,
+      completed: false,
+    });
+  };
+
+  const deleteTodo = (id) => {
+    todos.value = todos.value.filter((todo) => todo.id !== id);
+  };
+
+  const toggleTodo = (id) => {
+    todos.value = todos.value.map((todo) =>
+      todo.id === id ? { ...todo, completed: !todo.completed } : todo
+    );
+  };
+
+  return {
+    todos,
+    addTodo,
+    deleteTodo,
+    toggleTodo,
+  };
+});
diff --git a/TodoList-pinia/tailwind.config.js b/TodoList-pinia/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/TodoList-pinia/vite.config.js b/TodoList-pinia/vite.config.js
@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})
diff --git a/TodoList/.gitignore b/TodoList/.gitignore
@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+.env
+.env.*
+package-lock.json
+.vscode