From 2023d7e9f6d2e7a3dc3a80b99546b2a1a5ecceb2 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Thu, 7 Dec 2023 09:33:51 +0300
Subject: [PATCH] refactor: add separate components (#20)

---
 src/components/email-components/EDivider.vue  | 28 +++++++
 src/components/email-components/EImg.vue      | 33 +++++++++
 src/components/email-components/EMenu.vue     | 56 ++++++++++++++
 src/components/email-components/ESocial.vue   | 51 +++++++++++++
 .../email-components/menu/Menu1.vue           | 40 ++++------
 .../email-components/menu/Menu2.vue           | 74 ++++++++-----------
 .../email-components/menu/Menu3.vue           | 36 ++++-----
 .../email-components/menu/Menu4.vue           | 49 ++++++------
 .../menu/components/MenuItems.vue             | 47 ------------
 .../menu/components/MenuItemsImg.vue          | 42 -----------
 .../menu/composables/common.ts                | 40 +++++-----
 .../menu/composables/menu-2.ts                | 25 +++----
 .../menu/composables/menu-3.ts                | 23 +++++-
 src/store/components/utils.ts                 |  4 +-
 src/types/email-components/components.d.ts    | 16 +++-
 src/types/email-components/menu.d.ts          | 20 -----
 16 files changed, 313 insertions(+), 271 deletions(-)
 create mode 100644 src/components/email-components/EDivider.vue
 create mode 100644 src/components/email-components/EImg.vue
 create mode 100644 src/components/email-components/EMenu.vue
 create mode 100644 src/components/email-components/ESocial.vue
 delete mode 100644 src/components/email-components/menu/components/MenuItems.vue
 delete mode 100644 src/components/email-components/menu/components/MenuItemsImg.vue
 delete mode 100644 src/types/email-components/menu.d.ts

diff --git a/src/components/email-components/EDivider.vue b/src/components/email-components/EDivider.vue
new file mode 100644
index 0000000..e2beeb8
--- /dev/null
+++ b/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>
diff --git a/src/components/email-components/EImg.vue b/src/components/email-components/EImg.vue
new file mode 100644
index 0000000..6e17adb
--- /dev/null
+++ b/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>
diff --git a/src/components/email-components/EMenu.vue b/src/components/email-components/EMenu.vue
new file mode 100644
index 0000000..e533079
--- /dev/null
+++ b/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>
diff --git a/src/components/email-components/ESocial.vue b/src/components/email-components/ESocial.vue
new file mode 100644
index 0000000..d0cb091
--- /dev/null
+++ b/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>
diff --git a/src/components/email-components/menu/Menu1.vue b/src/components/email-components/menu/Menu1.vue
index db7dc09..fef6ca0 100644
--- a/src/components/email-components/menu/Menu1.vue
+++ b/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>
diff --git a/src/components/email-components/menu/Menu2.vue b/src/components/email-components/menu/Menu2.vue
index 059a019..aac068e 100644
--- a/src/components/email-components/menu/Menu2.vue
+++ b/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>
diff --git a/src/components/email-components/menu/Menu3.vue b/src/components/email-components/menu/Menu3.vue
index 2a95a71..cb0fe26 100644
--- a/src/components/email-components/menu/Menu3.vue
+++ b/src/components/email-components/menu/Menu3.vue
@@ -5,37 +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"
-        style="width: 100%"
-        :class="{
-          'p-edit-tool': editableId === id && editableToolName === 'Logo',
-        }"
         @click="onEditTool('Logo', index)"
-      >
-        <MLink :href="logoImage?.link">
-          <MImg v-bind="logoAttrs" />
-        </MLink>
-      </MColumn>
-      <MColumn
+      />
+      <ESocial
         v-if="isShowSocial"
-        class="p-hover-tools"
+        :id="id"
+        :items="socialItems"
+        group="Social"
         :align="socialAlign"
-        :class="{
-          'p-edit-tool': editableId === id && editableToolName === 'Social',
-        }"
         @click="onEditTool('Social', index)"
