switch ft-instance-selector to composition api

FreeTubeApp · Nov 5, 2024 · 2dd1bba · 2dd1bba
1 parent 53e03c5
commit 2dd1bba
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 66 deletions.
diff --git a/...nstance-selector/ft-instance-selector.vue → ...FtInstanceSelector/FtInstanceSelector.vue b/...nstance-selector/ft-instance-selector.vue → ...FtInstanceSelector/FtInstanceSelector.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <ft-flex-box
+    <FtFlexBox
       class="settingsFlexStart460px"
     >
-      <ft-input
+      <FtInput
         :placeholder="placeholder"
         :show-action-button="false"
         :show-label="true"
@@ -12,8 +12,8 @@
         :tooltip="tooltip"
         @input="handleInstanceInput"
       />
-    </ft-flex-box>
-    <ft-flex-box>
+    </FtFlexBox>
+    <FtFlexBox>
       <div v-if="backendType === 'piped'">
         <a href="https://github.com/TeamPiped/Piped/wiki/Instances">
           {{ $t('Settings.General Settings.View all Piped instance information') }}
@@ -28,7 +28,7 @@
           {{ $t('Settings.General Settings.View all Invidious instance information') }}
         </a>
       </div>
-    </ft-flex-box>
+    </FtFlexBox>
     <p
       v-if="defaultInstance !== ''"
       class="center"
@@ -49,17 +49,62 @@
         {{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
       </p>
     </template>
-    <ft-flex-box>
-      <ft-button
+    <FtFlexBox>
+      <FtButton
         :label="$t('Settings.General Settings.Set Current Instance as Default')"
         @click="setDefaultInstance"
       />
-      <ft-button
+      <FtButton
         :label="$t('Settings.General Settings.Clear Default Instance')"
         @click="clearDefaultInstance"
       />
-    </ft-flex-box>
+    </FtFlexBox>
   </div>
 </template>
 
-<script src="./ft-instance-selector"></script>
+<script setup>
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtInput from '../ft-input/ft-input.vue'
+import FtButton from '../ft-button/ft-button.vue'
+
+defineProps({
+  placeholder: {
+    type: String,
+    required: true
+  },
+  tooltip: {
+    type: String,
+    required: true
+  },
+  backendType: {
+    type: String,
+    required: true
+  },
+  currentInstance: {
+    type: String,
+    required: true
+  },
+  instanceList: {
+    type: Array,
+    required: true
+  },
+  defaultInstance: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(['clearDefaultInstance', 'input', 'setDefaultInstance'])
+
+function handleInstanceInput(inputData) {
+  emit('input', inputData)
+}
+
+function setDefaultInstance() {
+  emit('setDefaultInstance')
+}
+function clearDefaultInstance() {
+  emit('clearDefaultInstance')
+}
+
+</script>
diff --git a/src/renderer/components/ft-instance-selector/ft-instance-selector.js b/src/renderer/components/ft-instance-selector/ft-instance-selector.js
diff --git a/src/renderer/components/general-settings/general-settings.js b/src/renderer/components/general-settings/general-settings.js
@@ -3,7 +3,7 @@ import { mapActions, mapMutations } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
-import FtInstanceSelector from '../ft-instance-selector/ft-instance-selector.vue'
+import FtInstanceSelector from '../FtInstanceSelector/FtInstanceSelector.vue'
 
 import debounce from 'lodash.debounce'
 import allLocales from '../../../../static/locales/activeLocales.json'
@@ -16,7 +16,7 @@ export default defineComponent({
     'ft-settings-section': FtSettingsSection,
     'ft-select': FtSelect,
     'ft-toggle-switch': FtToggleSwitch,
-    'ft-instance-selector': FtInstanceSelector
+    FtInstanceSelector
   },
   data: function () {
     return {

diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
@@ -117,7 +117,7 @@
     <template
       v-if="backendPreference === 'piped'"
     >
-      <ft-instance-selector
+      <FtInstanceSelector
         :backend-type="'piped'"
         :placeholder="$t('Settings.General Settings.Current Piped Instance')"
         :tooltip="$t('Tooltips.General Settings.Piped Instance')"
@@ -135,7 +135,7 @@
     <template
       v-if="(backendFallback && fallbackPreference === 'invidious') || backendPreference == 'invidious'"
     >
-      <ft-instance-selector
+      <FtInstanceSelector
         :backend-type="'invidious'"
         :placeholder="$t('Settings.General Settings.Current Invidious Instance')"
         :tooltip="$t('Tooltips.General Settings.Invidious Instance')"
@@ -153,7 +153,7 @@
     <template
       v-if="backendFallback && fallbackPreference === 'piped'"
     >
-      <ft-instance-selector
+      <FtInstanceSelector
         :backend-type="'piped'"
         :placeholder="$t('Settings.General Settings.Current Piped Instance')"
         :tooltip="$t('Tooltips.General Settings.Piped Instance')"