renusify 1.4.3 → 1.4.4

package/components/tree/index.vue

@@ -1,152 +1,151 @@
 <template>
-    <r-container full-width :class="classes" ref="tree">
-        <r-row v-if="searchLink">
-            <r-col>
-                <r-select
-                        :searchLink="searchLink"
-                        :model-value="search"
-                        @update:model-value="change($event)"
-                        :label="$t('search','renusify')"
-                ></r-select>
-            </r-col>
-        </r-row>
-        <r-float bordered v-if="show" :minZoom="0.01" :zoom="0.7">
-            <template v-slot="{move,ease,transform}">
-                <r-container full-width fill :class="{
+  <r-container ref="tree" :class="classes" full-width>
+    <r-row v-if="searchLink">
+      <r-col>
+        <r-select
+            :label="$t('search','renusify')"
+            :model-value="search"
+            :searchLink="searchLink"
+            @update:model-value="change($event)"
+        ></r-select>
+      </r-col>
+    </r-row>
+    <r-float v-if="show" :minZoom="0.01" :zoom="0.7" bordered>
+      <template v-slot="{move,ease,transform}">
+        <r-container :class="{
                                     'tree-rotate':rotate
-                                }">
-                    <slot
-                                    :parent-node="nodeParent"
-                                    @update:model-value="$emit('update:modelValue',$event)"
-                                    :model-value="node"
-                                    :link="link"
-                                    @select-node="handleSelect"
-                                    @expand="handleExpand(ease,move,transform,$event)"
-                                    :selected="selected"
-                                    :expand="expand"
-                                    :openAll="openAll"
-                    >
-                    </slot>
-                </r-container>
-            </template>
-        </r-float>
-    </r-container>
+                                }" fill full-width>
+          <slot
+              :expand="expand"
+              :link="link"
+              :model-value="node"
+              :openAll="openAll"
+              :parent-node="nodeParent"
+              :selected="selected"
+              @expand="handleExpand(ease,move,transform,$event)"
+              @select="handleSelect"
+              @update:model-value="$emit('update:modelValue',$event)"
+          >
+          </slot>
+        </r-container>
+      </template>
+    </r-float>
+  </r-container>
 
 </template>
 <script>
 
