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 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>
<div
class="note"
class="bg-secondary flex w-96 cursor-pointer flex-col gap-4 rounded-lg p-4"
@click="noteDetail(props.id)">
<div class="title">
<div class="w-full text-center text-2xl font-bold">
{{ props.title }}
</div>
<div>
@ -25,13 +25,3 @@
router.push(`/notes/${id}`);
};
</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>
<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'">
<div class="top">
<Icon
:name="props.icon"
size="24" />
<div class="title">
<div class="flex flex-row items-center justify-start gap-4">
<Icon :name="props.icon" />
<div class="text-2xl font-bold">
{{ props.title }}
</div>
</div>
<div class="middle">
<div class="data">
<div class="flex flex-grow flex-row items-center gap-4">
<div class="w-full text-right text-2xl font-bold">
{{ props.data }}
</div>
</div>
<div class="bottom"> </div>
<div class="flex flex-row items-center gap-4"> </div>
</div>
</template>
@ -30,24 +28,3 @@
const props = defineProps<Props>();
</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>
<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">
<img
v-if="props.avatar"
class="avatar"
class="bg-secondary h-12 w-12 rounded-full hover:cursor-pointer"
@click="profile"
:src="props.avatar"
alt="" />
<Icon
v-else
class="avatar"
class="bg-secondary h-12 w-12 rounded-full hover:cursor-pointer"
name="fa6-solid:circle-user" />
</div>
</div>
@ -28,13 +29,3 @@
router.push('/profile');
};
</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>
<div class="app">
<App>
<Header />
{{ user?.email }}
<NuxtLink to="/notes"> Notes </NuxtLink>
</div>
</App>
</template>
<script setup lang="ts">

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

@ -1,19 +1,21 @@
<template>
<div class="app">
<App>
<Header />
<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">
<div class="flex w-full flex-col gap-2">
<label> Email </label>
<label class="w-full text-[#b3b3b3]"> Email </label>
<input
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"
placeholder="username" />
</div>
<div class="flex w-full flex-col gap-2">
<label> Password </label>
<label class="w-full text-[#b3b3b3]"> Password </label>
<input
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"
placeholder="password" />
</div>
@ -29,6 +31,7 @@
}}
</p>
<button
class="w-fit rounded-lg bg-blue-500 py-4 px-8"
v-on="
mode === 'login'
? { click: () => signIn($event) }
@ -37,7 +40,7 @@
{{ mode === 'login' ? 'Login' : 'Sign Up' }}
</button>
</div>
</div>
</App>
</template>
<script setup lang="ts">
@ -89,17 +92,3 @@
console.log('error', error);
};
</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>
<div class="app">
<textarea
v-model="title"
placeholder="untitled"
class="titleTextArea" />
<button @click="submit()">
<LoadingSpinner v-if="isSubmitting" />
<Icon
v-if="!isSubmitting"
name="fa6-solid:floppy-disk"
size="24" />
</button>
<textarea
v-model="description"
class="noteTextArea"></textarea>
</div>
<App class="p-4">
<ClientOnly>
<ElementTextArea
@keydown.ctrl.s.prevent="submit(note)"
v-model="note.title"
placeholder="untitled"
class="bg-primary focus:bg-secondary text-center" />
<div class="menu">
<button @click="submit(note)">
<Icon
v-if="isSubmitting"
name="loading" />
<Icon
v-if="!isSubmitting"
name="fa6-solid:floppy-disk" />
</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>
<script setup lang="ts">
@ -22,11 +37,15 @@
middleware: ['auth'],
});
const title = ref<string>('');
const description = ref<string>('');
const note = reactive<Note>({
title: '',
description: '',
});
const route = useRoute();
const router = useRouter();
const isLoading = ref<Boolean>(false);
const isSubmitting = ref<Boolean>(false);
const isDeleting = ref<Boolean>(false);
const { refresh } = await useFetch('/api/note', {
method: 'GET',
@ -34,13 +53,18 @@
id: route.params.id,
},
onResponse({ response }) {
title.value = response._data.note.title;
description.value = response._data.note.description;
console.log(response);
console.log('Response: ', response);
if (response.status === 500) {
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;
await useFetch('/api/note', {
method: 'POST',
@ -48,8 +72,8 @@
id: route.params.id,
},
body: {
title: title.value,
description: description.value,
title: note.title,
description: note.description,
},
onResponse({ response }) {
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(() => {
isLoading.value = true;
refresh();
isLoading.value = false;
});
</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>
<div class="app">
<App>
<Header />
<button @click="signout">Sign Out</button>
<button @click="create">
<LoadingSpinner v-if="isCreating" />
<Icon
v-if="isCreating"
name="loading" />
<Icon
v-if="!isCreating"
name="fa6-solid:square-plus"
size="24" />
name="fa6-solid:square-plus" />
</button>
<div class="content">
<div
class="mx-12 flex h-full w-full max-w-3xl flex-row justify-center gap-4">
<div
v-if="data"
class="notes">
class="flex flex-col gap-4">
<div v-for="note in data.notes">
<LazyCardNote
:id="note.id"
@ -23,7 +25,7 @@
</div>
</div>
</div>
</div>
</App>
</template>
<script setup lang="ts">
@ -43,6 +45,7 @@
isCreating.value = true;
await useFetch('/api/note/new', {
onResponse({ response }) {
console.log(response._data.message);
isCreating.value = false;
router.push(`/notes/${response._data.note.id}`);
},
@ -61,9 +64,3 @@
refresh();
});
</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>
<div class="app">
<App>
<Header />
<div class="dashboard">
<div class="flex w-full max-w-3xl flex-col gap-4">
<CardPanel
v-for="data in dashboardData"
:key="data.title"
@ -11,7 +11,7 @@
:description="data.description"
:data="data.data" />
</div>
</div>
</App>
</template>
<script setup lang="ts">
@ -29,9 +29,17 @@
};
}
const user = useSupabaseUser();
const isLoading = ref<boolean>(true);
const dashboardData: DashboardData = reactive({
user: {
title: 'Email',
description: 'User',
data: user.value?.email,
mode: 'horizontal',
icon: 'fa6-solid:envelope',
},
noteCount: {
title: 'Note Count',
description: 'The number of notes this account is currently having',
@ -53,9 +61,3 @@
isLoading.value = false;
});
</script>
<style scoped>
.dashboard {
@apply w-full max-w-3xl;
}
</style>

Write Preview
Loading…
Cancel
Save