@antelopejs/dms-mailing 0.3.4 → 0.4.0

package/frontend-vue/app/components/blocks/List.vue

@@ -1,32 +1,76 @@
 <script setup lang="ts">
+import { computed, inject } from 'vue'
 import type { ListBlock } from '../../types/mailing'
+import { readPath } from '../../utils/paths'
+import { TOKEN_DATA_KEY } from '../../utils/tokens'
 
 interface Props {
 	block: ListBlock
 }
 
-defineProps<Props>()
+interface PreviewRow {
+	key: number
+	label: string
+	value: string
+}
+
+const PLACEHOLDER_ROWS = 2
+const TOKEN_OPEN = '{{'
+const TOKEN_CLOSE = '}}'
+
+const props = defineProps<Props>()
+const data = inject(TOKEN_DATA_KEY, null)
+
+const cell = (row: unknown, path: string): string => {
+	const value = readPath(row, path)
+	return value === undefined || value === null ? '' : String(value)
+}
+
+const dataRows = computed<PreviewRow[] | null>(() => {
+	if (!data?.value) return null
+	const source = readPath(data.value, props.block.source)
+	if (!Array.isArray(source)) return []
+	return source.map((row, key) => ({
+		key,
+		label: cell(row, props.block.labelPath),
+		value: cell(row, props.block.valuePath),
+	}))
+})
+
+const token = (path: string): string => `${TOKEN_OPEN}${path}${TOKEN_CLOSE}`
 </script>
 
 <template>
 	<div class="mb-4">
 		<table class="w-full border-collapse text-sm">
-			<tbody>
+			<tbody v-if="dataRows">
+				<tr
+					v-for="row in dataRows"
+					:key="row.key"
+					class="border-b border-gray-100 last:border-0"
+				>
+					<td class="py-2 text-gray-600">{{ row.label }}</td>
+					<td class="py-2 text-right font-medium text-gray-900">
+						{{ row.value }}
+					</td>
+				</tr>
+			</tbody>
+			<tbody v-else>
 				<tr
-					v-for="row in 2"
+					v-for="row in PLACEHOLDER_ROWS"
 					:key="row"
 					class="border-b border-gray-100 last:border-0"
 				>
 					<td class="py-2 text-gray-600">
-						<DmsMailingTokenText :text="`{{${block.labelPath}}}`" />
+						<MailingTokenText :text="token(block.labelPath)" />
 					</td>
 					<td class="py-2 text-right font-medium text-gray-900">
-						<DmsMailingTokenText :text="`{{${block.valuePath}}}`" />
+						<MailingTokenText :text="token(block.valuePath)" />
 					</td>
 				</tr>
 			</tbody>
 		</table>
-		<p class="mt-1 font-mono text-[10px] text-gray-400">
+		<p class="mt-1 font-mono text-[10px] text-gray-600">
 			#each {{ block.source }}
 		</p>
 	</div>

package/frontend-vue/app/components/blocks/Paragraph.vue

@@ -13,6 +13,6 @@ defineProps<Props>()
 		class="mb-4 text-sm leading-relaxed text-gray-600"
 		:style="{ textAlign: block.align }"
 	>
-		<DmsMailingTokenText :text="block.text" />
+		<MailingTokenText :text="block.text" />
 	</p>
 </template>

package/frontend-vue/app/components/blocks/Total.vue

@@ -10,9 +10,9 @@ defineProps<Props>()
 
 <template>
 	<div
-		class="mb-4 flex items-center justify-between border-t border-gray-200 pt-3 text-sm font-semibold text-gray-900"
+		class="mb-4 flex items-center justify-between gap-3 border-t border-gray-200 pt-3 text-sm font-semibold text-gray-900"
 	>
-		<span>{{ block.label }}</span>
-		<DmsMailingTokenText :text="block.value" />
+		<MailingTokenText class="min-w-0" :text="block.label" />
+		<MailingTokenText class="min-w-0 text-right" :text="block.value" />
 	</div>
 </template>

