diff --git a/packages/docs/src/lang/en/components/Lists.json b/packages/docs/src/lang/en/components/Lists.json index ac8c2fc168e..a235fad5211 100644 --- a/packages/docs/src/lang/en/components/Lists.json +++ b/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": { diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass index 6af29fe5da0..e295fc459fe 100644 --- a/packages/vuetify/src/components/VList/VListItem.sass +++ b/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 diff --git a/packages/vuetify/src/components/VList/VListItem.ts b/packages/vuetify/src/components/VList/VListItem.ts index 62cbe027584..5354ba18c93 100644 --- a/packages/vuetify/src/components/VList/VListItem.ts +++ b/packages/vuetify/src/components/VList/VListItem.ts @@ -74,6 +74,9 @@ export default baseMixins.extend().extend({ dense: Boolean, inactive: Boolean, link: Boolean, + selectable: { + type: Boolean, + }, tag: { type: String, default: 'div', @@ -95,6 +98,7 @@ export default baseMixins.extend().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, diff --git a/packages/vuetify/src/components/VList/__tests__/VListItem.spec.ts b/packages/vuetify/src/components/VList/__tests__/VListItem.spec.ts index 89a87855715..b46ea4c863c 100644 --- a/packages/vuetify/src/components/VList/__tests__/VListItem.spec.ts +++ b/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({