Skip to content

Instantly share code, notes, and snippets.

@whizkydee
Last active May 4, 2019 12:50
Show Gist options
  • Save whizkydee/fa60939bdd97b5acf544e34025a8c68a to your computer and use it in GitHub Desktop.
Save whizkydee/fa60939bdd97b5acf544e34025a8c68a to your computer and use it in GitHub Desktop.
HelloTax InputGroup v2
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
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..."
/>
)
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment