vuetify 2.4.0 → 2.4.4

package/lib/services/theme/utils.js

@@ -1,3 +1,4 @@
+import { keys } from '../../util/helpers';
 import { colorToInt, intToHex, colorToHex } from '../../util/colorUtils';
 import * as sRGB from '../../util/color/transformSRGB';
 import * as LAB from '../../util/color/transformCIELAB';
@@ -91,7 +92,7 @@ export function genStyles(theme, cssVar = false) {
     const value = theme[name];
     css += genBaseColor(name, cssVar ? genColorVariable(name) : value.base);
     cssVar && (variablesCss += `  ${genColorVariableName(name)}: ${value.base};\n`);
-    const variants = Object.keys(value);
+    const variants = keys(value);
 
     for (let i = 0; i < variants.length; ++i) {
       const variant = variants[i];

package/lib/services/theme/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/services/theme/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { colorToInt, intToHex, colorToHex, ColorInt } from '../../util/colorUtils'\nimport * as sRGB from '../../util/color/transformSRGB'\nimport * as LAB from '../../util/color/transformCIELAB'\nimport {\n  VuetifyParsedTheme,\n  VuetifyThemeItem,\n} from 'vuetify/types/services/theme'\n\nexport function parse (\n  theme: Record<string, VuetifyThemeItem>,\n  isItem = false,\n  variations = true,\n): VuetifyParsedTheme {\n  const { anchor, ...variant } = theme\n  const colors = Object.keys(variant)\n  const parsedTheme: any = {}\n\n  for (let i = 0; i < colors.length; ++i) {\n    const name = colors[i]\n    const value = theme[name]\n\n    if (value == null) continue\n\n    if (!variations) {\n      parsedTheme[name] = { base: intToHex(colorToInt(value)) }\n    } else if (isItem) {\n      /* istanbul ignore else */\n      if (name === 'base' || name.startsWith('lighten') || name.startsWith('darken')) {\n        parsedTheme[name] = colorToHex(value)\n      }\n    } else if (typeof value === 'object') {\n      parsedTheme[name] = parse(value, true, variations)\n    } else {\n      parsedTheme[name] = genVariations(name, colorToInt(value))\n    }\n  }\n\n  if (!isItem) {\n    parsedTheme.anchor = anchor || parsedTheme.base || parsedTheme.primary.base\n  }\n\n  return parsedTheme\n}\n\n/**\n * Generate the CSS for a base color (.primary)\n */\nconst genBaseColor = (name: string, value: string): string => {\n  return `\n.v-application .${name} {\n  background-color: ${value} !important;\n  border-color: ${value} !important;\n}\n.v-application .${name}--text {\n  color: ${value} !important;\n  caret-color: ${value} !important;\n}`\n}\n\n/**\n * Generate the CSS for a variant color (.primary.darken-2)\n */\nconst genVariantColor = (name: string, variant: string, value: string): string => {\n  const [type, n] = variant.split(/(\\d)/, 2)\n  return `\n.v-application .${name}.${type}-${n} {\n  background-color: ${value} !important;\n  border-color: ${value} !important;\n}\n.v-application .${name}--text.text--${type}-${n} {\n  color: ${value} !important;\n  caret-color: ${value} !important;\n}`\n}\n\nconst genColorVariableName = (name: string, variant = 'base'): string => `--v-${name}-${variant}`\n\nconst genColorVariable = (name: string, variant = 'base'): string => `var(${genColorVariableName(name, variant)})`\n\nexport function genStyles (theme: VuetifyParsedTheme, cssVar = false): string {\n  const { anchor, ...variant } = theme\n  const colors = Object.keys(variant)\n\n  if (!colors.length) return ''\n\n  let variablesCss = ''\n  let css = ''\n\n  const aColor = cssVar ? genColorVariable('anchor') : anchor\n  css += `.v-application a { color: ${aColor}; }`\n  cssVar && (variablesCss += `  ${genColorVariableName('anchor')}: ${anchor};\\n`)\n\n  for (let i = 0; i < colors.length; ++i) {\n    const name = colors[i]\n    const value = theme[name]\n\n    css += genBaseColor(name, cssVar ? genColorVariable(name) : value.base)\n    cssVar && (variablesCss += `  ${genColorVariableName(name)}: ${value.base};\\n`)\n\n    const variants = Object.keys(value)\n    for (let i = 0; i < variants.length; ++i) {\n      const variant = variants[i]\n      const variantValue = value[variant]\n      if (variant === 'base') continue\n\n      css += genVariantColor(name, variant, cssVar ? genColorVariable(name, variant) : variantValue)\n      cssVar && (variablesCss += `  ${genColorVariableName(name, variant)}: ${variantValue};\\n`)\n    }\n  }\n\n  if (cssVar) {\n    variablesCss = `:root {\\n${variablesCss}}\\n\\n`\n  }\n\n  return variablesCss + css\n}\n\nexport function genVariations (name: string, value: ColorInt): Record<string, string> {\n  const values: Record<string, string> = {\n    base: intToHex(value),\n  }\n\n  for (let i = 5; i > 0; --i) {\n    values[`lighten${i}`] = intToHex(lighten(value, i))\n  }\n\n  for (let i = 1; i <= 4; ++i) {\n    values[`darken${i}`] = intToHex(darken(value, i))\n  }\n\n  return values\n}\n\nexport function lighten (value: ColorInt, amount: number): ColorInt {\n  const lab = LAB.fromXYZ(sRGB.toXYZ(value))\n  lab[0] = lab[0] + amount * 10\n  return sRGB.fromXYZ(LAB.toXYZ(lab))\n}\n\nexport function darken (value: ColorInt, amount: number): ColorInt {\n  const lab = LAB.fromXYZ(sRGB.toXYZ(value))\n  lab[0] = lab[0] - amount * 10\n  return sRGB.fromXYZ(LAB.toXYZ(lab))\n}\n"],"sourceRoot":"","file":"utils.js"}
+{"version":3,"sources":["../../../src/services/theme/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { keys } from '../../util/helpers'\nimport { colorToInt, intToHex, colorToHex, ColorInt } from '../../util/colorUtils'\nimport * as sRGB from '../../util/color/transformSRGB'\nimport * as LAB from '../../util/color/transformCIELAB'\nimport {\n  VuetifyParsedTheme,\n  VuetifyThemeItem,\n} from 'vuetify/types/services/theme'\n\nexport function parse (\n  theme: Record<string, VuetifyThemeItem>,\n  isItem = false,\n  variations = true,\n): VuetifyParsedTheme {\n  const { anchor, ...variant } = theme\n  const colors = Object.keys(variant)\n  const parsedTheme: any = {}\n\n  for (let i = 0; i < colors.length; ++i) {\n    const name = colors[i]\n    const value = theme[name]\n\n    if (value == null) continue\n\n    if (!variations) {\n      parsedTheme[name] = { base: intToHex(colorToInt(value)) }\n    } else if (isItem) {\n      /* istanbul ignore else */\n      if (name === 'base' || name.startsWith('lighten') || name.startsWith('darken')) {\n        parsedTheme[name] = colorToHex(value)\n      }\n    } else if (typeof value === 'object') {\n      parsedTheme[name] = parse(value, true, variations)\n    } else {\n      parsedTheme[name] = genVariations(name, colorToInt(value))\n    }\n  }\n\n  if (!isItem) {\n    parsedTheme.anchor = anchor || parsedTheme.base || parsedTheme.primary.base\n  }\n\n  return parsedTheme\n}\n\n/**\n * Generate the CSS for a base color (.primary)\n */\nconst genBaseColor = (name: string, value: string): string => {\n  return `\n.v-application .${name} {\n  background-color: ${value} !important;\n  border-color: ${value} !important;\n}\n.v-application .${name}--text {\n  color: ${value} !important;\n  caret-color: ${value} !important;\n}`\n}\n\n/**\n * Generate the CSS for a variant color (.primary.darken-2)\n */\nconst genVariantColor = (name: string, variant: string, value: string): string => {\n  const [type, n] = variant.split(/(\\d)/, 2)\n  return `\n.v-application .${name}.${type}-${n} {\n  background-color: ${value} !important;\n  border-color: ${value} !important;\n}\n.v-application .${name}--text.text--${type}-${n} {\n  color: ${value} !important;\n  caret-color: ${value} !important;\n}`\n}\n\nconst genColorVariableName = (name: string, variant = 'base'): string => `--v-${name}-${variant}`\n\nconst genColorVariable = (name: string, variant = 'base'): string => `var(${genColorVariableName(name, variant)})`\n\nexport function genStyles (theme: VuetifyParsedTheme, cssVar = false): string {\n  const { anchor, ...variant } = theme\n  const colors = Object.keys(variant)\n\n  if (!colors.length) return ''\n\n  let variablesCss = ''\n  let css = ''\n\n  const aColor = cssVar ? genColorVariable('anchor') : anchor\n  css += `.v-application a { color: ${aColor}; }`\n  cssVar && (variablesCss += `  ${genColorVariableName('anchor')}: ${anchor};\\n`)\n\n  for (let i = 0; i < colors.length; ++i) {\n    const name = colors[i]\n    const value = theme[name]\n\n    css += genBaseColor(name, cssVar ? genColorVariable(name) : value.base)\n    cssVar && (variablesCss += `  ${genColorVariableName(name)}: ${value.base};\\n`)\n\n    const variants = keys(value)\n    for (let i = 0; i < variants.length; ++i) {\n      const variant = variants[i]\n      const variantValue = value[variant]\n      if (variant === 'base') continue\n\n      css += genVariantColor(name, variant, cssVar ? genColorVariable(name, variant) : variantValue)\n      cssVar && (variablesCss += `  ${genColorVariableName(name, variant)}: ${variantValue};\\n`)\n    }\n  }\n\n  if (cssVar) {\n    variablesCss = `:root {\\n${variablesCss}}\\n\\n`\n  }\n\n  return variablesCss + css\n}\n\nexport function genVariations (name: string, value: ColorInt): Record<string, string> {\n  const values: Record<string, string> = {\n    base: intToHex(value),\n  }\n\n  for (let i = 5; i > 0; --i) {\n    values[`lighten${i}`] = intToHex(lighten(value, i))\n  }\n\n  for (let i = 1; i <= 4; ++i) {\n    values[`darken${i}`] = intToHex(darken(value, i))\n  }\n\n  return values\n}\n\nexport function lighten (value: ColorInt, amount: number): ColorInt {\n  const lab = LAB.fromXYZ(sRGB.toXYZ(value))\n  lab[0] = lab[0] + amount * 10\n  return sRGB.fromXYZ(LAB.toXYZ(lab))\n}\n\nexport function darken (value: ColorInt, amount: number): ColorInt {\n  const lab = LAB.fromXYZ(sRGB.toXYZ(value))\n  lab[0] = lab[0] - amount * 10\n  return sRGB.fromXYZ(LAB.toXYZ(lab))\n}\n"],"sourceRoot":"","file":"utils.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "2.4.0",
+  "version": "2.4.4",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"
@@ -114,5 +114,5 @@
     "attributes": "dist/json/attributes.json"
   },
   "web-types": "dist/json/web-types.json",
-  "gitHead": "be8e7a77eafad8925432a4a3abf22f3b8e6f04f8"
+  "gitHead": "eeefd9cb112aea7a7edf60629c470fdbd0b08721"
 }

package/src/components/VAlert/__tests__/__snapshots__/VAlert.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`VAlert.ts should be dismissible 1`] = `
     <div class="v-alert__content">
     </div>
     <button type="button"
-            class="v-alert__dismissible v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
+            class="v-alert__dismissible v-btn v-btn--icon v-btn--round theme--light v-size--small"
             aria-label="$vuetify.close"
     >
       <span class="v-btn__content">
@@ -55,7 +55,7 @@ exports[`VAlert.ts should have a close icon 1`] = `
     <div class="v-alert__content">
     </div>
     <button type="button"
