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

package/lib/labs/VFileUpload/VFileUpload.sass

@@ -0,0 +1,75 @@
+@use '../../styles/tools'
+@use '../../styles/settings'
+@use './variables' as *
+
+@include tools.layer('components')
+  .v-file-upload
+    padding: $file-upload-padding
+    flex-direction: column
+    justify-content: center
+    align-items: center
+    position: relative
+
+    &.v-sheet
+      display: flex
+      border-radius: 4px
+      border-style: dashed
+      border-width: 2px
+
+    &.v-file-upload--density-compact
+      padding: 32px 0
+      flex-direction: row
+      gap: 1rem
+
+    .v-overlay__scrim
+      pointer-events: none
+
+    &--disabled
+      pointer-events: none
+      opacity: var(--v-disabled-opacity)
+
+    &--dragging
+      > *
+        pointer-events: none
+
+    &--clickable
+      cursor: pointer
+
+    input[type="file"]
+      left: 0
+      opacity: 0
+      position: absolute
+      cursor: pointer
+      top: 0
+      z-index: -1
+
+  .v-file-upload-title
+    font-size: $file-upload-title-font-size
+    font-weight: 600
+
+  .v-file-upload-icon
+    opacity: var(--v-medium-emphasis-opacity)
+    font-size: $file-upload-icon-font-size
+    margin-bottom: $file-upload-icon-margin-bottom
+
+    .v-file-upload--density-comfortable &
+      font-size: $file-upload-icon-font-size - .5rem
+      margin-bottom: $file-upload-icon-margin-bottom - .5rem
+
+    .v-file-upload--density-compact &
+      font-size: $file-upload-icon-font-size - 1rem
+      margin-bottom: $file-upload-icon-margin-bottom - 1rem
+
+  .v-file-upload-divider
+    align-items: center
+    display: flex
+    margin: $file-upload-divider-margin
+    justify-content: center
+    width: 100%
+
+  .v-file-upload-items
+    margin: $file-upload-items-margin
+
+  .v-file-upload-item
+    &:not(:first-child)
+      margin-top: 8px

package/lib/labs/VFileUpload/VFileUploadItem.mjs

@@ -0,0 +1,95 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+// Components
+import { VAvatar } from "../../components/VAvatar/VAvatar.mjs";
+import { VBtn } from "../../components/VBtn/VBtn.mjs";
+import { VDefaultsProvider } from "../../components/VDefaultsProvider/VDefaultsProvider.mjs";
+import { makeVListItemProps, VListItem } from "../../components/VList/VListItem.mjs"; // Utilities
+import { computed, ref, watchEffect } from 'vue';
+import { genericComponent, humanReadableFileSize, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export 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');
+export 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)])
+      });
+    });
+  }
+});
+//# sourceMappingURL=VFileUploadItem.mjs.map

package/lib/labs/VFileUpload/VFileUploadItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VFileUploadItem.mjs","names":["VAvatar","VBtn","VDefaultsProvider","makeVListItemProps","VListItem","computed","ref","watchEffect","genericComponent","humanReadableFileSize","propsFactory","useRender","makeVFileUploadItemProps","clearable","Boolean","file","type","Object","default","fileIcon","String","showSize","border","rounded","lines","VFileUploadItem","name","props","emits","click:remove","click","e","setup","_ref","emit","slots","preview","base","undefined","onClickRemove","value","startsWith","URL","createObjectURL","listItemProps","filterProps","_createVNode","_mergeProps","title","size","prepend","slotProps","_Fragment","image","icon","append","clear","density","variant","onClick"],"sources":["../../../src/labs/VFileUpload/VFileUploadItem.tsx"],"sourcesContent":["// Components\nimport { VAvatar } from '@/components/VAvatar/VAvatar'\nimport { VBtn } from '@/components/VBtn/VBtn'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'\nimport { makeVListItemProps, VListItem } from '@/components/VList/VListItem'\n\n// Utilities\nimport { computed, ref, watchEffect } from 'vue'\nimport { genericComponent, humanReadableFileSize, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VListItemSlots } from '@/components/VList/VListItem'\n\nexport type VFileUploadItemSlots = {\n  clear: {\n    props: { onClick: () => void }\n  }\n} & VListItemSlots\n\nexport const makeVFileUploadItemProps = propsFactory({\n  clearable: Boolean,\n  file: {\n    type: Object as PropType<File>,\n    default: null,\n  },\n  fileIcon: {\n    type: String,\n    // TODO: setup up a proper aliased icon\n    default: 'mdi-file-document',\n  },\n  showSize: Boolean,\n\n  ...makeVListItemProps({\n    border: true,\n    rounded: true,\n    lines: 'two' as const,\n  }),\n}, 'VFileUploadItem')\n\nexport const VFileUploadItem = genericComponent<VFileUploadItemSlots>()({\n  name: 'VFileUploadItem',\n\n  props: makeVFileUploadItemProps(),\n\n  emits: {\n    'click:remove': () => true,\n    click: (e: MouseEvent | KeyboardEvent) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const preview = ref()\n    const base = computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined)\n\n    function onClickRemove () {\n      emit('click:remove')\n    }\n\n    watchEffect(() => {\n      preview.value = props.file?.type.startsWith('image') ? URL.createObjectURL(props.file) : undefined\n    })\n\n    useRender(() => {\n      const listItemProps = VListItem.filterProps(props)\n\n      return (\n        <VListItem\n          { ...listItemProps }\n          title={ props.title ?? props.file?.name }\n          subtitle={ props.showSize ? humanReadableFileSize(props.file?.size, base.value) : props.file?.type }\n          class=\"v-file-upload-item\"\n        >\n          {{\n            ...slots,\n            prepend: slotProps => (\n              <>\n                { !slots.prepend ? (\n                  <VAvatar\n                    icon={ props.fileIcon }\n                    image={ preview.value }\n                    rounded\n                  />\n                ) : (\n                  <VDefaultsProvider\n                    defaults={{\n                      VAvatar: {\n                        image: preview.value,\n                        icon: !preview.value ? props.fileIcon : undefined,\n                        rounded: true,\n                      },\n                    }}\n                  >\n                    { slots.prepend?.(slotProps) ?? (\n                      <VAvatar />\n                    )}\n                  </VDefaultsProvider>\n                )}\n              </>\n            ),\n            append: slotProps => (\n              <>\n                { props.clearable && (\n                  <>\n                    { !slots.clear ? (\n                      <VBtn\n                        icon=\"$clear\"\n                        density=\"comfortable\"\n                        variant=\"text\"\n                        onClick={ onClickRemove }\n                      />\n                    ) : (\n                      <VDefaultsProvider\n                        defaults={{\n                          VBtn: {\n                            icon: '$clear',\n                            density: 'comfortable',\n                            variant: 'text',\n                          },\n                        }}\n                      >\n                        { slots.clear?.({\n                          ...slotProps,\n                          props: { onClick: onClickRemove },\n                        }) ?? (<VBtn />)}\n                      </VDefaultsProvider>\n                    )}\n                  </>\n                )}\n\n                { slots.append?.(slotProps) }\n              </>\n            ),\n          }}\n        </VListItem>\n      )\n    })\n  },\n})\n\nexport type VFileUploadItem = InstanceType<typeof VFileUploadItem>\n"],"mappings":"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","ignoreList":[]}

package/lib/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;