@dimailn/vuetify 2.7.2-alpha46 → 2.7.2-alpha47

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

@@ -4,7 +4,7 @@ exports[`VFileInput.ts should be unclearable 1`] = `
 <div class="v-input theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+      <button class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
               aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
@@ -16,7 +16,7 @@ exports[`VFileInput.ts should be unclearable 1`] = `
     <div class="v-input__slot">
       <div class="v-text-field__slot">
         <label class="v-label theme--light"
-               for="input-44"
+               for="input-36"
                aria-hidden="false"
                style="left: 0px; position: absolute;"
         >
@@ -24,7 +24,7 @@ exports[`VFileInput.ts should be unclearable 1`] = `
         </label>
         <div class="v-file-input__text">
         </div>
-        <input id="input-44"
+        <input id="input-36"
                type="file"
         >
       </div>
@@ -43,7 +43,7 @@ exports[`VFileInput.ts should display file size 1`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+      <button class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
               aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
@@ -55,7 +55,7 @@ exports[`VFileInput.ts should display file size 1`] = `
     <div class="v-input__slot">
       <div class="v-text-field__slot">
         <label class="v-label v-label--active theme--light"
-               for="input-25"
+               for="input-21"
                aria-hidden="false"
                style="left: 0px; position: absolute;"
         >
@@ -64,13 +64,13 @@ exports[`VFileInput.ts should display file size 1`] = `
         <div class="v-file-input__text">
           test (2.1 MB)
         </div>
-        <input id="input-25"
+        <input id="input-21"
                type="file"
         >
       </div>
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
-          <button class="v-icon--link v-icon notranslate theme--light mdi mdi-close"
+          <button class="v-icon--link v-icon notranslate mdi mdi-close theme--light"
                   aria-hidden="false"
                   type="button"
                   aria-label="Clear File input"
@@ -94,7 +94,7 @@ exports[`VFileInput.ts should display file size 2`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+      <button class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
               aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
@@ -106,7 +106,7 @@ exports[`VFileInput.ts should display file size 2`] = `
     <div class="v-input__slot">
       <div class="v-text-field__slot">
         <label class="v-label v-label--active theme--light"
-               for="input-25"
+               for="input-21"
                aria-hidden="false"
                style="left: 0px; position: absolute;"
         >
@@ -115,13 +115,13 @@ exports[`VFileInput.ts should display file size 2`] = `
         <div class="v-file-input__text">
           test (2.1 MB)
         </div>
-        <input id="input-25"
+        <input id="input-21"
                type="file"
         >
       </div>
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
-          <button class="v-icon--link v-icon notranslate theme--light mdi mdi-close"
+          <button class="v-icon--link v-icon notranslate mdi mdi-close theme--light"
                   aria-hidden="false"
                   type="button"
                   aria-label="Clear File input"
@@ -145,7 +145,7 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+      <button class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
               aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
@@ -157,7 +157,7 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
     <div class="v-input__slot">
       <div class="v-text-field__slot">
         <label class="v-label v-label--active theme--light"
-               for="input-34"
+               for="input-28"
                aria-hidden="false"
                style="left: 0px; position: absolute;"
         >
@@ -166,13 +166,13 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
         <div class="v-file-input__text">
           2 files
         </div>
-        <input id="input-34"
+        <input id="input-28"
                type="file"
         >
       </div>
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
-          <button class="v-icon--link v-icon notranslate theme--light mdi mdi-close"
+          <button class="v-icon--link v-icon notranslate mdi mdi-close theme--light"
                   aria-hidden="false"
                   type="button"
                   aria-label="Clear File input"
@@ -199,7 +199,7 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+      <button class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
               aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
@@ -211,7 +211,7 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
     <div class="v-input__slot">
       <div class="v-text-field__slot">
         <label class="v-label v-label--active theme--light"
-               for="input-34"
+               for="input-28"
                aria-hidden="false"
                style="left: 0px; position: absolute;"
         >
@@ -220,13 +220,13 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
         <div class="v-file-input__text">
           2 files
         </div>
-        <input id="input-34"
+        <input id="input-28"
                type="file"
         >
       </div>
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
-          <button class="v-icon--link v-icon notranslate theme--light mdi mdi-close"
+          <button class="v-icon--link v-icon notranslate mdi mdi-close theme--light"
                   aria-hidden="false"
                   type="button"
                   aria-label="Clear File input"
@@ -253,7 +253,7 @@ exports[`VFileInput.ts should render 1`] = `
 <div class="v-input theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+      <button class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
               aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
