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

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, '')
+  }
+}

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

@@ -0,0 +1,121 @@
+import { Formio } from '@formio/vue'
+import * as Vue from 'vue'
+import { generateUniqueId } from '../../models/form-utils'
+import { getBaseVueFormIOComponent } from './base-formio'
+
+export const RatingsVueComponent = {
+  methods: {
+    handleClick(value, values) {
+      if (!this.component.disabled) {
+        values.forEach((option) => {
+          option.checked = false
+          option.id = generateUniqueId()
+          option.checked =
+            value !== this.instance.getValue() ? option.value <= value : false
+        })
+        this.instance.updateValue(value, {
+          modified: true
+        })
+      }
+    }
+  },
+  computed: {
+    getClasses() {
+      return {
+        [this.parentStyleClass]: true,
+        [this.parentStyleClass + '--disabled']: this.component.disabled
+      }
+    }
+  },
+  created() {
+    const value = Number(this.instance.getValue())
+    if (!isNaN(value)) {
+      this.component.values.forEach((option) => {
+        option.id = generateUniqueId()
+        option.checked = option.value <= value
+      })
+    }
+  },
+  template: `
+    <fieldset>
+        <div v-for="(item) in component.values" :key="item.id" :class="getClasses">
+            <label :for="item.value" :title="item.value" @click="handleClick(item.value, component.values)" :class="{'checked': item.checked}"></label>
+        </div>
+    </fieldset>
+  `
+}
+
+const RadioComponent = Formio.Components.components.radio
+
+export class RatingFormIOComponent extends RadioComponent {
+  getCustomVueComponent() {
+    return RatingsVueComponent
+  }
+
+  attach(element) {
+    const parentStyleClass = this.component.customClass + '__optsContainer'
+    const styles = this.styling('.' + parentStyleClass)
+    const VueComponentClass = getBaseVueFormIOComponent(
+      this.getCustomVueComponent()
+    )
+    const attachToElement = element.querySelector('.form-radio')
+    attachToElement.innerHTML = ""
+
+    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} {
+        float:left;
+    }
+    
+    ${id} > label {
+        float:right;
+        padding:0 .1em;
+        overflow:hidden;
+        white-space:nowrap;
+        cursor:pointer;
+        font-size:200%;
+        line-height:1.2;
+        color:#ddd;
+    }
+    
+    ${id} > label:before {
+        content: '★ ';
+    }
+    
+    ${id} > label:hover,
+    ${id} > label.checked{
+        color: gold;
+    }
+    
+    
+    ${id} > label:active {
+        -webkit-touch-callout: none; /* iOS Safari */
+        -webkit-user-select: none; /* Safari */
+         -khtml-user-select: none; /* Konqueror HTML */
+           -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+                user-select: none; /* Non-prefixed version, currently
+                                      supported by Chrome, Edge, Opera and Firefox */
+    }
+
+    ${id}--disabled > label {
+        cursor: not-allowed !important
+    }
+
+      `.replace(/(?:\r\n|\r|\n)/g, '')
+  }
+}

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

@@ -0,0 +1,99 @@
+import { generateUniqueId } from '../../models/form-utils'
+import { RatingFormIOComponent } from './rating-formio'
+
+const ScaleVueComponent = {
+  methods: {
+    handleClick(value, skipUpdate) {
+      const currentValue = Number(this.instance.getValue())
+      if (!this.component.disabled) {
+        this.component.values.forEach((option) => {
+          option.checked = false
+          option.id = generateUniqueId()
+          option.checked =
+            value === option.value && currentValue !== option.value
+        })
+        if (!skipUpdate) {
+          this.instance.updateValue(value, {
+            modified: true
+          })
+        }
+      }
+    }
+  },
+  computed: {
+    getClasses() {
+      return {
+        [this.parentStyleClass]: true,
+        [this.parentStyleClass + '--disabled']: this.component.disabled
+      }
+    }
+  },
+  created() {
+    const value = Number(this.instance.getValue())
+    if (!isNaN(value)) {
+      this.component.values.forEach((option) => {
+        option.id = generateUniqueId()
+        option.checked = value === option.value
+      })
+    }
+  },
+  template: `
+    <fieldset>
+      <div v-for="(item) in component.values" :key="item.id" :class="getClasses">
+          <label :for="item.value" :title="item.value" @click="handleClick(item.value)" :class="{'checked': item.checked}">{{ item.value }}</label>
+      </div>
+    </fieldset>
+  `
+}
+
+export class ScaleFormIOComponent extends RatingFormIOComponent {
+  getCustomVueComponent() {
+    return ScaleVueComponent
+  }
+
+  styling(id) {
+    return `
+    ${id} {
+      float:left;
+      margin-right: 5px;
+    }
+
+    ${id}:last-child{
+      margin-right: 0px;
+    }
+
+
+    ${id} > label {
+      display: inline-block;
+      width: 36px;
+      height: 36px;
+      line-height: 32px;
+      text-align: center;
+      color: #666;
+      border: 3px solid #ccc;
+      border-radius: 50%;
+      cursor: pointer
+    }
+
+    ${id} > label:hover,
+    ${id} > label.checked {
+      border-color: #0074bd;
+    }
+
+    ${id}--disabled > label {
+      cursor: not-allowed !important;
+      border-color: #ccc !important;
+    }
+
+    ${id} {
+        -webkit-touch-callout: none; /* iOS Safari */
+        -webkit-user-select: none; /* Safari */
+        -khtml-user-select: none; /* Konqueror HTML */
+          -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+                user-select: none; /* Non-prefixed version, currently
+                                      supported by Chrome, Edge, Opera and Firefox */
+    }
+      `.replace(/(?:\r\n|\r|\n)/g, '')
+  }
+}

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

@@ -0,0 +1,200 @@
+// import { Formio } from 'vue-formio'
+import { Formio } from '@formio/vue'
+import * as Vue from 'vue'
+import { generateUniqueId } from '../../models/form-utils'
+import { getBaseVueFormIOComponent } from './base-formio'
+
+export const TableSelectVueComponent = {
+  methods: {
+    handleClick(value, values) {
+      if (!this.component.disabled) {
+        const opt = values.find((option) => value === option.value)
+        opt.checked = !opt.checked
+
+        if (opt.checked) {
+          this.selections.push(value)
+        } else {
+          const optIndex = values.findIndex((option) => value === option.value)
+          if (optIndex > -1) {
+            this.selections.splice(optIndex, 1)
+          }
+        }
+
+        if (
+          opt.checked &&
+          this.component.numberOfSelections <
+            values.filter((option) => option.checked).length
+        ) {
+          const earliestSelected = this.selections.shift()
+          const earliestSelectedOpt = values.find(
+            (option) => earliestSelected === option.value
+          )
+          if (earliestSelectedOpt) {
+            earliestSelectedOpt.checked = false
+            earliestSelectedOpt.id = generateUniqueId()
+          }
+        }
+
+        const selections = values.filter((i) => i.checked).map((i) => i.value)
+        this.instance.updateValue(
+          { value: selections },
+          {
+            modified: true
+          }
+        )
+      }
+    }
+  },
+  computed: {
+    getClasses() {
+      return {
+        [this.parentStyleClass]: true,
+        [this.parentStyleClass + '--disabled']: this.component.disabled
+      }
+    }
+  },
+  created() {
+    const selections = this.instance.getValue()
+    if (
+      typeof selections === 'object' &&
+      Array.isArray(selections.value) &&
+      selections.value.length > 0
+    ) {
+      this.selections = []
+      this.component.values.forEach((opt) => {
+        opt.checked = selections.value.includes(opt.value)
+        opt.id = generateUniqueId()
+        if (opt.checked) {
+          this.selections.push(opt.value)
+        }
+      })
+    } else {
+      this.selections = []
+    }
+  },
+  template: `
+    <fieldset>
+        <div v-for="(item) in component.values" :key="item.id" :class="getClasses">
+            <label :for="item.value" :title="item.value" @click="handleClick(item.value, component.values)">
+              <span>{{item.label}}</span>
+              <input type="checkbox" :checked="item.checked" :disabled="component.disabled" /> 
+            </label>
+           
+        </div>
+    </fieldset>
+  `
+}
+
+const RadioComponent = Formio.Components.components.radio
+
+export class TableSelectFormIOComponent extends RadioComponent {
+  getCustomVueComponent() {
+    return TableSelectVueComponent
+  }
+
+  attach(element) {
+    console.log("🚀 ~ TableSelectFormIOComponent ~ attach ~ element:", element)
+    const parentStyleClass = this.component.customClass + '__optsContainer'
+    const styles = this.styling('.' + parentStyleClass)
+    const VueComponentClass = getBaseVueFormIOComponent(
+      this.getCustomVueComponent()
+    )
+    const attachToElement = element.querySelector('.form-radio')
+    attachToElement.innerHTML = ""
+
+    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} {
+        user-select: none;
+      }
+
+      ${id} label {
+        display: block;
+        font-size: 1rem;
+        line-height: 1.65;
+        border-bottom: solid #e7e7e7 2px;
+        padding: 1rem 0;
+      }
+
+      ${id} span {
+      }
+
+
+      ${id} input {
+        -webkit-appearance: none;
+        -webkit-tap-highlight-color: transparent;
+        position: relative;
+        border: 0;
+        outline: 0;
+        cursor: pointer;
+        float: right;
+        box-shadow: none;
+      }
+
+      ${id} input:after {
+        content: '';
+        width: 60px;
+        height: 28px;
+        display: inline-block;
+        background: rgba(196, 195, 195, 0.55);
+        border-radius: 18px;
+        clear: both;
+      }
+
+
+      ${id} input:before {
+        content: '';
+        width: 32px;
+        height: 32px;
+        display: block;
+        position: absolute;
+        left: 0;
+        top: -3px;
+        border-radius: 50%;
+        background: rgb(255, 255, 255);
+        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
+      }
+
+      ${id} table td:nth-child(2) {
+        width: 40px;
+      }
+
+      
+      ${id} input:checked:before {
+        left: 32px;
+        box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
+      }
+
+      ${id} input:checked:after {
+        background: #16a085;
+      }
+
+      ${id} input,
+      ${id} input:before,
+      ${id} input:after,
+      ${id} input:checked:before,
+      ${id} input:checked:after {
+        transition: ease .3s;
+        -webkit-transition: ease .3s;
+        -moz-transition: ease .3s;
+        -o-transition: ease .3s;
+      }
+
+      ${id}--disabled input {
+        cursor: not-allowed !important
+      }
+    `.replace(/(?:\r\n|\r|\n)/g, '')
+  }
+}