From 7c1e74ff390e7c7bbbbff00ff33aa0c4ff646afa Mon Sep 17 00:00:00 2001
From: Marco Crapts <marco.crapts@kpn.com>
Date: Fri, 26 May 2023 17:32:43 +0200
Subject: [PATCH] more ui components

---
 components.d.ts                      |  4 +--
 src/components/Search/SearchBar.vue  |  2 +-
 src/components/TopBar/Settings.vue   | 49 ++++++++++++----------------
 src/components/ViewModes/Note.vue    |  8 -----
 src/components/ui/UIButton.vue       |  2 +-
 src/components/ui/UIDropdown.vue     | 11 +++++++
 src/components/ui/UIDropdownItem.vue |  5 +++
 src/components/ui/UIModal.vue        |  2 +-
 src/style.scss                       |  4 ---
 9 files changed, 41 insertions(+), 46 deletions(-)
 create mode 100644 src/components/ui/UIDropdown.vue
 create mode 100644 src/components/ui/UIDropdownItem.vue

diff --git a/components.d.ts b/components.d.ts
index caee15b..93e984d 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -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']
diff --git a/src/components/Search/SearchBar.vue b/src/components/Search/SearchBar.vue
index 699afe1..8ab1806 100644
--- a/src/components/Search/SearchBar.vue
+++ b/src/components/Search/SearchBar.vue
@@ -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">
diff --git a/src/components/TopBar/Settings.vue b/src/components/TopBar/Settings.vue
index ce885fd..032a2e9 100644
--- a/src/components/TopBar/Settings.vue
+++ b/src/components/TopBar/Settings.vue
@@ -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">
-        <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
-          )"
+    <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" />
+        </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>
+          <i class="fa-fw fa-solid fa-database" />
+          {{ sourceLabels[source] }}
+        </UIDropdownItem>
         <UIModal>
           <template #activator="{ open }">
-            <li @click="open" class="text-base">
-              <a>
-                <i class="fa-fw fa-solid fa-right-from-bracket" />
-                Sign out
-              </a>
-            </li>
+            <UIDropdownItem @click="open">
+              <i class="fa-fw fa-solid fa-right-from-bracket" />
+              Sign out
+            </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>
diff --git a/src/components/ViewModes/Note.vue b/src/components/ViewModes/Note.vue
index 5356126..b989819 100644
--- a/src/components/ViewModes/Note.vue
+++ b/src/components/ViewModes/Note.vue
@@ -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>
diff --git a/src/components/ui/UIButton.vue b/src/components/ui/UIButton.vue
index b9b924a..b05f92c 100644
--- a/src/components/ui/UIButton.vue
+++ b/src/components/ui/UIButton.vue
@@ -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>
diff --git a/src/components/ui/UIDropdown.vue b/src/components/ui/UIDropdown.vue
new file mode 100644
index 0000000..4108b5f
--- /dev/null
+++ b/src/components/ui/UIDropdown.vue
@@ -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>
diff --git a/src/components/ui/UIDropdownItem.vue b/src/components/ui/UIDropdownItem.vue
new file mode 100644
index 0000000..9f19670
--- /dev/null
+++ b/src/components/ui/UIDropdownItem.vue
@@ -0,0 +1,5 @@
+<template>
+  <li class="text-base">
+    <a><slot></slot></a>
+  </li>
+</template>
diff --git a/src/components/ui/UIModal.vue b/src/components/ui/UIModal.vue
index f79d4ce..c971eb0 100644
--- a/src/components/ui/UIModal.vue
+++ b/src/components/ui/UIModal.vue
@@ -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>
diff --git a/src/style.scss b/src/style.scss
index a23cb66..29f833a 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -42,10 +42,6 @@ p:last-child {
   @apply my-0;
 }
 
-.btn {
-  animation-duration: 0s;
-}
-
 .ck-body-wrapper {
   height: 0;
 }