-      >
-        <MenuItemsImg :items="itemsImg" />
-      </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 { useMenu3 } from './composables/menu-3'
 import type { Tool } from '@/types/editor'
 import { useComponentsStore } from '@/store/components'
@@ -51,7 +43,7 @@ const props = defineProps<Props>()
 const {
   isShowLogo,
   isShowSocial,
-  itemsImg,
+  socialItems,
   layoutAttrs,
   logoAttrs,
   logoImage,
@@ -59,7 +51,7 @@ const {
   socialAlign,
 } = useMenu3(props.tools)
 
-const { onEditTool, editableToolName, editableId } = useComponentsStore()
+const { onEditTool } = useComponentsStore()
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/components/email-components/menu/Menu4.vue b/src/components/email-components/menu/Menu4.vue
index 25824bd..b5ac3d9 100644
--- a/src/components/email-components/menu/Menu4.vue
+++ b/src/components/email-components/menu/Menu4.vue
@@ -5,40 +5,32 @@
     @click.self="onEditTool('Layout', index)"
   >
     <MRow v-if="isShowLogo">
-      <MColumn
-        class="p-hover-tools"
+      <EImg
+        :id="id"
+        :img-attrs="logoAttrs"
+        group="Logo"
+        :link="logoImage?.link"
         :align="logoAlign"
-        :class="{
-          'p-edit-tool': editableId === id && editableToolName === 'Logo',
-        }"
         @click="onEditTool('Logo', index)"
-      >
-        <MLink :href="logoImage?.link">
-          <MImg v-bind="logoAttrs" />
-        </MLink>
-      </MColumn>
+      />
     </MRow>
-    <MRow v-if="isShowMenu">
-      <MColumn :align="menuAlign">
-        <MenuItems
-          v-if="itemsText"
-          class="p-hover-tools"
-          :class="{
-            'p-edit-tool': editableId === id && editableToolName === 'Menu',
-          }"
-          :items="itemsText"
-          :style="{
-            marginTop: isShowLogo ? '20px' : null,
-          }"
-          @click="onEditTool('Menu', index)"
-        />
-      </MColumn>
+    <MRow
+      v-if="isShowMenu"
+      :style="menuPadding"
+    >
+      <EMenu
+        :id="id"
+        :items="menuItems"
+        group="Menu"
+        :align="menuAlign"
+        @click="onEditTool('Menu', index)"
+      />
     </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'
@@ -57,12 +49,13 @@ const {
   logoImage,
   isShowMenu,
   isShowLogo,
-  itemsText,
+  menuItems,
   logoAlign,
   menuAlign,
+  menuPadding,
 } = useCommon(props.tools)
 
-const { onEditTool, editableToolName, editableId } = useComponentsStore()
+const { onEditTool } = useComponentsStore()
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/components/email-components/menu/components/MenuItems.vue b/src/components/email-components/menu/components/MenuItems.vue
deleted file mode 100644
index a1ce7a0..0000000
--- a/src/components/email-components/menu/components/MenuItems.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <MRow
-    class="menu-items"
-    align="auto"
-    width="auto"
-  >
-    <MColumn>
-      <MRow>
-        <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>
-  </MRow>
-</template>
-
-<script setup lang="ts">
-import { MColumn, MLink, MRow } from '@mysigmail/vue-email-components'
-import type { MenuItemText } from '@/types/email-components/menu'
-
-interface Props {
-  items: MenuItemText[]
-}
-
-defineProps<Props>()
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/email-components/menu/components/MenuItemsImg.vue b/src/components/email-components/menu/components/MenuItemsImg.vue
deleted file mode 100644
index 2b35352..0000000
--- a/src/components/email-components/menu/components/MenuItemsImg.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <MRow
-    class="menu-items"
-    align="auto"
-    width="auto"
-  >
-    <MColumn>
-      <MRow>
-        <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>
-  </MRow>
-</template>
-
-<script setup lang="ts">
-import { MColumn, MImg, MLink, MRow } from '@mysigmail/vue-email-components'
-import type { MenuItemImg } from '@/types/email-components/menu'
-
-interface Props {
-  items: MenuItemImg[]
-}
-
-defineProps<Props>()
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/email-components/menu/composables/common.ts b/src/components/email-components/menu/composables/common.ts
index 7272058..91e0523 100644
--- a/src/components/email-components/menu/composables/common.ts
+++ b/src/components/email-components/menu/composables/common.ts
@@ -15,7 +15,7 @@ import {
   getValueFromToolsByGroupByName,
   getValueFromToolsByName,
 } from '@/store/components/utils'
