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: '' }) +const TemplateIcons = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + template: '' +}) + export const Simple = Template.bind({}) export const WithLabel = Template.bind({}) export const Required = Template.bind({}) @@ -46,6 +51,9 @@ export const WithHelp = Template.bind({}) export const WithTooltipHelp = Template.bind({}) export const WithError = Template.bind({}) export const Disabled = Template.bind({}) +export const LeftIcon = TemplateIcons.bind({}) +export const RightIcon = TemplateIcons.bind({}) +export const BothSideIcon = TemplateIcons.bind({}) Simple.args = { variant: variants[0], @@ -92,3 +100,21 @@ WithError.args = { description: 'Lorem ipsum dolor sit amet' } } + +LeftIcon.args = { + ...Simple.args, + leading: '', + trailing: null +} + +RightIcon.args = { + ...Simple.args, + leading: null, + trailing: '' +} + +BothSideIcon.args = { + ...Simple.args, + leading: '', + trailing: '' +} diff --git a/lib/utils/config.js b/lib/utils/config.js index bf85257..412ed17 100644 --- a/lib/utils/config.js +++ b/lib/utils/config.js @@ -26,6 +26,14 @@ export default function () { const Input = { wrapper: 'relative', fixed: 'form-input transition duration-150 border ease-in-out disabled:cursor-not-allowed w-full placeholder-gray-500', + classes: (context) => { + const classes = [] + + if (context.leading) classes.push('pl-10') + if (context.trailing) classes.push('pr-10') + + return classes.join(' ') + }, variants: { default: 'border-gray-400 disabled:bg-gray-100', warning: '', @@ -66,9 +74,11 @@ export default function () { }, trailing: { fixed: 'absolute inset-y-0 right-0 flex items-center', - classes: (context) => { - return context.isLeading ? 'pl-4' : 'pr-4' - } + classes: 'pr-4' + }, + leading: { + fixed: 'absolute inset-y-0 left-0 flex items-center', + classes: 'pl-4' }, rounded, help: {