Nuxt Season Finale (#531)

Co-authored-by: Emma Cypress Pointer-Null <emmaffle@modrinth.com>

components/ui/FileInput.vue

@@ -1,88 +0,0 @@
-<template>
-  <label class="button" @drop.prevent="addFile" @dragover.prevent>
-    <span>
-      {{ text }}
-    </span>
-    <input
-      type="file"
-      :multiple="multiple"
-      :accept="accept"
-      @change="onChange"
-    />
-  </label>
-</template>
-
-<script>
-export default {
-  name: 'FileInput',
-  props: {
-    prompt: {
-      type: String,
-      default: 'Select file',
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    accept: {
-      type: String,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      text: this.prompt,
-      files: [],
-    }
-  },
-  methods: {
-    onChange(files, shouldNotReset) {
-      if (!shouldNotReset) this.files = files.target.files
-
-      const length = this.files.length
-      if (length === 0) {
-        this.text = this.prompt
-      } else if (length === 1) {
-        this.text = '1 file selected'
-      } else if (length > 1) {
-        this.text = length + ' files selected'
-      }
-      this.$emit('change', this.files)
-    },
-    addFile(e) {
-      const droppedFiles = e.dataTransfer.files
-
-      if (!this.multiple) this.files = []
-
-      if (!droppedFiles) return
-      ;[...droppedFiles].forEach((f) => {
-        this.files.push(f)
-      })
-
-      if (!this.multiple && this.files.length > 0) this.files = [this.files[0]]
-
-      if (this.files.length > 0) this.onChange(null, true)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: var(--spacing-card-sm) var(--spacing-card-md);
-}
-
-span {
-  border: 2px dashed var(--color-divider-dark);
-  border-radius: var(--size-rounded-control);
-  padding: var(--spacing-card-md) var(--spacing-card-lg);
-}
-
-input {
-  display: none;
-}
-</style>

components/ui/SmartFileInput.vue

@@ -2,7 +2,7 @@
   <div class="columns">
     <label class="button" @drop.prevent="addFile" @dragover.prevent>
       <span>
-        <UploadIcon />
+        <UploadIcon v-if="showIcon" />
         {{ prompt }}
       </span>
       <input
@@ -36,6 +36,14 @@ export default {
       type: String,
       default: null,
     },
+    maxSize: {
+      type: Number,
+      default: null,
+    },
+    showIcon: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -46,7 +54,26 @@ export default {
     onChange(files, shouldNotReset) {
       if (!shouldNotReset) this.files = files.target.files
 
-      this.$emit('change', this.files)
+      this.files = [...this.files].filter((file) => {
+        if (this.maxSize === null) {
+          return true
+        } else if (file.size > this.maxSize) {
+          console.log('File size: ' + file.size + ', max size: ' + this.maxSize)
+          alert(
+            'File ' +
+              file.name +
+              ' is too big! Must be less than ' +
+              this.$formatBytes(this.maxSize)
+          )
+          return false
+        } else {
+          return true
+        }
+      })
+
+      if (this.files.length > 0) {
+        this.$emit('change', this.files)
+      }
     },
     addFile(e) {
       const droppedFiles = e.dataTransfer.files
@@ -74,7 +101,6 @@ label {
   justify-content: center;
   text-align: center;
   padding: var(--spacing-card-sm) var(--spacing-card-md);
-  margin-bottom: var(--spacing-card-sm);
 }
 
 span {
@@ -95,4 +121,17 @@ span {
 input {
   display: none;
 }
+
+.known-error label {
+  border-color: var(--color-badge-red-bg) !important;
+  background-color: var(--color-warning-bg) !important;
+
+  span {
+    border-color: var(--color-badge-red-bg);
+  }
+
+  &::placeholder {
+    color: var(--color-warning-text);
+  }
+}
 </style>

components/ui/VersionFilterControl.vue

@@ -6,9 +6,8 @@
     <Multiselect
       v-if="getValidLoaders().length > 1"
       v-model="selectedLoader"
-      :options="
-        getValidLoaders().map((x) => x.charAt(0).toUpperCase() + x.slice(1))
-      "
+      :options="getValidLoaders()"
+      :custom-label="(value) => value.charAt(0).toUpperCase() + value.slice(1)"
       :multiple="false"
       :searchable="false"
       :show-no-results="false"
@@ -60,7 +59,7 @@
         updateVersionFilters()
       "
     >
-      <CrossIcon />
+      <ClearIcon />
       Clear filters
     </button>
   </div>
@@ -69,14 +68,14 @@
 <script>
 import Multiselect from 'vue-multiselect'
 import Checkbox from '~/components/ui/Checkbox'
-import CrossIcon from '~/assets/images/utils/x.svg?inline'
+import ClearIcon from '~/assets/images/utils/clear.svg?inline'
 
 export default {
   name: 'VersionFilterControl',
   components: {
     Multiselect,
     Checkbox,
-    CrossIcon,
+    ClearIcon,
   },
   props: {
     versions: {
@@ -123,9 +122,10 @@ export default {
         (projectVersion) =>
           (this.selectedGameVersions.length === 0 ||
             this.selectedGameVersions.some((gameVersion) =>
-              projectVersion.game_versions.includes(gameVersion.toLowerCase())
+              projectVersion.game_versions.includes(gameVersion)
             )) &&
-          projectVersion.loaders.includes(this.selectedLoader.toLowerCase())
+          (this.selectedLoader === null ||
+            projectVersion.loaders.includes(this.selectedLoader))
       )
       this.$emit('updateVersions', temp)
     },