@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

package/src/components/VCard/__tests__/VCard.spec.ts

@@ -1,7 +1,7 @@
 import {
   mount,
   VueWrapper,
-  MountingOptions,
+  MountingOptions
 } from '@vue/test-utils'
 import VCard from '../VCard'
 
@@ -17,16 +17,16 @@ describe('VCard.vue', () => {
             $vuetify: {
               rtl: false,
               lang: {
-                t: (val: string) => val,
+                t: (val: string) => val
               },
               icons: {
-                component: 'mdi',
-              },
+                component: 'mdi'
+              }
             },
-            $activeClass: 'v-card--active',
-          },
+            $activeClass: 'v-card--active'
+          }
         },
-        slots: {},
+        slots: {}
       }
 
       // Объединяем опции правильно
@@ -35,12 +35,12 @@ describe('VCard.vue', () => {
         ...options,
         slots: {
           ...defaultOptions.slots,
-          ...options?.slots,
+          ...options?.slots
         },
         global: {
           ...defaultOptions.global,
-          ...options?.global,
-        },
+          ...options?.global
+        }
       }
 
       return mount(VCard, mergedOptions)
@@ -56,8 +56,8 @@ describe('VCard.vue', () => {
   it('should render loading card', () => {
     const wrapper = mountFunction({
       props: {
-        loading: true,
-      },
+        loading: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -66,8 +66,8 @@ describe('VCard.vue', () => {
   it('should render card, which is link', () => {
     const wrapper = mountFunction({
       attrs: {
-        onClick: () => {},
-      },
+        onClick: () => {}
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -76,8 +76,8 @@ describe('VCard.vue', () => {
   it('should render card with img', () => {
     const wrapper = mountFunction({
       props: {
-        img: 'image.jpg',
-      },
+        img: 'image.jpg'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -86,8 +86,8 @@ describe('VCard.vue', () => {
   it('should render a flat card', () => {
     const wrapper = mountFunction({
       props: {
-        flat: true,
-      },
+        flat: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -96,8 +96,8 @@ describe('VCard.vue', () => {
   it('should render a raised card', () => {
     const wrapper = mountFunction({
       props: {
-        raised: true,
-      },
+        raised: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -107,15 +107,15 @@ describe('VCard.vue', () => {
     const heightpx = '400px'
     const wrapper = mountFunction({
       props: {
-        height: heightpx,
-      },
+        height: heightpx
+      }
     })
 
     expect(wrapper.element.style.height).toBe(heightpx)
     expect(wrapper.html()).toMatchSnapshot()
 
     await wrapper.setProps({
-      height: 401,
+      height: 401
     })
     expect(wrapper.element.style.height).toBe('401px')
   })

package/src/components/VCard/index.ts

@@ -11,7 +11,7 @@ export {
   VCardActions,
   VCardSubtitle,
   VCardText,
-  VCardTitle,
+  VCardTitle
 }
 
 export default {
@@ -20,6 +20,6 @@ export default {
     VCardActions,
     VCardSubtitle,
     VCardText,
-    VCardTitle,
-  },
+    VCardTitle
+  }
 }

package/src/components/VCarousel/VCarousel.ts

@@ -27,56 +27,56 @@ export default defineComponent({
   // pass down the parent's theme
   provide (): object {
     return {
-      parentTheme: this.theme,
+      parentTheme: this.theme
     }
   },
 
   props: {
     continuous: {
       type: Boolean,
-      default: true,
+      default: true
     },
     cycle: Boolean,
     delimiterIcon: {
       type: String,
-      default: '$delimiter',
+      default: '$delimiter'
     },
     height: {
       type: [Number, String],
-      default: 500,
+      default: 500
     },
     hideDelimiters: Boolean,
     hideDelimiterBackground: Boolean,
     interval: {
       type: [Number, String],
       default: 6000,
-      validator: (value: string | number) => value > 0,
+      validator: (value: string | number) => Number(value) > 0
     },
     mandatory: {
       type: Boolean,
-      default: true,
+      default: true
     },
     progress: Boolean,
     progressColor: String,
     showArrows: {
       type: Boolean,
-      default: true,
+      default: true
     },
     verticalDelimiters: {
       type: String as PropType<'' | 'left' | 'right'>,
-      default: undefined,
-    },
+      default: undefined
+    }
   },
 
   emits: [
     'update:modelValue',
-    'change',
+    'change'
   ],
 
   data () {
     return {
       internalHeight: this.height,
-      slideTimeout: undefined as number | undefined,
+      slideTimeout: undefined as number | undefined
     }
   },
 
@@ -86,7 +86,7 @@ export default defineComponent({
         ...VWindow.computed.classes.call(this),
         'v-carousel': true,
         'v-carousel--hide-delimiter-background': this.hideDelimiterBackground,
-        'v-carousel--vertical-delimiters': this.isVertical,
+        'v-carousel--vertical-delimiters': this.isVertical
       }
     },
     isDark (): boolean {
@@ -94,7 +94,7 @@ export default defineComponent({
     },
     isVertical (): boolean {
       return this.verticalDelimiters != null
-    },
+    }
   },
 
   watch: {
@@ -111,14 +111,14 @@ export default defineComponent({
         clearTimeout(this.slideTimeout)
         this.slideTimeout = undefined
       }
-    },
+    }
   },
 
   created () {
     const breakingProps = [
       ['value', 'modelValue'],
       ['onInput', 'onUpdate:modelValue'],
-      ['onChange', 'onUpdate:modelValue'],
+      ['onChange', 'onUpdate:modelValue']
     ]
 
     /* istanbul ignore next */
@@ -147,8 +147,8 @@ export default defineComponent({
         class: 'v-carousel__controls',
         style: {
           left: this.verticalDelimiters === 'left' && this.isVertical ? 0 : 'auto',
-          right: this.verticalDelimiters === 'right' ? 0 : 'auto',
-        },
+          right: this.verticalDelimiters === 'right' ? 0 : 'auto'
+        }
       }, [this.genItems()])
     },
     genItems (): VNode {
@@ -162,11 +162,11 @@ export default defineComponent({
           icon: true,
           small: true,
           value: this.getValue(this.items[i], i),
-          key: i,
+          key: i
         }, () => [
           h(VIcon, {
-            size: 18,
-          }, () => this.delimiterIcon),
+            size: 18
+          }, () => this.delimiterIcon)
         ])
 
         children.push(child)
@@ -177,14 +177,14 @@ export default defineComponent({
         mandatory: this.mandatory,
         onChange: (val: unknown) => {
           this.internalValue = val
-        },
+        }
       }, () => children)
     },
     genProgress () {
       return h(VProgressLinear, {
         class: 'v-carousel__progress',
         color: this.progressColor,
-        value: (this.internalIndex + 1) / this.items.length * 100,
+        value: (this.internalIndex + 1) / this.items.length * 100
       })
     },
     restartTimeout () {
@@ -197,7 +197,7 @@ export default defineComponent({
       if (!this.cycle) return
 
       this.slideTimeout = window.setTimeout(this.next, +this.interval > 0 ? +this.interval : 6000)
-    },
+    }
   },
 
   render (): VNode {
@@ -207,13 +207,13 @@ export default defineComponent({
     if (render.props) {
       render.props.style = {
         ...render.props.style,
-        height: convertToUnit(this.height),
+        height: convertToUnit(this.height)
       }
     } else {
       render.props = {
         style: {
-          height: convertToUnit(this.height),
-        },
+          height: convertToUnit(this.height)
+        }
       }
     }
 
@@ -228,5 +228,5 @@ export default defineComponent({
     }
 
     return render
-  },
+  }
 })

package/src/components/VCarousel/VCarouselItem.ts

@@ -6,7 +6,7 @@ import { VImg } from '../VImg'
 
 // Utilities
 import mixins, { ExtractVue } from '../../util/mixins'
-import { getSlot } from '../../util/helpers'
+import { getSlot, getTagValue } from '../../util/helpers'
 import Routable from '../../mixins/routable'
 import { vShow, withDirectives, h } from 'vue'
 
@@ -16,7 +16,7 @@ const baseMixins = mixins(
   Routable
 )
 
-interface options extends ExtractVue<typeof baseMixins> {
+type options = ExtractVue<typeof baseMixins> & {
   parentTheme: {
     isDark: boolean
   }
@@ -29,15 +29,15 @@ export default baseMixins.extend({
   inject: {
     parentTheme: {
       default: {
-        isDark: false,
-      },
-    },
+        isDark: false
+      }
+    }
   },
 
   // pass down the parent's theme
   provide (): object {
     return {
-      theme: this.parentTheme,
+      theme: this.parentTheme
     }
   },
 
@@ -50,8 +50,8 @@ export default baseMixins.extend({
           class: 'v-carousel__item',
           ...this.$attrs,
           height: this.windowGroup.internalHeight,
-          ...this.$listeners,
-        }, { default: () => getSlot(this), placeholder: this.$slots.placeholder }),
+          ...this.$listeners
+        }, { default: () => getSlot(this), placeholder: this.$slots.placeholder })
       ]
     },
     genWindowItem () {
@@ -61,13 +61,17 @@ export default baseMixins.extend({
 
       directives!.push([
         vShow,
-        this.isActive,
+        this.isActive
       ])
 
+      const content = this.genDefaultSlot()
+
       return withDirectives(
-        h(tag, data, this.genDefaultSlot()),
+        typeof tag === 'string'
+          ? h(getTagValue(tag), data, content)
+          : h(tag, data, () => content),
         directives
       )
-    },
-  },
+    }
+  }
 })

package/src/components/VCarousel/__tests__/VCarousel.spec.ts

@@ -11,7 +11,7 @@ import {
   mount,
   MountingOptions,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import { waitAnimationFrame } from '../../../../test'
 import { VThemeProvider } from '../../VThemeProvider'
@@ -31,23 +31,23 @@ describe('VCarousel.ts', () => {
             $vuetify: {
               rtl: false,
               lang: {
-                t: str => str,
+                t: str => str
               },
               icons: {
-                component: null,
-              },
-            },
-          },
+                component: null
+              }
+            }
+          }
         },
-        ...options,
+        ...options
       })
     }
   })
 
   // TODO: animation frame not starting with jest 24
-  it.skip('it should restart or clear timeout on cycle change', async () => {
+  it.skip('should restart or clear timeout on cycle change', async () => {
     const wrapper = mountFunction({
-      props: { cycle: false },
+      props: { cycle: false }
     })
 
     const restartTimeout = jest.spyOn(wrapper.vm, 'restartTimeout')
@@ -70,7 +70,7 @@ describe('VCarousel.ts', () => {
 
   it('should generate vertical delimiters', async () => {
     const wrapper = mountFunction({
-      props: { verticalDelimiters: 'left' },
+      props: { verticalDelimiters: 'left' }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -83,12 +83,12 @@ describe('VCarousel.ts', () => {
   it('should generate delimiters for each item', async () => {
     const wrapper = mountFunction({
       slots: {
-        default: [
-          { extends: VCarouselItem },
-          { extends: VCarouselItem },
-          { extends: VCarouselItem },
-        ],
-      },
+        default: () => [
+          h(VCarouselItem),
+          h(VCarouselItem),
+          h(VCarouselItem)
+        ]
+      }
     })
 
     await wrapper.vm.$nextTick()
@@ -109,8 +109,8 @@ describe('VCarousel.ts', () => {
   it('should render a progress component', async () => {
     const wrapper = mountFunction({
       props: {
-        progress: true,
-      },
+        progress: true
+      }
     })
 
     expect(wrapper.findComponent(VProgressLinear).element).toBeTruthy()
@@ -133,15 +133,16 @@ describe('VCarousel.ts', () => {
   })
 
   it('should have the correct theme', async () => {
-    const localMountFunction = (options?: MountingOptions<Instance>, props?: object) => {
+    const localMountFunction = (options?: MountingOptions<Instance>, carouselProps?: object) => {
+      const p = carouselProps || {}
       return mount({
         render () {
-          return h(VCarousel, { props }, [
-            h(VCarouselItem, [
-              h(VThemeProvider, 'test'),
-            ]),
+          return h(VCarousel, p, () => [
+            h(VCarouselItem, {}, () => [
+              h(VThemeProvider, {}, () => 'test')
+            ])
           ])
-        },
+        }
       }, {
         sync: false,
         global: {
@@ -149,15 +150,15 @@ describe('VCarousel.ts', () => {
             $vuetify: {
               rtl: false,
               lang: {
-                t: str => str,
+                t: str => str
               },
               icons: {
-                component: null,
-              },
-            },
-          },
+                component: null
+              }
+            }
+          }
         },
-        ...options,
+        ...options
       }).findComponent(VCarousel) as VueWrapper<Instance>
     }
 
@@ -187,13 +188,15 @@ describe('VCarousel.ts', () => {
   it('should not throw an error in a v-if', async () => {
     const wrapper = mount({
       props: {
-        show: Boolean,
+        show: Boolean
       },
       render () {
-        return h('div', this.show ? [
-          h(VCarousel, [h(VCarouselItem, 'test')]),
-        ] : [])
-      },
+        return h('div', this.show
+          ? [
+              h(VCarousel, {}, () => [h(VCarouselItem, {}, () => 'test')])
+            ]
+          : [])
+      }
     }, {
       sync: false,
       global: {
@@ -201,17 +204,17 @@ describe('VCarousel.ts', () => {
           $vuetify: {
             rtl: false,
             lang: {
-              t: str => str,
+              t: str => str
             },
             icons: {
-              component: null,
-            },
-          },
-        },
+              component: null
+            }
+          }
+        }
       },
       props: {
-        show: false,
-      },
+        show: false
+      }
     }) as VueWrapper<Instance>
 
     await wrapper.vm.$nextTick()

package/src/components/VCarousel/__tests__/VCarouselItem.spec.ts

@@ -2,7 +2,7 @@ import {
   mount,
   MountingOptions,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import VCarouselItem from '../VCarouselItem'
 
@@ -24,8 +24,8 @@ describe('VCarouselItem.ts', () => {
   it('should throw warning when not used inside v-carousel', () => {
     const wrapper = mountFunction({
       props: {
-        src: imageSrc,
-      },
+        src: imageSrc
+      }
     })
 
     expect(warning).toHaveBeenTipped()

package/src/components/VCarousel/index.ts

@@ -6,6 +6,6 @@ export { VCarousel, VCarouselItem }
 export default {
   $_vuetify_subcomponents: {
     VCarousel,
-    VCarouselItem,
-  },
+    VCarouselItem
+  }
 }

package/src/components/VCheckbox/VCheckbox.ts

@@ -23,23 +23,23 @@ export default defineComponent({
     indeterminate: Boolean,
     indeterminateIcon: {
       type: String,
-      default: '$checkboxIndeterminate',
+      default: '$checkboxIndeterminate'
     },
     offIcon: {
       type: String,
-      default: '$checkboxOff',
+      default: '$checkboxOff'
     },
     onIcon: {
       type: String,
-      default: '$checkboxOn',
-    },
+      default: '$checkboxOn'
+    }
   },
 
   emits: ['click', 'focus', 'blur', 'update:indeterminate', 'update:modelValue', 'change'],
 
   data () {
     return {
-      inputIndeterminate: this.indeterminate,
+      inputIndeterminate: this.indeterminate
     }
   },
 
@@ -49,7 +49,7 @@ export default defineComponent({
         ...VInput.computed.classes.call(this),
         'v-input--selection-controls': true,
         'v-input--checkbox': true,
-        'v-input--indeterminate': this.inputIndeterminate,
+        'v-input--indeterminate': this.inputIndeterminate
       }
     },
     computedIcon (): string {
@@ -70,7 +70,7 @@ export default defineComponent({
       if (this.hasSuccess) return 'success'
       if (this.hasColor !== null) return this.computedColor
       return undefined
-    },
+    }
   },
 
   watch: {
@@ -80,13 +80,13 @@ export default defineComponent({
     },
     inputIndeterminate (val) {
       this.$emit('update:indeterminate', val)
-    },
+    }
   },
 
   created () {
     const breakingProps = [
       ['inputValue', 'model-value'],
-      ['input-value', 'model-value'],
+      ['input-value', 'model-value']
     ]
 
     /* istanbul ignore next */
@@ -100,25 +100,25 @@ export default defineComponent({
       const { title, class: parentClass, ...checkboxAttrs } = this.$attrs
       const ariaChecked = this.inputIndeterminate ? 'mixed' : this.isActive.toString()
       return h('div', {
-        class: 'v-input--selection-controls__input',
+        class: 'v-input--selection-controls__input'
       }, [
         h(VIcon, this.setTextColor(this.validationState, {
           dense: this.dense,
           dark: this.dark,
-          light: this.light,
+          light: this.light
         }), () => this.computedIcon),
         this.genInput('checkbox', {
           ...checkboxAttrs,
-          'aria-checked': ariaChecked,
+          'aria-checked': ariaChecked
         }),
-        this.genRipple(this.setTextColor(this.rippleState)),
+        this.genRipple(this.setTextColor(this.rippleState))
       ])
     },
     genDefaultSlot () {
       return [
         this.genCheckbox(),
-        this.genLabel(),
+        this.genLabel()
       ]
-    },
-  },
+    }
+  }
 })