cja-phoenix 0.2.1 → 0.2.3

package/dist/types/components/index.d.ts

@@ -3,15 +3,20 @@ import CjaButton from "./structural/CjaButton.vue";
 import LoadingSpinner from "./structural/LoadingSpinner.vue";
 import ContentTabs from "./structural/ContentTabs.vue";
 import Scaffold from "./structural/Scaffold.vue";
+import GridContainer from "./structural/GridContainer.vue";
+import GridItem from "./structural/GridItem.vue";
 import TextInput from "./forms/TextInput.vue";
 import PhoneInput from "./forms/PhoneInput.vue";
 import CheckboxInput from "./forms/CheckboxInput.vue";
 import TileCheckboxInput from "./forms/TileCheckboxInput.vue";
 import SelectInput from "./forms/SelectInput.vue";
 import FileInput from "./forms/FileInput.vue";
+import NumberInput from "./forms/NumberInput.vue";
 import InputToggle from "./forms/InputToggle.vue";
 import CollapseContainer from "./structural/CollapseContainer.vue";
-import GridContainer from "./structural/GridContainer.vue";
-import GridItem from "./structural/GridItem.vue";
+import SelectionTiles from "./forms/SelectionTiles.vue";
 import ProductDetails from "./composite/ProductDetails.vue";
-export { Modal, CjaButton, TextInput, PhoneInput, CheckboxInput, TileCheckboxInput, SelectInput, LoadingSpinner, Scaffold, ProductDetails, InputToggle, FileInput, ContentTabs, CollapseContainer, GridContainer, GridItem, };
+import FunnelSubmit from "./composite/FunnelSubmit.vue";
+import FunnelSummary from "./composite/FunnelSummary.vue";
+import FunnelTitle from "./composite/FunnelTitle.vue";
+export { Modal, CjaButton, TextInput, PhoneInput, CheckboxInput, TileCheckboxInput, NumberInput, SelectInput, SelectionTiles, LoadingSpinner, Scaffold, ProductDetails, InputToggle, FileInput, ContentTabs, CollapseContainer, GridContainer, GridItem, FunnelSubmit, FunnelSummary, FunnelTitle, };

package/dist/types/components/structural/CjaButton.vue.d.ts

@@ -3,7 +3,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     color?: "blue" | "orange" | "white" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     icon?: string | undefined;
-    iconPosition?: "right" | "left" | undefined;
+    iconPosition?: "left" | "right" | undefined;
+    loading?: boolean | undefined;
 }>, {
     type: string;
     color: string;
@@ -14,7 +15,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     color?: "blue" | "orange" | "white" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     icon?: string | undefined;
-    iconPosition?: "right" | "left" | undefined;
+    iconPosition?: "left" | "right" | undefined;
+    loading?: boolean | undefined;
 }>, {
     type: string;
     color: string;

package/dist/types/components/structural/GridItem.vue.d.ts

@@ -1,11 +1,11 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    sizeSm: 1 | 2 | 3 | 4;
-    sizeMd: 1 | 2 | 3 | 4;
-    sizeLg: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    sizeSm?: 2 | 1 | 3 | 4 | undefined;
+    sizeMd?: 2 | 1 | 3 | 4 | undefined;
+    sizeLg?: 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    sizeSm: 1 | 2 | 3 | 4;
-    sizeMd: 1 | 2 | 3 | 4;
-    sizeLg: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    sizeSm?: 2 | 1 | 3 | 4 | undefined;
+    sizeMd?: 2 | 1 | 3 | 4 | undefined;
+    sizeLg?: 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined;
 }>>>, {}>, {
     default: (_: {}) => any;
 }>;

package/dist/types/types/TileOption.d.ts

@@ -1,7 +1,8 @@
 export interface TileOption {
-    value: [string, number, boolean];
-    title: string;
+    value: any;
+    label: string;
     description?: string;
+    descriptionLong?: string;
     tooltip?: string;
     image?: string;
 }

package/dist/types/utils/RouteGenerator.d.ts

@@ -1,2 +1,2 @@
 import { RouteRecordRaw } from "vue-router";
-export declare const generateRoutes: (routes: RouteRecordRaw[]) => RouteRecordRaw[];
+export declare const generateRoutes: (routes: any[]) => RouteRecordRaw[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cja-phoenix",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "scripts": {
     "build:dev": "rimraf dist && vue-tsc && vite build -m development",
     "build:link": "rimraf dist && vue-tsc && vite build -m development && npm link",

package/src/components/composite/FunnelSubmit.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="button-container">
+    <CjaButton
+      :color="'orange'"
+      :size="'lg'"
+      :loading="loading"
+      @click="$emit('btn:click')"
+    >
+      <slot>Continuar</slot>
+    </CjaButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import CjaButton from "../structural/CjaButton.vue";
+
+defineProps<{
+  loading?: boolean;
+}>();
+
+defineEmits(["btn:click"]);
+</script>
+
+<style lang="scss" scoped>
+.button-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 20px 15px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  @media screen and (min-width: 1200px) {
+    position: static;
+    margin: 30px 0 0;
+    padding: 0;
+  }
+}
+</style>

