@indielayer/ui 1.9.2 → 1.10.0

package/src/components/upload/Upload.vue

@@ -0,0 +1,365 @@
+<script lang="ts">
+const validators = {
+  ...useCommon.validators(),
+  variant: ['box'] as const,
+}
+const uploadProps = {
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  placeholder: String,
+  accept: String,
+  multiple: Boolean,
+  maxFiles: [Number, String],
+  maxFileSize: [Number, String],
+  variant: {
+    type: String as PropType<UploadVariant>,
+    default: 'box',
+  },
+
+  // URL to submit data to.
+  action: String,
+  // Additional HTTP headers
+  headers: Object as PropType<Record<string, string>>,
+  method: {
+    type: String as PropType<'POST' | 'PUT'>,
+    default: 'POST',
+  },
+  withCredentials: Boolean,
+}
+
+export type UploadFile = {
+  file: File;
+  completed: boolean;
+  response?: any;
+  progress: number;
+  error: string;
+}
+
+export type UploadVariant = typeof validators.variant[number]
+export type UploadProps = ExtractPublicPropTypes<typeof uploadProps>
+
+type InternalClasses = 'wrapper' | 'input'
+export interface UploadTheme extends ThemeComponent<UploadProps, InternalClasses> {}
+
+export default {
+  name: 'XUpload',
+  validators,
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch, type ExtractPublicPropTypes, type PropType } from 'vue'
+import { useDropZone } from '@vueuse/core'
+import { useCommon } from '../../composables/useCommon'
+import { useInteractive } from '../../composables/useInteractive'
+import { useInputtable } from '../../composables/useInputtable'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { uploadIcon, closeIcon, fileIcon } from '../../common/icons'
+
+import XLabel from '../label/Label.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
+import XProgress from '../progress/Progress.vue'
+import XIcon from '../icon/Icon.vue'
+
+const props = defineProps(uploadProps)
+
+const emit = defineEmits([...useInputtable.emits(), 'upload', 'remove'])
+
+const elRef = ref<HTMLElement | null>(null)
+
+const isUploadMode = computed(() => !!props.action)
+
+// works as internal model, but exposed for form validations
+const modelValue = ref<UploadFile[]>([])
+
+watch(modelValue, (val) => {
+  emit('update:modelValue', val)
+}, { deep: true, immediate: true })
+
+const { focus, blur } = useInteractive(elRef)
+
+function isInputValid(files: File[] | FileList | null) {
+  if (!files) return false
+
+  if ((!props.multiple && files.length > 1) || (props.maxFiles && files.length > Number(props.maxFiles))) {
+    errorInternal.value = 'Too many files'
+
+    return false
+  }
+
+  if (props.maxFileSize) {
+    for (let i = 0; i < files.length; i++) {
+      if (files[i].size > Number(props.maxFileSize)) {
+        errorInternal.value = 'File size is too large'
+
+        return false
+      }
+    }
+  }
+
+  if (props.accept) {
+    const accept = props.accept.split(',').map((type) => type.trim())
+
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i]
+
+      if (!accept.some((type) => file.type === type || file.name.endsWith(type))) {
+        errorInternal.value = 'Invalid file type'
+
+        return false
+      }
+    }
+  }
+
+  return true
+}
+
+function onChange(event: Event) {
+  const target = event.target as HTMLInputElement
+  const files = target.files
+
+  const isValid = isInputValid(files)
+
+  if (!isValid) return
+
+  emit('change', event)
+}
+
+function onInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  const files = target.files
+
+  const isValid = isInputValid(files)
+
+  if (!isValid) return
+
+  handleFiles(files)
+
+  if (props.validateOnInput && !isFirstValidation.value) validate(modelValue.value)
+
+  emit('input', event)
+}
+
+const dropZoneRef = ref<HTMLElement | null>(null)
+
+function onDrop(files: File[] | null) {
+  const isValid = isInputValid(files)
+
+  if (!isValid) return
+
+  handleFiles(files)
+}
+
+const { isOverDropZone } = useDropZone(dropZoneRef, {
+  onDrop,
+  multiple: props.multiple,
+  preventDefaultForUnhandled: false,
+})
+
+function handleFiles(files: File[] | FileList | null) {
+  modelValue.value = files ? Array.from(files).map((file) => ({
+    file,
+    completed: isUploadMode.value ? false : true,
+    progress: isUploadMode.value ? 0 : 100,
+    error: '',
+  })) : []
+
+  if (isUploadMode.value) upload()
+}
+
+function removeFile(file: File) {
+  const index = modelValue.value.findIndex((f) => f.file === file)
+
+  if (index === -1) return
+
+  emit('remove', modelValue.value[index])
+
+  modelValue.value.splice(index, 1)
+}
+
+function isImage(file: File) {
+  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg']
+
+  return file.type.startsWith('image') || imageExtensions.some((ext) => file.name.endsWith(ext))
+}
+
+function getImagePreview(file: File) {
+  return URL.createObjectURL(file)
+}
+
+function calculateFileSize(size: number) {
+  if (size < 1024) return `${size} B`
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`
+  if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(2)} MB`
+
+  return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`
+}
+
+async function uploadFileRequest(uploadFile: UploadFile) {
+  return new Promise((resolve, reject) => {
+    if (!props.action) reject(new Error('No action provided'))
+    else {
+      const xhr = new XMLHttpRequest()
+      const formData = new FormData()
+
+      formData.append('file', uploadFile.file)
+
+      xhr.open(props.method, props.action, true)
+
+      // Set headers
+      if (props.headers && typeof props.headers === 'object') {
+        Object.keys(props.headers).forEach((key) => {
+          xhr.setRequestHeader(key, props.headers![key])
+        })
+      }
+
+      // Progress event for tracking upload
+      xhr.upload.addEventListener('progress', (event) => {
+        if (event.lengthComputable) {
+          const percentComplete = (event.loaded / event.total) * 100
+
+          uploadFile.progress = percentComplete
+
+          console.log(`Upload progress: ${percentComplete}%`)
+        }
+      })
+
+      // Event listener when upload is complete
+      xhr.addEventListener('load', () => {
+        if (xhr.status === 200) {
+          uploadFile.completed = true
+          try {
+            uploadFile.response = JSON.parse(xhr.responseText)
+          } catch (error) {
+            uploadFile.response = xhr.responseText
+          }
+
+          resolve(xhr.responseText)
+        } else {
+          const errorMsg = `Upload failed. Status: ${xhr.status}`
+
+          uploadFile.error = errorMsg
+          reject(new Error(errorMsg))
+        }
+      })
+
+      xhr.addEventListener('error', () => {
+        uploadFile.error = 'An error occurred during the upload.'
+        reject(new Error('An error occurred during the upload.'))
+      })
+
+      xhr.send(formData)
+    }
+  })
+}
+
+async function upload() {
+  if (!props.action && !modelValue.value) return
+
+  const promises = []
+
+  for (let i = 0; i < modelValue.value.length; i++) {
+    promises.push(uploadFileRequest(modelValue.value[i]))
+  }
+
+  await Promise.all(promises)
+
+  validate(modelValue.value)
+}
+
+const {
+  errorInternal,
+  hideFooterInternal,
+  isInsideForm,
+  inputListeners,
+  isFirstValidation,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit })
+
+const { styles, classes, className } = useTheme('Upload', {}, props)
+
+defineExpose({ focus, blur, reset, validate, setError })
+</script>
+
+<template>
+  <div
+    :class="[
+      className,
+      classes.wrapper,
+    ]"
+  >
+    <x-label
+      :style="styles"
+      :disabled="disabled"
+      :required="required"
+      :is-inside-form="isInsideForm"
+      :label="label"
+      :tooltip="tooltip"
+    >
+      <input
+        :id="id"
+        ref="elRef"
+        type="file"
+        :class="[
+          'sr-only',
+          classes.input,
+        ]"
+        :disabled="disabled"
+        :name="name"
+        :accept="accept"
+        :multiple="multiple"
+        :readonly="readonly"
+        v-on="{
+          ...inputListeners,
+          input: onInput,
+          change: onChange,
+        }"
+      />
+      <slot name="box" :is-over="isOverDropZone">
+        <div
+          ref="dropZoneRef"
+          class="border border-dashed rounded-md flex items-center justify-center gap-2 p-4 cursor-pointer transition-colors duration-500 hover:border-primary-500 dark:hover:border-primary-400"
+          :class="{
+            'border-primary-500 dark:border-primary-400': isOverDropZone,
+          }"
+        >
+          <x-icon :icon="uploadIcon" />
+          <span class="text-secondary-500 dark:text-secondary-400">{{ placeholder }}</span>
+          <span class="text-xs text-secondary-400 dark:text-secondary-500">or drag and drop</span>
+        </div>
+      </slot>
+
+      <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
+    </x-label>
+    <slot name="files" :files="modelValue">
+      <div v-for="(uploadFile, i) in modelValue" :key="i" class="border rounded-md p-2 bg-secondary-100 my-2">
+        <div class="flex items-center">
+          <div
+            class="rounded-md w-9 h-9 flex items-center justify-center mr-2 border"
+            :class="{
+              'p-2 bg-white': !isImage(uploadFile.file),
+            }"
+          >
+            <img
+              v-if="isImage(uploadFile.file)"
+              :src="getImagePreview(uploadFile.file)"
+              class="w-full h-full object-cover rounded-md"
+            />
+            <x-icon v-else :icon="fileIcon"/>
+          </div>
+          <div class="truncate flex-1 pr-2">
+            <div class="font-medium truncate">{{ uploadFile.file.name }}</div>
+            <div class="text-xs text-secondary-500">{{ calculateFileSize(uploadFile.file.size) }}</div>
+          </div>
+          <button type="button" class="shrink-0" @click="removeFile(uploadFile.file)">
+            <slot name="removeIcon"><x-icon :icon="closeIcon"/></slot>
+          </button>
+        </div>
+        <x-progress v-if="isUploadMode" :percentage="uploadFile.progress" class="mt-1" :color="uploadFile.error ? 'warning' : 'success'"/>
+        <x-input-footer v-if="uploadFile.error" :error="uploadFile.error"/>
+      </div>
+    </slot>
+  </div>
+</template>

package/src/components/upload/__tests__/Upload.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Upload from '../Upload.vue'
+
+describe('Upload', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Upload)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/upload/index.ts

@@ -0,0 +1,2 @@
+export { default as XUpload } from './Upload.vue'
+export type { UploadProps, UploadFile, UploadTheme } from './Upload.vue'

package/src/components/upload/theme/Upload.base.theme.ts

@@ -0,0 +1,9 @@
+import type { UploadTheme } from '../Upload.vue'
+
+const theme: UploadTheme = {
+  classes: {
+    wrapper: '',
+  },
+}
+
+export default theme

package/src/components/upload/theme/Upload.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { UploadTheme } from '../Upload.vue'
+
+import BaseTheme from './Upload.base.theme'
+
+const theme: UploadTheme = BaseTheme
+
+export default theme

package/src/composables/useInputtable.ts

@@ -1,5 +1,5 @@
 import type { MaybeRef, PropType } from 'vue'
-import { ref, computed, inject, watch, onMounted, onUnmounted } from 'vue'
+import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
 import { injectFormGroupKey, injectFormKey } from './keys'
 
 export interface XFormInputMethods {

package/src/composables/useVirtualList.ts

@@ -196,6 +196,7 @@ function createCalculateRange<T>(type: 'horizontal' | 'vertical', overscan: numb
 
 function createGetDistance<T>(itemSize: UseVirtualListItemSize, source: UseVirtualListResources<T>['source']) {
   return (index: number) => {
+
     if (typeof itemSize === 'number') {
       const size = index * itemSize
 
@@ -210,10 +211,9 @@ function createGetDistance<T>(itemSize: UseVirtualListItemSize, source: UseVirtu
   }
 }
 
-function useWatchForSizes<T>(size: UseVirtualElementSizes, list: MaybeRef<T[]>, containerRef: Ref<HTMLElement | null>, calculateRange: () => void, scrollTo: (index: number) => void) {
+function useWatchForSizes<T>(size: UseVirtualElementSizes, list: MaybeRef<T[]>, containerRef: Ref<HTMLElement | null>, calculateRange: () => void) {
   watch([size.width, size.height, list, containerRef], () => {
     calculateRange()
-    scrollTo(0)
   })
 }
 
@@ -263,14 +263,17 @@ function useVerticalVirtualList<T>(options: UseVirtualListOptions, list: MaybeRe
 
   const scrollTo = createScrollTo('vertical', calculateRange, getDistanceTop, containerRef)
 
-  useWatchForSizes(size, list, containerRef, calculateRange, scrollTo)
+  useWatchForSizes(size, source, containerRef, calculateRange)
 
   const wrapperProps = computed(() => {
+    const total = totalHeight.value + topOffset + bottomOffset
+    const offTop = offsetTop.value > total ? total : offsetTop.value
+
     return {
       style: {
         width: '100%',
-        height: `${totalHeight.value - offsetTop.value + topOffset + bottomOffset}px`,
-        marginTop: `${offsetTop.value}px`,
+        height: `${totalHeight.value - offTop + topOffset + bottomOffset}px`,
+        marginTop: `${offTop}px`,
       },
     }
   })

package/src/theme.ts

@@ -51,6 +51,7 @@ import type {
   TagTheme,
   TextareaTheme,
   ToggleTheme,
+  UploadTheme,
 } from './components'
 
 export type ComponentThemes = {
@@ -105,6 +106,7 @@ export type ComponentThemes = {
   Tag: TagTheme;
   Textarea: TextareaTheme;
   Toggle: ToggleTheme;
+  Upload: UploadTheme;
 }
 
 export type UITheme = {

package/src/themes/base/components.ts

@@ -49,3 +49,4 @@ export { default as TableRow } from '../../components/table/theme/TableRow.base.
 export { default as Tag } from '../../components/tag/theme/Tag.base.theme'
 export { default as Textarea } from '../../components/textarea/theme/Textarea.base.theme'
 export { default as Toggle } from '../../components/toggle/theme/Toggle.base.theme'
+export { default as Upload } from '../../components/upload/theme/Upload.base.theme'

package/src/themes/carbon/components.ts

@@ -49,3 +49,4 @@ export { default as TableRow } from '../../components/table/theme/TableRow.carbo
 export { default as Tag } from '../../components/tag/theme/Tag.carbon.theme'
 export { default as Textarea } from '../../components/textarea/theme/Textarea.carbon.theme'
 export { default as Toggle } from '../../components/toggle/theme/Toggle.carbon.theme'
+export { default as Upload } from '../../components/upload/theme/Upload.carbon.theme'

package/src/version.ts

@@ -1 +1 @@
-export default '1.9.2'
+export default '1.10.0'

package/volar.d.ts

@@ -57,6 +57,7 @@ declare module 'vue' {
     XToggle: typeof import('@indielayer/ui')['XToggle']
     XToggleTip: typeof import('@indielayer/ui')['XToggleTip']
     XTooltip: typeof import('@indielayer/ui')['XTooltip']
+    XUpload: typeof import('@indielayer/ui')['XUpload']
   }
 }