-import type { MenuItemImg, MenuItemText } from '@/types/email-components/menu'
+import type { Menu } from '@/types/email-components/components'
 
 export function useCommon(tools: Tool[]) {
   const toolsByGroup = computed(() => getToolsByGroup(tools))
@@ -71,6 +71,19 @@ export function useCommon(tools: Tool[]) {
     return getValueFromToolsByGroupByName<AlignTool>(toolsByGroup.value, 'Menu', 'Align')
   })
 
+  const menuPadding = computed(() => {
+    const _padding = getValueFromToolsByGroupByName<PaddingTool>(
+      toolsByGroup.value,
+      'Menu',
+      'Padding',
+    )
+    const padding = _padding?.map(i => `${i}px`).join(' ')
+
+    return {
+      padding,
+    } as CSSStyleDeclaration
+  })
+
   const isShowMenu = computed(() => {
     return getValueFromToolsByGroupByName<ToggleTool>(toolsByGroup.value, 'Menu', 'Show / Hide')
   })
@@ -79,7 +92,7 @@ export function useCommon(tools: Tool[]) {
     return getValueFromToolsByGroupByName<ToggleTool>(toolsByGroup.value, 'Logo', 'Show / Hide')
   })
 
-  const itemsText = computed(() => {
+  const menuItems = computed(() => {
     const items = getValueFromToolsByGroupByName<MultiTool>(toolsByGroup.value, 'Menu', 'List')
 
     return items?.map((i) => {
@@ -89,31 +102,20 @@ export function useCommon(tools: Tool[]) {
         color: getValueFromToolsByName<ColorPickerTool>(i.tools, 'Color'),
         fontSize: getValueFromToolsByName<InputNumberTool>(i.tools, 'Font Size'),
       }
-    }) as MenuItemText[]
-  })
-
-  const itemsImg = computed(() => {
-    const items = getValueFromToolsByGroupByName<MultiTool>(toolsByGroup.value, 'Social', 'List')
-
-    return items?.map((i) => {
-      return {
-        image: getValueFromToolsByName<ImageTool>(i.tools, 'Image'),
-        link: getValueFromToolsByName<InputTool>(i.tools, 'Link'),
-      }
-    }) as MenuItemImg[]
+    }) as Menu[]
   })
 
   return {
-    layoutBackground,
     isShowLogo,
     isShowMenu,
-    itemsImg,
-    itemsText,
+    menuItems,
     layoutAttrs,
+    layoutBackground,
+    logoAlign,
     logoAttrs,
     logoImage,
-    toolsByGroup,
     menuAlign,
-    logoAlign,
+    menuPadding,
+    toolsByGroup,
   }
 }
diff --git a/src/components/email-components/menu/composables/menu-2.ts b/src/components/email-components/menu/composables/menu-2.ts
index 152482d..b3c0fdd 100644
--- a/src/components/email-components/menu/composables/menu-2.ts
+++ b/src/components/email-components/menu/composables/menu-2.ts
@@ -14,34 +14,27 @@ export function useMenu2(tools: Tool[]) {
     )
   })
 
