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

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

@@ -0,0 +1 @@
+{"version":3,"file":"VFileUpload.mjs","names":["VFileUploadItem","VBtn","VDefaultsProvider","makeVDividerProps","VDivider","VIcon","VOverlay","makeVSheetProps","VSheet","makeDelayProps","makeDensityProps","useDensity","IconValue","useLocale","useProxiedModel","onMounted","onUnmounted","ref","shallowRef","filterInputAttrs","genericComponent","only","propsFactory","useRender","wrapInArray","makeVFileUploadProps","browseText","type","String","default","dividerText","title","subtitle","icon","modelValue","Array","Object","validator","val","every","v","clearable","Boolean","disabled","hideBrowse","multiple","scrim","showSize","name","length","VFileUpload","inheritAttrs","props","emits","files","setup","_ref","attrs","slots","t","densityClasses","model","isArray","dragOver","vSheetRef","inputRef","value","$el","addEventListener","onDragOver","onDrop","removeEventListener","e","preventDefault","stopImmediatePropagation","onDragLeave","from","dataTransfer","array","slice","file","some","f","push","onClick","click","onClickRemove","index","filter","_","i","hasTitle","hasIcon","hasBrowse","browse","density","cardProps","filterProps","dividerProps","rootAttrs","inputAttrs","inputNode","_createVNode","_mergeProps","target","_Fragment","undefined","divider","readonly","size","text","variant","input","map","slotProps","onClick:remove","item"],"sources":["../../../src/labs/VFileUpload/VFileUpload.tsx"],"sourcesContent":["// Styles\nimport './VFileUpload.sass'\n\n// Components\nimport { VFileUploadItem } from './VFileUploadItem'\nimport { VBtn } from '@/components/VBtn/VBtn'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'\nimport { makeVDividerProps, VDivider } from '@/components/VDivider/VDivider'\nimport { VIcon } from '@/components/VIcon/VIcon'\nimport { VOverlay } from '@/components/VOverlay/VOverlay'\nimport { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'\n\n// Composables\nimport { makeDelayProps } from '@/composables/delay'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { IconValue } from '@/composables/icons'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { onMounted, onUnmounted, ref, shallowRef } from 'vue'\nimport { filterInputAttrs, genericComponent, only, propsFactory, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { PropType, VNode } from 'vue'\n\nexport type VFileUploadSlots = {\n  browse: {\n    props: { onClick: (e: MouseEvent) => void }\n  }\n  default: never\n  icon: never\n  input: {\n    inputNode: VNode\n  }\n  item: {\n    file: File\n    props: { 'onClick:remove': () => void }\n  }\n  title: never\n  divider: never\n}\n\nexport const makeVFileUploadProps = propsFactory({\n  browseText: {\n    type: String,\n    default: '$vuetify.fileUpload.browse',\n  },\n  dividerText: {\n    type: String,\n    default: '$vuetify.fileUpload.divider',\n  },\n  title: {\n    type: String,\n    default: '$vuetify.fileUpload.title',\n  },\n  subtitle: String,\n  icon: {\n    type: IconValue,\n    default: '$upload',\n  },\n  modelValue: {\n    type: [Array, Object] as PropType<File[] | File>,\n    default: null,\n    validator: (val: any) => {\n      return wrapInArray(val).every(v => v != null && typeof v === 'object')\n    },\n  },\n  clearable: Boolean,\n  disabled: Boolean,\n  hideBrowse: Boolean,\n  multiple: Boolean,\n  scrim: {\n    type: [Boolean, String],\n    default: true,\n  },\n  showSize: Boolean,\n  name: String,\n\n  ...makeDelayProps(),\n  ...makeDensityProps(),\n  ...only(makeVDividerProps({\n    length: 150,\n  }), ['length', 'thickness', 'opacity']),\n  ...makeVSheetProps(),\n}, 'VFileUpload')\n\nexport const VFileUpload = genericComponent<VFileUploadSlots>()({\n  name: 'VFileUpload',\n\n  inheritAttrs: false,\n\n  props: makeVFileUploadProps(),\n\n  emits: {\n    'update:modelValue': (files: File[]) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const { t } = useLocale()\n    const { densityClasses } = useDensity(props)\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      props.modelValue,\n      val => wrapInArray(val),\n      val => (props.multiple || Array.isArray(props.modelValue)) ? val : val[0],\n    )\n\n    const dragOver = shallowRef(false)\n    const vSheetRef = ref<InstanceType<typeof VSheet> | null>(null)\n    const inputRef = ref<HTMLInputElement | null>(null)\n\n    onMounted(() => {\n      vSheetRef.value?.$el.addEventListener('dragover', onDragOver)\n      vSheetRef.value?.$el.addEventListener('drop', onDrop)\n    })\n\n    onUnmounted(() => {\n      vSheetRef.value?.$el.removeEventListener('dragover', onDragOver)\n      vSheetRef.value?.$el.removeEventListener('drop', onDrop)\n    })\n\n    function onDragOver (e: DragEvent) {\n      e.preventDefault()\n      e.stopImmediatePropagation()\n      dragOver.value = true\n    }\n\n    function onDragLeave (e: DragEvent) {\n      e.preventDefault()\n      dragOver.value = false\n    }\n\n    function onDrop (e: DragEvent) {\n      e.preventDefault()\n      e.stopImmediatePropagation()\n      dragOver.value = false\n\n      const files = Array.from(e.dataTransfer?.files ?? [])\n\n      if (!files.length) return\n\n      if (!props.multiple) {\n        model.value = [files[0]]\n\n        return\n      }\n\n      const array = model.value.slice()\n\n      for (const file of files) {\n        if (!array.some(f => f.name === file.name)) {\n          array.push(file)\n        }\n      }\n\n      model.value = array\n    }\n\n    function onClick () {\n      inputRef.value?.click()\n    }\n\n    function onClickRemove (index: number) {\n      model.value = model.value.filter((_, i) => i !== index)\n\n      if (model.value.length > 0 || !inputRef.value) return\n\n      inputRef.value.value = ''\n    }\n\n    useRender(() => {\n      const hasTitle = !!(slots.title || props.title)\n      const hasIcon = !!(slots.icon || props.icon)\n      const hasBrowse = !!(!props.hideBrowse && (slots.browse || props.density === 'default'))\n      const cardProps = VSheet.filterProps(props)\n      const dividerProps = VDivider.filterProps(props)\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n\n      const inputNode = (\n        <input\n          ref={ inputRef }\n          type=\"file\"\n          disabled={ props.disabled }\n          multiple={ props.multiple }\n          name={ props.name }\n          onChange={ e => {\n            if (!e.target) return\n\n            const target = e.target as HTMLInputElement\n            model.value = [...target.files ?? []]\n          }}\n          { ...inputAttrs }\n        />\n      )\n\n      return (\n        <>\n          <VSheet\n            ref={ vSheetRef }\n            { ...cardProps }\n            class={[\n              'v-file-upload',\n              {\n                'v-file-upload--clickable': !hasBrowse,\n                'v-file-upload--disabled': props.disabled,\n                'v-file-upload--dragging': dragOver.value,\n              },\n              densityClasses.value,\n            ]}\n            onDragleave={ onDragLeave }\n            onDragover={ onDragOver }\n            onDrop={ onDrop }\n            onClick={ !hasBrowse ? onClick : undefined }\n            { ...rootAttrs }\n          >\n            { hasIcon && (\n              <div key=\"icon\" class=\"v-file-upload-icon\">\n                { !slots.icon ? (\n                  <VIcon\n                    key=\"icon-icon\"\n                    icon={ props.icon }\n                  />\n                ) : (\n                  <VDefaultsProvider\n                    key=\"icon-defaults\"\n                    defaults={{\n                      VIcon: {\n                        icon: props.icon,\n                      },\n                    }}\n                  >\n                    { slots.icon() }\n                  </VDefaultsProvider>\n                )}\n              </div>\n            )}\n\n            { hasTitle && (\n              <div key=\"title\" class=\"v-file-upload-title\">\n                { slots.title?.() ?? t(props.title) }\n              </div>\n            )}\n\n            { props.density === 'default' && (\n              <>\n                <div key=\"upload-divider\" class=\"v-file-upload-divider\">\n                  { slots.divider?.() ?? (\n                    <VDivider { ...dividerProps }>\n                      { t(props.dividerText) }\n                    </VDivider>\n                  )}\n                </div>\n\n                { hasBrowse && (\n                  <>\n                    { !slots.browse ? (\n                      <VBtn\n                        readonly={ props.disabled }\n                        size=\"large\"\n                        text={ t(props.browseText) }\n                        variant=\"tonal\"\n                        onClick={ onClick }\n                      />\n                    ) : (\n                      <VDefaultsProvider\n                        defaults={{\n                          VBtn: {\n                            readonly: props.disabled,\n                            size: 'large',\n                            text: t(props.browseText),\n                            variant: 'tonal',\n                          },\n                        }}\n                      >\n                        { slots.browse({ props: { onClick } }) }\n                      </VDefaultsProvider>\n                    )}\n                  </>\n                )}\n\n                { props.subtitle && (\n                  <div class=\"v-file-upload-subtitle\">\n                    { props.subtitle }\n                  </div>\n                )}\n              </>\n            )}\n\n            <VOverlay\n              model-value={ dragOver.value }\n              contained\n              scrim={ props.scrim }\n            />\n\n            { slots.input?.({ inputNode }) ?? inputNode }\n          </VSheet>\n\n          { model.value.length > 0 && (\n            <div class=\"v-file-upload-items\">\n              { model.value.map((file, i) => {\n                const slotProps = {\n                  file,\n                  props: {\n                    'onClick:remove': () => onClickRemove(i),\n                  },\n                }\n\n                return (\n                  <VDefaultsProvider\n                    key={ i }\n                    defaults={{\n                      VFileUploadItem: {\n                        file,\n                        clearable: props.clearable,\n                        disabled: props.disabled,\n                        showSize: props.showSize,\n                      },\n                    }}\n                  >\n                    { slots.item?.(slotProps) ?? (\n                      <VFileUploadItem\n                        key={ i }\n                        onClick:remove={ () => onClickRemove(i) }\n                        v-slots={ slots }\n                      />\n                    )}\n                  </VDefaultsProvider>\n                )\n              })}\n            </div>\n          )}\n        </>\n      )\n    })\n  },\n})\n\nexport type VFileUpload = InstanceType<typeof VFileUpload>\n"],"mappings":"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","ignoreList":[]}

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;