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: init publishwidge

Browse source
This commit is contained in:
Seviche CC 2023-04-01 23:03:21 +08:00
parent ec3d01960a
commit 10b15e3b9f
Signed by: SevicheCC
GPG key ID: C577000000000000
3 changed files with 68 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
components.d.ts vendored
View file

@ -12,5 +12,6 @@ declare module '@vue/runtime-core' {
BubbleMenu: typeof import('./src/components/tiptap/BubbleMenu.vue')['default']
CommandsList: typeof import('./src/components/tiptap/CommandsList.vue')['default']
Editor: typeof import('./src/components/tiptap/Editor.vue')['default']
PublishWidget: typeof import('./src/components/publish/PublishWidget.vue')['default']
}
}

9
src/components/Tiptap/Editor.vue
View file

@ -93,15 +93,20 @@ const editor = useEditor({
autofocus: true,
editorProps: {
attributes: {
class: 'prose prose-slate mx-auto',
class: 'prose prose-slate p-5 focus:outline-none bg-white rounded-box max-w-3xl',
},
},
})
</script>
<template>
<div
class="shadow-lg flex flex-col items-center bg-slate-100 max-w-3xl mx-auto p-4 rounded-box"
>
<BubbleMenu v-if="editor" :editor="editor" />
<EditorContent :editor="editor" />
<PublishWidget />
</div>
</template>
<style lang="scss">
@ -115,7 +120,7 @@ const editor = useEditor({
}
/* Placeholder (on every new line) */
.ProseMirror :where(p.is-empty,h1.is-empty,h2.is-empty,h3.is-empty)::before {
.ProseMirror :where(p.is-empty, h1.is-empty, h2.is-empty, h3.is-empty)::before {
content: attr(data-placeholder);
float: left;
color: #adb5bd;

58
src/components/publish/PublishWidget.vue Normal file
View file

@ -0,0 +1,58 @@
<script lang="ts" setup>
interface Action {
name: string
icon: string
}
const actions: Action[] = [
{
name: 'file',
icon: 'i-tabler-paperclip',
}, {
name: 'poll',
icon: 'i-tabler-chart-bar',
},
{
name: 'emoji-picker',
icon: 'i-tabler-mood-smile-beam',
},
{
name: 'schedule',
icon: 'i-tabler-calendar-time',
},
{
name: 'content-warning',
icon: 'i-tabler-alert-triangle',
},
]
</script>
<template>
<div class="flex justify-between w-full content-between items-center">
<div>
<button v-for="{ name, icon } in actions" :key="name" class="btn btn-ghost btn-square">
<span :class="icon" class="w-5 h-5" />
</button>
</div>
<div class="flex items-center gap-1">
<div class="dropdown dropdown-bottom dropdown-end menu-compact">
<label tabindex="0" class="btn btn-sm btn-ghost gap-1">中文<span class="i-tabler-chevron-down" /></label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<div class="dropdown dropdown-bottom dropdown-end menu-compact">
<label tabindex="0" class="btn btn-sm btn-ghost gap-1"><span class="i-tabler-world w-5 h-5" /><span class="i-tabler-chevron-down" /></label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<button class="btn btn-sm gap-2">
<span class="i-tabler-send" />
Post
</button>
</div>
</div>
</template>