-    export default {
-        name: 'r-tree',
-
-        props: {
-            modelValue: Object,
-            link: String,
-            searchLink: String,
-            gen: String,
-          selected: String,
-          rotate: Boolean,
-          expand: {
-            type: Boolean,
-            default: false
-          },
-          childsName: {
-            type: String,
-            default: 'childs'
-          },
-          openAll: Boolean,
-          headers: Object
-        },
-      emits:['update:modelValue','select-node'],
-        data() {
-            return {
-                show: false,
-                search: null,
-                nodeParent: this.gen,
-                node: this.modelValue
-            }
-        },
-        created() {
-            if (this.modelValue) {
-                this.show = true
-            } else if (this.link) {
-                this.get()
-            }
-        },
-        watch: {
-            modelValue: function (newVal) {
-                this.node = newVal
-            }
-        },
-        computed:{
-            classes(){
-                let a={'tree-searchable':this.searchLink}
-                a[`${this.$r.prefix}tree`]=true
-                return a
-            }
-        },
-        methods: {
-            change(e) {
-                if (e && "value" in e) {
-                    this.nodeParent = e.value
-                    this.show = false
-                    this.get()
-                }
-            },
-            get() {
-              this.$axios.get(this.link + this.nodeParent, {headers: this.headers})
-                    .then(({data}) => {
-                        this.node = data
-                        this.show = true
-                    })
-            },
-            handleExpand(ease, move, transform, $event) {
-                const el = $event[1].getBoundingClientRect()
-                ease()
-                const node_info=$event[1].querySelector('.node-info').getBoundingClientRect()
-                const card_h = node_info.height
-                const card_w = node_info.width
-                const parent = this.$refs.tree.$el
-                const bb = this.$refs.tree.$el.getBoundingClientRect()
-                move(parent.offsetWidth / 2 - (el.left - bb.left + ($event[0] ? el.width / 2 : el.width - card_w / 2)),
-                    parent.offsetHeight / 2 - (el.top - bb.top +(this.rotate ? el.height- card_h :card_h/2) ))
-            },
-            handleSelect(e) {
-                this.$emit('select-node', e)
-            }
-        }
+export default {
+  name: 'r-tree',
+  props: {
+    modelValue: Object,
+    link: String,
+    searchLink: String,
+    gen: String,
+    selected: String,
+    rotate: Boolean,
+    expand: {
+      type: Boolean,
+      default: false
+    },
+    childsName: {
+      type: String,
+      default: 'childs'
+    },
+    openAll: Boolean,
+    headers: Object
+  },
+  emits: ['update:modelValue', 'select-node'],
+  data() {
+    return {
+      show: false,
+      search: null,
+      nodeParent: this.gen,
+      node: this.modelValue
+    }
+  },
+  created() {
+    if (this.modelValue) {
+      this.show = true
+    } else if (this.link) {
+      this.get()
+    }
+  },
+  watch: {
+    modelValue: function (newVal) {
+      this.node = newVal
+    }
+  },
+  computed: {
+    classes() {
+      let a = {'tree-searchable': this.searchLink}
+      a[`${this.$r.prefix}tree`] = true
+      return a
+    }
+  },
+  methods: {
+    change(e) {
+      if (e && "value" in e) {
+        this.nodeParent = e.value
+        this.show = false
+        this.get()
+      }
+    },
+    get() {
+      this.$axios.get(this.link + this.nodeParent, {headers: this.headers})
+          .then(({data}) => {
+            this.node = data
+            this.show = true
+          })
+    },
+    handleExpand(ease, move, transform, $event) {
+      const el = $event[1].getBoundingClientRect()
+      ease()
+      const node_info = $event[1].querySelector('.node-info').getBoundingClientRect()
+      const card_h = node_info.height
+      const card_w = node_info.width
+      const parent = this.$refs.tree.$el
+      const bb = this.$refs.tree.$el.getBoundingClientRect()
+      move(parent.offsetWidth / 2 - (el.left - bb.left + ($event[0] ? el.width / 2 : el.width - card_w / 2)),
+          parent.offsetHeight / 2 - (el.top - bb.top + (this.rotate ? el.height - card_h : card_h / 2)))
+    },
+    handleSelect(e) {
+      this.$emit('select-node', e)
     }
+  }
+}
 </script>
 <style lang="scss">
-    @import "../../style/include";
+@import "../../style/include";
 
-    $distance: 20px;
-    .#{$prefix}tree {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      background-color: var(--color-background-one);
+$distance: 20px;
+.#{$prefix}tree {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-background-one);
 
-      &.tree-searchable {
-        .#{$prefix}float {
-          height: calc(100% - 70px)
-        }
-      }
-
-      .#{$prefix}float {
-        direction: ltr;
-      }
+  &.tree-searchable {
+    .#{$prefix}float {
+      height: calc(100% - 70px)
+    }
+  }
 
-        .tree-rotate {
-            transform: rotateX(180deg);
+  .#{$prefix}float {
+    direction: ltr;
+  }
 
-            .node-info {
-                transform: rotateX(-180deg);
-            }
+  .tree-rotate {
+    transform: rotateX(180deg);
 
-            .tree-btn-expand {
-                transform: rotateX(-180deg);
-            }
-        }
+    .node-info {
+      transform: rotateX(-180deg);
+    }
 
+    .tree-btn-expand {
+      transform: rotateX(-180deg);
     }
-</style>
+  }
+
+}
+</style>

package/components/tree/tree-element.vue

@@ -3,7 +3,7 @@
     <r-row class="h-center flex-nowrap no-gutters">
       <r-col class="text-center">
         <div class="d-flex h-center mb-1 node-info">
-          <component :is="componentName" :node="node[nodeKey]"
+          <component :is="componentElm" :node="node[nodeKey]"
                      @fire="$emit('fire',$event)"
                      @click.prevent="$emit('select',{key:nodeKey,item:node[nodeKey]})"
           ></component>
@@ -32,7 +32,7 @@
                         @expand="handleExpand"
                         :expand="expand"
                         :openAll="openAll"