@@ -296,7 +296,7 @@ exports[`VFileInput.ts should render chips 1`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+      <button class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
               aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
@@ -308,7 +308,7 @@ exports[`VFileInput.ts should render chips 1`] = `
     <div class="v-input__slot">
       <div class="v-text-field__slot">
         <label class="v-label v-label--active theme--light"
-               for="input-99"
+               for="input-81"
                aria-hidden="false"
                style="left: 0px; position: absolute;"
         >
@@ -321,13 +321,13 @@ exports[`VFileInput.ts should render chips 1`] = `
             </span>
           </span>
         </div>
-        <input id="input-99"
+        <input id="input-81"
                type="file"
         >
       </div>
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
-          <button class="v-icon--link v-icon notranslate theme--light mdi mdi-close"
+          <button class="v-icon--link v-icon notranslate mdi mdi-close theme--light"
                   aria-hidden="false"
                   type="button"
                   aria-label="Clear File input"
@@ -351,7 +351,7 @@ exports[`VFileInput.ts should render counter 1`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+      <button class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
               aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
@@ -363,7 +363,7 @@ exports[`VFileInput.ts should render counter 1`] = `
     <div class="v-input__slot">
       <div class="v-text-field__slot">
         <label class="v-label v-label--active theme--light"
-               for="input-15"
+               for="input-13"
                aria-hidden="false"
                style="left: 0px; position: absolute;"
         >
@@ -372,13 +372,13 @@ exports[`VFileInput.ts should render counter 1`] = `
         <div class="v-file-input__text">
           test
         </div>
-        <input id="input-15"
+        <input id="input-13"
                type="file"
         >
       </div>
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
-          <button class="v-icon--link v-icon notranslate theme--light mdi mdi-close"
+          <button class="v-icon--link v-icon notranslate mdi mdi-close theme--light"
                   aria-hidden="false"
                   type="button"
                   aria-label="Clear File input"
@@ -405,7 +405,7 @@ exports[`VFileInput.ts should render multiple 1`] = `
 <div class="v-input theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+      <button class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
               aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
@@ -417,7 +417,7 @@ exports[`VFileInput.ts should render multiple 1`] = `
     <div class="v-input__slot">
       <div class="v-text-field__slot">
         <label class="v-label theme--light"
-               for="input-8"
+               for="input-7"
                aria-hidden="false"
                style="left: 0px; position: absolute;"
         >
@@ -425,7 +425,7 @@ exports[`VFileInput.ts should render multiple 1`] = `
         </label>
         <div class="v-file-input__text">
         </div>
-        <input id="input-8"
+        <input id="input-7"
                type="file"
                multiple
         >
@@ -449,7 +449,7 @@ exports[`VFileInput.ts should render small chips 1`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+      <button class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
               aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
@@ -461,7 +461,7 @@ exports[`VFileInput.ts should render small chips 1`] = `
     <div class="v-input__slot">
       <div class="v-text-field__slot">
         <label class="v-label v-label--active theme--light"
-               for="input-109"
+               for="input-89"
                aria-hidden="false"
                style="left: 0px; position: absolute;"
         >
@@ -474,13 +474,13 @@ exports[`VFileInput.ts should render small chips 1`] = `
             </span>
           </span>
         </div>
-        <input id="input-109"
+        <input id="input-89"
                type="file"
         >
       </div>
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
-          <button class="v-icon--link v-icon notranslate theme--light mdi mdi-close"
+          <button class="v-icon--link v-icon notranslate mdi mdi-close theme--light"
                   aria-hidden="false"
                   type="button"
                   aria-label="Clear File input"
@@ -506,7 +506,7 @@ exports[`VFileInput.ts should render with hideInput prop like original Vuetify 1
 >
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+      <button class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
               aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
@@ -520,7 +520,7 @@ exports[`VFileInput.ts should render with hideInput prop like original Vuetify 1
     <div class="v-input__slot">
       <div class="v-text-field__slot">
         <label class="v-label theme--light"
-               for="input-175"
+               for="input-145"
                aria-hidden="false"
                style="left: 0px; position: absolute;"
         >
@@ -529,7 +529,7 @@ exports[`VFileInput.ts should render with hideInput prop like original Vuetify 1
         <div class="v-file-input__text">
         </div>
         <input accept="image/*"
-               id="input-175"
+               id="input-145"
                type="file"
         >
       </div>
@@ -554,7 +554,7 @@ exports[`VFileInput.ts should render without icon 1`] = `
     <div class="v-input__slot">
       <div class="v-text-field__slot">
         <label class="v-label theme--light"
-               for="input-119"
+               for="input-97"
                aria-hidden="false"
                style="left: 0px; position: absolute;"
         >
@@ -562,7 +562,7 @@ exports[`VFileInput.ts should render without icon 1`] = `
         </label>
         <div class="v-file-input__text">
         </div>
-        <input id="input-119"
+        <input id="input-97"
                type="file"
         >
       </div>
@@ -585,7 +585,7 @@ exports[`VFileInput.ts should set display none if hide-input prop is set 1`] = `
 <div class="v-input theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+      <button class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
               aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
@@ -599,7 +599,7 @@ exports[`VFileInput.ts should set display none if hide-input prop is set 1`] = `
     <div class="v-input__slot">
       <div class="v-text-field__slot">
         <label class="v-label theme--light"
-               for="input-154"
+               for="input-127"
                aria-hidden="false"
                style="left: 0px; position: absolute;"
         >
@@ -607,7 +607,7 @@ exports[`VFileInput.ts should set display none if hide-input prop is set 1`] = `
         </label>
         <div class="v-file-input__text">
         </div>
-        <input id="input-154"
+        <input id="input-127"
                type="file"
         >
       </div>

package/src/components/VIcon/VIcon.ts

@@ -33,11 +33,20 @@ function isSvgPath (icon: string): boolean {
   return (/^[mzlhvcsqta]\s*[-+.0-9][^mlhvzcsqta]+/i.test(icon) && /[\dz]$/i.test(icon) && icon.length > 4)
 }
 
-function classesToString (classObj: Record<string, boolean>): string {
-  return Object.keys(classObj).filter(key => classObj[key]).join(' ')
+function readFirstText (node: any): string {
+  if (!node) return ''
+  if (typeof node === 'string') return node.trim()
+  if (typeof node.children === 'string') return node.children.trim()
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) {
+      const text = readFirstText(child)
+      if (text) return text
+    }
+  }
+  return ''
 }
 
-export const VIconInternal = mixins(
+export default mixins(
   BindsAttrs,
   Colorable,
   Sizeable,
@@ -56,7 +65,9 @@ export const VIconInternal = mixins(
       type: String,
       required: false,
       default: 'i'
-    }
+    },
+    textContent: String,
+    innerHTML: String
   },
 
   computed: {
@@ -73,15 +84,16 @@ export const VIconInternal = mixins(
   methods: {
     getIcon (): VuetifyIcon {
       let iconName = ''
-      if (this.$slots.default) {
-        const slotChildren = this.$slots.default()
-        if (slotChildren && slotChildren[0]) {
-          const children = slotChildren[0].children
-          if (typeof children === 'string') {
-            iconName = children.trim()
-          }
+      if (this.textContent) iconName = this.textContent.trim()
+      else if (this.innerHTML) iconName = this.innerHTML.trim()
+      else {
+        const slotChildren = this.$slots.default?.() || []
+        for (const child of slotChildren) {
+          iconName = readFirstText(child)
+          if (iconName) break
         }
       }
+
       return remapInternalIcon(this, iconName)
     },
     getSize (): string | undefined {
@@ -123,30 +135,20 @@ export const VIconInternal = mixins(
       return data
     },
     applyColors (data: any): void {
+      data.class = normalizeClasses([data.class, this.themeClasses])
       this.setTextColor(this.color, data)
     },
     getSvgWrapperData () {
       const fontSize = this.getSize()
-
-      const defaultData = this.getDefaultData()
-      const normalizedClasses = normalizeClasses([defaultData.class, this.themeClasses])
-
       const wrapperData: any = {
-        class: classesToString(normalizedClasses),
-        'aria-hidden': defaultData['aria-hidden'],
-        type: defaultData.type,
+        ...this.getDefaultData(),
         style: fontSize
           ? {
               fontSize,
               height: fontSize,
               width: fontSize
             }
-          : undefined,
-        ...this.listeners$
-      }
-
-      if (this.hasClickListener && this.disabled) {
-        wrapperData.disabled = true
+          : undefined
       }
 
       this.applyColors(wrapperData)
@@ -155,7 +157,7 @@ export const VIconInternal = mixins(
     },
     renderFontIcon (icon: string): VNode {
       const newChildren: VNodeChildren = []
-      const defaultData = this.getDefaultData()
+      const data = this.getDefaultData()
 
       let iconType = 'material-icons'
       // Material Icon delimiter is _
@@ -171,33 +173,18 @@ export const VIconInternal = mixins(
         if (isFontAwesome5(iconType)) iconType = ''
       }
 
-      // Создаем объект классов для иконки
-      const iconClasses = { [iconType]: true }
-      if (!isMaterialIcon) {
-        iconClasses[icon] = true
-      }
-
-      const allClasses = normalizeClasses([defaultData.class, this.themeClasses, iconClasses])
+      data.class[iconType] = true
+      data.class[icon] = !isMaterialIcon
 
       const fontSize = this.getSize()
-      const fontData: any = {
-        class: classesToString(allClasses),
-        'aria-hidden': defaultData['aria-hidden'],
-        type: defaultData.type,
-        style: fontSize ? { fontSize } : undefined,
-        ...this.listeners$
-      }
-
-      if (this.hasClickListener && this.disabled) {
-        fontData.disabled = true
-      }
+      if (fontSize) data.style = { fontSize }
 
-      this.applyColors(fontData)
+      this.applyColors(data)
 
       const el = this.hasClickListener ? 'button' : getTagValue(this.tag)
       return typeof el === 'string'
-        ? h(el, fontData, newChildren)
-        : h(el, fontData, { default: () => newChildren })
+        ? h(el, data, newChildren)
+        : h(el, data, { default: () => newChildren })
     },
     renderSvgIcon (icon: string): VNode {
       const size = this.getSize()
@@ -228,29 +215,29 @@ export const VIconInternal = mixins(
     renderSvgIconComponent (
       icon: VuetifyIconComponent
     ): VNode {
-      const size = this.getSize()
-      const componentClasses = normalizeClasses([
-        { 'v-icon__component': true },
-        this.themeClasses
-      ])
+      const data: any = {
+        class: {
+          'v-icon__component': true
+        }
+      }
 
-      const componentData: any = {
-        class: classesToString(componentClasses),
-        style: size
-          ? {
-              fontSize: size,
-              height: size,
-              width: size
-            }
-          : undefined,
-        ...icon.props
+      const size = this.getSize()
+      if (size) {
+        data.style = {
+          fontSize: size,
+          height: size,
+          width: size
+        }
       }
 
-      this.applyColors(componentData)
+      this.applyColors(data)
+
+      const component = icon.component
+      Object.assign(data, icon.props)
 
       return h(this.hasClickListener ? 'button' : 'span', this.getSvgWrapperData(), {
         default: () => [
-          h(icon.component, componentData)
+          h(component, data)
         ]
       })
     }
@@ -269,38 +256,3 @@ export const VIconInternal = mixins(
     return this.renderSvgIconComponent(icon)
   }
 })
-
-export default defineComponent({
-  name: 'v-icon',
-
-  $_wrapperFor: VIconInternal,
-
-  functional: true,
-
-  mounted () {
-    this.$el.innerHTML = ''
-  },
-
-  render (): VNode {
-    const data = { ...this.$attrs }
-
-    // console.log(children && children[0]?.children)
-    return h(VIconInternal, data, {
-      default: () => {
-        let iconName = ''
-
-        // Support usage of v-text and v-html
-        // if (data.domProps) {
-        if (this.$.vnode.props?.textContent) {
-          iconName = this.$.vnode.props.textContent ||
-          this.$.vnode.props.innerHTML ||
-            iconName
-        }
-
-        const children = this.$slots.default?.()
-
-        return iconName ? [iconName] : children && children[0]?.children
-      }
-    })
-  }
-})

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

@@ -11,9 +11,6 @@ import {
   enableAutoUnmount
 } from '@vue/test-utils'
 
-// Импортируем внутренний компонент для прямого тестирования
-import { VIconInternal } from '../VIcon'
-
 interface MountContext {
   props?: Record<string, any>
   attrs?: Record<string, any>
@@ -201,6 +198,30 @@ describe('VIcon', () => {
       expect(wrapper.element.classList).toContain('mdi')
       expect(wrapper.element.classList).toContain('mdi-chevron-left')
     })
+
+    it('should not render raw $mdi token from v-text in Vue 3', () => {
+      const wrapper = mount(VIcon, {
+        attrs: { textContent: '$mdiReddit' },
+        global: {
+          mocks: {
+            $vuetify: {
+              theme: {
+                current: 'light',
+                dark: false
+              },
+              icons: {
+                component: null,
+                values: {
+                  mdiReddit: 'M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'
+                }
+              }
+            }
+          }
+        }
+      })
+
+      expect(wrapper.html()).not.toContain('$mdiReddit')
+    })
   })
 
   it('should use an <i> tag if none provided', () => {
@@ -266,8 +287,8 @@ describe('VIcon', () => {
     it('should render an svg icon', async () => {
       const svgPath = 'M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'
 
-      // Тестируем напрямую внутренний компонент VIconInternal
-      const directWrapper = mount(VIconInternal, {
+      // Тестируем напрямую внутренний компонент VIcon
+      const directWrapper = mount(VIcon, {
         slots: {
           default: () => svgPath
         },