refactor: use separate components

src/components/email-components/EDivider.vue

@@ -0,0 +1,28 @@
+<template>
+  <MRow>
+    <MColumn
+      class="p-hover-tools"
+      :class="{
+        'p-edit-tool': editableId === id && editableToolName === 'Divider',
+      }"
+    >
+      <MHr :style="{ borderColor: color }" />
+    </MColumn>
+  </MRow>
+</template>
+
+<script setup lang="ts">
+import { useComponentsStore } from '@/store/components'
+
+interface Props {
+  id: string
+  group: string
+  color?: string
+}
+
+defineProps<Props>()
+
+const { editableId, editableToolName } = useComponentsStore()
+</script>
+
+<style lang="scss" scoped></style>

src/components/email-components/EImg.vue

@@ -0,0 +1,33 @@
+<template>
+  <MColumn
+    class="p-hover-tools"
+    :align="align"
+    :class="{
+      'p-edit-tool': editableId === id && editableToolName === 'Logo',
+    }"
+    style="width: 100%"
+  >
+    <MLink :href="link">
+      <MImg v-bind="imgAttrs" />
+    </MLink>
+  </MColumn>
+</template>
+
+<script setup lang="ts">
+import { useComponentsStore } from '@/store/components'
+import type { AlignTool } from '@/types/editor'
+
+interface Props {
+  id: string
+  group: string
+  imgAttrs?: HTMLImageElement
+  align?: AlignTool['value']
+  link?: string
+}
+
+defineProps<Props>()
+
+const { editableId, editableToolName } = useComponentsStore()
+</script>
+
+<style lang="scss" scoped></style>

src/components/email-components/EMenu.vue

@@ -0,0 +1,56 @@
+<template>
+  <MColumn
+    class="e-list p-hover-tools"
+    :class="{
+      'p-edit-tool': editableId === id && editableToolName === group,
+    }"
+  >
+    <MRow
+      width="auto"
+      :align="align"
+    >
+      <MColumn
+        v-for="(i, index) in items"
+        :key="index"
+        class="link"
+        :style="{ paddingRight: items.length === index + 1 ? '0' : '10px' }"
+      >
+        <MLink
+          :href="i.link"
+          :style="{
+            color: i.color,
+            fontSize: `${i.fontSize}px`,
+          }"
+        >
+          <template v-if="!$slots.item">
+            {{ i.text }}
+          </template>
+          <slot
+            name="item"
+            :item="i"
+          />
+        </MLink>
+      </MColumn>
+    </MRow>
+  </MColumn>
+</template>
+
+<script setup lang="ts">
+import { MColumn, MLink, MRow } from '@mysigmail/vue-email-components'
+import type { Menu } from '@/types/email-components/components'
+import type { AlignTool } from '@/types/editor'
+import { useComponentsStore } from '@/store/components'
+
+interface Props {
+  id: string
+  group: string
+  align?: AlignTool['value']
+  items: Menu[]
+}
+
+defineProps<Props>()
+
+const { editableId, editableToolName } = useComponentsStore()
+</script>
+
+<style lang="scss" scoped></style>

src/components/email-components/ESocial.vue

@@ -0,0 +1,51 @@
+<template>
+  <MColumn
+    class="e-list p-hover-tools"
+    :class="{
+      'p-edit-tool': editableId === id && editableToolName === group,
+    }"
+  >
+    <MRow
+      width="auto"
+      :align="align"
+    >
+      <MColumn
+        v-for="(i, index) in items"
+        :key="index"
+        class="link"
+        :style="{ paddingRight: items.length === index + 1 ? '0' : '18px' }"
+      >
+        <MLink :href="i.link">
+          <MImg
+            :src="i.image.src"
+            :style="{
+              width: `${i.image.width}px`,
+              height: `${i.image.height}px`,
+            }"
+            :alt="i.image.alt"
+          />
+        </MLink>
+      </MColumn>
+    </MRow>
+  </MColumn>
+</template>
+
+<script setup lang="ts">
+import { MColumn, MLink, MRow } from '@mysigmail/vue-email-components'
+import type { Social } from '@/types/email-components/components'
+import type { AlignTool } from '@/types/editor'
+import { useComponentsStore } from '@/store/components'
+
+interface Props {
+  id: string
+  group: string
+  align?: AlignTool['value']
+  items: Social[]
+}
+
+defineProps<Props>()
+
+const { editableId, editableToolName } = useComponentsStore()
+</script>
+
+<style lang="scss" scoped></style>

src/components/email-components/menu/Menu1.vue

@@ -5,41 +5,29 @@
     @click.self="onEditTool('Layout', index)"
   >
     <MRow>
-      <MColumn
+      <EImg
         v-if="isShowLogo"
-        class="p-hover-tools"
+        :id="id"
+        group="Logo"
+        :img-attrs="logoAttrs"
+        :link="logoImage?.link"
         :align="logoAlign"
