refactor: MenuWrapper to ButtonGroup (#59)

src/UserInterface/ToolBar/components/MenuWrapper.vue → src/UserInterface/ToolBar/components/ButtonGroup.vue

@@ -7,6 +7,6 @@ const { name } = defineProps<{
 <template>
   <div class="inline-flex flex-col-reverse justify-between items-center px-2 border-r">
     <div class="text-2xs">{{ name }}</div>
-    <slot />
+    <slot></slot>
   </div>
 </template>

src/UserInterface/ToolBar/components/Draw/Tools.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { Pencil } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 import { toolBox } from '@Kernel/index'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.draw.tools.title')">
+  <ButtonGroup :name="$t('ToolBar.draw.tools.title')">
     <button class="menu-btn flex flex-col items-center" @click="toolBox.events.toolChange.emit('Pen')">
       <Pencil theme="outline" size="32" fill="#333" :strokeWidth="2" />
       <span class="text-xs mt-1">{{ $t('ToolBar.draw.tools.pen') }}</span>
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Home/Clipboard.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { Notepad, CuttingOne, CopyOne, Format } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.clipboard.title')">
+  <ButtonGroup :name="$t('ToolBar.home.clipboard.title')">
     <div class="flex">
       <button class="menu-btn flex flex-col items-center justify-center">
         <notepad theme="two-tone" size="32" :fill="['#C43E1C', '#FFF']" :strokeWidth="2" />
@@ -25,5 +25,5 @@ import MenuWrapper from '../MenuWrapper.vue'
         </button>
       </div>
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Home/Delete.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Close } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 import { selectionManager, slideManager } from '@Kernel/index'
 import { shallowRef } from 'vue'
 
@@ -18,10 +18,10 @@ const removeBlock = () => {
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.delete')">
+  <ButtonGroup :name="$t('ToolBar.home.delete')">
     <button class="menu-btn flex flex-col items-center" @click="removeBlock">
       <close theme="outline" size="32" fill="#ED3D3B" :strokeWidth="2" />
       <span class="text-xs mt-1">{{ $t('ToolBar.home.delete') }}</span>
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Home/Draw.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { Stickers, BackgroundColor, Copy, Platte, GraphicDesign, BringToFrontOne } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.drawing.title')">
+  <ButtonGroup :name="$t('ToolBar.home.drawing.title')">
     <div class="flex">
       <button class="menu-btn flex flex-col items-center justify-center">
         <graphic-design theme="two-tone" size="32" :fill="['#333', '#83BEEC']" :strokeWidth="1" />
@@ -33,5 +33,5 @@ import MenuWrapper from '../MenuWrapper.vue'
         </button>
       </div>
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Home/Edit.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { Search, DataSwitching } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.editing.title')">
+  <ButtonGroup :name="$t('ToolBar.home.editing.title')">
     <div class="flex flex-col">
       <button class="menu-btn py-0 pb-[2px] text-left">
         <search theme="outline" size="18" fill="#333" :strokeWidth="2" />
@@ -15,5 +15,5 @@ import MenuWrapper from '../MenuWrapper.vue'
         <span class="text-xs ml-1">{{ $t('ToolBar.home.editing.replace') }}</span>
       </button>
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Home/FontStyle.vue

@@ -8,7 +8,7 @@ import {
   TextUnderline,
   Strikethrough,
 } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 import { richTextObserver, selectionManager } from '@Kernel/index'
 import { intersectAttributes } from '@Utils/intersectAttributes'
 import { ref } from 'vue'
@@ -55,7 +55,7 @@ richTextObserver.on(async (newState) => {
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.font.title')">
+  <ButtonGroup :name="$t('ToolBar.home.font.title')">
     <div class="max-w-[320px] flex flex-wrap items-center text-xs">
       <div class="mr-1 mt-1 mb-2">
         <select
@@ -129,5 +129,5 @@ richTextObserver.on(async (newState) => {
       <input type="color" @input="(event) => format('color', (event.target as HTMLInputElement).value)" />
       <input type="color" @input="(event) => format('background', (event.target as HTMLInputElement).value)" />
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Home/Paragraph.vue

@@ -10,7 +10,7 @@ import {
   AlignTextRight,
   AlignTextCenter,
 } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 import { AlignType, TextBoxBlock } from '@BlockHub/TextBoxBlock/TextBoxBlock'
 import { selectionManager } from '@Kernel/index'
 import { ref, shallowRef } from 'vue'
@@ -54,7 +54,7 @@ const updateAlign = (value: AlignType) => {
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.paragraph.title')">
+  <ButtonGroup :name="$t('ToolBar.home.paragraph.title')">
     <div class="max-w-[170px] flex flex-wrap items-center text-xs pt-1">
       <!-- <button class="menu-btn">
         <list-checkbox theme="two-tone" size="24" :fill="['#333', '#43CCF8']" :strokeWidth="2" />
@@ -96,5 +96,5 @@ const updateAlign = (value: AlignType) => {
         <align-text-both size="24" :strokeWidth="2" />
       </button> -->
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Home/Slides.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { Slide, Copy } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 import { slideManager } from '@Kernel/index'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.slides.title')">
+  <ButtonGroup :name="$t('ToolBar.home.slides.title')">
     <div class="flex items-start">
       <button class="menu-btn flex flex-col items-center" @click="slideManager.insertSlide()">
         <Slide theme="multi-color" size="32" :fill="['#333', '#FFF', '#379E4E', '#379E4E']" :strokeWidth="2" />
@@ -16,5 +16,5 @@ import { slideManager } from '@Kernel/index'
         <span class="text-xs ml-1">{{ $t('ToolBar.home.slides.duplicate') }}</span>
       </button> -->
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Home/UndoRedo.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { history } from '@Kernel/index'
 import { Undo, Redo } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 
 const canUndo = ref(false)
 const canRedo = ref(false)
@@ -13,7 +13,7 @@ history.events.update.on(() => {
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.home.undo')">
+  <ButtonGroup :name="$t('ToolBar.home.undo')">
     <div class="flex flex-col">
       <button class="menu-btn" @click="history.undo" :disabled="!canUndo">
         <undo theme="outline" size="20" :strokeWidth="2" />
@@ -22,5 +22,5 @@ history.events.update.on(() => {
         <redo theme="outline" size="20" :strokeWidth="2" />
       </button>
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Insert/Comments.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
 import { Comment, Down } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.comments.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.comments.title')">
     <button class="flex flex-col items-center py-0 menu-btn">
-      <Comment class="mb-1" theme="multi-color" size="32" :fill="['#333', '#83beec', '#FFF', '#43CCF8']" :strokeWidth="2" />
+      <Comment
+        class="mb-1"
+        theme="multi-color"
+        size="32"
+        :fill="['#333', '#83beec', '#FFF', '#43CCF8']"
+        :strokeWidth="2"
+      />
       <span class="text-xs">{{ $t('ToolBar.insert.comments.btnName') }}</span>
       <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Insert/Footer.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
-import { DocDetail, Down } from '@icon-park/vue-next';
-import MenuWrapper from '../MenuWrapper.vue'
+import { DocDetail, Down } from '@icon-park/vue-next'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.footer.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.footer.title')">
     <button class="flex flex-col items-center py-0 menu-btn">
-      <DocDetail class="mb-1" theme="multi-color" size="32" :fill="['#333' ,'#83beec' ,'#FFF' ,'#43CCF8']" :strokeWidth="2"/>
+      <DocDetail
+        class="mb-1"
+        theme="multi-color"
+        size="32"
+        :fill="['#333', '#83beec', '#FFF', '#43CCF8']"
+        :strokeWidth="2"
+      />
       <span class="text-xs">{{ $t('ToolBar.insert.footer.title') }}</span>
-      <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2"/>
+      <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Insert/Illustration.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { GraphicDesign, PictureAlbum, Down, Outdoor, GameEmoji } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.illustration.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.illustration.title')">
     <div class="flex">
       <button class="flex flex-col items-center justify-center py-0 menu-btn">
         <GraphicDesign theme="two-tone" size="32" :fill="['#333', '#83BEEC']" :strokeWidth="1" />
@@ -25,5 +25,5 @@ import MenuWrapper from '../MenuWrapper.vue'
         <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
       </button>
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Insert/Link.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
-import { LinkTwo, Down } from '@icon-park/vue-next';
-import MenuWrapper from '../MenuWrapper.vue'
+import { LinkTwo, Down } from '@icon-park/vue-next'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.link.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.link.title')">
     <button class="flex flex-col items-center py-0 menu-btn">
-      <LinkTwo class="mb-1" theme="multi-color" size="32" :fill="['#333' ,'#83beec' ,'#FFF' ,'#43CCF8']" :strokeWidth="2"/>
+      <LinkTwo
+        class="mb-1"
+        theme="multi-color"
+        size="32"
+        :fill="['#333', '#83beec', '#FFF', '#43CCF8']"
+        :strokeWidth="2"
+      />
       <span class="text-xs">{{ $t('ToolBar.insert.link.title') }}</span>
-      <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2"/>
+      <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Insert/Media.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { Down, SpeakerOne, Video } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.media.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.media.title')">
     <div class="flex">
       <button class="flex flex-col items-center justify-center -mt-4 menu-btn">
-        <SpeakerOne theme="outline" size="32" fill="#333" :strokeWidth="2"/>
+        <SpeakerOne theme="outline" size="32" fill="#333" :strokeWidth="2" />
         <span class="mt-1 text-xs">{{ $t('ToolBar.insert.media.audio') }}</span>
       </button>
       <button class="flex flex-col items-center justify-center py-0 menu-btn">
-        <Video theme="outline" size="32" fill="#333" :strokeWidth="2"/>
+        <Video theme="outline" size="32" fill="#333" :strokeWidth="2" />
         <span class="mt-1 text-xs">{{ $t('ToolBar.insert.media.video') }}</span>
-        <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2"/>
+        <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
       </button>
     </div>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Insert/Picture.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Pic, Down } from '@icon-park/vue-next'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 import { pickFile } from '@Utils/pickFile'
 import { PictureBlock } from '@BlockHub/PictureBlock/PictureBlock'
 import { slideManager } from '@Kernel/index'
@@ -16,11 +16,11 @@ async function insertPicture() {
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.picture.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.picture.title')">
     <button class="flex flex-col items-center py-0 menu-btn" @click="insertPicture">
       <Pic class="mb-1" theme="multi-color" size="32" :fill="['#333', '#83beec', '#FFF', '#43CCF8']" :strokeWidth="2" />
       <span class="text-xs">{{ $t('ToolBar.insert.picture.btnName') }}</span>
       <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Insert/Slides.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { Slide } from '@icon-park/vue-next'
 import { slideManager } from '@Kernel/index'
-import MenuWrapper from '../MenuWrapper.vue'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.slides.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.slides.title')">
     <button class="menu-btn flex flex-col items-center" @click="slideManager.insertSlide()">
       <Slide theme="multi-color" size="32" :fill="['#333', '#FFF', '#379E4E', '#379E4E']" :strokeWidth="2" />
       <span class="text-xs mt-1">{{ $t('ToolBar.home.slides.add') }}</span>
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>

src/UserInterface/ToolBar/components/Insert/Symbol.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { Symbol, Down } from '@icon-park/vue-next';
-import MenuWrapper from '../MenuWrapper.vue'
+import { Symbol, Down } from '@icon-park/vue-next'
+import ButtonGroup from '../ButtonGroup.vue'
 </script>
 
 <template>
-  <MenuWrapper :name="$t('ToolBar.insert.symbol.title')">
+  <ButtonGroup :name="$t('ToolBar.insert.symbol.title')">
     <button class="flex flex-col items-center py-0 menu-btn">
-      <Symbol class="mb-1" theme="outline" size="32" fill="#333" :strokeWidth="2"/>
+      <Symbol class="mb-1" theme="outline" size="32" fill="#333" :strokeWidth="2" />
       <span class="text-xs">{{ $t('ToolBar.insert.symbol.title') }}</span>
-      <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2"/>
+      <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
     </button>
-  </MenuWrapper>
+  </ButtonGroup>
 </template>