@aziontech/webkit 0.0.1

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

@@ -0,0 +1,178 @@
+<script setup>
+  import { computed, ref, toRef, useAttrs, useSlots } from 'vue'
+  import { useField } from 'vee-validate'
+  import TextArea from 'primevue/textarea'
+  import Skeleton from 'primevue/skeleton'
+  import LabelBlock from '../label'
+
+  const emit = defineEmits(['blur', 'input'])
+  const props = defineProps({
+    value: {
+      type: String,
+      default: ''
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    rows: {
+      type: [Number, String],
+      default: 5
+    },
+    cols: {
+      type: Number,
+      default: 30
+    },
+    autoResize: {
+      type: Boolean
+    },
+    disabled: {
+      type: Boolean
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    iconPosition: {
+      type: String,
+      default: 'right'
+    },
+    sensitive: {
+      type: Boolean,
+      default: false
+    },
+    aditionalError: {
+      type: String,
+      default: ''
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const inputRef = ref(null)
+  const name = toRef(props, 'name')
+  const slots = useSlots()
+  const hasDescriptionSlot = !!slots.description
+  const {
+    value: inputValue,
+    errorMessage: veeValidateErrorMessage,
+    handleBlur,
+    handleChange
+  } = useField(name, undefined, {
+    initialValue: props.value
+  })
+
+  const attrs = useAttrs()
+
+  const customTestId = computed(() => {
+    const id = attrs['data-testid'] || 'field-text'
+
+    return {
+      label: `${id}__label`,
+      textarea: `${id}__textarea`,
+      description: `${id}__description`,
+      error: `${id}__error-message`
+    }
+  })
+
+  const iconPositionClass = computed(() => {
+    return props.icon ? `p-input-icon-${props.iconPosition}` : ''
+  })
+
+  const onBlur = (event) => {
+    handleBlur(event)
+    emit('blur', event)
+  }
+
+  const onChange = (event) => {
+    handleChange(event)
+    emit('input', event.target.value)
+  }
+
+  const ROW_HEIGHT_REM = 1.5
+  const MIN_HEIGHT_REM = 2.75
+  const PADDING_REM = 1.5
+
+  const textareaHeight = computed(() => {
+    const rows = Number(props.rows)
+    const height = Math.max(rows * ROW_HEIGHT_REM + PADDING_REM, MIN_HEIGHT_REM)
+    return `${height}rem`
+  })
+
+  defineExpose({ inputRef })
+</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"
+    />
+    <!-- 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>
+</template>

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

@@ -0,0 +1,142 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    rows: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    cols: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoResize: {
+        type: BooleanConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    iconPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    sensitive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    aditionalError: {
+        type: StringConstructor;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    inputRef: import("vue").Ref<null, null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (...args: any[]) => void;
+    blur: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    rows: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    cols: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoResize: {
+        type: BooleanConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    iconPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    sensitive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    aditionalError: {
+        type: StringConstructor;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onInput?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string;
+    placeholder: string;
+    description: string;
+    disabled: boolean;
+    icon: string;
+    loading: boolean;
+    aditionalError: string;
+    sensitive: boolean;
+    rows: string | number;
+    cols: number;
+    autoResize: boolean;
+    iconPosition: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    description?: ((props: {}) => any) | undefined;
+};
+//# sourceMappingURL=field-text-area.vue.d.ts.map

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

@@ -0,0 +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"}

package/src/core/field-text-area/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "./field-text-area.vue",
+  "module": "./field-text-area.vue",
+  "types": "./field-text-area.vue.d.ts",
+  "browser": {
+    "./sfc": "./field-text-area.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}

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

@@ -0,0 +1,127 @@
+<script setup>
+  import { computed, toRef, ref, watch } from 'vue'
+  import { useField } from 'vee-validate'
+  import InputText from 'primevue/inputtext'
+  import LabelBlock from '../label'
+  const emit = defineEmits(['click-icon'])
+  const props = defineProps({
+    value: {
+      type: String,
+      default: ''
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    iconPosition: {
+      type: String,
+      default: 'right'
+    },
+    required: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const nameInput = toRef(props, 'name')
+
+  const inputValue = ref(props.value)
+  const errorMessage = ref('')
+  let handleBlur = () => {}
+  let handleChange = () => {}
+
+  if (!props.disabled) {
+    const field = useField(nameInput, undefined, {
+      initialValue: props.value
+    })
+    inputValue.value = field.value
+    errorMessage.value = field.errorMessage
+    handleBlur = field.handleBlur
+    handleChange = field.handleChange
+  } else {
+    watch(
+      () => props.value,
+      (newValue) => {
+        inputValue.value = newValue
+      }
+    )
+  }
+
+  const iconPositionClass = computed(() => {
+    return props.icon ? `p-input-icon-${props.iconPosition}` : ''
+  })
+
+  const handleClick = () => {
+    emit('click-icon')
+  }
+</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"
+    />
+    <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>
+</template>

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

@@ -0,0 +1,100 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    iconPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "click-icon": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    iconPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onClick-icon"?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string;
+    required: boolean;
+    label: string;
+    placeholder: string;
+    description: string;
+    disabled: boolean;
+    readonly: boolean;
+    icon: string;
+    iconPosition: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=field-text-icon.vue.d.ts.map

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

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

package/src/core/field-text-icon/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "./field-text-icon.vue",
+  "module": "./field-text-icon.vue",
+  "types": "./field-text-icon.vue.d.ts",
+  "browser": {
+    "./sfc": "./field-text-icon.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}

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

@@ -0,0 +1,127 @@
+<script setup>
+  import { computed, ref, toRef, useAttrs, useSlots } from 'vue'
+  import { useField } from 'vee-validate'
+  import Password from 'primevue/password'
+  import LabelBlock from '../label'
+
+  const emit = defineEmits(['blur', 'input'])
+  const props = defineProps({
+    value: {
+      type: String,
+      default: ''
+    },
+    class: {
+      type: String
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    sensitive: {
+      type: Boolean,
+      default: false
+    },
+    aditionalError: {
+      type: String,
+      default: ''
+    }
+  })
+  const inputPasswordRef = ref(null)
+  const name = toRef(props, 'name')
+  const slots = useSlots()
+  const attrs = useAttrs()
+  const hasDescriptionSlot = !!slots.description
+
+  const customTestId = computed(() => {
+    const id = attrs['data-testid'] || 'field-text'
+
+    return {
+      label: `${id}__label`,
+      input: `${id}__input`,
+      description: `${id}__description`,
+      error: `${id}__error-message`
+    }
+  })
+
+  const {
+    value: inputValue,
+    errorMessage: veeValidateErrorMessage,
+    handleBlur,
+    handleChange
+  } = useField(name, undefined, {
+    initialValue: props.value
+  })
+
+  const onBlur = (event) => {
+    handleBlur(event)
+    emit('blur', event)
+  }
+
+  const onChange = (event) => {
+    handleChange(event)
+    emit('input', event.target.value)
+  }
+
+  defineExpose({ inputPasswordRef })
+</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>
+</template>