@antelopejs/dms-mailing 0.5.0 → 0.6.0

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

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import draggable from 'vuedraggable'
+import { ref } from 'vue'
 import type { Block } from '../../types/mailing'
 import { useEditorContext } from '../../composables/useEditorContext'
-import { DRAG_GROUP, DRAG_HANDLE } from '../../utils/blocks'
+import {
+	useSortableList,
+	type SortableListChange,
+} from '../../composables/useSortableList'
+import { DRAG_GROUP, DRAG_HANDLE, DRAG_ITEM } from '../../utils/blocks'
 import EditorBlock from './EditorBlock.vue'
 import EditorInsertPoint from './EditorInsertPoint.vue'
 
@@ -12,40 +16,39 @@ interface Props {
 
 const props = defineProps<Props>()
 
-interface DraggableChange {
-	added?: { element: Block }
-}
-
 const { editor } = useEditorContext()
 
-function onChange(change: DraggableChange): void {
+function onChange(change: SortableListChange<Block>): void {
 	editor.touch()
 	if (change.added) editor.select(change.added.element.id)
 }
+
+const root = ref<HTMLElement | null>(null)
+
+// The list is the editor's: a drop changes it in place, as a click does.
+useSortableList(root, () => props.list, {
+	group: DRAG_GROUP,
+	handle: DRAG_HANDLE,
+	draggable: DRAG_ITEM,
+	ghostClass: 'opacity-30',
+	onChange,
+})
 </script>
 
 <template>
-	<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" />
-			</div>
-		</template>
-		<template #footer>
-			<EditorInsertPoint
-				:list="props.list"
-				:index="props.list.length"
-				:is-empty="props.list.length === 0"
-			/>
-		</template>
-	</draggable>
+	<div ref="root" class="flex flex-col">
+		<div
+			v-for="(element, index) in props.list"
+			:key="element.id"
+			data-drag-item
+		>
+			<EditorInsertPoint :list="props.list" :index="index" />
+			<EditorBlock :block="element" :index="index" :list="props.list" />
+		</div>
+		<EditorInsertPoint
+			:list="props.list"
+			:index="props.list.length"
+			:is-empty="props.list.length === 0"
+		/>
+	</div>
 </template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import draggable from 'vuedraggable'
+import { ref } from 'vue'
+import { useSortableList } from '../../composables/useSortableList'
 import {
 	PALETTE_GROUP,
 	cloneFromPalette,
@@ -23,23 +24,22 @@ const emit = defineEmits<{ add: [PaletteEntry] }>()
 
 const { t } = useI18n()
 
-const clone = (entry: PaletteEntry) =>
-	cloneFromPalette(entry, props.blockContext())
+const root = ref<HTMLElement | null>(null)
+
+// A tile stays in the palette: the canvas receives the block it stands for.
+useSortableList(root, () => props.entries, {
+	group: PALETTE_GROUP,
+	sort: false,
+	disabled: () => props.disabled,
+	clone: (entry) => cloneFromPalette(entry, props.blockContext()),
+})
 </script>
 
 <template>
 	<section>
 		<DmsEyebrow :label="title" class="mb-2 block" />
-		<draggable
-			:list="entries"
-			:group="PALETTE_GROUP"
-			:clone="clone"
-			:sort="false"
-			:disabled="disabled"
-			item-key="type"
-			class="grid grid-cols-2 gap-1.5"
-		>
-			<template #item="{ element }">
+		<div ref="root" class="grid grid-cols-2 gap-1.5">
+			<template v-for="element in entries" :key="element.type">
 				<button
 					type="button"
 					class="border-default bg-default text-toned hover:border-primary/60 hover:text-highlighted group flex min-h-9 cursor-grab items-center gap-2 rounded-md border px-2.5 py-1 text-left text-xs transition disabled:cursor-not-allowed disabled:opacity-50"
@@ -61,6 +61,6 @@ const clone = (entry: PaletteEntry) =>
 					</span>
 				</button>
 			</template>
-		</draggable>
+		</div>
 	</section>
 </template>

package/frontend-vue/app/composables/useSortableList.ts

@@ -0,0 +1,159 @@
+import { useSortable } from '@vueuse/integrations/useSortable'
+import { toValue, watch, type MaybeRefOrGetter, type Ref } from 'vue'
+
+/** What a drop did to a list, as vuedraggable's `change` event said it. */
+export interface SortableListChange<Item> {
+	added?: { element: Item; newIndex: number }
+	removed?: { element: Item; oldIndex: number }
+	moved?: { element: Item; oldIndex: number; newIndex: number }
+}
+
+export interface SortableGroup {
+	name: string
+	/** `'clone'`: the list keeps its items and hands a copy to the other list. */
+	pull?: boolean | 'clone'
+	/** `false`: no item of another list lands here. */
+	put?: boolean
+}
+
+export interface SortableListOptions<Item> {
+	/** Lists sharing a group name exchange items. */
+	group?: string | SortableGroup
+	/** Read again whenever it changes. */
+	disabled?: MaybeRefOrGetter<boolean>
+	/** Only an item grabbed by an element matching this selector moves. */
+	handle?: string
+	/**
+	 * The children that are items, when the list element holds others (a
+	 * footer): the indexes SortableJS reports count these only.
+	 */
+	draggable?: string
+	/** `false`: the items cannot be reordered within the list. */
+	sort?: boolean
+	/** Class of the slot the dragged item will land in. */
+	ghostClass?: string
+	/** What another list receives in place of the dragged item. */
+	clone?: (item: Item) => unknown
+	onChange?: (change: SortableListChange<Item>) => void
+	/** After every drag, whatever it changed. */
+	onEnd?: () => void
+}
+
+/** What the list reads of SortableJS's events. */
+interface SortableEvent {
+	item: HTMLElement
+	clone: HTMLElement
+	oldIndex?: number
+	newIndex?: number
+	pullMode?: boolean | 'clone'
+}
+
+/**
+ * The options the list sets. SortableJS keeps its default only for an option
+ * absent from the object: a key set to `undefined` replaces it (an undefined
+ * `draggable` makes no child an item, so nothing drags).
+ */
+function defined<Options extends object>(options: Options): Partial<Options> {
+	return Object.fromEntries(
+		Object.entries(options).filter(([, value]) => value !== undefined),
+	) as Partial<Options>
+}
+
+/**
+ * The item being dragged, by group. A drop on another list only names the
+ * element, which belongs to the list it left: the list it lands in reads the
+ * item the other one stored when the drag started.
+ */
+const dragged = new Map<string, unknown>()
+
+/**
+ * Lets the user reorder the items of `list` rendered in `root`, or move them
+ * to another list of the same group: SortableJS, through VueUse's
+ * `useSortable`.
+ *
+ * SortableJS moves the dragged element in the DOM itself. Vue owns these
+ * elements, so each drop puts the element back where Vue rendered it and
+ * changes `list` in place instead, from which Vue renders the new order.
+ */
+export function useSortableList<Item>(
+	root: Ref<HTMLElement | null>,
+	list: () => Item[],
+	options: SortableListOptions<Item> = {},
+): void {
+	const groupName =
+		typeof options.group === 'string'
+			? options.group
+			: (options.group?.name ?? '')
+
+	/**
+	 * Where the dragged element stood: next to the node that followed it, not
+	 * at an index, as Vue removes an item by the markers around it.
+	 */
+	let origin: { parent: Node; next: Node | null } | undefined
+
+	function restore(item: HTMLElement): void {
+		if (origin) origin.parent.insertBefore(item, origin.next)
+	}
+
+	const { option } = useSortable(root, list, {
+		...defined({
+			group: options.group,
+			handle: options.handle,
+			draggable: options.draggable,
+			ghostClass: options.ghostClass,
+		}),
+		disabled: toValue(options.disabled) ?? false,
+		sort: options.sort ?? true,
+		onStart: (event: SortableEvent) => {
+			const { parentNode, nextSibling } = event.item
+			origin = parentNode
+				? { parent: parentNode, next: nextSibling }
+				: undefined
+			const element = list()[event.oldIndex ?? -1]
+			if (element === undefined) return
+			dragged.set(groupName, options.clone ? options.clone(element) : element)
+		},
+		onUpdate: (event: SortableEvent) => {
+			const { oldIndex, newIndex } = event
+			if (oldIndex === undefined || newIndex === undefined) return
+			restore(event.item)
+			const items = list()
+			const [element] = items.splice(oldIndex, 1)
+			if (element === undefined) return
+			items.splice(newIndex, 0, element)
+			options.onChange?.({ moved: { element, oldIndex, newIndex } })
+		},
+		onAdd: (event: SortableEvent) => {
+			const element = dragged.get(groupName) as Item | undefined
+			const { newIndex } = event
+			if (element === undefined || newIndex === undefined) return
+			// The element goes back to the list it left, below.
+			event.item.remove()
+			list().splice(newIndex, 0, element)
+			options.onChange?.({ added: { element, newIndex } })
+		},
+		onRemove: (event: SortableEvent) => {
+			restore(event.item)
+			// A copy left: the list keeps its item, and SortableJS's stand-in goes.
+			if (event.pullMode === 'clone') {
+				event.clone.remove()
+				return
+			}
+			const { oldIndex } = event
+			if (oldIndex === undefined) return
+			const [element] = list().splice(oldIndex, 1)
+			if (element === undefined) return
+			options.onChange?.({ removed: { element, oldIndex } })
+		},
+		onEnd: () => {
+			origin = undefined
+			dragged.delete(groupName)
+			options.onEnd?.()
+		},
+	})
+
+	watch(
+		() => toValue(options.disabled) ?? false,
+		(disabled) => option('disabled', disabled),
+	)
+}

package/frontend-vue/app/utils/blocks/dnd.ts

@@ -9,6 +9,8 @@ export const PALETTE_GROUP = {
 	put: false,
 }
 export const DRAG_HANDLE = '.mailing-drag-handle'
+/** The blocks of a list, not the insert point that ends it. */
+export const DRAG_ITEM = '>[data-drag-item]'
 
 /** The block a tile dropped on the canvas becomes, shaped by its template. */
 export function cloneFromPalette(

package/frontend-vue/i18n/locales/mailing-en-GB.json

@@ -804,7 +804,7 @@
 				},
 				"webhookUrl": {
 					"label": "Webhook URL",
-					"description": "Your provider, or the relay that translates its events, posts them here with the secret below. The module README describes the format."
+					"description": "Your provider, or the relay that translates its events, posts them here with the secret below. The module documentation describes the format."
 				},
 				"webhookStatus": {
 					"label": "Webhook status",

package/frontend-vue/i18n/locales/mailing-fr-FR.json

@@ -804,7 +804,7 @@
 				},
 				"webhookUrl": {
 					"label": "URL du webhook",
-					"description": "Votre fournisseur, ou le relais qui traduit ses événements, les envoie ici avec le secret ci-dessous. Le README du module décrit le format."
+					"description": "Votre fournisseur, ou le relais qui traduit ses événements, les envoie ici avec le secret ci-dessous. La documentation du module décrit le format."
 				},
 				"webhookStatus": {
 					"label": "État du webhook",

package/frontend-vue/package.json

@@ -6,7 +6,7 @@
 	"license": "Apache-2.0",
 	"packageManager": "pnpm@10.2.0",
 	"engines": {
-		"@antelopejs/dms-frontend": ">=0.6.0 <0.7.0"
+		"@antelopejs/dms-frontend": ">=0.6.3 <0.7.0"
 	},
 	"scripts": {
 		"format": "prettier --write .",
@@ -16,8 +16,9 @@
 	},
 	"dependencies": {
 		"@vueuse/core": "^14.3.0",
-		"vue": "^3.5.18",
-		"vuedraggable": "^4.1.0"
+		"@vueuse/integrations": "^14.3.0",
+		"sortablejs": "^1.14.0",
+		"vue": "^3.5.18"
 	},
 	"devDependencies": {
 		"@nuxt/ui": "4.10.0",

package/frontend-vue/pnpm-lock.yaml

@@ -11,12 +11,15 @@ importers:
       '@vueuse/core':
         specifier: ^14.3.0
         version: 14.4.0(vue@3.5.42(typescript@5.9.3))
+      '@vueuse/integrations':
+        specifier: ^14.3.0
+        version: 14.4.0(fuse.js@7.5.0)(sortablejs@1.14.0)(vue@3.5.42(typescript@5.9.3))
+      sortablejs:
+        specifier: ^1.14.0
+        version: 1.14.0
       vue:
         specifier: ^3.5.18
         version: 3.5.42(typescript@5.9.3)
-      vuedraggable:
-        specifier: ^4.1.0
-        version: 4.1.0(vue@3.5.42(typescript@5.9.3))
     devDependencies:
       '@nuxt/ui':
         specifier: 4.10.0
@@ -3154,11 +3157,6 @@ packages:
       typescript:
         optional: true
 
-  vuedraggable@4.1.0:
-    resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
-    peerDependencies:
-      vue: ^3.0.1
-
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
@@ -6245,11 +6243,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
-  vuedraggable@4.1.0(vue@3.5.42(typescript@5.9.3)):
-    dependencies:
-      sortablejs: 1.14.0
-      vue: 3.5.42(typescript@5.9.3)
-
   w3c-keyname@2.2.8: {}
 
   w3c-xmlserializer@5.0.0:

package/frontend-vue/tests/editor-block-list.test.ts

@@ -12,6 +12,24 @@ import EditorBlockList from '../app/components/editor/EditorBlockList.vue'
 import type { Block } from '../app/types/mailing'
 
 const editor = vi.hoisted(() => ({ touch: vi.fn(), select: vi.fn() }))
+const sortables = vi.hoisted(
+	() => [] as { el: HTMLElement; options: Record<string, unknown> }[],
+)
+
+// What SortableJS would be handed: the test calls it as SortableJS does.
+vi.mock('@vueuse/integrations/useSortable', async () => {
+	const { onMounted, unref } = await import('vue')
+	return {
+		useSortable: (
+			target: { value: HTMLElement },
+			_list: unknown,
+			options: Record<string, unknown>,
+		) => {
+			onMounted(() => sortables.push({ el: unref(target), options }))
+			return { option: () => {} }
+		},
+	}
+})
 
 vi.mock('../app/composables/useEditorContext', () => ({
 	useEditorContext: () => ({ editor }),
@@ -60,14 +78,36 @@ describe('editor draggable items', () => {
 	})
 	it('selects a block dropped into the list', async () => {
 		vi.stubGlobal('useI18n', () => ({ t: (key: string) => key }))
-		const list = reactive<Block[]>([])
-		const app = createApp(EditorBlockList, { list })
+		sortables.length = 0
+		const source = reactive<Block[]>([
+			{ id: 'dropped', type: 'divider', visibleIf: null },
+		])
+		const target = reactive<Block[]>([])
+		const app = createApp({
+			render: () => [
+				h(EditorBlockList, { list: source }),
+				h(EditorBlockList, { list: target }),
+			],
+		})
 		app.mount(document.createElement('div'))
 		try {
-			const draggable = app._instance?.subTree.props as Record<string, unknown>
-			const onChange = draggable.onChange as (change: unknown) => void
-			onChange({ added: { element: { id: 'dropped' }, newIndex: 0 } })
-			onChange({ moved: { element: { id: 'other' } } })
+			const [from, to] = sortables
+			expect(from!.options).toMatchObject({
+				group: { name: 'mailing-blocks' },
+				handle: '.mailing-drag-handle',
+				draggable: '>[data-drag-item]',
+			})
+			const item = from!.el.querySelector('[data-drag-item]') as HTMLElement
+			const handler = (sortable: typeof from, name: string) =>
+				sortable!.options[name] as (event: unknown) => void
+			handler(from, 'onStart')({ item, oldIndex: 0 })
+			to!.el.prepend(item)
+			handler(to, 'onAdd')({ item, newIndex: 0 })
+			handler(from, 'onRemove')({ item, oldIndex: 0 })
+			handler(from, 'onEnd')({})
+			await nextTick()
+			expect(source).toEqual([])
+			expect(target.map((block) => block.id)).toEqual(['dropped'])
 			expect(editor.touch).toHaveBeenCalledTimes(2)
 			expect(editor.select).toHaveBeenCalledExactlyOnceWith('dropped')
 		} finally {