refactor(ui): switch TabbedRangeCalendar to defineComponent

Same problem of default value

ui/src/components/stepforms/widgets/DateComponents/TabbedRangeCalendars.vue

@@ -37,78 +37,109 @@ import Tabs from '@/components/Tabs.vue';
 import type { CustomDateRange, DateRange } from '@/lib/dates';
 import t from '@/lib/internationalization';
 import type { LocaleIdentifier } from '@/lib/internationalization';
+import { defineComponent, type PropType } from 'vue';
 
-@Component({
+export default defineComponent({
   name: 'tabbed-range-calendars',
+
   components: {
     Tabs,
     Calendar,
     CustomGranularityCalendar,
   },
-})
-export default class TabbedRangeCalendars extends Vue {
-  @Prop({ default: () => ({}) })
-  value!: CustomDateRange;
-
-  @Prop({ default: () => ({}) })
-  bounds!: DateRange;
 
-  @Prop({ default: () => ['year', 'quarter', 'month', 'week', 'day'] })
-  enabledCalendars!: string[];
+  props: {
+    value: {
+      type: Object as PropType<CustomDateRange>,
+      default: () => ({}),
+    },
+
+    bounds: {
+      type: Object as PropType<DateRange>,
+      default: () => ({}),
+    },
+
+    enabledCalendars: {
+      type: Array as PropType<string[]>,
+      default: () => ['year', 'quarter', 'month', 'week', 'day'],
+    },
+
+    locale: {
+      type: String as PropType<LocaleIdentifier>,
+    },
+
+    compactMode: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+  },
 
-  @Prop({ type: String, required: false })
-  locale?: LocaleIdentifier;
+  emits: {
+    input: (_val: CustomDateRange) => true,
+  },
 
-  @Prop({ default: false })
-  compactMode!: boolean;
+  data(): {
+    selectedTab: string;
+  } {
+    return {
+      selectedTab: this.enabledCalendars[0],
+    };
+  },
 
-  selectedTab = this.enabledCalendars[0];
+  computed: {
+    currentValue: {
+      get(): CustomDateRange {
+        return this.value;
+      },
+      set(value: CustomDateRange) {
+        this.$emit('input', value);
+      },
+    },
+
+    calendarGranularity(): string | undefined {
+      return this.selectedTab !== 'day' ? this.selectedTab : undefined;
+    },
+  },
 
   created() {
     this.updateTabForCurrentValue();
-  }
-
-  @Watch('enabledCalendars')
-  onEnabledCalendarsChange() {
-    if (
-      !this.enabledCalendars.includes(this.selectedTab) ||
-      (this.value.duration && !this.enabledCalendars.includes(this.value.duration))
-    ) {
-      this.selectedTab = this.enabledCalendars[0];
-    }
-  }
-
-  @Watch('value')
-  onValueChange() {
-    this.updateTabForCurrentValue();
-  }
-
-  get currentValue(): CustomDateRange {
-    return this.value;
-  }
-
-  set currentValue(value: CustomDateRange) {
-    this.$emit('input', value);
-  }
+  },
 
-  get calendarGranularity(): string | undefined {
-    return this.selectedTab !== 'day' ? this.selectedTab : undefined;
-  }
+  methods: {
+    updateTabForCurrentValue() {
+      if (this.value.duration && this.enabledCalendars.includes(this.value.duration)) {
+        this.selectTab(this.value.duration);
+      }
+    },
 
-  updateTabForCurrentValue() {
-    if (this.value.duration && this.enabledCalendars.includes(this.value.duration)) {
-      this.selectTab(this.value.duration);
-    }
-  }
+    selectTab(tab: string) {
+      this.selectedTab = tab;
+    },
 
-  selectTab(tab: string) {
-    this.selectedTab = tab;
-  }
+    translateTab(tab: string) {
+      return t(tab.toUpperCase(), this.locale);
+    },
+  },
 
-  translateTab(tab: string) {
-    return t(tab.toUpperCase(), this.locale);
-  }
-}
+  watch: {
+    enabledCalendars: {
+      handler: function onEnabledCalendarsChange() {
+        if (
+          !this.enabledCalendars.includes(this.selectedTab) ||
+          (this.value.duration && !this.enabledCalendars.includes(this.value.duration))
+        ) {
+          this.selectedTab = this.enabledCalendars[0];
+        }
+      },
+    },
+
+    value: {
+      handler: function onValueChange() {
+        this.updateTabForCurrentValue();
+      },
+    },
+  },
+});
 </script>
 
 <style scoped lang="scss">