renusify 1.1.3 → 1.1.5

package/components/form/text-editor/index.vue

@@ -117,6 +117,7 @@
                 <r-file-input v-model="image"
                               :label="$t('image','renusify')"
                               :size="1"
+                              :headers="headers"
                               :upload-link="uploadLink"
                               accept="image/*"></r-file-input>
                 <r-text-input v-model="img_alt"
@@ -152,6 +153,7 @@
             <r-file-input v-model="video"
                           :label="$t('video','renusify')"
                           :size="1"
+                          :headers="headers"
                           :upload-link="uploadLink"
                           accept="video/mp4,video/webm"></r-file-input>
             <r-number-input v-model="img_width" :label="$t('width','renusify')"
@@ -187,15 +189,16 @@
         name: 'r-text-editor',
         inheritAttrs: false,
         props: {
-            uploadLink: {type: String, default: '/storage'},
-            modelValue: {
-                type: [Object, String], default: () => {
-                    return {
-                        text: '',
-                        files: []
-                    }
-                }
+          uploadLink: {type: String, default: '/storage'},
+          modelValue: {
+            type: [Object, String], default: () => {
+              return {
+                text: '',
+                files: []
+              }
             }
+          },
+          headers: Object
         },
         data() {
             return {
@@ -393,7 +396,8 @@
             deleteImage(img, i) {
                 this.$axios.delete(this.uploadLink,
                     {
-                        data: {link: img}
+                      data: {link: img},
+                      headers: this.headers
                     }
                 ).then(() => {
                     this.files.splice(i, 1)

package/components/form/unique/index.vue

@@ -22,6 +22,7 @@ export default {
       default: null,
       type: String
     },
+    headers: Object
   },
   data() {
     return {
@@ -40,7 +41,7 @@ export default {
       if (this.item) {
         this.$axios.post(this.link, {
           'unique_name': this.item
-        })
+        }, {headers: this.headers})
             .then((res) => {
               if (res.data) {
                 this.color = 'color-success-text'

package/components/formCreator/index.vue

@@ -6,10 +6,10 @@
       <r-form ref="form" v-model="valid" @submit.prevent="save">
         <r-row>
           <template :key="key" v-for="(item,key) in options">
-            <r-col class="col-12" v-if="item['formInput']!==false">
+            <r-col class="col-12" v-if="item['formInput']!==false&&iff(options[key])">
               <component
                   :is="'r-'+item['type']"
-                  :label="$t(key,'renusify')"
+                  :label="$t(key)"
                   v-model="editedItem[key]"
                   v-bind="getAttr(options[key])"
               ></component>
@@ -64,7 +64,8 @@ export default {
         return {}
       },
       type: Object
-    }
+    },
+    headers: Object
   },
   data() {
     return {
@@ -96,11 +97,64 @@ export default {
     }
   },
   methods: {
+    iff(data) {
+      const that = this
+
+      function get(item, key) {
+        if (key.toString().startsWith('$')) {
+          return that.$helper.ifHas(item, null, ...key.substring(1).split('.'))
+        }
+        return key
+      }
+
+      if ('$if' in data) {
+        for (let i = 0; i < data['$if'].length; i++) {
+          const item = data['$if'][i]
+          let can = true
+          const one = get(this.editedItem, item[0])
+          const op = item[1]
+          const two = get(this.editedItem, item[2])
+          if (op === '===' || op === '==') {
+            can = one === two
+          } else if (op === '>') {
+            can = one > two
+          } else if (op === '>=') {
+            can = one >= two
+          } else if (op === '<') {
+            can = one < two
+          } else if (op === '<=') {
+            can = one <= two
+          } else if (op === '!=') {
+            can = one !== two
+          } else if (op === 'in') {
+            if (two && typeof two === 'object') {
+              can = two.includes(one)
+            } else {
+              can = false
+            }
+          } else {
+            can = false
+            console.error(`operator '${op}' is not defined.(form creator)`)
+          }
+          if (can === false) {
+            return false
+          }
+        }
+      }
+      return true
+    },
     getAttr(data) {
       let res = {}
       for (let i in data) {
-        if (this.$helper.hasKey(data, i) && !['formInput', 'sortable', 'type', 'tableShow', 'priority'].includes(i)) {
-          res[i] = data[i]
+        if (this.$helper.hasKey(data, i) && !['formInput', 'sortable', 'type', 'tableShow', 'priority', '$if'].includes(i)) {
+          if (i === '$bind') {
+            data[i].forEach((item) => {
+              res[item[0]] = this.editedItem[item[1]]
+            })
+
+          } else {
+            res[i] = data[i]
+          }
         }
       }
       return res
@@ -127,7 +181,7 @@ export default {
         return
       }
       this.loading = true
-      this.$axios[this.method](this.url, this.editedItem)
+      this.$axios[this.method](this.url, this.editedItem, {headers: this.headers})
           .then(() => {
             this.close()
           }, (error) => {

package/components/img/index.vue

@@ -14,12 +14,17 @@
         }"
     >{{ alt }}
     </div>
-    <img v-if="load" ref="img" :src="link" :alt="alt" draggable="false" :width="size.width" :height="size.height"/>
+    <img v-if="load &&!isSvg" ref="img" :src="link" :alt="alt" draggable="false" :width="size.width"
+         :height="size.height"/>
+    <svg-img v-else-if="load &&isSvg&&link" :link="link" :size="size">
+    </svg-img>
   </div>
 </template>
 <script>
+import SvgImg from "./svgImg";
 export default {
   name: 'r-img',
+  components: {SvgImg},
   props: {
     src: {
       type: String,
@@ -53,6 +58,8 @@ export default {
     titleVs: Boolean,
     titleVc: Boolean,
     titleVe: Boolean,
+    isSvg: Boolean,
+    svgCache: {type: Number, default: 86400},
     wPH: {
       type: Number,
       default: 1
@@ -85,7 +92,10 @@ export default {
       if (this.query) {
         res += this.query
       }
-      if ((this.autoSize && this.size.width > 0) || this.width) {
+      if (this.isSvg && this.svgCache) {
+        res += 'c=' + this.svgCache
+      }
+      if (!this.isSvg && ((this.autoSize && this.size.width > 0) || this.width)) {
         res += `&w=${this.size.width}&h=${this.size.height}`
       }
       return res

package/components/img/svgImg.vue

@@ -0,0 +1,43 @@
+<template>
+  <span ref="img"></span>
+</template>
+<script>
+export default {
+  name: "svgImg",
+  props: {
+    link: String,
+    size: Object
+  },
+  created() {
+    this.ImgToSvg()
+  },
+  methods: {
+    replace(svg) {
+      if (!this.$refs.img) {
+        setTimeout(() => {
+          this.replace(svg)
+        }, 10)
+        return
+      }
+      this.$refs.img.replaceWith(svg)
+    },
+    ImgToSvg() {
+      const that = this
+      fetch(this.link).then(x => {
+        x.text().then((d) => {
+          const el = document.createElement('div')
+          el.innerHTML = d
+          let svg = el.querySelector('svg')
+          svg.setAttribute('width', that.size.width + 'px')
+          svg.setAttribute('height', that.size.height + 'px')
+          that.replace(svg)
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>

package/components/infinite/div.vue

@@ -50,6 +50,7 @@ export default {
                 default: 10000,
                 type: Number
             },
+          headers: Object
         },
         data() {
             return {
@@ -110,7 +111,7 @@ export default {
                 Object.assign(par, this.query)
 
               }
-              this.$axios.get(this.url, {params: par}).then(
+              this.$axios.get(this.url, {params: par, headers: this.headers}).then(
                   (res) => {
                     this.push(res.data.data, end)
                     this.total = res.data.total

package/components/infinite/page.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="infinite-page">
         <div class="infinite-page-container" v-scroll="onScroll">
-            <slot :items="datacollection"></slot>
+            <slot :items="datacollection" :total="total"></slot>
         </div>
         <r-progress-line color="color-two"
                          v-show="loading"
@@ -23,17 +23,18 @@ export default {
                 required: true,
                 type: String
             },
-            query: {
-                type: Object
-            },
-            noItemMsg: {
-                type: String,
-                default: 'ITEMS NOT FOUND'
-            },
-            distanceLoad: {
-                type: Number,
-                default: 150
-            }
+          query: {
+            type: Object
+          },
+          noItemMsg: {
+            type: String,
+            default: 'ITEMS NOT FOUND'
+          },
+          distanceLoad: {
+            type: Number,
+            default: 150
+          },
+          headers: Object
         },
         data() {
             return {
@@ -75,17 +76,17 @@ export default {
                 if (typeof this.query==='object') {
                     Object.assign(par,{},this.query)
                 }
-                this.$axios.get(this.url,{params:par}).then(
-                    (res) => {
-                        this.push(res.data.data)
-                        this.total = res.data.total
-                        if (this.total === 0) {
-                            this.noItem = true
-                        }
-                        this.loading = false
-                    }, () => {
-                        this.loading = false
-                    })
+              this.$axios.get(this.url, {params: par, headers: this.headers}).then(
+                  (res) => {
+                    this.push(res.data.data)
+                    this.total = res.data.total
+                    if (this.total === 0) {
+                      this.noItem = true
+                    }
+                    this.loading = false
+                  }, () => {
+                    this.loading = false
+                  })
             },
             push(data) {
                 const lng=data.length

package/components/list/index.vue

@@ -1,16 +1,18 @@
 <template>
     <div :class="classes">
-        <div :class="`list-item h-space-between ${$helper.searchArray(list,text,item_value[text])!==false?'list-item-active color-one-text':''}`"
-             :key="item_key"
-             @click.prevent="handle(item_value)"
-             v-for="(item_value,item_key) in genItems"
-             v-ripple
-        >
-            <slot :item="item_value">
-              <div class="list-title">{{ item_value[text] }}</div>
-              <transition name="fade">
-                <r-icon class="pe-1"
-                        exact
+      <div
+          class="list-item h-space-between"
+          :class="{'list-item-active color-one-text':$helper.searchArray(list,text,item_value[text])!==false}"
+          :key="item_key"
+          @click.prevent="handle(item_value)"
+          v-for="(item_value,item_key) in genItems"
+          v-ripple
+      >
+        <slot :item="item_value">
+          <div class="list-title">{{ item_value[text] }}</div>
+          <transition name="fade">
+            <r-icon class="pe-1"
+                    exact
                         v-html="$r.icons.check"
                         v-if="(checked&&$helper.searchArray(list,text,item_value[text])!==false)"
                 ></r-icon>
@@ -21,30 +23,29 @@
 </template>
 
 <script>
-    import './style.scss'
+import './style.scss'
+import Ripple from '../../directive/ripple/index'
 
     export default {
-        name: 'r-list',
-        props: {
-            disabled: Boolean,
-            multiple: Boolean,
-            min: {type: Number, default: 0},
-            text: {type: String, default: 'name'},
-            val: {type: String, default: 'value'},
-            flat: Boolean,
-            rounded: Boolean,
-            subheader: Boolean,
-            checked: Boolean,
-            filter: String,
-            items: Array,
-            modelValue: {type:[Array, Object]}
-        },
+      name: 'r-list',
+      directives: {ripple: Ripple},
+      props: {
+        disabled: Boolean,
+        multiple: Boolean,
+        min: {type: Number, default: 0},
+        text: {type: String, default: 'name'},
+        value: {type: String, default: 'value'},
+        flat: Boolean,
+        rounded: Boolean,
+        subheader: Boolean,
+        checked: Boolean,
+        filter: String,
+        items: Array,
+        modelValue: {type: [Array, Object]}
+      },
         computed: {
             list() {
                 if (this.modelValue) {
-                    if (!this.multiple&&this.modelValue[0]) {
-                        return [this.modelValue[0]]
-                    }
                     return this.modelValue
                 }
                 return []
@@ -96,6 +97,7 @@
                 return
               }
               let val = this.list
+
               const index = this.$helper.searchArray(val, this.text, item[this.text])
 
               if (index !== false) {