Use .ts

Author: AlttiRi

demo/App.vue

@@ -1,13 +1,14 @@
 <template>
+  <!-- just for tests -->
+  <video src="." style="background-color: aqua"> TEST </video>
+
   <FileInput :state="state">
-    <template v-slot:selected>
-      <FileInputSelectedInfo :state="state"/>
-    </template>
+    <FileInputSelectedInfo :state="state"/>
   </FileInput>
 </template>
 
 <script setup>
-import {getStateInstance, FileInput, FileInputSelectedInfo} from "/src/index";
+import {getStateInstance, FileInput, FileInputSelectedInfo} from "../src/index.ts";
 // or
 // import {getStateInstance, FileInput, FileInputSelectedInfo} from "@alttiri/vue-file-input";
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@alttiri/vue-file-input",
-  "version": "1.3.3-2024.3.10",
+  "version": "1.4.0-20240819",
   "type": "module",
   "description": "Vue.js file input with Drag and Drop support.",
   "homepage": "https://github.com/alttiri/vue-file-input",
@@ -14,12 +14,13 @@
     "src"
   ],
   "scripts": {
-    "dev": "vite --host",
-    "build": "vite build",
-    "serve": "vite preview",
+    "vue-dev":   "vite --host",
+    "vue-build": "vite build",
+    "vue-serve": "vite preview",
     "#": "",
-    "publish-npm": "npm publish --registry=https://registry.npmjs.org",
-    "publish-ghp": "npm publish --registry=https://npm.pkg.github.com",
+    "test-publish": "npm pack",
+    "publish-npm":  "npm publish --registry=https://registry.npmjs.org",
+    "publish-ghp":  "npm publish --registry=https://npm.pkg.github.com",
     "##": "",
     "unpublish-npm": "npm unpublish @alttiri/vue-file-input@1.2.3 --registry=https://registry.npmjs.org",
     "###": "",
@@ -31,8 +32,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "5.1.2",
-    "vite": "5.3.5",
-    "vue": "3.4.35"
+    "vite": "5.4.1",
+    "vue": "3.4.38"
   },
   "dependencies": {
     "@alttiri/util-js": "1.13.1-20240725"

package.json

@@ -3,8 +3,8 @@ import {
   ref, toRefs, onMounted, computed, onBeforeUnmount, watchEffect,
   Ref, ComputedRef
 } from "vue";
-import {FileInputState, HTMLFileInputElement} from "../index";
 import FileInputDefault from "./FileInputDefault.vue";
+import {FileInputState, HTMLFileInputElement} from "../index.ts";
 
 
 const templateInputElem: Ref<HTMLFileInputElement | null> = ref(null);

src/components/FileInput.vue

@@ -21,7 +21,7 @@
 <script setup lang="ts">
 import FileInputDefaultHoverText from "./FileInputDefaultHoverText.vue";
 import FileInputDefaultText      from "./FileInputDefaultText.vue";
-import {FileInputState} from "./file-input-state";
+import {FileInputState} from "./file-input-state.ts";
 
 defineProps<{
   state: FileInputState,

src/components/FileInputDefault.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import {computed} from "vue";
-import {FileInputState} from "../index";
+import {FileInputState} from "../index.ts";
 
 const props = defineProps<{state: FileInputState}>();
 const {

src/components/FileInputDefaultHoverText.vue

@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import {computed} from "vue";
-import {FileInputState, WebFileEntry} from "../index";
+import {FileInputState, WebFileEntry} from "../index.ts";
 
 const props = defineProps<{state: FileInputState}>();
 const {

src/components/FileInputDefaultText.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script setup lang="ts">
-import {FileInputState} from "../index";
 import {bytesToSizeWinLike, dateToDayDateTimeString} from "@alttiri/util-js";
+import {FileInputState} from "../index.ts";
 
 const props = defineProps<{state: FileInputState}>();
 const {