-                        :component-name="componentName"
+                        :component-name="componentElm"
                         @fire="$emit('fire',$event)"
                         @select="$emit('select',$event)"
         >
@@ -42,6 +42,7 @@
   </r-container>
 </template>
 <script>
+import {markRaw} from "vue";
 
 export default {
   name: 'r-tree-element',
@@ -83,6 +84,15 @@ export default {
     }
   },
   computed: {
+    componentElm() {
+      if (!this.componentName) {
+        return
+      }
+      if (this.componentName.__v_skip) {
+        return this.componentName
+      }
+      return markRaw(this.componentName)
+    },
     node() {
       return this.modelValue
     },
@@ -99,6 +109,9 @@ export default {
       let s = []
       for (const key in childs) {
         if (this.$helper.hasKey(childs, key)) {
+          if (childs[key]['gen'] === undefined) {
+            childs[key]['gen'] = key
+          }
           s.push({
             'key': key,
             'value': childs[key]
@@ -169,6 +182,7 @@ $distance: 20px;
   direction: ltr;
   position: relative;
   display: table;
+  user-select: none;
 
   .btn-extend {
     position: relative;
@@ -266,4 +280,4 @@ $distance: 20px;
     }
   }
 }
-</style>
+</style>

package/directive/index.js

@@ -11,8 +11,7 @@ const list = {
     'sortable': 'sortable',
     'touch': 'touch',
     'title': 'title',
-
-
+    'skeleton': 'skeleton',
 }
 export const registers = (app, directives) => {
     directives.forEach((item) => {

package/directive/mask/index.js

@@ -4,7 +4,7 @@ function fireEvent(el, eventName, data) {
     el.dispatchEvent(e);
 }
 
-const maskStart = /^([^0ANX]+)/;
+const maskStart = /^([^BANX]+)/;
 
 function getInputElement(element) {
     if (element.tagName.toLocaleUpperCase() === 'INPUT') {
@@ -60,9 +60,6 @@ function format(data, mask = '') {
                 }
 
                 break loop;
-            case '?':
-                dataOffset++;
-                break;
             case 'X':
                 dataOutput += dataChar;
                 unmask += dataChar

package/directive/skeleton/index.js

@@ -0,0 +1,27 @@
+import "./style.scss";
+
+function mounted(el, binding) {
+  let data = binding.value;
+  if (!data.loading) {
+    el.classList.add("r-skeleton");
+  }
+}
+
+function updated(el, binding) {
+  if (binding.value === binding.oldValue) {
+    return null;
+  }
+
+  unmounted(el);
+  mounted(el, binding);
+}
+
+function unmounted(el) {
+  el.classList.remove("r-skeleton");
+}
+
+export default {
+  mounted,
+  updated,
+  unmounted,
+};

package/directive/skeleton/style.scss

@@ -0,0 +1,37 @@
+@import "~renusify/style/include";
+
+.r-skeleton {
+  * {
+    opacity: 0 !important;
+  }
+
+  -webkit-text-fill-color: transparent !important;
+
+  background-color: rgba(0, 0, 0, 0.12) !important;
+  overflow: hidden !important;
+  position: relative !important;
+
+  &:after {
+    animation: skeletonloading 1.5s infinite;
+    content: "";
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translateX(-100%);
+    z-index: 1;
+    background: linear-gradient(
+                    90deg,
+                    hsla(0, 0%, 100%, 0),
+                    hsla(0, 0%, 100%, 0.3),
+                    hsla(0, 0%, 100%, 0)
+    );
+  }
+
+  @keyframes skeletonloading {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}

package/index.js

@@ -4,7 +4,7 @@ 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/app/notify/notify.js';
+import Notify from './components/notify/notify.js';
 import valid from './plugins/validation/Validate';
 import Toast from './components/app/toast/toast.js';
 import event from './plugins/event';
@@ -84,19 +84,24 @@ export default {
                     },
                 },
             autoAddTranslate: true,
+            useNotify: false,
             package: null,
             store: {},
-            icons: Icons,
-            breakpoint: breakpointData
+            icons: Icons
         }, options))
-        // renusify notify
-        app.config.globalProperties.$notify = function (message = null) {
-            if (message === null) {
-                Notify.hide();
-            } else {
-                Notify.show(message);
+        app.config.globalProperties.$r.breakpoint = breakpointData
+        if (app.config.globalProperties.$r.useNotify) {
+            // renusify notify
+            app.config.globalProperties.$notify = function (message = null, settings = {}) {
+                if (message === null) {
+                    Notify.hide();
+                } else {
+                    settings['data'] = message
+                    Notify.show(settings);
+                }
             }
         }
+
         // renusify toast
         app.config.globalProperties.$toast = function (message, options) {
             Toast.show(message, options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "renusify",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "Vue3 Framework",
   "keywords": [
     "vuejs",

package/style/transitions.scss

@@ -145,58 +145,6 @@
   }
 }
 
-.slide-start-full {
-  &-enter-active {
-    transition: all .3s ease-in-out;
-  }
-
-  &-leave-active {
-    transition: all .3s ease-in-out;
-  }
-
-  &-enter-from, &-leave-to {
-    @include rtl() {
-      transform: translateX(-100%);
-    }
-    @include ltr() {
-      transform: translateX(100%);
-    }
-
-    opacity: 0;
-  }
-
-  &-move {
-    transition: transform .7s ease-in-out;
-  }
-}
-
-.slide-end-full {
-  &-enter-active {
-    max-width: 100%;
-    transition: all .3s ease-in-out;
-  }
-
-  &-leave-active {
-    max-width: 100%;
-    transition: all .3s ease-in-out;
-  }
-
-  &-enter-from, &-leave-to {
-    @include rtl() {
-      transform: translateX(100%);
-    }
-    @include ltr() {
-      transform: translateX(-100%);
-    }
-
-    opacity: 0;
-  }
-
-  &-move {
-    transition: transform .7s ease-in-out;
-  }
-}
-
 .slide-start {
   &-enter-active {
     transition: all .3s ease-in-out;
@@ -208,10 +156,10 @@
 
   &-enter-from, &-leave-to {
     @include rtl() {
-      transform: translateX(-30px);
+      transform: translateX(-60%);
     }
     @include ltr() {
-      transform: translateX(30px);
+      transform: translateX(60%);
     }
 
     opacity: 0;
@@ -235,10 +183,10 @@
 
   &-enter-from, &-leave-to {
     @include rtl() {
-      transform: translateX(30px);
+      transform: translateX(60%);
     }
     @include ltr() {
-      transform: translateX(-30px);
+      transform: translateX(-60%);
     }
 
     opacity: 0;
@@ -259,7 +207,7 @@
   }
 
   &-enter-from, &-leave-to {
-    transform: translateY(20px);
+    transform: translateY(60%);
     opacity: 0;
   }
 
@@ -278,7 +226,7 @@
   }
 
   &-enter-from, &-leave-to {
-    transform: translateY(-20px);
+    transform: translateY(-60%);
     opacity: 0;
   }
 
@@ -305,61 +253,3 @@
     transition: transform .7s ease;
   }
 }
-
-
-.page-slide-right {
-  &-enter-active, &-leave-active {
-    min-width: 100vw;
-    max-width: 100vw;
-    transition: all .5s ease-in-out;
-    z-index: 10;
-  }
-
-  &-enter-to {
-    position: absolute;
-    right: 0;
-  }
-
-  &-enter-from {
-    position: absolute;
-    right: -100%;
-  }
-
-  &-leave-to {
-    position: absolute;
-    left: -100%;
-  }
-
-  &-leave-from {
-    position: absolute;
-    left: 0;
-  }
-}
-.page-slide-left {
-  &-enter-active, &-leave-active {
-    min-width: 100vw;
-    max-width: 100vw;
-    transition: all .5s ease-in-out;
-    z-index: 10;
-  }
-
-  &-enter-to {
-    position: absolute;
-    left: 0;
-  }
-
-  &-enter-from {
-    position: absolute;
-    left: -100%;
-  }
-
-  &-leave-to {
-    position: absolute;
-    right: -100%;
-  }
-
-  &-leave-from {
-    position: absolute;
-    right: 0;
-  }
-}