web/satellite: VPagination, VHeader, VSearch migration to use composi…

…tion api

fixed issue with required props that were not passed to component;
added default props;
related test added to ignored folder till vue 3 version update with vue-cli-service;

Change-Id: Idc95a4c0b9f124797519652004abf53e066605c2

web/satellite/jest.config.js

@@ -10,4 +10,5 @@ module.exports = {
     transform: {
         '^.+\\.svg$': '<rootDir>/tests/unit/mock/svgTransform.js',
     },
+    modulePathIgnorePatterns: ['<rootDir>/tests/unit/ignore'],
 };

web/satellite/src/components/common/PagesBlock.vue

@@ -13,19 +13,15 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
+<script setup lang="ts">
 import { CheckSelected, Page } from '@/types/pagination';
 
-// @vue/component
-@Component
-export default class PagesBlock extends Vue {
-    @Prop({ default: () => [] })
-    public readonly pages: Page[];
-    @Prop({ default: () => () => {} })
-    public readonly isSelected: CheckSelected;
-}
+const props = withDefaults(defineProps<{
+    isSelected: CheckSelected;
+    pages: Page[];
+}>(), {
+    pages: () => [],
+});
 </script>
 
 <style scoped lang="scss">

web/satellite/src/components/common/VHeader.vue

@@ -8,54 +8,45 @@
         </div>
         <div v-if="styleType === 'common'" class="search-container">
             <VSearch
-                ref="search"
+                ref="searchInput"
                 :placeholder="placeholder"
                 :search="search"
             />
         </div>
         <div v-if="styleType === 'access'">
             <VSearchAlternateStyling
-                ref="search"
+                ref="searchInput"
                 :placeholder="placeholder"
                 :search="search"
             />
         </div>
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { ref } from 'vue';
 
 import VSearch from '@/components/common/VSearch.vue';
 import VSearchAlternateStyling from '@/components/common/VSearchAlternateStyling.vue';
 
-declare type searchCallback = (search: string) => Promise<void>;
+type searchCallback = (search: string) => Promise<void>;
 
-// @vue/component
-@Component({
-    components: {
-        VSearch,
-        VSearchAlternateStyling,
-    },
-})
-export default class VHeader extends Vue {
-    @Prop({ default: 'common' })
-    private readonly styleType: string;
-    @Prop({ default: '' })
-    private readonly placeholder: string;
-    @Prop({ default: function(): searchCallback {
-        return async function(_: string) {};
-    } })
-    private readonly search: searchCallback;
+const props = withDefaults(defineProps<{
+    placeholder: string;
+    search: searchCallback;
+    styleType?: string;
+}>(), {
+    placeholder: '',
+    styleType: 'common',
+});
 
-    public $refs!: {
-        search: VSearch;
-    };
+const searchInput = ref<{ clearSearch: () => void }>();
 
-    public clearSearch(): void {
-        this.$refs.search.clearSearch();
-    }
+function clearSearch(): void {
+    searchInput.value?.clearSearch();
 }
+
+defineExpose({ clearSearch });
 </script>
 
 <style scoped lang="scss">