@weni/unnnic-system 1.16.31-develop.0 → 1.16.32-develop.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "1.16.31-develop.0",
+  "version": "1.16.32-develop.0",
   "main": "./dist/unnnic.common.js",
   "files": [
     "dist/*",

package/src/components/Modal/Modal.vue

@@ -1,8 +1,8 @@
 <template>
   <transition name="modal" v-if="showModal">
-    <div v-bind="$attrs" :class="['unnnic-modal']" v-on="$listeners">
-      <div class="unnnic-modal-container">
-        <div class="unnnic-modal-container-background">
+    <div ref="modalContainer" v-bind="$attrs" :class="['unnnic-modal']" v-on="$listeners">
+      <div class="unnnic-modal-container" @click.self="onOutsideCloseClick">
+        <div ref="modal" class="unnnic-modal-container-background">
           <div class="unnnic-modal-container-background-body">
             <div v-if="closeIcon" class="unnnic-modal-container-background-body-close_icon">
               <unnnic-icon-svg
@@ -26,8 +26,11 @@
             <div class="unnnic-modal-container-background-body-title">
               {{ text }}
             </div>
+          </div>
+          <div class="unnnic-modal-container-background-body-description-container">
             <div class="unnnic-modal-container-background-body-description">
               {{ description }} <slot name="message" />
+              <slot name="default" />
             </div>
           </div>
           <div class="unnnic-modal-container-background-report" v-if="hasAlertMessage">
@@ -79,9 +82,69 @@ export default {
       type: String,
       default: null,
     },
+    persistent: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  mounted() {
+    if (window.innerWidth <= 600) {
+      this.mobileAnimateOpen();
+    }
   },
   methods: {
-    onCloseClick() {
+    mobileAnimateReset() {
+      this.$refs.modalContainer.style.transition = null;
+      this.$refs.modal.style.transition = null;
+    },
+
+    mobileAnimateOpen() {
+      this.$nextTick(() => {
+        this.$refs.modalContainer.style.transition = 'none';
+        this.$refs.modalContainer.style.backgroundColor = 'transparent';
+        this.$refs.modal.style.transition = 'none';
+        this.$refs.modal.style.marginBottom = `${-this.$refs.modal.offsetHeight}px`;
+
+        setTimeout(() => {
+          this.$refs.modalContainer.style.transition = 'background-color 0.2s';
+          this.$refs.modalContainer.style.backgroundColor = null;
+          this.$refs.modal.style.transition = 'margin-bottom 0.2s';
+          this.$refs.modal.style.marginBottom = null;
+
+          setTimeout(() => {
+            this.mobileAnimateReset();
+          }, 200);
+        });
+      });
+    },
+
+    mobileAnimateClose() {
+      return new Promise((resolve) => {
+        this.$refs.modalContainer.style.transition = 'background-color 0.2s';
+        this.$refs.modalContainer.style.backgroundColor = 'transparent';
+        this.$refs.modal.style.transition = 'margin-bottom 0.2s';
+        this.$refs.modal.style.marginBottom = `${-this.$refs.modal.offsetHeight}px`;
+
+        setTimeout(() => {
+          this.mobileAnimateReset();
+          resolve();
+        }, 200);
+      });
+    },
+
+    onOutsideCloseClick() {
+      if (this.persistent) {
+        return;
+      }
+
+      this.onCloseClick();
+    },
+
+    async onCloseClick() {
+      if (window.innerWidth <= 600) {
+        await this.mobileAnimateClose();
+      }
+
       this.$emit('close');
     },
   },
@@ -124,7 +187,6 @@ export default {
       overflow: hidden;
 
       &-body {
-        min-height: 13.75 * $unnnic-font-size;
         background-color: $unnnic-color-background-carpet;
         padding: 0 $unnnic-inline-md;
         text-align: center;
@@ -161,12 +223,22 @@ export default {
           width: 100%;
           text-align: center;
 
+          &-container {
+            background-color: $unnnic-color-background-carpet;
+            padding: 0 $unnnic-inline-md;
+            box-sizing: border-box;
+            display: flex;
+            overflow: hidden;
+            padding-bottom: $unnnic-spacing-stack-giant;
+          }
+
+          overflow: auto;
+
           font-family: $unnnic-font-family-secondary;
           color: $unnnic-color-neutral-cloudy;
           font-weight: $unnnic-font-weight-regular;
           font-size: $unnnic-font-size-body-lg;
           line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
-          padding-bottom: $unnnic-spacing-stack-giant;
         }
       }
 
@@ -203,6 +275,42 @@ export default {
         }
       }
     }
+
+    @media (max-width: 600px) {
+      align-items: flex-end;
+
+      &-background {
+        width: 100%;
+        border-radius: 1.5 * $unnnic-font-size 1.5 * $unnnic-font-size 0 0;
+        box-shadow: 0px -8px 16px 0px rgba(0, 0, 0, 0.08);
+        max-height: 90vh;
+        display: flex;
+        flex-direction: column;
+
+        &-body {
+          min-height: initial;
+
+          &-close_icon {
+            padding-bottom: 0;
+          }
+
+          &-title {
+            font-weight: $unnnic-font-weight-bold;
+            color: $unnnic-color-neutral-dark;
+          }
+
+          &-description {
+            text-align: initial;
+            padding-right: $unnnic-spacing-sm;
+            margin-right: -$unnnic-spacing-sm;
+
+            &-container {
+              padding-bottom: $unnnic-spacing-md;
+            }
+          }
+        }
+      }
+    }
   }
 }
 </style>

package/src/stories/Modal.stories.js

@@ -22,7 +22,7 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { unnnicModal, unnnicButton },
-  template: '<unnnicModal v-bind="$props" />',
+  template: '<unnnic-modal v-bind="$props">Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modal<br>Conteúdo do modalConteúdo do modal<br></unnnic-modal>',
 });
 
 const ModalTemplate = (args, { argTypes }) => ({