Use FileInputDefault, not use SCSS

Author: AlttiRi

src/components/FileInput.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import FileInputDefaultHoverText from "./FileInputDefaultHoverText.vue";
-import FileInputDefaultText      from "./FileInputDefaultText.vue";
-import {FileInputState, HTMLFileInputElement} from "../index";
-
 import {
   ref, toRefs, onMounted, computed, onBeforeUnmount, watchEffect,
   Ref, ComputedRef
 } from "vue";
+import {FileInputState, HTMLFileInputElement} from "../index";
+import FileInputDefault from "./FileInputDefault.vue";
+
 
 const templateInputElem: Ref<HTMLFileInputElement | null> = ref(null);
 
@@ -34,8 +33,6 @@ const {
 } = toRefs(props);
 
 const {
-  parsing,
-  file,
   dropHover,
   setFiles,
   setDataTransfer,
@@ -145,12 +142,11 @@ function onKeyDown(event: KeyboardEvent) {
     fileInputElem.value?.querySelector("label")?.click();
   }
 }
-
 </script>
 
 <template>
   <div
-    class="file-input" data-comp="FileInput"
+    class="file-input" data-component="FileInput"
     ref="fileInputElem"
     :class="{'drop-hover': dropHover}"
     tabindex="0"
@@ -165,20 +161,14 @@ function onKeyDown(event: KeyboardEvent) {
              :nwdirectory="nwdirectory"
              ref="templateInputElem"
       >
-
-      <span class="content hover" v-if="dropHover">
-        <slot name="hover"><FileInputDefaultHoverText :state="state"/></slot>
-      </span>
-        <span class="content selected" v-else-if="file && !parsing">
-        <slot name="selected"><FileInputDefaultText :state="state"/></slot>
-      </span>
-        <span class="content prompt" v-else>
-        <slot name="prompt"><FileInputDefaultText :state="state"/></slot>
-      </span>
-
+      <slot>
+        <FileInputDefault :state="state"/>
+      </slot>
     </label>
     <teleport to="body">
-      <div class="file-input-hover-modal" :class="{'drop-hover': dropHover}"></div>
+      <slot name="modal">
+        <div class="file-input-hover-modal" :class="{'drop-hover': dropHover}"></div>
+      </slot>
     </teleport>
   </div>
 </template>
@@ -193,8 +183,8 @@ function onKeyDown(event: KeyboardEvent) {
 </style>
 
 <style scoped>
-.file-input, label, .content {
-  width: 100%;
+.file-input {
+  width:  100%;
   height: 100%;
 }
 
@@ -230,13 +220,3 @@ function onKeyDown(event: KeyboardEvent) {
   opacity: 1;
 }
 </style>
-
-
-
-
-
-
-
-
-
-

src/components/FileInputDefault.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <span class="content hover" v-if="state.private.dropHover">
+      <slot name="hover">
+        <FileInputDefaultHoverText :state="state"/>
+      </slot>
+    </span>
+    <span class="content selected" v-else-if="state.private.file && !state.private.parsing">
+      <slot name="selected">
+        <FileInputDefaultText :state="state"/>
+      </slot>
+    </span>
+    <span class="content prompt" v-else>
+      <slot name="prompt">
+        <FileInputDefaultText :state="state"/>
+      </slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import FileInputDefaultHoverText from "./FileInputDefaultHoverText.vue";
+import FileInputDefaultText      from "./FileInputDefaultText.vue";
+import {FileInputState} from "./file-input-state";
+
+defineProps<{
+  state: FileInputState,
+}>();
+</script>
+
+<style scoped>
+.content {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/FileInputDefaultText.vue

@@ -10,21 +10,20 @@
 
 <script setup lang="ts">
 import {computed} from "vue";
-import {FileInputState} from "../index";
+import {FileInputState, WebFileEntry} from "../index";
 
 const props = defineProps<{state: FileInputState}>();
 const {
   count, fileEntries, parsing
 } = props.state.private;
 
 const names = computed(() => {
-  /** @type {WebFileEntry[]} */
-  const entries = fileEntries.value;
+  const entries: WebFileEntry[] = fileEntries.value;
   return entries.slice(0, 50).map(file => file.name).join("\n");
 });
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .default-prompt-text {
   width: inherit;
   height: inherit;
@@ -35,11 +34,13 @@ const names = computed(() => {
 
   cursor: pointer;
 
-  &:hover {
-    //text-decoration: underline;
-  }
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+/*
+.default-prompt-text:hover {
+  text-decoration: underline;
+}
+*/
 </style>

src/components/FileInputSelectedInfo.vue

@@ -1,7 +1,7 @@
 <template>
     <span class="file-info" v-if="file">
       <span class="file-name" :title="file.name">{{file.name}}</span>
-      <span class="file-size" :title="file.size">{{bytesToSizeWinLike(file.size)}}</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>
 </template>
@@ -16,27 +16,24 @@ const {
 } = props.state.private;
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .file-info {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   max-width: 100%;
-  .select-prompt {
-    align-self: center;
-  }
-  > * {
-    padding: 4px 12px;
-  }
-  .file-name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-  .file-mtime {
-    opacity: 0.9;
-  }
+}
+.file-info > * {
+  padding: 4px 12px;
+}
+.file-info .file-name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.file-info .file-mtime {
+  opacity: 0.9;
 }
 </style>