input handler

Author: adamberecz

src/Toggle.vue

@@ -1,17 +1,22 @@
 <template>
- <div
- class="toggle-input"
- :class="{'is-active': isOn}"
- :style="cssVars"
- :id="id"
- @click="toggle"
- >
- <slot name="on">
- <span class="toggle-on" v-html="onLabel"></span>
- </slot>
- <slot name="off">
- <span class="toggle-off" v-html="offLabel"></span>
- </slot>
+ <div class="toggle-input" :style="cssVars">
+ <input
+ type="checkbox"
+ :name="name"
+ :id="id"
+ :checked="checked"
+ :trueValue="trueValue"
+ :falseValue="falseValue"
+ @input="handleInput"
+ />
+ <label :for="id">
+ <slot name="on">
+ <span class="toggle-on" v-html="onLabel"></span>
+ </slot>
+ <slot name="off">
+ <span class="toggle-off" v-html="offLabel"></span>
+ </slot>
+ </label>
  </div>
 </template>
 
@@ -48,6 +53,11 @@
  required: false,
  default: 'toggle'
  },
+ name: {
+ type: [String, Number],
+ required: false,
+ default: 'toggle'
+ },
  falseValue: {
  type: [String, Number, Boolean],
  required: false,
@@ -58,6 +68,16 @@
  required: false,
  default: true,
  },
+ offLabel: {
+ type: [String, Object],
+ required: false,
+ default: ''
+ },
+ onLabel: {
+ type: [String, Object],
+ required: false,
+ default: ''
+ },
  width: {
  type: Number,
  required: false,
@@ -73,16 +93,6 @@
  required: false,
  default: 300
  },
- offLabel: {
- type: [String, Object],
- required: false,
- default: ''
- },
- onLabel: {
- type: [String, Object],
- required: false,
- default: ''
- },
  offBackground: {
  type: String,
  required: false,
@@ -93,17 +103,17 @@
  required: false,
  default: '#41b883'
  },
- offColor: {
+ offTextColor: {
  type: String,
  required: false,
  default: '#888888'
  },
- onColor: {
+ onTextColor: {
  type: String,
  required: false,
  default: '#ffffff'
  },
- handleBackground: {
+ handleColor: {
  type: String,
  required: false,
  default: '#ffffff'
@@ -116,17 +126,17 @@
  },
  setup(props, context)
  {
- // no export
  const value = useValue(props, context)
 
  const style = useStyle(props, context)
 
  const toggle = useToggle(props, context, {
- value: value.value,
+ inputValue: value.inputValue,
  update: value.update,
  })
 
  return {
+ ...value,
  ...style,
  ...toggle,
  }

src/composables/useToggle.js

@@ -6,19 +6,19 @@ export default function useValue (props, context, dependencies)
 
  // ============ DEPENDENCIES ============
 
- const value = dependencies.value
+ const inputValue = dependencies.inputValue
  const update = dependencies.update
 
  // ============== COMPUTED ==============
 
- const isOn = computed(() => {
- return value.value === trueValue.value
+ const checked = computed(() => {
+ return inputValue.value === trueValue.value
  })
 
  // =============== METHODS ==============
 
  const toggle = () => {
- update(isOn.value ? falseValue.value : trueValue.value)
+ update(checked.value ? falseValue.value : trueValue.value)
  }
 
  const on = () => {
@@ -30,7 +30,7 @@ export default function useValue (props, context, dependencies)
  }
 
  return {
- isOn,
+ checked,
  toggle,
  on,
  off,

src/composables/useValue.js

@@ -1,11 +1,11 @@
-import { toRefs } from 'composition-api'
+import { toRefs, watch } from 'composition-api'
 
 export default function useValue (props, context, dependencies)
 {
- const { value: baseValue, modelValue, falseValue } = toRefs(props)
+ const { value: baseValue, modelValue, falseValue, trueValue } = toRefs(props)
 
  /* istanbul ignore next */
- const value = context.expose !== undefined ? modelValue : baseValue
+ const inputValue = context.expose !== undefined ? modelValue : baseValue
 
  // =============== METHODS ==============
 
@@ -16,13 +16,23 @@ export default function useValue (props, context, dependencies)
  context.emit('change', val)
  }
 
+ const handleInput = (val) => {
+ update(val.target.checked ? trueValue.value : falseValue.value)
+ }
+
  // ================ HOOKS ===============
 
- if ([null, undefined].indexOf(value.value) !== -1) {
+ if ([null, undefined, false, 0, '0', 'off'].indexOf(inputValue.value) !== -1) {
  update(falseValue.value)
  }
 
+ if ([true, 1, '1', 'on'].indexOf(inputValue.value) !== -1) {
+ update(trueValue.value)
+ }
+
  return {
- value,
+ inputValue,
+ update,
+ handleInput,
  }
 }