Merge remote-tracking branch 'origin/feat/333-creation-text-input' into feat/333-creation-text-input

app/components/malio/Input.test.ts

@@ -305,9 +305,9 @@ describe('MalioInput', () => {
 
   it('passes icon size prop to icon component', () => {
     const wrapper = mount(InputForTest, {
-      props: {iconName: 'mdi:key-outline', iconSize: 'text-2xl'},
+      props: {iconName: 'mdi:key-outline', iconSize: '24'},
     })
-    expect(wrapper.get('[data-test="icon"]').attributes('size')).toBe('text-2xl')
+    expect(wrapper.get('[data-test="icon"]').attributes('height')).toBe('24')
   })
 
   it('applies icon color class', () => {

app/components/malio/InputText.vue

@@ -8,17 +8,16 @@
       v-maska="mask"
       :name="name"
       :autocomplete="autocomplete"
-      class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none border-m-muted focus:border-2"
+      class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none  focus:border-2"
       :class="[
       disabled ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
       hasError
         ? 'border-m-error focus:border-m-error focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-error'
         : hasSuccess
           ? 'border-m-success focus:border-m-success focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-success'
-          : 'border-m-border focus:border-m-primary focus:pl-[11px]',
+          : 'border-m-muted focus:border-m-primary focus:pl-[11px]',
       textInput,
       iconInputPaddingClass,
-      inputClass,
       rounded,
     ]"
       :required="required"
@@ -50,22 +49,20 @@
       textLabel,
       ]"
     >
-    {{ label }}
+      {{ label }}
     </label>
 
-    <Icon
+    <IconifyIcon
       v-if="iconName"
-      :name="iconName"
-      :size="iconSize"
+      :icon="iconName"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon"
       :class="[
-        hasError
-          ? 'text-m-error'
-          : hasSuccess
-            ? 'text-m-success'
-            : 'text-m-muted',
-        'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
-        iconColor,
-      ]"
+      hasError ? 'text-m-error' : hasSuccess ? 'text-m-success' : '',
+      'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
+      iconColor,
+    ]"
     />
 
   </div>
@@ -81,16 +78,18 @@
         'mt-1 text-xs ml-[2px] ',
       ]"
   >
-    {{ hint || error || successMessage }}
+    {{ hint || error || success }}
   </p>
 </template>
 
 <script setup lang="ts">
+
 import type {MaskInputOptions} from 'maska'
 import {vMaska} from 'maska/vue'
 import {computed, useAttrs, useId} from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
 
-defineOptions({inheritAttrs: false})
+defineOptions({name: 'MalioInputText', inheritAttrs: false})
 
 const props = withDefaults(
   defineProps<{
@@ -103,7 +102,6 @@ const props = withDefaults(
     maxWidth?: string
     textInput?: string
     textLabel?: string
-    inputClass?: string
     labelClass?: string
     required?: boolean
     maxLength?: number | string
@@ -113,7 +111,6 @@ const props = withDefaults(
     hint?: string
     error?: string
     success?: string
-    succes?: string
     iconName?: string
     rounded?: string
     iconSize?: string | number
@@ -129,22 +126,20 @@ const props = withDefaults(
     label: '',
     minWidth: 'w-96',
     maxWidth: '',
-    inputClass: '',
-    labelClass: '',
     textInput: 'text-lg',
+    labelClass: '',
     required: false,
     maxLength: undefined,
     minLength: undefined,
     readonly: false,
-    textLabel: 'text-sml',
+    textLabel: 'text-sm',
     disabled: false,
     rounded: 'rounded-md',
     hint: '',
     error: '',
     success: '',
-    succes: '',
     iconSize: 24,
-    iconColor: '',
+    iconColor: 'text-m-muted',
     mask: undefined,
   },
 )
@@ -153,9 +148,8 @@ const attrs = useAttrs()
 const generatedId = useId()
 
 const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
-const successMessage = computed(() => props.success || props.succes || '')
 const hasError = computed(() => !!props.error)
-const hasSuccess = computed(() => !!successMessage.value)
+const hasSuccess = computed(() => !!props.success)
 
 const describedBy = computed(() => {
   const ids: string[] = []