feat: add header components (#24)

Author: antonreshetov

public/img/components/content-1.jpg

@@ -21,6 +21,11 @@ body {
   box-sizing: border-box;
 }
 
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
 .p-html, .p-body {
   height: 100%;
 }

public/img/components/content-10.jpg

@@ -23,10 +23,6 @@
 
   --font-primary: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
 
-  --color-primary: hsl(210, 100%, 63%);
-  --color-danger: hsl(0, 87%, 69%);
-  --color-bg: hsl(0, 0%, 100%);
-
   --color-contrast-lower: hsl(0, 0%, 97%);
   --color-contrast-lower-alt: hsl(0, 0%, 92%);
   --color-contrast-low: hsl(0, 0%, 85%);
@@ -45,5 +41,11 @@
   --color-grey-800: hsl(0, 0%, 30%);
   --color-grey-900: hsl(0, 0%, 0%);
 
+  --color-primary: hsl(210, 100%, 63%);
+  --color-danger: hsl(0, 87%, 69%);
+  --color-bg: hsl(0, 0%, 100%);
+
+  --color-text-primary: var(--color-grey-800);
+
   --color-border: var(--color-grey-400);
-}
+}

public/img/components/content-2.jpg

@@ -32,12 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  MBody,
-  MContainer,
-  MHtml,
-  MPreview,
-} from '@mysigmail/vue-email-components'
+import { MBody, MContainer, MHtml, MPreview } from '@mysigmail/vue-email-components'
 import type { CSSProperties } from 'vue'
 import { computed, onMounted, ref } from 'vue'
 import Sortable from 'sortablejs'
@@ -49,13 +44,18 @@ import Menu2 from '@/components/email-components/menu/Menu2.vue'
 import Menu3 from '@/components/email-components/menu/Menu3.vue'
 import Menu4 from '@/components/email-components/menu/Menu4.vue'
 
+import Header1 from '@/components/email-components/header/Header1.vue'
+import Header2 from '@/components/email-components/header/Header2.vue'
+
 const { installed, isDragging, moveComponent, general } = useComponentsStore()
 
 const components: Record<string, any> = {
   Menu1,
   Menu2,
   Menu3,
   Menu4,
+  Header1,
+  Header2,
 }
 
 const listRef = ref<HTMLElement>()
