diff --git a/lib/components/form/Input.props.js b/lib/components/form/Input.props.js index 953aa62..494a259 100644 --- a/lib/components/form/Input.props.js +++ b/lib/components/form/Input.props.js @@ -20,15 +20,19 @@ export default { type: [String, Boolean], default: null }, - /** Icon to inject */ - icon: { + /** + * Leading icon to display + */ + leading: { type: String, default: null }, - /** Display icon at right position of input */ + /** + * Trailing icon to display + */ trailing: { - type: Boolean, - default: false + type: String, + default: null }, /** * Current checked value of element diff --git a/lib/components/form/Input.vue b/lib/components/form/Input.vue index ccfe4b1..fe33a01 100644 --- a/lib/components/form/Input.vue +++ b/lib/components/form/Input.vue @@ -40,12 +40,6 @@ export default { } }, computed: { - isLeading () { - return this.icon && this.leading - }, - isTrailing () { - return (this.icon && this.trailing) || this.helpTooltip - }, bind () { return bindProps.call(this, InputProps) } @@ -74,7 +68,7 @@ export default { const childrens = [h('input', { ref: 'component', - class: [this.config.Input.fixed, this.config.Input.variant, this.config.Input.size, this.config.Input.validation, this.config.Input.rounded], + class: [this.config.Input.fixed, this.config.Input.classes, this.config.Input.variant, this.config.Input.size, this.config.Input.validation, this.config.Input.rounded], attrs, domProps: { value: this.value, @@ -101,11 +95,11 @@ export default { } })] - if (this.isTrailing) { + if (this.trailing || this.helpTooltip) { const icon = h('div', { class: [this.config.Input.icon.fixed, this.config.Input.icon.size], domProps: { - innerHTML: this.icon || this.config.Input.help.icon + innerHTML: this.trailing || this.config.Input.help.icon } }) @@ -129,6 +123,26 @@ export default { childrens.push(h('div', trailingWrapper, [icon])) } + if (this.leading) { + const icon = h('div', { + class: [this.config.Input.icon.fixed, this.config.Input.icon.size], + domProps: { + innerHTML: this.leading + } + }) + + const leadingWrapper = { + class: [this.config.Input.leading.fixed, this.config.Input.leading.classes], + on: { + click: () => { + this.$emit('leading-click') + } + } + } + + childrens.push(h('div', leadingWrapper, [icon])) + } + return h('div', { class: this.config.Input.wrapper }, childrens) diff --git a/lib/components/form/InputDatePicker.vue b/lib/components/form/InputDatePicker.vue index 2c4561e..9d24b2b 100644 --- a/lib/components/form/InputDatePicker.vue +++ b/lib/components/form/InputDatePicker.vue @@ -12,8 +12,7 @@ v-bind="inputProps" type="text" readonly - trailing - :icon="config.icon.icon" + :trailing="config.icon.icon" @click.native="toggle" @focus="onFocus" @blur="onBlur" diff --git a/lib/components/form/InputPassword.stories.js b/lib/components/form/InputPassword.stories.js index 6a5e9e9..766bc67 100644 --- a/lib/components/form/InputPassword.stories.js +++ b/lib/components/form/InputPassword.stories.js @@ -46,7 +46,7 @@ const TemplateValidation = (args, { argTypes }) => ({ const TemplateEye = (args, { argTypes }) => ({ props: Object.keys(argTypes), - template: '
' + template: '' }) const TemplateConfirm = (args, { argTypes }) => ({ diff --git a/lib/components/form/InputPassword.vue b/lib/components/form/InputPassword.vue index 632d6af..178fc42 100644 --- a/lib/components/form/InputPassword.vue +++ b/lib/components/form/InputPassword.vue @@ -78,8 +78,7 @@ export default { // Inject show password icon if (this.eye) { - inputProps.trailing = true - inputProps.icon = this.config.icon[`${this.showPassword ? 'show' : 'hide'}`] + inputProps.trailing = this.config.icon[`${this.showPassword ? 'show' : 'hide'}`] inputProps.iconClasses = [this.config.icon.fixed, 'cursor-pointer'].filter(icon => !!icon).join(' ') } diff --git a/lib/components/form/InputText.stories.js b/lib/components/form/InputText.stories.js index c289da3..90e28ab 100644 --- a/lib/components/form/InputText.stories.js +++ b/lib/components/form/InputText.stories.js @@ -39,6 +39,11 @@ const Template = (args, { argTypes }) => ({ template: '