renusify 2.2.1 → 2.2.3

package/components/chat/MessageList.vue

@@ -1,6 +1,6 @@
 <template>
     <div ref="containerMessage"
-         class="container-message-list" v-scroll="handle">
+         v-scroll.window="handle" class="container-message-list">
         <div v-for="message in messages" :key="message._id" class="message-container">
             <r-chat-message @see="$emit('see', $event)" :message="message" :is-me="message.user_id===myself.id"
                         :user="message.user_id===myself.id?myself:participants[message.user_id]"></r-chat-message>

package/components/cropper/index.vue

@@ -5,7 +5,7 @@
           v-for="(item, i) in allWPH"
           :key="i"
           :class="{ 'color-one-text': item === currentWPH }"
-          class="me-1 mb-1 cursor-pointer"
+          class="ma-1 cursor-pointer"
           label
           outlined
           @click.prevent="changeWPH(item)"

package/components/form/addressInput/index.vue

@@ -2,10 +2,10 @@
   <r-select-input
       :label="$t('country','renusify')"
       v-model="country"
-      v-if="!defaultCountry"
+      v-if="!hideCountry"
       @update:model-value="emit(true,true)"
       value="id"
-      :searchLink="`https://codenus.com/api/apps/address?lang=${$r.lang}`"
+      :searchLink="`${baseUrl}?lang=${$r.lang}`"
       :rules="required?['required']:[]"
       :headers="{'Authorization':''}"
       :readonly="readonly"
@@ -15,9 +15,9 @@
                   v-model="state"
                   :disabled="!country"
                   :key="country&&country['id']"
-                  v-if="!hideState"
+                  v-if="show_state"
                   @update:model-value="emit(false,true)"
-                  :searchLink="country&&`https://codenus.com/api/apps/address/${country['id']}?lang=${$r.lang}`"
+                  :searchLink="country&&`${baseUrl}/${country['id']}?lang=${$r.lang}`"
                   :rules="required?['required']:[]"
                   value="id"
                   :headers="{'Authorization':''}"
@@ -25,13 +25,13 @@
                   :tile="tile">
 
   </r-select-input>
-  <r-select-input v-if="!hideCity"
+  <r-select-input v-if="show_city"
                   v-model="city"
                   :disabled="!state"
                   :key="state&&(country['id']+'-'+state['id'])"
                   @update:model-value="emit(false,false)"
                   :label="$t('city','renusify')"
-                  :searchLink="state&&`https://codenus.com/api/apps/address/${country['id']}/${state['id']}?lang=${$r.lang}`"
+                  :searchLink="state&&`${baseUrl}/${country['id']}/${state['id']}?lang=${$r.lang}`"
                   :rules="required?['required']:[]"
                   value="id"
                   :headers="{'Authorization':''}"
@@ -39,13 +39,13 @@
                   :tile="tile">
 
   </r-select-input>
-  <r-text-input v-if="!hideZipCode" @update:model-value="emit(false,false)"
+  <r-text-input v-if="show_zip" @update:model-value="emit(false,false)"
                 :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)"
+  <r-text-area v-if="show_street" @update:model-value="emit(false,false)"
                :label="$t('street','renusify')"
                v-model="street"
                :tile="tile"
