@aziontech/webkit 0.0.1

package/src/core/field-multi-select/field-multi-select.vue.d.ts

@@ -0,0 +1,136 @@
+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: ArrayConstructor;
+        default: () => never[];
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    optionLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    optionValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    optionDisabled: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    options: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pt: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    onBlur: (...args: any[]) => void;
+    onChange: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    optionLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    optionValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    optionDisabled: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    options: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pt: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+}>> & Readonly<{
+    onOnBlur?: ((...args: any[]) => any) | undefined;
+    onOnChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: unknown[];
+    label: string;
+    placeholder: string;
+    description: string;
+    disabled: boolean;
+    filter: boolean;
+    optionLabel: string;
+    optionDisabled: string | Function;
+    loading: boolean;
+    pt: Record<string, any>;
+    optionValue: string;
+    options: unknown[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    description?: ((props: {}) => any) | undefined;
+};
+//# sourceMappingURL=field-multi-select.vue.d.ts.map

package/src/core/field-multi-select/field-multi-select.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-multi-select.vue.d.ts","sourceRoot":"","sources":["field-multi-select.vue"],"names":[],"mappings":"wBAgeqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AA3DzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAwDG"}

package/src/core/field-multi-select/package.json

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

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

@@ -0,0 +1,144 @@
+<script setup>
+  import { computed, toRef, useAttrs } from 'vue'
+  import { useField } from 'vee-validate'
+  import InputNumber from 'primevue/inputnumber'
+  import LabelBlock from '../label'
+
+  const emit = defineEmits(['blur', 'input'])
+  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
+    },
+    inputClass: {
+      type: String,
+      default: ''
+    },
+    min: {
+      type: Number
+    },
+    max: {
+      type: Number
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    showButtons: {
+      type: Boolean,
+      default: true
+    },
+    useGrouping: {
+      type: Boolean,
+      default: true
+    },
+    aditionalError: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const name = toRef(props, 'name')
+
+  const {
+    value: inputValue,
+    errorMessage,
+    handleBlur,
+    handleChange
+  } = useField(name, undefined, {
+    initialValue: props.value ?? null
+  })
+
+  const attrs = useAttrs()
+
+  const customTestId = computed(() => {
+    const id = attrs['data-testid'] || 'field-number'
+
+    return {
+      label: `${id}__label`,
+      input: `${id}__input`,
+      description: `${id}__description`,
+      error: `${id}__error-message`
+    }
+  })
+
+  const onBlur = (event) => {
+    handleBlur(event)
+    emit('blur', event)
+  }
+
+  const onInput = (event) => {
+    handleChange(event.value)
+    emit('input', event.value)
+  }
+</script>
+
+<template>
+  <LabelBlock
+    :for="props.name"
+    :data-testid="customTestId.label"
+    :label="props.label"
+    :isRequired="$attrs.required"
+  />
+  <InputNumber
+    v-model="inputValue"
+    :showButtons="props.showButtons"
+    :placeholder="props.placeholder"
+    :disabled="props.disabled"
+    :readonly="props.readonly"
+    :id="name"
+    :min="props.min"
+    :max="props.max"
+    :step="props.step"
+    :useGrouping="props.useGrouping"
+    type="number"
+    @input="onInput"
+    @blur="onBlur"
+    :pt="{
+      input: {
+        name: props.name
+      }
+    }"
+    :class="[{ 'p-invalid': aditionalError || errorMessage }, props.inputClass]"
+    :data-testid="customTestId.input"
+  />
+
+  <small
+    v-if="aditionalError || errorMessage"
+    class="p-error text-xs font-normal leading-tight"
+    :data-testid="customTestId.error"
+  >
+    {{ aditionalError || errorMessage }}
+  </small>
+  <small
+    class="text-xs text-color-secondary font-normal leading-5"
+    :data-testid="customTestId.description"
+    v-if="props.description"
+  >
+    {{ props.description }}
+  </small>
+</template>

package/src/core/field-number/field-number.vue.d.ts

