Number input as Scale (#227)

* Number input as Scale

* scale input

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

resources/js/components/forms/ScaleInput.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :class="wrapperClass" :style="inputStyle">
+    <label v-if="label" :for="id?id:name"
+           :class="[theme.default.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
+    >
+      {{ label }}
+      <span v-if="required" class="text-red-500 required-dot">*</span>
+    </label>
+    <small v-if="help && helpPosition=='above_input'" :class="theme.default.help" class="flex mb-1">
+      <slot name="help"><span class="field-help" v-html="help" /></slot>
+    </small>
+
+    <div class="rectangle-outer grid grid-cols-5 gap-2">
+      <div v-for="i in scaleList" :key="i"
+           :class="[{'font-semibold':compVal===i},theme.ScaleInput.button, compVal!==i ? unselectedButtonClass: '']"
+           :style="btnStyle(i===compVal)"
+           role="button" @click="setScale(i)"
+      >
+        {{ i }}
+      </div>
+    </div>
+
+    <small v-if="help && helpPosition=='below_input'" :class="theme.default.help">
+      <slot name="help"><span class="field-help" v-html="help" /></slot>
+    </small>
+    <has-error v-if="hasValidation" :form="form" :field="name" />
+  </div>
+</template>
+
+<script>
+import inputMixin from '~/mixins/forms/input.js'
+
+export default {
+  name: 'ScaleInput',
+
+  mixins: [inputMixin],
+
+  props: {
+    minScale: { type: Number, default: 1 },
+    maxScale: { type: Number, default: 5 },
+    stepScale: { type: Number, default: 1 }
+  },
+
+  data () {
+    return {}
+  },
+
+  computed: {
+    scaleList () {
+      let list = []
+      for (let i = this.minScale; i <= this.maxScale; i += this.stepScale) {
+        list.push(i)
+      }
+      return list
+    },
+    unselectedButtonClass () {
+      return this.theme.ScaleInput.unselectedButton
+    },
+    textColor () {
+      const color = (this.color.charAt(0) === '#') ? this.color.substring(1, 7) : this.color
+      const r = parseInt(color.substring(0, 2), 16) // hexToR
+      const g = parseInt(color.substring(2, 4), 16) // hexToG
+      const b = parseInt(color.substring(4, 6), 16) // hexToB
+      const uicolors = [r / 255, g / 255, b / 255]
+      const c = uicolors.map((col) => {
+        if (col <= 0.03928) {
+          return col / 12.92
+        }
+        return Math.pow((col + 0.055) / 1.055, 2.4)
+      })
+      const L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2])
+      return (L > 0.55) ? '#000000' : '#FFFFFF'
+    }
+  },
+
+  mounted () {
+    if (this.compVal && typeof this.compVal === 'string'){
+      this.compVal = parseInt(this.compVal)
+    }
+  },
+
+  methods: {
+    btnStyle (isSelected) {
+      if (!isSelected) return {}
+      return {
+        color: this.textColor,
+        backgroundColor: this.color
+      }
+    },
+    setScale (val) {
+      if (this.disabled) {
+        return
+      }
+      if (this.compVal === val) {
+        this.compVal = null
+      } else {
+        this.compVal = val
+      }
+    }
+  }
+}
+</script>

resources/js/components/forms/index.js

@@ -15,6 +15,7 @@ import ImageInput from './ImageInput.vue'
 import RatingInput from './RatingInput.vue'
 import FlatSelectInput from './FlatSelectInput.vue'
 import ToggleSwitchInput from './ToggleSwitchInput.vue'
+import ScaleInput from './ScaleInput.vue'
 
 // Components that are registered globaly.
 [
@@ -32,7 +33,8 @@ import ToggleSwitchInput from './ToggleSwitchInput.vue'
   ImageInput,
   RatingInput,
   FlatSelectInput,
-  ToggleSwitchInput
+  ToggleSwitchInput,
+  ScaleInput
 ].forEach(Component => {
   Vue.component(Component.name, Component)
 })