-            class="v-alert__dismissible v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
+            class="v-alert__dismissible v-btn v-btn--icon v-btn--round theme--light v-size--small"
             aria-label="$vuetify.close"
     >
       <span class="v-btn__content">

package/src/components/VAppBar/__tests__/__snapshots__/VAppBarNavIcon.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`AppBarNavIcon.ts should render correctly 1`] = `
 <button type="button"
-        class="v-app-bar__nav-icon v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default"
+        class="v-app-bar__nav-icon v-btn v-btn--icon v-btn--round theme--light v-size--default"
 >
   <span class="v-btn__content">
     <i aria-hidden="true"

package/src/components/VBottomNavigation/__tests__/__snapshots__/VBottomNavigation.spec.ts.snap

@@ -12,13 +12,13 @@ exports[`VBottomNavigation.ts should be visible with a true value 2`] = `
      style="height: 56px; transform: none;"
 >
   <button type="button"
-          class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+          class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
   >
     <span class="v-btn__content">
     </span>
   </button>
   <button type="button"
-          class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+          class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
   >
     <span class="v-btn__content">
     </span>
@@ -38,13 +38,13 @@ exports[`VBottomNavigation.ts should be visible with a true value 4`] = `
      style="height: 56px; transform: translateY(100%);"
 >
   <button type="button"
-          class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+          class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
   >
     <span class="v-btn__content">
     </span>
   </button>
   <button type="button"
-          class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+          class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
   >
     <span class="v-btn__content">
     </span>

package/src/components/VBtn/VBtn.sass

@@ -102,6 +102,7 @@
   // https://stackoverflow.com/questions/10305658/prevent-button-from-shifting-during-click-in-ie
   position: relative
   transition: inherit
+  transition-property: opacity
 
   .v-icon--left,
   .v-icon--right
@@ -231,11 +232,6 @@
 .v-btn--outlined
   border: $btn-outline-border-width solid currentColor
 
-.v-btn:not(.v-btn--has-bg)
-  .v-btn__content
-    .v-icon
-      color: currentColor
-
 .v-btn--plain
   &::before
     display: none

package/src/components/VBtn/VBtn.ts

@@ -10,6 +10,7 @@ import VProgressCircular from '../VProgressCircular'
 // Mixins
 import { factory as GroupableFactory } from '../../mixins/groupable'
 import { factory as ToggleableFactory } from '../../mixins/toggleable'
+import Elevatable from '../../mixins/elevatable'
 import Positionable from '../../mixins/positionable'
 import Routable from '../../mixins/routable'
 import Sizeable from '../../mixins/sizeable'
@@ -82,13 +83,10 @@ export default baseMixins.extend<options>().extend({
         'v-btn--absolute': this.absolute,
         'v-btn--block': this.block,
         'v-btn--bottom': this.bottom,
-        'v-btn--contained': this.isElevated, // TODO: remove v3
-        'v-btn--depressed': (this.depressed) || this.outlined, // TODO: remove v3
         'v-btn--disabled': this.disabled,
         'v-btn--is-elevated': this.isElevated,
         'v-btn--fab': this.fab,
         'v-btn--fixed': this.fixed,
-        'v-btn--flat': !this.isElevated, // TODO: remove v3,
         'v-btn--has-bg': this.hasBg,
         'v-btn--icon': this.icon,
         'v-btn--left': this.left,
@@ -108,13 +106,18 @@ export default baseMixins.extend<options>().extend({
         ...this.sizeableClasses,
       }
     },
+    computedElevation (): string | number | undefined {
+      if (this.disabled) return undefined
+
+      return Elevatable.options.computed.computedElevation.call(this)
+    },
     computedRipple (): RippleOptions | boolean {
       const defaultRipple = this.icon || this.fab ? { circle: true } : true
       if (this.disabled) return false
       else return this.ripple ?? defaultRipple
     },
     hasBg (): boolean {
-      return this.isElevated || this.depressed
+      return !this.text && !this.plain && !this.outlined && !this.icon
     },
     isElevated (): boolean {
       return Boolean(
@@ -123,8 +126,9 @@ export default baseMixins.extend<options>().extend({
         !this.outlined &&
         !this.depressed &&
         !this.disabled &&
-        !this.plain
-      ) || Number(this.elevation) > 0
+        !this.plain &&
+        (this.elevation == null || Number(this.elevation) > 0)
+      )
     },
     isRound (): boolean {
       return Boolean(
@@ -184,7 +188,7 @@ export default baseMixins.extend<options>().extend({
       this.loading && this.genLoader(),
     ]
     const { tag, data } = this.generateRouteLink()
-    const setColor = (this.isElevated || this.depressed)
+    const setColor = this.hasBg
       ? this.setBackgroundColor
       : this.setTextColor
 

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

@@ -152,38 +152,6 @@ describe('VBtn.ts', () => { // eslint-disable-line max-statements
     expect(wrapper.classes('foo')).toBe(true)
   })
 
-  it('should have v-btn--depressed class when using depressed prop', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        depressed: true,
-      },
-    })
-
-    expect(wrapper.classes('v-btn--depressed')).toBe(true)
-  })
-
-  it('should have v-btn--flat class when using flat and depressed props', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        depressed: true,
-        text: true,
-      },
-    })
-
-    expect(wrapper.classes('v-btn--text')).toBe(true)
-  })
-
-  it('should have v-btn--outlined and v-btn--depressed classes when using outlined prop', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        outlined: true,
-      },
-    })
-
-    expect(wrapper.classes('v-btn--outlined')).toBe(true)
-    expect(wrapper.classes('v-btn--depressed')).toBe(true)
-  })
-
   it('should have v-btn--plain class when plain prop is set to true', () => {
     const wrapper = mountFunction({
       propsData: {
@@ -284,7 +252,7 @@ describe('VBtn.ts', () => { // eslint-disable-line max-statements
   it('should not add color classes if disabled', () => {
     const wrapper = mountFunction({
       propsData: {
-        color: 'primary--text text--darken-2',
+        color: 'primary darken-2',
       },
     })
 

package/src/components/VBtn/__tests__/__snapshots__/VBtn.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`VBtn.ts should not add color classes if disabled 1`] = `
 <button type="button"
