TZGyn
/
nuxt-todo-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove @apply and made icon alias

Browse Source
main
TZGyn 3 years ago
parent 16cc5c79d2
commit 094d6ad89a
12 changed files with 151 additions and 164 deletions
Show Stats Download Patch File Download Diff File

10
app.config.ts
Unescape Escape View File

@ -0,0 +1,10 @@
export default defineAppConfig({
nuxtIcon: {
size: '24px', // default <Icon> size applied
class: 'icon', // default <Icon> class applied
aliases: {
nuxt: 'logos:nuxt-icon',
loading: 'svg-spinners:90-ring-with-bg',
},
},
});

31
assets/css/tailwind.css
Unescape Escape View File

@ -2,34 +2,3 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
html {
@apply bg-primary text-white;
}
#__nuxt {
@apply h-screen w-screen;
}
.app {
@apply flex w-full flex-col items-center px-12;
}
.content {
@apply mx-12 flex h-full w-full max-w-3xl flex-row justify-center gap-5;
}
.sidebar {
@apply sticky top-3 h-fit w-64 rounded-lg px-10 py-5 text-white;
}
.main {
@apply h-screen w-2/5;
}
.card {
@apply bg-secondary;
}
textarea {
@apply bg-secondary outline-none border-none focus:outline-none resize-none;
}

6
components/app/App.vue
Unescape Escape View File

@ -0,0 +1,6 @@
<template>
<div
class="bg-primary flex h-screen w-full flex-col items-center px-12 text-white">
<slot />
</div>
</template>

14
components/card/Note.vue
Unescape Escape View File

@ -1,8 +1,8 @@
<template> <template>
<div <div
class="note" class="bg-secondary flex w-96 cursor-pointer flex-col gap-4 rounded-lg p-4"
@click="noteDetail(props.id)"> @click="noteDetail(props.id)">
<div class="title"> <div class="w-full text-center text-2xl font-bold">
{{ props.title }} {{ props.title }}
</div> </div>
<div> <div>
@ -25,13 +25,3 @@
router.push(`/notes/${id}`); router.push(`/notes/${id}`);
}; };
</script> </script>
<style scoped>
.note {
@apply bg-secondary flex w-96 cursor-pointer flex-col gap-4 rounded-lg p-4;
}
.title {
@apply w-full text-center text-2xl font-bold;
}
</style>

37
components/card/Panel.vue
Unescape Escape View File

@ -1,21 +1,19 @@
<template> <template>
<div <div
class="panel" class="bg-secondary flex h-fit w-full justify-start gap-8 p-4 text-center"
:class="props.mode === 'horizontal' ? 'flex-row' : 'flex-col'"> :class="props.mode === 'horizontal' ? 'flex-row' : 'flex-col'">
<div class="top"> <div class="flex flex-row items-center justify-start gap-4">
<Icon <Icon :name="props.icon" />
:name="props.icon" <div class="text-2xl font-bold">
size="24" />
<div class="title">
{{ props.title }} {{ props.title }}
</div> </div>
</div> </div>
<div class="middle"> <div class="flex flex-grow flex-row items-center gap-4">
<div class="data"> <div class="w-full text-right text-2xl font-bold">
{{ props.data }} {{ props.data }}
</div> </div>
</div> </div>
<div class="bottom"> </div> <div class="flex flex-row items-center gap-4"> </div>
</div> </div>
</template> </template>
@ -30,24 +28,3 @@
const props = defineProps<Props>(); const props = defineProps<Props>();
</script> </script>
<style scoped>
.panel {
@apply bg-secondary flex h-fit w-full justify-start gap-8 p-4 text-center;
}
.top {
@apply flex flex-row items-center justify-start gap-4;
}
.middle {
@apply flex flex-row items-center gap-4;
}
.bottom {
@apply flex flex-row items-center gap-4;
}
.title {
@apply text-2xl font-bold;
}
.data {
@apply text-2xl font-bold;
}
</style>

29
components/element/TextArea.vue
Unescape Escape View File

@ -0,0 +1,29 @@
<template>
<textarea
class="bg-secondary w-full max-w-2xl resize-none border-none outline-none placeholder:text-zinc-700 focus:outline-none"
v-model="data"
:placeholder="props.placeholder"
@input="updateData()">
</textarea>
</template>
<script setup lang="ts">
interface Props {
modelValue: string;
placeholder?: string;
}
const props = defineProps<Props>();
const emit = defineEmits(['update:modelValue']);
const data = ref<string>(props.modelValue);
const updateData = () => {
emit('update:modelValue', data.value);
};
watch(
() => props.modelValue,
() => (data.value = props.modelValue)
);
</script>

17
components/header/Header.vue
Unescape Escape View File

