@dimailn/vuetify 2.7.2-alpha14 → 2.7.2-alpha16

package/lib/mixins/selectable/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/mixins/selectable/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Components\nimport VInput from '../../components/VInput'\n\n// Mixins\nimport Rippleable from '../rippleable'\nimport Comparable from '../comparable'\n\n// Utilities\nimport mixins from '../../util/mixins'\nimport {h} from 'vue'\n\nexport function prevent (e: Event) {\n  e.preventDefault()\n}\n\n/* @vue/component */\nexport default mixins(\n  VInput,\n  Rippleable,\n  Comparable\n).extend({\n  name: 'selectable',\n\n  props: {\n    id: String,\n    value: null as any,\n    falseValue: null as any,\n    trueValue: null as any,\n    multiple: {\n      type: Boolean,\n      default: null,\n    },\n    label: String,\n  },\n\n  data () {\n    return {\n      hasColor: this.modelValue,\n      lazyValue: this.modelValue,\n    }\n  },\n\n  computed: {\n    computedColor (): string | undefined {\n      if (!this.isActive) return undefined\n      if (this.color) return this.color\n      if (this.isDark && !this.appIsDark) return 'white'\n      return 'primary'\n    },\n    isMultiple (): boolean {\n      return this.multiple === true || (this.multiple === null && Array.isArray(this.internalValue))\n    },\n    isActive (): boolean {\n      const value = this.value\n      const input = this.internalValue\n\n      if (this.isMultiple) {\n        if (!Array.isArray(input)) return false\n\n        return input.some(item => this.valueComparator(item, value))\n      }\n\n      if (this.trueValue === undefined || this.falseValue === undefined) {\n        return value\n          ? this.valueComparator(value, input)\n          : Boolean(input)\n      }\n\n      return this.valueComparator(input, this.trueValue)\n    },\n    isDirty (): boolean {\n      return this.isActive\n    },\n    rippleState (): string | undefined {\n      return !this.isDisabled && !this.validationState\n        ? undefined\n        : this.validationState\n    },\n  },\n\n  watch: {\n    modelValue (val) {\n      this.lazyValue = val\n      this.hasColor = val\n    },\n  },\n\n  methods: {\n    genLabel () {\n      const label = VInput.methods.genLabel.call(this)\n\n      if (!label) return label\n\n      // Label shouldn't cause the input to focus\n      label!.onClick = prevent\n\n      return label\n    },\n    genInput (type: string, attrs: object) {\n      return h('input', {\n        ...Object.assign({\n          'aria-checked': this.isActive.toString(),\n          disabled: this.isDisabled,\n          id: this.computedId,\n          role: type,\n          type,\n        }, attrs),\n        value: this.value,\n        checked: this.isActive,\n        onBlur: this.onBlur,\n        onChange: this.onChange,\n        onFocus: this.onFocus,\n        onKeydown: this.onKeydown,\n        onClick: prevent,\n        ref: 'input'\n      })\n    },\n    onClick (e: Event) {\n      this.onChange()\n      this.$emit('click', e)\n    },\n    onChange () {\n      if (!this.isInteractive) return\n\n      const value = this.value\n      let input = this.internalValue\n\n      if (this.isMultiple) {\n        if (!Array.isArray(input)) {\n          input = []\n        }\n\n        const length = input.length\n\n        input = input.filter((item: any) => !this.valueComparator(item, value))\n\n        if (input.length === length) {\n          input.push(value)\n        }\n      } else if (this.trueValue !== undefined && this.falseValue !== undefined) {\n        input = this.valueComparator(input, this.trueValue) ? this.falseValue : this.trueValue\n      } else if (value) {\n        input = this.valueComparator(input, value) ? null : value\n      } else {\n        input = !input\n      }\n\n      this.validate(true, input)\n      this.internalValue = input\n      this.hasColor = input\n    },\n    onFocus (e: FocusEvent) {\n      this.isFocused = true\n      this.$emit('focus', e)\n    },\n    onBlur (e: FocusEvent) {\n      this.isFocused = false\n      this.$emit('blur', e)\n    },\n    /** @abstract */\n    onKeydown (e: Event) {},\n  },\n})\n"],"sourceRoot":"","file":"index.js"}
+{"version":3,"sources":["../../../src/mixins/selectable/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Components\nimport VInput from '../../components/VInput'\n\n// Mixins\nimport Rippleable from '../rippleable'\nimport Comparable from '../comparable'\n\n// Utilities\nimport mixins from '../../util/mixins'\nimport { h } from 'vue'\n\nexport function prevent (e: Event) {\n  e.preventDefault()\n  // всплытие провоцирует двойной onChange\n  e.stopPropagation()\n}\n\n/* @vue/component */\nexport default mixins(\n  VInput,\n  Rippleable,\n  Comparable\n).extend({\n  name: 'selectable',\n\n  props: {\n    id: String,\n    value: null as any,\n    falseValue: null as any,\n    trueValue: null as any,\n    multiple: {\n      type: Boolean,\n      default: null,\n    },\n    label: String,\n  },\n\n  data () {\n    return {\n      hasColor: this.modelValue,\n      lazyValue: this.modelValue,\n    }\n  },\n\n  computed: {\n    computedColor (): string | undefined {\n      if (!this.isActive) return undefined\n      if (this.color) return this.color\n      if (this.isDark && !this.appIsDark) return 'white'\n      return 'primary'\n    },\n    isMultiple (): boolean {\n      return this.multiple === true || (this.multiple === null && Array.isArray(this.internalValue))\n    },\n    isActive (): boolean {\n      const value = this.value\n      const input = this.internalValue\n\n      if (this.isMultiple) {\n        if (!Array.isArray(input)) return false\n\n        return input.some(item => this.valueComparator(item, value))\n      }\n\n      if (this.trueValue === undefined || this.falseValue === undefined) {\n        return value\n          ? this.valueComparator(value, input)\n          : Boolean(input)\n      }\n\n      return this.valueComparator(input, this.trueValue)\n    },\n    isDirty (): boolean {\n      return this.isActive\n    },\n    rippleState (): string | undefined {\n      return !this.isDisabled && !this.validationState\n        ? undefined\n        : this.validationState\n    },\n  },\n\n  watch: {\n    modelValue (val) {\n      this.lazyValue = val\n      this.hasColor = val\n    },\n  },\n\n  methods: {\n    genLabel () {\n      const label = VInput.methods.genLabel.call(this)\n\n      if (!label) return label\n\n      // Label shouldn't cause the input to focus\n      label!.onClick = prevent\n\n      return label\n    },\n    genInput (type: string, attrs: object) {\n      return h('input', {\n        ...Object.assign({\n          'aria-checked': this.isActive.toString(),\n          disabled: this.isDisabled,\n          id: this.computedId,\n          role: type,\n          type,\n        }, attrs),\n        value: this.value,\n        checked: this.isActive,\n        onBlur: this.onBlur,\n        onChange: this.onChange,\n        onFocus: this.onFocus,\n        onKeydown: this.onKeydown,\n        onClick: prevent,\n        ref: 'input'\n      })\n    },\n    onClick (e: Event) {\n      this.onChange()\n      this.$emit('click', e)\n    },\n    onChange () {\n      if (!this.isInteractive) return\n\n      const value = this.value\n      let input = this.internalValue\n\n      if (this.isMultiple) {\n        if (!Array.isArray(input)) {\n          input = []\n        }\n\n        const length = input.length\n\n        input = input.filter((item: any) => !this.valueComparator(item, value))\n\n        if (input.length === length) {\n          input.push(value)\n        }\n      } else if (this.trueValue !== undefined && this.falseValue !== undefined) {\n        input = this.valueComparator(input, this.trueValue) ? this.falseValue : this.trueValue\n      } else if (value) {\n        input = this.valueComparator(input, value) ? null : value\n      } else {\n        input = !input\n      }\n\n      this.validate(true, input)\n      this.internalValue = input\n      this.hasColor = input\n    },\n    onFocus (e: FocusEvent) {\n      this.isFocused = true\n      this.$emit('focus', e)\n    },\n    onBlur (e: FocusEvent) {\n      this.isFocused = false\n      this.$emit('blur', e)\n    },\n    /** @abstract */\n    onKeydown (e: Event) {},\n  },\n})\n"],"sourceRoot":"","file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dimailn/vuetify",
   "description": "Vue Material Component Framework",
-  "version": "2.7.2-alpha14",
+  "version": "2.7.2-alpha16",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

package/src/components/VAppBar/VAppBar.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VAppBar.sass'
 
@@ -16,10 +15,11 @@ import Toggleable from '../../mixins/toggleable'
 
 // Utilities
 import { convertToUnit } from '../../util/helpers'
+import { mergeProps, withDirectives } from 'vue'
 import mixins from '../../util/mixins'
 
 // Types
-import { VNode } from 'vue'
+import type { VNode } from 'vue'
 
 const baseMixins = mixins(
   VToolbar,
@@ -239,8 +239,8 @@ export default baseMixins.extend({
     genBackground () {
       const render = VToolbar.methods.genBackground.call(this)
 
-      render.data = this._b(render.data || {}, render.tag!, {
-        style: { opacity: this.computedOpacity },
+      render.props = mergeProps(render.props || {}, {
+        style: { opacity: this.computedOpacity }
       })
 
       return render
@@ -268,19 +268,17 @@ export default baseMixins.extend({
   },
 
   render (): VNode {
-    const render = VToolbar.render.call(this, h)
-
-    render.data = render.data || {}
+    const render = VToolbar.render.call(this)
 
     if (this.canScroll) {
-      render.data.directives = render.data.directives || []
-      render.data.directives.push({
-        arg: this.scrollTarget,
-        name: 'scroll',
-        value: this.onScroll,
-      })
+      render.key = 'v-app-bar-scroll'
+      return withDirectives(render, [
+        [Scroll, this.onScroll, this.scrollTarget],
+      ])
     }
 
+    render.key = 'v-app-bar-no-scroll'
+
     return render
   },
 })

package/src/components/VCheckbox/VSimpleCheckbox.ts

@@ -2,8 +2,7 @@ import './VSimpleCheckbox.sass'
 
 import Ripple from '../../directives/ripple'
 
-import { VNode, VNodeDirective, h } from 'vue'
-import {defineComponent} from 'vue'
+import { VNode, h, defineComponent, withDirectives } from 'vue'
 
 import { VIcon } from '../VIcon'
 
@@ -18,8 +17,6 @@ import { wrapInArray } from '../../util/helpers'
 export default defineComponent({
   name: 'v-simple-checkbox',
 
-  functional: true,
-
   directives: {
     Ripple,
   },
@@ -32,7 +29,7 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-    value: Boolean,
+    modelValue: Boolean,
     indeterminate: Boolean,
     indeterminateIcon: {
       type: String,
@@ -48,49 +45,94 @@ export default defineComponent({
     },
   },
 
+  emits: ['input', 'update:modelValue'],
+
+  methods: {
+    getIcon (): string {
+      const { indeterminate, modelValue, indeterminateIcon, onIcon, offIcon } = this.$props
+
+      if (indeterminate) return indeterminateIcon
+      if (modelValue) return onIcon
+      return offIcon
+    },
+
+    createIcon (): VNode {
+      const { modelValue, disabled, dark, light, color } = this.$props
+
+      return h(
+        VIcon,
+        Colorable.methods.setTextColor(modelValue && color, {
+          disabled,
+          dark,
+          light,
+        }),
+        () => this.getIcon()
+      )
+    },
+
+    createRipple (): VNode | null {
+      const { ripple, disabled, color } = this.$props
+
+      if (!ripple || disabled) return null
+
+      return withDirectives(
+        h(
+          'div',
+          Colorable.methods.setTextColor(color, {
+            class: 'v-input--selection-controls__ripple',
+          })
+        ),
+        [
+          [Ripple, { center: true }],
+        ]
+      )
+    },
+
+    handleClick (e: MouseEvent): void {
+      e.stopPropagation()
+
+      if (this.$props.disabled) return
+
+      const newValue = !this.modelValue
+      const attrs = this.$attrs
+
+
+      this.$emit("input", newValue);
+      this.$emit('update:modelValue', newValue)
+    },
+
+    createChildren (): VNode[] {
+      const children = [this.createIcon()]
+
+      const ripple = this.createRipple()
+      if (ripple) {
+        children.push(ripple)
+      }
+
+      return children
+    },
+  },
+
   render (): VNode {
-    const props = this.$props
+    const { disabled } = this.$props
     const data = this.$attrs
 
-    const children = []
-    let icon = props.offIcon
-    if (props.indeterminate) icon = props.indeterminateIcon
-    else if (props.value) icon = props.onIcon
-
-    children.push(h(VIcon, Colorable.methods.setTextColor(props.value && props.color, {
-      disabled: props.disabled,
-      dark: props.dark,
-      light: props.light
-    }), icon))
-
-    if (props.ripple && !props.disabled) {
-      const ripple = h('div', Colorable.methods.setTextColor(props.color, {
-        class: 'v-input--selection-controls__ripple',
-        directives: [{
-          def: Ripple,
-          name: 'ripple',
-          value: { center: true },
-        }] as VNodeDirective[],
-      }))
-
-      children.push(ripple)
-    }
-
-    return h('div',
+    return h(
+      'div',
       mergeData(data, {
         class: {
           'v-simple-checkbox': true,
-          'v-simple-checkbox--disabled': props.disabled,
-        },
-        onClick: (e: MouseEvent) => {
-          e.stopPropagation()
-
-          if (data.on && data.on.input && !props.disabled) {
-            data.onInput && data.onInput(!props.value)
-          }
+          'v-simple-checkbox--disabled': disabled,
         },
-      }), [
-        h('div', { class: 'v-input--selection-controls__input' }, children),
-      ])
+        onClick: this.handleClick,
+      }),
+      [
+        h(
+          'div',
+          { class: 'v-input--selection-controls__input' },
+          this.createChildren()
+        )
+      ]
+    )
   },
 })

package/src/components/VCheckbox/__tests__/VSimpleCheckbox.spec.ts

@@ -1,32 +1,65 @@
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
 } from '@vue/test-utils'
 import VSimpleCheckbox from '../VSimpleCheckbox'
 
 describe('VSimpleCheckbox.ts', () => {
   type Instance = InstanceType<typeof VSimpleCheckbox>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: any) => VueWrapper<Instance>
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VSimpleCheckbox, options)
+    mountFunction = (options = {}) => {
+      return mount(VSimpleCheckbox, {
+        global: {
+          stubs: {
+            VIcon: {
+              template: '<span class="v-icon"></span>',
+            },
+          },
+        },
+        ...options,
+      })
     }
   })
 
-  it('should pass down listeners', () => {
-    const mouseleave = jest.fn()
+  it('should render simple checkbox', () => {
     const wrapper = mountFunction({
-      propsData: { disabled: true },
-      listeners: {
-        mouseleave,
-      },
+      props: { modelValue: false },
+    })
+
+    expect(wrapper.find('.v-simple-checkbox').exists()).toBe(true)
+    expect(wrapper.find('.v-input--selection-controls__input').exists()).toBe(true)
+  })
+
+  it('should emit update:modelValue event on click', async () => {
+    const wrapper = mountFunction({
+      props: { modelValue: false },
     })
 
     const element = wrapper.find('.v-simple-checkbox')
+    await element.trigger('click')
+
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy()
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true])
+  })
 
-    element.trigger('mouseleave')
+  it('should not emit update:modelValue when disabled', async () => {
+    const wrapper = mountFunction({
+      props: { modelValue: false, disabled: true },
+    })
+
+    const element = wrapper.find('.v-simple-checkbox')
+    await element.trigger('click')
+
+    expect(wrapper.emitted()['update:modelValue']).toBeFalsy()
+  })
+
+  it('should apply disabled class when disabled', () => {
+    const wrapper = mountFunction({
+      props: { disabled: true },
+    })
 
-    expect(mouseleave).toHaveBeenCalledTimes(1)
+    expect(wrapper.find('.v-simple-checkbox--disabled').exists()).toBe(true)
   })
 })

