pkp/pkp-lib#10033 Emit click event for DropdownActions component

src/components/DropdownActions/DropdownActions.stories.js

@@ -45,6 +45,47 @@ const downloadActions = [
 ];
 
 export const Default = {
+	render: (args) => ({
+		components: {DropdownActions},
+		setup() {
+			function authorPdf() {
+				console.log('authorPdf clicked');
+			}
+
+			function authorXml() {
+				console.log('authorXml clicked');
+			}
+
+			function editorPdf() {
+				console.log('editorPdf clicked');
+			}
+
+			function editorXml() {
+				console.log('editorXml clicked');
+			}
+
+			function handleAction(name) {
+				switch (name) {
+					case 'authorPdf':
+						authorPdf();
+						break;
+					case 'authorXml':
+						authorXml();
+						break;
+					case 'editorPdf':
+						editorPdf();
+						break;
+					case 'editorXml':
+						editorXml();
+						break;
+					default:
+						console.error(`No handler for action: ${name}`);
+				}
+			}
+			return {args, handleAction};
+		},
+		template: '<DropdownActions v-bind="args" @action="handleAction" />',
+	}),
 	args: {
 		actions: downloadActions,
 		label: 'Download Review Form',
@@ -110,6 +151,7 @@ export const EllipsisMenu = {
 };
 
 export const RightAlignedMenu = {
+	...Default,
 	args: {
 		actions: downloadActions,
 		label: 'Right Aligned Menu',

src/components/DropdownActions/DropdownActions.vue

@@ -36,7 +36,11 @@
 							: 'ltr:right-0 ltr:origin-top-right rtl:left-0 rtl:origin-top-right'
 					"
 				>
-					<MenuItem v-for="(action, i) in actions" :key="i" v-slot="{active}">
+					<MenuItem
+						v-for="(action, i) in actions"
+						:key="i"
+						v-slot="{active, close}"
+					>
 						<div class="min-w-[96px]">
 							<PkpButton
 								v-if="isValidAction(action)"
@@ -48,7 +52,12 @@
 								:class="i !== actions.length - 1 ? 'border-b' : ''"
 								size-variant="fullWidth"
 								class="border-light"
-								@click="action.name"
+								@click="
+									() => {
+										emitAction(action);
+										close();
+									}
+								"
 							>
 								{{ action.label }}
 							</PkpButton>
@@ -100,6 +109,16 @@ defineProps({
 	},
 });
 
+const emit = defineEmits(['action']);
+
+const emitAction = (action) => {
+	if (action.url) {
+		window.location.href = action.url;
+	} else if (action.name) {
+		emit('action', action.name);
+	}
+};
+
 const isValidAction = (action) => {
 	return action?.label && (action?.url || action?.name);
 };