refactor to UI components

components.d.ts

@@ -34,13 +34,15 @@ declare module '@vue/runtime-core' {
     UIBadge: typeof import('./src/components/ui/UIBadge.vue')['default']
     UIButton: typeof import('./src/components/ui/UIButton.vue')['default']
     UIButtonGroup: typeof import('./src/components/ui/UIButtonGroup.vue')['default']
-    UICard: typeof import('./src/components/ui/UICard.vue')['default']
     UIDropdown: typeof import('./src/components/ui/UIDropdown.vue')['default']
     UIDropdownItem: typeof import('./src/components/ui/UIDropdownItem.vue')['default']
+    UIInputCheckbox: typeof import('./src/components/ui/UIInputCheckbox.vue')['default']
+    UIInputText: typeof import('./src/components/ui/UIInputText.vue')['default']
     UIMenu: typeof import('./src/components/ui/UIMenu.vue')['default']
     UIMenuItem: typeof import('./src/components/ui/UIMenuItem.vue')['default']
     UIModal: typeof import('./src/components/ui/UIModal.vue')['default']
+    UITab: typeof import('./src/components/ui/UITab.vue')['default']
     UITable: typeof import('./src/components/ui/UITable.vue')['default']
-    UITextInput: typeof import('./src/components/ui/UITextInput.vue')['default']
+    UITabs: typeof import('./src/components/ui/UITabs.vue')['default']
   }
 }

src/App.vue

@@ -103,14 +103,14 @@ provide('loading', loading)
         notes.
       </p>
       <form @submit.prevent="submitPassphrase(close)">
-        <input
+        <UIInputText
           type="password"
-          class="input-bordered input mt-4 w-full"
+          class="w-full max-w-full"
-          :class="passphraseValid === false && 'input-error'"
+          :color="passphraseValid === false ? 'error' : 'regular'"
           v-model="passphrase"
-        />
+        ></UIInputText>
       </form>
-      <UIAlert color="error" class="mt-4">
+      <UIAlert color="error" class="mt-4" v-if="passphraseValid === false">
         <i class="fa-solid fa-triangle-exclamation"></i>
         The passphrase you entered is incorrect.
       </UIAlert>

src/components/Auth.vue

@@ -42,5 +42,5 @@ onMounted(() => ui.start('#auth', uiConfig))
 </script>
 <template>
   <div id="auth" v-show="!props.authenticating"></div>
-  <progress v-show="props.authenticating" class="progress progress-primary w-full"></progress>
+  <progress v-show="props.authenticating" class="dui-progress dui-progress-primary w-full"></progress>
 </template>

src/components/TopBar/Hamburger.vue

