()({
const rangeStart = shallowRef()
const rangeStop = shallowRef()
+ if (props.multiple === 'range' && model.value.length > 0) {
+ rangeStart.value = model.value[0]
+ if (model.value.length > 1) {
+ rangeStop.value = model.value[model.value.length - 1]
+ }
+ }
+
const atMax = computed(() => {
const max = ['number', 'string'].includes(typeof props.multiple) ? Number(props.multiple) : Infinity
@@ -68,15 +75,15 @@ export const VDatePickerMonth = genericComponent()({
rangeStart.value = _value
model.value = [rangeStart.value]
} else if (!rangeStop.value) {
- if (adapter.isSameDay(value, rangeStart.value)) {
+ if (adapter.isSameDay(_value, rangeStart.value)) {
rangeStart.value = undefined
model.value = []
return
- } else if (adapter.isBefore(value, rangeStart.value)) {
- rangeStop.value = rangeStart.value
+ } else if (adapter.isBefore(_value, rangeStart.value)) {
+ rangeStop.value = adapter.endOfDay(rangeStart.value)
rangeStart.value = _value
} else {
- rangeStop.value = _value
+ rangeStop.value = adapter.endOfDay(_value)
}
const diff = adapter.getDiff(rangeStop.value, rangeStart.value, 'days')
diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.cy.tsx b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.cy.tsx
index 7b68ddc3846..9d328f6133d 100644
--- a/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.cy.tsx
+++ b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.cy.tsx
@@ -21,4 +21,23 @@ describe('VDatePicker', () => {
expect(model.value).to.have.length(11)
})
})
+
+ it('selects a range of dates across month boundary', () => {
+ const model = ref([])
+ cy.mount(() => (
+
+
+ ))
+
+ cy.get('.v-date-picker-controls__month-btn').click()
+ cy.get('.v-date-picker-months__content').contains('Jan').click()
+ cy.get('.v-date-picker-month__day').contains(7).click()
+ cy.get('.v-date-picker-controls__month-btn').click()
+ cy.get('.v-date-picker-months__content').contains('Feb').click()
+ cy.get('.v-date-picker-month__day').contains(7).click()
+ .then(() => {
+ expect(model.value).to.have.length(32)
+ })
+ })
})
diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx
index a47a8112a17..aa36192caa6 100644
--- a/packages/vuetify/src/components/VList/VList.tsx
+++ b/packages/vuetify/src/components/VList/VList.tsx
@@ -73,7 +73,7 @@ function transformItems (props: ItemProps & { itemType: string }, items: (string
return array
}
-function useListItems (props: ItemProps & { itemType: string }) {
+export function useListItems (props: ItemProps & { itemType: string }) {
const items = computed(() => transformItems(props, props.items))
return { items }
@@ -141,8 +141,10 @@ export const VList = genericComponent true,
+ 'update:activated': (value: unknown[]) => true,
'update:opened': (value: unknown[]) => true,
'click:open': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
+ 'click:activate': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
'click:select': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
},
@@ -155,7 +157,7 @@ export const VList = genericComponent props.lines ? `v-list--${props.lines}-line` : undefined)
const activeColor = toRef(props, 'activeColor')
const baseColor = toRef(props, 'baseColor')
@@ -277,6 +279,8 @@ export const VList = genericComponent()({
))
- return {}
+ return {
+ isOpen,
+ }
},
})
diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
index 5ceed20f447..54cf2ab1fc5 100644
--- a/packages/vuetify/src/components/VList/VListItem.tsx
+++ b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -115,17 +115,27 @@ export const VListItem = genericComponent()({
setup (props, { attrs, slots, emit }) {
const link = useLink(props, attrs)
const id = computed(() => props.value === undefined ? link.href.value : props.value)
- const { select, isSelected, isIndeterminate, isGroupActivator, root, parent, openOnSelect } = useNestedItem(id, false)
+ const {
+ activate,
+ isActivated,
+ select,
+ isSelected,
+ isIndeterminate,
+ isGroupActivator,
+ root,
+ parent,
+ openOnSelect,
+ } = useNestedItem(id, false)
const list = useList()
const isActive = computed(() =>
props.active !== false &&
- (props.active || link.isActive?.value || isSelected.value)
+ (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value))
)
const isLink = computed(() => props.link !== false && link.isLink.value)
const isClickable = computed(() =>
!props.disabled &&
props.link !== false &&
- (props.link || link.isClickable.value || (props.value != null && !!list))
+ (props.link || link.isClickable.value || (!!list && (root.selectable.value || root.activatable.value || props.value != null)))
)
const roundedProps = computed(() => props.rounded || props.nav)
@@ -167,7 +177,14 @@ export const VListItem = genericComponent()({
if (isGroupActivator || !isClickable.value) return
link.navigate?.(e)
- props.value != null && select(!isSelected.value, e)
+
+ if (root.activatable) {
+ activate(!isActivated.value, e)
+ } else if (root.selectable) {
+ select(!isSelected.value, e)
+ } else if (props.value != null) {
+ select(!isSelected.value, e)
+ }
}
function onKeyDown (e: KeyboardEvent) {
@@ -339,7 +356,12 @@ export const VListItem = genericComponent()({
)
})
- return {}
+ return {
+ isGroupActivator,
+ isSelected,
+ list,
+ select,
+ }
},
})
diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx
index 08bebfa5458..74f643e2015 100644
--- a/packages/vuetify/src/components/VMenu/VMenu.tsx
+++ b/packages/vuetify/src/components/VMenu/VMenu.tsx
@@ -135,6 +135,9 @@ export const VMenu = genericComponent()({
isActive.value = false
overlay.value?.activatorEl?.focus()
}
+ } else if (['Enter', ' '].includes(e.key) && props.closeOnContentClick) {
+ isActive.value = false
+ parent?.closeParents()
}
}
diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
index 839adea358e..7a9bacbcf5e 100644
--- a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
+++ b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
@@ -70,7 +70,8 @@
width: 100%
z-index: -1
- img
+ // TODO: remove in v4
+ img:not(.v-img__img)
height: $navigation-drawer-img-height
object-fit: $navigation-drawer-img-object-fit
width: $navigation-drawer-img-width
diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
index a6004f2f37e..57b37d248fb 100644
--- a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
+++ b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
@@ -1,6 +1,10 @@
// Styles
import './VNavigationDrawer.sass'
+// Components
+import { VDefaultsProvider } from '@/components/VDefaultsProvider'
+import { VImg } from '@/components/VImg'
+
// Composables
import { useSticky } from './sticky'
import { useTouch } from './touch'
@@ -246,10 +250,29 @@ export const VNavigationDrawer = genericComponent()({
>
{ hasImage && (
()({
function onInput () {
// The maxlength attribute doesn't work for the number type input, so the text type is used.
// The following logic simulates the behavior of a number input.
- if (props.type === 'number' && /[^0-9]/g.test(current.value.value)) {
+ if (isValidNumber(current.value.value)) {
current.value.value = ''
return
}
+
const array = model.value.slice()
const value = current.value.value
@@ -165,7 +166,11 @@ export const VOtpInput = genericComponent()({
e.preventDefault()
e.stopPropagation()
- model.value = (e?.clipboardData?.getData('Text') ?? '').split('')
+ const clipboardText = e?.clipboardData?.getData('Text') ?? ''
+
+ if (!isValidNumber(clipboardText)) return
+
+ model.value = clipboardText.split('')
inputRef.value?.[index].blur()
}
@@ -186,6 +191,10 @@ export const VOtpInput = genericComponent()({
focusIndex.value = -1
}
+ function isValidNumber (value: string) {
+ return props.type === 'number' && !isNaN(Number(value))
+ }
+
provideDefaults({
VField: {
color: computed(() => props.color),
diff --git a/packages/vuetify/src/components/VOverlay/scrollStrategies.ts b/packages/vuetify/src/components/VOverlay/scrollStrategies.ts
index 3d2495c4072..9369a54637d 100644
--- a/packages/vuetify/src/components/VOverlay/scrollStrategies.ts
+++ b/packages/vuetify/src/components/VOverlay/scrollStrategies.ts
@@ -1,5 +1,5 @@
// Utilities
-import { effectScope, nextTick, onScopeDispose, watchEffect } from 'vue'
+import { effectScope, onScopeDispose, watchEffect } from 'vue'
import { requestNewFrame } from './requestNewFrame'
import { convertToUnit, getScrollParents, hasScrollbar, IN_BROWSER, propsFactory } from '@/util'
@@ -49,7 +49,7 @@ export function useScrollStrategies (
if (!(data.isActive.value && props.scrollStrategy)) return
scope = effectScope()
- await nextTick()
+ await new Promise(resolve => setTimeout(resolve))
scope.active && scope.run(() => {
if (typeof props.scrollStrategy === 'function') {
props.scrollStrategy(data, props, scope!)
diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index 7f6ff07e3b9..44814fdde29 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -313,10 +313,12 @@ export const VSelect = genericComponent props.items, val => {
- if (!isFocused.value || !val.length || menu.value) return
+ watch(() => props.items, (newVal, oldVal) => {
+ if (menu.value) return
- menu.value = true
+ if (isFocused.value && !oldVal.length && newVal.length) {
+ menu.value = true
+ }
})
useRender(() => {
diff --git a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
index 0ca61fa47cd..b438127a98a 100644
--- a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
+++ b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
@@ -584,6 +584,21 @@ describe('VSelect', () => {
.should('exist')
})
+ // https://github.com/vuetifyjs/vuetify/issues/19346
+ it('should not show menu when focused and existing non-empty items are changed', () => {
+ cy
+ .mount((props: any) => (
+ children: Map
+ parents: Map
+ event?: Event
+}) => Set
+
+export type ActiveStrategyTransformInFn = (
+ v: readonly unknown[] | undefined,
+ children: Map,
+ parents: Map,
+) => Set
+
+export type ActiveStrategyTransformOutFn = (
+ v: Set,
+ children: Map,
+ parents: Map,
+) => unknown[]
+
+export type ActiveStrategy = {
+ activate: ActiveStrategyFn
+ in: ActiveStrategyTransformInFn
+ out: ActiveStrategyTransformOutFn
+}
+
+export const independentActiveStrategy = (mandatory?: boolean): ActiveStrategy => {
+ const strategy: ActiveStrategy = {
+ activate: ({ id, value, activated }) => {
+ id = toRaw(id)
+
+ // When mandatory and we're trying to deselect when id
+ // is the only currently selected item then do nothing
+ if (mandatory && !value && activated.size === 1 && activated.has(id)) return activated
+
+ if (value) {
+ activated.add(id)
+ } else {
+ activated.delete(id)
+ }
+
+ return activated
+ },
+ in: (v, children, parents) => {
+ let set = new Set()
+
+ for (const id of (v || [])) {
+ set = strategy.activate({
+ id,
+ value: true,
+ activated: new Set(set),
+ children,
+ parents,
+ })
+ }
+
+ return set
+ },
+ out: v => {
+ return Array.from(v)
+ },
+ }
+
+ return strategy
+}
+
+export const independentSingleActiveStrategy = (mandatory?: boolean): ActiveStrategy => {
+ const parentStrategy = independentActiveStrategy(mandatory)
+
+ const strategy: ActiveStrategy = {
+ activate: ({ activated, id, ...rest }) => {
+ id = toRaw(id)
+ const singleSelected = activated.has(id) ? new Set([id]) : new Set()
+ return parentStrategy.activate({ ...rest, id, activated: singleSelected })
+ },
+ in: (v, children, parents) => {
+ let set = new Set()
+
+ if (v?.length) {
+ set = parentStrategy.in(v.slice(0, 1), children, parents)
+ }
+
+ return set
+ },
+ out: (v, children, parents) => {
+ return parentStrategy.out(v, children, parents)
+ },
+ }
+
+ return strategy
+}
+
+export const leafActiveStrategy = (mandatory?: boolean): ActiveStrategy => {
+ const parentStrategy = independentActiveStrategy(mandatory)
+
+ const strategy: ActiveStrategy = {
+ activate: ({ id, activated, children, ...rest }) => {
+ id = toRaw(id)
+ if (children.has(id)) return activated
+
+ return parentStrategy.activate({ id, activated, children, ...rest })
+ },
+ in: parentStrategy.in,
+ out: parentStrategy.out,
+ }
+
+ return strategy
+}
+
+export const leafSingleActiveStrategy = (mandatory?: boolean): ActiveStrategy => {
+ const parentStrategy = independentSingleActiveStrategy(mandatory)
+
+ const strategy: ActiveStrategy = {
+ activate: ({ id, activated, children, ...rest }) => {
+ id = toRaw(id)
+ if (children.has(id)) return activated
+
+ return parentStrategy.activate({ id, activated, children, ...rest })
+ },
+ in: parentStrategy.in,
+ out: parentStrategy.out,
+ }
+
+ return strategy
+}
diff --git a/packages/vuetify/src/composables/nested/nested.ts b/packages/vuetify/src/composables/nested/nested.ts
index d6f8073a694..aa006fa4f72 100644
--- a/packages/vuetify/src/composables/nested/nested.ts
+++ b/packages/vuetify/src/composables/nested/nested.ts
@@ -2,7 +2,12 @@
import { useProxiedModel } from '@/composables/proxiedModel'
// Utilities
-import { computed, inject, onBeforeUnmount, provide, ref, shallowRef, toRaw } from 'vue'
+import { computed, inject, onBeforeUnmount, provide, ref, shallowRef, toRaw, toRef } from 'vue'
+import {
+ independentActiveStrategy,
+ independentSingleActiveStrategy, leafActiveStrategy,
+ leafSingleActiveStrategy,
+} from './activeStrategies'
import { listOpenStrategy, multipleOpenStrategy, singleOpenStrategy } from './openStrategies'
import {
classicSelectStrategy,
@@ -23,11 +28,16 @@ export type SelectStrategy = 'single-leaf' | 'leaf' | 'independent' | 'single-in
export type OpenStrategyProp = 'single' | 'multiple' | 'list' | OpenStrategy
export interface NestedProps {
+ activatable: boolean
+ selectable: boolean
+ activeStrategy: SelectStrategy | undefined
selectStrategy: SelectStrategy | undefined
openStrategy: OpenStrategyProp | undefined
+ activated: readonly unknown[] | undefined
selected: readonly unknown[] | undefined
opened: readonly unknown[] | undefined
mandatory: boolean
+ 'onUpdate:activated': EventProp<[unknown[]]> | undefined
'onUpdate:selected': EventProp<[unknown[]]> | undefined
'onUpdate:opened': EventProp<[unknown[]]> | undefined
}
@@ -38,12 +48,16 @@ type NestedProvide = {
root: {
children: Ref>
parents: Ref>
+ activatable: Ref
+ selectable: Ref
opened: Ref>
+ activated: Ref>
selected: Ref>
selectedValues: Ref
register: (id: unknown, parentId: unknown, isGroup?: boolean) => void
unregister: (id: unknown) => void
open: (id: unknown, value: boolean, event?: Event) => void
+ activate: (id: unknown, value: boolean, event?: Event) => void
select: (id: unknown, value: boolean, event?: Event) => void
openOnSelect: (id: unknown, value: boolean, event?: Event) => void
}
@@ -60,17 +74,25 @@ export const emptyNested: NestedProvide = {
children: ref(new Map()),
open: () => null,
openOnSelect: () => null,
+ activate: () => null,
select: () => null,
+ activatable: ref(false),
+ selectable: ref(false),
opened: ref(new Set()),
+ activated: ref(new Set()),
selected: ref(new Map()),
selectedValues: ref([]),
},
}
export const makeNestedProps = propsFactory({
+ activatable: Boolean,
+ selectable: Boolean,
+ activeStrategy: [String, Function] as PropType,
selectStrategy: [String, Function] as PropType,
openStrategy: [String, Object] as PropType,
opened: Array as PropType,
+ activated: Array as PropType,
selected: Array as PropType,
mandatory: Boolean,
}, 'nested')
@@ -82,6 +104,18 @@ export const useNested = (props: NestedProps) => {
const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()])
+ const activeStrategy = computed(() => {
+ if (typeof props.activeStrategy === 'object') return props.activeStrategy
+
+ switch (props.activeStrategy) {
+ case 'leaf': return leafActiveStrategy(props.mandatory)
+ case 'single-leaf': return leafSingleActiveStrategy(props.mandatory)
+ case 'independent': return independentActiveStrategy(props.mandatory)
+ case 'single-independent':
+ default: return independentSingleActiveStrategy(props.mandatory)
+ }
+ })
+
const selectStrategy = computed(() => {
if (typeof props.selectStrategy === 'object') return props.selectStrategy
@@ -106,6 +140,13 @@ export const useNested = (props: NestedProps) => {
}
})
+ const activated = useProxiedModel(
+ props,
+ 'activated',
+ props.activated,
+ v => activeStrategy.value.in(v, children.value, parents.value),
+ v => activeStrategy.value.out(v, children.value, parents.value),
+ )
const selected = useProxiedModel(
props,
'selected',
@@ -136,6 +177,9 @@ export const useNested = (props: NestedProps) => {
id: shallowRef(),
root: {
opened,
+ activatable: toRef(props, 'activatable'),
+ selectable: toRef(props, 'selectable'),
+ activated,
selected,
selectedValues: computed(() => {
const arr = []
@@ -208,6 +252,24 @@ export const useNested = (props: NestedProps) => {
nested.root.openOnSelect(id, value, event)
},
+ activate: (id, value, event) => {
+ if (!props.activatable) {
+ return nested.root.select(id, true, event)
+ }
+
+ vm.emit('click:activate', { id, value, path: getPath(id), event })
+
+ const newActivated = activeStrategy.value.activate({
+ id,
+ value,
+ activated: new Set(activated.value),
+ children: children.value,
+ parents: parents.value,
+ event,
+ })
+
+ newActivated && (activated.value = newActivated)
+ },
children,
parents,
},
@@ -231,6 +293,8 @@ export const useNestedItem = (id: Ref, isGroup: boolean) => {
openOnSelect: (open: boolean, e?: Event) => parent.root.openOnSelect(computedId.value, open, e),
isOpen: computed(() => parent.root.opened.value.has(computedId.value)),
parent: computed(() => parent.root.parents.value.get(computedId.value)),
+ activate: (activated: boolean, e?: Event) => parent.root.activate(computedId.value, activated, e),
+ isActivated: computed(() => parent.root.activated.value.has(toRaw(computedId.value))),
select: (selected: boolean, e?: Event) => parent.root.select(computedId.value, selected, e),
isSelected: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'on'),
isIndeterminate: computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
diff --git a/packages/vuetify/src/composables/nested/selectStrategies.ts b/packages/vuetify/src/composables/nested/selectStrategies.ts
index 7bea185f368..1c09acaabce 100644
--- a/packages/vuetify/src/composables/nested/selectStrategies.ts
+++ b/packages/vuetify/src/composables/nested/selectStrategies.ts
@@ -37,7 +37,11 @@ export const independentSelectStrategy = (mandatory?: boolean): SelectStrategy =
// When mandatory and we're trying to deselect when id
// is the only currently selected item then do nothing
if (mandatory && !value) {
- const on = Array.from(selected.entries()).reduce((arr, [key, value]) => value === 'on' ? [...arr, key] : arr, [] as unknown[])
+ const on = Array.from(selected.entries())
+ .reduce((arr, [key, value]) => {
+ if (value === 'on') arr.push(key)
+ return arr
+ }, [] as unknown[])
if (on.length === 1 && on[0] === id) return selected
}
@@ -167,7 +171,11 @@ export const classicSelectStrategy = (mandatory?: boolean): SelectStrategy => {
// If mandatory and planned deselect results in no selected
// items then we can't do it, so return original state
if (mandatory && !value) {
- const on = Array.from(selected.entries()).reduce((arr, [key, value]) => value === 'on' ? [...arr, key] : arr, [] as unknown[])
+ const on = Array.from(selected.entries())
+ .reduce((arr, [key, value]) => {
+ if (value === 'on') arr.push(key)
+ return arr
+ }, [] as unknown[])
if (on.length === 0) return original
}
diff --git a/packages/vuetify/src/composables/theme.ts b/packages/vuetify/src/composables/theme.ts
index f9aeca9bd25..a261035cd33 100644
--- a/packages/vuetify/src/composables/theme.ts
+++ b/packages/vuetify/src/composables/theme.ts
@@ -255,7 +255,7 @@ export function createTheme (options?: ThemeOptions): ThemeInstance & { install:
const styles = computed(() => {
const lines: string[] = []
- if (current.value.dark) {
+ if (current.value?.dark) {
createCssClass(lines, ':root', ['color-scheme: dark'])
}
diff --git a/packages/vuetify/src/entry-bundler.ts b/packages/vuetify/src/entry-bundler.ts
index b38fd39cb83..e9943b01770 100644
--- a/packages/vuetify/src/entry-bundler.ts
+++ b/packages/vuetify/src/entry-bundler.ts
@@ -4,6 +4,7 @@
import './styles/main.sass'
// Components
+import * as blueprints from './blueprints'
import * as components from './components'
import * as directives from './directives'
import { createVuetify as _createVuetify } from './framework'
@@ -19,6 +20,7 @@ export const version = __VUETIFY_VERSION__
createVuetify.version = version
export {
+ blueprints,
components,
directives,
}
diff --git a/packages/vuetify/src/iconsets/fa.ts b/packages/vuetify/src/iconsets/fa.ts
index 142b421f17d..a6a0b0143d8 100644
--- a/packages/vuetify/src/iconsets/fa.ts
+++ b/packages/vuetify/src/iconsets/fa.ts
@@ -41,6 +41,8 @@ const aliases: IconAliases = {
plus: 'fas fa-plus',
minus: 'fas fa-minus',
calendar: 'fas fa-calendar',
+ treeviewCollapse: 'fas fa-caret-down',
+ treeviewExpand: 'fas fa-caret-right',
eyeDropper: 'fas fa-eye-dropper',
}
diff --git a/packages/vuetify/src/iconsets/fa4.ts b/packages/vuetify/src/iconsets/fa4.ts
index a432318068c..d07f69aecba 100644
--- a/packages/vuetify/src/iconsets/fa4.ts
+++ b/packages/vuetify/src/iconsets/fa4.ts
@@ -44,6 +44,8 @@ const aliases: IconAliases = {
plus: 'fa-plus',
minus: 'fa-minus',
calendar: 'fa-calendar',
+ treeviewCollapse: 'fa-caret-down',
+ treeviewExpand: 'fa-caret-right',
eyeDropper: 'fa-eye-dropper',
}
diff --git a/packages/vuetify/src/iconsets/md.ts b/packages/vuetify/src/iconsets/md.ts
index 58f7ff6d86b..58552d42ad2 100644
--- a/packages/vuetify/src/iconsets/md.ts
+++ b/packages/vuetify/src/iconsets/md.ts
@@ -44,6 +44,8 @@ const aliases: IconAliases = {
plus: 'add',
minus: 'remove',
calendar: 'event',
+ treeviewCollapse: 'arrow_drop_down',
+ treeviewExpand: 'arrow_right',
eyeDropper: 'colorize',
}
diff --git a/packages/vuetify/src/iconsets/mdi-svg.ts b/packages/vuetify/src/iconsets/mdi-svg.ts
index 90a448497b8..11cfd86a98a 100644
--- a/packages/vuetify/src/iconsets/mdi-svg.ts
+++ b/packages/vuetify/src/iconsets/mdi-svg.ts
@@ -43,6 +43,8 @@ const aliases: IconAliases = {
plus: 'svg:M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z',
minus: 'svg:M19,13H5V11H19V13Z',
calendar: 'svg:M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z',
+ treeviewCollapse: 'svg:M7,10L12,15L17,10H7Z',
+ treeviewExpand: 'svg:M10,17L15,12L10,7V17Z',
eyeDropper: 'svg:M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z',
}
diff --git a/packages/vuetify/src/iconsets/mdi.ts b/packages/vuetify/src/iconsets/mdi.ts
index df03efdda88..d1a9e788062 100644
--- a/packages/vuetify/src/iconsets/mdi.ts
+++ b/packages/vuetify/src/iconsets/mdi.ts
@@ -44,6 +44,8 @@ const aliases: IconAliases = {
plus: 'mdi-plus',
minus: 'mdi-minus',
calendar: 'mdi-calendar',
+ treeviewCollapse: 'mdi-menu-down',
+ treeviewExpand: 'mdi-menu-right',
eyeDropper: 'mdi-eyedropper',
}
diff --git a/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.tsx b/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.tsx
index 26a29a4ffec..9ea635f84ae 100644
--- a/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.tsx
+++ b/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.tsx
@@ -10,20 +10,26 @@ import { makeComponentProps } from '@/composables/component'
import { makeTransitionProps, MaybeTransition } from '@/composables/transition'
// Utilities
+import { ref } from 'vue'
import { genericComponent, propsFactory, useRender } from '@/util'
+// Types
+import type { OverlaySlots } from '@/components/VOverlay/VOverlay'
+
export const makeVSpeedDialProps = propsFactory({
...makeComponentProps(),
...makeVMenuProps({ offset: 8, minWidth: 0, location: 'top center' as const }),
...makeTransitionProps({ transition: 'fade-transition' }),
}, 'VSpeedDial')
-export const VSpeedDial = genericComponent()({
+export const VSpeedDial = genericComponent()({
name: 'VSpeedDial',
props: makeVSpeedDialProps(),
setup (props, { slots }) {
+ const menuRef = ref()
+
useRender(() => {
const menuProps = VMenu.filterProps(props)
@@ -33,22 +39,28 @@ export const VSpeedDial = genericComponent()({
class={ props.class }
style={ props.style }
contentClass="v-speed-dial__content"
+ ref={ menuRef }
>
-
-
- { slots.default?.() }
-
-
+ {{
+ ...slots,
+ default: slotProps => (
+
+
+ { slots.default?.(slotProps) }
+
+
+ ),
+ }}
)
})
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
new file mode 100644
index 00000000000..5feb99f56d9
--- /dev/null
+++ b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
@@ -0,0 +1,180 @@
+// Components
+import { makeVTreeviewChildrenProps, VTreeviewChildren } from './VTreeviewChildren'
+import { makeVListProps, useListItems, VList } from '@/components/VList/VList'
+
+// Composables
+import { provideDefaults } from '@/composables/defaults'
+import { makeFilterProps, useFilter } from '@/composables/filter'
+import { useProxiedModel } from '@/composables/proxiedModel'
+
+// Utilities
+import { computed, provide, ref, toRef, watch } from 'vue'
+import { genericComponent, omit, propsFactory, useRender } from '@/util'
+
+// Types
+import { VTreeviewSymbol } from './shared'
+import type { VListChildrenSlots } from '@/components/VList/VListChildren'
+import type { ListItem } from '@/composables/list-items'
+import type { GenericProps } from '@/util'
+
+function flatten (items: ListItem[], flat: ListItem[] = []) {
+ for (const item of items) {
+ flat.push(item)
+ if (item.children) flatten(item.children, flat)
+ }
+ return flat
+}
+
+export const makeVTreeviewProps = propsFactory({
+ openAll: Boolean,
+ search: String,
+
+ ...makeFilterProps({ filterKeys: ['title'] }),
+ ...makeVTreeviewChildrenProps(),
+ ...omit(makeVListProps({
+ collapseIcon: '$treeviewCollapse',
+ expandIcon: '$treeviewExpand',
+ selectStrategy: 'independent' as const,
+ openStrategy: 'multiple' as const,
+ slim: true,
+ }), ['nav']),
+}, 'VTreeview')
+
+export const VTreeview = genericComponent(
+ props: {
+ items?: T[]
+ },
+ slots: VListChildrenSlots
+) => GenericProps>()({
+ name: 'VTreeview',
+
+ props: makeVTreeviewProps(),
+
+ emits: {
+ 'update:opened': (val: unknown[]) => true,
+ 'update:activated': (val: unknown[]) => true,
+ 'update:selected': (val: unknown[]) => true,
+ 'click:open': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
+ 'click:select': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
+ },
+
+ setup (props, { slots }) {
+ const { items } = useListItems(props)
+ const activeColor = toRef(props, 'activeColor')
+ const baseColor = toRef(props, 'baseColor')
+ const color = toRef(props, 'color')
+ const opened = useProxiedModel(props, 'opened')
+ const activated = useProxiedModel(props, 'activated')
+ const selected = useProxiedModel(props, 'selected')
+
+ const vListRef = ref()
+
+ const flatItems = computed(() => flatten(items.value))
+ const search = toRef(props, 'search')
+ const { filteredItems } = useFilter(props, flatItems, search)
+ const visibleIds = computed(() => {
+ if (!search.value) {
+ return null
+ }
+ return new Set(filteredItems.value.flatMap(item => {
+ return [...getPath(item.props.value), ...getChildren(item.props.value)]
+ }))
+ })
+
+ function getPath (id: unknown) {
+ const path: unknown[] = []
+ let parent: unknown = id
+ while (parent != null) {
+ path.unshift(parent)
+ parent = vListRef.value?.parents.get(parent)
+ }
+ return path
+ }
+
+ function getChildren (id: unknown) {
+ const arr: unknown[] = []
+ const queue = ((vListRef.value?.children.get(id) ?? []).slice())
+ while (queue.length) {
+ const child = queue.shift()
+ if (!child) continue
+ arr.push(child)
+ queue.push(...((vListRef.value?.children.get(child) ?? []).slice()))
+ }
+ return arr
+ }
+
+ watch(() => props.openAll, val => {
+ opened.value = val ? openAll(items.value) : []
+ }, { immediate: true })
+
+ function openAll (item: any) {
+ let ids: number[] = []
+
+ for (const i of item) {
+ if (!i.children) continue
+
+ ids.push(i.value)
+
+ if (i.children) {
+ ids = ids.concat(openAll(i.children))
+ }
+ }
+
+ return ids
+ }
+
+ provide(VTreeviewSymbol, { visibleIds })
+
+ provideDefaults({
+ VTreeviewGroup: {
+ activeColor,
+ baseColor,
+ color,
+ collapseIcon: toRef(props, 'collapseIcon'),
+ expandIcon: toRef(props, 'expandIcon'),
+ },
+ VTreeviewItem: {
+ activeClass: toRef(props, 'activeClass'),
+ activeColor,
+ baseColor,
+ color,
+ density: toRef(props, 'density'),
+ disabled: toRef(props, 'disabled'),
+ lines: toRef(props, 'lines'),
+ variant: toRef(props, 'variant'),
+ },
+ })
+
+ useRender(() => {
+ const listProps = VList.filterProps(props)
+ const treeviewChildrenProps = VTreeviewChildren.filterProps(props)
+
+ return (
+
+
+ )
+ })
+
+ return {
+ open,
+ }
+ },
+})
+
+export type VTreeview = InstanceType
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
new file mode 100644
index 00000000000..a9bfd2c6ca6
--- /dev/null
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
@@ -0,0 +1,122 @@
+// Components
+import { VTreeviewGroup } from './VTreeviewGroup'
+import { VTreeviewItem } from './VTreeviewItem'
+import { VCheckboxBtn } from '@/components/VCheckbox'
+
+// Utilities
+import { shallowRef } from 'vue'
+import { genericComponent, propsFactory } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+import type { InternalListItem } from '@/components/VList/VList'
+import type { VListItemSlots } from '@/components/VList/VListItem'
+import type { GenericProps } from '@/util'
+
+export type VTreeviewChildrenSlots = {
+ [K in keyof Omit]: VListItemSlots[K] & { item: T }
+} & {
+ default: never
+ item: { props: InternalListItem['props'] }
+}
+
+export const makeVTreeviewChildrenProps = propsFactory({
+ loadChildren: Function as PropType<(item: unknown) => Promise>,
+ loadingIcon: {
+ type: String,
+ default: '$loading',
+ },
+ items: Array as PropType,
+ selectable: Boolean,
+}, 'VTreeviewChildren')
+
+export const VTreeviewChildren = genericComponent(
+ props: {
+ items?: readonly T[]
+ },
+ slots: VTreeviewChildrenSlots
+) => GenericProps>()({
+ name: 'VTreeviewChildren',
+
+ props: makeVTreeviewChildrenProps(),
+
+ setup (props, { emit, slots }) {
+ const isLoading = shallowRef(false)
+ const hasLoaded = shallowRef(false)
+
+ function checkChildren (item: unknown) {
+ return new Promise(resolve => {
+ if (!props.items?.length || !props.loadChildren || hasLoaded.value) return resolve()
+
+ isLoading.value = true
+ props.loadChildren(item).then(resolve)
+ }).then(() => {
+ hasLoaded.value = true
+ }).finally(() => {
+ isLoading.value = false
+ })
+ }
+
+ function onClick (e: MouseEvent | KeyboardEvent, item: any) {
+ e.stopPropagation()
+
+ checkChildren(item)
+ }
+
+ return () => slots.default?.() ?? props.items?.map(({ children, props: itemProps, raw: item }) => {
+ const slotsWithItem = {
+ prepend: slots.prepend
+ ? slotProps => slots.prepend?.({ ...slotProps, item })
+ : props.selectable
+ ? ({ isSelected, isIndeterminate }) => (
+ onClick(e, item) }
+ />
+ )
+ : undefined,
+ append: slots.append ? slotProps => slots.append?.({ ...slotProps, item }) : undefined,
+ title: slots.title ? slotProps => slots.title?.({ ...slotProps, item }) : undefined,
+ } satisfies VTreeviewItem['$props']['$children']
+
+ const treeviewGroupProps = VTreeviewGroup.filterProps(itemProps)
+ const treeviewChildrenProps = VTreeviewChildren.filterProps(props)
+
+ return children ? (
+
+ {{
+ activator: ({ props: activatorProps }) => (
+ onClick(e, item) }
+ />
+ ),
+ default: () => (
+
+ ) : (
+ slots.item?.({ props: itemProps }) ?? (
+ ()({
+ name: 'VTreeviewGroup',
+
+ props: makeVTreeviewGroupProps(),
+
+ setup (props, { slots }) {
+ const vListGroupRef = ref()
+ const toggleIcon = computed(() => vListGroupRef.value?.isOpen ? props.collapseIcon : props.expandIcon)
+
+ const activatorDefaults = computed(() => ({
+ VTreeviewItem: {
+ prependIcon: undefined,
+ appendIcon: undefined,
+ active: vListGroupRef.value?.isOpen,
+ toggleIcon: toggleIcon.value,
+ },
+ }))
+
+ useRender(() => {
+ const listGroupProps = VListGroup.filterProps(props)
+
+ return (
+
+ {{
+ ...slots,
+ activator: slots.activator ? slotProps => (
+ <>
+
+ { slots.activator?.(slotProps) }
+
+
+ ) : undefined,
+ }}
+
+ )
+ })
+
+ return {}
+ },
+})
+
+export type VTreeviewGroup = InstanceType
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
new file mode 100644
index 00000000000..3c278856a6a
--- /dev/null
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
@@ -0,0 +1,19 @@
+@use './variables' as *
+
+.v-treeview-item--filtered
+ display: none
+
+.v-treeview
+ --indent-padding: 0px
+
+.v-treeview-group.v-list-group
+ --list-indent-size: #{$treeview-group-list-indent-size}
+
+ .v-list--slim &
+ --prepend-width: #{$treeview-group-list-prepend-width}
+
+ .v-list-group__items .v-list-item
+ padding-inline-start: calc(#{$treeview-item-padding-inline-start} + var(--indent-padding)) !important
+
+ .v-list-group__items .v-list-item--prepend
+ // padding-inline-start: calc(#{$treeview-item-prepend-padding-inline-start} + var(--indent-padding)) !important
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
new file mode 100644
index 00000000000..738bc411533
--- /dev/null
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
@@ -0,0 +1,118 @@
+// Styles
+import './VTreeviewItem.sass'
+
+// Components
+import { VBtn } from '@/components/VBtn'
+import { VListItemAction } from '@/components/VList'
+import { makeVListItemProps, VListItem } from '@/components/VList/VListItem'
+
+// Composables
+import { IconValue } from '@/composables/icons'
+import { useLink } from '@/composables/router'
+
+// Utilities
+import { computed, inject, ref } from 'vue'
+import { genericComponent, propsFactory, useRender } from '@/util'
+
+// Types
+import { VTreeviewSymbol } from './shared'
+import { VProgressCircular } from '../allComponents'
+import type { VListItemSlots } from '@/components/VList/VListItem'
+
+export const makeVTreeviewItemProps = propsFactory({
+ loading: Boolean,
+ toggleIcon: IconValue,
+
+ ...makeVListItemProps({ slim: true }),
+}, 'VTreeviewItem')
+
+export const VTreeviewItem = genericComponent()({
+ name: 'VTreeviewItem',
+
+ props: makeVTreeviewItemProps(),
+
+ setup (props, { attrs, slots, emit }) {
+ const link = useLink(props, attrs)
+ const id = computed(() => props.value === undefined ? link.href.value : props.value)
+ const vListItemRef = ref()
+
+ const isClickable = computed(() =>
+ !props.disabled &&
+ props.link !== false &&
+ (props.link || link.isClickable.value || (props.value != null && !!vListItemRef.value?.list))
+ )
+
+ function onClick (e: MouseEvent | KeyboardEvent) {
+ if (!vListItemRef.value?.isGroupActivator || !isClickable.value) return
+ props.value != null && vListItemRef.value?.select(!vListItemRef.value?.isSelected, e)
+ }
+
+ function onKeyDown (e: KeyboardEvent) {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ onClick(e as any as MouseEvent)
+ }
+ }
+
+ const visibleIds = inject(VTreeviewSymbol, { visibleIds: ref() }).visibleIds
+
+ useRender(() => {
+ const listItemProps = VListItem.filterProps(props)
+ const hasPrepend = slots.prepend || props.toggleIcon
+
+ return (
+
+ {{
+ ...slots,
+ prepend: hasPrepend ? slotProps => {
+ return (
+ <>
+ { props.toggleIcon && (
+
+
+ {{
+ loader () {
+ return (
+
+
+ )}
+
+ { slots.prepend?.(slotProps) }
+
+ )
+ } : undefined,
+ }}
+
+ )
+ })
+
+ return {}
+ },
+})
+
+export type VTreeviewItem = InstanceType
diff --git a/packages/vuetify/src/labs/VTreeview/index.ts b/packages/vuetify/src/labs/VTreeview/index.ts
new file mode 100644
index 00000000000..add205b5d54
--- /dev/null
+++ b/packages/vuetify/src/labs/VTreeview/index.ts
@@ -0,0 +1,3 @@
+export { VTreeview } from './VTreeview'
+export { VTreeviewItem } from './VTreeviewItem'
+export { VTreeviewGroup } from './VTreeviewGroup'
diff --git a/packages/vuetify/src/labs/VTreeview/shared.ts b/packages/vuetify/src/labs/VTreeview/shared.ts
new file mode 100644
index 00000000000..515b74e1e7c
--- /dev/null
+++ b/packages/vuetify/src/labs/VTreeview/shared.ts
@@ -0,0 +1,8 @@
+// Types
+import type { ComputedRef, InjectionKey } from 'vue'
+
+export interface TreeViewProvide {
+ visibleIds: ComputedRef | null>
+}
+
+export const VTreeviewSymbol: InjectionKey = Symbol.for('vuetify:v-treeview')
diff --git a/packages/vuetify/src/labs/VTreeview/variables.scss b/packages/vuetify/src/labs/VTreeview/variables.scss
new file mode 100644
index 00000000000..05352370d07
--- /dev/null
+++ b/packages/vuetify/src/labs/VTreeview/variables.scss
@@ -0,0 +1,8 @@
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
+
+$treeview-group-list-indent-size: 16px !default;
+$treeview-group-list-prepend-width: 16px !default;
+$treeview-item-padding-inline-start: 12px !default;
+$treeview-item-prepend-padding-inline-start: 44px !default;
diff --git a/packages/vuetify/src/labs/components.ts b/packages/vuetify/src/labs/components.ts
index d173ad17152..695e5631bf6 100644
--- a/packages/vuetify/src/labs/components.ts
+++ b/packages/vuetify/src/labs/components.ts
@@ -1,7 +1,8 @@
-export * from './VConfirmEdit'
export * from './VCalendar'
+export * from './VConfirmEdit'
+export * from './VEmptyState'
export * from './VFab'
export * from './VPicker'
export * from './VSparkline'
export * from './VSpeedDial'
-export * from './VEmptyState'
+export * from './VTreeview'
diff --git a/packages/vuetify/src/locale/no.ts b/packages/vuetify/src/locale/no.ts
index 01d33e5de97..9b759347077 100644
--- a/packages/vuetify/src/locale/no.ts
+++ b/packages/vuetify/src/locale/no.ts
@@ -1,6 +1,6 @@
export default {
badge: 'Skilt',
- open: 'Open',
+ open: 'Åpne',
close: 'Lukk',
confirmEdit: {
ok: 'OK',
diff --git a/yarn.lock b/yarn.lock
index 3522466d10b..ecc6bb001a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3949,10 +3949,10 @@
find-cache-dir "^3.3.2"
upath "^2.0.1"
-"@vuetify/one@^1.1.1":
- version "1.1.1"
- resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.1.1.tgz#938fa96bfa9329cf326a45d2ec03f22b317b23fc"
- integrity sha512-Q9XgP+eqfImVHHucREycGgzaOk4R3m5l6wMPBsEcv5XXhzkhncILm/KMhel/5sYRn9MfBNpyg17s7NeciixTRg==
+"@vuetify/one@^1.3.1":
+ version "1.3.1"
+ resolved "https://registry.yarnpkg.com/@vuetify/one/-/one-1.3.1.tgz#5d924d91a9c57db7791e6be43052ec8cf4a9635b"
+ integrity sha512-uv/l+pCU5JqRoWUkMIJG8vVAqO5uj3omhjcPwettF4aZ62ydxCBmMBxsrnVV2826t0XMPY+k3i7EeOC8+adDpA==
"@vueuse/head@^1.3.1":
version "1.3.1"
- { slots.image
- ? slots.image?.({ image: props.image })
- : (
)
- }
+ { !slots.image ? (
+
)}
diff --git a/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx b/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx
index 27ab3bec289..28f5ef00933 100644
--- a/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx
+++ b/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx
@@ -100,10 +100,11 @@ export const VOtpInput = genericComponent