vuetify 2.6.9 → 2.6.11

package/src/components/VCalendar/mixins/calendar-with-events.ts

@@ -10,9 +10,6 @@ import ripple from '../../../directives/ripple'
 // Mixins
 import CalendarBase from './calendar-base'
 
-// Helpers
-import { escapeHTML } from '../../../util/helpers'
-
 // Util
 import props from '../util/props'
 import {
@@ -116,7 +113,7 @@ export default CalendarBase.extend({
     eventNameFunction (): CalendarEventNameFunction {
       return typeof this.eventName === 'function'
         ? this.eventName
-        : (event, timedEvent) => escapeHTML(event.input[this.eventName as string] as string || '')
+        : (event, timedEvent) => event.input[this.eventName as string] as string || ''
     },
     eventModeFunction (): CalendarEventOverlapMode {
       return typeof this.eventOverlapMode === 'function'
@@ -303,16 +300,23 @@ export default CalendarBase.extend({
       const eventSummary = () => {
         const name = this.eventNameFunction(event, timedEvent)
         if (event.start.hasTime) {
-          const eventSummaryClass = 'v-event-summary'
           if (timedEvent) {
             const time = timeSummary()
-            const delimiter = singline ? ', ' : '<br>'
+            const delimiter = singline ? ', ' : this.$createElement('br')
 
-            return `<span class="${eventSummaryClass}"><strong>${name}</strong>${delimiter}${time}</span>`
+            return this.$createElement('span', { staticClass: 'v-event-summary' }, [
+              this.$createElement('strong', [name]),
+              delimiter,
+              time,
+            ])
           } else {
             const time = formatTime(event.start, true)
 
-            return `<span class="${eventSummaryClass}"><strong>${time}</strong> ${name}</span>`
+            return this.$createElement('span', { staticClass: 'v-event-summary' }, [
+              this.$createElement('strong', [time]),
+              ' ',
+              name,
+            ])
           }
         }
 
@@ -345,13 +349,10 @@ export default CalendarBase.extend({
           : [this.genName(eventSummary)]
       )
     },
-    genName (eventSummary: () => string): VNode {
+    genName (eventSummary: () => string | VNode): VNode {
       return this.$createElement('div', {
         staticClass: 'pl-1',
-        domProps: {
-          innerHTML: eventSummary(),
-        },
-      })
+      }, [eventSummary()])
     },
     genPlaceholder (day: CalendarTimestamp): VNode {
       const height = this.eventHeight + this.eventMarginBottom

package/src/components/VDialog/VDialog.ts

@@ -234,8 +234,8 @@ export default baseMixins.extend({
         // So we must have focused something outside the dialog and its children
       ) {
         // Find and focus the first available element inside the dialog
-        const focusable = this.$refs.dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
-        const el = [...focusable].find(el => !el.hasAttribute('disabled')) as HTMLElement | undefined
+        const focusable = this.$refs.dialog.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])')
+        const el = [...focusable].find(el => !el.hasAttribute('disabled') && !el.matches('[tabindex="-1"]')) as HTMLElement | undefined
         el && el.focus()
       }
     },

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

@@ -61,6 +61,7 @@ exports[`VFileInput.ts should display file size 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -107,6 +108,7 @@ exports[`VFileInput.ts should display file size 2`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -153,6 +155,7 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -202,6 +205,7 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -294,6 +298,7 @@ exports[`VFileInput.ts should render chips 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -340,6 +345,7 @@ exports[`VFileInput.ts should render counter 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -433,6 +439,7 @@ exports[`VFileInput.ts should render small chips 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear

package/src/components/VInput/VInput.ts

@@ -184,6 +184,7 @@ export default baseMixins.extend<options>().extend({
           dark: this.dark,
           disabled: this.isDisabled,
           light: this.light,
+          tabindex: type === 'clear' ? -1 : undefined,
         },
         on: !hasListener
           ? undefined

package/src/components/VSelect/VSelectList.ts

@@ -18,10 +18,7 @@ import Colorable from '../../mixins/colorable'
 import Themeable from '../../mixins/themeable'
 
 // Helpers
-import {
-  escapeHTML,
-  getPropertyFromItem,
-} from '../../util/helpers'
+import { getPropertyFromItem } from '../../util/helpers'
 
 // Types
 import mixins from '../../util/mixins'
@@ -113,17 +110,17 @@ export default mixins(Colorable, Themeable).extend({
     genFilteredText (text: string) {
       text = text || ''
 
-      if (!this.searchInput || this.noFilter) return escapeHTML(text)
+      if (!this.searchInput || this.noFilter) return text
 
       const { start, middle, end } = this.getMaskedCharacters(text)
 
-      return `${escapeHTML(start)}${this.genHighlight(middle)}${escapeHTML(end)}`
+      return [start, this.genHighlight(middle), end]
     },
     genHeader (props: { [key: string]: any }): VNode {
       return this.$createElement(VSubheader, { props }, props.header)
     },
-    genHighlight (text: string): string {
-      return `<span class="v-list-item__mask">${escapeHTML(text)}</span>`
+    genHighlight (text: string) {
+      return this.$createElement('span', { staticClass: 'v-list-item__mask' }, text)
     },
     getMaskedCharacters (text: string): {
       start: string
@@ -202,13 +199,11 @@ export default mixins(Colorable, Themeable).extend({
         : scopedSlot
     },
     genTileContent (item: any, index = 0): VNode {
-      const innerHTML = this.genFilteredText(this.getText(item))
-
-      return this.$createElement(VListItemContent,
-        [this.$createElement(VListItemTitle, {
-          domProps: { innerHTML },
-        })]
-      )
+      return this.$createElement(VListItemContent, [
+        this.$createElement(VListItemTitle, [
+          this.genFilteredText(this.getText(item)),
+        ]),
+      ])
     },
     hasItem (item: object) {
       return this.parsedItems.indexOf(this.getValue(item)) > -1

package/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap

@@ -25,6 +25,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
           <div class="v-input__icon v-input__icon--clear">
             <button type="button"
                     aria-label="clear icon"
+                    tabindex="-1"
                     class="v-icon notranslate v-icon--link material-icons theme--light"
             >
               $clear
@@ -85,6 +86,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
           <div class="v-input__icon v-input__icon--clear">
             <button type="button"
                     aria-label="clear icon"
+                    tabindex="-1"
                     class="v-icon notranslate v-icon--link material-icons theme--light"
             >
               $clear

package/src/components/VTextField/VTextField.sass

@@ -504,6 +504,15 @@
   &.v-input--has-state > .v-input__control > .v-input__slot:before
     border-color: currentColor
 
+  .v-input__icon--clear
+    opacity: 0
+    transition: opacity $primary-transition
+
+  &.v-input--is-focused,
+  &.v-input--is-dirty:hover
+    .v-input__icon--clear
+      opacity: 1
+
   // TODO: where are the corresponding rules for LTR?
   //
   // +rtl()

package/src/directives/click-outside/index.ts

@@ -53,7 +53,7 @@ function checkIsActive (e: PointerEvent, binding: ClickOutsideDirective): boolea
   return isActive(e)
 }
 
-function directive (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirective, vnode: VNode) {
+function directive (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirective) {
   const handler = typeof binding.value === 'function' ? binding.value : binding.value!.handler
 
   el._clickOutside!.lastMousedownWasOutside && checkEvent(e, el, binding) && setTimeout(() => {
@@ -78,7 +78,7 @@ export const ClickOutside = {
   // available, iOS does not support
   // clicks on body
   inserted (el: HTMLElement, binding: ClickOutsideDirective, vnode: VNode) {
-    const onClick = (e: Event) => directive(e as PointerEvent, el, binding, vnode)
+    const onClick = (e: Event) => directive(e as PointerEvent, el, binding)
     const onMousedown = (e: Event) => {
       el._clickOutside!.lastMousedownWasOutside = checkEvent(e as PointerEvent, el, binding)
     }

package/src/mixins/menuable/index.ts

@@ -281,7 +281,10 @@ export default baseMixins.extend<options>().extend({
       }
     },
     checkActivatorFixed () {
-      if (this.attach !== false) return
+      if (this.attach !== false) {
+        this.activatorFixed = false
+        return
+      }
       let el = this.getActivator()
       while (el) {
         if (window.getComputedStyle(el).position === 'fixed') {

package/src/util/helpers.ts

@@ -162,16 +162,6 @@ export function getZIndex (el?: Element | null): number {
   return index
 }
 
-const tagsToReplace = {
-  '&': '&',
-  '<': '&lt;',
-  '>': '&gt;',
-} as any
-
-export function escapeHTML (str: string): string {
-  return str.replace(/[&<>]/g, tag => tagsToReplace[tag] || tag)
-}
-
 export function filterObjectOnKeys<T, K extends keyof T> (obj: T, keys: K[]): { [N in K]: T[N] } {
   const filtered = {} as { [N in K]: T[N] }
 

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import Vue, { Component, PluginFunction, VueConstructor, DirectiveOptions } from 'vue'
+import Vue, { Component, PluginFunction, VueConstructor, DirectiveOptions, VNode } from 'vue'
 import './lib'
 import './alacarte'
 import './colors'
@@ -275,7 +275,7 @@ export type CalendarEventTimedFunction = (event: CalendarEvent) => boolean
 
 export type CalendarEventCategoryFunction = (event: CalendarEvent) => string
 
-export type CalendarEventNameFunction = (event: CalendarEventParsed, timedEvent: boolean) => string
+export type CalendarEventNameFunction = (event: CalendarEventParsed, timedEvent: boolean) => string | VNode
 
 export type DataTableFilterFunction = (value: any, search: string | null, item: any) => boolean