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 { export interface GlobalComponents {
Auth: typeof import('./src/components/Auth.vue')['default'] Auth: typeof import('./src/components/Auth.vue')['default']
Autocomplete: typeof import('./src/components/Note/Autocomplete.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'] Hamburger: typeof import('./src/components/TopBar/Hamburger.vue')['default']
ListView: typeof import('./src/components/ViewModes/ListView.vue')['default'] ListView: typeof import('./src/components/ViewModes/ListView.vue')['default']
Logo: typeof import('./src/components/TopBar/Logo.vue')['default'] Logo: typeof import('./src/components/TopBar/Logo.vue')['default']
Mindmap: typeof import('./src/components/ViewModes/Mindmap.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'] Note: typeof import('./src/components/ViewModes/Note.vue')['default']
NoteEditor: typeof import('./src/components/Note/NoteEditor.vue')['default'] NoteEditor: typeof import('./src/components/Note/NoteEditor.vue')['default']
NoteReferences: typeof import('./src/components/Note/NoteReferences.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'] TopBar: typeof import('./src/components/TopBar.vue')['default']
UIButton: typeof import('./src/components/ui/UIButton.vue')['default'] UIButton: typeof import('./src/components/ui/UIButton.vue')['default']
UIButtonGroup: typeof import('./src/components/ui/UIButtonGroup.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'] UIModal: typeof import('./src/components/ui/UIModal.vue')['default']
UITable: typeof import('./src/components/ui/UITable.vue')['default'] UITable: typeof import('./src/components/ui/UITable.vue')['default']
UITextInput: typeof import('./src/components/ui/UITextInput.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" ref="queryElem"
@keydown="handleKeydown" @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"> <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"> <div class="max-h-[320px] w-full overflow-y-auto">
<template v-if="results.length > 0"> <template v-if="results.length > 0">

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

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

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

@@ -66,11 +66,3 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
</div> </div>
</div> </div>
</template> </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> </script>
<template> <template>
<button class="btn" :class="styleClass"><slot></slot></button> <button class="btn duration-0" :class="styleClass"><slot></slot></button>
</template> </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> </p>
<div class="modal-action"> <div class="modal-action">
<slot name="actions" v-bind="slotProps"> <slot name="actions" v-bind="slotProps">
<button class="btn-sm btn" @click="close">Close</button> <UIButton size="sm" @click="close">Close</UIButton>
</slot> </slot>
</div> </div>
</div> </div>

4
src/style.scss
View File

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