package/src/components/VDataTable/VDataTable.ts

@@ -511,7 +511,7 @@ export default mixins(
           isMobile: this.isMobile,
         }) : () => h(VSimpleCheckbox, {
           class: 'v-data-table__checkbox',
-          value: data.isSelected,
+          modelValue: data.isSelected,
           disabled: !this.isSelectable(item),
           color: this.checkboxColor ?? '',
           onInput: (val: boolean) => data.select(val),

package/src/components/VDataTable/VDataTableHeader.ts

@@ -20,8 +20,6 @@ import {defineComponent, h} from 'vue'
 export default defineComponent({
   name: 'v-data-table-header',
 
-  functional: true,
-
   props: {
     ...header.props,
     mobile: Boolean,
@@ -29,12 +27,15 @@ export default defineComponent({
 
   render () {
     const props = this.$props
-    let data = this.$attrs
+    let data = {
+      ...this.$attrs,
+      ...props,
+    }
 
     // dedupeModelListeners(data)
     const children = rebuildSlots(this.$slots, h)
 
-    if (this.mobile) {
+    if (props.mobile) {
       return h(VDataTableHeaderMobile, data, children)
     } else {
       return h(VDataTableHeaderDesktop, data, children)

package/src/components/VDataTable/VDataTableHeaderDesktop.ts

@@ -110,7 +110,7 @@ export default mixins(header).extend({
     return h('thead', {
       class: 'v-data-table-header',
     }, [
-      h('tr', this.headers.map(header => this.genHeader(header))),
+      h('tr', this.headers?.map(header => this.genHeader(header)) || []),
     ])
   },
 })

package/src/components/VDataTable/mixins/header.ts

@@ -3,18 +3,18 @@ import VIcon from '../../VIcon'
 import VSimpleCheckbox from '../../VCheckbox/VSimpleCheckbox'
 import ripple from '../../../directives/ripple'
 
-import {defineComponent, h} from 'vue'
+import { defineComponent, h } from 'vue'
 import { PropValidator } from 'vue/types/options'
 import mixins from '../../../util/mixins'
 import { DataOptions, DataTableHeader } from 'vuetify/types'
 
 type VDataTableInstance = InstanceType<typeof VDataTable>
 
-interface options extends Vue {
+interface HeaderOptions {
   dataTable: VDataTableInstance
 }
 
-export default mixins<options>().extend({
+export default mixins<HeaderOptions>().extend({
   // https://github.com/vuejs/vue/issues/6872
   directives: {
     ripple,
@@ -53,7 +53,7 @@ export default mixins<options>().extend({
   methods: {
     genSelectAll () {
       const data = {
-        value: this.everyItem,
+        modelValue: this.everyItem,
         indeterminate: !this.everyItem && this.someItems,
         color: this.checkboxColor ?? '',
         onInput: (v: boolean) => this.$emit('toggle-select-all', v)

package/src/components/VGrid/VContainer.ts

@@ -60,7 +60,7 @@ export default defineComponent({
           'container--fluid': this.fluid,
         }).concat(classes || []).concat('container'),
       }),
-      this.$slots.default()
+      this.$slots.default?.()
     )
   },
 })

package/src/components/VItemGroup/VItem.ts

@@ -7,10 +7,9 @@ import { factory as GroupableFactory } from '../../mixins/groupable'
 // Utilities
 import mixins from '../../util/mixins'
 import { consoleWarn } from '../../util/console'
+import { defineComponent, mergeProps } from "vue"
 
-// Types
-import {defineComponent} from 'vue'
-import { VNode, ScopedSlotChildren } from 'vue/types/vnode'
+import type { VNode } from 'vue'
 
 /* @vue/component */
 export const BaseItem = defineComponent({
@@ -32,42 +31,45 @@ export const BaseItem = defineComponent({
     },
   },
 
-  render (): VNode {
+  render (): VNode | null {
     if (!this.$slots.default) {
       consoleWarn('v-item is missing a default scopedSlot', this)
-
-      return null as any
+      return null
     }
 
-    let element: VNode | ScopedSlotChildren
+    const slotContent = this.$slots.default({
+      active: this.isActive,
+      toggle: this.toggle,
+    })
 
-    /* istanbul ignore else */
-    if (this.$slots.default) {
-      element = this.$slots.default({
-        active: this.isActive,
-        toggle: this.toggle,
-      })
+    if (!slotContent || slotContent.length === 0) {
+      consoleWarn('v-item slot returned empty content', this)
+      return null
     }
 
-    if (Array.isArray(element) && element.length === 1) {
-      element = element[0]
-    }
+    let element = slotContent[0]
 
-    if (!element || Array.isArray(element) || !element.tag) {
-      consoleWarn('v-item should only contain a single element', this)
+    if (!element) {
+      consoleWarn('v-item should contain at least one element', this)
+      return null
+    }
 
-      return element as any
+    if (!element.type) {
+      consoleWarn('v-item should only contain valid VNode elements', this)
+      return element
     }
 
-    element.data = this._b(element.data || {}, element.tag!, {
+    element.props = mergeProps(element.props || {}, {
       class: {
         [this.activeClass]: this.isActive,
-        'v-item--disabled': this.disabled,
-      },
+        "v-item--disabled": this.disabled
+      }
     })
 
     if (this.disabled) {
-      element.data.attrs = { ...element.data.attrs, tabindex: -1 }
+      element.props = mergeProps(element.props || {}, {
+        tabindex: -1
+      })
     }
 
     return element

package/src/components/VSelect/VSelectList.ts

@@ -90,7 +90,7 @@ export default mixins(Colorable, Themeable).extend({
       return h(VListItemAction, [
         h(VSimpleCheckbox, {
           color: this.color,
-          value: inputValue,
+          modelValue: inputValue,
           ripple: false,
           onInput: () => this.$emit('select', item)
         }),

package/src/components/VTextField/VTextField.ts

@@ -355,6 +355,7 @@ export default baseMixins.extend({
       if (!this.showLabel) return null
 
       const data = {
+        ref: "label",
         absolute: true,
         color: this.validationState,
         dark: this.dark,
@@ -500,8 +501,8 @@ export default baseMixins.extend({
     setLabelWidth () {
       if (!this.outlined) return
 
-      this.labelWidth = this.$refs.label
-        ? Math.min(this.$refs.label.scrollWidth * 0.75 + 6, (this.$el as HTMLElement).offsetWidth - 24)
+      this.labelWidth = this.$refs?.label?.$el
+        ? Math.min(this.$refs?.label?.$el.scrollWidth * 0.75 + 6, (this.$el as HTMLElement).offsetWidth - 24)
         : 0
     },
     setPrefixWidth () {

package/src/components/VToolbar/VToolbar.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 // Styles
 import './VToolbar.sass'
 
@@ -156,13 +156,12 @@ export default defineComponent({
     const children = [this.genContent()]
     const data = this.setBackgroundColor(this.color, {
       class: this.classes,
-      style: this.styles,
-      on: this.$listeners,
+      style: this.styles
     })
 
     if (this.isExtended) children.push(this.genExtension())
     if (this.src || this.$slots.img) children.unshift(this.genBackground())
 
-    return h(this.tag, data, children)
-  },
+    return h(this.tag, {...this.attrs$, ...data}, children)
+  }
 })