renusify 1.0.3 → 1.0.5

package/components/menu/index.vue

@@ -1,152 +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>
-    import clickOutside from '../../directive/clickOutSide/index'
-
-    export default {
-        name: 'r-menu',
-        directives: {
-            'click-outside': clickOutside
-        },
-        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/searchBox/index.vue

@@ -47,14 +47,10 @@
   </div>
 </template>
 <script>
-import clickOutside from '../../directive/clickOutSide/index'
 
 export default {
   name: 'r-search-box',
   inheritAttrs: false,
-  directives: {
-    'click-outside': clickOutside
-  },
   props: {
     closable: Boolean,
     notFoundMsg: {

package/components/slider/index.vue

@@ -40,13 +40,9 @@
 </template>
 
 <script>
-import Touch from "../../directive/touch";
 
 export default {
   name: 'r-slider',
-  directives: {
-    'touch': Touch
-  },
   props: {
     slides: {
       type: Array,

package/components/swiper/index.vue

@@ -37,13 +37,9 @@
 </template>
 
 <script>
-import Touch from "../../directive/touch";
 
 export default {
   name: 'r-swiper',
-  directives: {
-    'touch': Touch
-  },
   props: {
     items: Array,
     widthItem: Number,

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/components/table/index.vue

@@ -105,13 +105,9 @@
 
 <script>
     import './style.scss'
-    import Sortable from "../../directive/sortable";
 
     export default {
         name: 'r-table',
-        directives: {
-            'sortable': Sortable
-        },
         props: {
             transition: {
                 type: String,

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/index.js

@@ -1,22 +1,21 @@
-import Ripple from './ripple/index'
-import clickOutside from './clickOutSide/index'
-import Title from "renusify/directive/title";
-import Scroll from "renusify/directive/scroll";
-import Sortable from "renusify/directive/sortable";
-import parallax from "renusify/directive/parallax";
-import Animate from "renusify/directive/animate";
+const list = {
+    'animate': 'animate',
+    'click-outside': 'clickOutSide',
+    'drag': 'drag',
+    'intersect': 'intersect',
+    'mask': 'mask',
+    'parallax': 'parallax',
+    'resize': 'resize',
+    'ripple': 'ripple',
+    'scroll': 'scroll',
+    'sortable': 'sortable',
+    'touch': 'touch',
+    'title': 'title',
+
 
-const list={
-  'ripple':Ripple,
-  'click-outside':clickOutside,
-  'title':Title,
-  'scroll':Scroll,
-  'sortable':Sortable,
-  'parallax':parallax,
-  'animate':Animate,
 }
-export const registers = (app,directives) => {
-  directives.forEach((item)=>{
-    app.directive(item, list[item])
-  })
+export const registers = (app, directives) => {
+    directives.forEach((item) => {
+        app.directive(item, require('./' + list[item]).default)
+    })
 }