cja-phoenix 1.2.39 → 1.2.41

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

@@ -0,0 +1,37 @@
+import { type InputHTMLAttributes } from 'vue';
+import type { Lazy, Schema } from 'yup';
+type __VLS_Props = {
+    title?: string;
+    label?: string;
+    tooltip?: string;
+    placeholder?: InputHTMLAttributes['placeholder'];
+    layout?: 'vertical' | 'horizontal';
+    size?: 'sm' | 'md' | 'lg';
+    validation?: Schema | Lazy<any>;
+    validationMode?: 'change' | 'blur' | 'none';
+    errorDisplay?: boolean;
+    id?: InputHTMLAttributes['id'];
+    disabled?: InputHTMLAttributes['disabled'];
+    currency?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: any;
+};
+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;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "blur" | "none";
+    layout: "vertical" | "horizontal";
+    currency: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,40 @@
+import { type InputHTMLAttributes } from 'vue';
+import type { Lazy, Schema } from 'yup';
+import type { DateFormat } from '../../types/Form.js';
+type __VLS_Props = {
+    title?: string;
+    label?: string;
+    tooltip?: string;
+    placeholder?: InputHTMLAttributes['placeholder'];
+    layout?: 'vertical' | 'horizontal';
+    size?: 'sm' | 'md' | 'lg';
+    validation?: Schema | Lazy<any>;
+    validationMode?: 'change' | 'blur' | 'none';
+    errorDisplay?: boolean;
+    id?: InputHTMLAttributes['id'];
+    disabled?: InputHTMLAttributes['disabled'];
+    dateFormat?: DateFormat;
+    minDate?: string;
+    maxDate?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: InputHTMLAttributes['value'];
+};
+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;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "blur" | "none";
+    layout: "vertical" | "horizontal";
+    dateFormat: DateFormat;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,325 @@
+<template>
+  <FormStructureContainer v-bind="{ layout }">
+    <FormStructureTitle
+      v-if="title"
+      v-bind="{ title, tooltip, size, disabled }"
+    />
+
+    <div
+      ref="inputWrapper"
+      class="input-wrapper"
+      :class="{
+  error: errorMessage
+}"
+    >
+      <input
+        v-bind="{ id, disabled }"
+        ref="inputEl"
+        v-model="model"
+        v-maska="maskOptions"
+        :class="[`size-${size}`]"
+        dateFormat="numeric"
+        type="text"
+        :placeholder="placeholder || defaultPlaceholder"
+        :aria-label="label || title"
+        @focus="datepickerActive = false"
+        @blur="handleBlur($event, validationMode == 'blur')"
+      >
+
+      <ClientOnly>
+        <DatePicker
+          v-model.string="datepickerModel"
+          :popover="false"
+          locale="pt"
+          v-bind="{ masks, minDate, maxDate }"
+          is-required
+          trim-weeks
+          :update-on-input="false"
+          @popover-did-hide="handleBlur($event, validationMode == 'blur')"
+          @dayclick="setModel($event)"
+        >
+          <template #default="{ togglePopover }">
+            <button
+              class="datepicker-btn"
+              aria-label="Abrir calendário"
+              @click="togglePopover"
+            >
+              <span class="m-cgg-icon--calendar" />
+            </button>
+          </template>
+        </DatePicker>
+      </ClientOnly>
+    </div>
+
+    <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 { DatePicker } from "@angelblanco/v-calendar";
+const props = defineProps({
+  title: { type: String, required: false },
+  label: { type: String, required: false },
+  tooltip: { 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 },
+  id: { type: null, required: false },
+  disabled: { type: null, required: false },
+  dateFormat: { type: String, required: false, default: "DD/MM/YYYY" },
+  minDate: { type: String, required: false },
+  maxDate: { type: String, required: false }
+});
+const datepickerModel = ref();
+const defaultPlaceholder = computed(
+  () => props.dateFormat.replaceAll("Y", "a").toLowerCase()
+);
+const model = defineModel({ type: null, ...{
+  required: true,
+  set: (v) => {
+    datepickerModel.value = v;
+    return v;
+  }
+} });
+const setModel = (e) => {
+  if (!e.isDisabled) {
+    const parsedDate = e.id.split("-");
+    switch (props.dateFormat) {
+      case "DD/MM/YYYY":
+        parsedDate.reverse();
+        break;
+      case "MM/YYYY":
+        parsedDate.reverse().splice(0, 1);
+        break;
+      case "YYYY":
+        parsedDate.reverse().splice(0, 2);
+        break;
+      case "YYYY/MM":
+        parsedDate.splice(2, 1);
+        break;
+    }
+    model.value = parsedDate.join("/");
+  }
+};
+const { errorMessage, meta, handleBlur, validate } = useField(
+  "input",
+  props.validation,
+  {
+    validateOnValueUpdate: props.validationMode == "change",
+    syncVModel: true
+  }
+);
+const inputEl = ref();
+const inputWrapper = ref();
+const masks = ref({
+  modelValue: props.dateFormat
+});
+const maskOptions = {
+  mask: () => {
+    switch (props.dateFormat) {
+      case "YYYY":
+        return "####";
+      case "MM/YYYY":
+        return "##/####";
+      case "DD/MM/YYYY":
+        return "##/##/####";
+      case "YYYY/MM/DD":
+        return "####/##/##";
+      case "YYYY/MM":
+        return "####/##";
+    }
+  }
+};
+const datepickerActive = ref(false);
+defineExpose({ errorMessage, meta, validate });
+</script>
+
+<style lang="scss" scoped>
+.input-wrapper {
+  position: relative;
+
+  input {
+    @include input-template;
+
+    &.size-sm {
+      + .datepicker-btn {
+        font-size: 14px;
+        right: $sm-padding-h;
+      }
+    }
+
+    &.size-md {
+      + .datepicker-btn {
+        font-size: 16px;
+        right: $md-padding-h;
+      }
+    }
+
+    &.size-lg {
+      + .datepicker-btn {
+        font-size: 18px;
+        right: $lg-padding-h;
+      }
+    }
+  }
+
+  &.error {
+    input {
+      @include input-error;
+    }
+  }
+
+  .datepicker-btn {
+    display: flex;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+      color: $main-blue;
+    }
+  }
+
+  :deep(.vc-date-picker-content) {
+    .vc-light {
+      --vc-hover-bg: #{$light-blue};
+      --vc-color: #{$extra-dark-blue};
+      --vc-weekday-color: #{$extra-dark-blue};
+      --vc-gray-400: #{$light-grey};
+      --vc-header-arrow-color: #{$main-blue};
+      --vc-focus-ring: none;
+      --vc-nav-hover-bg: #{$light-blue};
+      --vc-header-title-color: #{$main-blue};
+      --vc-nav-title-color: #{$main-blue};
+      --vc-popover-content-bg: #{$white};
+    }
+
+    .vc-light.vc-attr,
+    .vc-light .vc-attr,
+    .vc-blue {
+      --vc-accent-500: #{$main-blue};
+      --vc-accent-600: #{$main-blue};
+    }
+
+    .vc-popover-caret {
+      display: none;
+    }
+
+    .vc-header,
+    .vc-nav-header {
+      .vc-title,
+      .vc-nav-title {
+        text-transform: capitalize;
+        background: $extra-light-blue;
+        font-size: 12px;
+        font-weight: 700;
+        transition: all 0.2s ease-in-out;
+        border-radius: 8px;
+        border: 1px solid transparent;
+
+        &:hover {
+          opacity: 1;
+          background: $light-blue;
+        }
+
+        &:focus {
+          border-color: $main-blue;
+        }
+      }
+
+      .vc-arrow,
+      .vc-nav-arrow {
+        background: none;
+
+        &:hover {
+          color: $dark-blue;
+        }
+
+        &:focus {
+          color: $extra-dark-blue;
+        }
+
+        &:disabled {
+          opacity: 1;
+          color: $blue-grey;
+        }
+      }
+    }
+
+    .vc-container {
+      .vc-day {
+        .vc-highlights + .vc-day-content:hover {
+          background-color: var(--vc-highlight-solid-bg);
+        }
+
+        .vc-day-content {
+          transition: all 0.2s ease-in-out;
+
+          &:focus:not(.vc-disabled) {
+            background-color: $dark-blue;
+            color: $white;
+          }
+        }
+
+        .vc-disabled {
+          background: none;
+          cursor: auto;
+        }
+      }
+    }
+
+    .vc-nav-container {
+      .vc-nav-items {
+        margin-top: 8px;
+      }
+
+      .vc-nav-item {
+        text-transform: capitalize;
+        transition: all 0.2s ease-in-out;
+
+        &:not(.is-active):not(:hover) {
+          background: transparent;
+        }
+
+        &.is-active:focus {
+          background-color: $dark-blue;
+        }
+
+        &:disabled {
+          opacity: 1;
+          color: $light-grey;
+        }
+      }
+    }
+
+    .vc-popover-content-wrapper {
+      position: absolute;
+      inset: 0px auto auto 0px;
+      margin: 0px;
+      transform: translate3d(43px, 42px, 0px);
+
+      .vc-popover-content.direction-bottom {
+        margin-top: 8px;
+      }
+    }
+  }
+
+  :deep(.vc-popover-content-wrapper) {
+    --popover-vertical-content-offset: 28px;
+  }
+}
+</style>

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

