renusify 3.0.1 → 3.0.2

package/components/avatar/index.vue

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

package/components/confirm/index.vue

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

package/components/form/checkboxInput/index.vue

@@ -102,7 +102,7 @@ const toggle = () => {
   width: 100%;
   cursor: pointer;
 
-  .checkbox-holder{
+  .checkbox-holder {
     display: flex;
     align-items: center;
   }

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/single.vue

@@ -3,15 +3,15 @@
     <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"
-          :model-value="uploadPercentage"
-          :width="2"
-          class="image-progress"
-          size="50"
+            :indeterminate="false"
+            :model-value="uploadPercentage"
+            :width="2"
+            class="image-progress"
+            size="50"
         >
           {{ `% ${uploadPercentage}` }}
         </r-progress-circle>
@@ -26,48 +26,48 @@
       </div>
       <div class="file-meta pa-1" v-if="meta && uploadPercentage===100">
         <r-text-input
-          v-for="(m,k) in meta"
-          :key="k"
-          v-model="metaList[m]"
-          :label="$t(m,'renusify')"
-          :rules="metaRequired?['required']:[]"
-          @update:model-value="emitFileLink"
+            v-for="(m,k) in meta"
+            :key="k"
+            v-model="metaList[m]"
+            :label="$t(m,'renusify')"
+            :rules="metaRequired?['required']:[]"
+            @update:model-value="emitFileLink"
         ></r-text-input>
       </div>
     </div>
 
     <r-icon
-      v-if="showAdd"
-      class="pick-icon cursor-pointer d-flex h-center v-center color-one-text"
-      height="100"
-      width="100"
-      v-html="$r.icons.plus"
-      @click.prevent.stop="pickFile"
+        v-if="showAdd"
+        class="pick-icon cursor-pointer d-flex h-center v-center color-one-text"
+        height="100"
+        width="100"
+        v-html="$r.icons.plus"
+        @click.prevent.stop="pickFile"
     ></r-icon>
     <input
-      v-if="showFile"
-      ref="fileInput"
-      :accept="accept"
-      style="display: none"
-      type="file"
-      @change="addFile"
+        v-if="showFile"
+        ref="fileInput"
+        :accept="accept"
+        style="display: none"
+        type="file"
+        @change="addFile"
     >
     <r-modal v-model="showCrop" max-width="300px" no-close-btn>
       <r-cropper
-        v-if="wPH && file"
-        :img-src="file"
-        :select-img="false"
-        :w-p-h="wPH || 1"
-        get-blob
-        show-cropped
-        @cropped="handleCropped"
+          v-if="wPH && file"
+          :img-src="file"
+          :select-img="false"
+          :w-p-h="wPH || 1"
+          get-blob
+          show-cropped
+          @cropped="handleCropped"
       ></r-cropper>
     </r-modal>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, nextTick, inject } from 'vue'
+import {ref, computed, watch, onMounted, nextTick, inject} from 'vue'
 
 const props = defineProps({
   accept: {
@@ -202,7 +202,7 @@ const checkSave = () => {
     // Calculate allowed aspect ratios
     const allowedWPH = calculateAllowedWPH(props.wPH)
 
-    img.onload = function() {
+    img.onload = function () {
       const currentWPH = parseFloat((this.width / this.height).toFixed(4))
 
       if (!allowedWPH.includes(currentWPH)) {
@@ -289,8 +289,8 @@ const saveImage = async () => {
       onUploadProgress: (progressEvent) => {
         if (progressEvent.total) {
           uploadPercentage.value = Math.min(
-            parseInt(Math.floor((progressEvent.loaded * 100) / progressEvent.total)),
-            98
+              parseInt(Math.floor((progressEvent.loaded * 100) / progressEvent.total)),
+              98
           )
         }
       },
@@ -313,7 +313,7 @@ const deleteImage = async () => {
 
   try {
     const response = await $axios.delete(props.uploadLink, {
-      data: { link: fileLink.value },
+      data: {link: fileLink.value},
       headers: props.headers
     })
     return response
@@ -352,7 +352,7 @@ const getUrl = (value) => {
 
 const emitFileLink = () => {
   if (props.meta) {
-    emit('file-link', { 'url': fileLink.value, 'meta': metaList.value })
+    emit('file-link', {'url': fileLink.value, 'meta': metaList.value})
   } else {
     emit('file-link', fileLink.value)
   }
@@ -365,7 +365,7 @@ watch(() => props.modelValue, (newVal, oldVal) => {
   if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
     setValue(newVal)
   }
-}, { immediate: true })
+}, {immediate: true})
 
 // Initialize
 onMounted(() => {

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/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,8 +256,8 @@ const getSize = () => {
   return false
 }
 
-const activate = (n=0) => {
-  if (n>10)return;
+const activate = (n = 0) => {
+  if (n > 10) return;
   getSize()
   if (size.value.width !== 0 || size.value.height) {
     load.value = true

package/components/infinite/index.vue

@@ -3,16 +3,16 @@
     <div ref="chat"
          v-scroll="{handler:onScroll,target:target}"
          :style="{'max-height': height,'height': height}"
-         class="infinite-page-container" :class="{'overflow-div':height}">
+         :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">
         <!-- Default slot for contents. Provide items, total props -->
         <slot :items="datacollection" :total="total">{{ datacollection }}</slot>
-        <r-col class="col-12" key="loading">
-          <r-progress-line color="color-two"
-                           v-show="loading"></r-progress-line>
+        <r-col key="loading" class="col-12">
+          <r-progress-line v-show="loading"
+                           color="color-two"></r-progress-line>
         </r-col>
       </transition-group>
     </div>
@@ -31,7 +31,7 @@ import {
   onActivated,
   onDeactivated,
   watch,
-  inject,nextTick
+  inject, nextTick
 } from 'vue'
 
 const props = defineProps({

package/components/menu/index.vue

@@ -2,14 +2,14 @@
   <div ref="menuRef" v-click-outside="close" :class="$r.prefix+'menu'">
     <div class="d-flex h-start flex-row v-center">
       <slot name="label">
-        <span class="menu-label" v-if="label" @click.prevent="open">{{ label }}</span>
+        <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" size="sm" @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" size="sm" @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,watch} from 'vue'
+import {ref, computed, onMounted, onUnmounted, watch} from 'vue'
 
 /**
  * @example // Slider usage
@@ -338,7 +338,9 @@ const goToSlide = (i) => {
   emit('index', currentIndex.value)
 }
 
-watch(()=>props.slides,()=>{init()})
+watch(() => props.slides, () => {
+  init()
+})
 onMounted(() => {
   init()
 })

package/components/swiper/index.vue

@@ -4,11 +4,11 @@
   >
     <!-- @slot Previous navigation slot
      @binding {Function} previous - Function to navigate previous -->
-    <slot name="previous" :previous="previous"></slot>
+    <slot :previous="previous" name="previous"></slot>
 
     <!-- @slot Next navigation slot
      @binding {Function} next - Function to navigate next -->
-    <slot name="next" :next="next"></slot>
+    <slot :next="next" name="next"></slot>
 
     <div class="swiper-container"
          ref="containerRef"
@@ -49,7 +49,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, inject, nextTick, watch } from 'vue'
+import {ref, computed, onMounted, onUnmounted, inject, nextTick, watch} from 'vue'
 
 /**
  * @example // Swiper usage
@@ -114,7 +114,7 @@ const props = defineProps({
   numShow: [Number, Object]
 })
 
-const { $r } = inject('renusify')
+const {$r} = inject('renusify')
 
 const timer = ref(null)
 const inMove = ref(false)
@@ -156,16 +156,16 @@ const goToSlide = (n) => {
  * Navigates to the next slide
  */
 const next = () => {
-  if(currentSlide.value+1>slides.value)return
-  goToSlide(currentSlide.value+1)
+  if (currentSlide.value + 1 > slides.value) return
+  goToSlide(currentSlide.value + 1)
 }
 
 /**
  * Navigates to the previous slide
  */
 const previous = () => {
-  if(currentSlide.value===1)return
-  goToSlide(currentSlide.value-1)
+  if (currentSlide.value === 1) return
+  goToSlide(currentSlide.value - 1)
 }
 
 /**
@@ -259,7 +259,7 @@ watch(() => props.items, () => {
   currentSlide.value = 1
 
   handleResize()
-}, { deep: true })
+}, {deep: true})
 
 defineExpose({
   /**

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/package.json

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