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/ConformanceRadioGroup.vue

@@ -50,90 +50,81 @@
     </div>
   </section>
 </template>
-<script>
+<script setup>
 import { storeToRefs } from 'pinia';
 import { useConformanceStore } from '@/stores/conformance';
+import emitter from '@/utils/emitter';
 
-export default {
-  setup() {
-    const conformanceStore = useConformanceStore();
-    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
+const conformanceStore = useConformanceStore();
+const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
 
-    return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo }
-  },
-  data() {
-    return {
-      ruleType: [
-        {id: 1, name: 'Have activity'},
-        {id: 2, name: 'Activity sequence'},
-        {id: 3, name: 'Activity duration'},
-        {id: 4, name: 'Processing time'},
-        {id: 5, name: 'Waiting time'},
-        {id: 6, name: 'Cycle time'},
-      ],
-      activitySequence: [
-        {id: 1, name: 'Start & End'},
-        {id: 2, name: 'Sequence'},
-      ],
-      mode: [
-        {id: 1, name: 'Directly follows'},
-        {id: 2, name: 'Eventually follows'},
-        {id: 3, name: 'Short loop(s)'},
-        {id: 4, name: 'Self loop(s)'},
-      ],
-      processScope: [
-        {id: 1, name: 'End to end'},
-        {id: 2, name: 'Partial'},
-      ],
-      actSeqMore: [
-        {id: 1, name: 'All'},
-        {id: 2, name: 'Start'},
-        {id: 3, name: 'End'},
-        {id: 4, name: 'Start & End'},
-      ],
-      actSeqFromTo: [
-        {id: 1, name: 'From'},
-        {id: 2, name: 'To'},
-        {id: 3, name: 'From & To'},
-      ]
-    }
-  },
-  methods: {
-    /**
-     * 切換 Rule Type 的選項時的行為
-     */
-    changeRadio() {
-      this.selectedActivitySequence = 'Start & End';
-      this.selectedMode = 'Directly follows';
-      this.selectedProcessScope = 'End to end';
-      this.selectedActSeqMore = 'All';
-      this.selectedActSeqFromTo = 'From';
-      this.$emitter.emit('isRadioChange', true); // Radio 切換時，資料要清空
-    },
-    /**
-     * 切換 Activity sequence 的選項時的行為
-     */
-    changeRadioSeq() {
-      this.$emitter.emit('isRadioSeqChange',true);
-    },
-    /**
-     * 切換 Processing time 的選項時的行為
-     */
-    changeRadioProcessScope() {
-      this.$emitter.emit('isRadioProcessScopeChange', true);
-    },
-    /**
-     * 切換 Process Scope 的選項時的行為
-     */
-    changeRadioActSeqMore() {
-      this.$emitter.emit('isRadioActSeqMoreChange', true);
-    },
-    /**
-     * 切換 Activity Sequence 的選項時的行為
-     */
-    changeRadioActSeqFromTo() {
-      this.$emitter.emit('isRadioActSeqFromToChange', true);
-    },
-  }
+const ruleType = [
+  {id: 1, name: 'Have activity'},
+  {id: 2, name: 'Activity sequence'},
+  {id: 3, name: 'Activity duration'},
+  {id: 4, name: 'Processing time'},
+  {id: 5, name: 'Waiting time'},
+  {id: 6, name: 'Cycle time'},
+];
+const activitySequence = [
+  {id: 1, name: 'Start & End'},
+  {id: 2, name: 'Sequence'},
+];
+const mode = [
+  {id: 1, name: 'Directly follows'},
+  {id: 2, name: 'Eventually follows'},
+  {id: 3, name: 'Short loop(s)'},
+  {id: 4, name: 'Self loop(s)'},
+];
+const processScope = [
+  {id: 1, name: 'End to end'},
+  {id: 2, name: 'Partial'},
+];
+const actSeqMore = [
+  {id: 1, name: 'All'},
+  {id: 2, name: 'Start'},
+  {id: 3, name: 'End'},
+  {id: 4, name: 'Start & End'},
+];
+const actSeqFromTo = [
+  {id: 1, name: 'From'},
+  {id: 2, name: 'To'},
+  {id: 3, name: 'From & To'},
+];
+
+/**
+ * 切換 Rule Type 的選項時的行為
+ */
+function changeRadio() {
+  selectedActivitySequence.value = 'Start & End';
+  selectedMode.value = 'Directly follows';
+  selectedProcessScope.value = 'End to end';
+  selectedActSeqMore.value = 'All';
+  selectedActSeqFromTo.value = 'From';
+  emitter.emit('isRadioChange', true); // Radio 切換時，資料要清空
+}
+/**
+ * 切換 Activity sequence 的選項時的行為
+ */
+function changeRadioSeq() {
+  emitter.emit('isRadioSeqChange',true);
+}
+/**
+ * 切換 Processing time 的選項時的行為
+ */
+function changeRadioProcessScope() {
+  emitter.emit('isRadioProcessScopeChange', true);
+}
+/**
+ * 切換 Process Scope 的選項時的行為
+ */
+function changeRadioActSeqMore() {
+  emitter.emit('isRadioActSeqMoreChange', true);
+}
+/**
+ * 切換 Activity Sequence 的選項時的行為
+ */
+function changeRadioActSeqFromTo() {
+  emitter.emit('isRadioActSeqFromToChange', true);
 }
 </script>