@@ -0,0 +1,40 @@
+import { type InputHTMLAttributes } from 'vue';
+import type { Lazy, Schema } from 'yup';
+import type { DateFormat } from '../../types/Form.js';
+type __VLS_Props = {
+    title?: string;
+    label?: string;
+    tooltip?: string;
+    placeholder?: InputHTMLAttributes['placeholder'];
+    layout?: 'vertical' | 'horizontal';
+    size?: 'sm' | 'md' | 'lg';
+    validation?: Schema | Lazy<any>;
+    validationMode?: 'change' | 'blur' | 'none';
+    errorDisplay?: boolean;
+    id?: InputHTMLAttributes['id'];
+    disabled?: InputHTMLAttributes['disabled'];
+    dateFormat?: DateFormat;
+    minDate?: string;
+    maxDate?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: InputHTMLAttributes['value'];
+};
+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;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "blur" | "none";
+    layout: "vertical" | "horizontal";
+    dateFormat: DateFormat;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/FileInput.d.vue.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/FileInput.vue

@@ -0,0 +1,202 @@
+<template>
+  <FormStructureContainer v-bind="{ layout }">
+    <FormStructureTitle
+      v-if="title"
+      v-bind="{ title, tooltip, size, disabled }"
+    />
+
+    <div
+      class="input-wrapper"
+      :class="[
+  `size-${size}`,
+  `variant-${variant}`,
+  {
+    error: errorMessage,
+    success: model?.name,
+    disabled
+  }
+]"
+      @click="handleInput"
+    >
+      <span
+        v-if="variant == 'white'"
+        class="m-cgg-icon--document"
+      />
+      <div class="input-text-wrapper">
+        <div class="input-text">
+          {{
+            model?.name && model?.extension ? `${model.name}.${model.extension}` : placeholder
+          }}
+        </div>
+      </div>
+      <div class="icon-wrapper">
+        <span
+          v-if="!model?.name"
+          class="m-cgg-icon--upload"
+        />
+        <span
+          v-else-if="model?.name && hasDelete"
+          class="m-cgg-icon--cross"
+          @click.stop="deleteFile"
+        />
+        <span
+          v-else-if="model?.name"
+          class="m-cgg-icon--change"
+        />
+      </div>
+    </div>
+
+    <input
+      v-bind="{ id }"
+      ref="inputElement"
+      type="file"
+      name="file-input"
+      :aria-label="label || title"
+      :accept="accept?.map((a) => `.${a}`).join(',')"
+      @change="updateFile"
+    >
+
+    <FormStructureDescription
+      v-if="description"
+      v-bind="{ description, size, disabled }"
+    />
+
+    <FormStructureError
+      v-if="errorMessage && errorDisplay"
+      v-bind="{ size, errorMessage }"
+    />
+  </FormStructureContainer>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useField } from "vee-validate";
+const props = defineProps({
+  id: { type: null, required: false },
+  layout: { type: String, required: false, default: "vertical" },
+  size: { type: String, required: false, default: "md" },
+  title: { type: String, required: false },
+  label: { type: String, required: false },
+  tooltip: { type: String, required: false },
+  placeholder: { type: String, required: false, default: "Anexar ficheiro" },
+  errorDisplay: { type: Boolean, required: false, default: true },
+  description: { type: String, required: false },
+  disabled: { type: null, required: false },
+  validation: { type: Object, required: false },
+  validationMode: { type: String, required: false, default: "change" },
+  variant: { type: String, required: false, default: "white" },
+  accept: { type: Array, required: false },
+  hasDelete: { type: Boolean, required: false }
+});
+const model = defineModel({
+  required: true
+});
+const inputElement = ref();
+const { errorMessage, meta, validate } = useField("input", props.validation, {
+  validateOnValueUpdate: props.validationMode == "change",
+  syncVModel: true
+});
+const handleInput = () => {
+  if (!props.disabled) {
+    inputElement.value.click();
+  }
+};
+const updateFile = () => {
+  const file = inputElement.value.files[0];
+  model.value = {
+    name: file.name.match(/^.+(?=\..)/g)[0],
+    extension: file.name.match(/[^.]+$/g)[0],
+    file
+  };
+};
+const deleteFile = () => {
+  inputElement.value.value = null;
+  model.value = void 0;
+  emit("update:delete");
+};
+const emit = defineEmits(["update:delete"]);
+defineExpose({
+  errorMessage,
+  meta,
+  validate,
+  handleInput,
+  updateFile,
+  inputElement
+});
+</script>
+
+<style lang="scss" scoped>
+.input-wrapper {
+  @include input-template;
+  display: grid;
+  grid-template-columns: 18px 1fr 18px;
+  align-items: center;
+  cursor: pointer;
+  gap: 8px;
+  user-select: none;
+
+  &.success {
+    border-color: $main-blue;
+  }
+
+  &.error {
+    border-color: $input-border-error-color;
+  }
+
+  &.disabled,
+  &.disabled .icon-wrapper * {
+    color: $light-grey;
+    pointer-events: none;
+  }
+
+  .input-text-wrapper {
+    overflow: hidden;
+
+    .input-text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      text-wrap-mode: nowrap;
+    }
+  }
+
+  .m-cgg-icon--document {
+    font-size: 18px;
+  }
+
+  .icon-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 10px;
+    font-size: 18px;
+  }
+
+  .m-cgg-icon--upload,
+  .m-cgg-icon--change {
+    color: $main-blue;
+  }
+
+  .m-cgg-icon--cross {
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+      color: $main-blue;
+    }
+  }
+
+  &.variant-blue {
+    background-color: $extra-light-blue;
+    border-color: $extra-light-blue;
+    grid-template-columns: 1fr 18px;
+
+    &.success {
+      border-color: $main-blue;
+    }
+  }
+}
+
+input[type="file"] {
+  display: none;
+}
+</style>