cja-phoenix 1.2.39 → 1.2.41

package/dist/runtime/components/form/FileInput.vue.d.ts

@@ -0,0 +1,46 @@
+import { type Ref, type InputHTMLAttributes } from 'vue';
+import type { Lazy, Schema } from 'yup';
+type __VLS_Props = {
+    id?: InputHTMLAttributes['id'];
+    layout?: 'vertical' | 'horizontal';
+    size?: 'sm' | 'md' | 'lg';
+    title?: string;
+    label?: string;
+    tooltip?: string;
+    placeholder?: string;
+    errorDisplay?: boolean;
+    description?: string;
+    disabled?: InputHTMLAttributes['disabled'];
+    validation?: Schema | Lazy<any>;
+    validationMode?: 'change' | 'none';
+    variant?: 'white' | 'blue';
+    accept?: string[];
+    hasDelete?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    errorMessage: Ref<string | undefined, string | undefined>;
+    meta: import("vee-validate").FieldMeta<unknown>;
+    validate: import("vee-validate").FieldValidator<unknown>;
+    handleInput: () => void;
+    updateFile: () => void;
+    inputElement: Ref<any, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:delete": (...args: any[]) => void;
+    "update:modelValue": (value: any) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:delete"?: ((...args: any[]) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "none";
+    layout: "vertical" | "horizontal";
+    placeholder: string;
+    variant: "white" | "blue";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/NumberInput.d.vue.ts

@@ -0,0 +1,41 @@
+import type { InputHTMLAttributes } from 'vue';
+import type { Lazy, Schema } from 'yup';
+type __VLS_Props = {
+    title?: string;
+    label?: string;
+    tooltip?: string;
+    layout?: 'vertical' | 'horizontal';
+    size?: 'sm' | 'md' | 'lg';
+    max?: number;
+    min?: number;
+    step?: number;
+    validation?: Schema | Lazy<any>;
+    validationMode?: 'change' | 'none';
+    errorDisplay?: boolean;
+    disabled?: InputHTMLAttributes['disabled'];
+};
+declare const __VLS_defaultModels: {
+    modelValue: number;
+};
+type __VLS_ModelProps = {
+    modelValue: typeof __VLS_defaultModels['modelValue'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    errorMessage: import("vue").Ref<string | undefined, string | undefined>;
+    meta: import("vee-validate").FieldMeta<unknown>;
+    validate: import("vee-validate").FieldValidator<unknown>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "none";
+    layout: "vertical" | "horizontal";
+    min: number;
+    step: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/NumberInput.vue

@@ -0,0 +1,162 @@
+<template>
+  <FormStructureContainer v-bind="{ layout }">
+    <FormStructureTitle
+      v-if="title"
+      v-bind="{ title, tooltip, size, disabled }"
+    />
+    <div class="number-input-container">
+      <input
+        v-model="model"
+        type="number"
+        v-bind="{ min, max, step, disabled }"
+        :aria-label="label || title"
+      >
+
+      <button
+        class="btn-minus"
+        :disabled="disabled || model - step < min"
+        aria-hidden
+        @click="$emit('update:modelValue', model - step)"
+      />
+      <div
+        class="value"
+        :class="{ disabled }"
+      >
+        {{ model }}
+      </div>
+      <button
+        class="btn-plus"
+        :disabled="disabled || (max ? model + step > max : false)"
+        aria-hidden
+        @click="$emit('update:modelValue', model + step)"
+      />
+    </div>
+    <FormStructureError
+      v-if="errorMessage && errorDisplay"
+      v-bind="{ size, errorMessage }"
+    />
+  </FormStructureContainer>
+</template>
+
+<script setup>
+import { useField } from "vee-validate";
+const props = defineProps({
+  title: { type: String, required: false },
+  label: { type: String, required: false },
+  tooltip: { type: String, required: false },
+  layout: { type: String, required: false, default: "vertical" },
+  size: { type: String, required: false, default: "md" },
+  max: { type: Number, required: false },
+  min: { type: Number, required: false, default: 0 },
+  step: { type: Number, required: false, default: 1 },
+  validation: { type: Object, required: false },
+  validationMode: { type: String, required: false, default: "change" },
+  errorDisplay: { type: Boolean, required: false, default: true },
+  disabled: { type: null, required: false }
+});
+const model = defineModel({
+  required: true,
+  default: 0
+});
+const { errorMessage, meta, validate } = useField("input", props.validation, {
+  validateOnValueUpdate: props.validationMode == "change",
+  syncVModel: true
+});
+defineExpose({ errorMessage, meta, validate });
+defineEmits(["update:modelValue"]);
+</script>
+
+<style lang="scss" scoped>
+.number-input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 6px 0;
+
+  button {
+    position: relative;
+    width: 32px;
+    height: 32px;
+    background: none;
+    border-width: 2px;
+    border-style: solid;
+    border-color: $main-blue;
+    background: $extra-light-blue;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    &:before,
+    &:after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 12px;
+      height: 2px;
+      background-color: $main-blue;
+      transition: all 0.2s ease-in-out;
+    }
+
+    &:hover:not(:disabled) {
+      border-color: $dark-blue;
+      background: $light-blue;
+
+      &:before,
+      &:after {
+        background-color: $dark-blue;
+      }
+    }
+
+    &:disabled {
+      cursor: auto;
+      border-color: $input-disabled-color;
+      background: none;
+
+      &:before,
+      &:after {
+        background-color: $input-disabled-color;
+      }
+    }
+
+    &.btn-minus {
+      &:before {
+        content: "";
+        transform: translate(-50%);
+      }
+    }
+
+    &.btn-plus {
+      &:before {
+        content: "";
+        transform: translate(-50%);
+      }
+
+      &:after {
+        content: "";
+        transform: translate(-50%) rotate(90deg);
+      }
+    }
+  }
+
+  .value {
+    width: 20px;
+    text-align: center;
+    font-size: 18px;
+    line-height: 22px;
+    user-select: none;
+
+    &.disabled {
+      color: $light-grey;
+    }
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    left: 0;
+    top: 0;
+  }
+}
+</style>

package/dist/runtime/components/form/NumberInput.vue.d.ts

@@ -0,0 +1,41 @@
+import type { InputHTMLAttributes } from 'vue';
+import type { Lazy, Schema } from 'yup';
+type __VLS_Props = {
+    title?: string;
+    label?: string;
+    tooltip?: string;
+    layout?: 'vertical' | 'horizontal';
+    size?: 'sm' | 'md' | 'lg';
+    max?: number;
+    min?: number;
+    step?: number;
+    validation?: Schema | Lazy<any>;
+    validationMode?: 'change' | 'none';
+    errorDisplay?: boolean;
+    disabled?: InputHTMLAttributes['disabled'];
+};
+declare const __VLS_defaultModels: {
+    modelValue: number;
+};
+type __VLS_ModelProps = {
+    modelValue: typeof __VLS_defaultModels['modelValue'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    errorMessage: import("vue").Ref<string | undefined, string | undefined>;
+    meta: import("vee-validate").FieldMeta<unknown>;
+    validate: import("vee-validate").FieldValidator<unknown>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "none";
+    layout: "vertical" | "horizontal";
+    min: number;
+    step: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/PhoneInput.d.vue.ts

@@ -0,0 +1,44 @@
+import { type InputHTMLAttributes } from 'vue';
+import type { Lazy, Schema } from 'yup';
+type __VLS_Props = {
+    title?: string;
+    label?: string;
+    tooltip?: string;
+    description?: string;
+    placeholder?: InputHTMLAttributes['placeholder'];
+    layout?: 'vertical' | 'horizontal';
+    size?: 'sm' | 'md' | 'lg';
+    validation?: Schema | Lazy<any>;
+    validationMode?: 'change' | 'blur' | 'none';
+    errorDisplay?: boolean;
+    countryCode?: string;
+    id?: InputHTMLAttributes['id'];
+    disabled?: InputHTMLAttributes['disabled'];
+    autocomplete?: InputHTMLAttributes['autocomplete'];
+};
+declare const __VLS_defaultModels: {
+    countryCode: string;
+};
+type __VLS_ModelProps = {
+    modelValue: any;
+    'countryCode'?: typeof __VLS_defaultModels['countryCode'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    errorMessage: import("vue").Ref<string | undefined, string | undefined>;
+    meta: import("vee-validate").FieldMeta<unknown>;
+    validate: import("vee-validate").FieldValidator<unknown>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+    "update:countryCode": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:countryCode"?: ((value: string) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "blur" | "none";
+    layout: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/PhoneInput.vue

@@ -0,0 +1,143 @@
+<template>
+  <FormStructureContainer v-bind="{ layout }">
+    <FormStructureTitle
+      v-if="title"
+      v-bind="{ title, tooltip, size, disabled }"
+    />
+
+    <div
+      ref="inputWrapper"
+      class="input-wrapper"
+      :class="{ error: errorMessage }"
+    >
+      <FormSelectInput
+        v-bind="{ size, disabled }"
+        v-model="phoneCountryCode"
+        class="input-country-code"
+        :options="countryCodeOptions"
+        :search-filter="{
+  placeholder: 'Pesquise o seu indicativo',
+  noResults: 'N\xE3o foram encontrados indicativos'
+}"
+        :relative-el="inputWrapper"
+        :resize-on-update="true"
+      />
+      <input
+        ref="inputEl"
+        v-bind="{ id, disabled, autocomplete, placeholder }"
+        v-model="model"
+        v-maska="maskOptions"
+        :class="[`size-${size}`]"
+        type="tel"
+        inputmode="numeric"
+        :maxlength="phoneDigits[phoneCountryCode]"
+        :aria-label="label || title"
+        @blur="handleBlur($event, validationMode == 'blur')"
+      >
+    </div>
+
+    <FormStructureDescription
+      v-if="description"
+      v-bind="{ description, size, disabled }"
+    />
+
+    <FormStructureError
+      v-if="errorMessage && errorDisplay"
+      v-bind="{ size, errorMessage }"
+    />
+  </FormStructureContainer>
+</template>
+
+<script setup>
+import { useField } from "vee-validate";
+import { computed, ref } from "vue";
+import { vMaska } from "maska/vue";
+import countryCodeOptions from "../../data/dialCodes";
+import phoneDigits from "../../data/phoneDigits";
+const props = defineProps({
+  title: { type: String, required: false },
+  label: { type: String, required: false },
+  tooltip: { type: String, required: false },
+  description: { type: String, required: false },
+  placeholder: { type: null, required: false },
+  layout: { type: String, required: false, default: "vertical" },
+  size: { type: String, required: false, default: "md" },
+  validation: { type: Object, required: false },
+  validationMode: { type: String, required: false, default: "blur" },
+  errorDisplay: { type: Boolean, required: false, default: true },
+  countryCode: { type: String, required: false },
+  id: { type: null, required: false },
+  disabled: { type: null, required: false },
+  autocomplete: { type: null, required: false }
+});
+const inputEl = ref();
+const inputWrapper = ref();
+const model = defineModel({
+  required: true
+});
+const maskOptions = computed(() => ({
+  mask: () => {
+    let digits = "";
+    const maxDigits = phoneDigits[phoneCountryCode.value];
+    for (let i = 0; i < maxDigits; i++) {
+      digits += "#";
+    }
+    return digits;
+  }
+}));
+const phoneCountryCode = defineModel("countryCode", {
+  default: "351"
+});
+const { errorMessage, meta, handleBlur, validate } = useField(
+  "input",
+  props.validation,
+  {
+    validateOnValueUpdate: props.validationMode == "change",
+    syncVModel: true
+  }
+);
+defineExpose({ errorMessage, meta, validate });
+</script>
+
+<style lang="scss" scoped>
+.input-wrapper {
+  display: grid;
+  grid-template-columns: auto 1fr;
+
+  .input-country-code {
+    position: relative;
+    z-index: 1;
+
+    :deep(.select-toggle) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  input {
+    @include input-template;
+    position: relative;
+    z-index: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: -1px;
+    width: calc(100% + 1px);
+
+    &:focus {
+      z-index: 2;
+    }
+  }
+
+  &.error {
+    input {
+      @include input-error;
+    }
+
+    .input-country-code {
+      :deep(.select-toggle) {
+        @include input-error;
+      }
+    }
+  }
+}
+</style>

package/dist/runtime/components/form/PhoneInput.vue.d.ts

@@ -0,0 +1,44 @@
+import { type InputHTMLAttributes } from 'vue';
+import type { Lazy, Schema } from 'yup';
+type __VLS_Props = {
+    title?: string;
+    label?: string;
+    tooltip?: string;
+    description?: string;
+    placeholder?: InputHTMLAttributes['placeholder'];
+    layout?: 'vertical' | 'horizontal';
+    size?: 'sm' | 'md' | 'lg';
+    validation?: Schema | Lazy<any>;
+    validationMode?: 'change' | 'blur' | 'none';
+    errorDisplay?: boolean;
+    countryCode?: string;
+    id?: InputHTMLAttributes['id'];
+    disabled?: InputHTMLAttributes['disabled'];
+    autocomplete?: InputHTMLAttributes['autocomplete'];
+};
+declare const __VLS_defaultModels: {
+    countryCode: string;
+};
+type __VLS_ModelProps = {
+    modelValue: any;
+    'countryCode'?: typeof __VLS_defaultModels['countryCode'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    errorMessage: import("vue").Ref<string | undefined, string | undefined>;
+    meta: import("vee-validate").FieldMeta<unknown>;
+    validate: import("vee-validate").FieldValidator<unknown>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+    "update:countryCode": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:countryCode"?: ((value: string) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "blur" | "none";
+    layout: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/RadioInput.d.vue.ts

@@ -0,0 +1,42 @@
+import type { InputHTMLAttributes } from "vue";
+import type { Lazy, Schema } from "yup";
+type __VLS_Props = {
+    name: string;
+    value: any;
+    label: string;
+    disabled?: InputHTMLAttributes["disabled"];
+    size?: "sm" | "md" | "lg";
+    error?: boolean;
+    errorDisplay?: boolean;
+    validation?: Schema | Lazy<any>;
+    validationMode?: "change" | "none";
+    radioStyle?: "default" | "button";
+};
+type __VLS_ModelProps = {
+    modelValue: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    errorMessage: import("vue").Ref<string | undefined, string | undefined>;
+    meta: import("vee-validate").FieldMeta<unknown>;
+    validate: import("vee-validate").FieldValidator<unknown>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    errorDisplay: boolean;
+    radioStyle: "default" | "button";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};