@eturnity/eturnity_reusable_components 8.7.0 → 8.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.7.0",
+  "version": "8.7.1",
   "files": [
     "dist",
     "src"

package/src/components/modals/modal/index.vue

@@ -1,10 +1,15 @@
 <template>
   <PageWrapper
+    v-if="isOpen"
     :backdrop="backdrop"
-    :class="{ visible: isOpen, hidden: !isOpen }"
+    :is-open="isOpen"
     :position="position"
   >
-    <ModalContainer v-if="isOpen" :overflow="overflowRule" @click="onClickModalContainer">
+    <ModalContainer
+      v-if="isOpen"
+      :overflow="overflowRule"
+      @click="onClickModalContainer"
+    >
       <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
       <ContentContainer :visible="!isLoading">
         <slot></slot>
@@ -29,10 +34,7 @@
   import CloseButton from '../../buttons/closeButton'
   import Spinner from '../../spinner'
 
-  const contentAttrs = { visible: Boolean }
-  const ContentContainer = styled('div', contentAttrs)`
-    visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
-  `
+  const ContentContainer = styled.div``
 
   const pageAttrs = { backdrop: String, position: String }
   const PageWrapper = styled('div', pageAttrs)`
@@ -49,18 +51,6 @@
   z-index: 99999;
   overflow: auto;
 
-  &.visible {
-    visibility: visible;
-    opacity: 1;
-    transition: visibility 0s linear 0s, opacity 300ms;
-  }
-
-  &.hidden {
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility 0s linear 300ms, opacity 300ms;
-  }
-
   @media (max-width: 425px) {
     background: white;
   }