renusify 1.0.4 → 1.0.5

package/components/menu/index.vue

@@ -1,149 +1,181 @@
 <template>
-    <div :class="$r.prefix+'menu'" v-click-outside="close" ref="menu">
-        <div class="d-flex h-start flex-row v-center">
-            <span class="menu-label" v-if="label" @click.prevent="open">{{label}}</span>
-            <transition name="fade" mode="out-in">
-                <!-- Header Navigation Menu Icons -->
-                <r-btn icon text v-if="modelValue" key="on" @click.prevent="close">
-                    <r-icon v-html="$r.icons.close"></r-icon>
-                </r-btn>
-                <r-btn icon text v-else key="off" @click.prevent="open">
-                    <r-icon v-html="icon||$r.icons.menu_dot"></r-icon>
-                </r-btn>
-
-            </transition>
-            <div class="dropdown-menu mt-1"
-                 v-if="modelValue"
-                 :style="{
+  <div :class="$r.prefix+'menu'" v-click-outside="close" ref="menu">
+    <div class="d-flex h-start flex-row v-center">
+      <span class="menu-label" v-if="label" @click.prevent="open">{{ label }}</span>
+      <transition name="fade" mode="out-in">
+        <!-- Header Navigation Menu Icons -->
+        <r-btn icon text v-if="show" key="on" @click.prevent="close">
+          <r-icon v-html="$r.icons.chevron_up"></r-icon>
+        </r-btn>
+        <r-btn icon text v-else key="off" @click.prevent="open">
+          <r-icon v-html="icon||$r.icons.chevron_down"></r-icon>
+        </r-btn>
+
+      </transition>
+      <div class="dropdown-menu mt-1"
+           v-if="show"
+           :style="{
                     'top':top+'px',
                     'left':left,
                     'right':right,
                     'opacity':opacity
                 }">
-                <r-card>
-                    <div class="dropdown-menu-item pa-2" v-for="(item,i) in list" :key="i">
-                      <slot :item="item">
-                        {{ item }}
-                      </slot>
-                    </div>
-                </r-card>
-            </div>
-
-        </div>
+        <r-card>
+          <div class="dropdown-menu-item pa-2" v-for="(item,i) in list" :key="i"
+               :class="{'color-one-text':selected===item[value]}"
+               @click="emit(item)">
+            <slot :item="item">
+              {{ item }}
+            </slot>
+          </div>
+        </r-card>
+      </div>
+
     </div>
+  </div>
 </template>
 <script>
 
