Initial: Basic functionality with fancy UI
This commit is contained in:
commit
fe864bb51a
|
|
@ -0,0 +1,14 @@
|
|||
/* eslint-env node */
|
||||
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
'extends': [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'@vue/eslint-config-prettier/skip-formatting'
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest'
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
# 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
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"$schema": "https://json.schemastore.org/prettierrc",
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"Vue.vscode-typescript-vue-plugin",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
# odin-todo-vue
|
||||
|
||||
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) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.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
|
||||
```
|
||||
|
||||
### Lint with [ESLint](https://eslint.org/)
|
||||
|
||||
```sh
|
||||
npm run lint
|
||||
```
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>To-Do</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"name": "odin-todo-vue",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-vue-next": "^0.330.0",
|
||||
"v-dropdown-menu": "^2.0.4",
|
||||
"vue": "^3.4.15",
|
||||
"vue-router": "^4.2.5",
|
||||
"vue3-dropdown-navbar": "^0.1.4",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.3.3",
|
||||
"@vitejs/plugin-vue": "^5.0.3",
|
||||
"@vue/eslint-config-prettier": "^8.0.0",
|
||||
"autoprefixer": "^10.4.17",
|
||||
"eslint": "^8.49.0",
|
||||
"eslint-plugin-vue": "^9.17.0",
|
||||
"postcss": "^8.4.35",
|
||||
"prettier": "^3.0.3",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"vite": "^5.0.11"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<script setup>
|
||||
import NavBar from './components/NavBar.vue'
|
||||
import ProjectsView from './views/ProjectsView.vue'
|
||||
import TasksView from './views/TasksView.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavBar />
|
||||
<div class="wrapper">
|
||||
<ProjectsView />
|
||||
<TasksView />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<script setup>
|
||||
|
||||
import {
|
||||
TheDropDownNavbar,
|
||||
TheDropDownItem,
|
||||
} from "vue3-dropdown-navbar";
|
||||
|
||||
let currentPage = "Projects";
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<TheDropDownNavbar class="">
|
||||
<template #logo>
|
||||
<h1 class="text-2xl">{{ currentPage }}</h1>
|
||||
</template>
|
||||
<TheDropDownItem link="#" class="text-lg">Projects</TheDropDownItem>
|
||||
<TheDropDownItem link="#" class="text-lg">Tasks</TheDropDownItem>
|
||||
<TheDropDownItem link="#" class="text-lg">Somethings</TheDropDownItem>
|
||||
</TheDropDownNavbar>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { ref, toRaw } from 'vue'
|
||||
import { Project } from './project';
|
||||
|
||||
let currentProject = ref(null);
|
||||
|
||||
export {currentProject}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
.dd-nav-dark {
|
||||
@apply text-slate-50 bg-slate-800;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<script setup>
|
||||
import { X, GripVertical, MoreVertical, Edit3 } from 'lucide-vue-next';
|
||||
|
||||
import DropdownMenu from 'v-dropdown-menu';
|
||||
// import 'v-dropdown-menu/dist/vue3/v-dropdown-menu.css'
|
||||
|
||||
const props = defineProps(['item', 'remove', 'currentProject', 'rename'])
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="flex items-center justify-between gap-2 *:block">
|
||||
<p class="handle text-xl cursor-pointer rounded-lg *:stroke-slate-400 *:stroke-1 hover:*:stroke-slate-300" title="Drag"><GripVertical /></p>
|
||||
<p class="!overflow-hidden whitespace-nowrap text-ellipsis text-xl flex-1 cursor-pointer hover:bg-slate-600 rounded-lg p-1" :title="props.item.name" @click="$emit('changeCurrentProject', props.item)">{{ props.item.name }}</p>
|
||||
<!-- <button class="cursor-pointer hover:bg-slate-600 rounded-lg p-1" type="button" @click="props.remove(item)"><X /></button> -->
|
||||
<dropdown-menu class="relative rounded-full hover:bg-slate-500" title="More">
|
||||
<template #trigger>
|
||||
<button class="p-2"><MoreVertical /></button>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<ul class="*:flex absolute right-0 bg-slate-600 p-2 rounded-lg flex flex-col gap-1 *:cursor-pointer *:p-1 *:rounded border border-slate-500 z-10">
|
||||
<li class="hover:bg-slate-500" @click="props.rename(item)"><Edit3 /> Rename</li>
|
||||
<li class="hover:bg-slate-500" @click="props.remove(item)"><X /> Delete</li>
|
||||
</ul>
|
||||
</template>
|
||||
</dropdown-menu>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<script setup>
|
||||
import { X, GripVertical, MoreVertical, Edit3, CheckCircle2, Star } from 'lucide-vue-next';
|
||||
|
||||
import DropdownMenu from 'v-dropdown-menu';
|
||||
// import 'v-dropdown-menu/dist/vue3/v-dropdown-menu.css'
|
||||
|
||||
const props = defineProps(['item', 'remove', 'currentProject', 'rename'])
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="flex items-center justify-between gap-2 *:block" :class="item.done ? 'line-through text-slate-300' : ''">
|
||||
<p v-if="!item.done" class="handle text-xl cursor-pointer rounded-lg *:stroke-slate-400 *:stroke-1 hover:*:stroke-slate-300" title="Drag"><GripVertical /></p>
|
||||
<p class="text-xl cursor-pointer rounded-lg *:stroke-slate-400 *:stroke-1 hover:*:stroke-slate-300"
|
||||
:class="item.done ? '*:fill-blue-300 *:stroke-slate-800 hover:*:stroke-slate-700 hover:*:fill-blue-400 ' : ''" @click="$emit('toggleDone', props.item)" title="Toggle status"><CheckCircle2 /></p>
|
||||
<p class="!overflow-hidden whitespace-nowrap text-ellipsis text-xl flex-1 cursor-pointer hover:bg-slate-600 rounded-lg p-1" :title="`${props.item.name} - show details`" @click="$emit('showDetails', props.item)">{{ props.item.name }}</p>
|
||||
|
||||
<p class="text-xl cursor-pointer rounded-lg *:stroke-slate-400 *:stroke-1 hover:*:stroke-slate-300"
|
||||
:class="item.priority ? '*:fill-yellow-300 *:stroke-0 hover:*:fill-yellow-400 ' : ''" @click="$emit('togglePriority', props.item)" title="Toggle priority"><Star /></p>
|
||||
<!-- <button class="cursor-pointer hover:bg-slate-600 rounded-lg p-1" type="button" @click="props.remove(item)"><X /></button> -->
|
||||
<dropdown-menu class="relative rounded-full hover:bg-slate-500" title="More">
|
||||
<template #trigger>
|
||||
<button class="p-2"><MoreVertical /></button>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<ul class="*:flex absolute right-0 bg-slate-600 p-2 rounded-lg flex flex-col gap-1 *:cursor-pointer *:p-1 *:rounded border border-slate-500">
|
||||
<li class="hover:bg-slate-500" @click="props.rename(item)"><Edit3 /> Rename</li>
|
||||
<li class="hover:bg-slate-500" @click="props.remove(item)"><X /> Delete</li>
|
||||
</ul>
|
||||
</template>
|
||||
</dropdown-menu>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { Project } from "./project";
|
||||
|
||||
function publishToLocalStorage() {
|
||||
localStorage.setItem(
|
||||
"tasks-projects-todo",
|
||||
JSON.stringify(Project.projects)
|
||||
);
|
||||
}
|
||||
|
||||
export { publishToLocalStorage };
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import './index.css'
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
import { Project as ProjectClass } from './project.js';
|
||||
import DropdownMenu from 'v-dropdown-menu'
|
||||
|
||||
console.log(JSON.parse(localStorage.getItem("tasks-projects-todo")));
|
||||
JSON.parse(localStorage.getItem("tasks-projects-todo")).forEach(element => {
|
||||
let proj = ProjectClass.newProject(element.name);
|
||||
element.tasks.forEach(task => {
|
||||
// console.log(task)
|
||||
proj.newTask(
|
||||
task.name,
|
||||
task.priority,
|
||||
task.dueDate,
|
||||
task.description,
|
||||
task.done,
|
||||
)
|
||||
})
|
||||
});
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(DropdownMenu)
|
||||
// import router from './router'
|
||||
// app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
document.documentElement.classList.toggle("dd-nav-dark");
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { toRaw } from "vue";
|
||||
import { Task } from "./tasks";
|
||||
|
||||
class Project {
|
||||
constructor(name, tasks) {
|
||||
this.name = name;
|
||||
this.tasks = tasks || [];
|
||||
}
|
||||
static projects = [];
|
||||
static newProject(name, tasks) {
|
||||
this.projects.push(new this(name, tasks || []));
|
||||
return this.projects[this.projects.length - 1];
|
||||
}
|
||||
newTask(name, priority, dueDate, description, done) {
|
||||
if (priority == undefined) {
|
||||
this.tasks.push(new Task(name));
|
||||
} else {
|
||||
this.tasks.push(new Task(name, priority, dueDate, description, done));
|
||||
}
|
||||
return this.tasks[this.tasks.length - 1];
|
||||
}
|
||||
changeName(name) {
|
||||
this.name = name;
|
||||
}
|
||||
remove() {
|
||||
let thisProjectInArray = Project.projects.indexOf(toRaw(this));
|
||||
Project.projects.splice(thisProjectInArray, 1);
|
||||
}
|
||||
}
|
||||
|
||||
export { Project };
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: HomeView
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (About.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/AboutView.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { toRaw } from "vue";
|
||||
import { currentProject } from "./current.js";
|
||||
|
||||
class Task {
|
||||
constructor(name, priority, dueDate, description, done) {
|
||||
this.name = name;
|
||||
this.priority = priority || false;
|
||||
this.dueDate = dueDate || null;
|
||||
this.description = description || null;
|
||||
this.done = done || false;
|
||||
}
|
||||
changeName(name) {
|
||||
this.name = name;
|
||||
}
|
||||
toggleDone() {
|
||||
this.done = !this.done;
|
||||
}
|
||||
togglePriority() {
|
||||
this.priority = !this.priority;
|
||||
}
|
||||
remove() {
|
||||
console.log(this, toRaw(currentProject.value).tasks);
|
||||
let thisTaskInArray = toRaw(currentProject.value).tasks.indexOf(toRaw(this));
|
||||
toRaw(currentProject.value).tasks.splice(thisTaskInArray, 1);
|
||||
}
|
||||
}
|
||||
|
||||
export { Task };
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<script setup>
|
||||
import { ref, onMounted, toRaw, reactive } from 'vue'
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
import { Plus, X } from 'lucide-vue-next';
|
||||
|
||||
import Project from '../instances/Project.vue';
|
||||
import { Project as ProjectClass } from "../project.js";
|
||||
|
||||
import { publishToLocalStorage } from '../localStorage.js';
|
||||
|
||||
import { currentProject } from '../current.js';
|
||||
|
||||
let list = ref(ProjectClass.projects)
|
||||
|
||||
function refreshProjects() {
|
||||
list.value = [];
|
||||
list.value.push(...ProjectClass.projects);
|
||||
|
||||
publishToLocalStorage();
|
||||
}
|
||||
|
||||
function newProject() {
|
||||
let projName = prompt("Project name:");
|
||||
if (projName != null && projName != "") {
|
||||
ProjectClass.newProject(projName);
|
||||
}
|
||||
refreshProjects();
|
||||
}
|
||||
|
||||
function renameProject(item) {
|
||||
let newName = prompt(`Rename ${item.name} to:`);
|
||||
if (newName != null && newName != "") {
|
||||
item.changeName(newName);
|
||||
}
|
||||
refreshProjects();
|
||||
}
|
||||
|
||||
function removeProject(item) {
|
||||
|
||||
if (confirm(`Are you sure you want to remove project ${item.name}?`)) {
|
||||
if (currentProject.value == reactive(toRaw(item))) {
|
||||
currentProject.value = null;
|
||||
}
|
||||
item.remove();
|
||||
}
|
||||
refreshProjects();
|
||||
}
|
||||
|
||||
function onMoveCallback(){
|
||||
ProjectClass.projects = toRaw(list.value.map(element => toRaw(element)));
|
||||
refreshProjects();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="projects lg:w-[1000px] lg:ml-auto lg:mr-auto m-3 p-3 bg-slate-700 rounded-md border border-slate-600">
|
||||
<div class="flex justify-center">
|
||||
<button type="button" @click="newProject()">
|
||||
<div class="flex items-center gap-1 rounded-xl border p-1 hover:border-slate-500 hover:bg-slate-600 border-slate-600 bg-slate-700"><Plus /> <p>Add project</p></div>
|
||||
</button>
|
||||
</div>
|
||||
<draggable
|
||||
v-if="list.length > 0"
|
||||
v-model="list"
|
||||
@start="drag=true"
|
||||
@end="drag=false"
|
||||
item-key="id"
|
||||
@change="onMoveCallback()"
|
||||
handle=".handle"
|
||||
animation="150">
|
||||
<template #item="{element}">
|
||||
<Project @change-current-project="(item) => {currentProject == reactive(toRaw(item)) ? currentProject = null : currentProject = toRaw(item); console.log(currentProject)}" :item="element" :remove="removeProject" :rename="renameProject" />
|
||||
</template>
|
||||
</draggable>
|
||||
<div v-else class="text-2xl font-light text-center">No projects. Add one!</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<script setup>
|
||||
import { ref, onMounted, toRaw, watch } from 'vue'
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
import { Plus, X, ChevronDown, ChevronUp } from 'lucide-vue-next';
|
||||
|
||||
import Task from '../instances/Task.vue';
|
||||
|
||||
import { currentProject } from '../current.js';
|
||||
|
||||
import { publishToLocalStorage } from '../localStorage.js';
|
||||
|
||||
|
||||
let list = ref([])
|
||||
|
||||
function refreshTasks() {
|
||||
list.value = [];
|
||||
if (currentProject.value != null) {
|
||||
list.value.push(...currentProject.value.tasks);
|
||||
publishToLocalStorage();
|
||||
}
|
||||
}
|
||||
|
||||
refreshTasks();
|
||||
|
||||
function newTask() {
|
||||
if (currentProject.value != null) {
|
||||
let taskName = prompt("Task name:");
|
||||
if (taskName != null && taskName != "") {
|
||||
toRaw(currentProject.value).newTask(taskName);
|
||||
}
|
||||
} else {
|
||||
alert("No project selected!")
|
||||
}
|
||||
refreshTasks();
|
||||
}
|
||||
|
||||
function removeTask(item) {
|
||||
console.log(toRaw(item))
|
||||
if (confirm(`Are you sure you want to remove task ${toRaw(item).name}?`)) {
|
||||
toRaw(item).remove();
|
||||
}
|
||||
refreshTasks();
|
||||
}
|
||||
|
||||
function onMoveCallback(){
|
||||
toRaw(currentProject.value).tasks = toRaw(list.value.map(element => toRaw(element)));
|
||||
}
|
||||
|
||||
watch(currentProject, (test) => {
|
||||
console.log(test);
|
||||
|
||||
refreshTasks();
|
||||
})
|
||||
|
||||
function toggleDone(item) {
|
||||
item.toggleDone();
|
||||
refreshTasks();
|
||||
}
|
||||
|
||||
function togglePriority(item) {
|
||||
item.togglePriority();
|
||||
refreshTasks();
|
||||
}
|
||||
|
||||
function checkIfAtLeastOneDone() {
|
||||
return currentProject.value.tasks.some(element => element.done);
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="tasks lg:w-[1000px] lg:ml-auto lg:mr-auto m-3 p-3 bg-slate-700 rounded-md border border-slate-600">
|
||||
<div class="flex justify-center">
|
||||
<button type="button" @click="newTask()">
|
||||
<div class="flex items-center gap-1 rounded-xl border p-1 hover:border-slate-500 hover:bg-slate-600 border-slate-600 bg-slate-700"><Plus /> <p>Add task</p></div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="list.length > 0">
|
||||
<draggable
|
||||
v-model="list"
|
||||
@start="drag=true"
|
||||
@end="drag=false"
|
||||
item-key="id"
|
||||
@change="onMoveCallback()"
|
||||
handle=".handle"
|
||||
animation="150">
|
||||
<template #item="{element}">
|
||||
<Task :item="element" v-if="!element.done" :remove="removeTask" @toggle-done="toggleDone" @toggle-priority="togglePriority" />
|
||||
</template>
|
||||
</draggable>
|
||||
<dropdown-menu class="relative rounded-full" title="More" :closeOnClickOutside="false">
|
||||
<template #trigger>
|
||||
<h1 v-if="checkIfAtLeastOneDone()" class="flex cursor-pointer text-slate-300"><ChevronDown /> Completed</h1>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<div v-for="element in list">
|
||||
<Task :item="element" v-if="element.done" :remove="removeTask" @toggle-done="toggleDone" @toggle-priority="togglePriority" />
|
||||
</div>
|
||||
</template>
|
||||
</dropdown-menu>
|
||||
</div>
|
||||
<div v-else-if="currentProject == null" class="text-2xl font-light text-center">Choose a project</div>
|
||||
<div v-else class="text-2xl font-light text-center">No tasks. Add one!</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
'./src/**/*.{html,js,vue}',
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue