marco/contexted-v3
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

add modal component

Browse Source
This commit is contained in:
Marco Crapts
2023-05-12 22:37:58 +02:00
parent 1381bc0f29
commit 282ff48f49
4 changed files with 178 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/Note.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import NoteEditor from '@/components/NoteEditor.vue'
import Modal from '@/components/Modal.vue'
import { formatDate } from '@/utils/helpers'
import { notes, activeNote } from '@/composables/useNotes'
import { notesRelations } from '@/composables/useNotes'
@@ -32,9 +33,9 @@ const references = computed<Note[]>(() => {
</script>
<template>
<div class="flex flex-col">
<div class="flex items-center mb-2">
<div class="mb-2 flex items-center">
<h1
class="flex flex-1 items-center rounded-md text-3xl font-semibold hover:bg-gray-200 mr-2"
class="mr-2 flex flex-1 items-center rounded-md text-3xl font-semibold hover:bg-gray-200"
>
<i
class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
@@ -47,12 +48,42 @@ const references = computed<Note[]>(() => {
/>
</h1>
<div class="btn-group flex items-center">
<button class="btn-sm btn">
<i class="fas fa-fw fa-trash" />
</button>
<button class="btn-sm btn">
<i class="fas fa-fw fa-sitemap" />
</button>
<Modal>
<template #activator="{ open }">
<button class="btn-sm btn" @click="open">
<i class="fas fa-fw fa-trash" />
</button>
</template>
<template #default>Are you sure you want to delete this?</template>
<template #actions="{ close }">
<button
class="btn-primary btn-sm btn mr-1"
@click="() => console.log('delete note')"
>
Delete note
</button>
<button class="btn-sm btn" @click="close">Close</button>
</template>
</Modal>
<Modal>
<template #activator="{ open }">
<button class="btn-sm btn" @click="open">
<i class="fas fa-fw fa-sitemap" />
</button>
</template>
<template #default>
Are you sure you want to set this note as root note?
</template>
<template #actions="{ close }">
<button
class="btn-primary btn-sm btn mr-1"
@click="() => console.log('set root note')"
>
Set current note as root
</button>
<button class="btn-sm btn" @click="close">Close</button>
</template>
</Modal>
</div>
</div>
<NoteEditor