web/satellite: VLoader, VModal, VList migrated to use composition api

VLIst component and tests deleted;
related tests moved to ignore folder;

Change-Id: Id65754a044cdc8adcd551a6f4e3c5df65b11ffa0

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

@@ -7,32 +7,24 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { computed } from 'vue';
 
 import LoaderImage from '@/../static/images/common/loader.svg';
 
-// @vue/component
-@Component({
-    components: {
-        LoaderImage,
-    },
-})
-export default class VLoader extends Vue {
-    @Prop({ default: 'unset' })
-    private readonly width: string;
-    @Prop({ default: 'unset' })
-    private readonly height: string;
-    @Prop({ default: false })
-    private readonly isWhite: boolean;
+const props = withDefaults(defineProps<{
+    width?: string;
+    height?: string;
+    isWhite?: boolean;
+}>(), {
+    width: 'unset',
+    height: 'unset',
+    isWhite: () => false,
+});
 
-    /**
-     * Returns loader's width and height from props.
-     */
-    public get style(): Record<string, unknown> {
-        return { width: this.width, height: this.height };
-    }
-}
+const style = computed((): Record<string, unknown> => {
+    return { width: props.width, height: props.height };
+});
 </script>
 
 <style scoped lang="scss">

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

@@ -14,33 +14,20 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
 
 import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
 
-// @vue/component
-@Component({
-    components: {
-        CloseCrossIcon,
-    },
-})
-export default class VModal extends Vue {
-    @Prop({ default: () => () => {} })
-    public readonly onClose: () => void;
+const props = withDefaults(defineProps<{
+    onClose?: () => void;
+}>(), { onClose: () => () => {} });
 
-    public $refs!: {
-        modal: HTMLDivElement,
-    };
+const modal = ref<HTMLElement>();
 
-    /**
-     * Mounted hook after initial render.
-     * Focus on root div to make modal closable by ESCAPE click.
-     */
-    public mounted(): void {
-        this.$refs.modal.focus();
-    }
-}
+onMounted((): void => {
+    modal.value?.focus();
+});
 </script>
 
 <style scoped lang="scss">