-        class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default primary--text text--darken-2"
+        class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default primary darken-2"
 >
   <span class="v-btn__content">
   </span>
@@ -11,7 +11,7 @@ exports[`VBtn.ts should not add color classes if disabled 1`] = `
 
 exports[`VBtn.ts should not add color classes if disabled 2`] = `
 <button type="button"
-        class="v-btn v-btn--disabled v-btn--flat theme--light v-size--default"
+        class="v-btn v-btn--disabled v-btn--has-bg theme--light v-size--default"
         disabled="disabled"
 >
   <span class="v-btn__content">
@@ -21,7 +21,7 @@ exports[`VBtn.ts should not add color classes if disabled 2`] = `
 
 exports[`VBtn.ts should render an <a> tag when using href prop 1`] = `
 <a href="http://www.google.com"
-   class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+   class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
 >
   <span class="v-btn__content">
   </span>
@@ -30,7 +30,7 @@ exports[`VBtn.ts should render an <a> tag when using href prop 1`] = `
 
 exports[`VBtn.ts should render component and match snapshot 1`] = `
 <button type="button"
-        class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
+        class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
 >
   <span class="v-btn__content">
   </span>
@@ -39,7 +39,7 @@ exports[`VBtn.ts should render component and match snapshot 1`] = `
 
 exports[`VBtn.ts should render component with color prop and match snapshot 1`] = `
 <button type="button"
