renusify 1.4.2 → 1.4.4

package/components/map/select.vue

@@ -1,54 +1,70 @@
 <template>
-    <div :class="`${$r.prefix}map-select`">
-      <r-map @update:model-value="emit"
-             :center="center"
-             search-box @map="handleMapEvent" @leaflet="handleLEvent"
-             :zoom="zoom"
-             :height="height"
-      ></r-map>
-    </div>
+  <div :class="`${$r.prefix}map-select`">
+    <r-map :center="center"
+           :height="height"
+           :zoom="zoom" search-box @leaflet="handleLEvent"
+           @map="handleMapEvent"
+           @update:model-value="emit"
+    ></r-map>
+  </div>
 </template>
 <script>
-    export default {
-      name: 'r-map-select',
-      props: {
-        modelValue: Array,
-        height: {type: String, default: "500px"},
-        zoom: {type: Number, default: 13},
-      },
-      emits:['update:modelValue'],
-      data() {
-        return {
-          map: null,
-          L: null,
-          marker: null,
-          center: this.modelValue || [35.69940749291485, 51.33705139160157]
-        }
-      },
-      methods: {
-        handleLEvent(e) {
-                this.L = e
-            },
-            handleMapEvent(e) {
-                this.map = e
-                this.selection()
-            },
-            selection() {
-                this.$emit("update:modelValue", this.center);
-                this.marker = new this.L.Marker(this.center);
-                this.map.addLayer(this.marker);
-                this.marker.bindPopup(this.$t("map_move_to_location",'renusify')).openPopup();
+export default {
+  name: 'r-map-select',
+  props: {
+    modelValue: Array,
+    height: {type: String, default: "500px"},
+    zoom: {type: Number, default: 13},
+    mapImageMarker: String
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      map: null,
+      L: null,
+      marker: null,
+      center: this.modelValue || [35.69973857757377, 51.33806092139637]
+    }
+  },
+  computed: {
+    iconMarker() {
+      if (this.mapImageMarker) {
+        return this.mapImageMarker
+      }
+      return require('./images/marker-icon.png')
+    }
+  },
+  methods: {
+    handleLEvent(e) {
+      this.L = e
+    },
+    handleMapEvent(e) {
+      this.map = e
+      this.selection()
+    },
+    selection() {
+      this.$emit("update:modelValue", this.center);
+      this.marker = new this.L.Marker(this.center, {
+        icon: new this.L.icon({
+          iconUrl: this.iconMarker,
+          iconSize: [30, 30],
+          iconAnchor: [15, 30],
+          popupAnchor: [0, -30]
+        }),
+      });
+      this.map.addLayer(this.marker);
+      this.marker.bindPopup(this.$t("map_move_to_location", 'renusify')).openPopup();
 
-            },
-            emit(e) {
-                this.center = e
-                this.$emit("update:modelValue", this.center);
-                if (this.marker) {
-                    this.marker.setLatLng(this.center);
-                    this.map.closePopup();
-                }
+    },
+    emit(e) {
+      this.center = e
+      this.$emit("update:modelValue", this.center);
+      if (this.marker) {
+        this.marker.setLatLng(this.center);
+        this.map.closePopup();
+      }
 
-            }
-        }
     }
-</script>
+  }
+}
+</script>

package/components/message/index.vue

@@ -1,25 +1,26 @@
 <template>
-  <r-row class="h-center">
-    <r-col class="col-12 overflow-auto" >
-      <div :class="`color-${type}`"
-           class="mb-2 br-md"
-           :key="i"
-           v-for="(item,i) in items">
-        <r-container>
-          <r-row>
-            <r-col class="col-auto">
-               {{$t(i)}}:
-            </r-col>
-            <r-col>
-              <div v-for="(er,k) in item" :key="k">
-                {{$t(er)}}
-              </div>
-            </r-col>
-          </r-row>
-        </r-container>
-    </div>
-    </r-col>
-  </r-row>
+  <div class="h-center">
+    <template v-for="(item,i) in items"
+              :key="i">
+      <slot>
+        <div :class="`color-${type}`"
+             class="mb-2 br-md">
+          <r-container>
+            <r-row>
+              <r-col class="col-auto">
+                {{ $t(i) }}:
+              </r-col>
+              <r-col>
+                <div v-for="(er,k) in item" :key="k">
+                  {{ $t(er) }}
+                </div>
+              </r-col>
+            </r-row>
+          </r-container>
+        </div>
+      </slot>
+    </template>
+  </div>
 </template>
 
 <script>

