renusify 1.4.3 → 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,10 +1,12 @@
 <template>
   <teleport :to="`.${$r.prefix}app`">
-    <transition :name="animate">
+    <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,
       }" v-bind="$attrs" @click.self="close"
       >
@@ -56,10 +58,7 @@ export default {
     routeHistory: String,
     closebtn: {type: Boolean, default: true},
     color: String,
-    animate: {
-      type: String,
-      default: 'scale'
-    }
+    animate: String
   },
   emits: ['update:modelValue'],
   data() {
@@ -111,6 +110,20 @@ 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) {

package/components/modal/style.scss

@@ -1,31 +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: -50%;
-  top: -50%;
-  width: 200%;
-  height: 200%;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
   justify-content: center;
   position: fixed;
   z-index: map_get($z-index, 'important');
   outline: none;
 
-
-  &: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%);
+    border: 1px solid var(--color-border);
   }
 
+
   .modal-btn {
     width: 100%;
     position: relative;

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, Object, Array],
+    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

@@ -294,6 +294,7 @@ export default {
     width: 100%;
     position: relative;
     display: flex;
+    height: 100%;
   }
 
   .slider-dots {