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

package/dist/vuetify-labs.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.
 */
@@ -2035,6 +2035,11 @@
       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',
@@ -4445,7 +4450,8 @@
     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 (?)
@@ -28170,6 +28176,319 @@
 
   // 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 = vue.ref();
+      const base = vue.computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined);
+      function onClickRemove() {
+        emit('click:remove');
+      }
+      vue.watchEffect(() => {
+        preview.value = props.file?.type.startsWith('image') ? URL.createObjectURL(props.file) : undefined;
+      });
+      useRender(() => {
+        const listItemProps = VListItem.filterProps(props);
+        return vue.createVNode(VListItem, vue.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 => vue.createVNode(vue.Fragment, null, [!slots.prepend ? vue.createVNode(VAvatar, {
+            "icon": props.fileIcon,
+            "image": preview.value,
+            "rounded": true
+          }, null) : vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VAvatar: {
+                image: preview.value,
+                icon: !preview.value ? props.fileIcon : undefined,
+                rounded: true
+              }
+            }
+          }, {
+            default: () => [slots.prepend?.(slotProps) ?? vue.createVNode(VAvatar, null, null)]
+          })]),
+          append: slotProps => vue.createVNode(vue.Fragment, null, [props.clearable && vue.createVNode(vue.Fragment, null, [!slots.clear ? vue.createVNode(VBtn, {
+            "icon": "$clear",
+            "density": "comfortable",
+            "variant": "text",
+            "onClick": onClickRemove
+          }, null) : vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VBtn: {
+                icon: '$clear',
+                density: 'comfortable',
+                variant: 'text'
+              }
+            }
+          }, {
+            default: () => [slots.clear?.({
+              ...slotProps,
+              props: {
+                onClick: onClickRemove
+              }
+            }) ?? vue.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 = vue.shallowRef(false);
+      const vSheetRef = vue.ref(null);
+      const inputRef = vue.ref(null);
+      vue.onMounted(() => {
+        vSheetRef.value?.$el.addEventListener('dragover', onDragOver);
+        vSheetRef.value?.$el.addEventListener('drop', onDrop);
+      });
+      vue.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 = vue.createVNode("input", vue.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 vue.createVNode(vue.Fragment, null, [vue.createVNode(VSheet, vue.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 && vue.createVNode("div", {
+            "key": "icon",
+            "class": "v-file-upload-icon"
+          }, [!slots.icon ? vue.createVNode(VIcon, {
+            "key": "icon-icon",
+            "icon": props.icon
+          }, null) : vue.createVNode(VDefaultsProvider, {
+            "key": "icon-defaults",
+            "defaults": {
+              VIcon: {
+                icon: props.icon
+              }
+            }
+          }, {
+            default: () => [slots.icon()]
+          })]), hasTitle && vue.createVNode("div", {
+            "key": "title",
+            "class": "v-file-upload-title"
+          }, [slots.title?.() ?? t(props.title)]), props.density === 'default' && vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
+            "key": "upload-divider",
+            "class": "v-file-upload-divider"
+          }, [slots.divider?.() ?? vue.createVNode(VDivider, dividerProps, {
+            default: () => [t(props.dividerText)]
+          })]), hasBrowse && vue.createVNode(vue.Fragment, null, [!slots.browse ? vue.createVNode(VBtn, {
+            "readonly": props.disabled,
+            "size": "large",
+            "text": t(props.browseText),
+            "variant": "tonal",
+            "onClick": onClick
+          }, null) : vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VBtn: {
+                readonly: props.disabled,
+                size: 'large',
+                text: t(props.browseText),
+                variant: 'tonal'
+              }
+            }
+          }, {
+            default: () => [slots.browse({
+              props: {
+                onClick
+              }
+            })]
+          })]), props.subtitle && vue.createVNode("div", {
+            "class": "v-file-upload-subtitle"
+          }, [props.subtitle])]), vue.createVNode(VOverlay, {
+            "model-value": dragOver.value,
+            "contained": true,
+            "scrim": props.scrim
+          }, null), slots.input?.({
+            inputNode
+          }) ?? inputNode]
+        }), model.value.length > 0 && vue.createVNode("div", {
+          "class": "v-file-upload-items"
+        }, [model.value.map((file, i) => {
+          const slotProps = {
+            file,
+            props: {
+              'onClick:remove': () => onClickRemove(i)
+            }
+          };
+          return vue.createVNode(VDefaultsProvider, {
+            "key": i,
+            "defaults": {
+              VFileUploadItem: {
+                file,
+                clearable: props.clearable,
+                disabled: props.disabled,
+                showSize: props.showSize
+              }
+            }
+          }, {
+            default: () => [slots.item?.(slotProps) ?? vue.createVNode(VFileUploadItem, {
+              "key": i,
+              "onClick:remove": () => onClickRemove(i)
+            }, slots)]
+          });
+        })])]);
+      });
+    }
+  });
+
+  // Types
+
   const makeVNumberInputProps = propsFactory({
     controlVariant: {
       type: String,
@@ -30001,6 +30320,8 @@
     VField: VField,
     VFieldLabel: VFieldLabel,
     VFileInput: VFileInput,
+    VFileUpload: VFileUpload,
+    VFileUploadItem: VFileUploadItem,
     VFooter: VFooter,
     VForm: VForm,
     VHover: VHover,
@@ -30414,7 +30735,7 @@
       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
@@ -30667,7 +30988,7 @@
 
   /* 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 */