@@ -59,13 +59,16 @@ export default {
   inheritAttrs: false,
   props: {
     required: Boolean,
+    stepShow: Boolean,
     allowCountries: Array,
+    hideCountry: Boolean,
     hideState: Boolean,
     hideCity: Boolean,
     hideZipCode: Boolean,
     hideStreet: Boolean,
     readonly: Boolean,
     tile: {type: Boolean, default: undefined},
+    baseUrl: {type: String, default: "https://codenus.com/api/apps/address"},
     defaultCountry: Object,
     modelValue: Object
   },
@@ -81,13 +84,43 @@ export default {
   },
   watch: {
     modelValue() {
-      this.country = this.modelValue ? this.modelValue.country : null
+      this.country = this.modelValue ? this.modelValue.country : (this.defaultCountry ? this.defaultCountry : null)
       this.state = this.modelValue ? this.modelValue.state : null
       this.city = this.modelValue ? this.modelValue.city : null
       this.zip_code = this.modelValue ? this.modelValue.zip_code : null
       this.street = this.modelValue ? this.modelValue.street : null
     }
   },
+  computed: {
+    show_state() {
+      if (this.stepShow) {
+        return !this.hideState && this.country
+      } else {
+        return !this.hideState
+      }
+    },
+    show_city() {
+      if (this.stepShow) {
+        return !this.hideCity && this.state
+      } else {
+        return !this.hideCity
+      }
+    },
+    show_street() {
+      if (this.stepShow) {
+        return !this.hideStreet && this.city
+      } else {
+        return !this.hideStreet
+      }
+    },
+    show_zip() {
+      if (this.stepShow) {
+        return !this.hideZipCode && this.city
+      } else {
+        return !this.hideZipCode
+      }
+    }
+  },
   methods: {
     emit(clearState = false, clearCity = false) {
       setTimeout(() => {

package/components/form/fileInput/file.js

@@ -1,147 +1,148 @@
 export default {
-    props: {
-        headers: Object
+  props: {
+    headers: Object
+  },
+  data() {
+    return {
+      imageStatus: 'inProgress',
+      CancelTokenSource: this.$axios.CancelToken.source(),
+      fileLink: '',
+      file: null,
+      uploadPercentage: 0,
+    }
+  },
+  methods: {
+    addFile() {
+      this.CancelTokenSource = this.$axios.CancelToken.source()
+      this.file = this.$refs.file.files[0]
+      if (!this.wPH) {
+        this.checkSave()
+      } else {
+        this.showCrop = true
+      }
+      this.showAdd = false
     },
-    data() {
-        return {
-            imageStatus: 'inProgress',
-            CancelTokenSource: this.$axios.CancelToken.source(),
-            fileLink: '',
-            file: null,
-            uploadPercentage: 0,
-        }
+    pickFile() {
+      this.$refs.file.click()
     },
-    methods: {
-        addFile() {
-            this.CancelTokenSource = this.$axios.CancelToken.source()
-            this.file = this.$refs.file.files[0]
-            if (!this.wPH) {
-                this.checkSave()
-            } else {
-                this.showCrop = true
-            }
-            this.showAdd = false
-        },
-        pickFile() {
-            this.$refs.file.click()
-        },
-        fileDelete() {
-            this.CancelTokenSource.cancel()
-            this.deleteImage()
-            this.showFile = false
-            this.$nextTick(() => {
-                this.showFile = true
-            })
-            this.file = null
-            this.metaList = {}
-            this.uploadPercentage = 0
-            this.showAdd = true
-            this.$emit('delete', true)
-            this.$emit('file-link', null)
-        },
-        checkSave() {
-            if (this.maxFileSize && this.file.size > this.maxFileSize) {
-                this.CancelTokenSource.cancel()
-                console.error('max file size must be:' + this.maxFileSize);
-                console.error('current file size is:' + this.file.size);
-                this.$toast(this.$t(['max_allow_size', [this.maxFileSize / 1024]], 'renusify'))
-                return
-            }
+    fileDelete() {
+      this.CancelTokenSource.cancel()
+      this.deleteImage().then(() => {
+        this.showFile = false
+        this.$nextTick(() => {
+          this.showFile = true
+        })
+        this.file = null
+        this.metaList = {}
+        this.uploadPercentage = 0
+        this.showAdd = true
+        this.$emit('delete', true)
+        this.$emit('file-link', null)
+      })
+    },
+    checkSave() {
+      if (this.maxFileSize && this.file.size > this.maxFileSize) {
+        this.CancelTokenSource.cancel()
+        console.error('max file size must be:' + this.maxFileSize);
+        console.error('current file size is:' + this.file.size);
+        this.$toast(this.$t(['max_allow_size', [this.maxFileSize / 1024]], 'renusify'))
+        return
+      }
 
-            if (this.wPH) {
-                let img = new Image();
-                let objectUrl = URL.createObjectURL(this.file);
-                let that = this
-                const is_array = Array.isArray(this.wPH)
-                let wPH = []
-                if (is_array) {
-                    this.wPH.forEach((item) => {
-                        item = item.split('/')
-                        if (item.length === 2) {
-                            wPH.push(parseFloat(item[0]) / parseFloat(item[1]))
+      if (this.wPH) {
+        let img = new Image();
+        let objectUrl = URL.createObjectURL(this.file);
+        let that = this
+        const is_array = Array.isArray(this.wPH)
+        let wPH = []
+        if (is_array) {
+          this.wPH.forEach((item) => {
+            item = item.toString().split('/')
+            if (item.length === 2) {
+              wPH.push(parseFloat(item[0]) / parseFloat(item[1]))
 
-                        } else {
-                            wPH.push(parseFloat(item[0]))
+            } else {
+              wPH.push(parseFloat(item[0]))
 
-                        }
-                    })
-                } else {
-                    if (typeof this.wPH === 'string') {
-                        let item = this.wPH
-                        item = item.split('/')
-                        if (item.length === 2) {
-                            wPH.push(parseFloat((parseFloat(item[0]) / parseFloat(item[1])).toFixed(4)))
+            }
+          })
+        } else {
+          if (typeof this.wPH === 'string') {
+            let item = this.wPH
+            item = item.split('/')
+            if (item.length === 2) {
+              wPH.push(parseFloat((parseFloat(item[0]) / parseFloat(item[1])).toFixed(4)))
 
-                        } else {
-                            wPH.push(parseFloat(item[0]))
+            } else {
+              wPH.push(parseFloat(item[0]))
 
-                        }
-                    } else {
-                        wPH.push(this.wPH)
-                    }
+            }
+          } else {
+            wPH.push(this.wPH)
+          }
 
-                }
-                img.onload = function () {
-                    const wph = parseFloat((this.width / this.height).toFixed(4))
-                    if (!wPH.includes(wph)) {
-                        that.CancelTokenSource.cancel()
-                        that.$toast(that.$t(['image_w_p_h', [that.wPH]], 'renusify'))
-                        console.error('width per height must be:' + that.wPH, wPH);
-                        console.error('current width per height is:' + wph);
-                    }
+        }
+        img.onload = function () {
+          const wph = parseFloat((this.width / this.height).toFixed(4))
+          if (!wPH.includes(wph)) {
+            that.CancelTokenSource.cancel()
+            that.$toast(that.$t(['image_w_p_h', [that.wPH]], 'renusify'))
+            console.error('width per height must be:' + that.wPH, wPH);
+            console.error('current width per height is:' + wph);
+          }
 
-                    URL.revokeObjectURL(objectUrl);
-                    that.saveImage()
-                };
-                img.src = objectUrl;
-                return;
-            }
-            this.saveImage()
-        },
-        saveImage() {
-            this.imageStatus = 'inProgress'
-            let fileData = new FormData()
-            fileData.append('file', this.file, this.file.name)
-            let headers = this.headers
-            if (!headers) {
-                headers = {}
-            }
-            headers['Content-Type'] = 'multipart/form-data'
-            let link = this.uploadLink
-            if (this.maxFileSize) {
-                if (link.indexOf('?') === -1) {
-                    link += '?'
-                } else {
-                    link += '&'
-                }
-                link += 'max_size=' + this.maxFileSize
-            }
-            this.$axios.post(link, fileData,
-                {
-                    headers: headers,
-                    onUploadProgress: function (progressEvent) {
-                        this.uploadPercentage = Math.min(parseInt(Math.floor((progressEvent.loaded * 100) / progressEvent.total)), 98)
-                    }.bind(this),
-                    cancelToken: this.CancelTokenSource.token
-                }
-            )
-                .then((res) => {
-                    this.fileLink = res.data.link
-                    this.uploadPercentage = 100
-                    this.emit()
-                    this.imageStatus = 'finished'
-                }, () => {
-                    this.imageStatus = 'fails'
-                    this.uploadPercentage = 0
-                })
-        },
-        deleteImage() {
-            this.$axios.delete(this.uploadLink,
-                {
-                    data: {link: this.fileLink},
-                    headers: this.headers
-                }
-            )
-        },
-    }
+          URL.revokeObjectURL(objectUrl);
+          that.saveImage()
+        };
+        img.src = objectUrl;
+        return;
+      }
+      this.saveImage()
+    },
+    saveImage() {
+      this.imageStatus = 'inProgress'
+      let fileData = new FormData()
+      fileData.append('file', this.file, this.file.name)
+      let headers = this.headers
+      if (!headers) {
+        headers = {}
+      }
+      headers['Content-Type'] = 'multipart/form-data'
+      let link = this.uploadLink
+      if (this.maxFileSize) {
+        if (link.indexOf('?') === -1) {
+          link += '?'
+        } else {
+          link += '&'
+        }
+        link += 'max_size=' + this.maxFileSize
+      }
+      this.$axios.post(link, fileData,
+          {
+            headers: headers,
+            onUploadProgress: function (progressEvent) {
+              this.uploadPercentage = Math.min(parseInt(Math.floor((progressEvent.loaded * 100) / progressEvent.total)), 98)
+            }.bind(this),
+            cancelToken: this.CancelTokenSource.token
+          }
+      )
+          .then((res) => {
+            this.fileLink = res.data.link
+            this.uploadPercentage = 100
+            this.emit()
+            this.imageStatus = 'finished'
+          }, () => {
+            this.imageStatus = 'fails'
+            this.uploadPercentage = 0
+          })
+    },
+    deleteImage() {
+      return this.$axios.delete(this.uploadLink,
+          {
+            data: {link: this.fileLink},
+            headers: this.headers
+          }
+      )
+    },
+  }
 }

package/components/form/fileInput/single.vue

@@ -14,7 +14,7 @@
         >
           {{ `% ${uploadPercentage}` }}
         </r-progress-circle>
-        <r-btn :href="'/'+fileLink" class="image-copy" icon target="_blank">
+        <r-btn :href="fileLink" class="image-copy" icon target="_blank">
           <r-icon v-html="$r.icons.eye"></r-icon>
         </r-btn>
         <img v-if="isImg()" :class="`image ${imageStatus} `" :src="getUrl(file)">
@@ -89,7 +89,7 @@ export default {
   methods: {
     setValue() {
       if (this.modelValue) {
-        this.fileLink = this.meta ? this.modelValue['url'] : this.modelValue
+        this.fileLink = this.$helper.fix_url(this.meta ? this.modelValue['url'] : this.modelValue)
         this.metaList = this.meta ? this.modelValue['meta'] : {}
         this.showAdd = false
         this.imageStatus = 'finished'
@@ -99,7 +99,7 @@ export default {
     },
     getUrl(value) {
       if (this.modelValue) {
-        return '/' + this.fileLink
+        return this.fileLink
       } else {
         return URL.createObjectURL(value)
       }

package/components/form/jsonInput/index.vue

@@ -21,7 +21,8 @@
           @click.prevent="open">
         <r-icon v-html="$r.icons.plus"></r-icon>
       </r-btn>
-      <div v-else-if="show" class="d-flex v-baseline">
+      <div v-else-if="show" class="d-flex v-baseline flex-wrap">
+        <slot :add="add" :info="info">
         <r-text-input
             v-if="!is_array"
             v-model="info.key"
@@ -50,6 +51,7 @@
                         :tile="tile"
                         v-model="info.value" :label="valueLabel||$t('value','renusify')"></r-switch-input>
         <r-btn :rounded="!c_tile" class="ms-1 color-success" @click.prevent="add">{{ $t('add', 'renusify') }}</r-btn>
+        </slot>
       </div>
     </div>
     <div v-else :class="{'state-error':error}" class="json-highlight ltr">

package/components/form/selectInput/index.vue

@@ -46,7 +46,7 @@
                     width:$refs.select&&$refs.select.getBoundingClientRect().width+'px'
                 }"
     >
-      <r-list :filter="inputVal&&inputVal.trim()"
+      <r-list :filter="!searchLink?(inputVal&&inputVal.trim()):''"
               :items="genItems"
               :multiple="multiple"
               :modelValue="chips"

package/components/form/telInput/index.vue

@@ -1,5 +1,19 @@
 <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">
+      <div :class="activeCountry.iso2.toLowerCase()" class="iti-flag"></div>
+      <span class="country-code pa-1"> +{{ activeCountry.dialCode }} </span>
+      <span class="dropdown-arrow">{{ open ? "▲" : "▼" }}</span>
+    </r-btn>
+    <r-text-input v-model="tel.phone" :label="label?label:$t('phone','renusify')"
+                  :readonly="readonly"
+                  :rules="required?['required','number']:['number']"
+                  :tile="c_tile"
+                  class="input-phone"
+                  @update:model-value="emit"
+    >
+    </r-text-input>
     <r-modal
         v-model="open"
     >
@@ -20,21 +34,6 @@
         </r-list>
       </div>
     </r-modal>
-    <r-btn class="btn-country ltr ms-1"
-           :rounded="!c_tile" :disabled="!select||readonly" @click.stop="toggleDropdown" outlined>
-      <div :class="activeCountry.iso2.toLowerCase()" class="iti-flag"></div>
-      <span class="country-code pa-1"> +{{ activeCountry.dialCode }} </span>
-      <span class="dropdown-arrow">{{ open ? "▲" : "▼" }}</span>
-    </r-btn>
-    <r-text-input class="input-phone" :label="label?label:$t('phone','renusify')"
-                  @update:model-value="emit"
-                  :tile="c_tile"
-                  :readonly="readonly"
-                  :rules="required?['required','number']:['number']"
-                  v-model="tel.phone"
-    >
-    </r-text-input>
-
   </div>
 </template>
 
@@ -62,7 +61,7 @@ export default {
     }
 
   },
-  emits:['update:modelValue'],
+  emits: ['update:modelValue'],
   data() {
     return {
       tel: {
@@ -75,19 +74,19 @@ export default {
       open: false
     }
   },
-  mounted() {
-    import('./assets/all-countries.js').then((d)=>{
+  created() {
+    import('./assets/all-countries.js').then((d) => {
       this.countries = d.default;
-      this.initializeCountry()
+      if (this.modelValue) {
+        let a = this.modelValue.split(' ')
+        this.tel.country_code = a[0]
+        this.tel.phone = a[1]
+        this.activeCountry = this.findCountryByCode(this.tel.country_code)
+      } else {
+        this.initializeCountry()
+      }
     })
-  },
-  created() {
-    if (this.modelValue) {
-      let a = this.modelValue.split(' ')
-      this.tel.country_code = a[0]
-      this.tel.phone = a[1]
-      this.activeCountry.dialCode = this.tel.country_code
-    }
+
   },
   computed: {
     c_tile() {
@@ -109,6 +108,9 @@ export default {
     findCountry(iso = '') {
       return this.countries.find(country => country.iso2 === iso)
     },
+    findCountryByCode(code = '') {
+      return this.countries.find(country => country.dialCode === code)
+    },
 
     choose(country) {
       this.activeCountry = country
@@ -152,15 +154,16 @@ export default {
   display: flex;
   align-items: baseline;
   direction: ltr;
-
+  flex-wrap: wrap;
   .btn-country {
-    width: 120px;
+    width: 100px;
     border-color: var(--color-sheet-low)
 
   }
 
   .input-phone {
-    width: calc(100% - 120px);
+    width: calc(100% - 104px);
+    min-width: 150px;
   }
 }
 </style>

package/components/img/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-intersect[modifier]="check" :class="{
+  <div v-intersect.[modifier]="check" :class="{
         [$r.prefix+'img']:true,
         'img-hoverZoom':hoverZoom,'img-hoverDark':hoverDark,'img-hoverTitle':hoverTitle}"
        ref="rImg">
@@ -94,7 +94,7 @@ export default {
         res += this.query
       }
       if (this.isSvg && this.svgCache) {
-        res += 'c=' + this.svgCache
+        res += '&c=' + this.svgCache
       }
       if (!this.isSvg && ((this.autoSize && this.size.width > 0) || this.width)) {
         res += `&w=${this.size.width}`

package/components/infinite/page.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="infinite-page">
-        <div class="infinite-page-container" v-scroll="onScroll">
+      <div v-scroll.window="onScroll" class="infinite-page-container">
             <slot :items="datacollection" :total="total"></slot>
         </div>
         <r-progress-line color="color-two"

package/components/searchBox/index.vue

@@ -34,7 +34,7 @@
               @focusout="active = false"
               @input="handle"
           />
-          <r-icon v-html="$r.icons.search"></r-icon>
+          <r-icon class="mx-1" v-html="$r.icons.search"></r-icon>
         </span>
       </div>
       <r-card

package/components/slider/index.vue

@@ -305,6 +305,8 @@ export default {
     list-style: none;
     padding: 0;
     white-space: nowrap;
+    max-width: 100%;
+    overflow: auto;
   }
 
   .slider-dot {

package/components/table/crud/header.vue

@@ -1,252 +1,158 @@
 <template>
-    <div>
-      <r-container class="container-fluid">
-        <r-row class="h-start h-space-between">
-          <r-col class="col-auto">
-            <r-btn @click.prevent="newItem"
-                   v-if="!disableAdd"
-                   class="color-success-text"
-                   outlined
-                   rounded>{{ $t('new', 'renusify') }}
+  <div>
+    <r-container class="container-fluid pa-0 mb-3">
+      <r-row class="h-start h-space-between" no-gutter>
+        <r-col class="col-auto">
+          <r-btn v-if="!disableAdd"
+                 class="color-success-text"
+                 outlined
+                 rounded
+                 @click.prevent="newItem">{{ $t('new', 'renusify') }}
+          </r-btn>
+        </r-col>
+        <r-col class="col-auto">
+          <template v-if="mcud">
+            <r-btn class="color-error mx-1" icon @click.prevent="showConfirm=true">
+              <r-icon v-html="$r.icons.delete"></r-icon>
             </r-btn>
-          </r-col>
-                <r-col class="col-auto">
-                    <template v-if="mcud">
-                      <r-btn class="color-error mx-1" icon @click.prevent="showConfirm=true">
-                        <r-icon v-html="$r.icons.delete"></r-icon>
-                      </r-btn>
-                        <r-btn icon class="color-success mx-1" @click.prevent="$emit('copy',true)">
-                            <r-icon v-html="$r.icons.copy"></r-icon>
-                        </r-btn>
-                        <r-btn icon class="color-info mx-1" @click.prevent="$emit('edit',true)">
-                            <r-icon v-html="$r.icons.edit"></r-icon>
-                        </r-btn>
-                    </template>
-                    <r-btn @click.prevent="open"
-                           v-if="advanceSearch"
-                           :class="{'color-info':!show,'color-error':show}"
-                           rounded>{{$t(!show?'advance_search':'search','renusify')}}
-                    </r-btn>
-                </r-col>
-                <r-col v-if="!show" class="col-12">
-                    <r-text-input :label="$t('search','renusify')"
-                                  @update:modelValue="$emit('update:modelValue',$event)"
-                                  :model-value="search"></r-text-input>
-                </r-col>
-                <r-col v-else class="col-12">
-                    <r-container class="pa-0" full-width>
-                      <r-select-input :model-value="select" :items="header" text="text" disableSearch
-                                      :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 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="[
-                                          {name:$t('advance_search_like','renusify'),value:'r'},
-                                          {name:$t('advance_search_not_like','renusify'),value:'nr'},
-                                          {name:$t('advance_search_equal','renusify'),value:'e'},
-                                          {name:$t('advance_search_not_equal','renusify'),value:'ne'},
-                                          {name:$t('advance_search_id','renusify'),value:'_id'}
-                                          ]"
-                                            justValue
-                                            disableSearch
-                                            firstSelect
-                                            :label="$t('advance_search_operator','renusify')"></r-select-input>
-                                </r-col>
-                            <r-col class="col-6 md-8">
-                              <r-text-input v-model="item.advance.search" :label="item.text"></r-text-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-number-input'===item.option.type" class="v-baseline">
-                          <r-col class="col-6 md-3">
-                            <r-select-input v-model="item.advance.action"
-                                            :items="[
+            <r-btn class="color-success mx-1" icon @click.prevent="$emit('copy',true)">
+              <r-icon v-html="$r.icons.copy"></r-icon>
+            </r-btn>
+            <r-btn class="color-info mx-1" icon @click.prevent="$emit('edit',true)">
+              <r-icon v-html="$r.icons.edit"></r-icon>
+            </r-btn>
+          </template>
+          <r-btn v-if="advanceSearch"
+                 :class="{'color-info':!show,'color-error':show}"
+                 rounded
+                 @click.prevent="open">{{ $t(!show ? 'advance_search' : 'search', 'renusify') }}
+          </r-btn>
+        </r-col>
+        <r-col v-if="!show" class="col-12">
+          <r-text-input :label="$t('search','renusify')"
+                        :model-value="modelValue"
+                        @update:modelValue="$emit('update:modelValue',$event)"></r-text-input>
+        </r-col>
+        <r-col v-else class="col-12">
+          <r-container class="pa-0" full-width>
+            <r-json-input v-model="advance"
+                          :label="$t('search','renusify')">
+              <template v-slot="{info,add}">
+                <r-select-input v-model="info.key"
+                                :items="headers[0]"
+                                :label="$t('name','renusify')"
+                                just-value></r-select-input>
+
+                <r-select-input v-if="info.key" :key="info.key" v-model="info.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
-                                              justValue
-                                              disableSearch
-                                              :label="$t('advance_search_operator','renusify')"></r-select-input>
-                                </r-col>
-                            <r-col class="col-6 md-8">
-                              <r-number-input v-model="item.advance.search" :label="item.text"></r-number-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-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>
-                            <r-col class="col-6 md-8">
-                              <r-switch-input v-model="item.advance.search" :label="item.text"></r-switch-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-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>
-                            </r-col>
-                          <r-col class="col-6 md-8">
-                            <r-select-input v-model="item.advance.search" :label="item.text" :items="item.option.items"
-                                            justValue multiple tags></r-select-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-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
-                                          firstSelect
-                                          :label="$t('advance_search_operator','renusify')"></r-select-input>
-                        </r-col>
-                        <r-col class="col-6 md-8">
-                          <r-date-input with-time v-model="item.advance.search" :label="item.text"></r-date-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>
-                    </template>
-                        <r-btn block rounded class="color-info" :loading="loading" @click.prevent="send">{{$t('search','renusify')}}</r-btn>
-                        </r-container>
-                </r-col>
-            </r-row>
-        </r-container>
-      <r-progress-line v-if="loading" color="color-one"></r-progress-line>
-        <r-confirm
-                hard
-                v-model="showConfirm"
-                v-on:accept="accept"
-                v-on:cancel="showConfirm = false"
-        />
-    </div>
+                                          {name:$t('advance_search_lt','renusify'),value:'lt'}]"
+                                :label="$t('advance_search_operator','renusify')"
+                                disableSearch
+                                firstSelect
+                                justValue></r-select-input>
+
+                <div v-if="info.key" :key="info.key">
+                  <component :is="headers[1][info.key].type" v-if="headers[1][info.key].type"
+                             v-model="info.value"
+                             :label="$t('search','renusify')"
+                             v-bind="headers[1][info.key].props"></component>
+                </div>
+                <r-btn :rounded="!$r.inputs.tile" class="ms-1 color-success" @click.prevent="added(info,add)">
+                  {{ $t('add', 'renusify') }}
+                </r-btn>
+              </template>
+            </r-json-input>
+
+            <r-btn :loading="loading" block class="color-info mt-2" rounded @click.prevent="send">
+              {{ $t('search', 'renusify') }}
+            </r-btn>
+          </r-container>
+        </r-col>
+      </r-row>
+    </r-container>
+    <r-progress-line v-if="loading" color="color-one"></r-progress-line>
+    <r-confirm
+        v-model="showConfirm"
+        hard
+        v-on:accept="accept"
+        v-on:cancel="showConfirm = false"
+    />
+  </div>
 </template>
 <script>
-    export default {
-        name: 'manageHeader',
-        props: {
-            headerTable: Object,
-            loading: Boolean,
-            disableAdd: Boolean,
-            advanceSearch: Boolean,
-            mcud: Boolean,
-            newItem: Function,
-            search: String
-        },
-      emits:['update:modelValue','copy','edit','delete','a-search'],
-        data() {
-            return {
-                show: false,
-                showConfirm: false,
-                select: [],
-                inputs: []
-            }
-        },
-        methods: {
-            accept(){
-              this.$emit('delete',true)
-                this.showConfirm=false
-            },
-            send() {
-              this.$emit('update:modelValue', '')
-              let r = []
-              this.inputs.forEach((item) => {
-                r.push({'name': item.value, 'advance': item.advance})
-              })
-              this.$emit('a-search', r)
-            },
-            del(i){
-                this.inputs.splice(i,1)
-            },
-            open(){
-              this.show=!this.show
-            },
-            add($event) {
-              this.inputs.push($event)
-              $event.advance = {}
-              if ($event.option.type === 'r-switch-input') {
-                $event.advance.search = false
-              }
-                this.select = []
-            }
-        },
-        computed: {
-            header() {
-                let res = []
-                this.headerTable.forEach((item) => {
-                  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)
-                  }
-                })
-                return res
-            }
+export default {
+  name: 'manageHeader',
+  props: {
+    headerTable: Object,
+    loading: Boolean,
+    disableAdd: Boolean,
+    advanceSearch: Boolean,
+    mcud: Boolean,
+    newItem: Function,
+    modelValue: String
+  },
+  emits: ['update:modelValue', 'copy', 'edit', 'delete', 'a-search'],
+  data() {
+    return {
+      show: false,
+      showConfirm: false,
+      advance: null
+    }
+  },
+  computed: {
+    headers() {
+      let r = []
+      let r2 = {}
+      for (let i = 0; i < this.headerTable.length; i++) {
+        r.push({'name': this.$t(this.headerTable[i].text), 'value': this.headerTable[i].value})
+        r2[this.headerTable[i].value] = this.headerTable[i].option
+        if (this.headerTable[i].option.type === 'r-date-input' || this.headerTable[i].option.type === 'r-time-ago') {
+          r2[this.headerTable[i].value]['withTime'] = true
         }
+      }
+      return [r, r2]
     }
+  },
+  methods: {
+    added(info, add) {
+      let item = this.headers[1][info.key]
+      if (info.key === '_id' || item.is_object_id) {
+        info.value = {'$oid': info.value}
+      } else if (item.type === 'r-date-input' || item.type === 'r-time-ago') {
+        if (info.action === 'eq') {
+          info.value = {'$date': info.value}
+        } else if (info.action === 'ne') {
+          info.value = {'$ne': {'$date': info.value}}
+        } else if (info.action === 'gt') {
+          info.value = {'$gt': {'$date': info.value}}
+        } else if (info.action === 'lt') {
+          info.value = {'$lt': {'$date': info.value}}
+        }
+      } else {
+        if (info.action === 'ne') {
+          info.value = {'$ne': info.value}
+        } else if (info.action === 'gt') {
+          info.value = {'$gt': info.value}
+        } else if (info.action === 'lt') {
+          info.value = {'$lt': info.value}
+        }
+      }
+      add()
+    },
+    accept() {
+      this.$emit('delete', true)
+      this.showConfirm = false
+    },
+    send() {
+      this.$emit('update:modelValue', '')
+      this.$emit('a-search', this.advance)
+    },
+    open() {
+      this.show = !this.show
+    },
+  }
+}
 </script>

package/components/table/crud/index.js

@@ -14,7 +14,4 @@ export * as l_col from '../../container/col.js'
 export * as l_divider from '../../container/divider.js'
 export * as l_json from '../../form/jsonInput/index.js'
 export * as l_text from '../../form/textInput/index.js'
-export * as l_select from '../../form/selectInput/index.js'
-export * as l_date from '../../form/dateInput/index.js'
-export * as l_number from '../../form/numberInput/index.js'
 export * as l_switch from '../../form/switchInput/index.js'

package/components/table/crud/index.vue

@@ -58,7 +58,60 @@
                    @edit="copyHandle('edit')"
                    @update:modelValue="searching()"
                    @a-search="(a_search=$event),(searching())"></manage-header>
-    <r-table :headers="headerTable" :items="table.data" :key-item="itemId" :responsive="responsive"
+    <div v-if="card" class="d-flex overflow-x-auto">
+      <div class="d-flex">
+        <r-card v-for="(item,i) in table.data" :key="i" :class="{'br-lg':!$r.inputs.tile}" class="pa-3 me-3"
+                style="width: 300px">
+          <div v-for="(h,j) in headerTable" :key="i+'-'+j" class="d-flex text-no-wrap overflow-x-auto">
+            <slot :data="item" :header="h" name="card">
+              <div v-if="h['option']['type']==='r-date-input' && item[h['value']]!==undefined" class="py-2">
+                {{ h['text'] }}: {{ $d(new Date(item[h['value']]), h['option']['format'] || 'short') }}
+              </div>
+              <div
+                  v-else-if="h['option']['type']==='r-time-ago' && item[h['value']]!==undefined" class="py-2">
+                {{ h['text'] }}:
+                <r-time-ago :time="item[h['value']]"></r-time-ago>
+              </div>
+              <div v-else-if="h['option']['type']==='r-switch-input'" class="d-flex py-2">
+                {{ h['text'] }}:
+                <r-switch-input
+                    :modelValue="item[h['value']]"
+                    :readonly="h['option']['formInput']===false"
+                    class="mt-0"
+                    @update:modelValue="h['option']['formInput']!==false?editItem(item,true,h['value']):''"
+                ></r-switch-input>
+              </div>
+              <div v-else-if="h['option']['type'] === 'r-number-input'" class="py-2">
+                {{ h['text'] }}: {{ $n(item[h["value"]]) }}
+              </div>
+              <div v-else-if="h['option']['type']!=='action'" class="py-2">
+                {{ h['text'] }}: {{
+                  h['value'] in cast ?
+                      $helper.ifHas(item, '', h['value'], cast[h['value']])
+                      : item[h['value']]
+                }}
+              </div>
+            </slot>
+            <div v-if="h['option']['type']==='action'" class="w-full text-end">
+              <r-divider class="mt-3"></r-divider>
+              <r-btn v-if="!disableUpdate" class="mx-0 color-success-text"
+                     icon text @click.prevent="editItem(item)">
+                <r-icon exact v-html="$r.icons.edit"></r-icon>
+              </r-btn>
+              <r-btn v-if="!disableDelete" class="mx-0 color-error-text"
+                     icon text @click.prevent="deleteItem(item)">
+                <r-icon v-html="$r.icons.delete"></r-icon>
+              </r-btn>
+              <r-btn v-for="(val,index) in actions" :key="index" :class="`color-${val.color}-text`" class="mx-0" icon
+                     text @click.prevent="$emit(val.name,item)">
+                <r-icon exact v-html="val.icon"></r-icon>
+              </r-btn>
+            </div>
+          </div>
+        </r-card>
+      </div>
+    </div>
+    <r-table v-else :headers="headerTable" :items="table.data" :key-item="itemId" :responsive="responsive"
              transition="table-row">
       <template v-slot:header="{header}">
         <th v-for="(item,key) in header"
@@ -201,6 +254,7 @@ export default {
       default: true
     },
 
+    card: Boolean,
     disableAdd: Boolean,
     advanceSearch: {type: Boolean, default: true},
     disableDelete: Boolean,
@@ -400,7 +454,7 @@ export default {
         params.a_search = JSON.stringify(this.a_search)
       }
 
-      this.setup('/' + this.link, params)
+      this.setup(this.link, params)
     },
     searching() {
       clearTimeout(this.time_out_id)

package/components/table/style.scss

@@ -286,7 +286,9 @@ $data-table-regular-header-height: 38px !default;
 
     .manage-footer {
       .btn-page {
-        border: solid 1px var(--color-border);
+        color: var(--color-on-sheet);
+        border: solid 1px var(--color-sheet-low);
+        background-color: var(--color-sheet-container);
       }
     }
 

package/directive/scroll/index.js

@@ -3,7 +3,12 @@ function mounted (el, binding) {
   const options = binding.options || {
     passive: true
   }
-  const target = binding.arg ? document.querySelector(binding.arg) : window
+    let target = el
+    if (binding.modifiers.window) {
+        target = window
+    } else if (binding.arg) {
+        target = document.querySelector(binding.arg)
+    }
   if (!target) return
   target.addEventListener('scroll', callback, options)
   el._onScroll = {

package/package.json

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

package/plugins/trans/Translate.js

@@ -155,7 +155,9 @@ export default class Translate {
                         this.local = locale;
                         this.setMessages({});
                     }
+                    setTimeout(() => {
                     this.$r.store['langs_loaded'][pack] = true;
+                    }, 50)
                 } else {
                     this.$r.store['langs_loaded'][pack] = true;
                 }

package/tools/helper.js

@@ -399,3 +399,10 @@ export function changeColor(vars) {
     css += '}'
     style.appendChild(document.createTextNode(css));
 }
+
+export function fix_url(url) {
+    if (url.startsWith("/") || url.startsWith("http:") || url.startsWith("https:")) {
+        return url
+    }
+    return "/" + url
+}