-        :class="{
-          'p-edit-tool': editableId === id && editableToolName === 'Logo',
-        }"
-        style="width: 100%"
         @click="onEditTool('Logo', index)"
-      >
-        <MLink :href="logoImage?.link">
-          <MImg v-bind="logoAttrs" />
-        </MLink>
-      </MColumn>
-      <MColumn
+      />
+      <EMenu
         v-if="isShowMenu"
+        :id="id"
+        group="Menu"
+        :items="menuItems"
         :align="menuAlign"
-        class="p-hover-tools"
-        :class="{
-          'p-edit-tool': editableId === id && editableToolName === 'Menu',
-        }"
         @click="onEditTool('Menu', index)"
-      >
-        <MenuItems
-          v-if="itemsText"
-          class="menu-items"
-          :items="itemsText"
-        />
-      </MColumn>
+      />
     </MRow>
   </EmailBase>
 </template>
 
 <script setup lang="ts">
-import { MColumn, MImg, MLink, MRow } from '@mysigmail/vue-email-components'
+import { MRow } from '@mysigmail/vue-email-components'
 import { useCommon } from './composables/common'
 import type { Tool } from '@/types/editor'
 import { useComponentsStore } from '@/store/components'
@@ -58,12 +46,12 @@ const {
   logoImage,
   isShowMenu,
   isShowLogo,
-  itemsText,
+  menuItems,
   menuAlign,
   logoAlign,
 } = useCommon(props.tools)
 
-const { onEditTool, editableToolName, editableId } = useComponentsStore()
+const { onEditTool } = useComponentsStore()
 </script>
 
 <style lang="scss" scoped></style>

src/components/email-components/menu/Menu2.vue

@@ -4,58 +4,42 @@
     :index="index"
     @click.self="onEditTool('Layout', index)"
   >
-    <MRow
-      v-if="isShowLogo"
-      class="p-hover-tools"
-      :class="{
-        'p-edit-tool': editableId === id && editableToolName === 'Logo',
-      }"
-      @click="onEditTool('Logo', index)"
-    >
-      <MColumn :align="logoAlign">
-        <MLink :href="logoImage?.link">
-          <MImg
-            v-bind="logoAttrs"
-            style="display: unset"
-          />
-        </MLink>
-      </MColumn>
+    <MRow v-if="isShowLogo">
+      <EImg
+        :id="id"
+        group="Logo"
+        :img-attrs="logoAttrs"
+        :link="logoImage?.link"
+        :align="logoAlign"
+        @click="onEditTool('Logo', index)"
+      />
     </MRow>
-    <MRow
+
+    <EDivider
       v-if="isShowDivider"
-      class="p-hover-tools"
-      :class="{
-        'p-edit-tool': editableId === id && editableToolName === 'Divider',
-      }"
+      :id="id"
+      :color="dividerColor"
+      group="Divider"
+      :style="dividerPadding"
       @click="onEditTool('Divider', index)"
-    >
-      <MColumn>
-        <MHr v-bind="dividerAttrs" />
-      </MColumn>
-    </MRow>
+    />
     <MRow
       v-if="isShowMenu"
-      :style="{
-        marginTop: !isShowDivider && isShowLogo ? '20px' : null,
-      }"
-      class="p-hover-tools"
-      :class="{
-        'p-edit-tool': editableId === id && editableToolName === 'Menu',
-      }"
-      @click="onEditTool('Menu', index)"
+      :style="menuPadding"
     >
-      <MColumn :align="menuAlign">
-        <MenuItems
-          v-if="itemsText"
-          :items="itemsText"
-        />
-      </MColumn>
+      <EMenu
+        :id="id"
+        group="Menu"
+        :items="menuItems"
+        :align="menuAlign"
+        @click="onEditTool('Menu', index)"
+      />
     </MRow>
   </EmailBase>
 </template>
 
 <script setup lang="ts">
-import { MColumn, MHr, MImg, MLink, MRow } from '@mysigmail/vue-email-components'
+import { MRow } from '@mysigmail/vue-email-components'
 import { useMenu2 } from './composables/menu-2'
 import type { Tool } from '@/types/editor'
 import { useComponentsStore } from '@/store/components'
@@ -71,17 +55,19 @@ const props = defineProps<Props>()
 const {
   layoutAttrs,
   logoAttrs,
-  itemsText,
+  menuItems,
   isShowMenu,
-  dividerAttrs,
+  dividerColor,
+  dividerPadding,
   logoImage,
   isShowLogo,
   isShowDivider,
   logoAlign,
   menuAlign,
+  menuPadding,
 } = useMenu2(props.tools)
 
-const { onEditTool, editableToolName, editableId } = useComponentsStore()
+const { onEditTool } = useComponentsStore()
 </script>
 
 <style lang="scss" scoped></style>