renusify 2.4.4 → 2.5.1

package/components/modal/index.vue

@@ -1,34 +1,35 @@
 <template>
-  <teleport v-if="show" :to="`.${$r.prefix}app`">
-    <div v-if="modelValue&&!noOverlay" :class="{
-      [`${$r.prefix}modal-overlay`]:true
-    }"></div>
-    <transition :name="c_animate">
-      <div v-if="modelValue" :class="{
-        [`${$r.prefix}modal`]:true,
-        'h-end': bottom||fullHeight,
-        'animate-modal-vibrate': run_animate,
-      }" v-bind="$attrs" @click.self="close"
-      >
-        <div class="modal-container" :style="{'max-width':maxWidth,'max-height':maxHeight}" :class="{
-      'modal-bottom':bottom,
-      [color]:color,
-     'modal-full-width':fullWidth,
-     'modal-full-height':fullHeight,
-      'modal-mini':minWidth,
-      'modal-flat':flat
+  <teleport v-if="mounted" :to="`.${$r.prefix}app`">
+    <div
+        v-if="modelValue && !noOverlay"
+        :class="`${$r.prefix}modal-overlay`"
+    ></div>
 
-    }">
+    <transition :name="computedAnimation">
+      <div
+          v-if="modelValue"
+          :class="modalClasses"
+          v-bind="$attrs"
+          @click.self="!noCloseOnClickOutside && close()"
+      >
+        <div
+            :class="containerClasses"
+            :style="containerStyles"
+            class="modal-container"
+        >
           <div class="modal-btn text-end">
-            <r-btn class="color-error-text"
-                   text
-                   @click.prevent="close(true)"
-                   fab
-                   size="small"
-                   v-if="closebtn">
+            <r-btn
+                v-if="!noCloseBtn"
+                class="color-error-text"
+                fab
+                size="small"
+                text
+                @click.prevent="close(true)"
+            >
               <r-icon v-html="$r.icons.close"></r-icon>
             </r-btn>
           </div>
+
           <div class="modal-content">
             <slot></slot>
           </div>