package/frontend-vue/app/components/editor/EditorAutocompleteMenu.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { PathSuggestion } from '../../utils/autocomplete'
+
+interface Props {
+	items: PathSuggestion[]
+	highlighted: number
+}
+
+defineProps<Props>()
+const emit = defineEmits<{ choose: [PathSuggestion]; hover: [number] }>()
+
+const KEY = 'dms_mailing.editor.autocomplete'
+
+const { t } = useI18n()
+
+function trailOf(item: PathSuggestion): string {
+	if (item.status === 'declared') return item.type ?? ''
+	return t(`${KEY}.${item.status}`)
+}
+</script>
+
+<template>
+	<div
+		role="listbox"
+		class="border-default bg-default absolute inset-x-0 top-full z-30 mt-1 flex flex-col rounded-md border p-1 shadow-lg"
+	>
+		<button
+			v-for="(item, index) in items"
+			:key="item.path"
+			type="button"
+			role="option"
+			:aria-selected="index === highlighted"
+			class="flex h-7 items-center gap-2 rounded px-2 text-left"
+			:class="index === highlighted ? 'bg-elevated' : ''"
+			@mousedown.prevent="emit('choose', item)"
+			@mouseenter="emit('hover', index)"
+		>
+			<UIcon name="i-ph-brackets-curly" class="text-dimmed size-3.5 shrink-0" />
+			<code class="text-highlighted min-w-0 flex-1 truncate font-mono text-xs">
+				{{ item.path }}
+			</code>
+			<span
+				class="font-mono text-[10.5px]"
+				:class="item.status === 'undeclared' ? 'text-warning' : 'text-dimmed'"
+			>
+				{{ trailOf(item) }}
+			</span>
+		</button>
+	</div>
+</template>

package/frontend-vue/app/components/editor/EditorBlock.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { computed, resolveComponent } from 'vue'
+import { computed, inject, resolveComponent } from 'vue'
 import type { Block } from '../../types/mailing'
 import { useEditorContext } from '../../composables/useEditorContext'