package/components/modal/index.vue

@@ -1,17 +1,18 @@
 <template>
   <teleport :to="`.${$r.prefix}app`">
-    <transition :name="animate">
-      <div v-bind="$attrs" :class="{
+    <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,
-        'modal-no-overlay': noOverlay,
+        'h-end': bottom||fullHeight,
         'animate-modal-vibrate': run_animate,
-      }" :style="{'height':$r.breakpoint.height+'px'}" @click.self="close"
-           v-if="modelValue">
+      }" v-bind="$attrs" @click.self="close"
+      >
         <div class="modal-container" :style="{'max-width':maxWidth,'max-height':maxHeight}" :class="{
       'modal-bottom':bottom,
       [color]:color,
-      ['animate-modal-' +animate]:animate,
      'modal-full-width':fullWidth,
      'modal-full-height':fullHeight,
       'modal-mini':minWidth,
@@ -54,30 +55,54 @@ export default {
     minWidth: {type: Boolean, default: true},
     flat: Boolean,
     closable: Boolean,
+    routeHistory: String,
     closebtn: {type: Boolean, default: true},
     color: String,
-    animate: {
-      type: String,
-      default: 'slide-up'
-    }
-
+    animate: String
   },
-  emits:['update:modelValue'],
+  emits: ['update:modelValue'],
   data() {
     return {
       state: null,
       run_animate: false
     }
   },
+  created() {
+    if (this.routeHistory) {
+      const h = this.$route.hash.replace('#', '').split('&')
+      if (h.includes(this.routeHistory)) {
+        this.$emit('update:modelValue', true)
+      }
+    }
+  },
   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)