@@ -66,9 +66,7 @@ const container: CSSProperties = {
 
 const style = computed<CSSProperties>(() => {
   return {
-    backgroundImage: general.background.image
-      ? `url(${general.background.image})`
-      : '',
+    backgroundImage: general.background.image ? `url(${general.background.image})` : '',
     backgroundRepeat: general.background.repeat,
     backgroundColor: general.background.color,
     backgroundSize: general.background.size,

public/img/components/content-3.jpg

@@ -33,7 +33,7 @@
               placeholder="Type a link"
             />
             <template #reference>
-              <ElButton>
+              <ElButton :class="{ 'is-active': editor?.getAttributes('link')?.href }">
                 <UniconsLinkH />
               </ElButton>
             </template>

public/img/components/content-4.jpg

@@ -3,7 +3,7 @@
     <MColumn
       class="p-hover-tools"
       :class="{
-        'p-edit-tool': editableId === id && editableToolName === 'Divider',
+        'p-edit-tool': editableId === id && editableToolName === group,
       }"
     >
       <MHr :style="{ borderColor: color }" />

public/img/components/content-5.jpg

@@ -3,7 +3,7 @@
     class="p-hover-tools"
     :align="align"
     :class="{
-      'p-edit-tool': editableId === id && editableToolName === 'Logo',
+      'p-edit-tool': editableId === id && editableToolName === group,
     }"
     style="width: 100%"
   >

public/img/components/content-6.jpg

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

public/img/components/content-7.jpg

@@ -0,0 +1,23 @@
+import { computed } from 'vue'
+import { useLayout } from './layout'
+import { useLogo } from './logo'
+import { useText } from './text'
+import { useMenu } from './menu'
+import type { Tool } from '@/types/editor'
+import { getToolsByGroup } from '@/store/components/utils'
+
+export function useCommon(tools: Tool[]) {
+  const toolsByGroup = computed(() => getToolsByGroup(tools))
+
+  const layoutTools = useLayout(toolsByGroup)
+  const logoTools = useLogo(toolsByGroup)
+  const menuTools = useMenu(toolsByGroup)
+  const textTools = useText(toolsByGroup)
+
+  return {
+    ...layoutTools,
+    ...logoTools,
+    ...menuTools,
+    ...textTools,
+  }
+}

public/img/components/content-8.jpg

@@ -0,0 +1,51 @@
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import { getValueFromToolsByGroupByName } from '@/store/components/utils'
+import type { BackgroundImageTool, ColorPickerTool, SpacingTool, Tool } from '@/types/editor'
+
+export function useLayout(toolsByGroup: ComputedRef<Record<string, Tool[]>>) {
+  const layoutPadding = computed(() => {
+    const padding = getValueFromToolsByGroupByName<SpacingTool>(
+      toolsByGroup.value,
+      'Layout',
+      'Spacings',
+    )?.padding
+
+    return padding?.map(i => `${i}px`).join(' ')
+  })
+
+  const layoutBackground = computed(() => {
+    return getValueFromToolsByGroupByName<ColorPickerTool>(
+      toolsByGroup.value,
+      'Layout',
+      'Background Color',
+    )
+  })
+
+  const layoutBackgroundImage = computed(() => {
+    return getValueFromToolsByGroupByName<BackgroundImageTool>(
+      toolsByGroup.value,
+      'Layout',
+      'Background Image',
+    )
+  })
+
+  const layoutAttrs = computed(() => {
+    return {
+      style: {
+        padding: layoutPadding.value,
+        backgroundColor: layoutBackground.value,
+        backgroundImage: `url(${layoutBackgroundImage.value?.url})`,
+        backgroundSize: layoutBackgroundImage.value?.size,
+        backgroundPosition: layoutBackgroundImage.value?.position,
+      },
+    } as HTMLElement
+  })
+
+  return {
+    layoutAttrs,
+    layoutBackground,
+    layoutBackgroundImage,
+    layoutPadding,
+  }
+}

public/img/components/content-9.jpg

@@ -0,0 +1,59 @@
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import { getValueFromToolsByGroupByName } from '@/store/components/utils'
+import type {
+  AlignTool,
+  ImageTool,
+  PaddingTool,
+  SpacingTool,
+  ToggleTool,
+  Tool,
+} from '@/types/editor'
+
+export function useLogo(toolsByGroup: ComputedRef<Record<string, Tool[]>>) {
+  const logoImage = computed(() => {
+    return getValueFromToolsByGroupByName<ImageTool>(toolsByGroup.value, 'Logo', 'Image')
+  })
+
+  const logoAlign = computed(() => {
+    return getValueFromToolsByGroupByName<AlignTool>(toolsByGroup.value, 'Logo', 'Align')
+  })
+
+  const logoPadding = computed(() => {
+    const padding = getValueFromToolsByGroupByName<SpacingTool>(
+      toolsByGroup.value,
+      'Logo',
+      'Spacings',
+    )?.padding
+
+    return padding?.map(i => `${i}px`).join(' ')
+  })
+
+  const logoAttrs = computed(() => {
+    if (!logoImage.value)
+      return
+
+    const { src, width, height, alt } = logoImage.value
+
+    return {
+      src,
+      alt,
+      style: {
+        width: `${width}px`,
+        height: `${height}px`,
+      },
+    } as HTMLImageElement
+  })
+
+  const isShowLogo = computed(() => {
+    return getValueFromToolsByGroupByName<ToggleTool>(toolsByGroup.value, 'Logo', 'Show / Hide')
+  })
+
+  return {
+    isShowLogo,
+    logoAlign,
+    logoAttrs,
+    logoImage,
+    logoPadding,
+  }
+}

public/img/components/cta-1.jpg

@@ -0,0 +1,55 @@
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import { getValueFromToolsByGroupByName, getValueFromToolsByName } from '@/store/components/utils'
+import type {
+  AlignTool,
+  ColorPickerTool,
+  InputNumberTool,
+  InputTool,
+  MultiTool,
+  PaddingTool,
+  SpacingTool,
+  ToggleTool,
+  Tool,
+} from '@/types/editor'
+import type { Menu } from '@/types/email-components/components'
+
+export function useMenu(toolsByGroup: ComputedRef<Record<string, Tool[]>>) {
+  const menuAlign = computed(() => {
+    return getValueFromToolsByGroupByName<AlignTool>(toolsByGroup.value, 'Menu', 'Align')
+  })
+
+  const menuPadding = computed(() => {
+    const padding = getValueFromToolsByGroupByName<SpacingTool>(
+      toolsByGroup.value,
+      'Menu',
+      'Spacings',
+    )?.padding
+
+    return padding?.map(i => `${i}px`).join(' ')
+  })
+
+  const isShowMenu = computed(() => {
+    return getValueFromToolsByGroupByName<ToggleTool>(toolsByGroup.value, 'Menu', 'Show / Hide')
+  })
+
+  const menuItems = computed(() => {
+    const items = getValueFromToolsByGroupByName<MultiTool>(toolsByGroup.value, 'Menu', 'List')
+
+    return items?.map((i) => {
+      return {
+        text: getValueFromToolsByName<InputTool>(i.tools, 'Name'),
+        link: getValueFromToolsByName<InputTool>(i.tools, 'Link'),
+        color: getValueFromToolsByName<ColorPickerTool>(i.tools, 'Color'),
+        fontSize: getValueFromToolsByName<InputNumberTool>(i.tools, 'Font Size'),
+      }
+    }) as Menu[]
+  })
+
+  return {
+    isShowMenu,
+    menuAlign,
+    menuPadding,
+    menuItems,
+  }
+}