Rename "name" prop to "context" to avoid confusion with the name of t…

…he component itself
mirkobrombin · Apr 11, 2024 · 045bada · 045bada
1 parent 86ae3aa
commit 045bada
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 23 deletions.
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -8,13 +8,13 @@
     <template #content>
       <SideLayout class="Toolkit" context="mainLayout">
         <template #sidebar>
-          <MenuSwitcher name="mainMenu" :items="mainSwitcheritems" :onChange="restorePanel" />
+          <MenuSwitcher context="mainMenu" :items="mainSwitcheritems" :onChange="restorePanel" />
         </template>
         <template #content>
-          <StaticNotebook name="mainMenu">
+          <StaticNotebook context="mainMenu">
             <Showcase title="TabsSwitcher & Notebook" description="A component to switch between tabs and pages">
-              <TabsSwitcher :allowNewTabs="true" name="mainTabs" />
-              <Notebook :newPageContent="newPage" name="mainTabs" />
+              <TabsSwitcher :allowNewTabs="true" context="mainTabs" />
+              <Notebook :newPageContent="newPage" context="mainTabs" />
             </Showcase>
 
             <Showcase title="Button" description="A component to trigger actions">
@@ -140,10 +140,10 @@
             <Showcase title="MenuSwitcher" description="A component to switch between pages">
               <SideLayout>
                 <template #sidebar>
-                  <MenuSwitcher name="exampleMenu" :items="menuSwitcherItems" />
+                  <MenuSwitcher context="exampleMenu" :items="menuSwitcherItems" />
                 </template>
                 <template #content>
-                  <StaticNotebook name="exampleMenu">
+                  <StaticNotebook context="exampleMenu">
                     <div>
                       <TextRich>
                         <div style="text-align: center">

diff --git a/widgets/MenuSwitcher.vue b/widgets/MenuSwitcher.vue
@@ -21,7 +21,7 @@ interface MenuItem {
 export default defineComponent({
     name: "MenuSwitcher",
     props: {
-        name: {
+        context: {
             type: String,
             required: true,
         },
@@ -49,7 +49,7 @@ export default defineComponent({
                 this.onChange();
             }
 
-            this.$eventBus.emit(`${this.name}-changePage`, pageId);
+            this.$eventBus.emit(`${this.context}-changePage`, pageId);
         },
     },
 });

diff --git a/widgets/Notebook.vue b/widgets/Notebook.vue
@@ -20,7 +20,7 @@ interface Page {
 export default defineComponent({
     name: "Notebook",
     props: {
-        name: {
+        context: {
             type: String,
             required: true,
         },
@@ -43,9 +43,9 @@ export default defineComponent({
     mounted() {
         console.log("Notebook mounted");
 
-        this.$eventBus.on(`${this.name}-createTab`, this.createPage as any);
-        this.$eventBus.on(`${this.name}-setActiveTab`, this.setActivePage as any);
-        this.$eventBus.on(`${this.name}-closeTab`, this.closePage as any);
+        this.$eventBus.on(`${this.context}-createTab`, this.createPage as any);
+        this.$eventBus.on(`${this.context}-setActiveTab`, this.setActivePage as any);
+        this.$eventBus.on(`${this.context}-closeTab`, this.closePage as any);
     },
     methods: {
         createPage(pageId: number) {
@@ -58,12 +58,12 @@ export default defineComponent({
 
             this.activePage = this.pages.length;
 
-            this.$eventBus.emit(`${this.name}-pageCreated`, this.activePage);
+            this.$eventBus.emit(`${this.context}-pageCreated`, this.activePage);
         },
         setActivePage(pageId: number) {
             this.activePage = pageId;
 
-            this.$eventBus.emit(`${this.name}-pageChanged`, this.activePage);
+            this.$eventBus.emit(`${this.context}-pageChanged`, this.activePage);
 
             console.log("setActivePage", pageId);
         },
@@ -79,7 +79,7 @@ export default defineComponent({
                 this.activePage = this.pages.length;
             }
 
-            this.$eventBus.emit(`${this.name}-pageClosed`, pageId);
+            this.$eventBus.emit(`${this.context}-pageClosed`, pageId);
 
             console.log("remaining pages", this.pages);
         },

diff --git a/widgets/StaticNotebook.vue b/widgets/StaticNotebook.vue
@@ -13,7 +13,7 @@ import { defineComponent } from "vue";
 export default defineComponent({
     name: "StaticNotebook",
     props: {
-        name: {
+        context: {
             type: String,
             required: true,
         },
@@ -27,7 +27,7 @@ export default defineComponent({
     mounted() {
         console.log("StaticNotebook mounted");
 
-        this.$eventBus.on(`${this.name}-changePage`, this.changePage);
+        this.$eventBus.on(`${this.context}-changePage`, this.changePage);
 
         this.$nextTick(() => {
             const pages = this.$refs.pages as HTMLElement;
@@ -49,7 +49,7 @@ export default defineComponent({
 
             if (this._pages[pageId]) {
                 this._pages[pageId].style.display = "block";
-                this.$eventBus.emit(`${this.name}-pageChanged`, pageId);
+                this.$eventBus.emit(`${this.context}-pageChanged`, pageId);
             }
         },
     },

diff --git a/widgets/TabsSwitcher.vue b/widgets/TabsSwitcher.vue
@@ -36,7 +36,7 @@ interface Tab {
 export default defineComponent({
     name: "TabsSwitcher",
     props: {
-        name: {
+        context: {
             type: String,
             required: true,
         },
@@ -111,7 +111,7 @@ export default defineComponent({
                 this.activeTab = this.tabs[this.tabs.length - 1].id;
             }
 
-            this.$eventBus.emit(`${this.name}-closeTab`, tabId);
+            this.$eventBus.emit(`${this.context}-closeTab`, tabId);
         },
         createTab() {
             const newTabId = Math.max(...this.tabs.map(tab => tab.id), 0) + 1;
@@ -131,12 +131,12 @@ export default defineComponent({
                 }
             });
 
-            console.log("emit", `${this.name}-createTab`, newTab.id);
-            this.$eventBus.emit(`${this.name}-createTab`, newTab.id);
+            console.log("emit", `${this.context}-createTab`, newTab.id);
+            this.$eventBus.emit(`${this.context}-createTab`, newTab.id);
         },
         setActiveTab(tabId: number) {
             this.activeTab = tabId;
-            this.$eventBus.emit(`${this.name}-setActiveTab`, tabId);
+            this.$eventBus.emit(`${this.context}-setActiveTab`, tabId);
         },
     },
 });