-
+
{{ $t("Create Page") }}
@@ -27,11 +27,19 @@
-
+
{{ $t("See all pages") }}
+
+
+
+
+
+ {{ $t("Clipboard") }}
+
+
@@ -100,6 +108,13 @@ export default {
this.$emit("seeAllPages");
},
+ /**
+ * Handle when user clicks on "Clipboard
+ */
+ onClipboard() {
+ this.$emit("clipboard");
+ },
+
/**
* Handler for when a specific page is clicked.
* Emits the "clickPage" event with the selected page.
@@ -122,4 +137,7 @@ export default {
// Style for the icons in dropdown items.
color: #1572c2;
}
+.w-icon {
+ width: 1.25rem;
+}
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 98974c640..2a282f77b 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -107,6 +107,7 @@
:pages="config"
:is-multi-page="showToolbar"
@tab-opened="currentPage = $event"
+ @clearClipboard="clearClipboard"
>
@@ -656,6 +658,9 @@ export default {
};
},
computed: {
+ pagesAndClipboard() {
+ return [...this.config, [{name:"Clipboard", items: []}]];
+ },
// Get clipboard items from Vuex store
clipboardItems() {
return this.$store.getters["clipboardModule/clipboardItems"];
@@ -810,6 +815,9 @@ export default {
this.setGroupOrder(defaultGroupOrder);
},
methods: {
+ openClipboard() {
+ this.$refs.tabsBar.openPageByIndex(-1);
+ },
isCurrentPageEmpty(currentPage) {
return this.config[currentPage]?.items?.length === 0;
},
diff --git a/src/mixins/Clipboard.js b/src/mixins/Clipboard.js
index 270ae2e30..2bf2279a4 100644
--- a/src/mixins/Clipboard.js
+++ b/src/mixins/Clipboard.js
@@ -99,5 +99,13 @@ export default {
}
screenConfig.forEach((item) => replaceInPage(item));
},
+
+ /**
+ * Clear the clipboard
+ */
+ clearClipboard() {
+ this.$store.dispatch("clipboardModule/clearClipboard"); // Dispatch action to clear clipboard from the Vuex store
+ this.$root.$emit('update-clipboard');
+ },
},
};
diff --git a/src/stories/PagesDropdown.stories.js b/src/stories/PagesDropdown.stories.js
index ad676b0f7..fa74095fa 100644
--- a/src/stories/PagesDropdown.stories.js
+++ b/src/stories/PagesDropdown.stories.js
@@ -17,6 +17,7 @@ export default {
@addPage="onAddPage"
@clickPage="onClick"
@seeAllPages="onSeeAllPages"
+ @clipboard="onClipboard"
/>
`,
data() {
@@ -31,7 +32,10 @@ export default {
},
onClick(index) {
console.log("Click page item:", index);
- }
+ },
+ onClipboard() {
+ console.log("Open clipboard");
+ },
}
})
};
@@ -104,8 +108,8 @@ export const ClickInCreatePage = {
await selectorAddPage.click(selectorAddPage);
}
};
-// Open the See all Pages
-export const ClickInSeeAllPages = {
+// Open the Clipboard
+export const ClickInClipboard = {
args: {
data: [{ name: "Page 1" }]
},
@@ -114,19 +118,18 @@ export const ClickInSeeAllPages = {
const selector = canvasElement.querySelector(
"[data-test=page-dropdown] button"
);
- const selectorAddPage = canvasElement.querySelector(
- "[data-test=see-all-pages]"
+ const clipboardOption = canvasElement.querySelector(
+ "[data-test=clipboard]"
);
- console.log(selectorAddPage);
await selector.click(selector);
await waitFor(
() => {
expect(canvas.getByTestId("page-dropdown")).toContainHTML(
- "See all pages"
+ "Clipboard"
);
},
{ timeout: 1000 }
);
- await selectorAddPage.click(selectorAddPage);
+ await clipboardOption.click(clipboardOption);
}
};