createVueComponent

spraakbanken · Oct 17, 2024 · a57a5e8 · a57a5e8
1 parent 7036339
commit a57a5e8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/app/scripts/components/results.ts b/app/scripts/components/results.ts
@@ -38,11 +38,10 @@ angular.module("korpApp").component("results", {
                     <uib-tab kwic-ctrl index="0" select="onentry()" deselect="onexit()">
                         <uib-tab-heading class="flex gap-2 items-center" ng-class="{loading: loading}">
                             KWIC
-                            <vue-component
+                            <tab-preloader
                                 ng-if="loading"
-                                name="TabPreloader"
                                 v-props="{progress: countCorpora() > 1 ? progress : undefined}"
-                            ></vue-component>
+                            ></tab-preloader>
                         </uib-tab-heading>
                         <div class="results-kwic" ng-class="{reading_mode : reading_mode, loading: loading}">
                             <korp-error ng-if="error"></korp-error>
@@ -76,11 +75,10 @@ angular.module("korpApp").component("results", {
                     >
                         <uib-tab-heading class="flex gap-2 items-center" ng-class="{loading: loading}">
                             {{'statistics' | loc:$root.lang}}
-                            <vue-component
+                            <tab-preloader
                                 ng-if="loading"
-                                name="TabPreloader"
                                 v-props="{progress: countCorpora() > 1 ? progress : undefined}"
-                            ></vue-component>
+                            ></tab-preloader>
                         </uib-tab-heading>
                         <korp-error ng-if="error"></korp-error>
                         <statistics
@@ -109,11 +107,10 @@ angular.module("korpApp").component("results", {
                     >
                         <uib-tab-heading class="flex gap-2 items-center" ng-class="{loading: loading}">
                             {{'word_picture' | loc:$root.lang}}
-                            <vue-component
+                            <tab-preloader
                                 ng-if="loading"
-                                name="TabPreloader"
                                 v-props="{progress: countCorpora() > 1 ? progress : undefined}"
-                            ></vue-component>
+                            ></tab-preloader>
                         </uib-tab-heading>
                         <div ng-if="!error">
                             <word-picture
@@ -134,7 +131,7 @@ angular.module("korpApp").component("results", {
                     <uib-tab example-ctrl ng-repeat="kwicTab in $root.kwicTabs" select="onentry()" deselect="onexit()">
                         <uib-tab-heading class="flex gap-2 items-center" ng-class="{loading: loading}">
                             KWIC
-                            <vue-component ng-if="loading" name="TabPreloader"></vue-component>
+                            <tab-preloader ng-if="loading"></tab-preloader>
                             <i class="fa-solid fa-times-circle cursor-pointer" ng-click="closeTab($index, $event)"></i>
                         </uib-tab-heading>
                         <korp-error ng-if="error"></korp-error>
@@ -166,7 +163,7 @@ angular.module("korpApp").component("results", {
                     <uib-tab ng-repeat="data in $root.graphTabs" graph-ctrl>
                         <uib-tab-heading class="flex gap-2 items-center">
                             {{'graph' | loc:$root.lang}}
-                            <vue-component ng-if="loading" name="TabPreloader" v-props="{progress}"></vue-component>
+                            <tab-preloader ng-if="loading" v-props="{progress}"></tab-preloader>
                             <i class="fa-solid fa-times-circle cursor-pointer" ng-click="closeTab($index, $event)"></i>
                         </uib-tab-heading>
                         <trend-diagram
@@ -179,7 +176,7 @@ angular.module("korpApp").component("results", {
                     <uib-tab ng-repeat="promise in $root.compareTabs" compare-ctrl>
                         <uib-tab-heading class="compare_tab flex gap-2 items-center" ng-class="{loading : loading}">
                             {{'compare_vb' | loc:$root.lang}}
-                            <vue-component ng-if="loading" name="TabPreloader"></vue-component>
+                            <tab-preloader ng-if="loading"></tab-preloader>
                             <i class="fa-solid fa-times-circle cursor-pointer" ng-click="closeTab($index, $event)"></i>
                         </uib-tab-heading>
                         <div class="compare_result" ng-class="{loading : loading}">
@@ -222,7 +219,7 @@ angular.module("korpApp").component("results", {
                     <uib-tab ng-repeat="promise in $root.mapTabs" map-ctrl select="onentry()">
                         <uib-tab-heading class="map_tab flex gap-2 items-center" ng-class="{loading : loading}">
                             {{ 'map' | loc:$root.lang}}
-                            <vue-component ng-if="loading" name="TabPreloader"></vue-component>
+                            <tab-preloader ng-if="loading"></tab-preloader>
                             <i class="fa-solid fa-times-circle cursor-pointer" ng-click="closeTab($index, $event)"></i>
                         </uib-tab-heading>
                         <div class="map_result" ng-class="{loading : loading}">
@@ -275,7 +272,7 @@ angular.module("korpApp").component("results", {
                     >
                         <uib-tab-heading class="flex gap-2 items-center" ng-class="{loading : loading}">
                             {{ 'text_tab_header' | loc:$root.lang}}
-                            <vue-component ng-if="loading" name="TabPreloader"></vue-component>
+                            <tab-preloader ng-if="loading"></tab-preloader>
                             <i class="fa-solid fa-times-circle cursor-pointer" ng-click="closeTab($index, $event)"></i>
                         </uib-tab-heading>
                         <div>

diff --git a/app/scripts/vue.ts b/app/scripts/vue.ts
@@ -2,4 +2,4 @@
 import angular from "angular"
 import TabPreloader from "@/components/TabPreloader.vue"
 
-angular.module("korpApp").value("TabPreloader", TabPreloader)
+angular.module("korpApp").directive("tabPreloader", (createVueComponent) => createVueComponent(TabPreloader))