HelloTax InputGroup v2

InputGroup.js

import Vue from 'vue'


const InputGroup = Vue.component('InputGroup', {
  render() {
    const {
      type,
      full,
      name,
      icon,
      label,
      noLabel,
      required,
      listeners,
      inputAttrs,
      placeholder,
    } = this

    let id = label
      ? label
          .toLowerCase()
          .trim()
          .replace(/\s/g, '-')
      : null

    return (
      <div
        data-has-icon={icon instanceof Object ? true : false}
        class={'input-group' + (full ? ' input-group--full' : '')}
      >
        {!noLabel && <label for={id}>{label}</label>}

        {icon && (
          <span class="icon">
            <icon />
          </span>
        )}

        {!this.$slots.default && (
          <input
            id={id}
            type={type}
            name={name}
            required={required}
            {...{ on: listeners }}
            placeholder={placeholder}
            {...{ attrs: inputAttrs }}
          />
        )}

        {this.$slots.default}
      </div>
    )
  },

  props: {
    label: String,
    listeners: Object,
    inputAttrs: Object,
    placeholder: String,
    name: { type: String, default: null },
    icon: { type: Object, default: null },
    full: { type: Boolean, default: false },
    type: { type: String, default: 'text' },
    noLabel: { type: Boolean, default: false },
    required: { type: Boolean, default: false },
    autocomplete: { type: String, default: 'off' },
  },
})

export default InputGroup

usage.js

import Vue from 'vue'
import InputGroup from './InputGroup'

const SimpleUsage = Vue.component('SimpleUsage', {
  
  render() {
    return (
      <InputGroup
        noLabel
        type="search"
        inputAttrs={{ value: 'Pretty value from inputAttrs' }}
        listeners={{
          input: () => console.log('input!!'),
          change: () => console.log('change!!'),
        }}
        placeholder="Search Integration..."
      />
    )
  }

})