cja-phoenix 0.3.6 → 0.4.0

package/src/components/structural/GridContainer.vue

@@ -16,6 +16,7 @@ withDefaults(
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
 @import "../../assets/grid.scss";
 
 .grid-container-1,
@@ -26,7 +27,7 @@ withDefaults(
   padding-left: $grid-side-padding-sm;
   padding-right: $grid-side-padding-sm;
 
-  @media screen and (min-width: 768px) and (max-width: 1023px) {
+  @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {
     grid-template-columns: $grid-columns-md;
     column-gap: $grid-column-gap-md;
     padding-left: $grid-side-padding-md;

package/src/components/structural/GridItem.vue

@@ -19,6 +19,8 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
 @for $i from 0 to 4 {
   .grid-item-sm-#{$i + 1} {
     @media screen and (max-width: 767px) {
@@ -29,7 +31,7 @@ defineProps<{
 
 @for $i from 0 to 4 {
   .grid-item-md-#{$i + 1} {
-    @media screen and (min-width: 768px) and (max-width: 1023px) {
+    @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {
       grid-column: span #{$i + 1};
     }
   }

package/src/components/structural/InfoMessage.vue

@@ -35,6 +35,8 @@ defineEmits(["btn:close"]);
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
 .info-message {
   display: grid;
   grid-template-columns: 1fr;
@@ -43,12 +45,12 @@ defineEmits(["btn:close"]);
   border: 2px solid #000;
   border-radius: 16px;
 
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: $break-md-min) {
     padding: 16px 24px;
   }
 
   &.has-icon {
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       grid-template-columns: auto 1fr;
     }
   }
@@ -58,7 +60,7 @@ defineEmits(["btn:close"]);
   }
 
   &.has-icon.has-toggle {
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       grid-template-columns: auto 1fr 18px;
     }
   }

package/src/components/structural/Modal.vue

@@ -1,19 +1,19 @@
 <template>
   <Teleport to="body">
     <Transition name="fade">
-      <div v-show="active" class="modal-backdrop">
+      <div v-show="active" class="modal-backdrop" :style="{ ...cssVars }">
         <div class="modal-overlay" @click.self="closeModal">
           <div class="modal-container" ref="modalContainer">
-            <button
-              type="button"
-              class="btn-close"
-              aria-label="Close"
-              @click="closeModal"
-            >
-              <span class="m-cgg-icon--cross"></span>
-            </button>
-            <div class="modal-header" v-if="title">
-              {{ title }}
+            <div class="modal-header" :class="{ 'has-title': $slots.header }">
+              <div class="modal-header-wrapper">
+                <slot name="header"></slot>
+              </div>
+              <button
+                type="button"
+                class="btn-close m-cgg-icon--cross"
+                aria-label="Close"
+                @click="closeModal"
+              ></button>
             </div>
             <div class="modal-body">
               <slot name="body"></slot>
@@ -29,27 +29,42 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
-
-defineProps<{
-  title?: string;
-}>();
+import { ref, watch, computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    maxWidth?: {
+      md?: string;
+      lg?: string;
+      xl?: string;
+    };
+  }>(),
+  {
+    maxWidth: () => ({
+      md: "min(calc(100% - 48px), 768px)",
+      lg: "min(calc(100% - 48px), 1024px)",
+      xl: "1024px",
+    }),
+  }
+);
 
 const active = ref(false);
 const modalContainer = ref();
 
+const cssVars = computed(() => ({
+  "--md-max-width": props.maxWidth.md,
+  "--lg-max-width": props.maxWidth.lg,
+  "--xl-max-width": props.maxWidth.xl,
+}));
+
 const emit = defineEmits(["close"]);
 
 watch(
   () => active.value,
   (active) => {
-    if (active) {
-      document.body.style.overflow = "hidden";
-      document.documentElement.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-      document.documentElement.style.overflow = "";
-    }
+    document.querySelectorAll("html, body").forEach((el) => {
+      (el as HTMLElement).style.overflow = active ? "hidden" : "";
+    });
   }
 );
 
@@ -74,6 +89,8 @@ defineExpose({ active, openModal, closeModal, toggleModal });
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
 .modal-backdrop {
   position: fixed;
   top: 0;
@@ -105,87 +122,83 @@ defineExpose({ active, openModal, closeModal, toggleModal });
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  gap: 16px;
 
-  @media screen and (min-width: 601px) {
+  @media screen and (min-width: $break-md-min) {
     top: 50%;
     left: 50%;
     transform: translateY(-50%) translateX(-50%);
-    max-width: calc(100% - 60px);
-    max-height: calc(100% - 40px);
+    max-width: var(--md-max-width);
+    max-height: calc(100% - 48px);
     border-radius: 8px;
     padding: 20px 40px;
     height: auto;
   }
 
-  @media screen and (min-width: 1100px) {
-    max-width: 1040px;
+  @media screen and (min-width: $break-lg-min) {
+    max-width: var(--lg-max-width);
+  }
+
+  @media screen and (min-width: $break-xl-min) {
+    max-width: var(--xl-max-width);
   }
 
   .modal-header {
-    font-weight: 700;
-    font-size: 18px;
-    line-height: 21px;
-    padding: 0 20px 15px 0;
-    border-bottom: 1px solid #dedede;
-
-    @media screen and (min-width: 601px) {
-      font-size: 24px;
-      line-height: 27px;
-    }
+    display: grid;
+    grid-template-columns: 1fr 20px;
+    padding: 0;
 
     &:before,
     &:after {
       content: none;
     }
-  }
-
-  .btn-close {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    background: none;
-    border: none;
-    padding: 0;
-    outline: 0;
-    height: 20px;
-    cursor: pointer;
-    z-index: 2;
 
-    @media screen and (min-width: 601px) {
-      right: 40px;
+    &.has-title {
+      padding: 0 0 8px 0;
+      border-bottom: 1px solid #dedede;
     }
 
-    span {
-      display: block;
+    .modal-header-wrapper {
       font-size: 16px;
       line-height: 20px;
+      font-weight: 700;
     }
 
-    &:focus {
+    .btn-close {
+      background: none;
+      border: none;
+      padding: 0;
       outline: 0;
+      height: 20px;
+      width: 20px;
+      cursor: pointer;
+      z-index: 2;
+      font-size: 16px;
+      line-height: 20px;
+
+      &:focus {
+        outline: 0;
+      }
     }
   }
 
   .modal-body {
-    margin: 0 -15px -15px;
-    font-size: 15px;
-    line-height: 17px;
+    font-size: 14px;
+    line-height: 18px;
     overflow-y: auto;
     flex-grow: 1;
     height: auto;
-    padding: 15px;
   }
 
   .modal-footer {
     border-top: 1px solid #dedede;
-    padding: 15px 0 0;
-    margin-top: 15px;
+    padding: 8px 0 0;
 
     :deep(.button-container) {
       display: flex;
       flex-direction: row;
       justify-content: flex-end;
-      gap: 10px;
+      gap: 8px;
     }
   }
 }

package/src/stories/Modal.story.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref } from "vue";
 import Modal from "../components/structural/Modal.vue";
 import CjaButton from "../components/structural/CjaButton.vue";
 
 const modal = ref();
 
 const initState = () => ({
-  title: "Modal Title",
+  mdMaxWidth: "min(calc(100% - 48px), 768px)",
+  lgMaxWidth: "min(calc(100% - 48px), 1024px)",
+  xlMaxWidth: "1024px",
+  modalHeader: true,
   modalBody: true,
   modalFooter: false,
 });
@@ -16,7 +19,17 @@ const initState = () => ({
   <Story title="Modal">
     <Variant title="Default" :init-state="initState">
       <template #default="{ state }">
-        <Modal ref="modal" :title="state.title">
+        <Modal
+          ref="modal"
+          :maxWidth="{
+            md: state.mdMaxWidth,
+            lg: state.lgMaxWidth,
+            xl: state.xlMaxWidth,
+          }"
+        >
+          <template #header v-if="state.modalHeader">
+            Modal Header Slot
+          </template>
           <template #body v-if="state.modalBody">
             <div class="modal-body">
               <h2>Modal Body Slot</h2>
@@ -27,9 +40,7 @@ const initState = () => ({
             </div>
           </template>
           <template #footer v-if="state.modalFooter">
-            <div class="modal-footer">
-              <CjaButton :color="'orange'">Continuar</CjaButton>
-            </div>
+            <div class="modal-footer">Modal Footer Slot</div>
           </template>
         </Modal>
 
@@ -37,7 +48,10 @@ const initState = () => ({
       </template>
 
       <template #controls="{ state }">
-        <HstText type="text" v-model="state.title" title="Modal Title" />
+        <HstText v-model="state.mdMaxWidth" title="Max Width md" />
+        <HstText v-model="state.lgMaxWidth" title="Max Width lg" />
+        <HstText v-model="state.xlMaxWidth" title="Max Width xl" />
+        <HstCheckbox v-model="state.modalHeader" title="Modal Header" />
         <HstCheckbox v-model="state.modalBody" title="Modal Body" />
         <HstCheckbox v-model="state.modalFooter" title="Modal Footer" />
       </template>
@@ -45,15 +59,29 @@ const initState = () => ({
   </Story>
 </template>
 
+<style lang="scss" scoped>
+h2 {
+  margin-top: 0;
+}
+
+p {
+  margin: 0;
+}
+</style>
+
 <docs lang="md">
 ### Props
 
-#### title
+#### maxWidth
 
-Adds a title and a horizontal rule below it to the modal.
+Defines a maxWidth CSS string for the **md**, **lg** and **xl** viewports.
 
 ### Slots
 
+#### #header
+
+Displays content inside the header slot space and adds a horizontal rule below it to the modal.
+
 #### #body
 
 Displays content inside the modal, becoming scrollable after a threshold. If you need to stylize slotted content, wrap the html within a div, it will be scoped to the vue scope you are currently working with.
@@ -85,4 +113,15 @@ Exposes the **closeModal** method, used to hide the modal, emits a **@close** ev
 #### toggleModal()
 
 Exposes the **toggleModal** method, used to hide or show the modal depending on the current **active** value. Emits a **@close** event if the modal was closed.
+
+## Defaults
+
+- **maxWidth**:
+  ```
+    {
+      md: "min(calc(100% - 48px), 768px)",
+      lg: "min(calc(100% - 48px), 1024px)",
+      xl: "1024px"
+    }
+  ```
 </docs>

package/src/utils/cjaStore.ts

@@ -27,22 +27,14 @@ export const getCjaStore = (options: {
       const field = this[target][payload.key];
 
       if (field) {
-        if (field.hasOwnProperty("options")) {
-          if (typeof payload.value == "string" && payload.value.includes(",")) {
-            field.value = payload.value.split(",");
-          } else {
-            field.value = payload.value;
-          }
+        field.value = payload.value;
 
-          if (field.options) {
-            field.label = Array.isArray(field.value)
-              ? field.value.map(
-                  (v) => field.options.find((k) => k.value == v)?.label
-                )
-              : field.options.find((k) => k.value == field.value)?.label;
-          }
-        } else {
-          field.value = payload.value;
+        if (field.options) {
+          field.label = Array.isArray(payload.value)
+            ? field.value.map(
+                (v) => field.options.find((k) => k.value == v)?.label
+              )
+            : field.options.find((k) => k.value == payload.value)?.label;
         }
       }
     },

package/src/utils/useViewportDetector.ts

@@ -3,8 +3,8 @@ import { Ref, onMounted, onUnmounted, ref } from "vue";
 export const useViewportDetector = (
   breakpoints: { [index: string]: number } = {
     xs: 0,
-    s: 420,
-    m: 768,
+    sm: 420,
+    md: 768,
     lg: 1024,
     xl: 1200,
   }

package/dist/types/histoire.setup.d.ts

@@ -1,2 +0,0 @@
-import "./assets/main.scss";
-import "./assets/iconia/style.scss";

package/src/histoire.setup.ts

@@ -1,2 +0,0 @@
-import "./assets/main.scss";
-import "./assets/iconia/style.scss";