Migrate all Vue components from Options API to <script setup>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue

@@ -9,97 +9,78 @@
     </Durationjs>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, watch } from 'vue';
 import Durationjs from '@/components/durationjs.vue';
 
-export default {
-  props: ['time', 'select'],
-  data() {
-    return {
-      timeData: {
-        min: 0,
-        max: 0,
-      },
-      timeRangeMin: 0,
-      timeRangeMax: 0,
-      minVuemin: 0,
-      minVuemax: 0,
-      maxVuemin: 0,
-      maxVuemax: 0,
-      updateMax: null,
-      updateMin: null,
-      durationMin: null,
-      durationMax: null,
-    }
-  },
-  components: {
-    Durationjs,
-  },
-  watch: {
-    time: {
-      handler: function(newValue, oldValue) {
-        this.durationMax = null
-        this.durationMin = null
-        if(newValue === null) {
-          this.timeData = {
-            min: 0,
-            max: 0
-          };
-        }else if(newValue !== null) {
-          this.timeData = {
-            min: newValue.min,
-            max: newValue.max
-          };
-          this.$emit('min-total-seconds', newValue.min);
-          this.$emit('max-total-seconds', newValue.max);
-        }
-        this.setTimeValue();
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  methods: {
-    /**
-     * set props values
-     */
-    setTimeValue() {
-      // 深拷貝原始 timeData 的內容
-      this.minVuemin = JSON.parse(JSON.stringify(this.timeData.min));
-      this.minVuemax = JSON.parse(JSON.stringify(this.timeData.max));
-      this.maxVuemin = JSON.parse(JSON.stringify(this.timeData.min));
-      this.maxVuemax = JSON.parse(JSON.stringify(this.timeData.max));
-    },
-    /**
-     * get min total seconds
-     * @param {Number} e 元件傳來的最小值總秒數
-     */
-     minTotalSeconds(e) {
-      this.timeRangeMin = e;
-      this.updateMin = e;
-      this.$emit('min-total-seconds', e);
-    },
-    /**
-     * get min total seconds
-     * @param {Number} e 元件傳來的最大值總秒數
-     */
-    maxTotalSeconds(e) {
-      this.timeRangeMax = e;
-      this.updateMax = e;
-      this.$emit('max-total-seconds', e);
-    },
-  },
-  created() {
-    if(this.select){
-      if(Object.keys(this.select.base).length !== 0) {
-        this.timeData = this.select.base;
-        this.setTimeValue();
-      }
-      if(Object.keys(this.select.rule).length !== 0) {
-        this.durationMin = this.select.rule.min;
-        this.durationMax = this.select.rule.max;
-      }
-    }
+const props = defineProps(['time', 'select']);
+const emit = defineEmits(['min-total-seconds', 'max-total-seconds']);
+
+const timeData = ref({ min: 0, max: 0 });
+const timeRangeMin = ref(0);
+const timeRangeMax = ref(0);
+const minVuemin = ref(0);
+const minVuemax = ref(0);
+const maxVuemin = ref(0);
+const maxVuemax = ref(0);
+const updateMax = ref(null);
+const updateMin = ref(null);
+const durationMin = ref(null);
+const durationMax = ref(null);
+
+/**
+ * set props values
+ */
+function setTimeValue() {
+  // 深拷貝原始 timeData 的內容
+  minVuemin.value = JSON.parse(JSON.stringify(timeData.value.min));
+  minVuemax.value = JSON.parse(JSON.stringify(timeData.value.max));
+  maxVuemin.value = JSON.parse(JSON.stringify(timeData.value.min));
+  maxVuemax.value = JSON.parse(JSON.stringify(timeData.value.max));
+}
+
+/**
+ * get min total seconds
+ * @param {Number} e 元件傳來的最小值總秒數
+ */
+function minTotalSeconds(e) {
+  timeRangeMin.value = e;
+  updateMin.value = e;
+  emit('min-total-seconds', e);
+}
+
+/**
+ * get min total seconds
+ * @param {Number} e 元件傳來的最大值總秒數
+ */
+function maxTotalSeconds(e) {
+  timeRangeMax.value = e;
+  updateMax.value = e;
+  emit('max-total-seconds', e);
+}
+
+watch(() => props.time, (newValue, oldValue) => {
+  durationMax.value = null;
+  durationMin.value = null;
+  if(newValue === null) {
+    timeData.value = { min: 0, max: 0 };
+  }else if(newValue !== null) {
+    timeData.value = { min: newValue.min, max: newValue.max };
+    emit('min-total-seconds', newValue.min);
+    emit('max-total-seconds', newValue.max);
+  }
+  setTimeValue();
+}, { deep: true, immediate: true });
+
+// created
+if(props.select){
+  if(Object.keys(props.select.base).length !== 0) {
+    timeData.value = props.select.base;
+    setTimeValue();
+  }
+  if(Object.keys(props.select.rule).length !== 0) {
+    durationMin.value = props.select.rule.min;
+    durationMax.value = props.select.rule.max;
   }
 }
 </script>