From 846236203323f736d0d02cc7c2fe0b664a701828 Mon Sep 17 00:00:00 2001
From: Seviche <me@seviche.cc>
Date: Sat, 1 Apr 2023 18:27:16 +0800
Subject: [PATCH] feat: add style to slashmenu

---
 src/components/Tiptap/CommandsList.vue | 57 +++++---------------------
 src/components/Tiptap/suggestion.js    |  6 +--
 tailwind.config.ts                     |  3 ++
 3 files changed, 16 insertions(+), 50 deletions(-)

diff --git a/src/components/Tiptap/CommandsList.vue b/src/components/Tiptap/CommandsList.vue
index dc7879c..a7a54eb 100644
--- a/src/components/Tiptap/CommandsList.vue
+++ b/src/components/Tiptap/CommandsList.vue
@@ -69,52 +69,15 @@ export default {
 </script>
 
 <template>
-  <div class="items">
-    <template v-if="items.length">
-      <div
-        v-for="(item, index) in items"
-        :key="index"
-        class="item"
-        :class="{ 'is-selected': index === selectedIndex }"
-        @click="selectItem(index)"
-      >
-        <span :class="item.icon" />
-        {{ item.title }}
-      </div>
-    </template>
-    <div v-else class="item">
-      No result
-    </div>
+  <div v-if="items.length" class="menu menu-compact bg-white w-44 p-1 rounded-lg shadow-lg  border-slate-200 border ">
+    <li
+      v-for="(item, index) in items"
+      :key="index"
+      class="rounded-lg"
+      :class="{ 'active bg-slate-200': index === selectedIndex }"
+      @click="selectItem(index)"
+    >
+      <a class="hover:bg-slate-200 text-slate-900 active:bg-slate-300"><span :class="item.icon" class="h-4 w-4" />{{ item.title }}</a>
+    </li>
   </div>
 </template>
-
-<style lang="scss">
-.items {
-  padding: 0.2rem;
-  position: relative;
-  border-radius: 0.5rem;
-  background: #FFF;
-  color: rgba(0, 0, 0, 0.8);
-  overflow: hidden;
-  font-size: 0.9rem;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.05),
-    0px 10px 20px rgba(0, 0, 0, 0.1),
-  ;
-}
-
-.item {
-  display: block;
-  margin: 0;
-  width: 100%;
-  text-align: left;
-  background: transparent;
-  border-radius: 0.4rem;
-  border: 1px solid transparent;
-  padding: 0.2rem 0.4rem;
-
-  &.is-selected {
-    border-color: #000;
-  }
-}
-</style>
diff --git a/src/components/Tiptap/suggestion.js b/src/components/Tiptap/suggestion.js
index 205a660..46d1d8a 100644
--- a/src/components/Tiptap/suggestion.js
+++ b/src/components/Tiptap/suggestion.js
@@ -9,7 +9,7 @@ export default {
   items: ({ query }) => {
     return [
       {
-        title: 'H1',
+        title: 'Heading 1',
         icon: 'i-tabler-h-1',
         command: ({ editor, range }) => {
           editor
@@ -21,7 +21,7 @@ export default {
         },
       },
       {
-        title: 'H2',
+        title: 'Heading 2',
         icon: 'i-tabler-h-2',
         command: ({ editor, range }) => {
           editor
@@ -33,7 +33,7 @@ export default {
         },
       },
       {
-        title: 'H3',
+        title: 'Heading 3',
         icon: 'i-tabler-h-3',
         command: ({ editor, range }) => {
           editor
diff --git a/tailwind.config.ts b/tailwind.config.ts
index c3a5b53..31e2243 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,4 +13,7 @@ export default {
       collections: getIconCollections(['tabler']),
     }),
   ],
+  daisyui: {
+    themes: false,
+  },
 } satisfies Config