renusify 1.1.4 → 1.2.0

package/components/form/rating.vue

@@ -13,7 +13,6 @@
 </template>
 
 <script>
-import './scss/rating.scss'
 
 export default {
   name: 'r-rating',
@@ -32,6 +31,7 @@ export default {
     modelValue: Number,
     readonly: Boolean
   },
+  emits:['update:modelValue'],
   created(){
     if(!this.$r.icons.star) {
       this.$r.icons.star = '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21L12 17.27Z"/></svg>'
@@ -44,3 +44,15 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+@import "../../style/include";
+
+
+.#{$prefix}rating {
+  max-width: 100%;
+  white-space: nowrap;
+  transition: 1s $primary-transition;
+  color: var(--color-text-disabled);
+}
+
+</style>

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">
@@ -70,7 +72,6 @@
   </div>
 </template>
 <script>
-import './scss/select.scss'
 
 export default {
   name: 'r-select',
@@ -99,8 +100,10 @@ export default {
     justValue: Boolean,
     openToTop: Boolean,
     translate: Boolean,
-    firstSelect: Boolean
+    firstSelect: Boolean,
+    headers: Object
   },
+  emits:['update:modelValue','del'],
   data() {
     return {
       apiData: [],
@@ -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
@@ -221,6 +225,7 @@ export default {
     handleClick() {
       if (this.$refs.input) {
         this.$refs.input.focus()
+        this.$refs.input.scrollIntoView()
       } else {
         this.focusInput(true)
       }
@@ -266,7 +271,7 @@ export default {
         val = null
       }
 
-      this.$emit('update:model-value', val)
+      this.$emit('update:modelValue', val)
 
     },
     focusInput(val) {
@@ -302,3 +307,61 @@ export default {
 }
 
 </script>
+<style lang="scss">
+@import "../../style/include";
+$min-height:40px;
+.#{$prefix}select-container {
+  position: relative;
+  .input-control {
+    min-height: $min-height;
+    height: auto;
+    flex-direction: row;
+    align-items: center;
+    display: flex;
+    flex: 1 1;
+    flex-wrap: wrap;
+    line-height: 24px;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .select-wrap {
+    max-width: 100%;
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+  }
+
+  input {
+    flex: 1 1;
+    margin-top: 0;
+    min-width: 140px;
+    position: relative;
+  }
+
+  .#{$prefix}chip {
+    flex: 0 1 auto;
+    margin: 4px;
+  }
+
+  .card-select {
+    max-height: 0;
+    overflow: auto;
+    opacity: .5;
+    transition: all .3s $primary-transition;
+    position: absolute;
+    left: 0;
+    z-index: map_get($z-index, 'default');
+  }
+  .to-top{
+    bottom: $min-height+2px;
+  }
+
+  .card-select-active {
+    transition: all 0.3s $primary-transition;
+    max-height: 300px;
+    opacity: 1;
+  }
+}
+
+</style>

package/components/form/switch.vue

@@ -20,7 +20,6 @@
     </r-input>
 </template>
 <script>
-    import './scss/switch.scss'
 
     export default {
         name: 'r-switch',
@@ -32,7 +31,7 @@
                 type: [Boolean, String]
             }
         },
-
+emits:['update:modelValue','change'],
         data() {
             return {
                 lazyValue: this.modelValue || false
@@ -62,3 +61,66 @@
     }
 
 </script>
+<style lang="scss">
+@import "renusify/style/_include.scss";
+
+.#{$prefix}switch {
+
+  .switch-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 30px;
+  }
+
+  .switch-holder {
+    width: 45px;
+    height: 13px;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .switch-line {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    background-color: var(--color-disabled);
+  }
+
+  .switch-dot {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: #cdcbcb;
+    transition: .3s map_get($transition,'fast-in-fast-out');
+    @include rtl() {
+      right: 0;
+    }
+    @include ltr() {
+      left: 0;
+    }
+  }
+
+  .switch-active {
+    .switch-line {
+      background-color: currentColor;
+      opacity: 0.5;
+    }
+
+    .switch-dot {
+      background-color: currentColor;
+      @include rtl() {
+        right: 25px;
+      }
+      @include ltr() {
+        left: 25px;
+      }
+    }
+  }
+
+}
+</style>

package/components/form/text-area.vue

@@ -31,7 +31,7 @@ export default {
       default: '7'
     }
   },
-
+emits:['update:modelValue'],
   data() {
     return {
       lazyValue: this.modelValue,

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

@@ -37,6 +37,8 @@
                 <r-select-input :label="$t('class','renusify')" :model-value="[...selectElm.classList]"
                                 multiple
                                 tags
+                                disableSearch
+                                justValue
                                 @update:model-value="addClass"></r-select-input>
             </r-col>
             <r-col class="col-12 ltr">
@@ -117,6 +119,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 +155,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')"
@@ -181,22 +185,24 @@
 </template>
 
 <script>
-    import './style.scss'
+import './style.scss'
 
-    export default {
+export default {
         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
         },
+      emits:['update:modelValue'],
         data() {
             return {
               id: 'text_editor_' + this.$helper.uniqueId(12),
@@ -393,7 +399,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/text-input.vue

@@ -25,7 +25,7 @@ export default {
     modelValue: [String, Number],
     autofocus: Boolean,
   },
-
+emits:['update:modelValue'],
   data () {
     return {
       lazyValue: this.modelValue,

package/components/form/timepicker/index.vue

@@ -68,6 +68,7 @@ export default {
     noOverlay: Boolean,
     modelValue: String
   },
+  emits:['update:modelValue'],
   data() {
     return {
       active: false,
@@ -82,7 +83,7 @@ export default {
   },
   methods: {
     emit() {
-      this.$emit("update:model-value", this.lazyValue);
+      this.$emit("update:modelValue", this.lazyValue);
     }
   }
 };

package/components/form/timepicker/range.vue

@@ -75,6 +75,7 @@ export default {
     noOverlay: Boolean,
     modelValue: Array
   },
+  emits:['update:modelValue'],
   data() {
     return {
       state: 'from',
@@ -151,7 +152,7 @@ export default {
 
     },
     emit() {
-      this.$emit("update:model-value", this.lazyValue);
+      this.$emit("update:modelValue", this.lazyValue);
     }
   }
 };

package/components/form/timepicker/timepicker.vue

@@ -89,6 +89,7 @@ export default {
     is24Hour: Boolean,
     modelValue: String
   },
+  emits:['update:modelValue','finish'],
   data() {
     return {
       show: this.is24Hour ? "hours24" : "hours12",
@@ -307,7 +308,7 @@ export default {
       if (!this.is24Hour) {
         n += " " + this.meridiem;
       }
-      this.$emit("update:model-value", n);
+      this.$emit("update:modelValue", n);
       if ((min !== null && !this.withSec) || sec !== null) {
         this.$emit("finish", true);
       }

package/components/form/unique/index.vue

@@ -22,7 +22,9 @@ export default {
       default: null,
       type: String
     },
+    headers: Object
   },
+  emits:['update:modelValue'],
   data() {
     return {
       item: null,
@@ -40,7 +42,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/form/unit-input.vue

@@ -18,6 +18,7 @@
       <r-select-input :readonly="disableUnit" :items="units" v-model="unit"
                       @update:model-value="emit" hide justValue :translate="translate"
                       class="mt-0"
+                      disableSearch
                       firstSelect></r-select-input>
     </div>
   </r-input>
@@ -47,7 +48,7 @@ export default {
     autofocus: Boolean,
     translate: Boolean
   },
-
+emits:['update:modelValue'],
   data() {
     return {
       lazyValue: this.modelValue.value,

package/components/formCreator/index.vue

@@ -1,7 +1,6 @@
 <template>
   <r-card v-if="!autoSend" class="overflow-auto">
     <r-container>
-      <r-message :items="errors" type="error"></r-message>
       <h1 class="title">{{ title }}</h1>
       <r-form ref="form" v-model="valid" @submit.prevent="save">
         <r-row>
@@ -16,7 +15,8 @@
             </r-col>
           </template>
         </r-row>
-        <r-row class="h-end my-12">
+        <r-message :items="errors" type="error"></r-message>
+        <div class="text-end my-12">
           <r-btn @click.prevent="close"
                  class="color-error-text mx-1"
                  outlined
@@ -29,7 +29,7 @@
               rounded>
             {{ $t('send', 'renusify') }}
           </r-btn>
-        </r-row>
+        </div>
       </r-form>
     </r-container>
   </r-card>
@@ -64,8 +64,10 @@ export default {
         return {}
       },
       type: Object
-    }
+    },
+    headers: Object
   },
+  emits:['update:modelValue','ok'],
   data() {
     return {
       loading: false,
@@ -91,7 +93,7 @@ export default {
     editedItem: {
       deep: true,
       handler: function (n) {
-        this.$emit('update:model-value', n)
+        this.$emit('update:modelValue', n)
       }
     }
   },
@@ -180,7 +182,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/html2pdf/index.vue

@@ -60,6 +60,7 @@
             beforeClass: String,
             afterClass: String
         },
+      emits:['progress','has-downloaded','before-download'],
         data() {
             return {
                 show: true,

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