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

more ui components

Browse Source
This commit is contained in:
Marco Crapts
2023-05-26 17:32:43 +02:00
parent 3e6b9414f4
commit 7c1e74ff39
9 changed files with 41 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components.d.ts vendored
View File

@@ -11,12 +11,10 @@ declare module '@vue/runtime-core' {
export interface GlobalComponents {
Auth: typeof import('./src/components/Auth.vue')['default']
Autocomplete: typeof import('./src/components/Note/Autocomplete.vue')['default']
Button: typeof import('./src/components/ui/Button.vue')['default']
Hamburger: typeof import('./src/components/TopBar/Hamburger.vue')['default']
ListView: typeof import('./src/components/ViewModes/ListView.vue')['default']
Logo: typeof import('./src/components/TopBar/Logo.vue')['default']
Mindmap: typeof import('./src/components/ViewModes/Mindmap.vue')['default']
Modal: typeof import('./src/components/Modal.vue')['default']
Note: typeof import('./src/components/ViewModes/Note.vue')['default']
NoteEditor: typeof import('./src/components/Note/NoteEditor.vue')['default']
NoteReferences: typeof import('./src/components/Note/NoteReferences.vue')['default']
@@ -34,6 +32,8 @@ declare module '@vue/runtime-core' {
TopBar: typeof import('./src/components/TopBar.vue')['default']
UIButton: typeof import('./src/components/ui/UIButton.vue')['default']
UIButtonGroup: typeof import('./src/components/ui/UIButtonGroup.vue')['default']
UIDropdown: typeof import('./src/components/ui/UIDropdown.vue')['default']
UIDropdownItem: typeof import('./src/components/ui/UIDropdownItem.vue')['default']
UIModal: typeof import('./src/components/ui/UIModal.vue')['default']
UITable: typeof import('./src/components/ui/UITable.vue')['default']
UITextInput: typeof import('./src/components/ui/UITextInput.vue')['default']

2
src/components/Search/SearchBar.vue
View File

@@ -65,7 +65,7 @@ const resultsRefs = ref<InstanceType<typeof SearchResult>[]>([])
ref="queryElem"
@keydown="handleKeydown"
/>
<div class="z-1000 dropdown absolute left-0 right-0 top-[100%]" v-if="active">
<div class="z-1000 absolute left-0 right-0 top-[100%]" v-if="active">
<ul tabindex="0" class="menu mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow">
<div class="max-h-[320px] w-full overflow-y-auto">
<template v-if="results.length > 0">

39
src/components/TopBar/Settings.vue
View File

@@ -24,35 +24,26 @@ const handleClick = (fn: (...args: any[]) => any) => {
</script>
<template>
<OnClickOutside>
<div class="search-active-hide dropdown-end dropdown">
<label tabindex="0" class="btn-outline btn-sm btn py-1 text-white">
<UIDropdown class="search-active-hide">
<template #activator>
<UIButton size="sm" variant="outline" tabindex="0" class="py-1 text-white">
<i class="fa-fw fa-solid fa-user-gear" />
</label>
<ul
tabindex="0"
class="dropdown-content menu rounded-box menu-compact mt-1 w-52 bg-base-100 p-2 text-base-content shadow"
>
<li
class="text-base"
v-for="source in availableNotesSources.filter(
(source) => source !== activeNotesSource
)"
</UIButton>
</template>
<template #items>
<UIDropdownItem
v-for="source in availableNotesSources.filter((source) => source !== activeNotesSource)"
:key="source"
@click="handleClick(() => (preferredNotesSource = source))"
>
<a>
<i class="fa-fw fa-solid fa-database" />
{{ sourceLabels[source] }}
</a>
</li>
</UIDropdownItem>
<UIModal>
<template #activator="{ open }">
<li @click="open" class="text-base">
<a>
<UIDropdownItem @click="open">
<i class="fa-fw fa-solid fa-right-from-bracket" />
Sign out
</a>
</li>
</UIDropdownItem>
</template>
<template #title>Sign out</template>
<template #default>
@@ -60,11 +51,11 @@ const handleClick = (fn: (...args: any[]) => any) => {
<p>Your synchronized notes can't be accessed until you sign-in again.</p>
</template>
<template #actions="{ close }">
<button class="btn-sm btn" @click="close">Cancel</button>
<button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
<UIButton size="sm" @click="close">Cancel</UIButton>
<UIButton size="sm" color="primary" @click="signOut(close)">Sign out</UIButton>
</template>
</UIModal>
</ul>
</div>
</template>
</UIDropdown>
</OnClickOutside>
</template>

8
src/components/ViewModes/Note.vue
View File

@@ -66,11 +66,3 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
</div>
</div>
</template>
<style scoped lang="scss">
.btn-group .btn {
@apply border-[1px] border-neutral-200 text-opacity-70;
&:not(:first-child) {
@apply ml-[-1px];
}
}
</style>

2
src/components/ui/UIButton.vue
View File

@@ -19,5 +19,5 @@ const styleClass = computed(() => {
})
</script>
<template>
<button class="btn" :class="styleClass"><slot></slot></button>
<button class="btn duration-0" :class="styleClass"><slot></slot></button>
</template>

11
src/components/ui/UIDropdown.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div class="dropdown-end dropdown">
<slot name="activator" tabindex="0"></slot>
<ul
tabindex="0"
class="dropdown-content menu rounded-box menu-compact mt-1 w-52 bg-base-100 p-2 text-base-content shadow"
>
<slot name="items"></slot>
</ul>
</div>
</template>

5
src/components/ui/UIDropdownItem.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<li class="text-base">
<a><slot></slot></a>
</li>
</template>

2
src/components/ui/UIModal.vue
View File

@@ -60,7 +60,7 @@ defineExpose({ open, close })
</p>
<div class="modal-action">
<slot name="actions" v-bind="slotProps">
<button class="btn-sm btn" @click="close">Close</button>
<UIButton size="sm" @click="close">Close</UIButton>
</slot>
</div>
</div>

4
src/style.scss
View File

@@ -42,10 +42,6 @@ p:last-child {
@apply my-0;
}
.btn {
animation-duration: 0s;
}
.ck-body-wrapper {
height: 0;
}