@dimailn/vuetify 2.7.2-alpha14 → 2.7.2-alpha15

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/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/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)
+  }
 })

package/src/directives/intersect/index.ts

@@ -1,55 +1,73 @@
-import { VNodeDirective } from 'vue/types/vnode'
-import { VNode } from 'vue'
+import { DirectiveBinding, ObjectDirective, VNode } from 'vue'
 
 type ObserveHandler = (
   entries: IntersectionObserverEntry[],
   observer: IntersectionObserver,
-  isIntersecting: boolean,
-) => void
+  isIntersecting: boolean
+) => void;
 
-interface ObserveVNodeDirective extends Omit<VNodeDirective, 'modifiers'> {
-  value?: ObserveHandler | { handler: ObserveHandler, options?: IntersectionObserverInit }
+interface ObserveDirectiveBinding
+  extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
+  value?:
+    | ObserveHandler
+    | { handler: ObserveHandler, options?: IntersectionObserverInit }
   modifiers?: {
     once?: boolean
     quiet?: boolean
   }
 }
 
-function inserted (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode) {
-  if (typeof window === 'undefined' || !('IntersectionObserver' in window)) return
+// Расширяем HTMLElement для хранения данных наблюдателя
+declare global {
+  interface HTMLElement {
+    _observe?: Record<
+      number,
+      { init: boolean, observer: IntersectionObserver }
+    >
+  }
+}
+
+function mounted (
+  el: HTMLElement,
+  binding: ObserveDirectiveBinding,
+  vnode: VNode
+) {
+  if (typeof window === 'undefined' || !('IntersectionObserver' in window)) { return }
 
   const modifiers = binding.modifiers || {}
   const value = binding.value
-  const { handler, options } = typeof value === 'object'
-    ? value
-    : { handler: value, options: {} }
-  const observer = new IntersectionObserver((
-    entries: IntersectionObserverEntry[] = [],
-    observer: IntersectionObserver
-  ) => {
-    const _observe = el._observe?.[vnode.ctx!.uid]
-    if (!_observe) return // Just in case, should never fire
-
-    const isIntersecting = entries.some(entry => entry.isIntersecting)
-
-    // If is not quiet or has already been
-    // initted, invoke the user callback
-    if (
-      handler && (
-        !modifiers.quiet ||
-        _observe.init
-      ) && (
-        !modifiers.once ||
-        isIntersecting ||
-        _observe.init
-      )
-    ) {
-      handler(entries, observer, isIntersecting)
-    }
-
-    if (isIntersecting && modifiers.once) unbind(el, binding, vnode)
-    else _observe.init = true
-  }, options)
+  const { handler, options } =
+    typeof value === 'object' && value !== null && 'handler' in value
+      ? value
+      : { handler: value, options: {} }
+
+  if (!handler) return
+
+  const observer = new IntersectionObserver(
+    (
+      entries: IntersectionObserverEntry[] = [],
+      observer: IntersectionObserver
+    ) => {
+      const _observe = el._observe?.[vnode.ctx!.uid]
+      if (!_observe) return // Just in case, should never fire
+
+      const isIntersecting = entries.some(entry => entry.isIntersecting)
+
+      // If is not quiet or has already been
+      // initted, invoke the user callback
+      if (
+        handler &&
+        (!modifiers.quiet || _observe.init) &&
+        (!modifiers.once || isIntersecting || _observe.init)
+      ) {
+        handler(entries, observer, isIntersecting)
+      }
+
+      if (isIntersecting && modifiers.once) unmounted(el, binding, vnode)
+      else _observe.init = true
+    },
+    options
+  )
 
   el._observe = Object(el._observe)
   el._observe![vnode.ctx!.uid] = { init: false, observer }
@@ -57,7 +75,23 @@ function inserted (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode
   observer.observe(el)
 }
 
-function unbind (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode) {
+function updated (
+  el: HTMLElement,
+  binding: ObserveDirectiveBinding,
+  vnode: VNode
+) {
+  // Если значение изменилось, пересоздаем observer
+  if (binding.value !== binding.oldValue) {
+    unmounted(el, binding, vnode)
+    mounted(el, binding, vnode)
+  }
+}
+
+function unmounted (
+  el: HTMLElement,
+  binding: ObserveDirectiveBinding,
+  vnode: VNode
+) {
   const observe = el._observe?.[vnode.ctx!.uid]
   if (!observe) return
 
@@ -65,9 +99,14 @@ function unbind (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode)
   delete el._observe![vnode.ctx!.uid]
 }
 
-export const Intersect = {
-  mounted: inserted,
-  unmounted: unbind,
+export const Intersect: ObjectDirective<
+  HTMLElement,
+  | ObserveHandler
+  | { handler: ObserveHandler, options?: IntersectionObserverInit }
+> = {
+  mounted,
+  updated,
+  unmounted,
 }
 
 export default Intersect

package/src/directives/mutate/index.ts

@@ -1,75 +1,84 @@
-import { VNode, VNodeDirective } from 'vue'
+import { DirectiveBinding, VNode } from 'vue'
 
 type MutateHandler = (
   mutationsList: MutationRecord[],
-  observer: MutationObserver,
-) => void
+  observer: MutationObserver
+) => void;
 
-interface MutateVNodeDirective extends Omit<VNodeDirective, 'modifiers'> {
-  value?: MutateHandler | { handler: MutateHandler, options?: MutationObserverInit }
-  modifiers?: {
-    once?: boolean
-    attr?: boolean
-    child?: boolean
-    sub?: boolean
-    char?: boolean
-  }
-}
+type MutateValue =
+  | MutateHandler
+  | { handler: MutateHandler, options?: MutationObserverInit };
+
+type MutateModifiers = {
+  once?: boolean
+  attr?: boolean
+  child?: boolean
+  sub?: boolean
+  char?: boolean
+};
 
-function inserted (el: HTMLElement, binding: MutateVNodeDirective, vnode: VNode) {
-  const modifiers = binding.modifiers || {}
+function mounted (
+  el: HTMLElement,
+  binding: DirectiveBinding<MutateValue>,
+  vnode: VNode
+) {
+  const modifiers = (binding.modifiers as MutateModifiers) || {}
   const value = binding.value
   const callback = typeof value === 'object' ? value.handler : value!
   const { once, ...modifierKeys } = modifiers
   const hasModifiers = Object.keys(modifierKeys).length > 0
 
   // Options take top priority
-  const options = typeof value === 'object' && value.options
-    ? value.options
-    : hasModifiers
-      // If we have modifiers, use only those provided
-      ? {
-        attributes: modifierKeys.attr,
-        childList: modifierKeys.child,
-        subtree: modifierKeys.sub,
-        characterData: modifierKeys.char,
-      }
-      // Defaults to everything on
-      : {
-        attributes: true,
-        childList: true,
-        subtree: true,
-        characterData: true,
-      }
+  const options =
+    typeof value === 'object' && value.options
+      ? value.options
+      : hasModifiers
+        ? {
+          // If we have modifiers, use only those provided
+          attributes: modifierKeys.attr,
+          childList: modifierKeys.child,
+          subtree: modifierKeys.sub,
+          characterData: modifierKeys.char,
+        }
+        : {
+          // Defaults to everything on
+          attributes: true,
+          childList: true,
+          subtree: true,
+          characterData: true,
+        }
 
-  const observer = new MutationObserver((
-    mutationsList: MutationRecord[],
-    observer: MutationObserver
-  ) => {
-    /* istanbul ignore if */
-    if (!el._mutate) return // Just in case, should never fire
+  const observer = new MutationObserver(
+    (mutationsList: MutationRecord[], observer: MutationObserver) => {
+      /* istanbul ignore if */
+      if (!el._mutate) return // Just in case, should never fire
 
-    callback(mutationsList, observer)
+      callback(mutationsList, observer)
 
-    // If has the once modifier, unbind
-    once && unbind(el, binding, vnode)
-  })
+      // If has the once modifier, unbind
+      once && unmounted(el, binding, vnode)
+    }
+  )
 
   observer.observe(el, options)
   el._mutate = Object(el._mutate)
-  el._mutate![vnode.context!._uid] = { observer }
+  el._mutate![vnode.ctx!.uid] = { observer }
 }
 
-function unbind (el: HTMLElement, binding: MutateVNodeDirective, vnode: VNode) {
-  if (!el._mutate?.[vnode.context!._uid]) return
+function unmounted (
+  el: HTMLElement,
+  binding: DirectiveBinding<MutateValue>,
+  vnode: VNode
+) {
+  if (!el._mutate?.[vnode.ctx!.uid]) return
 
-  el._mutate[vnode.context!._uid]!.observer.disconnect()
-  delete el._mutate[vnode.context!._uid]
+  el._mutate[vnode.ctx!.uid]!.observer.disconnect()
+  delete el._mutate[vnode.ctx!.uid]
 }
 
 export const Mutate = {
-  inserted,
-  unbind,
+  mounted,
+  unmounted,
 }
 
 export default Mutate

package/src/directives/resize/index.ts

@@ -1,19 +1,34 @@
-import { VNodeDirective } from 'vue/types/vnode'
-import { VNode } from 'vue'
+import { DirectiveBinding, ObjectDirective, VNode } from 'vue'
 
-interface ResizeVNodeDirective extends VNodeDirective {
-  value?: () => void
+interface ResizeDirectiveBinding extends DirectiveBinding {
+  value: () => void
   options?: boolean | AddEventListenerOptions
 }
 
-function inserted (el: HTMLElement, binding: ResizeVNodeDirective, vnode: VNode) {
-  const callback = binding.value!
+declare global {
+  interface HTMLElement {
+    _onResize?: Record<
+      number,
+      {
+        callback: () => void
+        options: boolean | AddEventListenerOptions
+      }
+    >
+  }
+}
+
+function mounted (
+  el: HTMLElement,
+  binding: ResizeDirectiveBinding,
+  vnode: VNode
+) {
+  const callback = binding.value
   const options = binding.options || { passive: true }
 
   window.addEventListener('resize', callback, options)
 
   el._onResize = Object(el._onResize)
-  el._onResize![vnode.context!._uid] = {
+  el._onResize![vnode.ctx!.uid] = {
     callback,
     options,
   }
@@ -23,19 +38,23 @@ function inserted (el: HTMLElement, binding: ResizeVNodeDirective, vnode: VNode)
   }
 }
 
-function unbind (el: HTMLElement, binding: ResizeVNodeDirective, vnode: VNode) {
-  if (!el._onResize?.[vnode.context!._uid]) return
+function unmounted (
+  el: HTMLElement,
+  binding: ResizeDirectiveBinding,
+  vnode: VNode
+) {
+  if (!el._onResize?.[vnode.ctx!.uid]) return
 
-  const { callback, options } = el._onResize[vnode.context!._uid]!
+  const { callback, options } = el._onResize[vnode.ctx!.uid]!
 
   window.removeEventListener('resize', callback, options)
 
-  delete el._onResize[vnode.context!._uid]
+  delete el._onResize[vnode.ctx!.uid]
 }
 
-export const Resize = {
-  inserted,
-  unbind,
+export const Resize: ObjectDirective = {
+  mounted,
+  unmounted,
 }
 
 export default Resize

package/src/directives/scroll/index.ts

@@ -1,21 +1,32 @@
-import { VNodeDirective } from 'vue/types/vnode'
-import { DirectiveOptions, VNode } from 'vue'
-
-interface ScrollVNodeDirective extends Omit<VNodeDirective, 'modifiers'> {
-  value: EventListener | {
-    handler: EventListener
-    options?: boolean | AddEventListenerOptions
-  } | EventListenerObject & { options?: boolean | AddEventListenerOptions }
+import { DirectiveBinding, VNode, ObjectDirective } from 'vue'
+
+interface ScrollDirectiveBinding extends Omit<DirectiveBinding, 'modifiers'> {
+  value:
+    | EventListener
+    | {
+        handler: EventListener
+        options?: boolean | AddEventListenerOptions
+      }
+    | (EventListenerObject & { options?: boolean | AddEventListenerOptions })
   modifiers?: {
     self?: boolean
   }
 }
 
-function inserted (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode) {
+function mounted (
+  el: HTMLElement,
+  binding: ScrollDirectiveBinding,
+  vnode: VNode
+) {
   const { self = false } = binding.modifiers || {}
   const value = binding.value
-  const options = (typeof value === 'object' && value.options) || { passive: true }
-  const handler = typeof value === 'function' || 'handleEvent' in value ? value : value.handler
+  const options = (typeof value === 'object' && value.options) || {
+    passive: true,
+  }
+  const handler =
+    typeof value === 'function' || 'handleEvent' in value
+      ? value
+      : value.handler
 
   const target = self
     ? el
@@ -28,7 +39,8 @@ function inserted (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode)
   target.addEventListener('scroll', handler, options)
 
   el._onScroll = Object(el._onScroll)
-  el._onScroll![vnode.context!._uid] = {
+  // В Vue 3 используем vnode.ctx.uid вместо vnode.context._uid
+  el._onScroll![vnode.ctx!.uid] = {
     handler,
     options,
     // Don't reference self
@@ -36,18 +48,22 @@ function inserted (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode)
   }
 }
 
-function unbind (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode) {
-  if (!el._onScroll?.[vnode.context!._uid]) return
+function unmounted (
+  el: HTMLElement,
+  binding: ScrollDirectiveBinding,
+  vnode: VNode
+) {
+  if (!el._onScroll?.[vnode.ctx!.uid]) return
 
-  const { handler, options, target = el } = el._onScroll[vnode.context!._uid]!
+  const { handler, options, target = el } = el._onScroll[vnode.ctx!.uid]!
 
   target.removeEventListener('scroll', handler, options)
-  delete el._onScroll[vnode.context!._uid]
+  delete el._onScroll[vnode.ctx!.uid]
 }
 
-export const Scroll = {
-  inserted,
-  unbind,
-} as DirectiveOptions
+export const Scroll: ObjectDirective = {
+  mounted,
+  unmounted,
+}
 
 export default Scroll