-import {
-	BLOCK_COMPONENT_NAMES,
-	duplicateBlock,
-	moveBlock,
-	removeBlock,
-} from '../../utils/blocks'
+import { BLOCK_COMPONENT_NAMES, blockLabelKey } from '../../utils/blocks'
+import { evaluateCondition } from '../../utils/conditions'
+import { TOKEN_DATA_KEY } from '../../utils/tokens'
 
 interface Props {
 	block: Block
@@ -19,103 +16,53 @@ const props = defineProps<Props>()
 
 const { t } = useI18n()
 const { editor } = useEditorContext()
+const data = inject(TOKEN_DATA_KEY, null)
 
-const selected = computed(() => editor.selected?.id === props.block.id)
+const isSelected = computed(() => editor.selectedId === props.block.id)
+const label = computed(() => t(blockLabelKey(props.block.type)))
 const renderer = computed(() =>
 	resolveComponent(BLOCK_COMPONENT_NAMES[props.block.type]),
 )
-const isLast = computed(() => props.index === props.list.length - 1)
-
-function move(direction: -1 | 1): void {
-	if (moveBlock(props.list, props.block.id, direction)) editor.touch()
-}
-
-function duplicate(): void {
-	if (duplicateBlock(props.list, props.block.id)) editor.touch()
-}
-
-function remove(): void {
-	if (selected.value) editor.select(null)
-	if (removeBlock(props.list, props.block.id)) editor.touch()
-}
+const isHidden = computed(() => {
+	const rule = props.block.visibleIf
+	return Boolean(rule && data?.value && !evaluateCondition(rule, data.value))
+})
 </script>
 
 <template>
 	<div
-		class="group relative rounded-md px-1 py-0.5 transition"
+		class="group relative -mx-2 cursor-pointer rounded-md px-2 py-1.5 outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-cyan-700"
 		:class="
-			selected ? 'ring-primary ring-2' : 'hover:ring-primary/40 hover:ring-1'
+			isSelected ? 'ring-2 ring-cyan-500' : 'hover:ring-1 hover:ring-cyan-300'
 		"
-		@click.stop="editor.select(props.block.id)"
+		:data-block-id="block.id"
+		tabindex="0"
+		role="group"
+		:aria-label="label"
+		:aria-current="isSelected || undefined"
+		@click.stop="editor.select(block.id)"
+		@focus="editor.select(block.id)"
 	>
-		<div
-			class="pointer-events-none absolute -top-2.5 left-2 z-10 flex items-center gap-1 opacity-0 transition group-hover:opacity-100"
-			:class="{ 'opacity-100': selected }"
+		<span
+			class="mailing-drag-handle absolute -top-2.5 left-2 z-10 inline-flex h-[18px] cursor-grab items-center gap-1 rounded bg-cyan-500 px-1.5 font-mono text-[10px] font-semibold tracking-wide text-gray-950 transition-opacity group-hover:opacity-100"
+			:class="isSelected ? 'opacity-100' : 'opacity-0'"
 		>
-			<span
-				class="bg-primary text-inverted rounded px-1.5 py-0.5 text-[10px] font-medium"
-			>
-				{{ t(`dms_mailing.blocks.${props.block.type}`) }}
-			</span>
-			<UBadge
-				v-if="props.block.visibleIf"
-				size="sm"
-				color="warning"
-				variant="subtle"
-				class="font-mono"
-			>
-				if {{ props.block.visibleIf.path }}
-			</UBadge>
-		</div>
-
+			{{ label }}
+			<template v-if="block.visibleIf">
+				· if {{ block.visibleIf.path }}
+			</template>
+		</span>
+		<MailingEditorBlockTools
+			v-if="isSelected"
+			:block-id="block.id"
+			:is-first="index === 0"
+			:is-last="index === list.length - 1"
+		/>
 		<div
-			class="border-default bg-default absolute -top-3.5 right-2 z-10 flex items-center gap-0.5 rounded-md border p-0.5 opacity-0 shadow-sm transition group-hover:opacity-100"
-			:class="{ 'opacity-100': selected }"
+			:class="{ 'opacity-40': isHidden }"
+			:title="isHidden ? t('dms_mailing.editor.condition.hidden') : undefined"
 		>
-			<UButton
-				class="mailing-drag-handle cursor-grab"
-				icon="i-ph-dots-six-vertical"
-				size="xs"
-				variant="ghost"
-				color="neutral"
-				:aria-label="t('dms_mailing.editor.actions.drag')"
-			/>
-			<UButton
-				icon="i-ph-arrow-up"
-				size="xs"
-				variant="ghost"
-				color="neutral"
-				:disabled="props.index === 0"
-				:aria-label="t('dms_mailing.editor.actions.move_up')"
-				@click.stop="move(-1)"
-			/>
-			<UButton
-				icon="i-ph-arrow-down"
-				size="xs"
-				variant="ghost"
-				color="neutral"
-				:disabled="isLast"
-				:aria-label="t('dms_mailing.editor.actions.move_down')"
-				@click.stop="move(1)"
-			/>
-			<UButton
-				icon="i-ph-copy"
-				size="xs"
-				variant="ghost"
-				color="neutral"
-				:aria-label="t('dms_mailing.editor.actions.duplicate')"
-				@click.stop="duplicate()"
-			/>
-			<UButton
-				icon="i-ph-trash"
-				size="xs"
-				variant="ghost"
-				color="error"
-				:aria-label="t('dms_mailing.editor.actions.delete')"
-				@click.stop="remove()"
-			/>
+			<component :is="renderer" :block="block" />
 		</div>
-
-		<component :is="renderer" :block="props.block" />
 	</div>
 </template>

package/frontend-vue/app/components/editor/EditorBlockFields.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { Block, TextAlign } from '../../types/mailing'
+import { useEditorContext } from '../../composables/useEditorContext'
+import { fieldsFor, isFieldValueValid } from '../../utils/blocks'
+import type { BlockField } from '../../utils/blocks'
+
+interface Props {
+	block: Block
+}
+
+const props = defineProps<Props>()
+
+const MIN_SIZE = 12
+const MAX_SIZE = 48
+const SETTINGS_KEY = 'dms_mailing.editor.block_settings'
+const ALIGNMENTS: TextAlign[] = ['left', 'center', 'right']
+const ALIGN_ICONS: Record<TextAlign, string> = {
+	left: 'i-ph-text-align-left',
+	center: 'i-ph-text-align-center',
+	right: 'i-ph-text-align-right',
+}
+const TOKEN_KINDS = ['tokens', 'token']
+
+const { t } = useI18n()
+const { editor, session } = useEditorContext()
+
+const fields = computed(() => fieldsFor(props.block.type))
+const rejected = ref<Record<string, string>>({})
+const values = computed(() => props.block as unknown as Record<string, unknown>)
+const pathItems = computed(() =>
+	[
+		...new Set([
+			...editor.variables.map((variable) => variable.path),
+			...session.detected,
+		]),
+	].sort(),
+)
+
+const alignItems = ALIGNMENTS.map((value) => ({
+	value,
+	label: '',
+	icon: ALIGN_ICONS[value],
+}))
+
+watch(
+	() => props.block.id,
+	() => (rejected.value = {}),
+)
+
+function text(key: string): string {
+	return rejected.value[key] ?? String(values.value[key] ?? '')
+}
+
+function errorOf(field: BlockField): string | undefined {
+	return field.key in rejected.value
+		? t('dms_mailing.editor.fields.required')
+		: undefined
+}
+
+function patch(key: string, value: unknown): void {
+	editor.updateBlock(props.block.id, { [key]: value } as Partial<Block>)
+}
+
+function patchChecked(field: BlockField, value: unknown): void {
+	const typed = String(value ?? '')
+	if (!isFieldValueValid(field, typed)) {
+		rejected.value = { ...rejected.value, [field.key]: typed }
+		return
+	}
+	rejected.value = Object.fromEntries(
+		Object.entries(rejected.value).filter(([key]) => key !== field.key),
+	)
+	patch(field.key, typed)
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<UFormField
+			v-for="field in fields"
+			:key="field.key"
+			:label="t(field.label)"
+			:required="field.isRequired"
+			:error="errorOf(field)"
+			size="sm"
+		>
+			<MailingEditorTokenField
+				v-if="TOKEN_KINDS.includes(field.kind)"
+				:model-value="text(field.key)"
+				:is-multiline="field.kind === 'tokens'"
+				@update:model-value="patch(field.key, $event)"
+			/>
+			<DmsSegmented
+				v-else-if="field.kind === 'align'"
+				:model-value="text(field.key) || ALIGNMENTS[0]"
+				:items="alignItems"
+				size="xs"
+				block
+				:aria-label="t(field.label)"
+				@update:model-value="patch(field.key, $event)"
+			/>
+			<div v-else-if="field.kind === 'size'" class="flex items-center gap-3">
+				<USlider
+					:model-value="Number(values[field.key] ?? MIN_SIZE)"
+					:min="MIN_SIZE"
+					:max="MAX_SIZE"
+					class="flex-1"
+					@update:model-value="patch(field.key, $event)"
+				/>
+				<span class="text-dimmed w-10 text-right font-mono text-[11px]">
+					{{ values[field.key] }} px
+				</span>
+			</div>
+			<USelectMenu
+				v-else-if="field.kind === 'path'"
+				:model-value="text(field.key)"
+				:items="pathItems"
+				create-item
+				class="w-full font-mono"
+				icon="i-ph-brackets-curly"
+				@update:model-value="patchChecked(field, $event)"
+				@create="patchChecked(field, $event)"
+			/>
+			<UInput
+				v-else
+				:model-value="text(field.key)"
+				class="w-full"
+				@update:model-value="patchChecked(field, $event)"
+			/>
+			<template v-if="field.help || TOKEN_KINDS.includes(field.kind)" #help>
+				{{
+					field.help
+						? t(`${SETTINGS_KEY}.${field.help}`)
+						: t('dms_mailing.editor.autocomplete.hint')
+				}}
+			</template>
+		</UFormField>
+	</div>
+</template>

package/frontend-vue/app/components/editor/EditorBlockInspector.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Block } from '../../types/mailing'
+import { useEditorContext } from '../../composables/useEditorContext'
+import {
+	BLOCK_ICONS,
+	blockLabelKey,
+	blockPosition,
+	branchCounts,
+} from '../../utils/blocks'
+
+interface Props {
+	block: Block
+}
+
+const props = defineProps<Props>()
+
+const KEY = 'dms_mailing.editor.inspector'
+const LOGIC_TYPE = 'if'
+
+const { t } = useI18n()
+const { editor } = useEditorContext()
+
+const isLogic = computed(() => props.block.type === LOGIC_TYPE)
+
+const position = computed(() => {
+	const found = blockPosition(editor.current?.blocks ?? [], props.block.id)
+	if (!found) return ''
+	const base = t(`${KEY}.position`, { index: found.index, total: found.total })
+	if (props.block.type !== 'if') return base
+	const counts = branchCounts(props.block)
+	return t(`${KEY}.position_branches`, {
+		position: base,
+		then: counts.then,
+		else: counts.else ?? 0,
+	})
+})
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex items-center gap-2.5">
+			<DmsIconWell
+				:icon="BLOCK_ICONS[block.type]"
+				:tone="isLogic ? 'warning' : 'primary'"
+				size="sm"
+			/>
+			<div class="min-w-0">
+				<p class="text-highlighted text-sm font-semibold">
+					{{ t(blockLabelKey(block.type)) }}
+				</p>
+				<p class="text-dimmed font-mono text-[11px]">{{ position }}</p>
+			</div>
+		</div>
+
+		<MailingEditorConditionInspector
+			v-if="block.type === 'if'"
+			:block="block"
+		/>
+		<MailingEditorBlockFields v-else :block="block" />
+
+		<USeparator />
+		<MailingEditorVisibility :block="block" />
+		<USeparator />
+
+		<div class="flex items-center gap-1.5">
+			<UButton
+				size="sm"
+				color="neutral"
+				variant="outline"
+				icon="i-ph-copy"
+				@click="editor.duplicateBlockById(block.id)"
+			>
+				{{ t(`${KEY}.duplicate`) }}
+			</UButton>
+			<UButton
+				size="sm"
+				color="error"
+				variant="ghost"
+				icon="i-ph-trash"
+				@click="editor.removeBlockById(block.id)"
+			>
+				{{ t(`${KEY}.delete`) }}
+			</UButton>
+			<span class="text-dimmed ml-auto flex items-center gap-1 text-[11px]">
+				<MailingEditorShortcutHint :keys="['delete']" />
+				·
+				<MailingEditorShortcutHint :keys="['meta', 'd']" />
+			</span>
+		</div>
+	</div>
+</template>

package/frontend-vue/app/components/editor/EditorBlockList.vue

@@ -1,44 +1,51 @@
 <script setup lang="ts">
 import draggable from 'vuedraggable'
 import type { Block } from '../../types/mailing'
-import type { InsertTarget } from '../../composables/useTemplateEditor'
 import { useEditorContext } from '../../composables/useEditorContext'
 import { DRAG_GROUP, DRAG_HANDLE } from '../../utils/blocks'
 import EditorBlock from './EditorBlock.vue'
+import EditorInsertPoint from './EditorInsertPoint.vue'
 
 interface Props {
 	list: Block[]
-	target?: InsertTarget
 }
 
 const props = defineProps<Props>()
 
-const { t } = useI18n()
+interface DraggableChange {
+	added?: { element: Block }
+}
+
 const { editor } = useEditorContext()
+
+function onChange(change: DraggableChange): void {
+	editor.touch()
+	if (change.added) editor.select(change.added.element.id)
+}
 </script>
 
 <template>
-	<div>
-		<draggable
-			:list="props.list"
-			:group="DRAG_GROUP"
-			:handle="DRAG_HANDLE"
-			item-key="id"
-			ghost-class="opacity-30"
-			@change="editor.touch()"
-		>
-			<template #item="{ element, index }">
+	<draggable
+		:list="props.list"
+		:group="DRAG_GROUP"
+		:handle="DRAG_HANDLE"
+		item-key="id"
+		ghost-class="opacity-30"
+		class="flex flex-col"
+		@change="onChange"
+	>
+		<template #item="{ element, index }">
+			<div>
+				<EditorInsertPoint :list="props.list" :index="index" />
 				<EditorBlock :block="element" :index="index" :list="props.list" />
-			</template>
-		</draggable>
-
-		<button
-			v-if="props.list.length === 0"
-			type="button"
-			class="hover:border-primary hover:text-primary w-full rounded-md border border-dashed border-gray-300 py-3 text-xs text-gray-400 transition"
-			@click.stop="editor.addBlock('paragraph', props.target)"
-		>
-			+ {{ t('dms_mailing.editor.condition.add_here') }}
-		</button>
-	</div>
+			</div>
+		</template>
+		<template #footer>
+			<EditorInsertPoint
+				:list="props.list"
+				:index="props.list.length"
+				:is-empty="props.list.length === 0"
+			/>
+		</template>
+	</draggable>
 </template>

package/frontend-vue/app/components/editor/EditorBlockPicker.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { BlockType } from '../../types/mailing'
+import {
+	BLOCK_PALETTE,
+	LOGIC_PALETTE,
+	filterPalette,
+	paletteLabelKey,
+} from '../../utils/blocks'
+import type { PaletteEntry } from '../../utils/blocks'
+
+const emit = defineEmits<{ pick: [BlockType] }>()
+
+const { t } = useI18n()
+
+const query = ref('')
+const labelOf = (entry: PaletteEntry): string => t(paletteLabelKey(entry.type))
+const entries = computed(() =>
+	filterPalette([...BLOCK_PALETTE, ...LOGIC_PALETTE], query.value, labelOf),
+)
+
+function pickFirst(): void {
+	const first = entries.value[0]
+	if (first) emit('pick', first.type)
+}
+</script>
+
+<template>
+	<div class="flex w-56 flex-col gap-1 p-1.5" @click.stop>
+		<UInput
+			v-model="query"
+			size="sm"
+			icon="i-ph-magnifying-glass"
+			autofocus
+			:placeholder="t('dms_mailing.editor.palette.search')"
+			@keydown.enter.prevent="pickFirst()"
+		/>
+		<div class="flex max-h-64 flex-col overflow-y-auto">
+			<button
+				v-for="entry in entries"
+				:key="entry.type"
+				type="button"
+				class="text-toned hover:bg-elevated hover:text-highlighted flex h-8 items-center gap-2 rounded-md px-2 text-left text-xs"
+				@click="emit('pick', entry.type)"
+			>
+				<UIcon
+					:name="entry.icon"
+					class="size-4"
+					:class="entry.type === 'if' ? 'text-warning' : 'text-dimmed'"
+				/>
+				{{ labelOf(entry) }}
+			</button>
+			<p v-if="entries.length === 0" class="text-muted px-2 py-1.5 text-xs">
+				{{ t('dms_mailing.editor.palette.no_match', { query }) }}
+			</p>
+		</div>
+	</div>
+</template>