Merge branch 'master' into fix/vuetifyjs#11640-v-bottom-navigation-in…

…put-value-not-effect

packages/api-generator/src/helpers/variables.js

@@ -219,7 +219,12 @@ const VSlider = {
   ...VInput,
   events: [
     ...VInput.events,
-    ...createItems(['start', 'end'], {
+    ...createItems([
+      'change',
+      'end',
+      'input',
+      'start',
+    ], {
       source: 'v-slider',
       value: 'number',
     }),
@@ -242,6 +247,22 @@ const VSlider = {
   ],
 }
 
+const VRangeSlider = {
+  ...VSlider,
+  events: [
+    ...VInput.events,
+    ...createItems([
+      'change',
+      'end',
+      'input',
+      'start',
+    ], {
+      source: 'v-range-slider',
+      value: 'array',
+    }),
+  ],
+}
+
 const VTreeviewScopedProps = {
   item: 'any',
   leaf: 'boolean',
@@ -382,6 +403,7 @@ module.exports = {
   VInput,
   VSelect,
   VSlider,
+  VRangeSlider,
   VTextField,
   VTimestamp,
   VTimestampWithCategory,

packages/api-generator/src/locale/en/v-icon.json

@@ -2,8 +2,8 @@
   "props": {
     "dense": "Makes icon smaller (20px)",
     "disabled": "Disable the input",
-    "left": "Applies appropriate margins to the icon when placed to the **left** of another element or text. Typically used inside of a button",
-    "right": "Applies appropriate margins to the icon when placed to the **right** of another element or text. Typically used inside of a button",
+    "left": "Applies appropriate margins to the icon inside of a button when placed to the **left** of another element or text",
+    "right": "Applies appropriate margins to the icon inside of a button when placed to the **right** of another element or text",
     "size": "Specifies a custom font size for the icon",
     "tag": "Specifies a custom tag to be used"
   }

packages/api-generator/src/maps/v-range-slider.js

@@ -1,5 +1,5 @@
-const { VSlider } = require('../helpers/variables')
+const { VRangeSlider } = require('../helpers/variables')
 
 module.exports = {
-  'v-range-slider': VSlider,
+  'v-range-slider': VRangeSlider,
 }

packages/docs/build/markdown-it.js

@@ -11,12 +11,16 @@ const md = require('markdown-it')({
     permalinkSymbol: '',
     permalinkClass: '',
     slugify: str => {
-      const slug = String(str)
+      let slug = String(str)
         .trim()
         .toLowerCase()
-        .replace(/[^a-z0-9 -]/g, '')
+        .replace(/[^a-z0-9 -]/g, c => c.charCodeAt(0).toString(16))
         .replace(/\s+/g, '-')
 
+      if (slug.charAt(0).match(/[^a-z]/g)) {
+        slug = 'section-' + slug
+      }
+
       return encodeURIComponent(slug)
     },
   })

packages/docs/src/data/nav.json

@@ -106,6 +106,7 @@
           "inputs",
           "overflow-btns",
           "radio-buttons",
+          "range-sliders",
           "selects",
           "sliders",
           "switches",

packages/docs/src/pages/en/getting-started/frequently-asked-questions.md

@@ -127,7 +127,7 @@ module.exports = {
 
 - **My application is not working.**{ #my-application-is-not-working }
 
-  First, ensure that you're using the latest version of Vue.js and Vuetify. Try to reproduce it in codepen using the following [template](https://template.vuetifyjs.com/). If you are unable to reproduce the issue outside of your environment, this usually means the issue resides locally. If you are still unable to resolve your issue, please provide your codepen and issue in **#need-help** in the [community](https://chat.vuetifyjs.com).
+  First, ensure that you're using the latest version of Vue.js and Vuetify. Try to reproduce it in codepen using the following [template](https://template.vuetifyjs.com/). If you are unable to reproduce the issue outside of your environment, this usually means the issue resides locally. If you are still unable to resolve your issue, please reach out to our [community](https://community.vuetifyjs.com) by providing your codepen and issue in the appropriate help channel.
 
 <br>
 

packages/vuetify/src/components/VData/__tests__/VData.spec.ts

@@ -102,6 +102,38 @@ describe('VData.ts', () => {
     }))
   })
 
+  it('should group items with null key and missing key as a null group', async () => {
+    const render = jest.fn()
+    const items = [
+      { id: 1, text: 'foo', baz: null },
+      { id: 2, text: 'bar', baz: 'one' },
+      { id: 3, text: 'baz' },
+    ]
+
+    const wrapper = mountFunction({
+      propsData: {
+        items,
+        groupBy: ['baz'],
+      },
+      scopedSlots: {
+        default: render,
+      },
+    })
+
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      groupedItems: [
+        {
+          name: '',
+          items: [items[0], items[2]],
+        },
+        {
+          name: 'one',
+          items: [items[1]],
+        },
+      ],
+    }))
+  })
+
   it('should group items by deep keys', async () => {
     const render = jest.fn()
     const items = [

packages/vuetify/src/components/VImg/VImg.ts

@@ -214,7 +214,17 @@ export default mixins(
     },
     pollForSize (img: HTMLImageElement, timeout: number | null = 100) {
       const poll = () => {
-        const { naturalHeight, naturalWidth } = img
+        let { naturalHeight, naturalWidth } = img
+
+        if (
+          img.src &&
+          (img.src.endsWith('.svg') || img.src.startsWith('data:image/svg+xml')) &&
+          naturalHeight === 0 &&
+          naturalWidth === 0
+        ) {
+          naturalHeight = 1
+          naturalWidth = 1
+        }
 
         if (naturalHeight || naturalWidth) {
           this.naturalWidth = naturalWidth

packages/vuetify/src/components/VRangeSlider/VRangeSlider.ts

@@ -113,7 +113,7 @@ export default VSlider.extend({
         },
         {
           class: this.isDisabled ? 'v-slider__track-background' : 'v-slider__track-fill',
-          color: this.isDisabled ? this.computedTrackColor : this.computedColor,
+          color: this.isDisabled ? this.computedTrackColor : this.computedTrackFillColor,
           styles: [this.inputWidth[0], Math.abs(this.inputWidth[1] - this.inputWidth[0]), padding, padding * -2],
         },
         {

packages/vuetify/src/components/VRangeSlider/__tests__/VRangeSlider.spec.ts

@@ -210,4 +210,24 @@ describe('VRangeSlider.ts', () => {
 
     expect(min.data.attrs.id).not.toEqual(max.data.attrs.id)
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/12733
+  it('should fill track color', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        trackFillColor: 'red',
+      },
+    })
+    expect(wrapper.find('.v-slider__track-fill.red').exists()).toBe(true)
+  })
+
+  it('should fill track color with rgba string', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        trackFillColor: 'rgba(255, 0, 0, 0.5)',
+      },
+    })
+    const trackFill = wrapper.find('.v-slider__track-fill')
+    expect(trackFill.attributes('style')).toBe('background-color: rgba(255, 0, 0, 0.5);')
+  })
 })

packages/vuetify/src/components/VSnackbar/VSnackbar.sass

@@ -91,16 +91,20 @@
 
   &--left
     justify-content: flex-start
+    right: auto
 
   &--multi-line &__wrapper
     min-height: $snackbar-multi-line-wrapper-min-height
 
   &--right
     justify-content: flex-end
+    left: auto
 
   &:not(.v-snack--has-background) &__wrapper
     box-shadow: none !important
 
+  &--bottom
+    top: auto
 
   &--text &__wrapper:before
     background-color: currentColor
@@ -116,6 +120,7 @@
 
   &--top
     align-items: flex-start
+    bottom: auto
 
   &--vertical &__wrapper
     flex-direction: column

packages/vuetify/src/util/helpers.ts

@@ -268,14 +268,14 @@ export function groupItems<T extends any = any> (
 ): ItemGroup<T>[] {
   const key = groupBy[0]
   const groups: ItemGroup<T>[] = []
-  let current = null
+  let current
   for (var i = 0; i < items.length; i++) {
     const item = items[i]
-    const val = getObjectValueByPath(item, key)
+    const val = getObjectValueByPath(item, key, null)
     if (current !== val) {
       current = val
       groups.push({
-        name: val,
+        name: val ?? '',
         items: [],
       })
     }