Work for surveyjs/survey-creator#4435: implement loading indicator in…

… Vue3
surveyjs · Sep 5, 2023 · a1989b2 · a1989b2
1 parent 28fc3d6
commit a1989b2
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 28 deletions.
diff --git a/packages/survey-vue3-ui/src/File.vue b/packages/survey-vue3-ui/src/File.vue
@@ -34,33 +34,38 @@
       @dragenter="question.onDragEnter"
     >
       <div :class="question.getFileDecoratorCss()">
-        <span :class="question.cssClasses.dragAreaPlaceholder">{{
-          question.renderedPlaceholder
-        }}</span>
-        <div :class="question.cssClasses.wrapper">
-          <label
-            v-if="!question.isReadOnly"
-            role="button"
-            tabindex="0"
-            :class="question.getChooseFileCss()"
-            :for="question.inputId"
-            v-bind:aria-label="question.chooseButtonText"
-            v-key2click
-          >
-            <span>{{ question.chooseButtonText }}</span>
-            <sv-svg-icon
-              v-if="question.cssClasses.chooseFileIconId"
-              :title="question.chooseButtonText"
-              :iconName="question.cssClasses.chooseFileIconId"
-              :size="'auto'"
-            ></sv-svg-icon>
-          </label>
-          <span
-            :class="question.cssClasses.noFileChosen"
-            v-if="question.isEmpty()"
-            >{{ question.noFileChosenCaption }}</span
-          >
-        </div>
+        <sv-loading-indicator
+          v-if="question.showLoadingIndicator"
+        ></sv-loading-indicator>
+        <template v-if="question.showChooseButton">
+          <span :class="question.cssClasses.dragAreaPlaceholder">{{
+            question.renderedPlaceholder
+          }}</span>
+          <div :class="question.cssClasses.wrapper">
+            <label
+              v-if="!question.isReadOnly"
+              role="button"
+              tabindex="0"
+              :class="question.getChooseFileCss()"
+              :for="question.inputId"
+              v-bind:aria-label="question.chooseButtonText"
+              v-key2click
+            >
+              <span>{{ question.chooseButtonText }}</span>
+              <sv-svg-icon
+                v-if="question.cssClasses.chooseFileIconId"
+                :title="question.chooseButtonText"
+                :iconName="question.cssClasses.chooseFileIconId"
+                :size="'auto'"
+              ></sv-svg-icon>
+            </label>
+            <span
+              :class="question.cssClasses.noFileChosen"
+              v-if="question.isEmpty()"
+              >{{ question.noFileChosenCaption }}</span
+            >
+          </div>
+        </template>
       </div>
       <button
         type="button"
@@ -78,7 +83,7 @@
       </button>
       <div
         :class="question.cssClasses.fileList || undefined"
-        v-if="!question.isEmpty()"
+        v-if="question.allowShowPreview"
       >
         <span
           v-for="(val, index) in question.previewValue"

diff --git a/packages/survey-vue3-ui/src/components/LoadingIndicator.vue b/packages/survey-vue3-ui/src/components/LoadingIndicator.vue
@@ -0,0 +1,6 @@
+<template>
+  <div class="sd-loading-indicator">
+    <sv-svg-icon :iconName="'icon-loading'" size="'auto'"></sv-svg-icon>
+  </div>
+</template>
+<script setup lang="ts"></script>
diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
@@ -100,6 +100,7 @@ import CharacterCounterComponent from "./components/CharacterCounter.vue";
 import Composite from "./Composite.vue";
 import Custom from "./Custom.vue";
 import TimerPanel from "./TimerPanel.vue";
+import LoadingIndicator from "./components/LoadingIndicator.vue";
 
 import {
   doKey2ClickBlur,
@@ -222,6 +223,7 @@ function registerComponents(app: App) {
   app.component("survey-composite", Composite);
   app.component("survey-custom", Custom);
   app.component("sv-timerpanel", TimerPanel);
+  app.component("sv-loading-indicator", LoadingIndicator);
 
   app.directive("key2click", {
     // When the bound element is inserted into the DOM...