SevicheCC/Seigwai
1
0
Fork 0
mirror of https://codeberg.org/Sevichecc/Seigwai.git synced 2025-04-30 07:49:30 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat: add style to slashmenu

Browse source
This commit is contained in:
Seviche CC 2023-04-01 18:27:16 +08:00
parent 2852e44cde
commit 8462362033
Signed by: SevicheCC
GPG key ID: C577000000000000
3 changed files with 16 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/components/Tiptap/CommandsList.vue
View file

@ -69,52 +69,15 @@ export default {
</script> </script>
<template> <template>
<div class="items"> <div v-if="items.length" class="menu menu-compact bg-white w-44 p-1 rounded-lg shadow-lg border-slate-200 border ">
<template v-if="items.length"> <li
<div
v-for="(item, index) in items" v-for="(item, index) in items"
:key="index" :key="index"
class="item" class="rounded-lg"
:class="{ 'is-selected': index === selectedIndex }" :class="{ 'active bg-slate-200': index === selectedIndex }"
@click="selectItem(index)" @click="selectItem(index)"
> >
<span :class="item.icon" /> <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>
{{ item.title }} </li>
</div>
</template>
<div v-else class="item">
No result
</div>
</div> </div>
</template> </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>

6
src/components/Tiptap/suggestion.js
View file

@ -9,7 +9,7 @@ export default {
items: ({ query }) => { items: ({ query }) => {
return [ return [
{ {
title: 'H1', title: 'Heading 1',
icon: 'i-tabler-h-1', icon: 'i-tabler-h-1',
command: ({ editor, range }) => { command: ({ editor, range }) => {
editor editor
@ -21,7 +21,7 @@ export default {
}, },
}, },
{ {
title: 'H2', title: 'Heading 2',
icon: 'i-tabler-h-2', icon: 'i-tabler-h-2',
command: ({ editor, range }) => { command: ({ editor, range }) => {
editor editor
@ -33,7 +33,7 @@ export default {
}, },
}, },
{ {
title: 'H3', title: 'Heading 3',
icon: 'i-tabler-h-3', icon: 'i-tabler-h-3',
command: ({ editor, range }) => { command: ({ editor, range }) => {
editor editor

3
tailwind.config.ts
View file

@ -13,4 +13,7 @@ export default {
collections: getIconCollections(['tabler']), collections: getIconCollections(['tabler']),
}), }),
], ],
daisyui: {
themes: false,
},
} satisfies Config } satisfies Config