simplified the process of adding more search sites

src/App.vue

@@ -33,6 +33,12 @@ const successCallback = (data, element) => {
 
 export default {
   name: "mainApp",
+  inject: ["settings"],
+  provide() {
+    return {
+      search_sites: this.settings.search_sites,
+    };
+  },
   data() {
     return {
       display: { download: true, search: false },

src/components/mainForm.vue

@@ -43,7 +43,12 @@
           ></uploadFile>
         </div>
       </div>
-      <searchInput v-else @search="search" @optionSelected="optionCallback"></searchInput>
+      <searchInput
+        v-else
+        @search="search"
+        @optionSelected="optionCallback"
+        :selectOptions="searchOptions"
+      ></searchInput>
     </div>
   </form>
 </template>
@@ -55,6 +60,7 @@ import uploadFile from "./uploadFile";
 import { translate as t } from "@nextcloud/l10n";
 
 export default {
+  inject: ["settings", "search_sites"],
   data() {
     return {
       checkedValue: false,
@@ -64,6 +70,7 @@ export default {
       downloadType: "aria2",
       placeholder: t("ncdownloader", "Paste your http/magnet link here"),
       searchLabel: t("ncdownloader", "Search Torrents"),
+      searchOptions: this.search_sites ? this.search_sites : this.noOptions(),
     };
   },
   components: {
@@ -72,6 +79,7 @@ export default {
     searchInput,
     uploadFile,
   },
+  created() {},
   computed: {},
   methods: {
     whichType(type, event) {
@@ -105,10 +113,13 @@ export default {
     optionCallback(option) {
       if (option.label.toLowerCase() == "music") {
         this.searchLabel = t("ncdownloader", "Search Music");
-      }else{
+      } else {
         this.searchLabel = t("ncdownloader", "Search Torrents");
       }
     },
+    noOptions() {
+      return [{ name: "nooptions", label: "No Options" }];
+    },
   },
   mounted() {},
   name: "mainForm",

src/components/searchInput.vue

@@ -29,11 +29,6 @@ export default {
     return {
       placeholder: t("ncdownloader", "Enter keyword to search"),
       selected: "TPB",
-      selectOptions: [
-        { name: "TPB", label: "THEPIRATEBAY" },
-        { name: "bitSearch", label: "BITSEARCH" },
-        { name: "sliderkz", label: "MUSIC" },
-      ],
     };
   },
   components: {
@@ -53,7 +48,9 @@ export default {
     },
   },
   name: "searchInput",
-  props: [],
+  props: {
+    selectOptions: Object,
+  },
 };
 </script>
 <style scoped lang="scss">

src/index.js

@@ -21,22 +21,24 @@ window.addEventListener('DOMContentLoaded', function () {
     updatePage.run();
     buttonActions.run();
     let container = 'ncdownloader-form-wrapper';
-    const settingsID = "app-settings-content";
+    const dataContainerID = "app-settings-data";
     let app = createApp(App);
     let bar = createApp(settingsBar);
 
-    let values;
+    const dataContainer = document.getElementById(dataContainerID);
+    let values = {};
     try {
-        const barEle = document.getElementById(settingsID);
-        let settings = barEle.getAttribute("data-settings");
-        values = JSON.parse(settings);
+        let settings = dataContainer.getAttribute("data-settings");
+        let searchSites = dataContainer.getAttribute("data-search-sites");
+        values['settings'] = JSON.parse(settings);
+        values['search_sites'] = JSON.parse(searchSites);
     } catch (e) {
         values = {}
         console.log(e);
     }
-    bar.provide('settings', values);
-    bar.mount("#" + settingsID);
-
+    bar.provide('settings', values['settings']);
+    bar.mount("#" + "app-settings-content");
+    app.provide('settings', values);
     let vm = app.mount('#' + container);
     helper.addVue(vm.$options.name, vm);
 

src/settingsBar.vue

@@ -69,12 +69,6 @@ export default {
   components: {
     toggleButton,
   },
-  provide() {
-    return {
-      settings,
-    };
-  },
-
   mounted() {},
 };
 </script>