Pitcher Numpad Input

Simple usage

Simple usage example of PNumpadInput.

Show Code

<template>
  <PNumpadInput v-model="inputValue" placeholder="Select Number" maxWidth="300" />
</template>

<script>
import { PNumpadInput } from '@pitcher/pitcherify'
import { ref } from '@vue/composition-api'

export default {
  name: 'ExampleComponent',
  components: {
    PNumpadInput,
  },
  setup() {
    const inputValue = ref('')

    return { inputValue }
  },
}
</script>

Advanced usage

Usage with multiple numpad groups.

Show Code

<template>
  <VContainer fluid class="px-0 pb-0">
    <VRow>
      <VCol v-for="inp in inputs" :key="inp.id" cols="3" class="d-flex align-center">
        <div>
          <VChip label class="mb-3">
            Group: &nbsp;
            <span class="font-weight-medium">{{ inp.group }}</span>
          </VChip>
          <PNumpadInput v-model="inp.val" :group="inp.group" :placeholder="inp.placeholder" maxWidth="300" />
        </div>
      </VCol>
    </VRow>
    <VRow>
      <VCol>
        <VBtn class="mr-2" color="secondary" @click="add">Add</VBtn>
        <VBtn color="error" @click="remove">Remove</VBtn>
      </VCol>
    </VRow>
  </VContainer>
</template>

<script>
import { defineComponent, reactive, toRefs } from '@vue/composition-api'

export default defineComponent({
  name: 'ExampleComponent',
  setup() {
    const state = reactive({
      inputs: [
        {
          id: 0,
          group: 'group-1',
          val: undefined,
          placeholder: 'Group 1',
        },
        {
          id: 1,
          group: 'group-1',
          val: '',
          placeholder: 'Group 1',
        },
        {
          id: 2,
          group: 'group-2',
          val: '',
          placeholder: 'Group 2',
        },
        {
          id: 3,
          group: 'group-2',
          val: '',
          placeholder: 'Group 2',
        },
      ],
    })

    const getRandom = (min = 1, max = 5) => {
      return Math.floor(Math.random() * max) + min
    }

    const add = () => {
      const rand = getRandom()

      state.inputs.push({
        id: state.inputs.length,
        group: `group-${rand}`,
        val: undefined,
        placeholder: `Group ${rand}`,
      })
      state.inputs.sort((a, b) => (a.group > b.group ? 1 : -1))
    }

    const remove = () => {
      state.inputs = state.inputs.filter((i) => i.id !== state.inputs.length - 1)
    }

    return { ...toRefs(state), add, remove }
  },
})
</script>

API

src: pitcherify/src/components/PNumpadInput/PNumpadInput.vue fa fa-external-link

Pitcher props

Vuetify props

Inherits attributes from vuetify component: VTextField

Pass props at: *   (* means root level as Pitcher props on the <VTextField />)

Props listed below can be used on <PNumpadInput />

Events

Slots