feat(VListItem): add selectable prop

packages/docs/src/lang/en/components/Lists.json

@@ -91,6 +91,7 @@
       "color": "Applies specified color to the control when in an **active** state or **input-value** is **true** - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`)",
       "disabled": "Disables the component",
       "inputValue": "Controls the **active** state of the item. This is typically used to highlight the component",
+      "selectable": "Allow text selection inside `v-list-item`. This prop uses [user-select](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select)",
       "value": "The value used when a child of a [v-list-item-group](/components/list-item-groups)."
     },
     "v-list-item-avatar": {

packages/vuetify/src/components/VList/VListItem.sass

@@ -39,6 +39,9 @@
   &--disabled
     pointer-events: none
 
+  &--selectable
+    user-select: auto
+
 // Element
 .v-list-item__action
   align-self: center

packages/vuetify/src/components/VList/VListItem.ts

@@ -74,6 +74,9 @@ export default baseMixins.extend<options>().extend({
     dense: Boolean,
     inactive: Boolean,
     link: Boolean,
+    selectable: {
+      type: Boolean,
+    },
     tag: {
       type: String,
       default: 'div',
@@ -95,6 +98,7 @@ export default baseMixins.extend<options>().extend({
         'v-list-item--dense': this.dense,
         'v-list-item--disabled': this.disabled,
         'v-list-item--link': this.isClickable && !this.inactive,
+        'v-list-item--selectable': this.selectable,
         'v-list-item--three-line': this.threeLine,
         'v-list-item--two-line': this.twoLine,
         ...this.themeClasses,

packages/vuetify/src/components/VList/__tests__/VListItem.spec.ts

@@ -101,6 +101,16 @@ describe('VListItem.ts', () => {
     expect(wrapper.classes('v-list-item--link')).toBe(true)
   })
 
+  it('should have --selectable class if the selectable property is true', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        selectable: true,
+      },
+    })
+
+    expect(wrapper.classes('v-list-item--selectable')).toBe(true)
+  })
+
   it('should react to keydown.enter', () => {
     const click = jest.fn()
     const wrapper = mountFunction({