package/src/components/composite/FunnelSummary.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="summary-container">
+    <div class="summary-wrapper">
+      <div class="title-container">
+        <h3>{{ title }}</h3>
+        <button
+          @click="
+            editMode = true;
+            formLock = false;
+            $emit('btn:edit');
+          "
+        >
+          <span class="m-cgg-icon--edit"></span>
+          <span>{{ customText.edit }}</span>
+        </button>
+      </div>
+      <div class="info-container" :class="{ 'edit-mode': editMode }">
+        <div class="info-wrapper" v-for="info in infoList">
+          <div class="info-title">
+            {{ info.title }}
+          </div>
+          <div class="info-display" v-if="!editMode">
+            {{ info.value || "-" }}
+          </div>
+          <div class="info-edit" v-else>
+            <slot :name="info.control"></slot>
+          </div>
+        </div>
+      </div>
+      <div class="summary-footer" v-if="editMode">
+        <CjaButton :type="'secondary'" :size="'sm'" @click="cancelEdit">
+          {{ customText.cancel }}
+        </CjaButton>
+        <CjaButton :size="'sm'" @click="saveEdit">
+          {{ customText.save }}
+        </CjaButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import CjaButton from "../structural/CjaButton.vue";
+
+const editMode = ref(false);
+
+const formLock = ref();
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    customText?: {
+      edit?: string;
+      cancel?: string;
+      save?: string;
+    };
+    infoList: {
+      title: string;
+      value: any;
+      control: string;
+    }[];
+    validateForm: () => boolean;
+  }>(),
+  {
+    title: "O seu resumo",
+    customText: () => ({
+      edit: "Editar",
+      cancel: "Cancelar",
+      save: "Guardar",
+    }),
+  }
+);
+
+const cancelEdit = () => {
+  if (!formLock.value) {
+    formLock.value = true;
+    editMode.value = false;
+    emit("btn:cancel");
+  }
+};
+
+const saveEdit = () => {
+  if (props.validateForm() && !formLock.value) {
+    formLock.value = true;
+    editMode.value = false;
+
+    emit("btn:save");
+  }
+};
+
+const emit = defineEmits(["btn:cancel", "btn:save", "btn:edit"]);
+</script>
+
+<style lang="scss" scoped>
+.summary-container {
+  .summary-wrapper {
+    background: #ffffff;
+    border: 1px solid #dedede;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+    border-radius: 16px;
+    padding: 20px 30px;
+
+    .title-container {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 10px;
+      margin-bottom: 10px;
+      border-bottom: 1px solid #dedede;
+
+      h3 {
+        font-weight: 700;
+        font-size: 18px;
+        line-height: 22px;
+        margin: 0;
+      }
+
+      button {
+        padding: 0;
+        border: none;
+        background: none;
+        color: #9fabbc;
+        font-size: 14px;
+        line-height: 14px;
+
+        &:focus,
+        &:focus-within {
+          outline: none;
+        }
+
+        span.m-cgg-icon--edit {
+          margin-right: 10px;
+        }
+      }
+    }
+
+    .info-container {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+
+      .info-wrapper {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 10px 20px;
+        font-size: 16px;
+        line-height: 16px;
+
+        .info-display {
+          text-align: right;
+          font-weight: 700;
+
+          &.active {
+            color: #56924b;
+          }
+        }
+
+        .info-error {
+          margin-top: 0;
+        }
+      }
+
+      &.edit-mode .info-wrapper {
+        grid-template-columns: 1fr 1fr;
+        align-items: center;
+
+        .info-title {
+          grid-area: 1 / 1 / 2 / 2;
+        }
+        .info-edit {
+          grid-area: 1 / 2 / 2 / 3;
+        }
+        .info-error {
+          grid-area: 2 / 1 / 3 / 3;
+        }
+      }
+    }
+
+    .summary-footer {
+      margin-top: 20px;
+      padding-top: 15px;
+      border-top: 1px solid #dedede;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      gap: 10px;
+    }
+  }
+}
+</style>

package/src/components/composite/FunnelTitle.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="title-container">
+    <div class="title-wrapper">
+      <span>
+        {{ title }}
+      </span>
+      <span v-if="tooltip" class="m-cgg-icon--help" v-tippy="tooltip"></span>
+    </div>
+    <div class="description" v-if="description">
+      {{ description }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  title: string;
+  description?: string;
+  tooltip?: string;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.title-container {
+  text-align: center;
+  margin-bottom: 25px;
+
+  .title-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    line-height: 20px;
+    font-weight: 700;
+    margin-bottom: 20px;
+    color: #076b9c;
+
+    @media screen and (min-width: 768px) {
+      font-size: 26px;
+      line-height: 30px;
+    }
+
+    .m-cgg-icon--help {
+      flex-shrink: 0;
+      font-size: 20px;
+      color: #076b9c;
+    }
+  }
+
+  .description {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 20px;
+  }
+}
+</style>