-        class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default green darken-1"
+        class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default green darken-1"
 >
   <span class="v-btn__content">
   </span>
@@ -48,7 +48,7 @@ exports[`VBtn.ts should render component with color prop and match snapshot 1`]
 
 exports[`VBtn.ts should render component with color prop and match snapshot 2`] = `
 <button type="button"
-        class="v-btn v-btn--flat v-btn--text theme--light v-size--default green--text text--darken-1"
+        class="v-btn v-btn--text theme--light v-size--default green--text text--darken-1"
 >
   <span class="v-btn__content">
   </span>
@@ -57,7 +57,7 @@ exports[`VBtn.ts should render component with color prop and match snapshot 2`]
 
 exports[`VBtn.ts should render component with loader and match snapshot 1`] = `
 <button type="button"
-        class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg v-btn--loading theme--light v-size--default"
+        class="v-btn v-btn--is-elevated v-btn--has-bg v-btn--loading theme--light v-size--default"
 >
   <span class="v-btn__content">
   </span>
@@ -92,7 +92,7 @@ exports[`VBtn.ts should render component with loader and match snapshot 1`] = `
 
 exports[`VBtn.ts should render component with loader slot and match snapshot 1`] = `
 <button type="button"
-        class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg v-btn--loading theme--light v-size--default"
+        class="v-btn v-btn--is-elevated v-btn--has-bg v-btn--loading theme--light v-size--default"
 >
   <span class="v-btn__content">
   </span>