@@ -0,0 +1,132 @@
+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;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    min: {
+        type: NumberConstructor;
+    };
+    max: {
+        type: NumberConstructor;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showButtons: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    useGrouping: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    aditionalError: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, 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;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    min: {
+        type: NumberConstructor;
+    };
+    max: {
+        type: NumberConstructor;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showButtons: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    useGrouping: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    aditionalError: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onInput?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string;
+    label: string;
+    placeholder: string;
+    description: string;
+    disabled: boolean;
+    readonly: boolean;
+    inputClass: string;
+    aditionalError: string;
+    step: number;
+    showButtons: boolean;
+    useGrouping: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=field-number.vue.d.ts.map

package/src/core/field-number/field-number.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-number.vue.d.ts","sourceRoot":"","sources":["field-number.vue"],"names":[],"mappings":"wBA0aqB,OAAO,YAAY;;AA3DxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EA0DG"}

package/src/core/field-number/package.json

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

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

@@ -0,0 +1,151 @@
+<script setup>
+  import { computed, toRef, useAttrs } from 'vue'
+  import { useField } from 'vee-validate'
+  import Dropdown from 'primevue/dropdown'
+  import InputMask from 'primevue/inputmask'
+  import LabelBlock from '../label'
+
+  const props = defineProps({
+    options: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: 'Phone Number'
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    countryCodeName: {
+      type: String,
+      default: 'countryCallCode'
+    },
+    mobileName: {
+      type: String,
+      default: 'mobile'
+    }
+  })
+
+  const emit = defineEmits(['change:countryCode', 'change:mobile'])
+
+  const attrs = useAttrs()
+  const countryCodeName = toRef(props, 'countryCodeName')
+  const mobileName = toRef(props, 'mobileName')
+
+  const customTestId = computed(() => {
+    const id = attrs['data-testid'] || 'field-phone-number'
+
+    return {
+      label: `${id}__label`,
+      countryDropdown: `${id}__country-dropdown`,
+      filterInput: `${id}__filter-input`,
+      mobileInput: `${id}__mobile-input`,
+      description: `${id}__description`,
+      errorMobile: `${id}__error-mobile`,
+      errorCountryCode: `${id}__error-country-code`
+    }
+  })
+
+  const { value: countryCallCode, errorMessage: errorCountryCallCode } = useField(
+    countryCodeName,
+    undefined,
+    { initialValue: '' }
+  )
+  const { value: mobile, errorMessage: errorMobile } = useField(mobileName, undefined, {
+    initialValue: ''
+  })
+
+  const handleCountryChange = () => {
+    emit('change:countryCode', countryCallCode.value)
+  }
+
+  const handleMobileInput = () => {
+    emit('change:mobile', mobile.value)
+  }
+</script>
+
+<template>
+  <div class="flex flex-col sm:max-w-lg w-full gap-2">
+    <LabelBlock
+      :data-testid="customTestId.label"
+      :for="mobileName"
+      :label="props.label"
+      isRequired
+    />
+    <div class="flex gap-2">
+      <div class="p-inputgroup">
+        <Dropdown
+          :data-testid="customTestId.countryDropdown"
+          filter
+          autoFilterFocus
+          appendTo="self"
+          :id="countryCodeName"
+          :name="countryCodeName"
+          :options="props.options"
+          optionLabel="labelFormat"
+          optionValue="value"
+          :loading="props.loading"
+          :disabled="props.loading || props.disabled"
+          :class="{ 'p-invalid': errorCountryCallCode }"
+          class="surface-border border-r-0 w-1/4"
+          v-model="countryCallCode"
+          @change="handleCountryChange"
+          :pt="{
+            filterInput: {
+              class: 'w-full',
+              'data-testid': customTestId.filterInput
+            }
+          }"
+        >
+          <template #option="{ option }">
+            {{ option.label }}
+          </template>
+        </Dropdown>
+
+        <InputMask
+          :data-testid="customTestId.mobileInput"
+          date="phone"
+          v-model="mobile"
+          class="w-full"
+          :name="mobileName"
+          :disabled="props.loading || props.disabled"
+          mask="?99999999999999999999"
+          placeholder="5500999999999"
+          :class="{ 'p-invalid': errorMobile }"
+          @update:modelValue="handleMobileInput"
+        />
+      </div>
+    </div>
+    <small
+      v-if="errorCountryCallCode"
+      class="p-error text-xs font-normal leading-tight"
+      :data-testid="customTestId.errorCountryCode"
+    >
+      {{ errorCountryCallCode }}
+    </small>
+    <small
+      v-if="errorMobile"
+      class="p-error text-xs font-normal leading-tight"
+      :data-testid="customTestId.errorMobile"
+    >
+      {{ errorMobile }}
+    </small>
+    <small
+      v-if="props.description"
+      class="text-xs text-color-secondary font-normal leading-5"
+      :data-testid="customTestId.description"
+    >
+      {{ props.description }}
+    </small>
+  </div>
+</template>

package/src/core/field-phone-number/field-phone-number.vue.d.ts

@@ -0,0 +1,76 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    options: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    countryCodeName: {
+        type: StringConstructor;
+        default: string;
+    };
+    mobileName: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "change:countryCode": (...args: any[]) => void;
+    "change:mobile": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    options: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    countryCodeName: {
+        type: StringConstructor;
+        default: string;
+    };
+    mobileName: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onChange:countryCode"?: ((...args: any[]) => any) | undefined;
+    "onChange:mobile"?: ((...args: any[]) => any) | undefined;
+}>, {
+    label: string;
+    description: string;
+    disabled: boolean;
+    loading: boolean;
+    options: unknown[];
+    countryCodeName: string;
+    mobileName: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=field-phone-number.vue.d.ts.map

package/src/core/field-phone-number/field-phone-number.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-phone-number.vue.d.ts","sourceRoot":"","sources":["field-phone-number.vue"],"names":[],"mappings":"wBAkdqB,OAAO,YAAY;;AAjCxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAgCG"}

package/src/core/field-phone-number/package.json

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