(null)
+
+ onMounted(() => {
+ vSheetRef.value?.$el.addEventListener('dragover', onDragOver)
+ vSheetRef.value?.$el.addEventListener('drop', onDrop)
+ })
+
+ onUnmounted(() => {
+ vSheetRef.value?.$el.removeEventListener('dragover', onDragOver)
+ vSheetRef.value?.$el.removeEventListener('drop', onDrop)
+ })
+
+ function onDragOver (e: DragEvent) {
+ e.preventDefault()
+ e.stopImmediatePropagation()
+ dragOver.value = true
+ }
+
+ function onDragLeave (e: DragEvent) {
+ e.preventDefault()
+ dragOver.value = false
+ }
+
+ function onDrop (e: DragEvent) {
+ e.preventDefault()
+ e.stopImmediatePropagation()
+ dragOver.value = false
+
+ const files = Array.from(e.dataTransfer?.files ?? [])
+
+ if (!files.length) return
+
+ if (!props.multiple) {
+ model.value = [files[0]]
+
+ return
+ }
+
+ const array = model.value.slice()
+
+ for (const file of files) {
+ if (!array.some(f => f.name === file.name)) {
+ array.push(file)
+ }
+ }
+
+ model.value = array
+ }
+
+ function onClick () {
+ inputRef.value?.click()
+ }
+
+ function onClickRemove (index: number) {
+ model.value = model.value.filter((_, i) => i !== index)
+
+ if (model.value.length > 0 || !inputRef.value) return
+
+ inputRef.value.value = ''
+ }
+
+ useRender(() => {
+ const hasTitle = !!(slots.title || props.title)
+ const hasIcon = !!(slots.icon || props.icon)
+ const hasBrowse = !!(!props.hideBrowse && (slots.browse || props.density === 'default'))
+ const cardProps = VSheet.filterProps(props)
+ const dividerProps = VDivider.filterProps(props)
+ const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)
+
+ const inputNode = (
+
+ { hasIcon && (
+
+ { !slots.icon ? (
+
+ { slots.icon() }
+
+ )}
+
+ )}
+
+ { hasTitle && (
+
+ { slots.title?.() ?? t(props.title) }
+
+ )}
+
+ { props.density === 'default' && (
+ <>
+
+ { slots.divider?.() ?? (
+
+ { t(props.dividerText) }
+
+ )}
+
+
+ { hasBrowse && (
+ <>
+ { !slots.browse ? (
+
+ { slots.browse({ props: { onClick } }) }
+
+ )}
+
+ )}
+
+ { props.subtitle && (
+
+ { props.subtitle }
+
+ )}
+
+ )}
+
+
+
+ { model.value.length > 0 && (
+
+ { model.value.map((file, i) => {
+ const slotProps = {
+ file,
+ props: {
+ 'onClick:remove': () => onClickRemove(i),
+ },
+ }
+
+ return (
+
+ { slots.item?.(slotProps) ?? (
+ onClickRemove(i) }
+ v-slots={ slots }
+ />
+ )}
+
+ )
+ })}
+
+ )}
+
+ )
+ })
+ },
+})
+
+export type VFileUpload = InstanceType
diff --git a/packages/vuetify/src/labs/VFileUpload/VFileUploadItem.tsx b/packages/vuetify/src/labs/VFileUpload/VFileUploadItem.tsx
new file mode 100644
index 00000000000..24e5ea5ca30
--- /dev/null
+++ b/packages/vuetify/src/labs/VFileUpload/VFileUploadItem.tsx
@@ -0,0 +1,140 @@
+// Components
+import { VAvatar } from '@/components/VAvatar/VAvatar'
+import { VBtn } from '@/components/VBtn/VBtn'
+import { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'
+import { makeVListItemProps, VListItem } from '@/components/VList/VListItem'
+
+// Utilities
+import { computed, ref, watchEffect } from 'vue'
+import { genericComponent, humanReadableFileSize, propsFactory, useRender } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+import type { VListItemSlots } from '@/components/VList/VListItem'
+
+export type VFileUploadItemSlots = {
+ clear: {
+ props: { onClick: () => void }
+ }
+} & VListItemSlots
+
+export const makeVFileUploadItemProps = propsFactory({
+ clearable: Boolean,
+ file: {
+ type: Object as PropType,
+ default: null,
+ },
+ fileIcon: {
+ type: String,
+ // TODO: setup up a proper aliased icon
+ default: 'mdi-file-document',
+ },
+ showSize: Boolean,
+
+ ...makeVListItemProps({
+ border: true,
+ rounded: true,
+ lines: 'two' as const,
+ }),
+}, 'VFileUploadItem')
+
+export const VFileUploadItem = genericComponent()({
+ name: 'VFileUploadItem',
+
+ props: makeVFileUploadItemProps(),
+
+ emits: {
+ 'click:remove': () => true,
+ click: (e: MouseEvent | KeyboardEvent) => true,
+ },
+
+ setup (props, { emit, slots }) {
+ const preview = ref()
+ const base = computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined)
+
+ function onClickRemove () {
+ emit('click:remove')
+ }
+
+ watchEffect(() => {
+ preview.value = props.file?.type.startsWith('image') ? URL.createObjectURL(props.file) : undefined
+ })
+
+ useRender(() => {
+ const listItemProps = VListItem.filterProps(props)
+
+ return (
+
+ {{
+ ...slots,
+ prepend: slotProps => (
+ <>
+ { !slots.prepend ? (
+
+ { slots.prepend?.(slotProps) ?? (
+
+ )}
+
+ ),
+ append: slotProps => (
+ <>
+ { props.clearable && (
+ <>
+ { !slots.clear ? (
+
+ { slots.clear?.({
+ ...slotProps,
+ props: { onClick: onClickRemove },
+ }) ?? (
+ )}
+
+ )}
+
+ { slots.append?.(slotProps) }
+
+ ),
+ }}
+
+ )
+ })
+ },
+})
+
+export type VFileUploadItem = InstanceType
diff --git a/packages/vuetify/src/labs/VFileUpload/_variables.scss b/packages/vuetify/src/labs/VFileUpload/_variables.scss
new file mode 100644
index 00000000000..38c3ba95aad
--- /dev/null
+++ b/packages/vuetify/src/labs/VFileUpload/_variables.scss
@@ -0,0 +1,12 @@
+@use '../../styles/tools';
+@use '../../styles/settings';
+
+$file-upload-title-font-size: 1.5rem !default;
+$file-upload-padding: 64px 0 !default;
+$file-upload-border-radius: 4px !default;
+$file-upload-border-width: 2px !default;
+$file-upload-title-font-weight: 600 !default;
+$file-upload-icon-font-size: 3rem !default;
+$file-upload-icon-margin-bottom: 1rem !default;
+$file-upload-divider-margin: 32px 0 !default;
+$file-upload-items-margin: 16px 0 !default;
diff --git a/packages/vuetify/src/labs/VFileUpload/index.ts b/packages/vuetify/src/labs/VFileUpload/index.ts
new file mode 100644
index 00000000000..3f85597a4d3
--- /dev/null
+++ b/packages/vuetify/src/labs/VFileUpload/index.ts
@@ -0,0 +1,2 @@
+export { VFileUpload } from './VFileUpload'
+export { VFileUploadItem } from './VFileUploadItem'
diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
index bbf59a65c74..f3ee59cbe3b 100644
--- a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
+++ b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -74,14 +74,17 @@ export const VNumberInput = genericComponent()({
const model = computed({
get: () => _model.value,
- set (val) {
- if (val === null) {
+ // model.value could be empty string from VTextField
+ // but _model.value should be eventually kept in type Number | null
+ set (val: Number | null | string) {
+ if (val === null || val === '') {
_model.value = null
return
}
- if (!isNaN(+val) && +val <= props.max && +val >= props.min) {
- _model.value = +val
+ const value = Number(val)
+ if (!isNaN(value) && value <= props.max && value >= props.min) {
+ _model.value = value
}
},
})
@@ -91,9 +94,9 @@ export const VNumberInput = genericComponent()({
const stepDecimals = computed(() => getDecimals(props.step))
const modelDecimals = computed(() => typeof model.value === 'number' ? getDecimals(model.value) : 0)
- const form = useForm()
+ const form = useForm(props)
const controlsDisabled = computed(() => (
- props.disabled || props.readonly || form?.isReadonly.value
+ form.isDisabled.value || form.isReadonly.value
))
const canIncrease = computed(() => {
@@ -119,7 +122,7 @@ export const VNumberInput = genericComponent()({
const decrementSlotProps = computed(() => ({ click: onClickDown }))
onMounted(() => {
- if (!props.readonly && !props.disabled) {
+ if (!controlsDisabled.value) {
clampModel()
}
})
@@ -294,9 +297,9 @@ export const VNumberInput = genericComponent()({
{ incrementControlNode() }
- ) : (!props.reverse
- ? <>{ dividerNode() }{ controlNode() }
- : undefined)
+ ) : (props.reverse
+ ? undefined
+ : <>{ dividerNode() }{ controlNode() })
const hasAppendInner = slots['append-inner'] || appendInnerControl
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
index c3a33eee6ba..b6968afa059 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
@@ -47,13 +47,8 @@ export const VTreeviewItem = genericComponent()({
(props.link || link.isClickable.value || (props.value != null && !!vListItemRef.value?.list) || isActivatableGroupActivator.value)
)
- function activateItem (e: MouseEvent | KeyboardEvent) {
- if (
- !isClickable.value ||
- (!isActivatableGroupActivator.value && vListItemRef.value?.isGroupActivator)
- ) return
-
- if (vListItemRef.value?.root.activatable.value) {
+ function activateGroupActivator (e: MouseEvent | KeyboardEvent) {
+ if (isClickable.value && isActivatableGroupActivator.value) {
vListItemRef.value?.activate(!vListItemRef.value?.isActivated, e)
}
}
@@ -78,7 +73,7 @@ export const VTreeviewItem = genericComponent()({
props.class,
]}
ripple={ false }
- onClick={ props.onClick ?? activateItem }
+ onClick={ props.onClick ?? activateGroupActivator }
>
{{
...slots,
diff --git a/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx b/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx
index 0e9ef6b7ec1..ec74dfca194 100644
--- a/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx
+++ b/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx
@@ -156,6 +156,27 @@ describe.each([
await userEvent.click(screen.getByText(/Nekosaur/))
expect(activated.value).toStrictEqual([203])
})
+
+ // https://github.com/vuetifyjs/vuetify/issues/20665
+ it('should emit only once', async () => {
+ const onActivated = vi.fn()
+ render(() => (
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 