@ -1,15 +1,16 @@
<template> <template>
<div class="header"> <div
class="bg-secondary my-3 flex h-16 w-full max-w-3xl flex-row items-center justify-center rounded-lg">
<div @click="profile"> <div @click="profile">
<img <img
v-if="props.avatar" v-if="props.avatar"
class="avatar" class="bg-secondary h-12 w-12 rounded-full hover:cursor-pointer"
@click="profile" @click="profile"
:src="props.avatar" :src="props.avatar"
alt="" /> alt="" />
<Icon <Icon
v-else v-else
class="avatar" class="bg-secondary h-12 w-12 rounded-full hover:cursor-pointer"
name="fa6-solid:circle-user" /> name="fa6-solid:circle-user" />
</div> </div>
</div> </div>
@ -28,13 +29,3 @@
router.push('/profile'); router.push('/profile');
}; };
</script> </script>
<style scoped>
.header {
@apply bg-secondary my-3 flex h-16 w-full max-w-3xl flex-row items-center justify-center rounded-lg;
}
.avatar {
@apply bg-secondary h-12 w-12 rounded-full hover:cursor-pointer;
}
</style>

4
pages/index.vue
Unescape Escape View File

@ -1,9 +1,9 @@
<template> <template>
<div class="app"> <App>
<Header /> <Header />
{{ user?.email }} {{ user?.email }}
<NuxtLink to="/notes"> Notes </NuxtLink> <NuxtLink to="/notes"> Notes </NuxtLink>
</div> </App>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

25
pages/login/index.vue
Unescape Escape View File

@ -1,19 +1,21 @@
<template> <template>
<div class="app"> <App>
<Header /> <Header />
<div <div
class="bg-secondary mx-auto mt-12 flex h-96 w-96 flex-col items-center justify-center gap-8 rounded-xl p-8"> class="bg-secondary mx-auto mt-12 flex h-96 w-96 flex-col items-center justify-center gap-8 rounded-xl p-8">
<div class="flex w-full flex-col gap-2"> <div class="flex w-full flex-col gap-2">
<label> Email </label> <label class="w-full text-[#b3b3b3]"> Email </label>
<input <input
type="text" type="text"
class="h-12 w-full rounded-md border border-[#373737] bg-[#2b2b2b] p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none"
v-model="credential.email" v-model="credential.email"
placeholder="username" /> placeholder="username" />
</div> </div>
<div class="flex w-full flex-col gap-2"> <div class="flex w-full flex-col gap-2">
<label> Password </label> <label class="w-full text-[#b3b3b3]"> Password </label>
<input <input
type="password" type="password"
class="h-12 w-full rounded-md border border-[#373737] bg-[#2b2b2b] p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none"
v-model="credential.password" v-model="credential.password"
placeholder="password" /> placeholder="password" />
</div> </div>
@ -29,6 +31,7 @@
}} }}
</p> </p>
<button <button
class="w-fit rounded-lg bg-blue-500 py-4 px-8"
v-on=" v-on="
mode === 'login' mode === 'login'
? { click: () => signIn($event) } ? { click: () => signIn($event) }
@ -37,7 +40,7 @@
{{ mode === 'login' ? 'Login' : 'Sign Up' }} {{ mode === 'login' ? 'Login' : 'Sign Up' }}
</button> </button>
</div> </div>
</div> </App>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -89,17 +92,3 @@
console.log('error', error); console.log('error', error);
}; };
</script> </script>
<style scoped>
input {
@apply h-12 w-full rounded-md border border-[#373737] bg-[#2b2b2b] p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none;
}
button {
@apply w-fit rounded-lg bg-blue-500 py-4 px-8;
}
label {
@apply w-full text-[#b3b3b3];
}
</style>

99
pages/notes/[id].vue
Unescape Escape View File

@ -1,20 +1,35 @@
<template> <template>
<div class="app"> <App class="p-4">
<textarea <ClientOnly>
v-model="title" <ElementTextArea
placeholder="untitled" @keydown.ctrl.s.prevent="submit(note)"
class="titleTextArea" /> v-model="note.title"
<button @click="submit()"> placeholder="untitled"
<LoadingSpinner v-if="isSubmitting" /> class="bg-primary focus:bg-secondary text-center" />
<Icon <div class="menu">
v-if="!isSubmitting" <button @click="submit(note)">
name="fa6-solid:floppy-disk" <Icon
size="24" /> v-if="isSubmitting"
</button> name="loading" />
<textarea <Icon
v-model="description" v-if="!isSubmitting"
class="noteTextArea"></textarea> name="fa6-solid:floppy-disk" />
</div> </button>
<button @click="deleteNote">
<Icon
v-if="isDeleting"
name="loading" />
<Icon
v-if="!isDeleting"
name="fa6-solid:trash" />
</button>
</div>
<ElementTextArea
@keydown.ctrl.s.prevent="submit(note)"
v-model:model-value="note.description"
class="h-full p-4" />
</ClientOnly>
</App>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -22,11 +37,15 @@
middleware: ['auth'], middleware: ['auth'],
}); });
const title = ref<string>(''); const note = reactive<Note>({
const description = ref<string>(''); title: '',
description: '',
});
const route = useRoute(); const route = useRoute();
const router = useRouter();
const isLoading = ref<Boolean>(false); const isLoading = ref<Boolean>(false);
const isSubmitting = ref<Boolean>(false); const isSubmitting = ref<Boolean>(false);
const isDeleting = ref<Boolean>(false);
const { refresh } = await useFetch('/api/note', { const { refresh } = await useFetch('/api/note', {
method: 'GET', method: 'GET',
@ -34,13 +53,18 @@
id: route.params.id, id: route.params.id,
}, },
onResponse({ response }) { onResponse({ response }) {
title.value = response._data.note.title; console.log('Response: ', response);
description.value = response._data.note.description; if (response.status === 500) {
console.log(response); console.log(`Error: ${response._data.message}`);
router.push('/notes');
return;
}
note.title = response._data.note.title;
note.description = response._data.note.description;
}, },
}); });
const submit = async () => { const submit = async (note: Note) => {
isSubmitting.value = true; isSubmitting.value = true;
await useFetch('/api/note', { await useFetch('/api/note', {
method: 'POST', method: 'POST',
@ -48,8 +72,8 @@
id: route.params.id, id: route.params.id,
}, },
body: { body: {
title: title.value, title: note.title,
description: description.value, description: note.description,
}, },
onResponse({ response }) { onResponse({ response }) {
isSubmitting.value = false; isSubmitting.value = false;
@ -58,21 +82,24 @@
}); });
}; };
const deleteNote = async () => {
isDeleting.value = true;
await useFetch('/api/note', {
method: 'DELETE',
query: {
id: route.params.id,
},
onResponse({ response }) {
isDeleting.value = false;
console.log('DELETE:', response._data.message);
router.push('/notes');
},
});
};
onMounted(() => { onMounted(() => {
isLoading.value = true; isLoading.value = true;
refresh(); refresh();
isLoading.value = false; isLoading.value = false;
}); });
</script> </script>
<style scoped>
.noteTextArea {
@apply h-full w-full max-w-2xl p-4;
}
.titleTextArea {
@apply bg-primary focus:bg-secondary w-full max-w-2xl text-center;
}
.app {
@apply h-full p-4;
}
</style>

