renusify 1.1.4 → 1.1.5

package/components/form/number.vue

@@ -5,7 +5,7 @@
              :active="active"
              inputControlClass="v-center"
     >
-      <r-btn @click.prevent="minus" class="minus" icon :text="btnText">
+      <r-btn @click.prevent.stop="minus" class="minus" icon :text="btnText">
         <r-icon v-html="$r.icons.minus"></r-icon>
       </r-btn>
       <input @input="emit"
@@ -13,11 +13,11 @@
              @focusin="active=true"
              @focusout="active=false"
              ref="input"
-             type="number"
+             type="text"
              autocomplete="no"
-             v-model.number="number"
+             v-model="number"
       />
-      <r-btn @click.prevent="plus" class="plus" icon :text="btnText">
+      <r-btn @click.prevent.stop="plus" class="plus" icon :text="btnText">
         <r-icon v-html="$r.icons.plus"></r-icon>
       </r-btn>
     </r-input>
@@ -32,6 +32,7 @@ export default {
   props: {
     modelValue: Number,
     step: {type: Number, default: 1},
+    split: {type: Number, default: 0},
     min: {
       type: Number
     },
@@ -42,25 +43,38 @@ export default {
   },
   data() {
     return {
-      number: this.modelValue,
+      number: this.setSplit(this.modelValue),
       active: false
     }
   },
   watch: {
     'modelValue': function (newVal) {
       setTimeout(() => {
-        this.number = newVal
+        this.number = this.setSplit(newVal)
       })
     }
   },
   methods: {
+    setSplit(n) {
+      if (n && this.split > 0) {
+        const x = this.split
+        n = n.toString()
+        const step = n.indexOf('.')
+        const re = '\\d(?=(\\d{' + (x) + '})+' + (step > -1 ? '\\.' : '$') + ')';
+        return n.replace(new RegExp(re, 'g'), '$&,');
+      }
+      return n
+    },
+    removeSplit(n) {
+      return parseFloat(this.$helper.replacer(n.toString(), ',', ''))
+    },
     emit() {
       if (this.number === '' || this.number === null) {
         this.number = undefined
-        this.$emit('update:modelValue', d)
+        this.$emit('update:modelValue', this.number)
         return
       }
-      let d = this.number
+      let d = this.removeSplit(this.number)
       if (this.max !== undefined && d > this.max) {
         d = this.max
       }
@@ -68,13 +82,11 @@ export default {
         d = this.min
       }
       const n = ((1 / this.step) + '').length - 1
-      this.number = parseFloat(d.toFixed(n))
-      this.$emit('update:modelValue', this.number)
-
+      this.number = this.setSplit(d.toFixed(n))
+      this.$emit('update:modelValue', this.removeSplit(this.number))
     },
     plus() {
       let n = this.modelValue || 0
-
       this.number = n + this.step
       this.emit()
     },

package/components/form/range.vue

@@ -94,7 +94,7 @@ export default {
     this.width = this.$refs.range.getBoundingClientRect().width - 10
     this.preValue = this.min
     if (this.isRange && !this.modelValue) {
-      this.$emit('update:modelValue', [this.min, this.max])
+      this.$emit('update:modelValue', [])
       const r = this.$r.rtl ? -1 : 1
       this.x2 = this.width * r
       this.prePosition2 = this.width * r
@@ -241,6 +241,18 @@ export default {
       height: 10px;
       border-radius: 50%;
       cursor: grabbing;
+
+      &:hover {
+        width: 16px;
+        height: 16px;
+        @include rtl() {
+          transform: translate(2px, -2px);
+        }
+        @include ltr() {
+          transform: translate(-2px, -2px);
+        }
+        border: 3px solid var(--color-two) !important;
+      }
     }
 
     .dot-tooltip {
@@ -292,6 +304,18 @@ export default {
       border-radius: 50%;
       margin-top: -3px;
       cursor: grabbing;
+
+      &:hover {
+        width: 16px;
+        height: 16px;
+        @include rtl() {
+          transform: translate(2px, -2px);
+        }
+        @include ltr {
+          transform: translate(-2px, -2px);
+        }
+        border: 3px solid var(--color-two) !important;
+      }
     }
 
     .dot-tooltip {

package/components/form/select.vue

@@ -50,6 +50,8 @@
               :items="genItems"
               :multiple="multiple"
               :modelValue="chips"
+              :text="text"
+              :val="value"
               @update:modelValue="listInput"
               checked>
         <template v-slot="props">
@@ -99,7 +101,8 @@ export default {
     justValue: Boolean,
     openToTop: Boolean,
     translate: Boolean,
-    firstSelect: Boolean
+    firstSelect: Boolean,
+    headers: Object
   },
   data() {
     return {
@@ -170,7 +173,8 @@ export default {
       return this.$axios.get(this.searchLink, {
         params: {
           s: (this.inputVal === null ? '' : this.inputVal)
-        }
+        },
+        headers: this.headers
       }).then(({data}) => {
         this.apiData = data
         this.loading = false

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

@@ -64,7 +64,8 @@ export default {
         return {}
       },
       type: Object
-    }
+    },
+    headers: Object
   },
   data() {
     return {
@@ -180,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) {