@live-change/vue3-components 0.1.12 → 0.1.16

package/form/CommandForm.vue

@@ -22,7 +22,8 @@
 </template>
 
 <script>
-  import DefinedForm from "./DefinedForm.vue"
+  import DefinedForm from './DefinedForm.vue'
+  import analytics from '../logic/analytics.js'
   import createDebug from 'debug'
   const debug = createDebug("live-change/command-form")
 
@@ -76,6 +77,7 @@
         type: String
       }
     },
+    emits: ['submit', 'done', 'error'],
     inject: ['loadingZone', 'workingZone'],
     data() {
       return {
@@ -91,15 +93,15 @@
       serviceDefinition() {
         if(this.serviceDefinitionSource) {
           if(typeof this.serviceDefinitionSource == 'string') {
-            const definition = this.$api.metadata.serviceDefinitions
+            const definition = this.$api.metadata.serviceDefinitions.value
                 .find(service => service.name == this.serviceDefinitionSource)
             return definition
           } else {
             return this.serviceDefinitionSource
           }
         }
-        if(!this.$api.metadata.api?.services) return
-        const definition = this.$api.metadata.api?.services.find(service => service.name == this.service)
+        if(!this.$api.metadata.api?.value?.services) return
+        const definition = this.$api.metadata.api?.value?.services.find(service => service.name == this.service)
         return definition
       },
       actionDefinition() {
@@ -193,26 +195,26 @@
         this.$refs.defined.scrollToError()
       },
       async submit(additionalParameters) {
-        if(!(this.state == 'ready' || this.state == 'error')) return;
+        if(!(this.state == 'ready' || this.state == 'error')) return
         this.state = 'working'
         this.workingTask = this.workingZone.started({ name: `service ${this.service} action ${this.action}` })
 
         this.clearValidation()
 
-        const _commandId = this.$api.guid()
+        const _commandId = this.$api.uid()
 
         const analyticsValue = this.$refs.defined.formRoot.getAnalyticsValue()
         const analyticsParameters =
             { ...analyticsValue, ...this.parameters, ...(additionalParameters || {}), _commandId }
 
-        if(this.$analytics && this.$analytics.form)
-          this.$analytics.form(this.service, this.action, analyticsParameters)
+        analytics.emit('form', { service: this.service, action: this.action, parameters: analyticsParameters })
 
         return this.validate({ parameters: {...this.parameters, ...additionalParameters} }).then(validationError => {
           debug("VALIDATION ERROR?", validationError)
           if(validationError) {
-            if(this.$analytics && this.$analytics.formError)
-              this.$analytics.formError(this.service, this.action, { analyticsParameters, error: validationError })
+            analytics.emit('formError', {
+              service: this.service, action: this.action, parameters: analyticsParameters, error: validationError
+            })
             this.workingZone.finished(this.workingTask)
             this.state = 'ready'
             this.scrollToError()
@@ -228,8 +230,9 @@
 
           return this.$api.request([this.service, this.action], parameters).then((result) => {
             debug("DATA SUBMITED")
-            if(this.$analytics && this.$analytics.formDone)
-              this.$analytics.formDone(this.service, this.action, analyticsParameters)
+            analytics.emit('formDone', {
+              service: this.service, action: this.action, parameters: analyticsParameters, error: validationError
+            })
             if(this.resetOnDone) {
               this.state = 'ready'
               this.reset()
@@ -241,8 +244,10 @@
             this.$emit('done', { result , parameters })
             this.workingZone.finished(this.workingTask)
           }).catch((error) => {
-            if(this.$analytics && this.$analytics.formError)
-              this.$analytics.formError(this.service, this.action, { analyticsParameters, error })
+            console.error("FORM ERROR", error)
+            analytics.emit('formError', {
+              service: this.service, action: this.action, parameters: analyticsParameters, error
+            })
             this.$refs.defined.formRoot.afterError(this.initialValues)
             if(error.properties) {
               for(let propName in error.properties) {
@@ -289,6 +294,7 @@
         })
       },
       handleSubmitEvent(ev) {
+        //console.log("HANDLE SUBMIT EVENT!", ev)
         ev.preventDefault()
         this.submit()
       },

package/form/DefinedForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <component v-if="tag" :is="tag" v-on:submit="ev => $emit('submit', ev)" :class="class" :style="style">
+  <component v-if="tag" :is="tag" v-on:submit="ev => handleSubmitEvent(ev)" :class="class" :style="style">
     <slot v-bind="{ data }"></slot>
   </component>
   <slot v-else v-bind="{ data }"></slot>
@@ -379,7 +379,7 @@
       },
       parameters: {
         type: Object,
-        default: null
+        default() { return {} }
       },
       class: {
         type: String
@@ -388,6 +388,7 @@
         type: String
       }
     },
+    //emits: ['submit', 'update'],
     provide() {
       return {
         form: {
@@ -407,7 +408,7 @@
           validate: () => this.validate(),
           clearFieldValidation: (propName) => this.clearFieldValidation(propName),
           clearValidation: () => this.clearValidation(),
-          
+
           addElementToArray: (propName, initialValue) => this.addElementToArray(propName, initialValue),
           removeElementFromArray: (propName, index) => this.removeElementFromArray(propName, index)
         }
@@ -519,6 +520,10 @@
         let position = getElementPositionInDocument(errorFieldElement)
         window.scrollTo(0, position.y - 100) /// TODO: remove fixed nav-bar and do it properly.
       },
+      handleSubmitEvent(ev) {
+        ev.preventDefault()
+        this.$emit('submit', ev)
+      }
     },
     created() {
       this.initForm()

package/index.js

@@ -8,6 +8,7 @@ import { registerViewComponents } from "./view"
 
 function registerComponents(app, settings = {}) {
   registerLogicComponents(app, settings)
+  console.log("reg", registerFormComponents)
   registerFormComponents(app, settings)
   registerViewComponents(app, settings)
 }
@@ -17,3 +18,7 @@ export { registerComponents }
 import createReactiveObject from "./utils/createReactiveObject.mjs"
 
 export { createReactiveObject }
+
+import { analytics, useAnalytics, installRouterAnalytics } from "./logic"
+export { analytics, useAnalytics, installRouterAnalytics }
+

package/logic/LoadingZone.vue

@@ -13,6 +13,7 @@
         <slot name="loading">
           Loading...
         </slot>
+        <div style="display: none">SUSPEND FALLBACK</div>
       </div>
     </template>
   </suspense>
@@ -30,6 +31,7 @@
 
 <script>
   import { onErrorCaptured, ref, reactive } from 'vue'
+  import analytics from './analytics.js'
   import debugLib from 'debug'
 
   const info = debugLib('loading:info')
@@ -37,6 +39,7 @@
 
   export default {
     name: "LoadingZone",
+    emits: ['isLoading', 'error'],
     props: {
       suspense: {
         type: Boolean,
@@ -60,24 +63,30 @@
         errors
       }
     },
+    watch: {
+      isLoading(l) {
+        this.$emit('isLoading', l)
+      }
+    },
     computed: {
+      isLoading() {
+        return this.loading.length > 0
+      }
     },
     methods: {
       loadingStarted(task) {
         if(this.loading.length == 0) {
-          if(this.$analytics && this.$analytics.loadingStarted)
-            this.$analytics.loadingStarted({ task: task.name })
+          analytics.emit('loadingStarted', { task: task.name })
           info('LOADING STARTED!')
 
           const loadingBlockId = this.loadingBlockId
-          this.loagindTimeout = setTimeout(() => {
+          this.loadingTimeout = setTimeout(() => {
             if(loadingBlockId == this.loadingBlockId && this.loading.length > 0) {
               this.connectionProblem = true
-              if(this.$analytics && this.$analytics.loadingError)
-                this.$analytics.loadingError({
-                  task: "View loading", reason: "connection problem",
-                  tasks: this.loading.map(t => t.name)
-                })
+              analytics.emit('loadingError', {
+                task: 'View loading', reason: "connection problem",
+                tasks: this.loading.map(t => t.name)
+              })
             }
           }, 4000)
         }
@@ -97,8 +106,7 @@
         if(this.loading.length == 0) {
           this.loadingBlockId++
           clearTimeout(this.loadingTimeout)
-          if(this.$analytics && this.$analytics.loadingDone)
-            this.$analytics.loadingDone({ task: task.name })
+          analytics.emit('loadingDone', { task: task.name })
           this.$nextTick(this.$router.loadingDone)
         }
       },
@@ -108,9 +116,7 @@
         clearTimeout(this.loadingTimeout)
 
         this.errors.push({ task, reason })
-        if(this.$analytics && this.$analytics.loadingError) {
-          this.$analytics.loadingError({ task: task.name, reason })
-        }
+        analytics.emit('loadingError', { task: task.name, reason })
         let id = this.loading.indexOf(task)
         if(id == -1) {
           this.errors.push({ task, reason: "unknown task "+task.name })
@@ -122,6 +128,7 @@
           this.$allLoadingTasks.splice(this.$allLoadingTasks.indexOf(task), 1)
         if(this.$allLoadingErrors)
           this.$allLoadingErrors.push({ task, reason })
+        this.$emit('error', this.errors)
       },
       addLoadingPromise(name, promise) {
         let task = this.loadingStarted({ name, promise })
@@ -133,7 +140,7 @@
         promise
           .then((result) => this.loadingFinished(task))
         return promise
-      }
+      },
     },
     provide() {
       return {

package/logic/WorkingZone.vue

@@ -1,5 +1,5 @@
-<template>    
-  <slot v-bind="{ isWorking: !!working.length, working, errors }"></slot>    
+<template>
+  <slot v-bind="{ isWorking: !!working.length, working, errors }"></slot>
   <slot name="working" v-if="working.length && !errors.length">
     Processing...
   </slot>
@@ -21,6 +21,7 @@
 
   export default {
     name: "WorkingZone",
+    emits: ['isWorking', 'error'],
     data() {
       return {
         working: [],
@@ -29,21 +30,28 @@
         connectionProblem: false
       }
     },
+    watch: {
+      isWorking(w) {
+        this.$emit('isWorking', w)
+      }
+    },
     computed: {
+      isWorking() {
+        return this.working.length > 0
+      }
     },
     methods: {
       workingStarted(task) {
         if(this.working.length == 0) {
-          if(this.$analytics && this.$analytics.workingStarted)
-            this.$analytics.workingStarted({ task: task.name })
+          analytics.emit('workingStarted', { task: task.name })
+
           info('WORKING STARTED!')
 
           const workingBlockId = this.workingBlockId
           this.loagindTimeout = setTimeout(() => {
             if(workingBlockId == this.workingBlockId && this.working.length > 0) {
               this.connectionProblem = true
-              if(this.$analytics && this.$analytics.workingError)
-              this.$analytics.workingError({
+              analytics.emit('workingError', {
                 task: "View working", reason: "connection problem",
                 tasks: this.working.map(t => t.name)
               })
@@ -66,8 +74,7 @@
         if(this.working.length == 0) {
           this.workingBlockId++
           clearTimeout(this.workingTimeout)
-          if(this.$analytics && this.$analytics.workingDone)
-            this.$analytics.workingDone({ task: task.name })
+          analytics.emit('workingDone', { task: task.name })
           this.$nextTick(this.$router.workingDone)
         }
       },
@@ -77,8 +84,7 @@
         clearTimeout(this.workingTimeout)
 
         this.errors.push({ task, reason })
-        if(this.$analytics && this.$analytics.workingError)
-          this.$analytics.workingError({ task: task.name, reason })
+        analytics.emit('workingError', { task: task.name, reason })
 
         let id = this.working.indexOf(task)
         if(id == -1) {
@@ -91,6 +97,7 @@
           this.$allWorkingTasks.splice(this.$allWorkingTasks.indexOf(task), 1)
         if(this.$allWorkingErrors)
           this.$allWorkingErrors.push({ task, reason })
+        this.$emit('error', this.errors)
       },
       addWorkingPromise(name, promise) {
         let task = this.workingStarted({ name, promise })

package/logic/analytics.js

@@ -0,0 +1,16 @@
+import mitt from "mitt"
+
+const analytics = mitt()
+
+function useAnalytics() {
+  return analytics
+}
+
+function installRouterAnalytics(router) {
+  router.afterEach((to, from) => {
+    analytics.emit('pageView', { ...to })
+  })
+}
+
+export { analytics, useAnalytics, installRouterAnalytics }
+export default analytics

package/logic/index.js

@@ -5,6 +5,9 @@ import Observe from "./Observe.vue"
 
 export { Loading, LoadingZone, WorkingZone, Observe }
 
+import { analytics, useAnalytics, installRouterAnalytics } from "./analytics.js"
+export { analytics, useAnalytics, installRouterAnalytics }
+
 function registerLogicComponents(app) {
   app.component("loading", Loading)
   app.component("loading-zone", LoadingZone)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/vue3-components",
-  "version": "0.1.12",
+  "version": "0.1.16",
   "description": "Live Change Framework - vue components",
   "main": "index.js",
   "scripts": {
@@ -22,6 +22,8 @@
   "homepage": "https://github.com/live-change/vue3-components",
   "dependencies": {
     "debug": "^4.3.2",
-    "vue": "^3.2.21"
+    "vue": "^3.2.21",
+    "@live-change/vue3-ssr": "^0.1.9",
+    "mitt": "3.0.0"
   }
 }