feat(input-file): allow specifying accept and multiple on the inp…

…ut element (#346)

docs/components/input-file.md

@@ -25,7 +25,7 @@ Import `<SInputFile>` and pass in the `value` prop.
 import { ref } from 'vue'
 import SInputFile from '@globalbrain/sefirot/lib/components/SInputFile.vue'
 
-const input = ref<File | null>(null)
+const input = ref<File | File[] | null>(null)
 </script>
 
 <template>
@@ -147,6 +147,34 @@ interface Props {
 <SInputFile placeholder="No file choosen" v-model="..." />
 ```
 
+### `:accept`
+
+Defines the file types to accept.
+
+```ts
+interface Props {
+  accept?: string
+}
+```
+
+```vue-html
+<SInputFile accept="image/*" v-model="..." />
+```
+
+### `:multiple`
+
+Defines whether to accept multiple files.
+
+```ts
+interface Props {
+  multiple?: boolean
+}
+```
+
+```vue-html
+<SInputFile multiple v-model="..." />
+```
+
 ### `:check-icon`
 
 Icon to display at corner right of label. Useful to show the status of a particular input.
@@ -210,7 +238,7 @@ Sets the input value. When `model-value` prop is set (e.g. via `v-model` directi
 
 ```ts
 interface Props {
-  value?: File | null
+  value?: File | File[] | null
 }
 ```
 
@@ -224,7 +252,7 @@ The `v-model` binding for the input.
 
 ```ts
 interface Props {
-  modelValue?: File | null
+  modelValue?: File | File[] | null
 }
 ```
 
@@ -306,7 +334,7 @@ Emits when the user selects the item. This event is always emitted together with
 
 ```ts
 interface Emits {
-  (e: 'update:model-value', value: File | null): void
+  (e: 'update:model-value', value: File | File[] | null): void
 }
 ```
 
@@ -316,7 +344,7 @@ Emits when the user selects the item. This event is always emitted together with
 
 ```ts
 interface Emits {
-  (e: 'change', value: File | null): void
+  (e: 'change', value: File | File[] | null): void
 }
 ```
 

lib/components/SInputFile.vue

@@ -15,18 +15,20 @@ const props = defineProps<{
   help?: string
   text?: string
   placeholder?: string
+  accept?: string
+  multiple?: boolean
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
   checkColor?: Color
-  value?: File | null
-  modelValue?: File | null
+  value?: File | File[] | null
+  modelValue?: File | File[] | null
   hideError?: boolean
   validation?: Validatable
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', file: File | null): void
-  (e: 'change', file: File | null): void
+  (e: 'update:model-value', file: File | File[] | null): void
+  (e: 'change', file: File | File[] | null): void
 }>()
 
 const _value = computed(() => {
@@ -39,15 +41,19 @@ const input = ref<HTMLInputElement | null>(null)
 
 const classes = computed(() => [props.size ?? 'small'])
 
-const fileName = computed(() => _value.value?.name ?? null)
+const fileName = computed(() => Array.isArray(_value.value)
+  ? _value.value.map((file) => file.name).join(', ')
+  : _value.value?.name ?? ''
+)
 
-/* c8 ignore next 4 */
 function open() {
   input.value!.click()
 }
 
 function onChange(e: Event) {
-  const file = (e.target as any).files[0]
+  const file = props.multiple
+    ? Array.from((e.target as HTMLInputElement).files ?? [])
+    : ((e.target as HTMLInputElement).files ?? [])[0]
 
   emit('update:model-value', file ?? null)
   emit('change', file ?? null)
@@ -74,6 +80,8 @@ function onChange(e: Event) {
       ref="input"
       class="input"
       type="file"
+      :accept="accept"
+      :multiple="multiple"
       @change="onChange"
     >