test(ui): fixes default values not set TCTC-4635 (#1602)

* docs(storybook): fix vite import

* refactor(ui): convert FilterSimpleCondition to defineComponent

vue-class-component is not really active anymore
it has a problem with setting the default prop value

* refactor(ui): format and typing emit

* refactor(ui): forgot to migrate a watcher in FilterSimpleCondition

* refactor(ui): switch TabbedRangeCalendar to defineComponent

Same problem of default value

* refactor(ui): upgrade vue-property-decorator

Doesn't solve our pbs though

* build(ui): don't run prettier twice

It's already run by yarn format: ci, so we can speed up eslint

* chore(ui): v0.94.2

* revert(ui): keep same code than before in refactoring

ui/.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     browser: true,
     es6: true
   },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:import/recommended', 'plugin:import/typescript', 'plugin:vue/essential', '@vue/eslint-config-prettier', 'plugin:storybook/recommended', 'prettier'],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:import/recommended', 'plugin:import/typescript', 'plugin:vue/essential', 'plugin:storybook/recommended', 'prettier'],
   settings: {
     'import/internal-regex': '^@/',
     'import/resolver': {

ui/.storybook/main.ts

@@ -15,7 +15,7 @@ module.exports = {
     return mergeConfig(config, {
       // Use the same "resolve" configuration as your app
       // @ts-ignore
-      resolve: (await import('../vite.config.js')).default.default.resolve,
+      resolve: (await import('../vite.config.ts')).default.default.resolve,
     });
   },
 };

ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog (weaverbird npm package)
 
+## [0.94.2] - 2022-11-14
+
+### Fixed
+
+- Some components were not setting their prop default value
+
 ## [0.94.1] - 2022-11-10
 
 ### Fixed
@@ -1359,6 +1365,7 @@ TabbedRangeCalendars: keep selected tab unchanged when updated enabled calendars
 - Initial version, showtime!
 
 
+[0.94.2]: https://github.com/ToucanToco/weaverbird/compare/v0.94.2...v0.94.1
 [0.94.1]: https://github.com/ToucanToco/weaverbird/compare/v0.94.1...v0.94.0
 [0.94.0]: https://github.com/ToucanToco/weaverbird/compare/v0.94.0...v0.93.0
 [0.93.0]: https://github.com/ToucanToco/weaverbird/compare/v0.93.0...v0.92.0

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weaverbird",
-  "version": "0.94.1",
+  "version": "0.94.2",
   "types": "./dist/types/types.d.ts",
   "description": "A generic Visual Query Builder built in Vue.js",
   "bugs": {
@@ -77,7 +77,7 @@
     "vue-eslint-parser": "^9.1.0",
     "vue-loader": "^15.7.0",
     "vue-multiselect": "^2.1.6",
-    "vue-property-decorator": "^8.0.0",
+    "vue-property-decorator": "^9.1.2",
     "vue-test-utils": "^1.0.0-beta.11",
     "vue-tsc": "^1.0.9",
     "vuejs-paginate": "^2.1.0",

ui/sonar-project.properties

@@ -3,7 +3,7 @@ sonar.organization=toucantoco
 
 # This is the name and version displayed in the SonarCloud UI.
 # sonar.projectName=weaverbird UI
-sonar.projectVersion=0.94.1
+sonar.projectVersion=0.94.2
 
 # Path is relative to the sonar-project.properties file. Replace "\" by "/" on Windows.
 sonar.sources=./src

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">