Adding tab change event emitter

src/App.vue

@@ -50,6 +50,7 @@
                         :locale="selectedLocale"
                         :cronSyntax="selectedSyntax"
                         v-model="sample1CronExpression"
+                        @change-selected-tab="handleChangeSelectedTab"
                     ></VueCronEditorBuefy>
                 </section>
                 {{ sample1CronExpression }}
@@ -136,6 +137,10 @@
                     </template>
                 </v-data-table>
             </section>
+
+            <v-snackbar v-model="snackbar" timeout="1000">
+                {{ snackbarText }}
+            </v-snackbar>
         </v-container>
     </v-app>
 </template>
@@ -178,6 +183,10 @@ export default {
                 this.expressions[newIndex - 1].id = newIndex;
             }
             this.close();
+        },
+        handleChangeSelectedTab(selectedTab) {
+            this.snackbar = true;
+            this.snackbarText = `Selected tab: ${selectedTab.key}, id: ${selectedTab.id}`;
         }
     },
     data: () => ({
@@ -202,7 +211,9 @@ export default {
             "monthly",
             "advanced"
         ],
-        syntaxes: ["basic", "quartz"]
+        syntaxes: ["basic", "quartz"],
+        snackbar: false,
+        snackbarText: ""
     })
 };
 </script>

src/buefy/VueCronEditorBuefy.vue

@@ -230,6 +230,10 @@ export default {
     watch: {
         currentTab() {
             this.activeTab = this.tabs.find(t => t.key === this.currentTab).id;
+            this.activeTab &&
+                this.$emit("change-selected-tab", {
+                    ...this.tabs[this.activeTab]
+                });
         }
     },
     computed: {

tests/unit/changingSelectedTab.spec.ts

@@ -0,0 +1,23 @@
+import { shallowMount } from "@vue/test-utils";
+import VueCronEditorBuefy from "../../src/buefy/VueCronEditorBuefy.vue";
+
+function getMountedComponent(Component: any, propsData: any) {
+    return shallowMount(Component, {
+        propsData
+    });
+}
+
+describe("changingSelectedTab", () => {
+    it("triggers an $emit event", async () => {
+        let component = getMountedComponent(VueCronEditorBuefy, {});
+        await component.setData({ currentTab: "monthly" });
+        let emitted = component.emitted("change-selected-tab");
+        expect(emitted).toBeTruthy();
+        expect(emitted && emitted[0][0]).toEqual({ id: "4", key: "monthly" });
+
+        await component.setData({ currentTab: "weekly" });
+        emitted = component.emitted("change-selected-tab");
+        expect(emitted).toBeTruthy();
+        expect(emitted && emitted[1][0]).toEqual({ id: "3", key: "weekly" });
+    });
+});