@worksafevictoria/wcl7.5 1.1.0-beta.4 → 1.1.0-beta.40

package/src/components/Paragraphs/Webform/index.vue

@@ -2,7 +2,7 @@
   <div class="webform_para container-sm container-md container-lg container-xl">
     <div class="row">
       <div class="col-12 col-md-9">
-       <!--  <form-handler
+        <form-handler
           :formid="formid"
           :web-form-json="webFormJson"
           :content-api-url="contentApiUrl"
@@ -15,16 +15,19 @@
           @prevPage="() => $emit('prevPage')"
         />
         <i v-if="preview" class="fa fa-info-circle text-muted">
-          preview mode. submission logged to console
-        </i> -->
+          <span> preview mode. submission logged to console</span>
+        </i>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import FormHandler from '../../SubComponents/FormInstance/components/handler/index.vue'
+import colors from '../../../includes/scss/vars/src/colors.scss?inline'
+
 export default {
-  name: 'WebformPara'/* ,
+  name: 'WebformPara',
   components: { FormHandler },
   props: {
     formid: {
@@ -87,7 +90,7 @@ export default {
       }
       return styles
     }
-  } */
+  } 
 }
 </script>
 
@@ -96,8 +99,8 @@ export default {
   width: 100%;
   padding-top: 32px;
   padding-bottom: 64px;
-  // :deep() {
-    // @import './../../SubComponents/FormInstance/style.scss';
-  // }
+  :deep() {
+    @import './../../SubComponents/FormInstance/style.scss';
+  }
 }
 </style>

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

@@ -4,19 +4,11 @@ import mockData from './constants'
 export default {
   title: 'SubComponents/Breadcrumb',
   component: Breadcrumb,
-  argTypes: {
-    breadcrumbItems: {
-      control: 'array'
-    },
-    rtl: {
-      control: 'boolean'
-    }
-  }
-}
-
-export const Default = {
+  tags: ['autodocs'],
   args: {
     breadcrumbItems: mockData,
     rtl: false
   }
 }
+
+export const Default = {}

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

@@ -3,40 +3,11 @@ import CardGroup from './index.vue'
 export default {
   title: 'SubComponents/CardGroup',
   component: { CardGroup },
+  tags: ['autodocs'],
   argTypes: {
-    collectionTitle: {
-      control: 'text'
-    },
-    titleTag: {
-      control: 'text'
-    },
-    cards: {
-      type: 'number'
-    },
     background: {
       control: 'select',
       options: ['grey', 'yellow', 'white']
-    },
-    showImage: {
-      control: 'boolean'
-    },
-    link: {
-      control: 'text'
-    },
-    date: {
-      control: 'text'
-    },
-    location: {
-      control: 'text'
-    },
-    rtl: {
-      control: 'boolean'
-    },
-    columns: {
-      type: 'number'
-    },
-    emptyCardsText: {
-      control: 'text'
     }
   }
 }

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

@@ -4,6 +4,7 @@ import svg from './../../../assets/icons/instagram.svg?raw'
 export default {
   title: 'SubComponents/CTA',
   component: CtaButton,
+  tags: ['autodocs'],
   argTypes: {
     glyph: {
       control: ['object', 'text'],
@@ -13,30 +14,6 @@ export default {
       control: 'text',
       table: { disable: true }
     },
-    url: {
-      control: 'text'
-    },
-    isCentred: {
-      control: 'boolean'
-    },
-    rtl: {
-      control: 'boolean'
-    },
-    slim: {
-      control: 'boolean'
-    },
-    stretch: {
-      control: 'boolean'
-    },
-    textOnly: {
-      control: 'boolean'
-    },
-    workwell: {
-      control: 'boolean'
-    },
-    disabled: {
-      control: 'boolean'
-    },
     isFluid: {
       control: 'boolean',
       table: { disable: true }

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/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()
+}

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

@@ -0,0 +1,121 @@
+import { Formio } from '@formio/vue'
+import * as Vue from 'vue'
+import { getBaseVueFormIOComponent } from './base-formio'
+
+export const RangeVueComponent = {
+  methods: {
+    onInput(event) {
+      const value = Number(event?.target?.value)
+      if (!isNaN(value) && value > this.component.max) {
+        this.value = this.component.max
+        this.$forceUpdate()
+      } else if (!isNaN(value) && value < this.component.min) {
+        this.value = this.component.min
+        this.$forceUpdate()
+      }
+    }
+  },
+  mounted: function() {
+    this.value = this.instance.getValue()
+  },
+  data: () => ({
+    value: 0
+  }),
+  watch: {
+    value: function(value) {
+      this.instance.updateValue(value, {
+        modified: true
+      })
+    }
+  },
+  computed: {
+    getClasses() {
+      return {
+        [this.parentStyleClass]: true,
+        [this.parentStyleClass + '--disabled']: this.component.disabled
+      }
+    }
+  },
+  template: `
+    <fieldset :class="getClasses">
+      <span class="slider">
+        <span>{{component.min}}</span>
+        <input class=" form-range" type="range" :disabled="!!component.disabled" :id="component.id" v-model="value" :name="component.key" :step="component.step" :min="component.min" :max="component.max" /> 
+        <span>{{component.max}}</span>
+      </span>
+      <div class="spacer"></div>
+      <input class="manual form-control" type="number" :disabled="!!component.disabled" :id="component.id + 'number'" v-model="value" :name="component.key + 'number'" :step="component.step" :min="component.min" :max="component.max" @input="onInput" />
+    </fieldset>
+  `
+}
+
+const NumberComponent = Formio.Components.components.number
+
+export class RangeFormIOComponent extends NumberComponent {
+  getCustomVueComponent() {
+    return RangeVueComponent
+  }
+
+  attach(element) {
+    const parentStyleClass = this.component.customClass + '__numberContainer'
+    const styles = this.styling('.' + parentStyleClass)
+    const VueComponentClass = getBaseVueFormIOComponent(
+      this.getCustomVueComponent()
+    )
+    //const attachToElement = element.querySelector('input')
+    const attachToElement = element.querySelector('div')
+    attachToElement.innerHTML = ""
+    // new VueComponentClass({
+    //   propsData: {
+    //     component: this.component,
+    //     styles,
+    //     instance: this,
+    //     parentStyleClass
+    //   },
+    //   el: attachToElement
+    // })
+
+    let oProps ={
+      component: this.component,
+      styles,
+      instance: this,
+      parentStyleClass
+    }
+    
+    let vNode = Vue.createVNode(VueComponentClass, oProps); 
+    var oEl = Vue.render(vNode, attachToElement);
+    return super.attach(element)
+  }
+
+  styling(id) {
+    return `
+      ${id} {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+      }
+
+      @media only screen and (max-width: 500px) {
+        ${id} {
+          display: block;
+        }
+      }
+
+      ${id} > .slider {
+        grid-column: span 9;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+
+      ${id} > .spacer {
+        grid-column: span 1;
+      }
+
+      ${id} > .manual {
+        grid-column: span 2;
+      }
+
+      `.replace(/(?:\r\n|\r|\n)/g, '')
+  }
+}