fix: slot not updating with v-slot (#1026)

Co-authored-by: Lee Chase <lee.chase@uk.ibm.com>
carbon-design-system · Sep 23, 2020 · 2b026c4 · 2b026c4
1 parent ac553a4
commit 2b026c4
Show file tree

Hide file tree

Showing 18 changed files with 67 additions and 55 deletions.
diff --git a/packages/core/src/components/cv-combo-box/cv-combo-box.vue b/packages/core/src/components/cv-combo-box/cv-combo-box.vue
@@ -189,7 +189,7 @@ export default {
     this.highlighted = this.value ? this.value : this.highlight; // override highlight with value if provided
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -225,7 +225,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },

diff --git a/packages/core/src/components/cv-data-table/_cv-data-table-row-inner.vue b/packages/core/src/components/cv-data-table/_cv-data-table-row-inner.vue
@@ -86,7 +86,7 @@ export default {
   mounted() {
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   watch: {
@@ -121,7 +121,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.hasOverflowMenu = !!((this.overflowMenu && this.overflowMenu.length) || this.$slots['overflow-menu']);
     },
     onChange() {

diff --git a/packages/core/src/components/cv-data-table/cv-data-table-row.vue b/packages/core/src/components/cv-data-table/cv-data-table-row.vue
@@ -55,7 +55,7 @@ export default {
     },
   },
   mounted() {
-    // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+    // NOTE: this.$slots is not reactive so needs to be managed on updated
     this.dataExpandable = !!this.$slots.expandedContent;
     this.$parent.$emit('cv:mounted', this);
   },

diff --git a/packages/core/src/components/cv-data-table/cv-data-table-skeleton.vue b/packages/core/src/components/cv-data-table/cv-data-table-skeleton.vue
@@ -42,7 +42,7 @@ export default {
   mounted() {
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -55,7 +55,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.hasBatchActions = !!this.$slots['batch-actions'];
       this.hasHelperText = !!this.$slots['helper-text'];
       this.hasActions = !!this.$slots['actions'];

diff --git a/packages/core/src/components/cv-data-table/cv-data-table.vue b/packages/core/src/components/cv-data-table/cv-data-table.vue
@@ -276,7 +276,7 @@ export default {
     this.updateRowsSelected();
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -341,7 +341,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.hasBatchActions = !!this.$slots['batch-actions'];
       this.hasActions = !!this.$slots.actions;
       this.hasToolbar = !!(this.$slots.actions || this.$listeners.search || this.$slots['batch-actions']);

diff --git a/packages/core/src/components/cv-date-picker/cv-date-picker.vue b/packages/core/src/components/cv-date-picker/cv-date-picker.vue
@@ -199,7 +199,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(
         this.$slots['invalid-message'] ||
         (this.invalidMessage && this.invalidMessage.length) ||
@@ -327,7 +327,7 @@ export default {
     //   this.cal.setDate([curDate, anotherDate], true);
     // }, 2000);
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   beforeDestroy() {

diff --git a/packages/core/src/components/cv-dropdown/cv-dropdown.vue b/packages/core/src/components/cv-dropdown/cv-dropdown.vue
@@ -171,7 +171,7 @@ export default {
     this.updateChildren(this.internalValue);
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     document.body.removeEventListener('click', this.checkSlots);
     this.checkSlots();
   },
@@ -252,7 +252,7 @@ export default {
       }
     },
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },

diff --git a/packages/core/src/components/cv-modal/cv-modal.vue b/packages/core/src/components/cv-modal/cv-modal.vue
@@ -121,7 +121,7 @@ export default {
     }
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   watch: {
@@ -163,7 +163,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.hasFooter = !!(this.$slots['primary-button'] || this.$slots['secondary-button']);
       this.hasHeaderLabel = !!this.$slots.label;
       this.hasSecondary = !!this.$slots['secondary-button'];

diff --git a/packages/core/src/components/cv-multi-select/cv-multi-select.vue b/packages/core/src/components/cv-multi-select/cv-multi-select.vue
@@ -252,7 +252,7 @@ export default {
     this.highlighted = this.value ? this.value : this.highlight; // override highlight with value if provided
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -292,7 +292,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },

diff --git a/packages/core/src/components/cv-number-input/cv-number-input.vue b/packages/core/src/components/cv-number-input/cv-number-input.vue
@@ -132,7 +132,7 @@ export default {
     this.internalValue = this.valueAsString(this.value);
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   watch: {
@@ -162,7 +162,7 @@ export default {
       this.emitValue();
     },
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },

diff --git a/packages/core/src/components/cv-select/cv-select.vue b/packages/core/src/components/cv-select/cv-select.vue
@@ -115,7 +115,7 @@ export default {
     }
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   watch: {
@@ -152,7 +152,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },

diff --git a/packages/core/src/components/cv-text-area/cv-text-area.vue b/packages/core/src/components/cv-text-area/cv-text-area.vue
@@ -69,7 +69,7 @@ export default {
   mounted() {
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -85,7 +85,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },

diff --git a/packages/core/src/components/cv-text-input/cv-text-input.vue b/packages/core/src/components/cv-text-input/cv-text-input.vue
@@ -96,7 +96,7 @@ export default {
   mounted() {
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   watch: {
@@ -131,7 +131,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },

diff --git a/packages/core/src/components/cv-time-picker/cv-time-picker.vue b/packages/core/src/components/cv-time-picker/cv-time-picker.vue
@@ -103,7 +103,7 @@ export default {
   mounted() {
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -133,7 +133,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
     },
   },

diff --git a/packages/core/src/components/cv-ui-shell/cv-header.vue b/packages/core/src/components/cv-ui-shell/cv-header.vue
@@ -32,10 +32,10 @@ export default {
     };
   },
   mounted() {
-    // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+    // NOTE: this.$slots is not reactive so needs to be managed on updated
     this.hasGlobalHeader = !!this.$slots['header-global'];
   },
-  beforeUpdate() {
+  updated() {
     this.hasGlobalHeader = !!this.$slots['header-global'];
   },
   computed: {

diff --git a/packages/core/src/components/cv-ui-shell/cv-side-nav-link.vue b/packages/core/src/components/cv-ui-shell/cv-side-nav-link.vue
@@ -40,7 +40,7 @@ export default {
       hasNavIcon: this.$slots['nav-icon'],
     };
   },
-  beforeUpdate() {
+  updated() {
     this.hasNavIcon = !!this.$slots['nav-icon'];
   },
 };

diff --git a/packages/core/src/components/cv-ui-shell/cv-side-nav-menu.vue b/packages/core/src/components/cv-ui-shell/cv-side-nav-menu.vue
@@ -56,10 +56,10 @@ export default {
     };
   },
   mounted() {
-    // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+    // NOTE: this.$slots is not reactive so needs to be managed on updated
     this.hasNavIcon = !!this.$slots['nav-icon'];
   },
-  beforeUpdate() {
+  updated() {
     this.hasNavIcon = !!this.$slots['nav-icon'];
   },
   computed: {