renusify 1.4.4 → 1.4.8

package/components/codeEditor/mixin.js

@@ -6,7 +6,7 @@ export default {
             }
             text = text.trim()
             text = text.replace(/ +(?= )/g, '');
-            text = text.replace(/[\r|\n|\t]/g, '');
+            text = text.replace(/[\r\n\t]/g, '');
             let r = ''
             text = text.split('<')
             let numopen = 0
@@ -22,7 +22,7 @@ export default {
                     }
                 }
             })
-            r = r.replace(/<([^/].*)>+[\r|\n|\t]+<\//g, '<$1></');
+            r = r.replace(/<([^/].*)>+[\r\n\t]+<\//g, '<$1></');
             return r
         },
         pretty_js(text) {
@@ -31,8 +31,8 @@ export default {
             }
             text = text.trim()
             text = text.replace(/ +(?= )/g, '');
-            text = text.replace(/[\r|\n|\t]/g, '');
-            text = text.replace(/([,|;|{|(|\[])+[\s]/g, '$1');
+            text = text.replace(/[\r\n\t]/g, '');
+            text = text.replace(/([,;{(\[])+[\s]/g, '$1');
             let r = ''
             text = text.split('')
             let numopen = 0
@@ -176,7 +176,7 @@ export default {
 
 
             //function like $r $d()
-            regex = /(\$([a-zA-z0-9]*)[.|(])/g;
+            regex = /(\$([a-zA-z0-9]*)[.(])/g;
             res = res.replace(regex, '<span class="color-func code-editor-span">$1</span>')
 
 

package/components/form/address.vue

@@ -8,6 +8,7 @@
       :searchLink="`https://codenus.com/api/apps/address?lang=${$r.lang}`"
       :rules="required?['required']:[]"
       :headers="{'Authorization':''}"
+      :readonly="readonly"
       :tile="tile">
   </r-select-input>
   <r-select-input :label="$t('state','renusify')"
@@ -20,6 +21,7 @@
                   :rules="required?['required']:[]"
                   value="id"
                   :headers="{'Authorization':''}"
+                  :readonly="readonly"
                   :tile="tile">
 
   </r-select-input>
@@ -33,6 +35,7 @@
                   :rules="required?['required']:[]"
                   value="id"
                   :headers="{'Authorization':''}"
+                  :readonly="readonly"
                   :tile="tile">
 
   </r-select-input>
@@ -40,11 +43,13 @@
                 :label="$t('zip_code','renusify')"
                 v-model="zip_code"
                 :tile="tile"
+                :readonly="readonly"
                 :rules="required?['required']:[]"></r-text-input>
   <r-text-area v-if="!hideStreet" @update:model-value="emit(false,false)"
                :label="$t('street','renusify')"
                v-model="street"
                :tile="tile"
+               :readonly="readonly"
                :rules="required?['required']:[]"></r-text-area>
 </template>
 <script>
@@ -59,6 +64,7 @@ export default {
     hideCity: Boolean,
     hideZipCode: Boolean,
     hideStreet: Boolean,
+    readonly: Boolean,
     tile: {type: Boolean, default: undefined},
     defaultCountry: Object,
     modelValue: Object

package/components/form/address_ir.vue

@@ -1,28 +1,28 @@
 <template>
-  <r-select-input :label="$t('state','renusify')"
-            v-model="state"
-            @update:model-value="emit"
-            :items="Object.keys(states)"
-            :rules="required?['required']:[]"
-            :tile="tile"
-            justValue>
+  <r-select-input v-model="state"
+                  :items="Object.keys(states)"
+                  :label="$t('state','renusify')"
+                  :rules="required?['required']:[]"
+                  :tile="tile"
+                  justValue
+                  @update:model-value="emit">
 
   </r-select-input>
   <r-select-input v-if="state"
-            @update:model-value="emit"
-            :label="$t('city','renusify')"
-            v-model="city"
-            :items="states[state]"
-            :rules="required?['required']:[]"
-            :tile="tile"
-            justValue>
+                  v-model="city"
+                  :items="states[state]"
+                  :label="$t('city','renusify')"
+                  :rules="required?['required']:[]"
+                  :tile="tile"
+                  justValue
+                  @update:model-value="emit">
 
   </r-select-input>
-  <r-text-area v-if="city && !hideAddress" @update:model-value="emit"
+  <r-text-area v-if="city && !hideAddress" v-model="address"
                :label="$t('address','renusify')"
-               v-model="address"
+               :rules="required?['required']:[]"
                :tile="tile"
-               :rules="required?['required']:[]"></r-text-area>
+               @update:model-value="emit"></r-text-area>
 </template>
 <script>
 

package/components/form/input.vue

@@ -521,7 +521,7 @@ export default {
     }
   }
 
-  &.text-area {
+  &.#{$prefix}text-area {
     .input-control {
       height: auto;
 

package/components/form/rating.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="`${$r.prefix}rating size-${size} ms-n1`">
-    <r-btn :class="`${Math.round(modelValue)>=i?'color-warning-text':''}`" :key="i"
+    <r-btn :key="i" :class="`${Math.round(modelValue)>=i?'color-rating':''}`"
            :readonly="readonly"
            @click="select(i)"
            icon
@@ -30,14 +30,14 @@ export default {
     modelValue: Number,
     readonly: Boolean
   },
-  emits:['update:modelValue'],
-  created(){
-    if(!this.$r.icons.star) {
+  emits: ['update:modelValue'],
+  created() {
+    if (!this.$r.icons.star) {
       this.$r.icons.star = '<svg xmlns="http://www.w3.org/2000/svg"   preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21L12 17.27Z"/></svg>'
     }
   },
   methods: {
-    select (n) {
+    select(n) {
       this.$emit('update:modelValue', n)
     }
   }
@@ -59,6 +59,10 @@ $btn-sizes: (
   transition: 1s $primary-transition;
   color: var(--color-disabled);
 
+  .color-rating * {
+    color: #fbc02d !important;
+  }
+
   @each $name, $size in $btn-sizes {
     &.size-#{$name} {
       .#{$prefix}btn {

package/components/form/select.vue

@@ -11,14 +11,14 @@
         'flex-nowrap':!multiple
       }">
         <r-chip
-            class="my-0 ms-0"
-            :close="multiple&&!textChip"
+            v-for="(item,key) in chips"
             :key="key"
-            :text="textChip || !multiple"
             :class="{'px-0':!multiple}"
-            @update:modelValue="handleChip($event,key)"
+            :close="multiple&&!textChip"
+            :text="textChip || !multiple"
+            class="my-0 ms-0 color-primary-text"
             selectable
-            v-for="(item,key) in chips">
+            @update:modelValue="handleChip($event,key)">
           {{ item ? item[text] : '' }}
         </r-chip>
         <span>
@@ -103,7 +103,7 @@ export default {
     firstSelect: Boolean,
     headers: Object
   },
-  emits:['update:modelValue','del'],
+  emits: ['update:modelValue', 'del'],
   data() {
     return {
       apiData: [],
@@ -220,12 +220,14 @@ export default {
       } else {
         this.handleClick()
       }
-
     },
     handleClick() {
       if (this.$refs.input) {
         this.$refs.input.focus()
-        this.$refs.input.scrollIntoView()
+        this.$refs.select.scrollIntoView({
+          block: "start",
+          behavior: "smooth"
+        })
       } else {
         this.focusInput(true)
       }
@@ -309,9 +311,12 @@ export default {
 </script>
 <style lang="scss">
 @import "../../style/include";
-$min-height:40px;
+
+$min-height: 40px;
 .#{$prefix}select-container {
   position: relative;
+  scroll-margin: $min-height;
+
   .input-control {
     min-height: $min-height;
     height: auto;
@@ -353,7 +358,8 @@ $min-height:40px;
     left: 0;
     z-index: map_get($z-index, 'default');
   }
-  .to-top{
+
+  .to-top {
     bottom: $min-height+2px;
   }
 
@@ -364,4 +370,4 @@ $min-height:40px;
   }
 }
 
-</style>
+</style>

package/components/form/text-area.vue

@@ -3,8 +3,7 @@
            v-model="lazyValue"
            @click.stop="handleClick()"
            @update:model-value="emit"
-           :class="`${$r.prefix}text-area`"
-           :class="{'no-resize':noResize}"
+           :class="[`${$r.prefix}text-area`,{'no-resize':noResize}]"
   >
     <template v-slot="{uid}">
       <textarea @focusin="active=true"

package/components/form/timepicker/index.vue

@@ -22,7 +22,7 @@
         :closebtn="false"
         :no-overlay="noOverlay"
     >
-      <r-card class="pt-3">
+      <r-card class="pt-3 pb-1">
         <timepicker
             class="mb-2 mx-3"
             :disableTime="disableTime"
@@ -30,7 +30,7 @@
             :withSec="withSec"
             v-model="lazyValue"
         ></timepicker>
-        <div class="my-3 d-flex h-space-between">
+        <div class="my-3 d-flex h-space-between px-3">
           <r-btn
               class="color-success-text"
               outlined
@@ -70,7 +70,7 @@ export default {
     noOverlay: Boolean,
     modelValue: String
   },
-  emits:['update:modelValue'],
+  emits: ['update:modelValue'],
   data() {
     return {
       active: false,

package/components/form/timepicker/timepicker.vue

@@ -1,76 +1,76 @@
 <template>
   <div :class="`${$r.prefix}timepicker-clock`">
-    <div ref="clock" class="clock ltr">
-      <div ref="circle" class="circle" :class="{ 'is-small': isSmall }"></div>
-      <div ref="center" class="center"></div>
-      <div ref="hand" class="clock-item-hand hour"></div>
-
-      <div
-          v-for="(num, i) in nums"
-          :key="i"
-          class="number"
-          :class="['number' + i,{'number-disabled':disableTime(parseInt(i),show,hour,min,sec)}]"
-          ref="number"
-          @click="set(i)"
-      >
-        {{ num }}
+    <transition mode="out-in" name="scale">
+      <div :key="show" ref="clock" class="clock ltr">
+        <div ref="center" class="center"></div>
+        <div ref="hand" :class="{ 'is-small': isSmall }" class="clock-item-hand hour"></div>
+        <div
+            v-for="(num, i) in nums"
+            :key="i"
+            ref="number"
+            :class="['number' + i,{'number-disabled':disableTime(parseInt(i),show,hour,min,sec)}]"
+            class="number"
+            @click="set(i)"
+        >
+          {{ num }}
+        </div>
       </div>
-    </div>
+    </transition>
     <div class="text-meridiem ltr" v-if="!is24Hour">
       <div
-          class="time-meridiem"
-          @click="(meridiem = 'AM'),emit()"
           :class="{ 'meridiem-active': meridiem === 'AM' }"
+          class="time-meridiem overflow-hidden"
+          @click="(meridiem = 'AM'),emit()"
       >
         {{ $t('timepicker_am', 'renusify') }}
       </div>
       <div
-          class="time-meridiem"
-          @click="(meridiem = 'PM'),emit()"
           :class="{ 'meridiem-active': meridiem === 'PM' }"
+          class="time-meridiem overflow-hidden"
+          @click="(meridiem = 'PM'),emit()"
       >
         {{ $t('timepicker_pm', 'renusify') }}
       </div>
     </div>
     <div class="text-time ltr">
       <input
-          @input="emit"
           v-model="hour"
-          placeholder="00"
-          @update:model-value="handle_hour()"
-          @click.prevent.stop="handle_hour(false)"
-          class="time-show"
           :class="{
           'time-active': show === 'hours24'||show==='hours12',
           'time-selected': hour != null
         }"
+          class="time-show"
+          placeholder="00"
+          @input="emit"
+          @update:model-value="handle_hour()"
+          @click.prevent.stop="handle_hour(false)"
       />
       <div class="t-text">:</div>
       <input
-          @input="emit"
           v-model="min"
-          placeholder="00"
-          @update:model-value="handle_min()"
-          @click.prevent.stop="handle_min(false)"
-          class="time-show"
           :class="{
           'time-active': show === 'mins',
           'time-selected': min != null
         }"
+          class="time-show"
+          placeholder="00"
+          @input="emit"
+          @update:model-value="handle_min()"
+          @click.prevent.stop="handle_min(false)"
       />
       <div class="t-text" v-if="withSec">:</div>
       <input
-          @input="emit"
           v-if="withSec"
           v-model="sec"
-          placeholder="00"
-          @update:model-value="handle_sec()"
-          @click.prevent.stop="handle_sec(false)"
-          class="time-show"
           :class="{
           'time-active': show === 'seconds',
           'time-selected': sec != null
         }"
+          class="time-show"
+          placeholder="00"
+          @input="emit"
+          @update:model-value="handle_sec()"
+          @click.prevent.stop="handle_sec(false)"
       />
     </div>
   </div>
@@ -89,16 +89,16 @@ export default {
     is24Hour: Boolean,
     modelValue: String
   },
-  emits:['update:modelValue','finish'],
+  emits: ['update:modelValue', 'finish'],
   data() {
     return {
       show: this.is24Hour ? "hours24" : "hours12",
-      hour: 0,
+      hour: null,
+      delay: 350,
       meridiem: "AM",
-      min: 0,
-      sec: 0,
+      min: null,
+      sec: null,
       isSmall: false,
-      isHand: false,
       hours12: {
         1: "1",
         2: "2",
@@ -267,7 +267,9 @@ export default {
   },
   mounted() {
     this.setup_hour();
-    this.parser(this.modelValue)
+    setTimeout(() => {
+      this.parser(this.modelValue)
+    }, 100)
   },
   computed: {
     nums() {
@@ -286,12 +288,15 @@ export default {
       txt = txt[0].split(':')
       this.hour = parseInt(txt[0])
       this.min = parseInt(txt[1])
+      if (this.withSec) {
+        this.sec = parseInt(txt[2])
+      }
       this.handle_hour(false)
     },
     emit() {
-      let hour = this.hour
-      let min = this.min
-      let sec = this.sec
+      let hour = this.hour || 0
+      let min = this.min || 0
+      let sec = this.sec || 0
       if (hour < 10) {
         hour = '0' + hour;
       }
@@ -308,10 +313,9 @@ export default {
       if (!this.is24Hour) {
         n += " " + this.meridiem;
       }
+
       this.$emit("update:modelValue", n);
-      if ((min !== null && !this.withSec) || sec !== null) {
-        this.$emit("finish", true);
-      }
+      this.$emit("finish", this.min === null ? 'hour' : (this.sec === null ? 'minute' : 'second'));
     },
     handle_hour(next = true) {
       if (this.hour > (this.is24Hour ? 23 : 12)) {
@@ -320,42 +324,45 @@ export default {
 
       this.show = this.is24Hour ? "hours24" : "hours12";
       setTimeout(() => {
+        this.isSmall = false
         this.setup_hour();
         this.hour && this.set(this.hour, next);
-      }, 10);
+      }, this.delay);
     },
     handle_min(next = true) {
       if (this.min > 59) {
         this.min = 59;
       }
       this.show = "mins";
-
+      this.setSmall(this.min)
       setTimeout(() => {
         this.setup_min();
         this.min && this.set(this.min, next);
-      }, 10);
+      }, this.delay);
     },
     handle_sec(next = true) {
       if (this.sec > 59) {
         this.sec = 59;
       }
       this.show = "seconds";
+      this.setSmall(this.sec)
       setTimeout(() => {
         this.setup_min();
         this.sec && this.set(this.sec, next);
-      }, 10);
+      }, this.delay);
     },
 
     set(h, next = true) {
       h = parseInt(h);
-      const circle = this.$refs.circle;
-      const cl = this.$refs["number"][h];
+      let cl = this.$refs["number"][h];
+      if (this.show === "hours12") {
+        cl = this.$refs["number"][h - 1];
+      }
+
       const hand = this.$refs.hand;
       const clock = this.$refs.clock.getBoundingClientRect();
 
       const b = cl.getBoundingClientRect();
-      circle.style.top = parseInt(cl.style.top) + 10 + "px";
-      circle.style.left = parseInt(cl.style.left) + 10 + "px";
 
       let ang = this.angle(
           b.left + 10,
@@ -376,46 +383,62 @@ export default {
       hand.style.transform = "rotate(" + ang + "deg)";
 
       if (this.show === "hours24" && (h === 0 || h >= 13)) {
-        hand.style.height = "60px";
+        hand.style.height = "70px";
       } else {
-        hand.style.height = "100px";
+        hand.style.height = "110px";
       }
 
       if (!next) {
+        if (this.show === "hours24" || this.show === "hours12") {
+          this.hour = h;
+        } else if (this.show === "mins") {
+          this.min = h;
+        }
+        this.emit();
         return
       }
       if (this.show === "hours24") {
-        this.show = "mins";
         this.hour = h;
         setTimeout(() => {
-          this.setup_min();
-        }, 10);
+          this.show = "mins";
+          setTimeout(() => {
+            this.setup_min();
+          }, this.delay);
+        }, this.delay);
       } else if (this.show === "hours12") {
-        this.show = "mins";
-        setTimeout(() => {
-          this.setup_min();
-        }, 10);
         this.hour = h;
+        setTimeout(() => {
+          this.show = "mins";
+          setTimeout(() => {
+            this.setup_min();
+          }, this.delay);
+        }, this.delay);
+
       } else if (this.show === "mins") {
         this.min = h;
-        if ([0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55].includes(h)) {
-          this.isSmall = false;
-          this.isHand = false;
-        } else {
-          this.isSmall = true;
-          this.isHand = true;
-        }
+        this.setSmall(h)
         if (this.withSec) {
-          this.show = "seconds";
           setTimeout(() => {
-            this.setup_min();
-          }, 10);
+            this.show = "seconds";
+            this.isSmall = false;
+            setTimeout(() => {
+              this.setup_min();
+            }, this.delay);
+          }, this.delay);
         }
       } else {
+        this.setSmall(h)
         this.sec = h;
       }
       this.emit();
     },
+    setSmall(h) {
+      if ([0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55].includes(h)) {
+        this.isSmall = false;
+      } else {
+        this.isSmall = true;
+      }
+    },
     angle(p1x, p1y, p2x, p2y, p3x, p3y) {
       let p0c = Math.sqrt(Math.pow(p3x - p1x, 2) + Math.pow(p3y - p1y, 2));
       let p1c = Math.sqrt(Math.pow(p3x - p2x, 2) + Math.pow(p3y - p2y, 2));
@@ -439,14 +462,15 @@ export default {
     setup_hour() {
       let cl = null;
       let po = null;
-      for (let i = 1; i <= 12; i++) {
-        cl = this.$refs["number"][i];
-        po = this.print_point(i, 110);
-        cl.style.left = po[0] - 10 + "px";
-        cl.style.top = po[1] - 10 + "px";
-        cl.classList.add('number-show')
-      }
+
       if (this.is24Hour) {
+        for (let i = 1; i <= 12; i++) {
+          cl = this.$refs["number"][i];
+          po = this.print_point(i, 110);
+          cl.style.left = po[0] - 10 + "px";
+          cl.style.top = po[1] - 10 + "px";
+          cl.classList.add('number-show')
+        }
         for (let i = 13; i <= 23; i++) {
           cl = this.$refs["number"][i];
           po = this.print_point(i, 70);
@@ -459,20 +483,24 @@ export default {
         cl.style.left = po[0] - 10 + "px";
         cl.style.top = po[1] - 10 + "px";
         cl.classList.add('number-show')
+      } else {
+        for (let i = 0; i < 12; i++) {
+          cl = this.$refs["number"][i];
+          po = this.print_point(i + 1, 110);
+          cl.style.left = po[0] - 10 + "px";
+          cl.style.top = po[1] - 10 + "px";
+          cl.classList.add('number-show')
+        }
       }
     },
     setup_min() {
-      const circle = this.$refs.circle;
-      circle.style.left = "130px";
-      circle.style.top = "20px";
-
       const clock = this.$refs.hand;
       clock.style.transform = "rotate(0)";
-      clock.style.height = "100px";
+      clock.style.height = "110px";
 
       let cl = null;
       let po = null;
-      for (let i = 0; i <= 59; i++) {
+      for (let i = 0; i < 60; i++) {
         cl = this.$refs["number"][i];
         po = this.print_point(i, 110, 60);
         cl.style.left = po[0] - 10 + "px";
@@ -491,6 +519,10 @@ export default {
 
   --color-timepicker: var(--color-one);
 
+  * {
+    transition: .15s all ease-in-out !important;
+  }
+
   .text-time {
     display: flex;
     justify-content: center;
@@ -585,6 +617,27 @@ export default {
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     transform-origin: bottom;
+
+    &:after {
+      content: "";
+      position: absolute;
+      width: 35px;
+      height: 35px;
+      border-radius: 50%;
+      color: var(--color-timepicker);
+      background-color: var(--color-timepicker);
+      border: 2px solid;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .is-small:after {
+    width: 12px !important;
+    height: 12px !important;
+    border-radius: 50% !important;
+    border: 2px solid;
+    background-color: unset !important;
+    transform: translate(-50%, -90%) !important;
   }
 
   .clock > .clock-item {
@@ -610,20 +663,6 @@ export default {
     border-radius: 50%;
   }
 
-  .clock .circle {
-    position: absolute;
-    z-index: 11;
-    width: 35px;
-    height: 35px;
-    top: 20px;
-    left: 130px;
-    border-radius: 50%;
-    color: var(--color-timepicker);
-    background-color: var(--color-timepicker);
-    border: 2px solid;
-    transform: translate(-50%, -50%);
-  }
-
   .time-active {
     color: var(--color-timepicker);
   }
@@ -642,14 +681,6 @@ export default {
     background-color: var(--color-timepicker);
   }
 
-  .is-small {
-    width: 12px !important;
-    height: 12px !important;
-    border-radius: 50% !important;
-    border: 2px solid;
-    background-color: unset !important;
-    transform: translate(-50%, -50%) !important;
-  }
 
   .number-disabled {
     pointer-events: none;

package/components/formCreator/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <r-card v-if="!autoSend" class="overflow-auto">
+  <r-card v-if="!autoSend" :class="$r.prefix+'form-creator'" class="overflow-auto">
     <r-container>
       <h1 v-if="title" class="title">{{ title }}</h1>
       <r-form ref="form" v-model="valid" @submit.prevent="save">
@@ -194,4 +194,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/components/img/index.vue

@@ -130,6 +130,8 @@ export default {
             if (p0 && p1) {
               wPH = p0 / p1
             }
+          } else {
+            wPH = 1
           }
         }
       }

package/components/table/crud/header.vue

@@ -39,7 +39,7 @@
                                       :label="$t('add','renusify')" @update:model-value="add"></r-select-input>
                       <r-divider class="my-3"></r-divider>
                       <template v-for="(item,i) in inputs" :key="i">
-                        <r-row class="v-baseline" v-if="['text-input','text-area'].includes(item.option.type)">
+                        <r-row v-if="['r-text-input','r-text-area'].includes(item.option.type)" class="v-baseline">
                           <r-col class="col-5 md-3">
                             <r-select-input v-model="item.advance.action"
                                             :items="[
@@ -63,17 +63,17 @@
                                 </r-btn>
                             </r-col>
                         </r-row>
-                        <r-row class="v-baseline" v-else-if="'number'===item.option.type">
-                            <r-col class="col-6 md-3">
-                              <r-select-input v-model="item.advance.action"
-                                              :items="[
+                        <r-row v-else-if="'r-number-input'===item.option.type" class="v-baseline">
+                          <r-col class="col-6 md-3">
+                            <r-select-input v-model="item.advance.action"
+                                            :items="[
                                           {name:$t('advance_search_equal','renusify'),value:'e'},
                                           {name:$t('advance_search_not_equal','renusify'),value:'ne'},
                                           {name:$t('advance_search_gt','renusify'),value:'gt'},
                                       {name:$t('advance_search_gte','renusify'),value:'gte'},
                                       {name:$t('advance_search_lt','renusify'),value:'lt'},
                                       {name:$t('advance_search_lte','renusify'),value:'lte'}]"
-                                              firstSelect
+                                            firstSelect
                                               justValue
                                               disableSearch
                                               :label="$t('advance_search_operator','renusify')"></r-select-input>
@@ -87,17 +87,17 @@
                                 </r-btn>
                             </r-col>
                         </r-row>
-                        <r-row class="v-baseline" v-else-if="'switch'===item.option.type">
-                            <r-col class="col-5 md-3">
-                              <r-select-input v-model="item.advance.action"
-                                              :items="[
+                        <r-row v-else-if="'r-switch-input'===item.option.type" class="v-baseline">
+                          <r-col class="col-5 md-3">
+                            <r-select-input v-model="item.advance.action"
+                                            :items="[
                                           {name:$t('advance_search_equal','renusify'),value:'e'}
                                           ]"
-                                              justValue
-                                              firstSelect
-                                              disableSearch
-                                              :label="$t('advance_search_operator','renusify')"></r-select-input>
-                                </r-col>
+                                            justValue
+                                            firstSelect
+                                            disableSearch
+                                            :label="$t('advance_search_operator','renusify')"></r-select-input>
+                          </r-col>
                             <r-col class="col-6 md-8">
                               <r-switch-input v-model="item.advance.search" :label="item.text"></r-switch-input>
                             </r-col>
@@ -107,17 +107,17 @@
                                 </r-btn>
                             </r-col>
                         </r-row>
-                        <r-row class="v-baseline" v-else-if="'select'===item.option.type">
-                            <r-col class="col-5 md-3">
-                              <r-select-input v-model="item.advance.action"
-                                              :items="[
+                        <r-row v-else-if="'r-select-input'===item.option.type" class="v-baseline">
+                          <r-col class="col-5 md-3">
+                            <r-select-input v-model="item.advance.action"
+                                            :items="[
                                           {name:$t('advance_search_in','renusify'),value:'in'},
                                           {name:$t('advance_search_not_in','renusify'),value:'nin'}
                                           ]"
-                                              justValue
-                                              firstSelect
-                                              disableSearch
-                                              :label="$t('advance_search_operator','renusify')"></r-select-input>
+                                            justValue
+                                            firstSelect
+                                            disableSearch
+                                            :label="$t('advance_search_operator','renusify')"></r-select-input>
                             </r-col>
                           <r-col class="col-6 md-8">
                             <r-select-input v-model="item.advance.search" :label="item.text" :items="item.option.items"
@@ -129,17 +129,38 @@
                             </r-btn>
                           </r-col>
                         </r-row>
-                      <r-row class="v-baseline" v-else-if="['date-input','time-ago'].includes(item.option.type)">
-                        <r-col class="col-5 md-3" :a="item.advance.t='date'">
-                          <r-select-input v-model="item.advance.action"
-                                          :items="[
+                        <r-row v-else-if="'r-json-input'===item.option.type" class="v-baseline">
+                          <r-col class="col-5 md-3">
+                            <r-select-input v-model="item.advance.action"
+                                            :items="[
+                                          {name:$t('advance_search_equal','renusify'),value:'e'},
+                                          {name:$t('advance_search_not_equal','renusify'),value:'ne'}
+                                          ]"
+                                            :label="$t('advance_search_operator','renusify')"
+                                            disableSearch
+                                            firstSelect
+                                            justValue></r-select-input>
+                          </r-col>
+                          <r-col class="col-6 md-8">
+                            <r-json-input v-model="item.advance.search" :label="item.text"></r-json-input>
+                          </r-col>
+                          <r-col class="col-1">
+                            <r-btn class="color-error" icon @click.prevent="del(i)">
+                              <r-icon v-html="$r.icons.delete"></r-icon>
+                            </r-btn>
+                          </r-col>
+                        </r-row>
+                        <r-row v-else-if="['r-date-input','r-time-ago'].includes(item.option.type)" class="v-baseline">
+                          <r-col class="col-5 md-3" :a="item.advance.t='date'">
+                            <r-select-input v-model="item.advance.action"
+                                            :items="[
                                          {name:$t('advance_search_gt','renusify'),value:'gt'},
                                       {name:$t('advance_search_gte','renusify'),value:'gte'},
                                       {name:$t('advance_search_lt','renusify'),value:'lt'},
                                       {name:$t('advance_search_lte','renusify'),value:'lte'}
                                           ]"
-                                          justValue
-                                          disableSearch
+                                            justValue
+                                            disableSearch
                                           firstSelect
                                           :label="$t('advance_search_operator','renusify')"></r-select-input>
                         </r-col>
@@ -210,9 +231,9 @@
             add($event) {
               this.inputs.push($event)
               $event.advance = {}
-                if($event.option.type==='switch'){
-                  $event.advance.search = false
-                }
+              if ($event.option.type === 'r-switch-input') {
+                $event.advance.search = false
+              }
                 this.select = []
             }
         },
@@ -220,7 +241,7 @@
             header() {
                 let res = []
                 this.headerTable.forEach((item) => {
-                  if (['text-input', 'text-area', 'number', 'switch', 'select', 'date-input', 'time-ago'].includes(item.option.type)) {
+                  if (['r-text-input', 'r-text-area', 'r-number-input', 'r-switch-input', 'r-select-input', 'r-json-input', 'r-date-input', 'r-time-ago'].includes(item.option.type)) {
                     res.push(item)
                   }
                 })
@@ -228,4 +249,4 @@
             }
         }
     }
-</script>
+</script>

package/components/table/crud/index.vue

@@ -102,14 +102,14 @@
               <r-icon v-html="props.opened!==props.key?$r.icons.plus:$r.icons.minus"></r-icon>
             </r-btn>
             <slot name="cell" :value="value" :item="props.item" :editItem="editItem">
-              <div v-if="value['option']['type']==='date-input' && props.item[value['value']]!==undefined">
+              <div v-if="value['option']['type']==='r-date-input' && props.item[value['value']]!==undefined">
                 {{ $d(new Date(props.item[value['value']]), value['option']['format'] || 'short') }}
               </div>
               <div
-                  v-else-if="value['option']['type']==='time-ago' && props.item[value['value']]!==undefined">
+                  v-else-if="value['option']['type']==='r-time-ago' && props.item[value['value']]!==undefined">
                 <r-time-ago :time="props.item[value['value']]"></r-time-ago>
               </div>
-              <div v-else-if="value['option']['type']==='switch-input'">
+              <div v-else-if="value['option']['type']==='r-switch-input'">
                 <r-switch-input
                     :readonly="value['option']['formInput']===false"
                     :modelValue="props.item[value['value']]"
@@ -117,7 +117,7 @@
                     class="mt-0"
                 ></r-switch-input>
               </div>
-              <div v-else-if="value['option']['type'] === 'number-input'">
+              <div v-else-if="value['option']['type'] === 'r-number-input'">
                 {{ $n(props.item[value["value"]]) }}
               </div>
               <div v-else-if="value['option']['type']!=='action'">

package/components/tabs/index.vue

@@ -1,17 +1,6 @@
 <template>
-  <nav :class="$r.prefix+'tabs'">
-    <div class="btn-tabs d-flex h-end v-center">
-      <r-btn @click.stop="isRtl?scroll_right():scroll_left()"
-             icon
-             text
-             v-if="isRtl?!disableRight:!disableLeft">
-        <r-icon v-html="$r.icons.chevron_left"></r-icon>
-      </r-btn>
-    </div>
-
-    <div :class="[wrapperClass,{
-    'tabs-hidden':$r.breakpoint.width>960
-    }]" class="tabs-wrap" ref="tabs">
+  <div :class="$r.prefix+'tabs'">
+    <div ref="tabs" :class="[wrapperClass]" class="tabs-wrap">
       <button
           v-for="tab in items"
           :key="tab.title"
@@ -33,16 +22,7 @@
           :style="{ width: `${activeLineWidth}px`, transform: `translateX(${activeLineOffset}px)` }"
           class="tabs__active-line"></div>
     </div>
-    <div class="btn-tabs d-flex h-start v-center">
-      <r-btn @click.stop="isRtl?scroll_left():scroll_right()"
-             icon
-             text
-             v-if="isRtl?!disableLeft:!disableRight">
-        <r-icon v-html="$r.icons.chevron_right"></r-icon>
-      </r-btn>
-    </div>
-
-  </nav>
+  </div>
 </template>
 
 <script>
@@ -77,15 +57,12 @@ export default {
   emits: ['update:modelValue'],
   data() {
     return {
-      disableLeft: true,
-      disableRight: true,
       activeLineWidth: 0,
       activeLineOffset: 0
     }
   },
   mounted() {
     setTimeout(() => {
-      this.offset()
       if (this.modelValue) {
         this.moveActiveLine(this.modelValue.toString())
       }
@@ -95,46 +72,12 @@ export default {
     modelValue(newCurrentTab, o) {
       if (o === newCurrentTab) return
       setTimeout(() => {
-        this.offset()
         this.moveActiveLine(newCurrentTab)
       }, 100)
     }
   },
-  computed: {
-    isRtl() {
-      return this.$r.rtl
-    }
-  },
-  methods: {
-    scroll_left() {
-      this.$refs.tabs.scrollLeft -= this.$refs.tabs.clientWidth * 3 / 4
-      this.offset()
-    },
-    scroll_right() {
-      this.$refs.tabs.scrollLeft += this.$refs.tabs.clientWidth * 3 / 4
-      this.offset()
-    },
-    offset() {
-      const div = this.$refs.tabs
-      this.disableLeft = true
-      this.disableRight = true
-      if (!div) {
-        return false
-      }
 
-      setTimeout(() => {
-        if (div.clientWidth === div.scrollWidth) {
-          this.disableLeft = true
-          this.disableRight = true
-        } else if (div.scrollLeft === 0) {
-          this.disableLeft = true
-          this.disableRight = false
-        } else if (div.scrollLeft + div.clientWidth === div.scrollWidth) {
-          this.disableRight = true
-          this.disableLeft = false
-        }
-      }, 100)
-    },
+  methods: {
     handleClick(value) {
       this.$emit('update:modelValue', value)
       this.moveActiveLine(value.toString())
@@ -169,10 +112,6 @@ $btnTabsWidth: 50px;
     width: calc(100% - #{$btnTabsWidth*2});
     overflow: auto;
 
-    &.tabs-hidden {
-      overflow: hidden;
-    }
-
     scroll-behavior: smooth;
   }
 

package/package.json

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

package/plugins/request/Request.js

@@ -3,8 +3,8 @@ class Request {
         this._baseURL = '/';
         this._headers={
             common:{
-                'Accept': 'application/json, text/plain, */*',
-                'X-Requested-With':'XMLHttpRequest'
+                'Accept': '*/*',
+                'X-Requested-With': 'XMLHttpRequest'
             },
             get:{
                 'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'
@@ -49,7 +49,7 @@ class Request {
                     xhr.setRequestHeader(key, opts.headers[key]);
                 });
             }
-            var params = opts.params;
+            let params = opts.params;
             // We'll need to stringify if we've been given an object
             // If we have a string, this is skipped.
             if (params && typeof params === "object") {

package/style/app.scss

@@ -250,13 +250,17 @@ $color-text: var(--color-two-text);
 }
 
 .#{$prefix}app {
+  * {
+    scroll-margin: 100px;
+  }
+
   ol, ul {
     margin: 0 15px;
   }
 
-    pre {
-      border-left: 5px solid var(--color-one);
-    }
+  pre {
+    border-left: 5px solid var(--color-one);
+  }
 
   pre {
     direction: ltr;
@@ -286,20 +290,21 @@ $color-text: var(--color-two-text);
     color: white;
   }
 
-    $background: #e2ece2;
-    blockquote {
-      background-color: $background;
-      border: 5px solid var(--color-one);
+  $background: #e2ece2;
 
-      &::before {
-        background-color: $background;
-      }
+  blockquote {
+    background-color: $background;
+    border: 5px solid var(--color-one);
 
-      &::after {
-        color: var(--color-one);
-      }
+    &::before {
+      background-color: $background;
     }
 
+    &::after {
+      color: var(--color-one);
+    }
+  }
+
   blockquote {
     font-family: Georgia, Times, "Times New Roman", serif;
     font-size: 1.25em;