-    export default {
-        name: 'r-menu',
-
-      props: {
-            modelValue: {
-                type: Boolean,
-                default: false
-            },
-            label: String,
-            icon: {
-                type: String
-            },
-            reverse: Boolean,
-            overlay: Boolean,
-            list: [Array, Object]
-        },
-        data() {
-            return {
-                top: null,
-                left: null,
-                right: null,
-                opacity: 0
-            }
-        },
-        methods: {
-            open() {
-                const elm = this.$refs.menu.getBoundingClientRect()
-                this.top = -20
-                if (!this.overlay) {
-                    this.top += elm.height
-                }
-                this.opacity = 0
-                let n = 80
-                if (!this.$r.rtl) {
-                    this.left = 0
-                } else {
-                    this.right = 0
-                }
-                if (this.reverse) {
-                    if (!this.$r.rtl) {
-                        this.right = 0
-                    } else {
-                        this.left = 0
-                    }
-                }
-
-                this.$emit('update:modelValue', true)
-                setTimeout(() => {
-                    this.top = this.top + 20
-                    this.opacity = 1
-                }, 10)
-
-            }, close() {
-                this.top = this.top - 20
-                this.opacity = 0
-                setTimeout(() => {
-                    this.$emit('update:modelValue', false)
-                }, 200)
-
-            }
-        }
+export default {
+  name: 'r-menu',
+
+  props: {
+    modelValue: {
+      type: [String, Number, Object]
+    },
+    label: String,
+    icon: {
+      type: String
+    },
+    value: {
+      type: String,
+      default: 'value'
+    },
+    justValue: Boolean,
+    reverse: Boolean,
+    overlay: Boolean,
+    items: Array
+  },
+  data() {
+    return {
+      show: false,
+      top: null,
+      left: null,
+      right: null,
+      opacity: 0
     }
-</script>
-<style lang="scss">
-    @import "../../style/include";
+  },
+  computed: {
+    list() {
+      let r = []
+      if (this.items) {
+        this.items.forEach((item) => {
+          if (typeof item === 'object') {
+            r.push(item)
+          } else {
+            r.push({'name': item, [this.value]: item})
+          }
+        })
+      }
+      return r
+    },
+    selected() {
+      if (!this.modelValue) {
+        return null
+      }
+      return this.justValue ? this.modelValue : this.modelValue[this.value]
+    }
+  },
+  methods: {
+    emit(item) {
+      this.$emit('update:modelValue', this.justValue ? item[this.value] : item)
+      this.close()
+    },
+    open() {
+      const elm = this.$refs.menu.getBoundingClientRect()
+      this.top = -20
+      if (!this.overlay) {
+        this.top += elm.height
+      }
+      this.opacity = 0
+      let n = 80
+      if (!this.$r.rtl) {
+        this.left = 0
+      } else {
+        this.right = 0
+      }
+      if (this.reverse) {
+        if (!this.$r.rtl) {
+          this.right = 0
+        } else {
+          this.left = 0
+        }
+      }
 
+      this.show = true
+      setTimeout(() => {
+        this.top = this.top + 20
+        this.opacity = 1
+      }, 10)
 
-    .#{$prefix}menu {
-        position: relative;
+    }, close() {
+      this.top = this.top - 20
+      this.opacity = 0
+      setTimeout(() => {
+        this.show = false
+      }, 200)
 
-        @include light() {
-            .dropdown-menu {
-                border: 1px solid var(--color-border-light);
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import "../../style/include";
 
-                &-item:hover {
-                    background-color: var(--color-table-hover-light);
-                }
-            }
-        }
-        @include dark() {
-            .dropdown-menu {
-                border: 1px solid var(--color-border-dark);
-
-                &-item:hover {
-                    background-color: var(--color-table-hover-dark);
-                }
-            }
-        }
 
-        .menu-label {
-            cursor: pointer;
-        }
+.#{$prefix}menu {
+  position: relative;
 
-        .dropdown-menu {
-            scroll-behavior: smooth;
-            transition: all .3s ease;
-            position: absolute;
-            z-index: 10;
-            min-width: 150px;
-            max-height: 200px;
-            overflow-y: auto;
-            background-clip: padding-box;
-            border-radius: 4px;
-
-            &-item {
-                cursor: pointer;
-            }
+  @include light() {
+    .dropdown-menu {
+      border: 1px solid var(--color-border-light);
 
-        }
+      &-item:hover {
+        background-color: var(--color-table-hover-light);
+      }
+    }
+  }
+  @include dark() {
+    .dropdown-menu {
+      border: 1px solid var(--color-border-dark);
+
+      &-item:hover {
+        background-color: var(--color-table-hover-dark);
+      }
     }
+  }
+
+  .menu-label {
+    cursor: pointer;
+  }
+
+  .dropdown-menu {
+    scroll-behavior: smooth;
+    transition: all .3s ease;
+    position: absolute;
+    z-index: 10;
+    min-width: 150px;
+    max-height: 200px;
+    overflow-y: auto;
+    background-clip: padding-box;
+    border-radius: 4px;
+
+    &-item {
+      cursor: pointer;
+    }
+
+  }
+}
 
 
 </style>

package/components/modal/index.vue

@@ -1,8 +1,14 @@
 <template>
-    <teleport :to="`.${$r.prefix}app`">
-        <transition :name="animate">
-            <div v-bind="$attrs" :class="classes" @click.self="close" v-if="modelValue">
-                <div class="modal-container" :style="{'max-width':maxWidth,'max-height':maxHeight}" :class="{
+  <teleport :to="`.${$r.prefix}app`">
+    <transition :name="animate">
+      <div v-bind="$attrs" :class="{
+        [`${$r.prefix}modal`]:true,
+        'h-end': bottom,
+        'modal-no-overlay': noOverlay,
+        'animate-modal-vibrate': run_animate,
+      }" :style="{'height':$r.breakpoint.height+'px'}" @click.self="close"
+           v-if="modelValue">
+        <div class="modal-container" :style="{'max-width':maxWidth,'max-height':maxHeight}" :class="{
       'modal-bottom':bottom,
       [color]:color,
       ['animate-modal-' +animate]:animate,
@@ -12,97 +18,86 @@
       'modal-flat':flat
 
     }">
-                    <div class="modal-btn text-end">
-                        <r-btn class="color-error-text"
-                               text
-                               @click.prevent="close(true)"
-                               fab
-                               size="small"
-                               v-if="closebtn">
-                            <r-icon v-html="$r.icons.close"></r-icon>
-                        </r-btn>
-                    </div>
-                    <div class="modal-content">
-                        <slot></slot>
-                    </div>
-                </div>
-            </div>
-        </transition>
-    </teleport>
+          <div class="modal-btn text-end">
+            <r-btn class="color-error-text"
+                   text
+                   @click.prevent="close(true)"
+                   fab
+                   size="small"
+                   v-if="closebtn">
+              <r-icon v-html="$r.icons.close"></r-icon>
+            </r-btn>
+          </div>
+          <div class="modal-content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
 </template>
 
 <script>
-    import './style.scss'
+import './style.scss'
 
-    export default {
-        name: 'r-modal',
-        inheritAttrs: false,
-        props: {
-            modelValue: Boolean,
-            bottom: Boolean,
-            noOverlay: Boolean,
-            fullWidth: Boolean,
-            fullHeight: Boolean,
-            maxWidth: String,
-            maxHeight: String,
-            minWidth: {type: Boolean, default: true},
-            flat: Boolean,
-            closable: Boolean,
-            closebtn: {type: Boolean, default: true},
-            color: String,
-            animate: {
-                type: String,
-                default: 'slide-up'
-            }
+export default {
+  name: 'r-modal',
+  inheritAttrs: false,
+  props: {
+    modelValue: Boolean,
+    bottom: Boolean,
+    noOverlay: Boolean,
+    fullWidth: Boolean,
+    fullHeight: Boolean,
+    maxWidth: String,
+    maxHeight: String,
+    minWidth: {type: Boolean, default: true},
+    flat: Boolean,
+    closable: Boolean,
+    closebtn: {type: Boolean, default: true},
+    color: String,
+    animate: {
+      type: String,
+      default: 'slide-up'
+    }
 
-        },
-        data() {
-            return {
-                state: null,
-                run_animate: false
-            }
-        },
-        watch: {
-            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)
-                        }
-                    } else {
-                        document.documentElement.style.overflow = null
-                    }
-                }
-            }
-        },
-        computed: {
-            classes() {
-                let a = {
-                    'h-end': this.bottom,
-                    'modal-no-overlay': this.noOverlay,
-                    'animate-modal-vibrate': this.run_animate,
-                }
-                a[`${this.$r.prefix}modal`]=true
-                return a
-            }
-        },
-        methods: {
-            close(force = false) {
-                if (this.closable || force === true) {
-                    this.$emit('update:modelValue', !this.modelValue)
-                } else {
-                    this.run_animate = true
-                    setTimeout(() => {
-                        this.run_animate = false
-                    }, 300)
-                }
-            }
-        },
-        beforeUnmount() {
-            document.documentElement.style.overflow = null
+  },
+  data() {
+    return {
+      state: null,
+      run_animate: false
+    }
+  },
+  watch: {
+    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)
+          }
+        } else {
+          document.documentElement.style.overflow = null
         }
