@aziontech/webkit 1.2.0 → 1.3.0

package/src/core/form/field-phone-number/field-phone-number.vue

@@ -3,7 +3,7 @@
   import { useField } from 'vee-validate'
   import Dropdown from 'primevue/dropdown'
   import InputMask from 'primevue/inputmask'
-  import LabelBlock from '../label'
+  import Label from '../label'
 
   const props = defineProps({
     options: {
@@ -76,7 +76,7 @@
 
 <template>
   <div class="flex flex-col sm:max-w-lg w-full gap-2">
-    <LabelBlock
+    <Label
       :data-testid="customTestId.label"
       :for="mobileName"
       :label="props.label"

package/src/core/form/field-text/field-text.vue

@@ -2,7 +2,8 @@
   import { computed, ref, toRef, useAttrs, useSlots } from 'vue'
   import { useField } from 'vee-validate'
   import InputText from 'primevue/inputtext'
-  import LabelBlock from '../label'
+  import InputSlot from '../slots/input-slot'
+  import Label from '../label'
 
   const emit = defineEmits(['blur', 'input'])
   const props = defineProps({
@@ -86,43 +87,45 @@
 </script>
 
 <template>
-  <LabelBlock
-    v-if="props.label"
-    :for="props.name"
-    :data-testid="customTestId.label"
-    :label="props.label"
-    :isRequired="attrs.required"
-  />
-  <InputText
-    v-bind="sensitive ? { 'data-sentry-mask': '' } : {}"
-    v-model="inputValue"
-    ref="inputRef"
-    type="text"
-    :data-testid="customTestId.input"
-    :id="name"
-    :name="name"
-    :readonly="readonly"
-    :disabled="disabled"
-    :placeholder="props.placeholder"
-    :class="[{ 'p-invalid': aditionalError || veeValidateErrorMessage }, props.class]"
-    @input="onChange"
-    @keypress.enter.prevent
-    @blur="onBlur"
-  />
-  <small
-    v-if="aditionalError || veeValidateErrorMessage"
-    class="p-error text-xs font-normal leading-tight"
-    :data-testid="customTestId.error"
-  >
-    {{ aditionalError || veeValidateErrorMessage }}
-  </small>
-  <small
-    v-if="props.description || hasDescriptionSlot"
-    class="text-xs text-color-secondary font-normal leading-5"
-    :data-testid="customTestId.description"
-  >
-    <slot name="description">
-      {{ props.description }}
-    </slot>
-  </small>
+  <InputSlot>
+    <Label
+      v-if="props.label"
+      :for="props.name"
+      :data-testid="customTestId.label"
+      :label="props.label"
+      :isRequired="attrs.required"
+    />
+    <InputText
+      v-bind="sensitive ? { 'data-sentry-mask': '' } : {}"
+      v-model="inputValue"
+      ref="inputRef"
+      type="text"
+      :data-testid="customTestId.input"
+      :id="name"
+      :name="name"
+      :readonly="readonly"
+      :disabled="disabled"
+      :placeholder="props.placeholder"
+      :class="[{ 'p-invalid': aditionalError || veeValidateErrorMessage }, props.class]"
+      @input="onChange"
+      @keypress.enter.prevent
+      @blur="onBlur"
+    />
+    <small
+      v-if="aditionalError || veeValidateErrorMessage"
+      class="p-error text-xs font-normal leading-tight"
+      :data-testid="customTestId.error"
+    >
+      {{ aditionalError || veeValidateErrorMessage }}
+    </small>
+    <small
+      v-if="props.description || hasDescriptionSlot"
+      class="text-xs text-color-secondary font-normal leading-5"
+      :data-testid="customTestId.description"
+    >
+      <slot name="description">
+        {{ props.description }}
+      </slot>
+    </small>
+  </InputSlot>
 </template>

package/src/core/form/field-text/field-text.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-text.vue.d.ts","sourceRoot":"","sources":["field-text.vue"],"names":[],"mappings":"wBAsYqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AA/CzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EA4CG"}
+{"version":3,"file":"field-text.vue.d.ts","sourceRoot":"","sources":["field-text.vue"],"names":[],"mappings":"wBA0ZqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AA/CzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EA4CG"}

package/src/core/form/field-text-area/field-text-area.vue

@@ -3,7 +3,8 @@
   import { useField } from 'vee-validate'
   import TextArea from 'primevue/textarea'
   import Skeleton from 'primevue/skeleton'
-  import LabelBlock from '../label'
+  import InputSlot from '../slots/input-slot'
+  import Label from '../label'
 
   const emit = defineEmits(['blur', 'input'])
   const props = defineProps({
@@ -117,62 +118,64 @@
 </script>
 
 <template>
-  <LabelBlock
-    :for="props.name"
-    :data-testid="customTestId.label"
-    :label="props.label"
-    :isRequired="attrs.required"
-  />
-  <span
-    class="w-full"
-    :class="iconPositionClass"
-  >
-    <i
-      v-if="props.icon"
-      :class="props.icon"
-      class="text-color-secondary top-5 right-5"
+  <InputSlot>
+    <Label
+      :for="props.name"
+      :data-testid="customTestId.label"
+      :label="props.label"
+      :isRequired="attrs.required"
     />
-    <!-- Skeleton only for textarea input -->
-    <Skeleton
-      v-if="props.loading"
-      width="100%"
-      :height="textareaHeight"
-      borderRadius="6px"
-    />
-    <TextArea
-      v-else
-      v-bind="sensitive ? { 'data-sentry-mask': '' } : {}"
-      v-model="inputValue"
-      ref="inputRef"
-      type="text"
-      class="w-full min-h-[2.75rem]"
-      :class="[{ 'p-invalid': aditionalError || veeValidateErrorMessage }, props.class]"
-      :id="name"
-      :data-testid="customTestId.textarea"
-      :name="props.name"
-      :disabled="props.disabled"
-      :autoResize="props.autoResize"
-      :rows="props.rows"
-      :cols="props.cols"
-      :placeholder="props.placeholder"
-      @input="onChange"
-      @blur="onBlur"
-    />
-  </span>
-  <small
-    v-if="aditionalError || veeValidateErrorMessage"
-    class="p-error text-xs font-normal leading-tight"
-    :data-testid="customTestId.error"
-  >
-    {{ aditionalError || veeValidateErrorMessage }}
-  </small>
-  <small
-    class="text-xs text-color-secondary font-normal leading-5"
-    :data-testid="customTestId.description"
-    v-if="props.description || hasDescriptionSlot"
-  >
-    <slot name="description">
-      {{ props.description }}
-    </slot>
-  </small>
+    <span
+      class="w-full"
+      :class="iconPositionClass"
+    >
+      <i
+        v-if="props.icon"
+        :class="props.icon"
+        class="text-color-secondary top-5 right-5"
+      />
+      <!-- Skeleton only for textarea input -->
+      <Skeleton
+        v-if="props.loading"
+        width="100%"
+        :height="textareaHeight"
+        borderRadius="6px"
+      />
+      <TextArea
+        v-else
+        v-bind="sensitive ? { 'data-sentry-mask': '' } : {}"
+        v-model="inputValue"
+        ref="inputRef"
+        type="text"
+        class="w-full min-h-[2.75rem]"
+        :class="[{ 'p-invalid': aditionalError || veeValidateErrorMessage }, props.class]"
+        :id="name"
+        :data-testid="customTestId.textarea"
+        :name="props.name"
+        :disabled="props.disabled"
+        :autoResize="props.autoResize"
+        :rows="props.rows"
+        :cols="props.cols"
+        :placeholder="props.placeholder"
+        @input="onChange"
+        @blur="onBlur"
+      />
+    </span>
+    <small
+      v-if="aditionalError || veeValidateErrorMessage"
+      class="p-error text-xs font-normal leading-tight"
+      :data-testid="customTestId.error"
+    >
+      {{ aditionalError || veeValidateErrorMessage }}
+    </small>
+    <small
+      class="text-xs text-color-secondary font-normal leading-5"
+      :data-testid="customTestId.description"
+      v-if="props.description || hasDescriptionSlot"
+    >
+      <slot name="description">
+        {{ props.description }}
+      </slot>
+    </small>
+  </InputSlot>
 </template>

package/src/core/form/field-text-area/field-text-area.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-text-area.vue.d.ts","sourceRoot":"","sources":["field-text-area.vue"],"names":[],"mappings":"wBA0gBqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AA9DzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EA2DG"}
+{"version":3,"file":"field-text-area.vue.d.ts","sourceRoot":"","sources":["field-text-area.vue"],"names":[],"mappings":"wBA8hBqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AA9DzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EA2DG"}

package/src/core/form/field-text-icon/field-text-icon.vue

@@ -2,8 +2,11 @@
   import { computed, toRef, ref, watch } from 'vue'
   import { useField } from 'vee-validate'
   import InputText from 'primevue/inputtext'
-  import LabelBlock from '../label'
+  import InputSlot from '../slots/input-slot'
+  import Label from '../label'
+
   const emit = defineEmits(['click-icon'])
+  
   const props = defineProps({
     value: {
       type: String,
@@ -48,7 +51,6 @@
   })
 
   const nameInput = toRef(props, 'name')
-
   const inputValue = ref(props.value)
   const errorMessage = ref('')
   let handleBlur = () => {}
@@ -58,8 +60,10 @@
     const field = useField(nameInput, undefined, {
       initialValue: props.value
     })
+    
     inputValue.value = field.value
     errorMessage.value = field.errorMessage
+    
     handleBlur = field.handleBlur
     handleChange = field.handleChange
   } else {
@@ -81,47 +85,49 @@
 </script>
 
 <template>
-  <LabelBlock
-    :for="props.name"
-    :label="props.label"
-    :isRequired="props.required"
-  />
-  <span
-    class="w-full"
-    :class="iconPositionClass"
-  >
-    <i
-      v-if="props.icon"
-      :class="props.icon"
-      class="text-color-secondary cursor-pointer"
-      @click="handleClick"
+  <InputSlot>
+    <Label
+      :for="props.name"
+      :label="props.label"
+      :isRequired="props.required"
     />
-    <InputText
-      :id="props.name"
-      v-model="inputValue"
-      :name="props.name"
-      :readonly="props.readonly"
-      :disabled="props.disabled"
-      type="text"
+    <span
       class="w-full"
-      :class="{ 'p-invalid': errorMessage }"
-      :placeholder="props.placeholder"
-      @input="handleChange"
-      @blur="handleBlur"
-      v-bind="$attrs"
-    />
-  </span>
+      :class="iconPositionClass"
+    >
+      <i
+        v-if="props.icon"
+        :class="props.icon"
+        class="text-color-secondary cursor-pointer"
+        @click="handleClick"
+      />
+      <InputText
+        :id="props.name"
+        v-model="inputValue"
+        :name="props.name"
+        :readonly="props.readonly"
+        :disabled="props.disabled"
+        type="text"
+        class="w-full"
+        :class="{ 'p-invalid': errorMessage }"
+        :placeholder="props.placeholder"
+        @input="handleChange"
+        @blur="handleBlur"
+        v-bind="$attrs"
+      />
+    </span>
 
-  <small
-    v-if="errorMessage"
-    class="p-error text-xs font-normal leading-tight"
-  >
-    {{ errorMessage }}
-  </small>
-  <small
-    class="text-xs text-color-secondary font-normal leading-5"
-    v-if="props.description"
-  >
-    {{ props.description }}
-  </small>
+    <small
+      v-if="errorMessage"
+      class="p-error text-xs font-normal leading-tight"
+    >
+      {{ errorMessage }}
+    </small>
+    <small
+      class="text-xs text-color-secondary font-normal leading-5"
+      v-if="props.description"
+    >
+      {{ props.description }}
+    </small>
+  </InputSlot>
 </template>

package/src/core/form/field-text-icon/field-text-icon.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-text-icon.vue.d.ts","sourceRoot":"","sources":["field-text-icon.vue"],"names":[],"mappings":"wBAoXqB,OAAO,YAAY;;AA7CxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EA4CG"}
+{"version":3,"file":"field-text-icon.vue.d.ts","sourceRoot":"","sources":["field-text-icon.vue"],"names":[],"mappings":"wBA8YqB,OAAO,YAAY;;AA7CxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EA4CG"}

package/src/core/form/field-text-password/field-text-password.vue

@@ -2,7 +2,8 @@
   import { computed, ref, toRef, useAttrs, useSlots } from 'vue'
   import { useField } from 'vee-validate'
   import Password from 'primevue/password'
-  import LabelBlock from '../label'
+  import Label from '../label'
+  import InputSlot from '../slots/input-slot'
 
   const emit = defineEmits(['blur', 'input'])
   const props = defineProps({
@@ -86,42 +87,44 @@
 </script>
 
 <template>
-  <LabelBlock
-    v-if="props.label"
-    :for="props.name"
-    :data-testid="customTestId.label"
-    :label="props.label"
-    :isRequired="attrs.required"
-  />
-  <Password
-    toggleMask
-    ref="inputPasswordRef"
-    v-model="inputValue"
-    :id="name"
-    :name="name"
-    :readonly="readonly"
-    :disabled="disabled"
-    :placeholder="props.placeholder"
-    :class="[{ 'p-invalid': aditionalError || veeValidateErrorMessage }, props.class]"
-    :feedback="false"
-    :data-testid="customTestId.input"
-    @input="onChange"
-    @blur="onBlur"
-  />
-  <small
-    v-if="aditionalError || veeValidateErrorMessage"
-    class="p-error text-xs font-normal leading-tight"
-    :data-testid="customTestId.error"
-  >
-    {{ aditionalError || veeValidateErrorMessage }}
-  </small>
-  <small
-    v-if="props.description || hasDescriptionSlot"
-    class="text-xs text-color-secondary font-normal leading-5"
-    :data-testid="customTestId.description"
-  >
-    <slot name="description">
-      {{ props.description }}
-    </slot>
-  </small>
+  <InputSlot>
+    <Label
+      v-if="props.label"
+      :for="props.name"
+      :data-testid="customTestId.label"
+      :label="props.label"
+      :isRequired="attrs.required"
+    />
+    <Password
+      toggleMask
+      ref="inputPasswordRef"
+      v-model="inputValue"
+      :id="name"
+      :name="name"
+      :readonly="readonly"
+      :disabled="disabled"
+      :placeholder="props.placeholder"
+      :class="[{ 'p-invalid': aditionalError || veeValidateErrorMessage }, props.class]"
+      :feedback="false"
+      :data-testid="customTestId.input"
+      @input="onChange"
+      @blur="onBlur"
+    />
+    <small
+      v-if="aditionalError || veeValidateErrorMessage"
+      class="p-error text-xs font-normal leading-tight"
+      :data-testid="customTestId.error"
+    >
+      {{ aditionalError || veeValidateErrorMessage }}
+    </small>
+    <small
+      v-if="props.description || hasDescriptionSlot"
+      class="text-xs text-color-secondary font-normal leading-5"
+      :data-testid="customTestId.description"
+    >
+      <slot name="description">
+        {{ props.description }}
+      </slot>
+    </small>
+  </InputSlot>
 </template>

package/src/core/form/field-text-password/field-text-password.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-text-password.vue.d.ts","sourceRoot":"","sources":["field-text-password.vue"],"names":[],"mappings":"wBAgYqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AA/CzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EA4CG"}
+{"version":3,"file":"field-text-password.vue.d.ts","sourceRoot":"","sources":["field-text-password.vue"],"names":[],"mappings":"wBAoZqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AA/CzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EA4CG"}