-  const dividerColorPadding = computed(() => {
-    return getValueFromToolsByGroupByName<PaddingTool>(
+  const dividerPadding = computed(() => {
+    const _padding = getValueFromToolsByGroupByName<PaddingTool>(
       common.toolsByGroup.value,
       'Divider',
       'Padding',
     )
+    const padding = _padding?.map(i => `${i}px`).join(' ')
+
+    return {
+      padding,
+    } as CSSStyleDeclaration
   })
 
   const isShowDivider = computed(() => {
     return getValueFromToolsByGroupByName(common.toolsByGroup.value, 'Divider', 'Show / Hide')
   })
 
-  const dividerAttrs = computed(() => {
-    return {
-      style: {
-        borderColor: dividerColor.value,
-        margin: dividerColorPadding.value
-          ?.map((i, index) => {
-            return index % 2 === 0 ? `${i}px` : 0
-          })
-          .join(' '),
-      },
-    } as HTMLElement
-  })
-
   return {
     ...common,
-    dividerAttrs,
+    dividerColor,
+    dividerPadding,
     isShowDivider,
   }
 }
diff --git a/src/components/email-components/menu/composables/menu-3.ts b/src/components/email-components/menu/composables/menu-3.ts
index b72c206..59f1143 100644
--- a/src/components/email-components/menu/composables/menu-3.ts
+++ b/src/components/email-components/menu/composables/menu-3.ts
@@ -1,7 +1,12 @@
 import { computed } from 'vue'
 import { useCommon } from './common'
-import type { AlignTool, ColorPickerTool, PaddingTool, Tool } from '@/types/editor'
-import { getToolsByGroup, getValueFromToolsByGroupByName } from '@/store/components/utils'
+import type { AlignTool, ImageTool, InputTool, MultiTool, Tool } from '@/types/editor'
+import {
+  getToolsByGroup,
+  getValueFromToolsByGroupByName,
+  getValueFromToolsByName,
+} from '@/store/components/utils'
+import type { Social } from '@/types/email-components/components'
 
 export function useMenu3(tools: Tool[]) {
   const common = useCommon(tools)
@@ -16,9 +21,21 @@ export function useMenu3(tools: Tool[]) {
     return getValueFromToolsByGroupByName<AlignTool>(toolsByGroup.value, 'Social', 'Align')
   })
 
+  const socialItems = computed(() => {
+    const items = getValueFromToolsByGroupByName<MultiTool>(toolsByGroup.value, 'Social', 'List')
+
+    return items?.map((i) => {
+      return {
+        image: getValueFromToolsByName<ImageTool>(i.tools, 'Image'),
+        link: getValueFromToolsByName<InputTool>(i.tools, 'Link'),
+      }
+    }) as Social[]
+  })
+
   return {
     ...common,
-    socialAlign,
     isShowSocial,
+    socialAlign,
+    socialItems,
   }
 }
diff --git a/src/store/components/utils.ts b/src/store/components/utils.ts
index 2c288d9..1f187da 100644
--- a/src/store/components/utils.ts
+++ b/src/store/components/utils.ts
@@ -28,9 +28,9 @@ export function getValueFromToolsByName<T extends { value: unknown }>(tools: Too
   const value = tools.find(i => i.label === name)?.value
 
   if (!value)
-    return console.warn(`Could not find tool with name "${name}"`)
+    console.warn(`Could not find tool with name "${name}"`)
 
-  return value as T['value'] | undefined
+  return (value as T['value']) || undefined
 }
 
 export function getValueFromToolsByGroupByName<T extends { value: unknown }>(
diff --git a/src/types/email-components/components.d.ts b/src/types/email-components/components.d.ts
index dc9a3e1..50cee63 100644
--- a/src/types/email-components/components.d.ts
+++ b/src/types/email-components/components.d.ts
@@ -1,6 +1,18 @@
-import type { Component } from '../editor'
+import type { Component, ImageTool } from '../editor'
 
-interface ComponentList {
+export interface ComponentList {
   name: string
   components: Component[]
 }
+
+export interface Menu {
+  color: string
+  fontSize: number | string
+  text: string
+  link: string
+}
+
+export interface Social {
+  image: ImageTool['value']
+  link: string
+}
diff --git a/src/types/email-components/menu.d.ts b/src/types/email-components/menu.d.ts
deleted file mode 100644
index 78e638a..0000000
--- a/src/types/email-components/menu.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { ImageTool } from '../editor'
-
-export interface Menu {
-  color: string
-  fontSize: number | string
-  text: string
-  link: string
-}
-
-export interface MenuItemText {
-  color: string
-  fontSize: number | string
-  text: string
-  link: string
-}
-
-export interface MenuItemImg {
-  image: ImageTool['value']
-  link: string
-}