+      }
+    }
+  },
+  methods: {
+    close(force = false) {
+      if (this.closable || force === true) {
+        this.$emit('update:modelValue', !this.modelValue)
+      } else {
+        this.run_animate = true
+        setTimeout(() => {
+          this.run_animate = false
+        }, 300)
+      }
     }
+  },
+  beforeUnmount() {
+    document.documentElement.style.overflow = null
+  }
+}
 </script>

package/components/modal/style.scss

@@ -11,7 +11,6 @@
   z-index: map_get($z-index, 'important');
   outline: none;
   bottom: 0;
-  height: 100vh;
 
   @include light() {
     &:not(.modal-no-overlay) {

package/components/table/crud/index.vue

@@ -157,21 +157,20 @@
 <script>
     import ManageFooter from "./footer";
     import ManageHeader from "./header";
-    import RDivider from "../../container/divider";
 
     export default {
-        name: 'r-table-crud',
-        components: {RDivider, ManageHeader, ManageFooter},
-        props: {
-            link: {
-                required: true,
-                type: String
-            },
-            actions: {
-                default: function () {
-                    return []
-                },
-                type: Array
+      name: 'r-table-crud',
+      components: {ManageHeader, ManageFooter},
+      props: {
+        link: {
+          required: true,
+          type: String
+        },
+        actions: {
+          default: function () {
+            return []
+          },
+          type: Array
             },
             cast: {
               default: function () {

package/directive/clickOutSide/index.js

@@ -40,8 +40,7 @@ function unmounted(el, binding) {
   delete el['click_outside']
 }
 
-export const clickOutside = {
+export default {
     mounted,
     unmounted
-}
-export default clickOutside
+}

package/directive/drag/index.js

@@ -105,8 +105,7 @@ function unmounted(el, binding) {
     delete el.eventsHandler
 }
 
-export const Drag = {
+export default {
     mounted,
     unmounted
 }
-export default Drag

package/directive/intersect/index.js

@@ -37,7 +37,7 @@ function unmounted (el) {
   delete el._observe
 }
 
-export const Intersect = {
-  mounted,
-  unmounted
+export default {
+    mounted,
+    unmounted
 }

package/directive/resize/index.js

@@ -24,8 +24,7 @@ function unmounted (el) {
   delete el._onResize
 }
 
-export const Resize = {
-  mounted,
-  unmounted
+export default {
+    mounted,
+    unmounted
 }
-export default Resize

package/directive/ripple/index.js

@@ -230,10 +230,8 @@ function update (el, binding) {
   updateRipple(el, binding, wasEnabled)
 }
 
-export const Index = {
-  mounted,
-  unmounted,
-  update
+export default {
+    mounted,
+    unmounted,
+    update
 }
-export default Index
-// # sourceMappingURL=index.js.map

package/directive/scroll/index.js

@@ -24,8 +24,7 @@ function unmounted (el) {
   delete el._onScroll
 }
 
-export const Scroll = {
-  mounted,
-  unmounted
+export default {
+    mounted,
+    unmounted
 }
-export default Scroll

package/directive/sortable/index.js

@@ -202,9 +202,8 @@ function updated(el, binding) {
     mounted(el, binding)
 }
 
-export const Sortable = {
+export default {
     mounted,
     updated,
     unmounted
 }
-export default Sortable

package/directive/title/index.js

@@ -119,9 +119,8 @@ function unmounted(el, binding) {
 }
 
 
-export const Title = {
+export default {
     mounted,
     updated,
     unmounted
-}
-export default Title
+}

package/directive/touch/index.js

@@ -177,8 +177,7 @@ function unmounted(el, binding) {
     delete el.eventsHandler
 }
 
-export const Touch = {
+export default {
     mounted,
     unmounted
 }
-export default Touch

package/index.js

@@ -4,9 +4,9 @@ import Translate from './plugins/trans/Translate';
 import Storage from './plugins/storage/index';
 import DateTime from './plugins/trans/DateTime';
 import Currency from './plugins/trans/Currency';
-import Notify from './components/notify/notify.js';
+import Notify from './components/app/notify/notify.js';
 import valid from './plugins/validation/Validate';
-import Toast from './components/toast/toast.js';
+import Toast from './components/app/toast/toast.js';
 import event from './plugins/event';
 import {register} from './components';
 import {registers} from './directive';
@@ -114,8 +114,7 @@ export default {
         app.config.globalProperties.$v = (names) => valid.checkType(names)
 
         // install components
-        const required_directive = register(app, options['components'] || []);
-
+        let required_directive = register(app, options['components'] || []);
         if (options['directives']) {
             options['directives'].forEach((i) => {
                 if (!required_directive.includes(i)) {