refactor to ui components

components.d.ts

@@ -11,6 +11,7 @@ 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']
@@ -31,5 +32,10 @@ declare module '@vue/runtime-core' {
     SkeletonTopBar: typeof import('./src/components/Skeleton/SkeletonTopBar.vue')['default']
     Spinner: typeof import('./src/components/Spinner.vue')['default']
     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']
+    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']
   }
 }

src/App.vue

@@ -95,7 +95,7 @@ provide('loading', loading)
       <SkeletonNote v-else />
     </main>
   </div>
-  <Modal :open="passphraseRequired" :persistent="true">
+  <UIModal :open="passphraseRequired" :persistent="true">
     <template #title>Enter your passphrase</template>
     <template #default="{ close }">
       <p>
@@ -118,9 +118,9 @@ provide('loading', loading)
       </div>
     </template>
     <template #actions="{ close }">
-      <button class="btn-primary btn-sm btn" @click="submitPassphrase(close)">Submit</button>
+      <UIButton color="primary" size="sm" @click="submitPassphrase(close)">Submit</UIButton>
     </template>
-  </Modal>
+  </UIModal>
 </template>
 <style scoped>
 .sidebar-enter-from,

src/components/Note/NoteToolbar.vue

@@ -12,35 +12,31 @@ const emit = defineEmits<{
     <h1 class="flex flex-grow items-center rounded-md text-3xl font-semibold hover:bg-gray-200">
       <slot name="title"></slot>
     </h1>
-    <div class="btn-group flex items-center" v-if="!props.note.isRoot">
+    <UIButtonGroup class="flex items-center" v-if="!props.note.isRoot">
-      <Modal>
+      <UIModal>
         <template #activator="{ open }">
-          <button class="btn-toolbar btn-sm btn" @click="open">
+          <UIButton size="sm" @click="open"><i class="fas fa-fw fa-trash" /></UIButton>
-            <i class="fas fa-fw fa-trash" />
-          </button>
         </template>
         <template #title>Delete note</template>
         <template #default>Are you sure you want to delete this note?</template>
         <template #actions="{ close }">
-          <button class="btn-primary btn-sm btn" @click="emit('delete', close)">Delete note</button>
+          <UIButton size="sm" color="primary" @click="emit('delete', close)">Delete notes</UIButton>
-          <button class="btn-sm btn" @click="close">Cancel</button>
+          <UIButton size="sm" @click="close">Cancel</UIButton>
         </template>
-      </Modal>
+      </UIModal>
-      <Modal>
+      <UIModal>
         <template #activator="{ open }">
-          <button class="btn-toolbar btn-sm btn" @click="open">
+          <UIButton size="sm" @click="open"><i class="fas fa-fw fa-sitemap" /></UIButton>
-            <i class="fas fa-fw fa-sitemap" />
-          </button>
         </template>
         <template #title>Set root note</template>
         <template #default>Are you sure you want to set this note as root note?</template>
         <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="emit('setRoot', close)">
+          <UIButton size="sm" color="primary" @click="emit('setRoot', close)">
             Set current note as root
-          </button>
+          </UIButton>
         </template>
-      </Modal>
+      </UIModal>
-    </div>
+    </UIButtonGroup>
   </div>
 </template>

src/components/TopBar.vue

@@ -19,10 +19,7 @@ const authUI: any = inject('firebaseAuthUI')
 const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
 </script>
 <template>
-  <div
+  <div class="z-[500] flex h-[50px] bg-primary" :class="searchActive && 'search-active'">
-    class="z-[500] flex h-[50px] bg-primary"
-    :class="searchActive && 'search-active'"
-  >
     <div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
       <div
         class="search-active-hide flex items-center pl-3"
@@ -41,29 +38,33 @@ const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
       <div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3">
         <template v-if="!loading">
           <SearchBar @active="(active) => (searchActive = active)" />
-          <button
+          <UIButton
-            class="search-active-hide btn-outline btn-sm btn py-1 text-white"
+            size="sm"
+            variant="outline"
+            class="search-active-hide py-1 text-white"
             @click="addNote('Untitled new note', '', true)"
           >
             <i class="fas fa-plus-circle text-[1.1rem]" />
-          </button>
+          </UIButton>
-          <Modal v-if="initialized && !user" :open="authModalInitialStateOpen">
+          <UIModal v-if="initialized && !user" :open="authModalInitialStateOpen">
             <template #activator="{ open }">
-              <button
+              <UIButton
-                class="search-active-hide btn-outline btn-sm btn py-1 text-white"
+                size="sm"
+                variant="outline"
+                class="search-active-hide py-1 text-white"
                 @click="open"
               >
                 Sign in
-              </button>
+              </UIButton>
             </template>
             <template #title>Sign in</template>
             <template #default="{ close }">
               <Auth @signedIn="close" />
             </template>
             <template #actions="{ close }">
-              <button class="btn-sm btn" @click="close">Close</button>
+              <UIButton size="sm" @click="close">Close</UIButton>
             </template>
-          </Modal>
+          </UIModal>
           <Settings v-else-if="user" />
         </template>
         <SkeletonTopBar v-else />

src/components/TopBar/Hamburger.vue

@@ -41,80 +41,3 @@ const emit = defineEmits<{
   transition-duration: 0.2s;
 }
 </style>
-<!-- 
-$hamburger-layer-color: white;
-$hamburger-layer-width: 25px;
-$hamburger-layer-height: 3px;
-$hamburger-layer-spacing: 3px;
-$hamburger-padding-x: 0px;
-$hamburger-padding-y: 0px;
-$hamburger-scale-speed: calc(200ms / 0.22s);
-
-@import 'hamburgers/_sass/hamburgers/hamburgers.scss';
-@if index($hamburger-types, spin-r) {
-  /*
-    * Spin Reverse
-    */
-  .hamburger--spin-r {
-    .hamburger-inner {
-      transition-duration: ($hamburger-scale-speed * 0.22s);
-      transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-
-      &::before {
-        transition: top
-            ($hamburger-scale-speed * 0.1s)
-            ($hamburger-scale-speed * 0.25s)
-            ease-in,
-          opacity ($hamburger-scale-speed * 0.1s) ease-in;
-      }
-
-      &::after {
-        transition: bottom
-            ($hamburger-scale-speed * 0.1s)
-            ($hamburger-scale-speed * 0.25s)
-            ease-in,
-          transform
-            ($hamburger-scale-speed * 0.22s)
-            cubic-bezier(0.55, 0.055, 0.675, 0.19);
-      }
-    }
-
-    &.is-active {
-      .hamburger-inner {
-        transform: rotate(-225deg);
-        transition-delay: ($hamburger-scale-speed * 0.12s);
-        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-
-        &::before {
-          top: 0;
-          opacity: 0;
-          transition: top ($hamburger-scale-speed * 0.1s) ease-out,
-            opacity
-              ($hamburger-scale-speed * 0.1s)
-              ($hamburger-scale-speed * 0.12s)
-              ease-out;
-        }
-
-        &::after {
-          bottom: 0;
-          transform: rotate(90deg);
-          transition: bottom ($hamburger-scale-speed * 0.1s) ease-out,
-            transform
-              ($hamburger-scale-speed * 0.22s)
-              ($hamburger-scale-speed * 0.12s)
-              cubic-bezier(0.215, 0.61, 0.355, 1);
-        }
-      }
-    }
-  }
-}
-button.hamburger {
-  outline: none !important;
-  line-height: 1;
-  opacity: 0.9;
-  border-radius: 2rem;
-}
-.hamburger-box {
-  display: block;
-}
-</style> -->

src/components/TopBar/Settings.vue

@@ -45,7 +45,7 @@ const handleClick = (fn: (...args: any[]) => any) => {
             {{ sourceLabels[source] }}
           </a>
         </li>
-        <Modal>
+        <UIModal>
           <template #activator="{ open }">
             <li @click="open" class="text-base">
               <a>
@@ -63,7 +63,7 @@ const handleClick = (fn: (...args: any[]) => any) => {
             <button class="btn-sm btn" @click="close">Cancel</button>
             <button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
           </template>
-        </Modal>
+        </UIModal>
       </ul>
     </div>
   </OnClickOutside>

src/components/ViewModes/ListView.vue

@@ -41,26 +41,26 @@ const deleteSelectedNotes = (closeModal: () => void) => {
           <div class="whitespace-nowrap font-semibold">{{ countSelectedNotes }} selected</div>
         </template>
       </div>
-      <Modal v-if="countSelectedNotes > 0">
+      <UIModal v-if="countSelectedNotes > 0">
         <template #activator="{ open }">
-          <button class="btn-toolbar btn-sm btn" @click="open">Delete</button>
+          <UIButton size="sm" @click="open">Delete</UIButton>
         </template>
         <template #default>Are you sure you want to delete the selected notes?</template>
         <template #actions="{ close }">
-          <button class="btn-primary btn-sm btn" @click="deleteSelectedNotes(close)">
+          <UIButton size="sm" color="primary" @click="deleteSelectedNotes(close)">
             Delete selected notes
-          </button>
+          </UIButton>
-          <button class="btn-sm btn" @click="close">Close</button>
+          <UIButton size="sm" @click="close">Close</UIButton>
         </template>
-      </Modal>
+      </UIModal>
-      <input
+      <UITextInput
-        type="text"
+        size="sm"
-        placeholder="Start typing to filter"
-        class="input-bordered input input-sm my-1 ml-auto mr-1 max-w-xs flex-grow"
         v-model="filter"
-      />
+        placeholder="Start typing to filter"
+        class="my-1 ml-auto mr-1 max-w-xs flex-grow"
+      ></UITextInput>
     </div>
-    <table class="table-compact table w-full">
+    <UITable density="compact" class="w-full">
       <thead>
         <tr>
           <th class="w-[48px]"></th>
@@ -101,6 +101,6 @@ const deleteSelectedNotes = (closeModal: () => void) => {
           <td>{{ formatDate(note.modified) }}</td>
         </tr>
       </tbody>
-    </table>
+    </UITable>
   </div>
 </template>

src/components/ViewModes/Mindmap.vue

@@ -33,6 +33,8 @@ const renderMindmap = () => {
   const cy = cytoscape({
     container: mindmapCanvas,
     elements,
+    autoungrabify: true,
+    autounselectify: true,
     layout: {
       name: 'cose',
 

src/components/ui/UIButton.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+  size?: string
+  variant?: 'regular' | 'outline'
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  variant: 'regular',
+  color: 'regular'
+})
+
+const styleClass = computed(() => {
+  const sizeClass = `btn-${props.size}`
+  const variantClass = props.variant !== 'regular' ? `btn-${props.variant}` : ''
+  const colorClass = props.color !== 'regular' ? `btn-${props.color}` : ''
+  return [sizeClass, variantClass, colorClass]
+})
+</script>
+<template>
+  <button class="btn" :class="styleClass"><slot></slot></button>
+</template>

src/components/ui/UIButtonGroup.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="btn-group"><slot></slot></div>
+</template>

src/components/ui/UITable.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+interface Props {
+  density?: 'compact'
+}
+const props = defineProps<Props>()
+
+const styleClass = computed(() => {
+  const densityClass = props.density ? 'table-compact' : ''
+  return [densityClass]
+})
+</script>
+
+<template>
+  <table class="table" :class="styleClass"><slot></slot></table>
+</template>

src/components/ui/UITextInput.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface Props {
+  modelValue: any
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+const styleClass = computed(() => {
+  const sizeClass = `input-${props.size}`
+  return [sizeClass]
+})
+</script>
+<template>
+  <input
+    type="text"
+    :value="props.modelValue"
+    @input="emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
+    class="input-bordered input input-sm my-1 ml-auto mr-1 max-w-xs flex-grow"
+    :class="styleClass"
+  />
+</template>