🎨 Refactor computed properties and method bindings for improved readability and maintainability

code/websites/pokedex.online/src/components/gamemaster/FileSelector.vue

@@ -46,28 +46,26 @@ const props = defineProps({
 const internalFilesState = useGamemasterFiles(props.client);
 const activeFilesState = computed(() => props.filesState || internalFilesState);
 
-const {
+const selectedFile = computed(() => activeFilesState.value.selectedFile);
-  selectedFile,
+const fileContent = computed(() => activeFilesState.value.fileContent);
-  fileContent,
+const fileLines = computed(() => activeFilesState.value.fileLines);
-  fileLines,
+const uniqueFiles = computed(() => activeFilesState.value.uniqueFiles);
-  uniqueFiles,
+const isLoading = computed(() => activeFilesState.value.isLoading);
-  isLoading,
+const fileError = computed(() => activeFilesState.value.fileError);
-  fileError,
+
-  loadStatus,
+const formatSize = (...args) => activeFilesState.value.formatSize(...args);
-  formatSize,
+const formatFileName = (...args) => activeFilesState.value.formatFileName(...args);
-  formatFileName,
+const getFileType = (...args) => activeFilesState.value.getFileType(...args);
-  getFileType
-} = activeFilesState.value;
 
 const selectedFileMeta = computed(() => {
-  if (!selectedFile.value) return null;
+  if (!selectedFile.value.value) return null;
-  return uniqueFiles.value.find(
+  return uniqueFiles.value.value.find(
-    file => getFileType(file.filename) === selectedFile.value
+    file => getFileType(file.filename) === selectedFile.value.value
   );
 });
 
 onMounted(() => {
-  loadStatus();
+  activeFilesState.value.loadStatus();
 });
 </script>