Update FileInputSelectedInfo

Author: AlttiRi

demo/App.vue

@@ -3,13 +3,15 @@
   <video src="#" style="background-color: aqua"> TEST </video>
 
   <FileInput :state="state" :global-drop-zone="false">
-<!--    <FileInputSelectedInfo :state="state"/>-->
+    <FileInputSelectedInfo :state="state"/>
   </FileInput>
 
   <div class="files">
     <div>Files:</div>
     <div v-for="e of state.fileEntries.value">{{e.name}} — {{formatSizeWinLike(e.size)}}</div>
   </div>
+
+  <a class="readme" title="Open Readme" href="https://github.com/AlttiRi/vue-file-input" target="_blank"><i>i</i></a>
 </template>
 
 <script setup>
@@ -27,4 +29,14 @@ globalThis.state = state;
 .files {
   padding: 6px 0;
 }
+
+.readme {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding: 2px 8px;
+  margin: 1px;
+  color: darkgray;
+  text-decoration: none;
+}
 </style>

src/components/FileInput.vue

@@ -231,4 +231,14 @@ function onKeyDown(event: KeyboardEvent) {
 .file-input-hover-modal.drop-hover {
   opacity: 1;
 }
+
+label {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+[tabindex]:focus {
+  outline: none;
+  box-shadow: 0 0 2px grey;
+}
 </style>

src/components/FileInputSelectedInfo.vue

@@ -1,9 +1,12 @@
 <template>
+  <span data-component="FileInputSelectedInfo">
     <span class="file-info" v-if="file">
       <span class="file-name" :title="file.name">{{file.name}}</span>
       <span class="file-size" :title="file.size.toString()">{{bytesToSizeWinLike(file.size)}}</span>
       <span class="file-mtime" v-if="file.mtime">{{dateToDayDateTimeString(file.mtime, false)}}</span>
     </span>
+    <span v-else>No file selected</span>
+  </span>
 </template>
 
 <script setup lang="ts">