@@ -105,7 +105,7 @@ exports[`VBtn.ts should render component with loader slot and match snapshot 1`]
 `;
 
 exports[`VBtn.ts should render specified tag when using tag prop 1`] = `
-<a class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default">
+<a class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default">
   <span class="v-btn__content">
   </span>
 </a>
@@ -113,7 +113,7 @@ exports[`VBtn.ts should render specified tag when using tag prop 1`] = `
 
 exports[`VBtn.ts should render tile button and match snapshot 1`] = `
 <button type="button"
-        class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg v-btn--tile theme--light v-size--default"
+        class="v-btn v-btn--is-elevated v-btn--has-bg v-btn--tile theme--light v-size--default"
 >
   <span class="v-btn__content">
   </span>

package/src/components/VCalendar/VCalendar.ts

@@ -293,11 +293,11 @@ export default CalendarWithEvents.extend({
     },
     getCategoryList (categories: CalendarCategory[]): CalendarCategory[] {
       if (!this.noEvents) {
-        const categoryMap = categories.reduce((map, category, index) => {
+        const categoryMap: any = categories.reduce((map: any, category, index) => {
           if (typeof category === 'object' && category.categoryName) map[category.categoryName] = { index, count: 0 }
 
           return map
-        }, Object.create(null))
+        }, {})
 
         if (!this.categoryHideDynamic || !this.categoryShowAll) {
           let categoryLength = categories.length

package/src/components/VCalendar/__tests__/VCalendarCategory.spec.ts

@@ -4,14 +4,14 @@ import {
   MountOptions,
 } from '@vue/test-utils'
 import { ExtractVue } from '../../../util/mixins'
-import VCalendarCategory from '../VCalendarCategory'
+import VCalendar from '../VCalendar'
 
 describe('VCalendarCategory', () => {
-  type Instance = ExtractVue<typeof VCalendarCategory>
+  type Instance = ExtractVue<typeof VCalendar>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
   beforeEach(() => {
     mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VCalendarCategory, {
+      return mount(VCalendar, {
         ...options,
         mocks: {
           $vuetify: {
@@ -27,6 +27,8 @@ describe('VCalendarCategory', () => {
   it('should test categoryText prop as a string', () => {
     const wrapper = mountFunction({
       propsData: {
+        type: 'category',
+        events: [{ start: new Date(), category: 'Nate' }],
         categories: [{ name: 'Nate' }],
         categoryText: 'name',
       },
@@ -38,7 +40,9 @@ describe('VCalendarCategory', () => {
   it('should test categoryText prop as a function', () => {
     const wrapper = mountFunction({
       propsData: {
-        categories: [{ name: 'Nate', age: 20 }],
+        type: 'category',
+        events: [{ start: new Date(), category: '20' }],
+        categories: [{ name: 'Nate', age: '20' }],
         categoryText (category) {
           return category.age
         },
@@ -50,11 +54,15 @@ describe('VCalendarCategory', () => {
 
   it('should pass entire cateogry to interval style method', () => {
     function intervalStyle (obj) {
-      expect(obj.category).toEqual({ name: 'Nate', age: 20, categoryName: 'Nate' })
+      expect(obj.category.name).toEqual('Nate')
+      expect(obj.category.age).toEqual(20)
+      expect(obj.category.categoryName).toEqual('Nate')
     }
 
     const wrapper = mountFunction({
       propsData: {
+        type: 'category',
+        events: [{ start: new Date(), category: 'Nate' }],
         categories: [{ name: 'Nate', age: 20 }],
         categoryText: 'name',
         intervalStyle,