@@ -9,7 +9,7 @@ const emit = defineEmits<{
 </script>
 <template>
   <label
-    class="btn-ghost btn-sm btn-circle btn relative inline-grid cursor-pointer select-none place-content-center"
+    class="dui-btn-ghost dui-btn-sm dui-btn-circle dui-btn relative inline-grid cursor-pointer select-none place-content-center"
   >
     <input type="checkbox" @click="emit('toggleSideBar')" :checked="!props.sideBarCollapsed" />
     <svg

src/components/ViewModes/ListView.vue

@@ -53,12 +53,12 @@ const deleteSelectedNotes = (closeModal: () => void) => {
           <UIButton size="sm" @click="close">Close</UIButton>
         </template>
       </UIModal>
-      <UITextInput
+      <UIInputText
         size="sm"
         v-model="filter"
         placeholder="Start typing to filter"
         class="my-1 ml-auto mr-1 max-w-xs flex-grow"
-      ></UITextInput>
+      ></UIInputText>
     </div>
     <UITable density="compact" class="w-full">
       <thead>
@@ -74,17 +74,16 @@ const deleteSelectedNotes = (closeModal: () => void) => {
         <tr
           v-for="note in notesWithReferences"
           :key="note.id"
-          class="hover hover:cursor-pointer"
+          class="dui-hover hover:cursor-pointer"
           @click="setActiveNote(note.id)"
         >
           <th @click.stop="toggleRow(note)" class="text-center">
             <label>
-              <input
+              <UIInputCheckbox
-                type="checkbox"
+                color="primary"
-                class="checkbox-primary checkbox checkbox-sm border-secondary"
                 :checked="Boolean(selectedNotes[note.id])"
                 :disabled="note.isRoot"
-              />
+              ></UIInputCheckbox>
             </label>
           </th>
           <td>

src/components/ViewModes/Mindmap.vue

@@ -221,8 +221,11 @@ const mindmaps = computed<Mindmap[]>(() => {
   }, [] as string[][])
   return mindmaps
     .filter((mindmap) => mindmap.length > 1)
+    .sort((a, b) => b.length - a.length)
     .sort((a, b) => {
-      return a.includes(rootNote.value?.id || '') ? b.length - a.length : 1
+      return (
+        Number(b.includes(rootNote.value?.id || '')) - Number(a.includes(rootNote.value?.id || ''))
+      )
     })
     .slice(0, 5)
     .map((mindmap): Mindmap => {
@@ -270,18 +273,17 @@ const links = computed(() => {
 </script>
 <template>
   <div class="flex h-full flex-grow flex-col">
-    <div class="tabs">
+    <UITabs>
-      <a
+      <UITab
-        class="tab-bordered tab-lifted tab tab-md"
-        :class="mindmap.id === selectedMindmap?.id && 'tab-active !border-primary text-primary'"
         v-for="mindmap in mindmaps"
         :key="mindmap.id"
+        :active="mindmap.id === selectedMindmap?.id"
         @click="selectedMindmap = mindmap"
       >
         <i class="fas fa-fw fa-home root mr-1" v-if="mindmap.isRoot" />
         {{ mindmap.notes.length }} notes
-      </a>
+      </UITab>
-    </div>
+    </UITabs>
     <div id="mindmap" ref="mindmapElement" class="h-full"></div>
   </div>
 </template>

src/components/ui/UIAlert.vue

@@ -7,12 +7,18 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const styleClass = computed(() => {
-  const colorClass = `dui-alert-${props.color}`
+  const colorVariants = {
+    'info': 'dui-alert-info',
+    'success': 'dui-alert-success',
+    'warning': 'dui-alert-warning',
+    'error': 'dui-alert-error'
+  }
+  const colorClass = colorVariants[props.color]
   return [colorClass]
 })
 </script>
 <template>
-  <div class="dui-alert shadow-lg" :class="styleClass">
+  <div class="dui-alert shadow-lg items-start" :class="styleClass">
-    <div><slot></slot></div>
+    <div class="flex items-center"><slot></slot></div>
   </div>
 </template>

src/components/ui/UIBadge.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 interface Props {
-  size: 'xs' | 'sm' | 'md' | 'lg'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
   variant?: 'regular' | 'outline' | 'ghost'
 }
 

src/components/ui/UIInputCheckbox.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  modelValue?: any
+  color?: 'regular' | 'primary'
+  checked?: boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'regular'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+const styleClass = computed(() => {
+  const colorVariants = {
+    regular: '',
+    primary: 'dui-checkbox-primary'
+  }
+  const colorClass = colorVariants[props.color]
+  return [colorClass]
+})
+</script>
+<template>
+  <input
+    type="checkbox"
+    class="dui-checkbox dui-checkbox-sm border-secondary"
+    :class="styleClass"
+    :checked="props.modelValue"
+    @change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
+    :disabled="props.disabled"
+  />
+</template>

src/components/ui/UIInputText.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 interface Props {
-  modelValue: any
+  modelValue?: any
   size?: 'xs' | 'sm' | 'md' | 'lg'
+  color?: 'regular' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  size: 'md'
+  size: 'md',
+  color: 'regular'
 })
 
 const emit = defineEmits<{
@@ -14,13 +16,23 @@ const emit = defineEmits<{
 
 const styleClass = computed(() => {
   const sizeVariants = {
-    'xs': 'dui-input-xs',
+    xs: 'dui-input-xs',
-    'sm': 'dui-input-sm',
+    sm: 'dui-input-sm',
-    'md': 'dui-input-md',
+    md: 'dui-input-md',
-    'lg': 'dui-input-lg'
+    lg: 'dui-input-lg'
+  }
+  const colorVariants = {
+    regular: '',
+    primary: 'dui-input-primary',
+    secondary: 'dui-input-secondary',
+    info: 'dui-input-info',
+    success: 'dui-input-success',
+    warning: 'dui-input-warning',
+    error: 'dui-input-error'
   }
   const sizeClass = sizeVariants[props.size]
-  return [sizeClass]
+  const colorClass = colorVariants[props.color]
+  return [sizeClass, colorClass]
 })
 </script>
 <template>

src/components/ui/UIModal.vue

@@ -36,13 +36,13 @@ if (!props.persistent) onClickOutside(modalBox, () => close())
 
 const onEnter = (el: Element, done: () => void): void => {
   setTimeout(() => {
-    el.classList.add('modal-open')
+    el.classList.add('dui-modal-open')
     done()
   })
 }
 
 const onLeave = (el: Element, done: () => void): void => {
-  el.classList.remove('modal-open')
+  el.classList.remove('dui-modal-open')
   el.addEventListener('transitionend', () => done())
 }
 

src/components/ui/UITab.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+interface Props {
+  active?: boolean
+}
+
+const props = defineProps<Props>()
+
+const styleClass = computed(() => {
+  const activeClass = props.active && 'dui-tab-active !border-primary text-primary'
+  return [activeClass]
+})
+</script>
+<template>
+  <a class="dui-tab-bordered dui-tab-lifted dui-tab dui-tab-md" :class="styleClass">
+    <slot></slot>
+  </a>
+</template>

src/components/ui/UITabs.vue

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