Migrate ft-slider to the composition api (#6677)

* Migrate ft-slider to the composition api

* Fix web webpack config

* Use `useId`

* Use `$t`

* fix discrepancy

src/renderer/components/FtSlider/FtSlider.vue

@@ -0,0 +1,75 @@
+<template>
+  <label
+    class="pure-material-slider"
+    :for="id"
+  >
+    <input
+      :id="id"
+      v-model.number="currentValue"
+      :disabled="disabled"
+      type="range"
+      :min="minValue"
+      :max="maxValue"
+      :step="step"
+      @change="change"
+    >
+    <span>
+      {{ $t('Display Label', {label: label, value: displayLabel}) }}
+    </span>
+  </label>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useId } from '../../composables/use-id-polyfill.js'
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  defaultValue: {
+    type: Number,
+    required: true
+  },
+  minValue: {
+    type: Number,
+    required: true
+  },
+  maxValue: {
+    type: Number,
+    required: true
+  },
+  step: {
+    type: Number,
+    required: true
+  },
+  valueExtension: {
+    type: String,
+    default: null
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['change'])
+
+const id = useId()
+const currentValue = ref(props.defaultValue)
+
+const displayLabel = computed(() => {
+  if (props.valueExtension === null) {
+    return currentValue.value
+  } else {
+    return `${currentValue.value}${props.valueExtension}`
+  }
+})
+
+function change() {
+  emit('change', currentValue.value)
+}
+
+</script>
+<style scoped src="./FtSlider.css" />

src/renderer/components/ThemeSettings.vue

@@ -100,7 +100,7 @@ import { useI18n } from '../composables/use-i18n-polyfill'
 import FtSettingsSection from './FtSettingsSection/FtSettingsSection.vue'
 import FtSelect from './ft-select/ft-select.vue'
 import FtToggleSwitch from './ft-toggle-switch/ft-toggle-switch.vue'
-import FtSlider from './ft-slider/ft-slider.vue'
+import FtSlider from './FtSlider/FtSlider.vue'
 import FtFlexBox from './ft-flex-box/ft-flex-box.vue'
 import FtPrompt from './FtPrompt/FtPrompt.vue'
 

src/renderer/components/player-settings/player-settings.js

@@ -3,7 +3,7 @@ import { mapActions } from 'vuex'
 import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
-import FtSlider from '../ft-slider/ft-slider.vue'
+import FtSlider from '../FtSlider/FtSlider.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtButton from '../ft-button/ft-button.vue'
 import FtInput from '../ft-input/ft-input.vue'

src/renderer/components/subscription-settings/subscription-settings.js

@@ -2,7 +2,7 @@ import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
-import FtSlider from '../ft-slider/ft-slider.vue'
+import FtSlider from '../FtSlider/FtSlider.vue'
 
 export default defineComponent({
   name: 'SubscriptionSettings',