@vuetify/nightly 3.7.5-master.2024-12-11 → 3.7.5-master.2024-12-12

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.7.5-master.2024-12-11
+* Vuetify v3.7.5-master.2024-12-12
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2031,6 +2031,11 @@ var en = {
     counter: '{0} files',
     counterSize: '{0} files ({1} in total)'
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files'
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
@@ -4441,7 +4446,8 @@ const aliases = {
   calendar: 'mdi-calendar',
   treeviewCollapse: 'mdi-menu-down',
   treeviewExpand: 'mdi-menu-right',
-  eyeDropper: 'mdi-eyedropper'
+  eyeDropper: 'mdi-eyedropper',
+  upload: 'mdi-cloud-upload'
 };
 const mdi = {
   // Not using mergeProps here, functional components merge props by default (?)
@@ -28166,6 +28172,319 @@ const VDateInput = genericComponent()({
 
 // Types
 
+const makeVFileUploadItemProps = propsFactory({
+  clearable: Boolean,
+  file: {
+    type: Object,
+    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'
+  })
+}, 'VFileUploadItem');
+const VFileUploadItem = genericComponent()({
+  name: 'VFileUploadItem',
+  props: makeVFileUploadItemProps(),
+  emits: {
+    'click:remove': () => true,
+    click: e => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    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 createVNode(VListItem, mergeProps(listItemProps, {
+        "title": props.title ?? props.file?.name,
+        "subtitle": props.showSize ? humanReadableFileSize(props.file?.size, base.value) : props.file?.type,
+        "class": "v-file-upload-item"
+      }), {
+        ...slots,
+        prepend: slotProps => createVNode(Fragment, null, [!slots.prepend ? createVNode(VAvatar, {
+          "icon": props.fileIcon,
+          "image": preview.value,
+          "rounded": true
+        }, null) : createVNode(VDefaultsProvider, {
+          "defaults": {
+            VAvatar: {
+              image: preview.value,
+              icon: !preview.value ? props.fileIcon : undefined,
+              rounded: true
+            }
+          }
+        }, {
+          default: () => [slots.prepend?.(slotProps) ?? createVNode(VAvatar, null, null)]
+        })]),
+        append: slotProps => createVNode(Fragment, null, [props.clearable && createVNode(Fragment, null, [!slots.clear ? createVNode(VBtn, {
+          "icon": "$clear",
+          "density": "comfortable",
+          "variant": "text",
+          "onClick": onClickRemove
+        }, null) : createVNode(VDefaultsProvider, {
+          "defaults": {
+            VBtn: {
+              icon: '$clear',
+              density: 'comfortable',
+              variant: 'text'
+            }
+          }
+        }, {
+          default: () => [slots.clear?.({
+            ...slotProps,
+            props: {
+              onClick: onClickRemove
+            }
+          }) ?? createVNode(VBtn, null, null)]
+        })]), slots.append?.(slotProps)])
+      });
+    });
+  }
+});
+
+// Types
+
+const makeVFileUploadProps = propsFactory({
+  browseText: {
+    type: String,
+    default: '$vuetify.fileUpload.browse'
+  },
+  dividerText: {
+    type: String,
+    default: '$vuetify.fileUpload.divider'
+  },
+  title: {
+    type: String,
+    default: '$vuetify.fileUpload.title'
+  },
+  subtitle: String,
+  icon: {
+    type: IconValue,
+    default: '$upload'
+  },
+  modelValue: {
+    type: [Array, Object],
+    default: null,
+    validator: val => {
+      return wrapInArray(val).every(v => v != null && typeof v === 'object');
+    }
+  },
+  clearable: Boolean,
+  disabled: Boolean,
+  hideBrowse: Boolean,
+  multiple: Boolean,
+  scrim: {
+    type: [Boolean, String],
+    default: true
+  },
+  showSize: Boolean,
+  name: String,
+  ...makeDelayProps(),
+  ...makeDensityProps(),
+  ...only(makeVDividerProps({
+    length: 150
+  }), ['length', 'thickness', 'opacity']),
+  ...makeVSheetProps()
+}, 'VFileUpload');
+const VFileUpload = genericComponent()({
+  name: 'VFileUpload',
+  inheritAttrs: false,
+  props: makeVFileUploadProps(),
+  emits: {
+    'update:modelValue': files => true
+  },
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
+    const {
+      t
+    } = useLocale();
+    const {
+      densityClasses
+    } = useDensity(props);
+    const model = useProxiedModel(props, 'modelValue', props.modelValue, val => wrapInArray(val), val => props.multiple || Array.isArray(props.modelValue) ? val : val[0]);
+    const dragOver = shallowRef(false);
+    const vSheetRef = ref(null);
+    const inputRef = ref(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) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      dragOver.value = true;
+    }
+    function onDragLeave(e) {
+      e.preventDefault();
+      dragOver.value = false;
+    }
+    function onDrop(e) {
+      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) {
+      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 = createVNode("input", mergeProps({
+        "ref": inputRef,
+        "type": "file",
+        "disabled": props.disabled,
+        "multiple": props.multiple,
+        "name": props.name,
+        "onChange": e => {
+          if (!e.target) return;
+          const target = e.target;
+          model.value = [...(target.files ?? [])];
+        }
+      }, inputAttrs), null);
+      return createVNode(Fragment, null, [createVNode(VSheet, mergeProps({
+        "ref": vSheetRef
+      }, cardProps, {
+        "class": ['v-file-upload', {
+          'v-file-upload--clickable': !hasBrowse,
+          'v-file-upload--disabled': props.disabled,
+          'v-file-upload--dragging': dragOver.value
+        }, densityClasses.value],
+        "onDragleave": onDragLeave,
+        "onDragover": onDragOver,
+        "onDrop": onDrop,
+        "onClick": !hasBrowse ? onClick : undefined
+      }, rootAttrs), {
+        default: () => [hasIcon && createVNode("div", {
+          "key": "icon",
+          "class": "v-file-upload-icon"
+        }, [!slots.icon ? createVNode(VIcon, {
+          "key": "icon-icon",
+          "icon": props.icon
+        }, null) : createVNode(VDefaultsProvider, {
+          "key": "icon-defaults",
+          "defaults": {
+            VIcon: {
+              icon: props.icon
+            }
+          }
+        }, {
+          default: () => [slots.icon()]
+        })]), hasTitle && createVNode("div", {
+          "key": "title",
+          "class": "v-file-upload-title"
+        }, [slots.title?.() ?? t(props.title)]), props.density === 'default' && createVNode(Fragment, null, [createVNode("div", {
+          "key": "upload-divider",
+          "class": "v-file-upload-divider"
+        }, [slots.divider?.() ?? createVNode(VDivider, dividerProps, {
+          default: () => [t(props.dividerText)]
+        })]), hasBrowse && createVNode(Fragment, null, [!slots.browse ? createVNode(VBtn, {
+          "readonly": props.disabled,
+          "size": "large",
+          "text": t(props.browseText),
+          "variant": "tonal",
+          "onClick": onClick
+        }, null) : createVNode(VDefaultsProvider, {
+          "defaults": {
+            VBtn: {
+              readonly: props.disabled,
+              size: 'large',
+              text: t(props.browseText),
+              variant: 'tonal'
+            }
+          }
+        }, {
+          default: () => [slots.browse({
+            props: {
+              onClick
+            }
+          })]
+        })]), props.subtitle && createVNode("div", {
+          "class": "v-file-upload-subtitle"
+        }, [props.subtitle])]), createVNode(VOverlay, {
+          "model-value": dragOver.value,
+          "contained": true,
+          "scrim": props.scrim
+        }, null), slots.input?.({
+          inputNode
+        }) ?? inputNode]
+      }), model.value.length > 0 && createVNode("div", {
+        "class": "v-file-upload-items"
+      }, [model.value.map((file, i) => {
+        const slotProps = {
+          file,
+          props: {
+            'onClick:remove': () => onClickRemove(i)
+          }
+        };
+        return createVNode(VDefaultsProvider, {
+          "key": i,
+          "defaults": {
+            VFileUploadItem: {
+              file,
+              clearable: props.clearable,
+              disabled: props.disabled,
+              showSize: props.showSize
+            }
+          }
+        }, {
+          default: () => [slots.item?.(slotProps) ?? createVNode(VFileUploadItem, {
+            "key": i,
+            "onClick:remove": () => onClickRemove(i)
+          }, slots)]
+        });
+      })])]);
+    });
+  }
+});
+
+// Types
+
 const makeVNumberInputProps = propsFactory({
   controlVariant: {
     type: String,
@@ -29997,6 +30316,8 @@ var components = /*#__PURE__*/Object.freeze({
   VField: VField,
   VFieldLabel: VFieldLabel,
   VFileInput: VFileInput,
+  VFileUpload: VFileUpload,
+  VFileUploadItem: VFileUploadItem,
   VFooter: VFooter,
   VForm: VForm,
   VHover: VHover,
@@ -30410,7 +30731,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.7.5-master.2024-12-11";
+const version$1 = "3.7.5-master.2024-12-12";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -30663,7 +30984,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.7.5-master.2024-12-11";
+const version = "3.7.5-master.2024-12-12";
 
 /* eslint-disable local-rules/sort-imports */