@3dwayfinder/wayfinder-vue-components 1.7.21 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3dwayfinder/wayfinder-vue-components",
-  "version": "1.7.21",
+  "version": "1.8.0",
   "description": "VueJS UI components for 3D Wayfinder floor plans",
   "main": "dist/wayfinder-vue-components.ssr.js",
   "browser": "dist/wayfinder-vue-components.esm.js",
@@ -23,9 +23,10 @@
   "dependencies": {
     "@3dwayfinder/scrollarea": "^1.0.10",
     "dayjs": "^1.11.10",
-    "on-screen-js-keyboard": "^1.4.0",
+    "on-screen-js-keyboard": "^1.4.1",
     "qrcode-svg": "^1.1.0",
     "vue-observe-visibility": "^1.0.0",
+    "vue-plugin-load-script": "^2.1.1",
     "vue2-touch-events": "^3.2.2",
     "vuex": "^3.6.2"
   },

package/src/lib-components/Date.vue

@@ -6,34 +6,71 @@
 
 <script>
 import dayjs from 'dayjs';
+import { mapState } from 'vuex';
 
+function loadScript(url, callback) {
+  var s = document.createElement('script');
+  s.type = 'text/javascript';
+  s.async = true;
+  
+  var x = document.getElementsByTagName('head')[0];
+  x.appendChild(s);
+  if (typeof callback == "function") {
+    s.onload = callback;
+    s.src = url;
+  }
+}
 
 export default {
     props: {
 		format: {type: String, default: "DD.MM" },
 	},
-    data() {
+    data () {
         return {
-            time: new Date()
+            time: new Date(),
+            locales: {}
         }
     },
     mounted() {
         setTimeout(this.addDate, 1000);
-        import('dayjs/locale/et').then(() => {
-            console.log('locale.loaded');
-            dayjs.locale("et");
-        })
+        if(typeof dayjs === "undefined") {
+            console.warn("WFDate dayjs is not loaded")
+        }
+        this.loadLocale(this.language);
     },
     computed: {
+        ...mapState('wf', ['language']),
         date() {
-            return dayjs().locale("et").format(this.format);
+            if (typeof dayjs !== "undefined") {
+                return dayjs(this.time).format(this.format);
+            }
+            else {
+                return this.time.toLocaleString(this.language, {"dateStyle": "long"});
+            }
+            
         },
     },
+    watch: {
+		language () {
+            this.time = new Date();
+			if (typeof dayjs !== "undefined") {
+                if(!this.locales[this.language]) {
+                    this.loadLocale(this.language);
+                }
+				dayjs.locale(this.language);
+			}
+		},
+    },
     methods: {
         addDate() {
-            console.log('addDate.locale', dayjs.locale());
-            this.time = dayjs().locale("et").format(this.format);
+            this.time = new Date();
             setTimeout(this.addDate, 60*1000);
+        },
+        loadLocale (locale) {
+            loadScript(this.$wayfinder.options.assetsLocation + "/dayjs/locale/" + locale + ".js", (a) => {
+                console.log('locale.loaded', a, locale, this.language)
+                this.locales[locale] = true;
+            });
         }
     }
 }

package/src/lib-components/ScrollableArea.vue

@@ -21,7 +21,7 @@ export default {
 	},
 	mounted () {
 		this.$nextTick(() => {
-            if (!this.scroll) {
+            if (!this.scroll && this.$refs.area) {
 			    this.scroll = new ScrollArea(this.$refs.area);
             }
 		});

package/src/lib-components/items/Translate.vue

@@ -0,0 +1,58 @@
+<template>
+  <label class="wf-translatable" :class="{'wf-translated': translated}" v-html="value">
+    <slot></slot>
+  </label>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+    name: "Translate",
+    props: {
+        k: {
+			type: String,
+			default: ""
+		},
+		params: {
+			type: Array,
+            default: () => []
+    	},
+    },
+    computed: {
+		...mapState('wf', ['language']),
+    },
+    data () {
+        return {
+			translated: false,
+            value: ""
+		}
+    },
+    watch: {
+		language () {
+			if (this.$wayfinder) {
+                this.update();
+			}
+		},
+        key () {
+			this.update();
+		},
+    },
+    mounted () {
+        this.update();
+    },
+    methods: {
+        update () {
+            if (this.$wayfinder && this.k && this.k.length > 0 && this.$wayfinder.translator.exists(this.k)) {
+                console.log('trans.update', this.k, this.params, this.$wayfinder.translator.get(this.k, this.params))
+                this.value = this.$wayfinder.translator.get(this.k, this.params);
+            }
+        } 
+    }
+    
+}
+</script>
+
+<style>
+
+</style>