update

src/FileSelector.vue

@@ -1,61 +1,45 @@
-<template>
-<div>
- <input
-    style="display: none"
-    type="file"
-    ref="inputRef"
-    :multiple="allowMultiple"
-    :accept="accept"
-    @change="updateFiles"
-  />
-  <slot :openDialog="openDialog" />
-
-</div>
-
-</template>
+<script setup lang="ts">
+import { provide, ref } from "vue";
 
-<script lang="ts">
-import { provide, ref, defineComponent } from 'vue';
-export default defineComponent({
-  emits: ['update:modelValue'],
-  props: {
-    modelValue: {
-      type: Array,
-      required: true,
-    },
-    allowMultiple: {
-      type: Boolean,
-      default: true,
-    },
-    accept: {
-      type: String,
-      default: undefined,
-    },
-  },
-  setup(props, { emit }) {
-    const inputRef = ref<HTMLInputElement>(<HTMLInputElement>(<unknown>null));
-    const openDialog = () => {
-      inputRef.value.click();
-    };
+interface Pros {
+  modelValue: string[];
+  allowMultiple: Boolean | undefined;
+  accept: string | undefined;
+}
 
-    provide('openDialog', openDialog);
+// emits: ["update:modelValue"];
 
-    provide('addFiles', (files: File[]) => {
-      emit('update:modelValue', [...props.modelValue, ...files]);
-    });
+const emit = defineEmits(["update:modelValue"]);
+const props = defineProps<Pros>();
+const inputRef = ref<HTMLInputElement>(<HTMLInputElement>(<unknown>null));
+const openDialog = () => {
+  inputRef.value.click();
+};
 
-    const updateFiles = () => {
-      if (inputRef.value.files?.length) {
-        const files = <File[]>(<unknown>inputRef.value.files);
-        emit('update:modelValue', [...props.modelValue, ...files]);
-      }
-    };
+provide("openDialog", openDialog);
 
-    return {
-      inputRef,
-      openDialog,
-      updateFiles,
-    };
-  },
+provide("addFiles", (files: File[]) => {
+  emit("update:modelValue", [...props.modelValue, ...files]);
 });
+
+const updateFiles = () => {
+  if (inputRef.value.files?.length) {
+    const files = <File[]>(<unknown>inputRef.value.files);
+    emit("update:modelValue", [...props.modelValue, ...files]);
+  }
+};
 </script>
+
+<template>
+  <div>
+    <input
+      style="display: none"
+      type="file"
+      ref="inputRef"
+      :multiple="allowMultiple"
+      :accept="accept"
+      @change="updateFiles"
+    />
+    <slot :openDialog="openDialog" />
+  </div>
+</template>

src/PickerButton.vue

@@ -1,17 +1,11 @@
+<script setup lang="ts">
+import { inject } from "vue";
+
+const openDialog = <() => void>inject("openDialog");
+</script>
+
 <template>
   <div v-bind="$attrs" @click="openDialog" class="col-2">
     <slot />
   </div>
 </template>
-<script>
-import { inject } from 'vue';
-export default {
-  setup() {
-    const openDialog = inject('openDialog');
-
-    return {
-      openDialog,
-    };
-  },
-};
-</script>