feat!: handle two icons for Input

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

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)

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"

lib/components/form/InputPassword.stories.js

@@ -46,7 +46,7 @@ const TemplateValidation = (args, { argTypes }) => ({
 
 const TemplateEye = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  template: '<form><DwInputPassword v-model="value" name="input-password" rounded="rounded" :variant="variant" :label="label" :size="size" :required="required" :inline="inline" :help="help" :validation="validation" :placeholder="placeholder" autocomplete="current-password" eye /></form>'
+  template: '<form><DwInputPassword v-model="value" name="input-password" :rounded="rounded" :variant="variant" :label="label" :size="size" :required="required" :inline="inline" :help="help" :validation="validation" :placeholder="placeholder" autocomplete="current-password" eye /></form>'
 })
 
 const TemplateConfirm = (args, { argTypes }) => ({

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(' ')
       }
 

lib/components/form/InputText.stories.js

@@ -39,13 +39,21 @@ const Template = (args, { argTypes }) => ({
   template: '<DwInputText v-model="value" name="input-text" :rounded="rounded" :variant="variant" :label="label" :size="size" :required="required" :inline="inline" :help="help" :help-tooltip="helpTooltip" :validation="validation" :disabled="disabled" :placeholder="placeholder" />'
 })
 
+const TemplateIcons = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: '<DwInputText v-model="value" name="input-text" :rounded="rounded" :variant="variant" :label="label" :size="size" :required="required" :inline="inline" :placeholder="placeholder" :leading="leading" :trailing="trailing" />'
+})
+
 export const Simple = Template.bind({})
 export const WithLabel = Template.bind({})
 export const Required = Template.bind({})
 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: '<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z" clip-rule="evenodd"></path></svg>',
+  trailing: null
+}
+
+RightIcon.args = {
+  ...Simple.args,
+  leading: null,
+  trailing: '<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z" clip-rule="evenodd"></path></svg>'
+}
+
+BothSideIcon.args = {
+  ...Simple.args,
+  leading: '<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 3a1 1 0 011-1h.01a1 1 0 010 2H7a1 1 0 01-1-1zm2 3a1 1 0 00-2 0v1a2 2 0 00-2 2v1a2 2 0 00-2 2v.683a3.7 3.7 0 011.055.485 1.704 1.704 0 001.89 0 3.704 3.704 0 014.11 0 1.704 1.704 0 001.89 0 3.704 3.704 0 014.11 0 1.704 1.704 0 001.89 0A3.7 3.7 0 0118 12.683V12a2 2 0 00-2-2V9a2 2 0 00-2-2V6a1 1 0 10-2 0v1h-1V6a1 1 0 10-2 0v1H8V6zm10 8.868a3.704 3.704 0 01-4.055-.036 1.704 1.704 0 00-1.89 0 3.704 3.704 0 01-4.11 0 1.704 1.704 0 00-1.89 0A3.704 3.704 0 012 14.868V17a1 1 0 001 1h14a1 1 0 001-1v-2.132zM9 3a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zm3 0a1 1 0 011-1h.01a1 1 0 110 2H13a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>',
+  trailing: '<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z" clip-rule="evenodd"></path></svg>'
+}

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: {