@worksafevictoria/wcl7.5 1.1.0-beta.9 → 1.1.0-beta.90

package/src/components/SubComponents/CtaButton/index.vue

@@ -75,77 +75,77 @@ export default {
   components: {
     arrowRight,
     arrowLeft,
-    icon
+    icon,
   },
   props: {
     type: {
       type: String,
       default: 'default',
       validator: (value) =>
-        ['default', 'white', 'gray', 'workwell', 'dark'].indexOf(value) >= 0
+        ['default', 'white', 'gray', 'workwell', 'dark'].indexOf(value) >= 0,
     },
     url: {
       type: String,
       required: false,
-      default: ''
+      default: '',
     },
     alt: {
       type: String,
-      default: ''
+      default: '',
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     glyph: {
       type: [Object, String],
       required: false,
-      default: () => null
+      default: () => null,
     },
     glyphHeight: {
       type: Number,
       required: false,
-      default: 15
+      default: 15,
     },
     glyphWidth: {
       type: Number,
       required: false,
-      default: 25
+      default: 25,
     },
     workwell: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isCentred: {
       type: Boolean,
-      default: false
+      default: false,
     },
     textOnly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isFluid: {
       type: Boolean,
-      default: true
+      default: true,
     },
     stretch: {
       type: Boolean,
-      default: false
+      default: false,
     },
     slim: {
       type: Boolean,
-      default: false
+      default: false,
     },
     focusOutline: {
       type: String,
       default: 'default',
-      validator: (value) => ['default', 'light', 'dark'].indexOf(value) >= 0
-    }
+      validator: (value) => ['default', 'light', 'dark'].indexOf(value) >= 0,
+    },
   },
   data() {
     return {
       arrowRight,
-      arrowLeft
+      arrowLeft,
     }
   },
   computed: {
@@ -188,12 +188,12 @@ export default {
       return this.isCentred
         ? { ['wcl-cta__arrow']: hasArrow }
         : {
-            ['wcl-cta__arrow']: hasArrow
+            ['wcl-cta__arrow']: hasArrow,
           }
     },
     textClass() {
       return this.isCentred ? {} : {}
-    }
+    },
   },
   methods: {
     clicked() {
@@ -201,15 +201,17 @@ export default {
       var attrs
       if (theEl && theEl.length > 0) {
         attrs = {
-          group: this.$store?.state?.page?.content?.title,
+          //group: this.$store?.state?.page?.content?.title,
+          group: this.$pageStore?.content?.title,
           label: theEl[0]?.innerText?.split('\n')[0],
-          data: this.url
+          data: this.url,
         }
       } else {
         attrs = {
-          group: this.$store?.state?.page?.content?.title,
+          //group: this.$store?.state?.page?.content?.title,
+          group: this.$pageStore?.content?.title,
           label: '',
-          data: this.url
+          data: this.url,
         }
       }
       // push event to gtm
@@ -225,8 +227,8 @@ export default {
         this.$router.push(this.url)
       }
       this.$emit('clicked')
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

package/src/components/SubComponents/FormAddressPostcode/index.stories.js

@@ -3,34 +3,7 @@ import FormAddressPostcode from './index.vue'
 export default {
   title: 'SubComponents/FormAddressPostcode',
   component: FormAddressPostcode,
-  argTypes: {
-    showShadow: {
-      control: 'boolean'
-    },
-    inputPlaceholder: {
-      control: 'text'
-    },
-    showFullAddress: {
-      control: 'boolean'
-    },
-    geocode: {
-      control: 'boolean'
-    },
-    reverseGeocode: {
-      control: 'boolean'
-    },
-    baseUrl: {
-      control: 'text'
-    },
-    inputClassName: {
-      control: 'text'
-    }
-  }
-}
-
-
-export const Default = {
-  
+  tags: ['autodocs'],
   args: {
     showShadow: false,
     inputPlaceholder: 'Search for a suburb or postcode',
@@ -41,3 +14,5 @@ export const Default = {
     inputClassName: 'class-name'
   }
 }
+
+export const Default = {}

package/src/components/SubComponents/FormAddressPostcode/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="suburb-postcode-search">
     <input
-      :id="`suburb-postcode-search-input-${_uid}`"
+      :id="`suburb-postcode-search-input-${$.uid}`"
       v-model="suburb.text"
       autocomplete="no"
       :placeholder="inputPlaceholder"
@@ -10,7 +10,7 @@
       aria-controls="sp-suggestions"
       :class="{
         'suburb-postcode-search--show-shadow': showShadow,
-        [inputClassName]: true
+        [inputClassName]: true,
       }"
       @keyup.prevent="searchSuburbPostcodeDebounce($event)"
     />
@@ -51,51 +51,51 @@ export default {
   props: {
     showShadow: {
       type: Boolean,
-      default: false
+      default: false,
     },
     inputPlaceholder: {
       type: String,
-      default: 'Search for a suburb or postcode'
+      default: 'Search for a suburb or postcode',
     },
     showFullAddress: {
       type: Boolean,
-      default: false
+      default: false,
     },
     geocode: {
       type: Boolean,
-      default: false
+      default: false,
     },
     reverseGeocode: {
       type: Boolean,
-      default: false
+      default: false,
     },
     baseUrl: {
       type: String,
-      default: ''
+      default: '',
     },
     inputClassName: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   },
   data() {
     return {
       suburb: {
         text: null,
         value: null,
-        location: null
+        location: null,
       },
       results: [],
       show: false,
       searchSuburbPostcodeDebounce: debounce(this.searchSuburbPostcode, 500, {
-        trailing: true
+        trailing: true,
       }),
       options: {
         enableHighAccuracy: true,
         timeout: 5000,
-        maximumAge: 0
+        maximumAge: 0,
       },
-      searchingAddress: false
+      searchingAddress: false,
     }
   },
   computed: {
@@ -105,7 +105,7 @@ export default {
     },
     isIE() {
       return window && navigator && this.detectBrowser(navigator) === 'IE'
-    }
+    },
   },
   watch: {
     suburb: {
@@ -115,8 +115,8 @@ export default {
         if (!this.suburb.location && this.suburb.text.length === 0) {
           this.$emit('cleared')
         }
-      }
-    }
+      },
+    },
   },
   methods: {
     detectBrowser,
@@ -145,10 +145,9 @@ export default {
 
       try {
         const response = await (this?.$axios || axios).get(
-          `${this.baseUrl ||
-            window.origin}/places/api/v1/place/autocomplete/json?${
-            this.queryString
-          }`
+          `${
+            this.baseUrl || window.origin
+          }/places/api/v1/place/autocomplete/json?${this.queryString}`,
         )
         const predictions = response?.data?.predictions || []
         if (
@@ -182,28 +181,28 @@ export default {
     },
     async getLatLng(address) {
       const geocodedAddress = await (this.$axios || axios).get(
-        `${this.baseUrl}/places/api/v1/geocode/json?address=${address}&components=country:au&sensor=false`
+        `${this.baseUrl}/places/api/v1/geocode/json?address=${address}&components=country:au&sensor=false`,
       )
       if (geocodedAddress.data?.results[0]) {
         return Promise.resolve(
-          geocodedAddress.data.results[0].geometry.location
+          geocodedAddress.data.results[0].geometry.location,
         )
       }
     },
     async searchAddressByLatLng(lat, lng) {
       const geocodedAddress = await (this.$axios || axios).get(
-        `${this.baseUrl}/places/api/v1/geocode/json?latlng=${lat},${lng}`
+        `${this.baseUrl}/places/api/v1/geocode/json?latlng=${lat},${lng}`,
       )
       if (geocodedAddress.data?.results[0]) {
         return Promise.resolve(
-          geocodedAddress.data.results[0].formatted_address
+          geocodedAddress.data.results[0].formatted_address,
         )
       }
     },
     async updateValue(v) {
       this.suburb = {
         text: v.description,
-        value: v.structured_formatting.main_text
+        value: v.structured_formatting.main_text,
       }
       if (this.geocode && this.suburb.value) {
         this.suburb.location = await this.getLatLng(this.suburb.value)
@@ -213,10 +212,8 @@ export default {
       // Next tick is too fast
       // have to wait for DOM to update
       let self = this
-      setTimeout(function() {
-        document
-          .getElementById(`suburb-postcode-search-input-${_uid}`)
-          .focus()
+      setTimeout(function () {
+        document.getElementById(`suburb-postcode-search-input-${$.uid}`).focus()
       }, 100)
     },
     focusPrevious(e) {
@@ -236,7 +233,7 @@ export default {
         return navigator.geolocation.getCurrentPosition(
           self.findAndUpdateAddress,
           self.errorFindingLocation,
-          self.options
+          self.options,
         )
       } else {
         return false
@@ -244,7 +241,7 @@ export default {
     },
     async findAndUpdateAddress(pos) {
       let {
-        coords: { latitude, longitude }
+        coords: { latitude, longitude },
       } = pos
       let foundAddress = await this.searchAddressByLatLng(latitude, longitude)
       this.suburb = {
@@ -252,16 +249,16 @@ export default {
         value: foundAddress,
         location: {
           lat: latitude,
-          lng: longitude
-        }
+          lng: longitude,
+        },
       }
       this.searchingAddress = false
       this.$emit('suburbChange', this.suburb)
     },
     errorFindingLocation(err) {
       console.warn(err)
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

package/src/components/SubComponents/FormInstance/components/alert/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <div
+    class="formalert alert"
+    :class="{
+      //'formalert--error': isError,
+      //'alert-danger': isError
+      //'alert-success': !isError
+    }"
+  >
+    <div><rich-text :content="message" /></div>
+    <div class="formalert__fields">
+      <div
+        v-for="({ label, error, elementClass }, index) in fields"
+        :key="index"
+        class="formalert__field"
+      >
+        <div class="formalert__fieldname" @click="goToError(elementClass)">
+          {{ label }}
+        </div>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div class="formalert__fieldmessage" v-html="error"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { RichText } from '../../../../../index'
+export default {
+  name: 'FormAlert',
+  components: {},
+  components: {
+    RichText
+  },
+  props: {
+    message: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    isError: {
+      type: Boolean,
+      required: true
+    },
+    fields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    processID: {
+      type: String,
+      required: true
+    },
+    sid: {
+      type: String,
+      default: ''
+    }
+  },
+  mounted() {
+    if (this.$gtm) {
+      if (this.isError) {
+        let attrs = {
+          group: document.title,
+          errors: [
+            {
+              errorId: 'ER8002',
+              errorDetail: 'Form Error',
+              errorMessage: this.message
+            }
+          ],
+          processId: this.processID
+        }
+        this.$gtm.push({ event: 'custom.form.error', ...attrs })
+      }
+      if (!this.isError) {
+        let attrs = {
+          group: document.title,
+          data: undefined,
+          category: 'Form Success',
+          label: 'complete',
+          targetElement: undefined,
+          processId: this.processID,
+          submissionId: this.sid
+        }
+        this.$gtm.push({ event: 'custom.form.progress.complete', ...attrs })
+      }
+    }
+  },
+  methods: {
+    goToError(elementClass) {
+      if (elementClass) {
+        const element = document.querySelector('.' + elementClass)
+        if (element) {
+          const errorClass = 'server-side-error'
+          element.classList.add(errorClass)
+          setTimeout(() => element.classList.remove(errorClass), 1000)
+          element.scrollIntoView({ behavior: 'smooth' })
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.formalert {
+  padding: 1%;
+  margin-bottom: 1%;
+  :deep(.wysiwyg) {
+    a.cta-button {
+      text-decoration: none;
+    }
+  }
+}
+
+.formalert--error {
+  .formalert__message {
+    padding-bottom: 1%;
+  }
+}
+
+.formalert__fieldname {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.formalert__field > div {
+  padding-left: 1%;
+}
+</style>

package/src/components/SubComponents/FormInstance/components/custom/base-formio.js

@@ -0,0 +1,77 @@
+import * as Vue from 'vue'
+export const getBaseVueFormIOComponent = (vueOpts) => {
+  return Vue.createVNode({
+      extends: vueOpts,
+      props: {
+        component: {
+          type: Object,
+          default: () => {}
+        },
+        // eslint-disable-next-line vue/require-default-prop
+        instance: null,
+        styles: {
+          type: String,
+          default: ''
+        },
+        parentStyleClass: {
+          type: String,
+          default: ''
+        }
+      },
+      mounted() {
+        const created = createdMap[this.component['key']]
+        if (!!created) {
+          var css = document.createElement('style')
+          css.type = 'text/css'
+          css.setAttributeNode(document.createAttribute('scopped'))
+          css.appendChild(document.createTextNode(this.styles))
+          this.$el.appendChild(css)
+
+          if (vueOpts.mounted) {
+            vueOpts.mounted.apply(this)
+          }
+        }
+        createdMap[this.component['key']] = true
+      }
+    })
+}
+// export const getBaseVueFormIOComponent = (vueOpts) => {
+//   console.log("🚀 ~ getBaseVueFormIOComponent ~ vueOpts:", vueOpts)
+//   let smegga = Object.assign({
+//     ...vueOpts,
+//     props: {
+//       component: {
+//         type: Object,
+//         default: () => {}
+//       },
+//       // eslint-disable-next-line vue/require-default-prop
+//       instance: null,
+//       styles: {
+//         type: String,
+//         default: ''
+//       },
+//       parentStyleClass: {
+//         type: String,
+//         default: ''
+//       }
+//     },
+//     mounted() {
+//       const created = createdMap[this.component['key']]
+//       if (!!created) {
+//         var css = document.createElement('style')
+//         css.type = 'text/css'
+//         css.setAttributeNode(document.createAttribute('scopped'))
+//         css.appendChild(document.createTextNode(this.styles))
+//         this.$el.appendChild(css)
+
+//         if (vueOpts.mounted) {
+//           vueOpts.mounted.apply(this)
+//         }
+//       }
+//       createdMap[this.component['key']] = true
+//     }
+//   })
+//   console.log("🚀 ~ getBaseVueFormIOComponent ~ smegga:", smegga)
+//   return Vue.createVNode(smegga)
+// }
+const createdMap = {}

package/src/components/SubComponents/FormInstance/components/custom/code-formio.js

@@ -0,0 +1,35 @@
+// import { Formio } from 'vue-formio'
+import { Formio } from '@formio/vue'
+import { getBaseVueFormIOComponent } from './base-formio'
+
+export const CodeVueComponent = {
+  template: `
+    <div style="display:none" v-html="component.html">
+    </div>
+  `
+}
+
+const HtmlComponent = Formio.Components.components.htmlelement
+
+export class CodeFormIOComponent extends HtmlComponent {
+  getCustomVueComponent() {
+    return CodeVueComponent
+  }
+
+  attach(element) {
+    const VueComponentClass = getBaseVueFormIOComponent(
+      this.getCustomVueComponent()
+    )
+    const attachToElement = element.querySelector('*')
+    new VueComponentClass({
+      propsData: {
+        component: this.component,
+        styles: '',
+        instance: this,
+        parentStyleClass: ''
+      },
+      el: attachToElement
+    })
+    return super.attach(element)
+  }
+}

package/src/components/SubComponents/FormInstance/components/custom/custom-formio-registry.js

@@ -0,0 +1,30 @@
+// import { Formio, Templates } from 'vue-formio'
+import { Formio, Templates } from '@formio/vue'
+
+import { RatingFormIOComponent } from './rating-formio'
+import { ScaleFormIOComponent } from './scale-formio'
+import { RangeFormIOComponent } from './range-formio'
+import { CodeFormIOComponent } from './code-formio'
+import { TableSelectFormIOComponent } from './tableselect-formio'
+
+const overrideTemplates = () => {
+  Templates.current.wizardHeader.form = (ctx) => {
+    return `
+    <div class="wizard-header">
+      <div class="wizard-header__steps">Step ${ctx.currentPage + 1} of ${
+      ctx.panels.length
+    }</div>
+      <h2>${ctx.component.label}</h2>
+    </div>
+    `
+  }
+}
+
+export const registerCustomComponents = () => {
+  Formio.Components.addComponent('rating', RatingFormIOComponent)
+  Formio.Components.addComponent('scale', ScaleFormIOComponent)
+  Formio.Components.addComponent('range', RangeFormIOComponent)
+  Formio.Components.addComponent('code', CodeFormIOComponent)
+  Formio.Components.addComponent('tableselect', TableSelectFormIOComponent)
+  overrideTemplates()
+}