renusify 2.2.2 → 2.2.4

package/components/button/style.scss

@@ -316,7 +316,8 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
 
 .btn-outlined,
 .btn-text {
-  background-color: transparent
+  background-color: transparent;
+  color: inherit;
 }
 
 .btn-round,

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||!country"
       @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"
@@ -17,7 +17,7 @@
                   :key="country&&country['id']"
                   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':''}"
@@ -31,7 +31,7 @@
                   :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':''}"
@@ -61,12 +61,14 @@ export default {
     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
   },

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.toString().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/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/unitInput/index.vue

@@ -67,6 +67,9 @@ emits:['update:modelValue'],
       this.$refs.input.focus()
     },
     emit() {
+      if (this.unit === null) {
+        this.unit = this.units[0]
+      }
       this.$emit('update:modelValue', {value: this.lazyValue, unit: this.unit})
     }
   }

package/components/img/index.vue

@@ -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/table/crud/header.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <r-container class="container-fluid">
-      <r-row class="h-start h-space-between">
+    <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"
@@ -30,7 +30,7 @@
         </r-col>
         <r-col v-if="!show" class="col-12">
           <r-text-input :label="$t('search','renusify')"
-                        :model-value="search"
+                        :model-value="modelValue"
                         @update:modelValue="$emit('update:modelValue',$event)"></r-text-input>
         </r-col>
         <r-col v-else class="col-12">
@@ -42,18 +42,18 @@
                                 :items="headers[0]"
                                 :label="$t('name','renusify')"
                                 just-value></r-select-input>
-                <div v-if="info.key" :key="info.key">
-                  <r-select-input v-model="info.action"
-                                  :items="[
+
+                <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_lt','renusify'),value:'lt'}]"
-                                  :label="$t('advance_search_operator','renusify')"
-                                  disableSearch
-                                  firstSelect
-                                  justValue></r-select-input>
-                </div>
+                                :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"
@@ -92,7 +92,7 @@ export default {
     advanceSearch: Boolean,
     mcud: Boolean,
     newItem: Function,
-    search: String
+    modelValue: String
   },
   emits: ['update:modelValue', 'copy', 'edit', 'delete', 'a-search'],
   data() {
@@ -109,6 +109,9 @@ export default {
       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]
     }

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,

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

@@ -1,6 +1,6 @@
 {
   "name": "renusify",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "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/style/base.scss

@@ -205,6 +205,7 @@ button,
 input,
 select,
 textarea {
+  color: currentColor;
   background-color: transparent;
   border-style: none;
 }

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
+}