renusify 3.0.0 → 3.0.2

package/components/avatar/index.vue

@@ -180,8 +180,7 @@ const saveImage = () => {
     overflow: hidden;
     background-color: var(--color-sheet);
 
-    :deep(img),
-    :deep(svg) {
+    img, svg {
       width: 100%;
       height: 100%;
       object-fit: cover;

package/components/button/index.vue

@@ -270,9 +270,9 @@ $btn-sizes: (
     'xs': 1.5rem, // 24px - 6 units
     'sm': 2rem, // 32px - 8 units
     'md': 2.5rem, // 40px - 10 units
-    'lg': 2.75rem, // 44px - 11 units
-    'xl': 3.25rem, // 52px - 13 units
-    'xxl': 3.75rem, // 60px - 15 units
+    'lg': 3rem, // 48px - 12 units
+    'xl': 3.5rem, // 56px - 14 units
+    'xxl': 4rem, // 64px - 16 units
 ) !default;
 
 $btn-font-sizes: (
@@ -313,7 +313,7 @@ $fab-icon-sizes: (
   }
 
   height: $height;
-  padding: 0 math.div($height, 2);
+  padding: 0 math.div($height, 3);
   font-size: $font-size;
   border-radius: math.div($height, 10);
 }

package/components/confirm/index.vue

@@ -20,16 +20,16 @@
         </r-col>
       </r-row>
       <r-row class="h-end no-gutters">
-        <r-btn :loading="this.loading"
+        <r-btn v-if="!loading"
                @click.stop="cancel"
                class="color-error-text mx-1"
                outlined
                rounded
-               v-if="!this.loading">
+               :loading="loading">
           {{ cancelText || $t('cancel', 'renusify') }}
         </r-btn>
         <r-btn :disabled="hard&&!valid"
-               :loading="this.loading"
+               :loading="loading"
                @click.stop="confirm"
                class="color-success-text"
                outlined

package/components/form/checkboxInput/index.vue

@@ -1,10 +1,10 @@
 <template>
   <r-input :class="{
         [`${$r.prefix}checkbox`]:true,
-        'checkbox-readonly': this.readonly,
+        'checkbox-readonly': readonly,
     }" :modelValue="lazyValue" hide>
     <template v-slot="{isRequired}">
-      <div class="d-flex v-end">
+      <div class="checkbox-holder">
             <span class="checkbox-input" :class="{
                 [size]:true,
                    'br-circle':rounded,
@@ -102,6 +102,10 @@ const toggle = () => {
   width: 100%;
   cursor: pointer;
 
+  .checkbox-holder {
+    display: flex;
+    align-items: center;
+  }
   .checkbox-label {
     color: var(--color-on-sheet);
   }

package/components/form/dateInput/index.vue

@@ -54,7 +54,7 @@
                  :month="currentPeriod.month"
                  :year="currentPeriod.year"></month>
 
-          <div v-if="isRangeMode && rangeSelection.startDate && rangeSelection.endDate" class="range-info">
+          <div v-if="rangeMode && rangeSelection.startDate && rangeSelection.endDate" class="range-info">
             <div class="title-3">
               {{ $d(rangeSelection.startDate, withTime ? 'long' : 'medium', locale) }} -
               {{ $d(rangeSelection.endDate, withTime ? 'long' : 'medium', locale) }}
@@ -115,7 +115,7 @@
         </div>
       </div>
 
-      <div v-if="isRangeMode&&!showTime" class="date-picker-actions mb-3">
+      <div v-if="rangeMode&&!showTime" class="date-picker-actions mb-3">
         <r-btn class="color-one mx-5" @click.prevent="confirmRange">{{ $t('confirm', 'renusify') }}</r-btn>
         <r-btn class="mx-5" text @click.prevent="resetRange">{{ $t('reset', 'renusify') }}</r-btn>
       </div>
@@ -212,7 +212,7 @@ const firstDayOfWeek = computed(() =>
 )
 
 const modelValueDate = computed(() => {
-  if (props.isRangeMode && rangeSelection.value.startDate) {
+  if (props.rangeMode && rangeSelection.value.startDate) {
     return rangeSelection.value.startDate
   }
   if (!props.modelValue || !new Date(props.modelValue)) {
@@ -230,7 +230,7 @@ const lang_zone_offset = computed(() =>
 )
 
 const displayValue = computed(() => {
-  if (props.isRangeMode) {
+  if (props.rangeMode) {
     const {startDate, endDate} = rangeSelection.value
     if (startDate && endDate) {
       const format = props.withTime ? 'long' : 'medium'
@@ -326,7 +326,7 @@ const createDateCell = (date) => {
     inRange: false
   }
 
-  if (props.isRangeMode) {
+  if (props.rangeMode) {
     cell.isRangeStart = rangeSelection.value.startDate ? areSameDates(date, rangeSelection.value.startDate) : false
     cell.isRangeEnd = rangeSelection.value.endDate ? areSameDates(date, rangeSelection.value.endDate) : false
     cell.inRange = isDateInRange(date)
@@ -402,7 +402,7 @@ const setMonth = (monthIndex) => {
  * @param {Boolean} force - Force close even in range mode
  */
 const close = (force = false) => {
-  if (force || !props.isRangeMode) {
+  if (force || !props.rangeMode) {
     show.value = false
   }
   showTime.value = false
@@ -415,7 +415,7 @@ const selectTime = () => {
   const times = (time.value ? time.value : '00:00:00').split(':')
   const [hours, minutes, seconds] = times.map(t => parseInt(t))
 
-  if (props.isRangeMode) {
+  if (props.rangeMode) {
     handleRangeTimeSelection(hours, minutes, seconds)
   } else {
     handleSingleTimeSelection(hours, minutes, seconds)
@@ -478,7 +478,7 @@ const formatTime = (hours, minutes, seconds) => {
  */
 const selectDateItem = (item) => {
   if (!item.disabled) {
-    if (props.isRangeMode) {
+    if (props.rangeMode) {
       handleRangeSelection(item.date)
     } else {
       if (props.withTime) {
@@ -581,7 +581,7 @@ $dateTime.set_format({
   'ye': {year: 'numeric', numberingSystem: 'latn'}
 })
 
-if (props.isRangeMode && Array.isArray(props.modelValue) && props.modelValue.length === 2) {
+if (props.rangeMode && Array.isArray(props.modelValue) && props.modelValue.length === 2) {
   rangeSelection.value = {
     startDate: new Date(props.modelValue[0]),
     endDate: new Date(props.modelValue[1]),

package/components/form/fileInput/index.vue

@@ -99,7 +99,7 @@ const props = defineProps({
 
   /**
    * Additional metadata fields for files
-   * @type {Array}
+   * @type {Array[String]}
    */
   meta: Array,
 

package/components/form/fileInput/single.vue

@@ -3,7 +3,8 @@
     <div class="file-holder text-center">
       <div v-if="file || modelValue" class="image-canvas">
         <r-btn class="image-close color-white" icon size="xs">
-          <r-icon @click.prevent="fileDelete()" class="color-error-text" v-html="$r.icons.delete"></r-icon>
+          <r-icon class="color-error-text" v-html="$r.icons.delete"
+                  @click.prevent="fileDelete()"></r-icon>
         </r-btn>
         <r-progress-circle
             :indeterminate="false"
@@ -106,6 +107,7 @@ const file = ref(null)
 const file_type = ref(null)
 const uploadPercentage = ref(0)
 const $axios = inject('axios')
+const $helper = inject('renusify').$helper
 let CancelTokenSource = null
 
 // Computed properties
@@ -329,7 +331,7 @@ const handleCropped = (croppedFile) => {
 
 const setValue = (value) => {
   if (value) {
-    const fixUrl = window.$helper?.fix_url || ((url) => url)
+    const fixUrl = $helper?.fix_url || ((url) => url)
     fileLink.value = props.meta ? fixUrl(value['url']) : fixUrl(value)
     metaList.value = props.meta ? value['meta'] : {}
     showAdd.value = false
@@ -358,8 +360,11 @@ const emitFileLink = () => {
 }
 
 // Watch for modelValue changes
-watch(() => props.modelValue, (newVal) => {
-  setValue(newVal)
+
+watch(() => props.modelValue, (newVal, oldVal) => {
+  if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+    setValue(newVal)
+  }
 }, {immediate: true})
 
 // Initialize
@@ -372,4 +377,4 @@ defineExpose({
   fileDelete,
   pickFile
 })
-</script>
+</script>

package/components/form/numberInput/index.vue

@@ -44,10 +44,10 @@ const autofocus = attr.autofocus
 
 const props = defineProps({
   /**
-   * The input's model value (number or string)
-   * @type {Number|String}
+   * The input's model value
+   * @type {String}
    */
-  modelValue: [Number, String],
+  modelValue: String,
   /**
    * Step value for increment/decrement buttons
    * @type {Number}
@@ -78,7 +78,12 @@ const props = defineProps({
    * Maximum allowed value
    * @type {Number}
    */
-  max: Number
+  max: Number,
+  /**
+   * allowe float number
+   * @type {Number}
+   */
+  isFloat: Boolean
 })
 
 const emit = defineEmits([
@@ -91,6 +96,9 @@ const emit = defineEmits([
 
 // Reactive data
 const number = ref(props.modelValue)
+if (!props.isFloat && number.value !== undefined && number.value !== null && number.value !== "") {
+  number.value = parseInt(number.value).toString()
+}
 const active = ref(false)
 
 // Methods
@@ -111,14 +119,16 @@ const emitValue = (e = false) => {
 
   let value = number.value
 
-  if (props.max !== undefined && value > props.max) {
+  if (props.max !== undefined && parseFloat(value) > props.max) {
     value = props.max
   }
-  if (props.min !== undefined && value < props.min) {
+  if (props.min !== undefined && parseFloat(value) < props.min) {
     emit('update:modelValue', undefined)
     return;
   }
-
+  if (!props.isFloat) {
+    value = parseInt(value).toString()
+  }
   number.value = value
   emit('update:modelValue', number.value)
 }
@@ -128,7 +138,7 @@ const emitValue = (e = false) => {
  */
 const plus = () => {
   const currentValue = parseFloat(props.modelValue || props.min || 0)
-  number.value = currentValue + props.step
+  number.value = (currentValue + props.step).toString()
   emitValue()
 }
 
@@ -137,7 +147,7 @@ const plus = () => {
  */
 const minus = () => {
   const currentValue = parseFloat(props.modelValue || 0)
-  number.value = currentValue - props.step
+  number.value = (currentValue - props.step).toString()
   emitValue()
 }
 

package/components/form/selectInput/index.vue

@@ -13,7 +13,7 @@
             v-for="(item,key) in chips"
             :key="key"
             :class="{'px-0':!multiple,'chip body-3':multiple}"
-            class=" ms-0 d-flex v-center">
+            class="select-text ms-0 d-flex v-center">
           {{ item ? item[text] : '' }}
           <r-icon v-if="multiple" class="chip-icon cursor-pointer ms-1" height="16" width="16"
                   @click="handleChip(false,key)"
@@ -21,7 +21,7 @@
 
         </span>
         <span>
-        <input v-if="!disableSearch"
+        <input v-if="!disableSearch&&showMode!=='modal'"
                ref="inputRef"
                :autofocus="autofocus"
                :placeholder="modelValue?'':placeholder"

package/components/form/telInput/index.vue

@@ -146,7 +146,7 @@ const emitValue = () => {
   nextTick(() => {
     tel.value.phone = tel.value.phone.replaceAll(' ', '')
     if (tel.value.phone.startsWith('0')) {
-      tel.value.phone = tel.value.phone.substring(1, this.tel.phone.length)
+      tel.value.phone = tel.value.phone.substring(1, tel.value.phone.length)
       emit('update:modelValue', tel.value.country_code + ' ' + tel.value.phone)
     } else {
       emit('update:modelValue', tel.value.country_code + ' ' + tel.value.phone)

package/components/formCreator/index.vue

@@ -18,7 +18,7 @@
         </r-row>
         <template v-for="(item,i) in errors"
                   :key="i">
-          <div class="mb-2 br-md color-error d-flex">
+          <div class="mb-2 br-md color-error d-flex pa-3">
             <span>{{ $t(i) }}:</span>
             <span class="flex-grow-1">
             <div v-for="(er,k) in item" :key="k+'-'+i">

package/components/img/index.vue

@@ -256,13 +256,14 @@ const getSize = () => {
   return false
 }
 
-const activate = () => {
+const activate = (n = 0) => {
+  if (n > 10) return;
   getSize()
   if (size.value.width !== 0 || size.value.height) {
     load.value = true
   } else {
     nextTick(() => {
-      activate()
+      activate(n++)
     })
   }
 }

package/components/infinite/index.js

@@ -3,4 +3,5 @@ export * as l_card from '../card/index.js'
 export * as l_container from '../container/index.js'
 export * as l_row from '../container/row.js'
 export * as l_col from '../container/col.js'
-export * as l_switch from '../form/switchInput/index.js'
+export * as l_switch from '../form/switchInput/index.js'
+export * as d_scroll from '../../directive/scroll/index.js'

package/components/infinite/index.vue

@@ -1,20 +1,21 @@
 <template>
   <r-container :class="[$r.prefix+'infinite']">
     <div ref="chat"
-         v-scroll.[modifier]="onScroll"
+         v-scroll="{handler:onScroll,target:target}"
          :style="{'max-height': height,'height': height}"
-         class="infinite-page-container">
+         :class="{'overflow-div':height}" class="infinite-page-container">
       <transition-group :class="{'flex-column-reverse':isChat}"
                         :name="isChat?'slide-up':'slide-down'"
-                        class="row" tag="div">
+                        class="row"
+                        tag="div">
         <!-- Default slot for contents. Provide items, total props -->
         <slot :items="datacollection" :total="total">{{ datacollection }}</slot>
+        <r-col key="loading" class="col-12">
+          <r-progress-line v-show="loading"
+                           color="color-two"></r-progress-line>
+        </r-col>
       </transition-group>
     </div>
-    <r-progress-line v-show="loading"
-                     color="color-two"
-
-    ></r-progress-line>
     <div v-if="noItem"
          class="text-center title-2"
     >{{ noItemMsg }}
@@ -22,7 +23,16 @@
   </r-container>
 </template>
 <script setup>
-import {ref, computed, onMounted, onUnmounted, onActivated, onDeactivated, watch, inject} from 'vue'
+import {
+  ref,
+  computed,
+  onMounted,
+  onUnmounted,
+  onActivated,
+  onDeactivated,
+  watch,
+  inject, nextTick
+} from 'vue'
 
 const props = defineProps({
   /**
@@ -125,7 +135,7 @@ const loading = ref(false)
 const total = ref(0)
 const noItem = ref(false)
 
-const modifier = computed(() => props.height ? 'div' : 'window')
+const target = computed(() => props.height ? false : 'window')
 
 // Methods
 const onScroll = (e) => {
@@ -145,13 +155,13 @@ const onScroll = (e) => {
       }
     }
   } else {
-    if (active.value && document.body.offsetHeight < ((window.innerHeight + window.scrollY) + props.distanceLoad)) {
-      if (!loading.value) {
-        page.value++
-        if (datacollection.value.length < total.value) {
-          get()
-        }
-      }
+    if (active.value &&
+        (document.body.offsetHeight < ((window.innerHeight + window.scrollY) + props.distanceLoad)) &&
+        !loading.value &&
+        (datacollection.value.length < total.value)
+    ) {
+      page.value++
+      get()
     }
   }
 }
@@ -161,15 +171,21 @@ const get = () => {
   loading.value = true
   noItem.value = false
 
-  const params = {page: page.value}
+  let end = true
+  let params = {'page': page.value}
+
+  if (props.live === true) {
+    params = {'page': 1}
+    end = false
+  }
   if (typeof props.query === 'object') {
     Object.assign(params, props.query)
   }
 
   $axios.get(props.url, {params, headers: props.headers})
-      .then((res) => {
-        push(res.data.data)
-        total.value = res.data.total
+      .then(({data}) => {
+        push(data.data, end)
+        total.value = data.total
         if (total.value === 0) {
           noItem.value = true
         }
@@ -180,27 +196,48 @@ const get = () => {
       })
 }
 
-const push = (data) => {
-  const lng = data.length
-  for (let key = 0; key < lng; key++) {
-    datacollection.value.push(data[key])
-  }
-  let el = chat.value
-  let can = false
-  if (isChat.value) {
-    can = el.scrollHeight <= el.scrollTop + el.clientHeight
+const push = (data, end = false) => {
+  if (!end) {
+    let d = data
+    const lng = datacollection.value.length
+    for (let key = 0; key < lng; key++) {
+      if (key <= data.length) {
+        if ($helper.searchArray(d, '_id', datacollection.value[key]['_id']) === false) {
+          d.push(datacollection.value[key])
+        }
+      } else {
+        d.push(datacollection.value[key])
+      }
+    }
+    datacollection.value = d
   } else {
-    can = el.scrollTop === 0
+    let d = datacollection.value
+    const lng = data.length
+    for (let key = 0; key < lng; key++) {
+      if ($helper.searchArray(d, '_id', data[key]['_id']) === false) {
+        d.push(data[key])
+      }
+    }
+    datacollection.value = d
   }
-  if (props.isChat) {
+  nextTick(() => {
+    let el = chat.value
+    let can = false
+    if (props.isChat) {
+      can = el.scrollHeight <= el.scrollTop + el.clientHeight
+    } else {
+      can = el.scrollTop === 0
+    }
 
-    if (first.value || can) {
-      el.scrollTop = el.scrollHeight;
-      first.value = false
+    if (props.isChat) {
+      if (first.value || can) {
+        el.scrollTop = el.scrollHeight
+        first.value = false
+      }
+    } else if (can) {
+      el.scrollTop = 0
     }
-  } else if (can) {
-    el.scrollTop = 0;
-  }
+  })
 }
 
 let liveInterval = null
@@ -231,6 +268,7 @@ onDeactivated(() => {
 
 watch(() => props.live, (newValue) => {
   if (newValue) {
+    get()
     setupLiveUpdates()
   } else {
     clearInterval(liveInterval)
@@ -248,7 +286,11 @@ onUnmounted(() => {
 @use "../../style" as *;
 
 .#{$prefix}infinite {
-  margin-bottom: 100px;
-  width: 100%
+  width: 100%;
+
+  .overflow-div {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
 }
 </style>

package/components/menu/index.vue

@@ -1,13 +1,15 @@
 <template>
   <div ref="menuRef" v-click-outside="close" :class="$r.prefix+'menu'">
     <div class="d-flex h-start flex-row v-center">
-      <span class="menu-label" v-if="label" @click.prevent="open">{{ label }}</span>
+      <slot name="label">
+        <span v-if="label" class="menu-label" @click.prevent="open">{{ label }}</span>
+      </slot>
       <transition name="fade" mode="out-in">
         <!-- Header Navigation Menu Icons -->
-        <r-btn icon text v-if="show" key="on" @click.prevent="close">
+        <r-btn v-if="show" key="on" icon size="sm" text @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-btn v-else key="off" icon size="sm" text @click.prevent="open">
           <r-icon v-html="icon||$r.icons.chevron_down"></r-icon>
         </r-btn>
 

package/components/slider/index.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script setup>
-import {ref, computed, onMounted, onUnmounted} from 'vue'
+import {ref, computed, onMounted, onUnmounted, watch} from 'vue'
 
 /**
  * @example // Slider usage
@@ -338,6 +338,9 @@ const goToSlide = (i) => {
   emit('index', currentIndex.value)
 }
 
+watch(() => props.slides, () => {
+  init()
+})
 onMounted(() => {
   init()
 })

package/components/swiper/index.vue

@@ -2,13 +2,13 @@
   <div :class="`${$r.prefix}swiper`"
        ref="swiperRef"
   >
-    <!-- @slot Left navigation slot
-     @binding {Function} left - Function to navigate left/previous -->
-    <slot name="left" :left="left"></slot>
+    <!-- @slot Previous navigation slot
+     @binding {Function} previous - Function to navigate previous -->
+    <slot :previous="previous" name="previous"></slot>
 
-    <!-- @slot Right navigation slot
-     @binding {Function} right - Function to navigate right/next -->
-    <slot name="right" :right="right"></slot>
+    <!-- @slot Next navigation slot
+     @binding {Function} next - Function to navigate next -->
+    <slot :next="next" name="next"></slot>
 
     <div class="swiper-container"
          ref="containerRef"
@@ -138,18 +138,6 @@ const itemWidth = computed(() => {
 })
 
 
-const canGoNext = computed(() => {
-  const r = $r.rtl ? 1 : -1
-  const maxX = (containerRef.value?.scrollWidth - swiperRef.value?.offsetWidth) / r
-  return x.value * r < maxX
-})
-
-const canGoPrev = computed(() => {
-  const r = $r.rtl ? 1 : -1
-  return x.value * r > 0
-})
-
-
 /**
  * Navigates to a specific slide
  * @param {Number} n - Slide number (1-indexed)
@@ -165,41 +153,19 @@ const goToSlide = (n) => {
 }
 
 /**
- * Navigates to the next/right slide
- * @param {Number|null} customX - Custom distance to move in pixels
+ * Navigates to the next slide
  */
-const right = (customX = null) => {
-  if (!canGoNext.value) return
-
-  const moveX = customX || itemWidth.value || 200
-  clearTimeout(timer.value)
-
-  timer.value = nextTick(() => {
-    inMove.value = true
-    const direction = $r.rtl ? 1 : -1
-    x.value = prePosition.value - (moveX * direction)
-    end()
-    clearTimeout(timer.value)
-  })
+const next = () => {
+  if (currentSlide.value + 1 > slides.value) return
+  goToSlide(currentSlide.value + 1)
 }
 
 /**
- * Navigates to the previous/left slide
- * @param {Number|null} customX - Custom distance to move in pixels
+ * Navigates to the previous slide
  */
-const left = (customX = null) => {
-  if (!canGoPrev.value) return
-
-  const moveX = customX || itemWidth.value || 200
-  clearTimeout(timer.value)
-
-  timer.value = setTimeout(() => {
-    inMove.value = true
-    const direction = $r.rtl ? 1 : -1
-    x.value = prePosition.value + (moveX * direction)
-    end()
-    clearTimeout(timer.value)
-  }, 50)
+const previous = () => {
+  if (currentSlide.value === 1) return
+  goToSlide(currentSlide.value - 1)
 }
 
 /**
@@ -294,6 +260,21 @@ watch(() => props.items, () => {
 
   handleResize()
 }, {deep: true})
+
+defineExpose({
+  /**
+   * Navigates to the previous slide
+   */
+  previous,
+  /**
+   * Navigates to the next slide
+   */
+  next,
+  /**
+   * Return Current Slide
+   */
+  currentSlide
+})
 </script>
 
 <style lang="scss">

package/components/table/crud/index.vue

@@ -142,6 +142,7 @@
     </template>
     <r-table v-else :headers="headerTable" :items="table.data" :key-item="itemId"
              :responsive="responsive"
+             :editable="editable"
              transition="table-row">
       <template v-slot:header="{header}">
         <th v-for="(item,key) in header"
@@ -310,6 +311,11 @@ const props = defineProps({
    * @type {Boolean}
    */
   responsive: Boolean,
+  /**
+   * Enables editable table behavior
+   * @type {Boolean}
+   */
+  editable: Boolean,
   /**
    * Displays data in cards view instead of table
    * @type {Boolean}

package/components/table/index.vue

@@ -33,7 +33,8 @@
                   class="text-start text-no-wrap"
                   @click.prevent="sorting(item.value)">
                 {{ translate ? $t(item.text, 'renusify') : item.text }}
-                <r-icon v-if="sortKey===item.value" :class="{'sort-desc':!sortAsc}" v-html="$r.icons.arrow_up"></r-icon>
+                <r-icon v-if="sortKey===item.value" :class="{'sort-desc':!sortAsc}"
+                        v-html="$r.icons.arrow_up"></r-icon>
               </th>
             </slot>
           </tr>
@@ -207,6 +208,11 @@ const props = defineProps({
    * @type {Boolean}
    */
   editable: Boolean,
+  /**
+   * Table key for configuration editing
+   * @type {String}
+   */
+  tableKey: String,
   /**
    * Applies stripped row styling
    * @type {Boolean}
@@ -293,11 +299,22 @@ const lists = computed(() => {
 
 const th = computed(() => {
   const res = []
-  const list = cols.value.length > 0 ? cols.value : th_all.value
+  const lng = cols.value.length
+  const list = lng > 0 ? cols.value : th_all.value
 
   list.forEach((item) => {
     if (item && !(item.value in hidden.value) && !(item.value in hidden_col.value)) {
-      res.push(item)
+      if (lng > 0) {
+        for (let i = 0; i < lng; i++) {
+          const t = th_all.value[i]
+          if (t.value === item.value) {
+            res.push(t)
+            break
+          }
+        }
+      } else {
+        res.push(item)
+      }
     }
   })
   return res
@@ -324,7 +341,10 @@ const th_all = computed(() => {
 })
 
 const hash_key = computed(() => {
-  let r = ''
+  let r = window.location
+  if (props.tableKey) {
+    r += props.tableKey
+  }
   th_all.value.forEach((item) => {
     if (item) {
       r += item.value

package/directive/scroll/index.js

@@ -5,7 +5,7 @@
  *     <div class="scroll-areas">
  *       <div class="scroll-area">
  *         <h3>Window Scroll</h3>
- *         <div v-scroll.window="handleWindowScroll" class="scroll-content window-scroll">
+ *         <div v-scroll="{handler:handleWindowScroll,target:'window'}" class="scroll-content window-scroll">
  *           <div class="scroll-info">
  *             <div class="info-item">
  *               <span>Scroll Top:</span>
@@ -242,35 +242,39 @@
  * }
  * </style>
  * */
-function mounted (el, binding) {
-  const callback = binding.value
-  const options = binding.options || {
-    passive: true
-  }
+function mounted(el, binding) {
+    let callback = binding.value
+    if (typeof binding.value === 'object') {
+        binding = binding.value
+        callback = binding.handler
+    }
+    const options = binding.options || {
+        passive: true
+    }
     let target = el
-    if (binding.modifiers.window) {
+    if (binding.target === 'window') {
         target = window
-    } else if (binding.arg) {
-        target = document.querySelector(binding.arg)
+    } else if (binding.target) {
+        target = document.querySelector(binding.target)
+    }
+    if (!target) return
+    target.addEventListener('scroll', callback, options)
+    el._onScroll = {
+        callback,
+        options,
+        target
     }
-  if (!target) return
-  target.addEventListener('scroll', callback, options)
-  el._onScroll = {
-    callback,
-    options,
-    target
-  }
 }
 
-function unmounted (el) {
-  if (!el._onScroll) return
-  const {
-    callback,
-    options,
-    target
-  } = el._onScroll
-  target.removeEventListener('scroll', callback, options)
-  delete el._onScroll
+function unmounted(el) {
+    if (!el._onScroll) return
+    const {
+        callback,
+        options,
+        target
+    } = el._onScroll
+    target.removeEventListener('scroll', callback, options)
+    delete el._onScroll
 }
 
 export default {

package/index.js

@@ -18,38 +18,28 @@ function breakpoint() {
     const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
     const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
     const points = {
-        'xs': 0,
-        'sm': 576,
+        'sm': 0,
         'md': 768,
-        'lg': 1024,
-        'xl': 1440
+        'lg': 1200
     }
     let data = {
         points: points,
-        xsOnly: width < points.sm,
-        smOnly: points.sm <= width && width < points.md,
-        smAndDown: width < points.md,
-        smAndUp: width >= points.sm,
+        smOnly: width < points.md,
         mdOnly: points.md <= width && width < points.lg,
         mdAndDown: width < points.lg,
         mdAndUp: width >= points.md,
         lgOnly: points.lg <= width && width < points.xl,
         lgAndDown: width < points.xl,
         lgAndUp: width >= points.lg,
-        xlOnly: points.xl <= width,
         width: width,
         height: height
     }
-    if (data.xsOnly) {
-        data.name = 'xs'
-    } else if (data.smOnly) {
+    if (data.smOnly) {
         data.name = 'sm'
     } else if (data.mdOnly) {
         data.name = 'md'
     } else if (data.lgOnly) {
         data.name = 'lg'
-    } else if (data.xlOnly) {
-        data.name = 'xl'
     }
     return data
 }

package/package.json

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

package/style/variables/base.scss

@@ -25,10 +25,9 @@ $borders: (
 $cursor: ('pointer', 'auto', 'grab', 'grabbing') !default;
 
 $grid-breakpoints: (
-        'xs': 0,
-        'sm': 36rem, // Small devices (landscape phones, 576px)
-        'md': 48rem, // Medium devices (tablets, 768px)
-        'lg': 64rem, // Large devices (desktops, 1024px)
+        'sm': 0,
+        'md': 48rem, // Small devices (tablets, 768px)
+        'lg': 75rem, // Large devices (laptops, 1200px)
 ) !default;
 
 $base-font-size: 1rem;
@@ -39,10 +38,9 @@ $grid-columns: 12 !default;
 $container-padding-x: math.div($grid-gutter, 2) !default;
 
 $grid-gutters: (
-        'xs': math.div($grid-gutter, 12),
-        'sm': math.div($grid-gutter, 6),
+        'sm': math.div($grid-gutter, 12),
         'md': math.div($grid-gutter, 3),
-        'lg':$grid-gutter
+        'lg':$grid-gutter,
 ) !default;
 
 $box-shadows: (
@@ -56,8 +54,8 @@ $box-shadows: (
 ) !default;
 
 $container-max-widths: (
-        'md': map.get($grid-breakpoints, 'md')- 3rem,
-        'lg': map.get($grid-breakpoints, 'lg')- 4rem
+        'md': map.get($grid-breakpoints, 'md') - 3rem,
+        'lg': map.get($grid-breakpoints, 'lg') - 4rem
 ) !default;
 
 $font-weights: (

package/tools/icons.js

@@ -23,7 +23,7 @@ export let Icons = {
     'attachment': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M7.5 18A5.5 5.5 0 0 1 2 12.5A5.5 5.5 0 0 1 7.5 7H18a4 4 0 0 1 4 4a4 4 0 0 1-4 4H9.5A2.5 2.5 0 0 1 7 12.5A2.5 2.5 0 0 1 9.5 10H17v1.5H9.5a1 1 0 0 0-1 1a1 1 0 0 0 1 1H18a2.5 2.5 0 0 0 2.5-2.5A2.5 2.5 0 0 0 18 8.5H7.5a4 4 0 0 0-4 4a4 4 0 0 0 4 4H17V18H7.5Z"/></svg>',
     'send': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m2 21l21-9L2 3v7l15 2l-15 2v7Z"/></svg>',
     'sticker': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M5.5 2C3.56 2 2 3.56 2 5.5v13C2 20.44 3.56 22 5.5 22H16l6-6V5.5C22 3.56 20.44 2 18.5 2h-13m.25 2h12.5A1.75 1.75 0 0 1 20 5.75V15h-1.5c-1.94 0-3.5 1.56-3.5 3.5V20H5.75A1.75 1.75 0 0 1 4 18.25V5.75A1.75 1.75 0 0 1 5.75 4m8.69 2.77c-.16 0-.32.02-.47.06c-.94.26-1.47 1.22-1.23 2.17c.05.15.12.3.21.44l3.23-.88c0-.17-.02-.34-.06-.51c-.21-.75-.9-1.28-1.68-1.28M8.17 8.5c-.17 0-.32 0-.47.05c-.93.26-1.48 1.22-1.23 2.15c.03.16.12.3.21.46l3.23-.88c0-.17-.02-.34-.06-.5A1.72 1.72 0 0 0 8.17 8.5m8.55 2.76l-9.13 2.51a5.266 5.266 0 0 0 5.36 1.64a5.273 5.273 0 0 0 3.77-4.15Z"/></svg>',
-    'search': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5Z"/></svg>',
+    'search': '<svg width="24" height="24" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.25 15.5625C4.215 15.5625 0.9375 12.285 0.9375 8.25C0.9375 4.215 4.215 0.9375 8.25 0.9375C12.285 0.9375 15.5625 4.215 15.5625 8.25C15.5625 12.285 12.285 15.5625 8.25 15.5625ZM8.25 2.0625C4.8375 2.0625 2.0625 4.8375 2.0625 8.25C2.0625 11.6625 4.8375 14.4375 8.25 14.4375C11.6625 14.4375 14.4375 11.6625 14.4375 8.25C14.4375 4.8375 11.6625 2.0625 8.25 2.0625Z" fill="currentColor"/><path d="M15.12 17.0925C15.06 17.0925 15 17.085 14.9475 17.0775C14.595 17.0325 13.9575 16.7925 13.5975 15.72C13.41 15.1575 13.4775 14.595 13.785 14.1675C14.0925 13.74 14.61 13.5 15.2025 13.5C15.9675 13.5 16.5675 13.7925 16.8375 14.31C17.1075 14.8275 17.0325 15.4875 16.605 16.125C16.0725 16.9275 15.495 17.0925 15.12 17.0925ZM14.67 15.3675C14.7975 15.7575 14.9775 15.9525 15.0975 15.9675C15.2175 15.9825 15.4425 15.84 15.675 15.5025C15.8925 15.18 15.9075 14.9475 15.855 14.8425C15.8025 14.7375 15.5925 14.625 15.2025 14.625C14.97 14.625 14.7975 14.7 14.7 14.8275C14.61 14.955 14.595 15.15 14.67 15.3675Z" fill="currentColor"/></svg>',
     'drag': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M7 19v-2h2v2H7m4 0v-2h2v2h-2m4 0v-2h2v2h-2m-8-4v-2h2v2H7m4 0v-2h2v2h-2m4 0v-2h2v2h-2m-8-4V9h2v2H7m4 0V9h2v2h-2m4 0V9h2v2h-2M7 7V5h2v2H7m4 0V5h2v2h-2m4 0V5h2v2h-2Z"/></svg>',
     'setting': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M19.14 12.94c.04-.3.06-.61.06-.94c0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6s3.6 1.62 3.6 3.6s-1.62 3.6-3.6 3.6z"/></svg>',
     'star': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>',