renusify 2.5.0 → 2.5.2

package/components/confirm/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <r-modal :closebtn="false" :model-value="modelValue">
+  <r-modal :model-value="modelValue" no-close-btn>
       <r-container class="container-fluid">
         <r-row>
           <r-col class="col-12 text-center">

package/components/form/colorInput/index.vue

@@ -2,7 +2,7 @@
   <r-input class="mt-5" :model-value="modelValue" hide labelControlClass="label-active"
            :class="`${$r.prefix}color-picker`">
     <div :style="{'background-color':modelValue||'#ffffff'}" class="shower" @click.prevent="open=true"></div>
-    <r-modal v-model="open" :closebtn="false" class="color-picker-modal" closable maxWidth="260px">
+    <r-modal v-model="open" class="color-picker-modal" maxWidth="260px" no-close-btn>
       <picker :color="modelValue" @changeColor="emit"></picker>
       <div class="d-flex h-space-between">
         <r-btn class="color-success flex-grow-1 me-1" outlined @click.prevent="close()">

package/components/form/colorInput/mixin.js

@@ -2,20 +2,24 @@ export const color = {
     methods: {
         setColorValue(color) {
             let rgba = {r: 0, g: 0, b: 0, a: 1}
-            if (/#/.test(color)) {
+            const rgbRegex = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*([01]?\.\d+)?\s*)?\)$/;
+            const hexRegex = /^#([a-f0-9]{6}|[a-f0-9]{8})$/i;
+            if (hexRegex.test(color)) {
                 rgba = this.hex2rgba(color)
-            } else if (/rgb/.test(color)) {
+            } else if (rgbRegex.test(color)) {
                 rgba = this.rgb2rgba(color)
             } else if (Object.prototype.toString.call(color) === '[object Object]') {
                 rgba = color
+            } else {
+                return
             }
             this.r = rgba.r
             this.g = rgba.g
             this.b = rgba.b
-            if (rgba.a >= 0) {
+            if (rgba.a >= 0 && rgba.a <= 1) {
                 this.a = rgba.a
             } else {
-                this.a = rgba.a || 1
+                this.a = 1
             }
 
             this.set_hsv(rgba)
@@ -56,20 +60,35 @@ export const color = {
             ctx.fillStyle = gradient
             ctx.fillRect(0, 0, width, height)
         },
-        rgb2hex({r, g, b}, toUpper) {
-            const change = (val) => ('0' + Number(val).toString(16)).slice(-2)
-            const color = `#${change(r)}${change(g)}${change(b)}`
-            return toUpper ? color.toUpperCase() : color
+        rgb2hex({r, g, b, a}, toUpper = false) {
+            const change = (val) => {
+                const hex = Math.round(val).toString(16);
+                return hex.length === 1 ? '0' + hex : hex;
+            };
+
+            let color = `#${change(r)}${change(g)}${change(b)}`;
+
+            if (a !== undefined && a !== 1) {
+                const alpha = Math.round(a * 255);
+                color += change(alpha);
+            }
+
+            return toUpper ? color.toUpperCase() : color;
         },
         hex2rgba(hex) {
             hex = hex.slice(1)
-            const change = (val) => parseInt(val, 16) || 0 // Avoid NaN situations
-            return {
-                r: change(hex.slice(0, 2)),
-                g: change(hex.slice(2, 4)),
-                b: change(hex.slice(4, 6)),
-                a: 1
+            const change = (val) => parseInt(val, 16) || 0;
+            const r = change(hex.slice(0, 2));
+            const g = change(hex.slice(2, 4));
+            const b = change(hex.slice(4, 6));
+
+            let a = 1;
+            if (hex.length === 8) {
+                const alphaHex = hex.slice(6, 8);
+                a = parseFloat((parseInt(alphaHex, 16) / 255).toFixed(2));
             }
+
+            return {r, g, b, a};
         },
         rgb2rgba(rgba) {
             rgba = (/rgba?\((.*?)\)/.exec(rgba) || ['', '0,0,0,1'])[1].split(',')

package/components/form/colorInput/picker.vue

@@ -129,9 +129,6 @@ export default {
     },
     inputHex(color) {
       const value = color.target.value
-      if (value.length !== 7) {
-        return
-      }
       this.setColorValue(value)
       this.$nextTick(() => {
 

package/components/form/dateInput/index.vue

@@ -4,7 +4,7 @@
       {{ modelValue ? $d(modelValueDate, withTime ? 'long' : 'medium', locale) : null }}
     </div>
   </r-input>
-  <r-modal :model-value="show" @update:model-value="close()" :closebtn="false" closable class="text-center">
+  <r-modal :model-value="show" class="text-center" no-close-btn @update:model-value="close()">
     <div v-if="!showTime" :class="`${$r.prefix}date-input`">
       <div>
         <r-container>

package/components/form/numberInput/index.vue

@@ -5,7 +5,7 @@
              :active="active"
              inputControlClass="v-center"
     >
-      <r-btn @click.prevent.stop="minus" class="minus" icon :text="btnText">
+      <r-btn :disabled="min!==undefined&&number<=min" :text="btnText" class="minus" icon @click.prevent.stop="minus">
         <r-icon v-html="$r.icons.minus"></r-icon>
       </r-btn>
       <input @input="emit"
@@ -18,7 +18,7 @@
              autocomplete="no"
              v-model="number"
       />
-      <r-btn @click.prevent.stop="plus" class="plus" icon :text="btnText">
+      <r-btn :disabled="max!==undefined&&number>=max" :text="btnText" class="plus" icon @click.prevent.stop="plus">
         <r-icon v-html="$r.icons.plus"></r-icon>
       </r-btn>
     </r-input>

package/components/form/telInput/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="`${$r.prefix}input-tel`">
     <r-btn :disabled="!select||readonly"
-           :rounded="!c_tile" class="btn-country ltr ms-1" outlined @click.stop="toggleDropdown">
+           :rounded="!c_tile" class="btn-country ltr mr-1" outlined @click.stop="toggleDropdown">
       <div :class="activeCountry.iso2.toLowerCase()" class="iti-flag"></div>
       <span class="country-code pa-1"> +{{ activeCountry.dialCode }} </span>
       <span class="dropdown-arrow">{{ open ? "▲" : "▼" }}</span>
@@ -152,7 +152,7 @@ export default {
 
 .#{base.$prefix}input-tel {
   display: flex;
-  align-items: baseline;
+  align-items: end;
   direction: ltr;
   flex-wrap: wrap;
   .btn-country {

package/components/form/text-editor/index.vue

@@ -75,8 +75,7 @@
       </r-col>
     </r-row>
     <r-modal v-model="show"
-             :closable="false"
-             :closebtn="false">
+             no-closable no-close-btn>
       <r-form v-model="valid1">
         <r-container>
           <r-row>
@@ -109,8 +108,7 @@
       </r-form>
     </r-modal>
     <r-modal v-model="showImg"
-             :closable="false"
-             :closebtn="false">
+             no-closable no-close-btn>
       <r-form v-model="valid2">
         <r-container>
           <r-file-input v-model="image"
@@ -144,8 +142,7 @@
       </r-form>
     </r-modal>
     <r-modal v-model="showVideo"
-             :closable="false"
-             :closebtn="false">
+             no-closable no-close-btn>
       <r-form v-model="valid2">
         <r-container>
           <r-file-input v-model="video"
@@ -178,8 +175,7 @@
       </r-form>
     </r-modal>
     <r-modal v-model="showPre"
-             :closable="false"
-             :closebtn="false">
+             no-closable no-close-btn>
       <r-form v-model="valid2">
         <r-container>
           <r-text-input v-model="code_name" :label="$t('name','renusify')"></r-text-input>
@@ -206,8 +202,7 @@
       </r-form>
     </r-modal>
     <r-modal v-model="showTable"
-             :closable="false"
-             :closebtn="false">
+             no-closable no-close-btn>
       <r-form v-model="valid2">
         <r-container>
           <r-select-input v-model="table_form.headers"

package/components/form/timeInput/index.vue

@@ -19,7 +19,7 @@
     <r-modal
         class="modal-timepicker"
         v-model="show_modal"
-        :closebtn="false"
+        no-close-btn
         :no-overlay="noOverlay"
     >
       <div class="pt-3 pb-1">

package/components/form/timeInput/range.vue

@@ -18,7 +18,7 @@
     <r-modal
         class="modal-timepicker"
         v-model="show_modal"
-        :closebtn="false"
+        no-close-btn
         :no-overlay="noOverlay"
     >
       <div class="pt-3">

package/components/img/preview.vue

@@ -1,5 +1,6 @@
 <template>
   <div ref="container"
+       class="ltr"
        :class="{ [$r.prefix+'img-preview-container']:true}">
     <div
         :style="wrapperStyle"

package/components/modal/index.vue

@@ -1,34 +1,35 @@
 <template>
-  <teleport v-if="show" :to="`.${$r.prefix}app`">
-    <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||fullHeight,
-        'animate-modal-vibrate': run_animate,
-      }" v-bind="$attrs" @click.self="close"
-      >
-        <div class="modal-container" :style="{'max-width':maxWidth,'max-height':maxHeight}" :class="{
-      'modal-bottom':bottom,
-      [color]:color,
-     'modal-full-width':fullWidth,
-     'modal-full-height':fullHeight,
-      'modal-mini':minWidth,
-      'modal-flat':flat
+  <teleport v-if="mounted" :to="`.${$r.prefix}app`">
+    <div
+        v-if="modelValue && !noOverlay"
+        :class="`${$r.prefix}modal-overlay`"
+    ></div>
 
-    }">
+    <transition :name="computedAnimation">
+      <div
+          v-if="modelValue"
+          :class="modalClasses"
+          v-bind="$attrs"
+          @click.self="close()"
+      >
+        <div
+            :class="containerClasses"
+            :style="containerStyles"
+            class="modal-container"
+        >
           <div class="modal-btn text-end">
-            <r-btn class="color-error-text"
-                   text
-                   @click.prevent="close(true)"
-                   fab
-                   size="small"
-                   v-if="closebtn">
+            <r-btn
+                v-if="!noCloseBtn"
+                class="color-error-text"
+                fab
+                size="small"
+                text
+                @click.prevent="close(true)"
+            >
               <r-icon v-html="$r.icons.close"></r-icon>
             </r-btn>
           </div>
+
           <div class="modal-content">
             <slot></slot>
           </div>
@@ -45,123 +46,169 @@ export default {
   name: 'r-modal',
   inheritAttrs: false,
   props: {
-    modelValue: Boolean,
-    bottom: Boolean,
+    modelValue: {
+      type: Boolean,
+      required: true
+    },
+    position: {
+      type: String,
+      default: 'center',
+      validator: (value) => ['center', 'bottom', 'start', 'end', 'top'].includes(value)
+    },
     noOverlay: Boolean,
     fullWidth: Boolean,
     fullHeight: Boolean,
-    maxWidth: String,
-    maxHeight: String,
-    minWidth: {type: Boolean, default: true},
-    flat: Boolean,
-    closable: Boolean,
+    maxWidth: {
+      type: String,
+      default: null
+    },
+    maxHeight: {
+      type: String,
+      default: null
+    },
+    minWidth: {
+      type: Boolean,
+      default: true
+    },
+    noClosable: Boolean,
+    noCloseBtn: Boolean,
     routeHistory: String,
-    closebtn: {type: Boolean, default: true},
     color: String,
-    animate: String
+    animation: String
   },
   emits: ['update:modelValue'],
   data() {
     return {
-      state: null,
-      run_animate: false,
-      show: false,
+      mounted: false,
+      runAnimation: false
     }
   },
   created() {
-    if (this.routeHistory) {
-      const h = this.$route.hash.replace('#', '').split('&')
-      if (h.includes(this.routeHistory)) {
-        this.$emit('update:modelValue', true)
-      }
-    }
-    setTimeout(()=>{
-      this.show=true
-    },10)
+    this.initFromRoute();
+    setTimeout(() => {
+      this.mounted = true;
+    }, 10);
   },
   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)
+    '$route': 'handleRouteChange',
+    modelValue: 'handleModelValueChange'
+  },
+  computed: {
+    computedAnimation() {
+      if (this.animation) return this.animation;
+
+      switch (this.position) {
+        case 'bottom':
+          return 'slide-up';
+        case 'top':
+          return 'slide-down';
+        case 'start':
+          return 'slide-end';
+        case 'end':
+          return 'slide-start';
+        default:
+          return 'scale';
       }
     },
-    modelValue: {
-      // immediate: true, watch at created component
-      handler: function (newVal, oldVal) {
-        if (newVal === true) {
-          document.documentElement.style.overflow = 'hidden'
-          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
+    modalClasses() {
+      return [
+        `${this.$r.prefix}modal`,
+        `modal-${this.position}`,
+        {
+          'animate-modal-vibrate': this.runAnimation
         }
-      }
+      ];
+    },
+    containerClasses() {
+      return [
+        this.color,
+        {
+          'modal-full-width': this.fullWidth,
+          'modal-full-height': this.fullHeight,
+          'modal-mini': this.minWidth,
+          [`modal-${this.position}`]: this.position !== 'center'
+        }
+      ];
+    },
+    containerStyles() {
+      return {
+        'max-width': this.maxWidth,
+        'max-height': this.maxHeight
+      };
     }
   },
-  computed: {
-    c_animate() {
-      if (this.animate) {
-        return this.animate
+  methods: {
+    initFromRoute() {
+      if (!this.routeHistory) return;
+
+      const hashValues = this.$route.hash.replace('#', '').split('&');
+      if (hashValues.includes(this.routeHistory)) {
+        this.$emit('update:modelValue', true);
       }
-      if (this.bottom) {
-        return 'slide-up'
+    },
+    handleRouteChange(newRoute) {
+      if (!this.routeHistory) return;
+
+      const hashValues = newRoute.hash.replace('#', '').split('&');
+      this.$emit('update:modelValue', hashValues.includes(this.routeHistory));
+    },
+    handleModelValueChange(isOpen) {
+      if (isOpen) {
+        document.documentElement.style.overflow = 'hidden';
+        this.handleOpenState();
+      } else {
+        document.documentElement.style.overflow = null;
       }
-      if (this.fullHeight) {
-        return 'slide-up'
+    },
+    handleOpenState() {
+      if (!this.routeHistory) return;
+
+      const hashValues = this.$route.hash.replace('#', '').split('&');
+      if (!hashValues.includes(this.routeHistory)) {
+        const newHash = this.$route.hash
+            ? `${this.$route.hash}&${this.routeHistory}`
+            : `#${this.routeHistory}`;
+
+        this.$router.push({
+          path: this.$route.fullPath,
+          hash: newHash
+        });
       }
-      return 'scale'
-    }
-  },
-  methods: {
+    },
     close(force = false) {
-      if (this.closable || force === true) {
-        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(() => {
-          this.run_animate = false
-        }, 300)
+      if (this.noClosable && !force) {
+        this.runAnimation = true;
+        setTimeout(() => this.runAnimation = false, 300);
+        return;
       }
+
+      if (this.routeHistory) {
+        this.handleRouteClose();
+      }
+
+      this.$emit('update:modelValue', false);
+    },
+    handleRouteClose() {
+      if (history.state.back) {
+        this.$router.back();
+        return;
+      }
+
+      let hashValues = this.$route.hash.replace('#', '').split('&');
+      hashValues = hashValues.filter(val => val !== this.routeHistory);
+
+      const newHash = hashValues.length
+          ? `#${hashValues.join('&')}`
+          : '';
+
+      this.$router.replace({
+        path: this.$route.fullPath,
+        hash: newHash
+      });
     }
   },
   beforeUnmount() {
-    document.documentElement.style.overflow = null
+    document.documentElement.style.overflow = null;
   }
 }
-</script>
+</script>

package/components/modal/style.scss

@@ -5,36 +5,45 @@
 
 
 .#{base.$prefix}modal-overlay {
-  width: 100%;
-  height: 100%;
   position: fixed;
-  left: 0;
-  right: 0;
-  top:0;
+  inset: 0;
   z-index: map.get(base.$z-index, 'important');
   background-color: var(--color-overlay);
   backdrop-filter: blur(3px) grayscale(30%);
 }
 
 .#{base.$prefix}modal {
-  align-items: center;
-  flex-direction: column;
-  display: flex;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  justify-content: center;
   position: fixed;
+  inset: 0;
+  display: flex;
   z-index: map.get(base.$z-index, 'important');
   outline: none;
 
-  .modal-content {
-    border: 1px solid var(--color-sheet-container-low);
-    background-color: var(--color-sheet-container-low);
-    color: var(--color-on-sheet)
+  // Position variants
+  &.modal-center {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.modal-bottom {
+    align-items: flex-end;
+    justify-content: center;
+  }
+
+  &.modal-top {
+    align-items: flex-start;
+    justify-content: center;
+  }
+
+  &.modal-start {
+    align-items: center;
+    justify-content: flex-start;
   }
 
+  &.modal-end {
+    align-items: center;
+    justify-content: flex-end;
+  }
 
   .modal-btn {
     width: 100%;
@@ -43,10 +52,12 @@
     .#{base.$prefix}btn {
       position: absolute;
       bottom: -40px;
-      z-index: map.get(base.$z-index, 'important')+1;
+      z-index: map.get(base.$z-index, 'important') + 1;
+
       @include mixins.rtl() {
         left: 5px;
       }
+
       @include mixins.ltr() {
         right: 5px;
       }
@@ -58,18 +69,48 @@
     max-width: 100vw;
     max-height: 90vh;
     z-index: map.get(base.$z-index, 'important');
+    background-color: var(--color-sheet-container-low);
+    color: var(--color-on-sheet);
+    border: 1px solid var(--color-sheet-container-low);
+    border-radius: base.$border-modal;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    &.modal-bottom,
+    &.modal-top {
+      width: 100%;
+      border-radius: base.$border-modal base.$border-modal 0 0;
+
+      &:not(.modal-full-width) {
+        max-width: map.get(base.$container-max-widths, 'lg');
+      }
+    }
+
+    &.modal-start,
+    &.modal-end {
+      height: 100%;
+      max-height: 100vh;
+      border-radius: 0 base.$border-modal base.$border-modal 0;
+
+      &:not(.modal-full-height) {
+        max-height: 90vh;
+      }
+    }
+
+    &.modal-start {
+      border-radius: base.$border-modal 0 0 base.$border-modal;
+    }
   }
 
   .modal-content {
-    position: relative;
-    border-radius: base.$border-modal;
+    flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
-    height: 100%;
   }
 
   @include mixins2.media-breakpoint-up('md') {
-    .modal-container {
+    .modal-container:not(.modal-full-width):not(.modal-mini) {
       width: 75%;
       max-width: 75vw;
     }
@@ -79,44 +120,27 @@
     max-width: 500px;
   }
 
-  .modal-flat {
-    border-radius: 0;
-  }
-
   .modal-full-width {
     width: 100%;
-    max-width: 100vw !important;
+    max-width: 100vw;
   }
 
   .modal-full-height {
     height: 100%;
-  }
-
-  .modal-bottom {
-    border-radius: base.$border-modal base.$border-modal 0 0;
-
-    &:not(.modal-full-width) {
-      max-width: map.get(base.$container-max-widths, 'lg');
-    }
+    max-height: 100vh;
   }
 }
 
+// Animations
 .animate-modal-vibrate {
-  animation-duration: .15s !important;
-  animation-name: animate-modal-vibrate !important;
-  animation-timing-function: map.get(base.$transition, 'fast-in-fast-out') !important;
+  animation: animate-modal-vibrate 0.15s map.get(base.$transition, 'fast-in-fast-out');
+
   @keyframes animate-modal-vibrate {
-    0% {
-      transform: scale(1)
+    0%, 100% {
+      transform: scale(1);
     }
     50% {
-      transform: scale(1.03)
-    }
-    100% {
-      transform: scale(1)
+      transform: scale(1.03);
     }
   }
-}
-
-
-
+}

package/components/searchBox/index.vue

@@ -205,10 +205,15 @@ export default {
     line-height: 20px;
     padding: 12px;
     max-width: 100%;
-    min-width: 0px;
+    min-width: 0;
     caret-color: var(--color-on-sheet);
   }
 
+  input::placeholder {
+    color: var(--color-on-sheet);
+    opacity: 1;
+  }
+
   .card-search {
     position: absolute;
     left: 0;

package/components/table/crud/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="`${$r.prefix}table-manage`">
-    <r-modal v-model="showForm" bottom full-width>
+    <r-modal v-model="showForm" full-width position="bottom">
       <slot :autoSend="autoSend"
             :method="method"
             :modelValue="editedItem"
@@ -19,7 +19,7 @@
         ></r-form-creator>
       </slot>
     </r-modal>
-    <r-modal v-model="showCopy" bottom full-width>
+    <r-modal v-model="showCopy" full-width position="bottom">
       <div class="pa-3">
         <div v-for="(item,key) in table.option" :key="key"
              class="mb-5">

package/components/tree/index.vue

@@ -1,118 +1,123 @@
 <template>
-    <r-container ref="tree" :class="classes" full-width>
-        <r-row v-if="searchLink">
-            <r-col>
-              <r-select-input
-                    :label="$t('search','renusify')"
-                    :model-value="search"
-                    :searchLink="searchLink"
-                    @update:model-value="change($event)"
-              ></r-select-input>
-            </r-col>
-        </r-row>
-        <r-float v-if="show" :minZoom="0.01" :zoom="0.7" bordered>
-            <template v-slot="{move,ease,transform}">
-                <div :class="{
+  <r-container ref="tree" :class="classes" full-width>
+    <r-row v-if="searchLink">
+      <r-col>
+        <r-select-input
+            :label="$t('search','renusify')"
+            :model-value="search"
+            :searchLink="searchLink"
+            @update:model-value="change($event)"
+        ></r-select-input>
+      </r-col>
+    </r-row>
+    <r-float v-if="show" :minZoom="0.01" :zoom="0.7" bordered>
+      <template v-slot="{move,ease,transform}">
+        <div :class="{
                                     'tree-rotate':rotate
                                 }">
-                    <r-tree-element @update:model-value="$emit('update:modelValue',$event)"
-                                    :link="link"
-                                    :model-value="node"
-                                    @expand="handleExpand(ease,move,transform,$event)"
-                                    :expand="expand"
-                                    :openAll="openAll"
-                                    @select="handleSelect"
-                    >
-                        <template v-slot="{ item,nodeKey }">
-                            <slot :item="item" :nodeKey="nodeKey">{{item}}</slot>
-                        </template>
-                    </r-tree-element>
-                </div>
+          <r-tree-element :expand="expand"
+                          :link="link"
+                          :model-value="node"
+                          :openAll="openAll"
+                          :sortBy="sortBy"
+                          @expand="handleExpand(ease,move,transform,$event)"
+                          @select="handleSelect"
+                          @update:model-value="$emit('update:modelValue',$event)"
+          >
+            <template v-slot="{ item,nodeKey }">
+              <slot :item="item" :nodeKey="nodeKey">{{ item }}</slot>
             </template>
-        </r-float>
-    </r-container>
+          </r-tree-element>
+        </div>
+      </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
+  name: 'r-tree',
+  props: {
+    modelValue: Object,
+    link: String,
+    searchLink: String,
+    sortBy: {
+      type: String,
+      default: 'gen'
     },
-    emits: ['update:modelValue', 'select-node'],
-    data() {
-        return {
-            show: false,
-            search: null,
-            nodeParent: this.gen,
-            node: this.modelValue
-        }
+    gen: String,
+    selected: String,
+    rotate: Boolean,
+    expand: {
+      type: Boolean,
+      default: false
     },
-    created() {
-        if (this.modelValue) {
-            this.show = true
-        } else if (this.link) {
-            this.get()
-        }
+    childsName: {
+      type: String,
+      default: 'childs'
     },
-    watch: {
-        modelValue: function (newVal) {
-            this.node = newVal
-        }
+    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()
+      }
     },
-    computed: {
-        classes() {
-            let a = {'tree-searchable': this.searchLink}
-            a[`${this.$r.prefix}tree`] = true
-            return a
-        }
+    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)))
     },
-    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)
-        }
+    handleSelect(e) {
+      this.$emit('select-node', e)
     }
+  }
 }
 </script>
 <style lang="scss">
@@ -120,31 +125,31 @@ export default {
 
 $distance: 20px;
 .#{base.$prefix}tree {
-    position: relative;
-    width: 100%;
-    height: 100%;
+  position: relative;
+  width: 100%;
+  height: 100%;
 
-    &.tree-searchable {
-      .#{base.$prefix}float {
-            height: calc(100% - 70px)
-        }
+  &.tree-searchable {
+    .#{base.$prefix}float {
+      height: calc(100% - 70px)
     }
+  }
 
   .#{base.$prefix}float {
-        direction: ltr;
-    }
+    direction: ltr;
+  }
 
-    .tree-rotate {
-        transform: rotateX(180deg);
+  .tree-rotate {
+    transform: rotateX(180deg);
 
-        .node-info {
-            transform: rotateX(-180deg);
-        }
+    .node-info {
+      transform: rotateX(-180deg);
+    }
 
-        .tree-btn-expand {
-            transform: rotateX(-180deg);
-        }
+    .tree-btn-expand {
+      transform: rotateX(-180deg);
     }
+  }
 
 }
 </style>

package/components/tree/tree-element.vue

@@ -29,6 +29,7 @@
                         @expand="handleExpand"
                         :expand="expand"
                         :openAll="openAll"
+                        :sort-by="sortBy"
                         @select="$emit('select',$event)"
         >
          <template v-slot="{ item,nodeKey }">
@@ -107,10 +108,17 @@ export default {
       }
       const sortBy = this.sortBy
       s.sort(function (a, b) {
-        if (a['value'][sortBy]) {
-          return a['value'][sortBy].localeCompare(b['value'][sortBy]);
+        if (a['value'][sortBy] !== undefined) {
+          if (b['value'][sortBy] !== undefined) {
+            if (typeof a['value'][sortBy] === 'number' && typeof b['value'][sortBy] === 'number') {
+              return a['value'][sortBy] - b['value'][sortBy];
+            } else {
+              return String(a['value'][sortBy]).localeCompare(String(b['value'][sortBy]));
+            }
+          }
+          return -1;
         }
-        return 1
+        return b['value'][sortBy] !== undefined ? 1 : 0;
       });
       const lng = s.length
       for (let i = 0; i < lng; i++) {

package/package.json

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