+      }
+    },
     modelValue: {
       // immediate: true, watch at created component
       handler: function (newVal, oldVal) {
         if (newVal === true) {
           document.documentElement.style.overflow = 'hidden'
-          const that = this
-          window.onpopstate = function (event) {
-            that.$emit('update:modelValue', false)
+          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
@@ -85,10 +110,44 @@ export default {
       }
     }
   },
+  computed: {
+    c_animate() {
+      if (this.animate) {
+        return this.animate
+      }
+      if (this.bottom) {
+        return 'slide-up'
+      }
+      if (this.fullHeight) {
+        return 'slide-up'
+      }
+      return 'scale'
+    }
+  },
   methods: {
     close(force = false) {
       if (this.closable || force === true) {
-        this.$emit('update:modelValue', !this.modelValue)
+        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(() => {

package/components/modal/style.scss

@@ -1,29 +1,34 @@
 @import "../../style/include";
 
+.#{$prefix}modal-overlay {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: map_get($z-index, 'important');
+  background-color: var(--color-overlay);
+  backdrop-filter: blur(3px) grayscale(30%);
+}
+
 .#{$prefix}modal {
   align-items: center;
   flex-direction: column;
   display: flex;
   left: 0;
-  width: 100vw;
+  top: 0;
+  width: 100%;
+  height: 100%;
   justify-content: center;
   position: fixed;
   z-index: map_get($z-index, 'important');
   outline: none;
-  bottom: 0;
-
 
-    &:not(.modal-no-overlay) {
-      background-color: var(--color-overlay);
-    }
-    .modal-content {
-      border: 1px solid var(--color-border);
-    }
-
-  &:not(.modal-no-overlay) {
-    backdrop-filter: blur(3px) grayscale(30%);
+  .modal-content {
+    border: 1px solid var(--color-border);
   }
 
+
   .modal-btn {
     width: 100%;
     position: relative;
@@ -43,8 +48,8 @@
 
   .modal-container {
     width: 95%;
-    max-width: 95%;
-    max-height: 90%;
+    max-width: 100vw;
+    max-height: 90vh;
     z-index: map_get($z-index, 'important');
   }
 
@@ -59,7 +64,7 @@
   @include media-breakpoint-up('md') {
     .modal-container {
       width: 75%;
-      max-width: 75%;
+      max-width: 75vw;
     }
   }
 
@@ -73,7 +78,7 @@
 
   .modal-full-width {
     width: 100%;
-    max-width: 100% !important;
+    max-width: 100vw !important;
   }
 
   .modal-full-height {

package/components/{app/notify → notify}/index.vue

@@ -21,11 +21,9 @@
                       @click.prevent="handle(item.on_click)"
                       @hide="hideChild(item.id,item.on_close)">
 
-            <template v-slot:content>
-                <slot name="content" :data="item.content">
-                    {{item.content}}
-                </slot>
-            </template>
+          <slot :data="item">
+            {{ item }}
+          </slot>
 
         </notification>
     </div>
@@ -60,12 +58,6 @@ export default {
     timeout: {
       type: Number,
       default: 4000
-    },
-    eventShow: {
-      default: 'notify'
-    },
-    eventHide: {
-      default: 'hide-notify'
     }
   },
   data () {
@@ -116,8 +108,8 @@ export default {
       }
     },
     registerBusMethods () {
-      window.renusifyBus.on(this.eventShow, this.showMe)
-      window.renusifyBus.on(this.eventHide, this.hideMe)
+      window.renusifyBus.on('r-notify', this.showMe)
+      window.renusifyBus.on('hide-r-notify', this.hideMe)
     }
   },
   created () {
@@ -126,26 +118,26 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-    @import '../../../style/include';
+@import '../../style/include';
 
     .#{$prefix}notify {
-        display: flex;
-        align-items: center;
-        padding: 10px;
-        position: fixed;
-        width: auto;
-        height: auto;
-        z-index: map_get($z-index, 'medium');;
-        overflow-y: auto;
-        max-height: 100%;
+      display: flex;
+      align-items: center;
+      padding: 10px;
+      position: fixed;
+      width: auto;
+      height: auto;
+      z-index: map_get($z-index, 'medium');
+      overflow-y: auto;
+      max-height: 100%;
 
-        &.bottom-pos {
-            bottom: 0;
-        }
+      &.bottom-pos {
+        bottom: 0;
+      }
 
-        &.top-pos {
-            top: 0;
-        }
+      &.top-pos {
+        top: 0;
+      }
 
         &.right-pos {
             right: 0;

package/components/{app/notify → notify}/notification.vue

@@ -3,15 +3,15 @@
             :name="`slide-fade-${pos}`"
     >
         <div v-if="show" :class="[status, 'notify-msg']" :style="{ width: width }">
-            <slot name="content">
-                <div>
-                    <h3 class="title"><b>{{content.title}}</b></h3>
-                    <p class="subtitle-1 ma-0">{{content.text}}</p>
-                </div>
+            <slot>
+              <div>
+                <h3 class="title"><b>{{ content.title }}</b></h3>
+                <p class="subtitle-1 ma-0">{{ content.text }}</p>
+              </div>
             </slot>
-            <r-btn class="h-end" icon text @click="hideMe">
-                <r-icon v-html="$r.icons.close"></r-icon>
-            </r-btn>
+          <r-btn class="h-end" icon text @click.prevent.stop="hideMe">
+            <r-icon v-html="$r.icons.close"></r-icon>
+          </r-btn>
         </div>
     </transition>
 </template>
@@ -62,7 +62,7 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "renusify/style/_include.scss";
+@import "../../style/include";
 
 .notify-msg {
   display: flex;
@@ -71,7 +71,7 @@ export default {
   padding: 10px;
   border-radius: map-get($borders, 'md');
   position: relative;
-  z-index: 9999;
+  z-index: map_get($z-index, 'important');
   margin: 0.3rem 0;
 }
 </style>

package/components/notify/notify.js

@@ -0,0 +1,27 @@
+class Notify {
+  constructor() {
+      this._config = {
+          handler: (msg) => {
+          },
+          bus: 'renusifyBus'
+      };
+  }
+
+    show(message) {
+        const config = this._config;
+        setTimeout(() => {
+            window[config.bus].emit('r-notify', message);
+        }, 100);
+    }
+
+    hide() {
+        const config = this._config;
+        window[config.bus].emit('hide-r-notify');
+    }
+
+    listener() {
+        window[this._config.bus].on('r-notify', this._config.handler);
+    }
+}
+
+export default new Notify()

package/components/searchBox/index.vue

@@ -1,9 +1,10 @@
 <template>
-  <div :class="$r.prefix + 'search-box'">
+  <div :class="[$r.prefix + 'search-box',{
+          'to-top': openToTop}]">
     <template v-if="!closable || show">
       <div
           v-click-outside="handleclose"
-          :class="[inputClass, { 'z-important search-open': open }]"
+          :class="[inputControlClass, { 'z-important search-open': open }]"
           class="search-input"
       >
         <span v-if="categories" class="w-30">
@@ -11,9 +12,11 @@
               v-model="category"
               :items="categories"
               class="mt-0"
+              inputControlClass="ps-2"
               disable-search
               first-select
               hide
+              tile
               justValue
           ></r-select-input>
         </span>
@@ -37,8 +40,7 @@
       <r-card
           v-if="open"
           :class="{
-          'card-tile': $attrs.tile !== undefined && $attrs.tile !== false,
-          'to-top': openToTop,
+          'card-tile': $attrs.tile !== undefined && $attrs.tile !== false
         }"
           class="card-search z-important"
       >
@@ -82,7 +84,7 @@ export default {
     },
     label: String,
     url: String,
-    inputClass: String,
+    inputControlClass: [String, Object, Array],
     query: {
       type: String,
       default: "search",
@@ -161,8 +163,28 @@ export default {
 .#{$prefix}search-box {
   position: relative;
 
-  .to-top {
-    bottom: 42px;
+  &.to-top {
+    .card-search {
+      bottom: 47px;
+      border-radius: map-get($borders, "md") map-get($borders, "md") 0 0;
+    }
+
+    .search-open {
+      border-top-left-radius: 0px !important;
+      border-top-right-radius: 0px !important;
+    }
+  }
+
+  &:not(&.to-top) {
+    .card-search {
+      top: 47px;
+      border-radius: 0 0 map-get($borders, "md") map-get($borders, "md");
+    }
+
+    .search-open {
+      border-bottom-left-radius: 0px !important;
+      border-bottom-right-radius: 0px !important;
+    }
   }
 
   .search-input {
@@ -178,10 +200,6 @@ export default {
     }
   }
 
-  .search-open {
-    border-bottom-left-radius: 0px !important;
-    border-bottom-right-radius: 0px !important;
-  }
 
   input {
     outline: none;
@@ -198,9 +216,9 @@ export default {
     width: 100%;
     overflow-y: auto;
     max-height: 300px;
-    border-radius: 0 0 map-get($borders, "md") map-get($borders, "md");
   }
 
+
   .search-shadow {
     position: fixed;
     width: 100vw;

package/components/slider/index.vue

@@ -16,11 +16,12 @@
     <r-btn v-if="arrow" icon @click="next" class="btn-right-arrow">
       <r-icon v-html="$r.icons.chevron_right"></r-icon>
     </r-btn>
-    <transition :name="direction" :mode="mode" :appear="appear">
+    <transition :appear="appear" :mode="mode" :name="direction">
       <div :key="`slider-${currentIndex}`"
-           :class="[[slidesClass],{'slide-loaded':loaded,'slide-loading':!loaded}]"
-           class="slider-slides" >
-        <r-progress-line v-if="autoplay&&progress" class="slider-progress" :model-value="remain" color="color-one"></r-progress-line>
+           :class="[slidesClass,{'slide-loaded':loaded,'slide-loading':!loaded}]"
+           class="slider-slides">
+        <r-progress-line v-if="autoplay&&progress" :model-value="remain" class="slider-progress"
+                         color="color-one"></r-progress-line>
         <slot v-if="width>0" :item="currentSlide" :width="width" :height="width/wPH">
           {{ currentSlide }}
         </slot>
@@ -84,10 +85,10 @@ export default {
       type: Boolean,
       default: true
     },
-    slidesClass:{type:String,default:'out-in'},
-    mode:{type:String,default:'out-in'},
-    transitionRight:{type:String,default:'slider-right'},
-    transitionLeft:{type:String,default:'slider-left'}
+    slidesClass: [String, Object, Array],
+    mode: {type: String, default: 'out-in'},
+    transitionRight: {type: String, default: 'slider-right'},
+    transitionLeft: {type: String, default: 'slider-left'}
   },
   emits:['index'],
   data() {
@@ -187,12 +188,14 @@ export default {
 </script>
 <style lang="scss">
 @import '../../style/include';
-.slider-progress{
+
+.slider-progress {
   width: 100%;
-    position: absolute;
-    top: 0;
-    z-index: 1;
+  position: absolute;
+  top: 0;
+  z-index: 1;
 }
+
 .btn-left-arrow {
   position: absolute;
   top: 50%;
@@ -291,6 +294,7 @@ export default {
     width: 100%;
     position: relative;
     display: flex;
+    height: 100%;
   }
 
   .slider-dots {