@sedoo/unidoo 0.1.16 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sedoo/unidoo",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "private": false,
   "scripts": {
     "build": "npm run build:unidoo && npm run build:auth",
@@ -24,7 +24,8 @@
     "keycloak-js": "^8.0.2",
     "ol": "^6.8.1",
     "v-tooltip": "^2.1.3",
-    "vue-axios": "3.2.4"
+    "vue-axios": "3.2.4",
+    "vue-custom-element": "^3.3.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.5.7",

package/src/components/UnidooAlert.vue

@@ -1,62 +1,126 @@
 <template>
-<span> 
-  <v-snackbar v-model="snackbar" :color="type" :timeout="timeout" :centered="position == 'centered'" :top="position == 'top'" :bottom="position == 'bottom'">
-      {{ message }}
-    <v-btn dark text @click="snackbar = false">{{closeButtonLabel}}</v-btn>
-  </v-snackbar>
+  <span>
+    <v-snackbar
+      v-model="snackbar"
+      :color="type"
+      :timeout="timeout"
+      :centered="position == 'centered'"
+      :top="position == 'top'"
+      :bottom="position == 'bottom'"
+    >
+      <v-container>
+        <v-row>
+          <v-progress-linear
+            absolute
+            top
+            rounded
+            rounded-bar
+            :value="progressValue"
+            :color="progressColor"
+          />
+        </v-row>
+        <v-row align="center">
+          {{ message }}
+          <v-spacer></v-spacer>
+          <v-btn dark text @click="snackbar = false">{{
+            closeButtonLabel
+          }}</v-btn>
+        </v-row>
+      </v-container>
+    </v-snackbar>
   </span>
 </template>
 
 <script>
-import Plugin from '../plugin.js'
+import Plugin from "../plugin.js";
 
 export default {
-  components: {
+  components: {},
+  computed: {
+    progressValue() {
+      return Math.floor(100 * (1 - this.currenttime / this.timeout));
+    },
+    progressColor() {
+      if (this.type == "success") {
+        return "#1B5E20";
+      }
+      if (this.type == "error") {
+        return "#D50000";
+      }
+      if (this.type == "warning") {
+        return "#E65100";
+      }
+      return "";
+    },
   },
-  data () {
+  data() {
     return {
       snackbar: false,
-      message: '',
-      type: '',
-      position: 'top',
+      message: "",
+      type: "",
+      position: "top",
       timeout: 4000,
-      closeButtonLabel: "Close"
-    }
+      currenttime: 0,
+      closeButtonLabel: "Close",
+    };
   },
+
+  watch: {
+    snackbar(value) {
+      this.computeProgression(value);
+    },
+  },
+
   methods: {
-    show (params) {
-      this.message = params.message
-      this.position = params.position ? params.position : this.position
-      this.timeout = params.timeout ? params.timeout : this.timeout
-      this.type = params.type ? params.type : this.type
-      this.closeButtonLabel = params.closeButtonLabel ? params.closeButtonLabel : this.closeButtonLabel
-      this.snackbar = true
+    show(params) {
+      this.currenttime = 0;
+      this.message = params.message;
+      this.position = params.position ? params.position : this.position;
+      this.timeout = params.timeout ? params.timeout : this.timeout;
+      this.type = params.type ? params.type : this.type;
+      this.closeButtonLabel = params.closeButtonLabel
+        ? params.closeButtonLabel
+        : this.closeButtonLabel;
+      this.snackbar = true;
     },
 
-    params (params) {
-      this.position = params.position ? params.position : this.position
-      this.timeout = params.timeout ? params.timeout : this.timeout
-      this.type = params.type ? params.type : this.type
-      this.closeButtonLabel = params.closeButtonLabel ? params.closeButtonLabel : this.closeButtonLabel
-    }
+    params(params) {
+      this.position = params.position ? params.position : this.position;
+      this.timeout = params.timeout ? params.timeout : this.timeout;
+      this.type = params.type ? params.type : this.type;
+      this.closeButtonLabel = params.closeButtonLabel
+        ? params.closeButtonLabel
+        : this.closeButtonLabel;
+    },
+
+    computeProgression(value) {
+      if (value == false) {
+        if (this.timer !== null) {
+          clearInterval(this.timer);
+        }
+      } else {
+        const self = this;
+        this.timer = setInterval(() => {
+          self.currenttime += 100;
+        }, 100);
+      }
+    },
   },
-  beforeMount () {
-    Plugin.EventBus.$on('unidoo-alert-show', params => {
-      this.show(params)
-    })
 
-    Plugin.EventBus.$on('unidoo-alert-params', params => {
-      this.params(params)
-    })
-  }
+  beforeMount() {
+    Plugin.EventBus.$on("unidoo-alert-show", (params) => {
+      this.show(params);
+    });
 
-}
+    Plugin.EventBus.$on("unidoo-alert-params", (params) => {
+      this.params(params);
+    });
+  },
+};
 </script>
 
 <style scoped>
-
 .v-snack:not(.v-snack--absolute) {
   z-index: 2000;
 }
-
 </style>