package/src/components/forms/CheckboxInput.vue

@@ -22,7 +22,7 @@ import InputError from "./structure/InputError.vue";
 const props = withDefaults(
   defineProps<{
     label: string;
-    modelValue: boolean;
+    modelValue: HTMLInputElement["checked"] | undefined;
     error?: string;
     errorDisplay?: boolean;
   }>(),
@@ -74,8 +74,8 @@ const emit = defineEmits(["update:modelValue"]);
     }
 
     .text-container {
-      font-size: 10px;
-      line-height: 12px;
+      font-size: 12px;
+      line-height: 14px;
       user-select: none;
 
       a {

package/src/components/forms/NumberInput.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="number-input-container">
+    <div class="text-container" v-if="title">
+      <div class="title">
+        {{ title }}
+      </div>
+      <div class="description" v-if="description">
+        {{ description }}
+      </div>
+    </div>
+    <div class="controls-container">
+      <button
+        class="btn-minus"
+        :disabled="value - step < min"
+        @click="$emit('update:modelValue', value - step)"
+      ></button>
+      <div class="value">{{ value }}</div>
+      <button
+        class="btn-plus"
+        :disabled="max ? value + step > max : false"
+        @click="$emit('update:modelValue', value + step)"
+      ></button>
+    </div>
+  </div>
+  <InputError :error="errorMessage" v-if="errorMessage && errorDisplay" />
+</template>
+
+<script setup lang="ts">
+import { useField } from "vee-validate";
+import InputError from "./structure/InputError.vue";
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    description?: string;
+    modelValue: number;
+    max?: number;
+    min?: number;
+    step?: number;
+    validation?: any;
+    errorDisplay?: boolean;
+  }>(),
+  {
+    modelValue: 0,
+    min: 0,
+    step: 1,
+    errorDisplay: true,
+  }
+);
+
+defineEmits(["update:modelValue"]);
+
+const { value, errorMessage, meta, validate } = useField(
+  "input",
+  props.validation,
+  { initialValue: props.modelValue }
+);
+
+defineExpose({ errorMessage, meta, validate });
+</script>
+
+<style lang="scss" scoped>
+.number-input-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 30px;
+  padding: 20px;
+  border: 1px solid #dedede;
+  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.06);
+  border-radius: 8px;
+
+  .text-container {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    .title {
+      font-weight: 700;
+      font-size: 15px;
+      line-height: 18px;
+    }
+
+    .description {
+      font-size: 12px;
+      line-height: 12px;
+    }
+  }
+
+  .controls-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    button {
+      position: relative;
+      width: 32px;
+      height: 32px;
+      background: none;
+      border-width: 2px;
+      border-style: solid;
+      border-color: #979290;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+
+      &:before,
+      &:after {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 12px;
+        height: 2px;
+        background-color: #979290;
+        transition: all 0.2s ease-in-out;
+      }
+
+      &:hover {
+        border-color: #0d2745;
+
+        &:before,
+        &:after {
+          background-color: #0d2745;
+        }
+      }
+
+      &:disabled {
+        cursor: auto;
+        border-color: #cccbc8;
+
+        &:before,
+        &:after {
+          background-color: #cccbc8;
+        }
+      }
+
+      &.btn-minus {
+        &:before {
+          content: "";
+        }
+      }
+
+      &.btn-plus {
+        &:before {
+          content: "";
+        }
+
+        &:after {
+          content: "";
+          transform: translateX(-50%) rotate(90deg);
+        }
+      }
+    }
+
+    .value {
+      width: 20px;
+      text-align: center;
+      font-size: 18px;
+      line-height: 22px;
+      color: #979290;
+      user-select: none;
+    }
+  }
+}
+</style>

package/src/components/forms/SelectInput.vue

@@ -147,17 +147,12 @@ const sizeReset = () => {
 };
 
 const resizeObserver = new ResizeObserver((entries) => {
-  const displayEl = entries[0].target.querySelector(
-    ".select-toggle .select-display"
-  ) as HTMLElement;
-
-  const elWidth = displayEl.getBoundingClientRect().width;
-
-  displayEl.style.whiteSpace = "nowrap";
-  displayEl.style.width = `${elWidth}px`;
-
   window.requestAnimationFrame(() => {
-    displayEl.style.width = `${elWidth}px`;
+    const displayEl = entries[0].target.querySelector(
+      ".select-toggle .select-display"
+    ) as HTMLElement;
+
+    displayEl.style.width = `${displayEl.getBoundingClientRect().width}px`;
     displayEl.style.whiteSpace = "nowrap";
   });
 });