cja-phoenix 0.2.3 → 0.2.4

package/src/components/forms/PhoneInput.vue

@@ -15,7 +15,10 @@
         :value="value"
         :autocomplete="autocomplete"
         @input="
-          emit('update:modelValue', (<HTMLInputElement>$event.target).value)
+          emit(
+            'update:modelValue',
+            Number((<HTMLInputElement>$event.target).value)
+          )
         "
       />
     </div>
@@ -46,7 +49,7 @@ const props = withDefaults(
     modelValue: InputHTMLAttributes["value"];
     id?: InputHTMLAttributes["id"];
     disabled?: InputHTMLAttributes["disabled"];
-    phoneCountryCode: number;
+    phoneCountryCode?: number;
     autocomplete?: InputHTMLAttributes["autocomplete"];
   }>(),
   {
@@ -73,14 +76,20 @@ onMounted(() => {
   inputEl.value.addEventListener("countrychange", () =>
     emit(
       "update:phoneCountryCode",
-      window.intlTelInputGlobals
-        .getInstance(inputEl.value)
-        .getSelectedCountryData().dialCode
+      Number(
+        window.intlTelInputGlobals
+          .getInstance(inputEl.value)
+          .getSelectedCountryData().dialCode
+      )
     )
   );
 
   intlTelInput(inputEl.value, {
-    initialCountry: "pt",
+    initialCountry: props.phoneCountryCode
+      ? window.intlTelInputGlobals
+          .getCountryData()
+          .find((c) => Number(c.dialCode) == props.phoneCountryCode)?.iso2
+      : "pt",
     preferredCountries: ["pt"],
     separateDialCode: true,
   });

package/src/components/forms/SelectionTiles.vue

@@ -7,8 +7,8 @@
         class="tile"
         :class="{
           active: multiselect
-            ? modelValue.includes(option.value)
-            : option.value == modelValue,
+            ? value.includes(option.value)
+            : option.value == value,
         }"
         @click="$emit('update:modelValue', option.value)"
         v-tippy="option.tooltip ? option.tooltip : ''"
@@ -72,6 +72,8 @@ defineEmits(["update:modelValue"]);
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/shadows.scss";
+
 .tiles-container {
   display: grid;
   width: 100%;
@@ -95,10 +97,20 @@ defineEmits(["update:modelValue"]);
       padding-right: 20px;
     }
 
-    &:hover,
+    @mixin activeStyle {
+      box-shadow: $box-shadow-m;
+      background-color: #f4f9fc;
+      border-color: #076b9c;
+    }
+
     &.active {
-      color: #076b9c;
-      box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
+      @include activeStyle;
+    }
+
+    @media (any-hover: hover) {
+      &:hover {
+        @include activeStyle;
+      }
     }
 
     .text-wrapper {
@@ -167,6 +179,7 @@ defineEmits(["update:modelValue"]);
   &.layout-image {
     .tile {
       justify-content: center;
+      text-align: center;
 
       .image-container img {
         display: block;

package/src/components/index.ts

@@ -17,10 +17,13 @@ import InputToggle from "./forms/InputToggle.vue";
 import CollapseContainer from "./structural/CollapseContainer.vue";
 import SelectionTiles from "./forms/SelectionTiles.vue";
 
-import ProductDetails from "./composite/ProductDetails.vue";
+import JourneyMacroSteps from "./composite/JourneyMacroSteps.vue";
+import FunnelLayout from "./composite/FunnelLayout.vue";
 import FunnelSubmit from "./composite/FunnelSubmit.vue";
 import FunnelSummary from "./composite/FunnelSummary.vue";
 import FunnelTitle from "./composite/FunnelTitle.vue";
+import ProductDetails from "./composite/ProductDetails.vue";
+import CjaMenuBar from "./composite/CjaMenuBar.vue";
 
 export {
   Modal,
@@ -41,7 +44,10 @@ export {
   CollapseContainer,
   GridContainer,
   GridItem,
+  FunnelLayout,
   FunnelSubmit,
   FunnelSummary,
   FunnelTitle,
+  JourneyMacroSteps,
+  CjaMenuBar,
 };

package/src/components/structural/CjaButton.vue

@@ -6,6 +6,7 @@
       `btn-size-${size}`,
       `btn-color-${color}`,
       `icon-${iconPosition}`,
+      { ['btn-loading']: loading },
     ]"
   >
     <Scaffold v-if="!loading">
@@ -135,7 +136,7 @@ withDefaults(
       cursor: auto;
     }
 
-    .spinner {
+    &.btn-loading .spinner {
       border-color: #fff;
       border-top-color: rgba(255, 255, 255, 0.2);
     }
@@ -165,14 +166,18 @@ withDefaults(
     flex-direction: row-reverse;
   }
 
-  .spinner {
-    width: 20px;
-    height: 20px;
-    border-width: 2px;
-    border-style: solid;
-    border-radius: 50%;
-    animation: spin 1s infinite;
-    animation-timing-function: linear;
+  &.btn-loading {
+    cursor: auto;
+
+    .spinner {
+      width: 20px;
+      height: 20px;
+      border-width: 2px;
+      border-style: solid;
+      border-radius: 50%;
+      animation: spin 1s infinite;
+      animation-timing-function: linear;
+    }
   }
 }
 

package/src/index.ts

@@ -18,6 +18,7 @@ import "./assets/iconia/style.scss";
 
 export default { install };
 
+export * from "./types";
 export * from "./components";
 export * from "./constants";
 export * from "./utils";

package/src/types/MacroStep.ts

@@ -0,0 +1,5 @@
+export interface MacroStep {
+  label: string;
+  icon: string;
+  status: "past" | "current" | "future";
+}

package/src/types/index.ts

@@ -0,0 +1,6 @@
+import { MacroStep } from "./MacroStep";
+import { Tab } from "./Tab";
+import { SelectOption } from "./SelectOption";
+import { TileOption } from "./TileOption";
+
+export type { MacroStep, Tab, SelectOption, TileOption };