fix(cache): avoid stack overflow because of vue reusing elements

pdanpdan · May 12, 2023 · a5c6d5f · a5c6d5f
1 parent aac906e
commit a5c6d5f
Show file tree

Hide file tree

Showing 36 changed files with 94 additions and 7 deletions.
diff --git a/ui/src/components/btn-dropdown/QBtnDropdown.js b/ui/src/components/btn-dropdown/QBtnDropdown.js
@@ -106,6 +106,7 @@ export default Vue.extend({
 
     this.disableDropdown !== true && Arrow.push(
       h(QMenu, {
+        key: 'menu',
         ref: 'menu',
         attrs: {
           id: this.targetUid
@@ -148,6 +149,7 @@ export default Vue.extend({
 
     if (this.split === false) {
       return h(QBtn, {
+        key: 'nonSpl',
         class: 'q-btn-dropdown q-btn-dropdown--simple',
         props: {
           ...this.$props,
@@ -171,6 +173,7 @@ export default Vue.extend({
     }
 
     const Btn = h(QBtn, {
+      key: 'spl',
       class: 'q-btn-dropdown--current',
       props: {
         ...this.$props,

diff --git a/ui/src/components/carousel/QCarousel.js b/ui/src/components/carousel/QCarousel.js
@@ -156,7 +156,7 @@ export default Vue.extend({
         const fn = this.$scopedSlots['navigation-icon'] !== void 0
           ? this.$scopedSlots['navigation-icon']
           : opts => h(QBtn, {
-            key: 'nav' + opts.name,
+            key: 'nav#' + opts.name,
             class: `q-carousel__navigation-icon q-carousel__navigation-icon--${opts.active === true ? '' : 'in'}active`,
             props: opts.btnProps,
             on: cache(this, 'nav#' + opts.name, { click: opts.onClick })
@@ -206,10 +206,10 @@ export default Vue.extend({
         if (this.infinite === true || this.panelIndex > 0) {
           node.push(
             h('div', {
-              key: 'prev',
               staticClass: `q-carousel__control q-carousel__arrow q-carousel__prev-arrow q-carousel__prev-arrow--${this.direction} absolute flex flex-center`
             }, [
               h(QBtn, {
+                key: 'prev',
                 props: { icon: this.arrowIcons[0], ...this.controlProps },
                 on: cache(this, 'prev', { click: this.previous })
               })
@@ -220,10 +220,10 @@ export default Vue.extend({
         if (this.infinite === true || this.panelIndex < this.panels.length - 1) {
           node.push(
             h('div', {
-              key: 'next',
               staticClass: `q-carousel__control q-carousel__arrow q-carousel__next-arrow q-carousel__next-arrow--${this.direction} absolute flex flex-center`
             }, [
               h(QBtn, {
+                key: 'next',
                 props: { icon: this.arrowIcons[1], ...this.controlProps },
                 on: cache(this, 'next', { click: this.next })
               })

diff --git a/ui/src/components/chip/QChip.js b/ui/src/components/chip/QChip.js
@@ -173,6 +173,7 @@ export default Vue.extend({
 
       this.removable === true && child.push(
         h(QIcon, {
+          key: 'non',
           staticClass: 'q-chip__icon q-chip__icon--remove cursor-pointer',
           props: { name: this.removeIcon },
           attrs: this.attrs.remove,
@@ -197,6 +198,7 @@ export default Vue.extend({
     }
 
     this.isClickable === true && Object.assign(data, {
+      key: 'click',
       attrs: this.attrs.chip,
       on: cache(this, 'click', {
         click: this.__onClick,

diff --git a/ui/src/components/color/QColor.js b/ui/src/components/color/QColor.js
@@ -236,6 +236,7 @@ export default Vue.extend({
 
       this.noHeaderTabs !== true && child.push(
         h(QTabs, {
+          key: 'topVTab',
           class: 'q-color-picker__header-tabs',
           props: {
             value: this.topView,
@@ -269,6 +270,7 @@ export default Vue.extend({
           staticClass: 'q-color-picker__header-banner row flex-center no-wrap'
         }, [
           h('input', {
+            key: 'topIn',
             staticClass: 'fit',
             domProps: { value: this.model[this.topView] },
             attrs: this.editable !== true ? {
@@ -336,6 +338,7 @@ export default Vue.extend({
         staticClass: 'q-color-picker__footer relative-position overflow-hidden'
       }, [
         h(QTabs, {
+          key: 'ftIn',
           staticClass: 'absolute-full',
           props: {
             value: this.view,
@@ -376,6 +379,7 @@ export default Vue.extend({
     __getSpectrumTab (h) {
       return [
         h('div', {
+          key: 'spectrT',
           ref: 'spectrum',
           staticClass: 'q-color-picker__spectrum non-selectable relative-position cursor-pointer',
           style: this.spectrumStyle,
@@ -413,6 +417,7 @@ export default Vue.extend({
           staticClass: 'q-color-picker__sliders'
         }, [
           h(QSlider, {
+            key: 'hueSlide',
             staticClass: 'q-color-picker__hue non-selectable',
             props: {
               value: this.model.h,
@@ -432,6 +437,7 @@ export default Vue.extend({
 
           this.hasAlpha === true
             ? h(QSlider, {
+              key: 'alphaSlide',
               staticClass: 'q-color-picker__alpha non-selectable',
               props: {
                 value: this.model.a,
@@ -467,6 +473,7 @@ export default Vue.extend({
         h('div', { staticClass: 'row items-center no-wrap' }, [
           h('div', ['R']),
           h(QSlider, {
+            key: 'rSlide',
             props: {
               value: this.model.r,
               min: 0,
@@ -481,6 +488,7 @@ export default Vue.extend({
             })
           }),
           h('input', {
+            key: 'rIn',
             domProps: { value: this.model.r },
             attrs,
             on: cache(this, 'rIn', {
@@ -494,6 +502,7 @@ export default Vue.extend({
         h('div', { staticClass: 'row items-center no-wrap' }, [
           h('div', ['G']),
           h(QSlider, {
+            key: 'gSlide',
             props: {
               value: this.model.g,
               min: 0,
@@ -508,6 +517,7 @@ export default Vue.extend({
             })
           }),
           h('input', {
+            key: 'gIn',
             domProps: { value: this.model.g },
             attrs,
             on: cache(this, 'gIn', {
@@ -521,6 +531,7 @@ export default Vue.extend({
         h('div', { staticClass: 'row items-center no-wrap' }, [
           h('div', ['B']),
           h(QSlider, {
+            key: 'bSlide',
             props: {
               value: this.model.b,
               min: 0,
@@ -535,6 +546,7 @@ export default Vue.extend({
             })
           }),
           h('input', {
+            key: 'bIn',
             domProps: { value: this.model.b },
             attrs,
             on: cache(this, 'bIn', {
@@ -548,6 +560,7 @@ export default Vue.extend({
         this.hasAlpha === true ? h('div', { staticClass: 'row items-center no-wrap' }, [
           h('div', ['A']),
           h(QSlider, {
+            key: 'aSlide',
             props: {
               value: this.model.a,
               color: 'grey',
@@ -560,6 +573,7 @@ export default Vue.extend({
             })
           }),
           h('input', {
+            key: 'aIn',
             domProps: { value: this.model.a },
             attrs,
             on: cache(this, 'aIn', {
@@ -580,6 +594,7 @@ export default Vue.extend({
             ? 'q-color-picker__palette-rows--editable'
             : ''
         }, this.computedPalette.map(color => h('div', {
+          key: 'palette#' + color,
           staticClass: 'q-color-picker__cube col-auto',
           style: { backgroundColor: color },
           on: this.editable === true ? cache(this, 'palette#' + color, {

diff --git a/ui/src/components/date/QDate.js b/ui/src/components/date/QDate.js
@@ -863,6 +863,7 @@ export default Vue.extend({
           ]),
 
           this.todayBtn === true ? h(QBtn, {
+            key: 'today',
             staticClass: 'q-date__header-today self-start',
             props: {
               icon: this.$q.iconSet.datetime.today,
@@ -883,6 +884,7 @@ export default Vue.extend({
           staticClass: 'row items-center q-date__arrow'
         }, [
           h(QBtn, {
+            key: 'go-#' + view,
             props: {
               round: true,
               dense: true,
@@ -906,6 +908,7 @@ export default Vue.extend({
           }, [
             h('div', { key }, [
               h(QBtn, {
+                key: 'view#' + view,
                 props: {
                   flat: true,
                   dense: true,
@@ -923,6 +926,7 @@ export default Vue.extend({
           staticClass: 'row items-center q-date__arrow'
         }, [
           h(QBtn, {
+            key: 'go+#' + view,
             props: {
               round: true,
               dense: true,
@@ -983,6 +987,7 @@ export default Vue.extend({
           }, this.daysOfWeek.map(day => h('div', { staticClass: 'q-date__calendar-item' }, [ h('div', [ day ]) ]))),
 
           h('div', {
+            key: 'kNavC',
             staticClass: 'q-date__calendar-days-container relative-position overflow-hidden',
             directives: cache(this, 'kNavC', [{
               name: 'key-group-navigation',
@@ -1000,6 +1005,7 @@ export default Vue.extend({
               }, this.days.map(day => h('div', { staticClass: day.classes }, [
                 day.in === true
                   ? h(QBtn, {
+                    key: calCachePrefix + day.i,
                     staticClass: day.today === true ? 'q-date__today' : null,
                     ref: viewTarget === day.i ? 'viewTarget' : void 0,
                     props: {
@@ -1045,6 +1051,7 @@ export default Vue.extend({
           staticClass: 'q-date__months-item flex flex-center'
         }, [
           h(QBtn, {
+            key: 'month#' + i,
             staticClass: currentYear === true && this.today.month === i + 1 ? 'q-date__today' : null,
             ref: this.viewModel.month === i + 1 ? 'viewTarget' : void 0,
             props: Object.assign(
@@ -1077,7 +1084,7 @@ export default Vue.extend({
       )
 
       return h('div', {
-        key: 'months-view',
+        key: 'kNavYM',
         staticClass: 'q-date__view q-date__months flex flex-center',
         directives: cache(this, 'kNavYM', [{
           name: 'key-group-navigation',
@@ -1114,7 +1121,7 @@ export default Vue.extend({
             staticClass: 'q-date__years-item flex flex-center'
           }, [
             h(QBtn, {
-              key: 'yr' + i,
+              key: 'yr#' + i,
               staticClass: this.today.year === i ? 'q-date__today' : null,
               ref: viewTarget === i ? 'viewTarget' : void 0,
               props: {
@@ -1140,6 +1147,7 @@ export default Vue.extend({
           staticClass: 'col-auto'
         }, [
           h(QBtn, {
+            key: 'y-',
             props: {
               round: true,
               dense: true,
@@ -1153,6 +1161,7 @@ export default Vue.extend({
         ]),
 
         h('div', {
+          key: 'kNavYM',
           staticClass: 'q-date__years-content col self-stretch row items-center',
           directives: cache(this, 'kNavYM', [{
             name: 'key-group-navigation',
@@ -1164,6 +1173,7 @@ export default Vue.extend({
           staticClass: 'col-auto'
         }, [
           h(QBtn, {
+            key: 'y+',
             props: {
               round: true,
               dense: true,

diff --git a/ui/src/components/dialog-bottom-sheet/BottomSheet.js b/ui/src/components/dialog-bottom-sheet/BottomSheet.js
@@ -166,6 +166,7 @@ export default Vue.extend({
     )
 
     return h(QDialog, {
+      key: 'dialog',
       ref: 'dialog',
       props: this.dialogProps,
       on: cache(this, 'hide', {

diff --git a/ui/src/components/dialog-plugin/DialogPlugin.js b/ui/src/components/dialog-plugin/DialogPlugin.js
@@ -148,6 +148,7 @@ export default Vue.extend({
     getPrompt (h) {
       return [
         h(QInput, {
+          key: 'prompt',
           props: {
             value: this.prompt.model,
             type: this.prompt.type,
@@ -192,6 +193,7 @@ export default Vue.extend({
     getOptions (h) {
       return [
         h(QOptionGroup, {
+          key: 'opts',
           props: {
             value: this.options.model,
             type: this.options.type,
@@ -211,12 +213,14 @@ export default Vue.extend({
       const child = []
 
       this.cancel && child.push(h(QBtn, {
+        key: 'cancel',
         props: this.cancelProps,
         attrs: { 'data-autofocus': this.focus === 'cancel' && this.hasForm !== true },
         on: cache(this, 'cancel', { click: this.onCancel })
       }))
 
       this.ok && child.push(h(QBtn, {
+        key: 'ok',
         props: this.okProps,
         attrs: { 'data-autofocus': this.focus === 'ok' && this.hasForm !== true },
         on: cache(this, 'ok', { click: this.onOk })
@@ -303,6 +307,7 @@ export default Vue.extend({
     }
 
     return h(QDialog, {
+      key: 'dialog',
       ref: 'dialog',
 
       props: {

diff --git a/ui/src/components/expansion-item/QExpansionItem.js b/ui/src/components/expansion-item/QExpansionItem.js
@@ -208,6 +208,7 @@ export default Vue.extend({
 
       if (this.activeToggleIcon === true) {
         Object.assign(data, {
+          key: 'inpExt',
           attrs: {
             tabindex: 0,
             ...this.toggleAriaAttrs
@@ -305,6 +306,7 @@ export default Vue.extend({
         this.__getHeader(h),
 
         h(QSlideTransition, {
+          key: 'slide',
           props: { duration: this.duration },
           on: cache(this, 'slide', {
             show: () => { this.$emit('after-show') },

diff --git a/ui/src/components/fab/QFab.js b/ui/src/components/fab/QFab.js
@@ -143,6 +143,7 @@ export default Vue.extend({
       on: { ...this.qListeners }
     }, [
       h(QBtn, {
+        key: 'tog',
         ref: 'trigger',
         class: this.formClass,
         props: {

diff --git a/ui/src/components/file/QFile.js b/ui/src/components/file/QFile.js
@@ -166,6 +166,7 @@ export default Vue.extend({
 
     __getControl (h) {
       const data = {
+        key: 'target',
         ref: 'target',
         staticClass: 'q-field__native row items-center cursor-pointer',
         attrs: {
@@ -215,7 +216,7 @@ export default Vue.extend({
         return this.innerValue.length === 0
           ? this.__getFiller(h)
           : this.innerValue.map((file, i) => h(QChip, {
-            key: 'file-' + i,
+            key: 'rem#' + i,
             props: {
               removable: this.editable,
               dense: true,
@@ -252,6 +253,7 @@ export default Vue.extend({
 
     __getInput (h) {
       const data = {
+        key: 'input',
         ref: 'input',
         staticClass: 'q-field__input fit absolute-full cursor-pointer',
         attrs: this.inputAttrs,

diff --git a/ui/src/components/footer/QFooter.js b/ui/src/components/footer/QFooter.js
@@ -150,6 +150,7 @@ export default Vue.extend({
   render (h) {
     const child = mergeSlot([
       h(QResizeObserver, {
+        key: 'resize',
         props: { debounce: 0 },
         on: cache(this, 'resize', { resize: this.__onResize })
       })