@@ -45,123 +46,170 @@ export default {
   name: 'r-modal',
   inheritAttrs: false,
   props: {
-    modelValue: Boolean,
-    bottom: Boolean,
+    modelValue: {
+      type: Boolean,
+      required: true
+    },
+    position: {
+      type: String,
+      default: 'center',
+      validator: (value) => ['center', 'bottom', 'start', 'end', 'top'].includes(value)
+    },
     noOverlay: Boolean,
     fullWidth: Boolean,
     fullHeight: Boolean,
-    maxWidth: String,
-    maxHeight: String,
-    minWidth: {type: Boolean, default: true},
-    flat: Boolean,
-    closable: Boolean,
+    maxWidth: {
+      type: String,
+      default: null
+    },
+    maxHeight: {
+      type: String,
+      default: null
+    },
+    minWidth: {
+      type: Boolean,
+      default: true
+    },
+    noClosable: Boolean,
+    noCloseBtn: Boolean,
+    noCloseOnClickOutside: Boolean,
     routeHistory: String,
-    closebtn: {type: Boolean, default: true},
     color: String,
-    animate: String
+    animation: String
   },
   emits: ['update:modelValue'],
   data() {
     return {
-      state: null,
-      run_animate: false,
-      show: false,
+      mounted: false,
+      runAnimation: false
     }
   },
   created() {
-    if (this.routeHistory) {
-      const h = this.$route.hash.replace('#', '').split('&')
-      if (h.includes(this.routeHistory)) {
-        this.$emit('update:modelValue', true)
-      }
-    }
-    setTimeout(()=>{
-      this.show=true
-    },10)
+    this.initFromRoute();
+    setTimeout(() => {
+      this.mounted = true;
+    }, 10);
   },
   watch: {
-    '$route': function (n) {
-      let h = []
-      if (this.$route.hash) {
-        h = this.$route.hash.replace('#', '').split('&')
-      }
-      if (!h.includes(this.routeHistory)) {
-        this.$emit('update:modelValue', false)
-      } else {
-        this.$emit('update:modelValue', true)
+    '$route': 'handleRouteChange',
+    modelValue: 'handleModelValueChange'
+  },
+  computed: {
+    computedAnimation() {
+      if (this.animation) return this.animation;
+
+      switch (this.position) {
+        case 'bottom':
+          return 'slide-up';
+        case 'top':
+          return 'slide-down';
+        case 'start':
+          return 'slide-end';
+        case 'end':
+          return 'slide-start';
+        default:
+          return 'scale';
       }
     },
-    modelValue: {
-      // immediate: true, watch at created component
-      handler: function (newVal, oldVal) {
-        if (newVal === true) {
-          document.documentElement.style.overflow = 'hidden'
-          if (this.routeHistory) {
-            const routeHashs = this.$route.hash.replace('#', '').split('&')
-            if (!routeHashs.includes(this.routeHistory)) {
-              let h = ''
-              if (this.$route.hash) {
-                h = this.$route.hash + '&' + this.routeHistory
-              } else {
-                h = '#' + this.routeHistory
-              }
-              this.$router.push({path: this.$route.fullPath, hash: h})
-            }
-          }
-        } else {
-          document.documentElement.style.overflow = null
+    modalClasses() {
+      return [
+        `${this.$r.prefix}modal`,
+        `modal-${this.position}`,
+        {
+          'animate-modal-vibrate': this.runAnimation
         }
-      }
+      ];
+    },
+    containerClasses() {
+      return [
+        this.color,
+        {
+          'modal-full-width': this.fullWidth,
+          'modal-full-height': this.fullHeight,
+          'modal-mini': this.minWidth,
+          [`modal-${this.position}`]: this.position !== 'center'
+        }
+      ];
+    },
+    containerStyles() {
+      return {
+        'max-width': this.maxWidth,
+        'max-height': this.maxHeight
+      };
     }
   },
-  computed: {
-    c_animate() {
-      if (this.animate) {
-        return this.animate
+  methods: {
+    initFromRoute() {
+      if (!this.routeHistory) return;
+
+      const hashValues = this.$route.hash.replace('#', '').split('&');
+      if (hashValues.includes(this.routeHistory)) {
+        this.$emit('update:modelValue', true);
       }
-      if (this.bottom) {
-        return 'slide-up'
+    },
+    handleRouteChange(newRoute) {
+      if (!this.routeHistory) return;
+
+      const hashValues = newRoute.hash.replace('#', '').split('&');
+      this.$emit('update:modelValue', hashValues.includes(this.routeHistory));
+    },
+    handleModelValueChange(isOpen) {
+      if (isOpen) {
+        document.documentElement.style.overflow = 'hidden';
+        this.handleOpenState();
+      } else {
+        document.documentElement.style.overflow = null;
       }
-      if (this.fullHeight) {
-        return 'slide-up'
+    },
+    handleOpenState() {
+      if (!this.routeHistory) return;
+
+      const hashValues = this.$route.hash.replace('#', '').split('&');
+      if (!hashValues.includes(this.routeHistory)) {
+        const newHash = this.$route.hash
+            ? `${this.$route.hash}&${this.routeHistory}`
+            : `#${this.routeHistory}`;
+
+        this.$router.push({
+          path: this.$route.fullPath,
+          hash: newHash
+        });
       }
-      return 'scale'
-    }
-  },
-  methods: {
+    },
     close(force = false) {
-      if (this.closable || force === true) {
-        if (this.routeHistory) {
-          if (history.state.back) {
-            this.$router.back()
-          } else {
-            let h = ''
-            if (this.$route.hash) {
-              h = this.$route.hash.replace('#', '').split('&')
-              h.splice(h.indexOf(this.routeHistory), 1)
-              let s = ''
-              let first = true
-              h.forEach((item) => {
-                if (item) {
-                  s += (first ? '#' : '&') + item
-                }
-              })
-              h = s
-            }
-            this.$router.replace({'path': this.$route.fullPath, hash: h})
-          }
-        }
-        this.$emit('update:modelValue', false)
-      } else {
-        this.run_animate = true
-        setTimeout(() => {
-          this.run_animate = false
-        }, 300)
+      if (this.noClosable && !force) {
+        this.runAnimation = true;
+        setTimeout(() => this.runAnimation = false, 300);
+        return;
       }
+
+      if (this.routeHistory) {
+        this.handleRouteClose();
+      }
+
+      this.$emit('update:modelValue', false);
+    },
+    handleRouteClose() {
+      if (history.state.back) {
+        this.$router.back();
+        return;
+      }
+
+      let hashValues = this.$route.hash.replace('#', '').split('&');
+      hashValues = hashValues.filter(val => val !== this.routeHistory);
+
+      const newHash = hashValues.length
+          ? `#${hashValues.join('&')}`
+          : '';
+
+      this.$router.replace({
+        path: this.$route.fullPath,
+        hash: newHash
+      });
     }
   },
   beforeUnmount() {
-    document.documentElement.style.overflow = null
+    document.documentElement.style.overflow = null;
   }
 }
-</script>
+</script>

package/components/modal/style.scss

@@ -5,36 +5,45 @@
 
 
 .#{base.$prefix}modal-overlay {
-  width: 100%;
-  height: 100%;
   position: fixed;
-  left: 0;
-  right: 0;
-  top:0;
+  inset: 0;
   z-index: map.get(base.$z-index, 'important');
   background-color: var(--color-overlay);
   backdrop-filter: blur(3px) grayscale(30%);
 }
 
 .#{base.$prefix}modal {
-  align-items: center;
-  flex-direction: column;
-  display: flex;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  justify-content: center;
   position: fixed;
+  inset: 0;
+  display: flex;
   z-index: map.get(base.$z-index, 'important');
   outline: none;
 
-  .modal-content {
-    border: 1px solid var(--color-sheet-container-low);
-    background-color: var(--color-sheet-container-low);
-    color: var(--color-on-sheet)
+  // Position variants
+  &.modal-center {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.modal-bottom {
+    align-items: flex-end;
+    justify-content: center;
+  }
+
+  &.modal-top {
+    align-items: flex-start;
+    justify-content: center;
+  }
+
+  &.modal-start {
+    align-items: center;
+    justify-content: flex-start;
   }
 
+  &.modal-end {
+    align-items: center;
+    justify-content: flex-end;
+  }
 
   .modal-btn {
     width: 100%;
@@ -43,10 +52,12 @@
     .#{base.$prefix}btn {
       position: absolute;
       bottom: -40px;
-      z-index: map.get(base.$z-index, 'important')+1;
+      z-index: map.get(base.$z-index, 'important') + 1;
+
       @include mixins.rtl() {
         left: 5px;
       }
+
       @include mixins.ltr() {
         right: 5px;
       }
@@ -58,18 +69,48 @@
     max-width: 100vw;
     max-height: 90vh;
     z-index: map.get(base.$z-index, 'important');
+    background-color: var(--color-sheet-container-low);
+    color: var(--color-on-sheet);
+    border: 1px solid var(--color-sheet-container-low);
+    border-radius: base.$border-modal;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    &.modal-bottom,
+    &.modal-top {
+      width: 100%;
+      border-radius: base.$border-modal base.$border-modal 0 0;
+
+      &:not(.modal-full-width) {
+        max-width: map.get(base.$container-max-widths, 'lg');
+      }
+    }
+
+    &.modal-start,
+    &.modal-end {
+      height: 100%;
+      max-height: 100vh;
+      border-radius: 0 base.$border-modal base.$border-modal 0;
+
+      &:not(.modal-full-height) {
+        max-height: 90vh;
+      }
+    }
+
+    &.modal-start {
+      border-radius: base.$border-modal 0 0 base.$border-modal;
+    }
   }
 
   .modal-content {
-    position: relative;
-    border-radius: base.$border-modal;
+    flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
-    height: 100%;
   }
 
   @include mixins2.media-breakpoint-up('md') {
-    .modal-container {
+    .modal-container:not(.modal-full-width):not(.modal-mini) {
       width: 75%;
       max-width: 75vw;
     }
@@ -79,44 +120,27 @@
     max-width: 500px;
   }
 
-  .modal-flat {
-    border-radius: 0;
-  }
-
   .modal-full-width {
     width: 100%;
-    max-width: 100vw !important;
+    max-width: 100vw;
   }
 
   .modal-full-height {
     height: 100%;
-  }
-
-  .modal-bottom {
-    border-radius: base.$border-modal base.$border-modal 0 0;
-
-    &:not(.modal-full-width) {
-      max-width: map.get(base.$container-max-widths, 'lg');
-    }
+    max-height: 100vh;
   }
 }
 
+// Animations
 .animate-modal-vibrate {
-  animation-duration: .15s !important;
-  animation-name: animate-modal-vibrate !important;
-  animation-timing-function: map.get(base.$transition, 'fast-in-fast-out') !important;
+  animation: animate-modal-vibrate 0.15s map.get(base.$transition, 'fast-in-fast-out');
+
   @keyframes animate-modal-vibrate {
-    0% {
-      transform: scale(1)
+    0%, 100% {
+      transform: scale(1);
     }
     50% {
-      transform: scale(1.03)
-    }
-    100% {
-      transform: scale(1)
+      transform: scale(1.03);
     }
   }
-}
-
-
-
+}