23
pages/notes/index.vue
Unescape Escape View File

@ -1,20 +1,22 @@
<template> <template>
<div class="app"> <App>
<Header /> <Header />
<button @click="signout">Sign Out</button> <button @click="signout">Sign Out</button>
<button @click="create"> <button @click="create">
<LoadingSpinner v-if="isCreating" /> <Icon
v-if="isCreating"
name="loading" />
<Icon <Icon
v-if="!isCreating" v-if="!isCreating"
name="fa6-solid:square-plus" name="fa6-solid:square-plus" />
size="24" />
</button> </button>
<div class="content"> <div
class="mx-12 flex h-full w-full max-w-3xl flex-row justify-center gap-4">
<div <div
v-if="data" v-if="data"
class="notes"> class="flex flex-col gap-4">
<div v-for="note in data.notes"> <div v-for="note in data.notes">
<LazyCardNote <LazyCardNote
:id="note.id" :id="note.id"
@ -23,7 +25,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </App>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -43,6 +45,7 @@
isCreating.value = true; isCreating.value = true;
await useFetch('/api/note/new', { await useFetch('/api/note/new', {
onResponse({ response }) { onResponse({ response }) {
console.log(response._data.message);
isCreating.value = false; isCreating.value = false;
router.push(`/notes/${response._data.note.id}`); router.push(`/notes/${response._data.note.id}`);
}, },
@ -61,9 +64,3 @@
refresh(); refresh();
}); });
</script> </script>
<style scoped>
.notes {
@apply flex flex-col gap-4;
}
</style>

20
pages/profile/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template> <template>
<div class="app"> <App>
<Header /> <Header />
<div class="dashboard"> <div class="flex w-full max-w-3xl flex-col gap-4">
<CardPanel <CardPanel
v-for="data in dashboardData" v-for="data in dashboardData"
:key="data.title" :key="data.title"
@ -11,7 +11,7 @@
:description="data.description" :description="data.description"
:data="data.data" /> :data="data.data" />
</div> </div>
</div> </App>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -29,9 +29,17 @@
}; };
} }
const user = useSupabaseUser();
const isLoading = ref<boolean>(true); const isLoading = ref<boolean>(true);
const dashboardData: DashboardData = reactive({ const dashboardData: DashboardData = reactive({
user: {
title: 'Email',
description: 'User',
data: user.value?.email,
mode: 'horizontal',
icon: 'fa6-solid:envelope',
},
noteCount: { noteCount: {
title: 'Note Count', title: 'Note Count',
description: 'The number of notes this account is currently having', description: 'The number of notes this account is currently having',
@ -53,9 +61,3 @@
isLoading.value = false; isLoading.value = false;
}); });
</script> </script>
<style scoped>
.dashboard {
@apply w-full max-w-3xl;
}
</style>

Write Preview
Loading…
Cancel
Save