cja-phoenix 0.0.13 → 0.0.14

package/src/assets/iconia/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'CGG-icomoon';
-  src:  url('fonts/CGG-icomoon.eot?qf25ux');
-  src:  url('fonts/CGG-icomoon.eot?qf25ux#iefix') format('embedded-opentype'),
-    url('fonts/CGG-icomoon.ttf?qf25ux') format('truetype'),
-    url('fonts/CGG-icomoon.woff?qf25ux') format('woff'),
-    url('fonts/CGG-icomoon.svg?qf25ux#CGG-icomoon') format('svg');
+  src:  url('fonts/CGG-icomoon.eot?cjnnpy');
+  src:  url('fonts/CGG-icomoon.eot?cjnnpy#iefix') format('embedded-opentype'),
+    url('fonts/CGG-icomoon.ttf?cjnnpy') format('truetype'),
+    url('fonts/CGG-icomoon.woff?cjnnpy') format('woff'),
+    url('fonts/CGG-icomoon.svg?cjnnpy#CGG-icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;

package/src/assets/iconia/style.scss

@@ -2,11 +2,11 @@
 
 @font-face {
   font-family: '#{$icomoon-font-family}';
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?qf25ux');
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?qf25ux#iefix') format('embedded-opentype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?qf25ux') format('truetype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?qf25ux') format('woff'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?qf25ux##{$icomoon-font-family}') format('svg');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?cjnnpy');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?cjnnpy#iefix') format('embedded-opentype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?cjnnpy') format('truetype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?cjnnpy') format('woff'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?cjnnpy##{$icomoon-font-family}') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;

package/src/components/composite/ProductDetails.vue

@@ -1,12 +1,7 @@
 <template>
   <Teleport to="body">
     <Transition name="details">
-      <div
-        class="overlay"
-        v-if="active"
-        :style="{ height: overlayHeight }"
-        @click.self="closeDetails"
-      >
+      <div class="overlay" v-if="active" @click.self="closeDetails">
         <div ref="detailsEl" class="details-container">
           <div class="details-header">
             <slot name="header"></slot>
@@ -15,7 +10,7 @@
               <span class="m-cgg-icon--cross2"></span>
             </div>
           </div>
-          <div class="details-wrapper">
+          <div class="details-body">
             <slot name="body"></slot>
           </div>
           <div class="details-footer" v-if="$slots.footer">
@@ -28,37 +23,18 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 
 const active = ref();
 const detailsEl = ref();
-const overlayHeight = ref();
+const headerEl = ref();
+const bodyEl = ref();
+const footerEl = ref();
 
 watch(active, () => {
   if (active.value) {
     document.body.style.overflow = "hidden";
     document.documentElement.style.overflow = "hidden";
-
-    if (window.outerWidth >= 992) {
-      requestAnimationFrame(() => {
-        const pageHeader = document.querySelector(".header") as HTMLElement;
-        const appHeader = document.querySelector("#app header") as HTMLElement;
-        const comboOffset = appHeader
-          ? pageHeader.clientHeight + appHeader.clientHeight
-          : pageHeader.clientHeight;
-        const headerOffset = appHeader?.clientHeight;
-
-        if (appHeader?.classList.contains("position-fixed")) {
-          overlayHeight.value = `calc(100% - ${headerOffset}px)`;
-        } else if (window.pageYOffset < comboOffset) {
-          overlayHeight.value = `calc(100% - ${
-            comboOffset - window.pageYOffset
-          }px)`;
-        }
-      });
-    } else {
-      overlayHeight.value = "";
-    }
   } else {
     document.body.style.overflow = "";
     document.documentElement.style.overflow = "";
@@ -90,23 +66,31 @@ defineExpose({ openDetails, closeDetails });
   }
 
   .details-container {
+    display: flex;
+    flex-direction: column;
     position: absolute;
     top: 0;
     right: 0;
     background-color: #fff;
-    height: calc(100% - 105px);
+    height: 100%;
     transition: all 0.3s linear;
 
     @media screen and (min-width: 992px) {
-      height: 100%;
+      width: 620px;
     }
 
     .details-header {
       display: flex;
       justify-content: space-between;
+      gap: 15px;
       align-items: center;
       background-color: #fff;
-      padding: 20px 30px;
+      padding: 15px;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+
+      @media screen and (min-width: 992px) {
+        padding: 20px 50px;
+      }
 
       .btn-close {
         display: flex;
@@ -121,19 +105,24 @@ defineExpose({ openDetails, closeDetails });
       }
     }
 
-    .details-wrapper {
+    .details-body {
+      flex-grow: 1;
       position: relative;
-      max-height: 100%;
       overflow-y: auto;
-      padding: 0 30px;
+      padding: 15px 15px 30px;
 
       @media screen and (min-width: 992px) {
-        width: 570px;
+        padding: 20px 50px 50px;
       }
     }
 
     .details-footer {
-      padding: 20px 30px;
+      padding: 15px;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+
+      @media screen and (min-width: 992px) {
+        padding: 20px 50px;
+      }
     }
   }
 }

package/src/components/forms/InputTitle.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="input-title" v-if="title">
+    <span>{{ title }}</span>
+    <span
+      v-if="tooltip"
+      class="tooltip m-cgg-icon--help"
+      v-tippy="tooltip"
+    ></span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  title: string;
+  tooltip?: string;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.input-title {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+
+  @media screen and (min-width: 768px) {
+    font-size: 16px;
+    line-height: 20px;
+  }
+
+  .tooltip {
+    font-size: 18px;
+    color: #076b9c;
+
+    @media screen and (min-width: 768px) {
+      font-size: 20px;
+    }
+  }
+}
+</style>

package/src/components/forms/PhoneInput.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="form-group">
-    <div class="input-title" v-if="title">{{ title }}</div>
+    <InputTitle v-bind="{ title, tooltip }" v-if="title" />
 
     <div class="input-container" :class="{ error: errorMessage }">
       <input
         ref="inputEl"
         :id="id"
-        v-maska="'#########'"
+        v-maska
+        data-maska="#########"
         :placeholder="placeholder && placeholder"
         type="tel"
         :value="value"
@@ -26,34 +27,31 @@
 <script lang="ts" setup>
 import { useField } from "vee-validate";
 import intlTelInput from "intl-tel-input";
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, InputHTMLAttributes } from "vue";
+import { vMaska } from "maska";
+import InputTitle from "./InputTitle.vue";
 
 const inputEl = ref();
-const props = defineProps({
-  placeholder: {
-    type: String,
-    default: "",
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  modelValue: {
-    type: String,
-    default: "",
-  },
-  phoneCountryCode: {
-    type: String,
-    default: "",
-  },
-  errorDisplay: {
-    type: Boolean,
-    default: true,
-  },
-  validation: Object,
-  autocomplete: String,
-  id: String,
-});
+
+const props = withDefaults(
+  defineProps<{
+    placeholder?: string;
+    title?: string;
+    tooltip?: string;
+    modelValue: InputHTMLAttributes["value"];
+    phoneCountryCode: number;
+    errorDisplay?: boolean;
+    validation?: any;
+    autocomplete?: InputHTMLAttributes["autocomplete"];
+    id?: InputHTMLAttributes["id"];
+  }>(),
+  {
+    placeholder: "",
+    modelValue: "",
+    errorDisplay: true,
+    phoneCountryCode: 351,
+  }
+);
 
 const { value, errorMessage, meta, validate, setValue } = useField(
   "input",

package/src/components/forms/SelectInput.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="form-group">
-    <div class="input-title" v-if="title">
-      <span>{{ title }}</span>
-      <span v-if="tooltip" class="tooltip" v-tippy="tooltip">?</span>
-    </div>
+    <InputTitle v-bind="{ title, tooltip }" v-if="title" />
 
     <div
       ref="inputEl"
@@ -73,6 +70,7 @@ import {
   SelectHTMLAttributes,
 } from "vue";
 import { SelectOption } from "../../types/SelectOption";
+import InputTitle from "./InputTitle.vue";
 
 const open = ref(false);
 const search = ref("");

package/src/components/forms/TextInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="form-group">
-    <div class="input-title" v-if="title">{{ title }}</div>
+    <InputTitle v-bind="{ title, tooltip }" v-if="title" />
 
     <div
       class="input-container"
@@ -9,7 +9,8 @@
       }"
     >
       <input
-        v-maska="mask"
+        v-maska
+        :data-maska="mask"
         :id="id"
         :inputmode="inputmode"
         :placeholder="placeholder && placeholder"
@@ -42,13 +43,16 @@ import {
   onMounted,
   ref,
 } from "vue";
+import { vMaska } from "maska";
+import InputTitle from "./InputTitle.vue";
 
 const props = withDefaults(
   defineProps<{
+    title?: string;
+    tooltip?: string;
     mask?: string;
     placeholder?: InputHTMLAttributes["placeholder"];
     icon?: string;
-    title?: string;
     inputmode?: HTMLAttributes["inputmode"];
     type?: InputHTMLAttributes["type"];
     error?: string;

package/src/index.ts

@@ -1,6 +1,5 @@
 import { App } from "vue";
 import * as components from "./components";
-import Maska from "maska";
 import VueTippy from "vue-tippy";
 
 function install(app: App) {
@@ -9,7 +8,6 @@ function install(app: App) {
     app.component(key, components[key]);
   }
 
-  app.use(Maska);
   app.use(VueTippy, {
     defaultProps: { theme: "light-border", allowHTML: true },
   });