feat: add new header components

src/components/email-components/EButton.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { AlignTool } from '@/types/editor'
+import { MButton, MColumn } from '@mysigmail/vue-email-components'
+import { computed } from 'vue'
+import { useComponentsStore } from '@/store/components'
+
+interface Props {
+  id: string
+  group: string
+  text?: string
+  attrs?: Record<string, unknown>
+  align?: AlignTool['value']
+  width?: string | number
+  inline?: boolean
+}
+
+const props = defineProps<Props>()
+
+const { editableId, editableToolName } = useComponentsStore()
+
+const isEditable = computed(() => {
+  return editableId.value === props.id && editableToolName.value === props.group
+})
+
+const columnStyle = computed(() => {
+  const value = props.width
+  if (value === undefined || value === null || value === '')
+    return undefined
+
+  return {
+    width: typeof value === 'number' ? `${value}px` : value,
+  }
+})
+
+const inlineStyle = computed(() => {
+  const style: Record<string, string> = {}
+
+  if (props.align)
+    style.textAlign = props.align
+
+  const value = props.width
+
+  if (value !== undefined && value !== null && value !== '')
+    style.width = typeof value === 'number' ? `${value}px` : value
+
+  if (!Object.keys(style).length)
+    return undefined
+
+  return style
+})
+</script>
+
+<template>
+  <div
+    v-if="inline"
+    class="p-hover-tools"
+    :style="inlineStyle"
+    :class="{
+      'p-edit-tool': isEditable,
+    }"
+  >
+    <MButton v-bind="attrs">
+      {{ text }}
+    </MButton>
+  </div>
+
+  <MColumn
+    v-else
+    class="p-hover-tools"
+    :align="align"
+    :style="columnStyle"
+    :class="{
+      'p-edit-tool': isEditable,
+    }"
+  >
+    <MButton v-bind="attrs">
+      {{ text }}
+    </MButton>
+  </MColumn>
+</template>
+
+<style lang="scss" scoped></style>

src/components/email-components/EText.vue

@@ -33,6 +33,7 @@ const columnStyle = computed(() => {
     }"
   >
     <div v-html="value" />
+    <slot />
   </MColumn>
 </template>
 

src/components/email-components/SchemaEmailComponent.vue

@@ -141,6 +141,34 @@ function onRootClick() {
             :value="resolveString(child.value)"
             v-bind="resolveAttrs(child.attrs)"
             @click="onEditTool(child.group, index)"
+          >
+            <template
+              v-for="(nestedChild, nestedIndex) in child.children || []"
+              :key="`${nodeIndex}_${childIndex}_${nestedIndex}`"
+            >
+              <EButton
+                v-if="nestedChild.type === 'button' && isVisible(nestedChild.if)"
+                :id="id"
+                :group="nestedChild.group"
+                :align="resolveAlign(nestedChild.align)"
+                :width="resolveWidth(nestedChild.width)"
+                :text="resolveString(nestedChild.text)"
+                :attrs="resolveAttrs(nestedChild.attrs)"
+                inline
+                @click.stop="onEditTool(nestedChild.group, index)"
+              />
+            </template>
+          </EText>
+
+          <EButton
+            v-if="child.type === 'button' && isVisible(child.if)"
+            :id="id"
+            :group="child.group"
+            :align="resolveAlign(child.align)"
+            :width="resolveWidth(child.width)"
+            :text="resolveString(child.text)"
+            :attrs="resolveAttrs(child.attrs)"
+            @click.stop="onEditTool(child.group, index)"
           />
         </template>
       </MRow>