renusify 1.4.2 → 1.4.3

package/components/codeEditor/mixin.js

@@ -0,0 +1,172 @@
+export default {
+    methods: {
+        pretty_html(text) {
+            text = text.replace(/ +(?= )/g, '');
+            text = text.replace(/[\r|\n|\t]/g, '');
+            let r = ''
+            text = text.split('<')
+            let numopen = 0
+            text.forEach((line) => {
+                if (line) {
+                    const end = line.startsWith('/')
+                    if (end) {
+                        numopen -= 1
+                    }
+                    r += '\t'.repeat(numopen) + '<' + line + '\n'
+                    if (!end) {
+                        numopen += 1
+                    }
+                }
+            })
+            return r
+        },
+        pretty_js(text) {
+            text = text.replace(/ +(?= )/g, '');
+            text = text.replace(/[\r|\n|\t]/g, '');
+            text = text.replace(/([,|;|{|(|\[])+[\s]/g, '$1');
+            let r = ''
+            text = text.split('')
+            let numopen = 0
+            const textLength = text.length
+            let inBracket = 0
+            let inprantez = 0
+            for (let i = 0; i < textLength; i++) {
+                const c = text[i]
+                const last = i > 0 ? text[i - 1] : ''
+                const next = i < textLength - 1 ? text[i + 1] : ''
+
+                if (c === '(') {
+                    inprantez += 1
+                }
+                if (c === ')') {
+                    inprantez -= 1
+                }
+                if (c === '[') {
+                    inBracket += 1
+                }
+                if (c === ']') {
+                    inBracket -= 1
+                }
+                if (c === '}') {
+                    numopen -= 1
+                }
+                r += c
+                if (c === '}' && next !== ',' && next !== ';' && next !== '}' && next !== ')') {
+                    r += '\n' + '\t'.repeat(numopen)
+                }
+                if (c === ',' && (!inprantez && !inBracket) && next !== '}') {
+                    r += '\n' + '\t'.repeat(numopen)
+                }
+                if (c === ';' && next !== '}') {
+                    r += '\n' + '\t'.repeat(numopen)
+                }
+                if (next === '}' && c !== '{') {
+                    r += '\n' + '\t'.repeat(numopen - 1)
+                }
+
+                if (c === '{') {
+                    numopen += 1
+                    if (next !== '}') {
+                        r += '\n' + '\t'.repeat(numopen)
+                    }
+                }
+            }
+            r = r.replace(/\t /g, '\t');
+            r = r.replace(/^\s*\n/gm, '');
+            return r
+        },
+        setTab(event) {
+            if (event.key === "'" || event.key === '"' || event.key === '`') {
+                const end = event.target.selectionEnd;
+                event.preventDefault()
+                document.execCommand('insertText', false, event.key.repeat(2));
+                event.target.selectionEnd = end + 1;
+                return false;
+            }
+            if (event.key === "{") {
+                const end = event.target.selectionEnd;
+                event.preventDefault()
+                document.execCommand('insertText', false, '{}');
+                event.target.selectionEnd = end + 1;
+                return false;
+            }
+            if (event.key === "(") {
+                const end = event.target.selectionEnd;
+                event.preventDefault()
+                document.execCommand('insertText', false, '()');
+                event.target.selectionEnd = end + 1;
+                return false;
+            }
+            if (event.key === "[") {
+                const end = event.target.selectionEnd;
+                event.preventDefault()
+                document.execCommand('insertText', false, '[]');
+                event.target.selectionEnd = end + 1;
+                return false;
+            }
+            if (event.keyCode === 9) {
+                event.preventDefault()
+                document.execCommand('insertText', false, '\t');
+                return false;
+            }
+            if (event.keyCode === 13) {
+                event.preventDefault()
+                let n = event.target.value.substr(0, event.target.selectionStart).split('\n')
+                n = n[n.length - 1].split('')
+                let w = ''
+                for (let i = 0; i < n.length; i++) {
+                    if (n[i] === ' ') {
+                        w += ' '
+                    } else {
+                        break
+                    }
+                }
+
+                document.execCommand('insertText', false, '\n' + w);
+                return false;
+            }
+            return true
+        },
+        re_quote(res) {
+            let regex = /"([^"]*)"/g;
+            res = res.replace(regex, '<span class="color-green code-editor-span">"$1"</span>');
+            regex = /'([^']*)'/g;
+            return res.replace(regex, "<span class=\"color-green code-editor-span\">'$1'</span>");
+        },
+        re_special(res, regex = /([{}\[\]])/g, color = "color-orange") {
+            return res.replace(regex, '<span class="' + color + ' code-editor-span">$1</span>')
+        },
+        re_number(res) {
+            return res.replace(/\b([0-9.]+)\b/g, '<span class="color-blue code-editor-span">$1</span>')
+        },
+        re_words(res, words) {
+            words.forEach((word) => {
+                res = res.replace(new RegExp("\\b(" + word + ")\\b", 'g'), '<span class="color-orange code-editor-span">$1</span>')
+            })
+
+            return res;
+        },
+        re_comment(res) {
+            //eslint-disable-next-line
+            let regex = /(\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*)$/gm;
+            return res.replace(regex, '<span class="color-comment code-editor-span">$1</span>')
+        },
+        re_func(res) {
+            //function like Date()
+            let regex = /([$a-zA-Z-0-9_\s]+)(?=\()/g;
+            res = res.replace(regex, '<span class="color-func2 code-editor-span">$1</span>')
+
+            // Object keys
+            regex = /([a-zA-Z-0-9_]+)(?=:)/g;
+            res = res.replace(regex, '<span class="color-purple code-editor-span">$1</span>')
+
+
+            //function like $r $d()
+            regex = /(\$([a-zA-z0-9]*)[.|(])/g;
+            res = res.replace(regex, '<span class="color-func code-editor-span">$1</span>')
+
+
+            return res;
+        },
+    }
+}

package/components/cropper/index.vue

@@ -61,6 +61,7 @@ export default {
     getBlob: Boolean,
     selectImg: {type: Boolean, default: true},
   },
+  emits: ['cropped', 'original'],
   data() {
     return {
       show: false,
@@ -172,7 +173,7 @@ export default {
         that.crop(e.target.result);
       };
 
-      this.$emit("orginal", e.target.files[0]);
+      this.$emit("original", e.target.files[0]);
       reader.readAsDataURL(e.target.files[0]);
     },
     getDataURL() {

package/components/form/json/index.vue

@@ -52,23 +52,29 @@
         <r-btn @click.prevent="add" class="ms-1 color-success" rounded>{{ $t('add', 'renusify') }}</r-btn>
       </div>
     </div>
-    <textarea v-else :class="{'state-error':error}"
-              :rows="modelValue?Object.keys(modelValue).length+5:5"
-              autocapitalize="off"
-              autocomplete="off"
-              autocorrect="off"
-              class="ltr w-full"
-              spellcheck="false"
-              @input="emitt"
-              @keydown="setTab">{{ JSON.stringify(modelValue||{}, null, 4) }}</textarea>
+    <div v-else :class="{'state-error':error}" class="json-highlight ltr">
+      <textarea
+          v-model="lazyValue"
+          autocapitalize="off"
+          autocomplete="off"
+          autocorrect="off"
+          class="ltr w-full"
+          spellcheck="false"
+          :rows="modelValue?Object.keys(modelValue).length+5:5"
+          @keydown="setTab"
+      ></textarea>
+      <div class="text-preview" v-html="build"></div>
+    </div>
   </div>
 </template>
 <script>
 import JsonView from "./JsonView";
+import mixin from 'renusify/components/codeEditor/mixin'
 
 export default {
   name: 'r-json',
   components: {JsonView},
+  mixins: [mixin],
   props: {
     label: String,
     keyLabel: {type: String, default: 'key'},
@@ -93,14 +99,49 @@ export default {
   emits: ['update:modelValue'],
   data() {
     return {
+      lazyValue: '',
       modeForm: true,
       error: false,
       show: false,
-      info: {},
-      color: `rgb(${this.$helper.randomInt(0, 255)},${this.$helper.randomInt(0, 255)},${this.$helper.randomInt(0, 255)})`
+      info: {}
     }
   },
+  watch: {
+    modeForm: function () {
+      this.lazyValue = JSON.stringify(this.modelValue || {}, null, 4)
+    },
+    modelValue: function () {
+      try {
+        this.error = false
+        if (JSON.stringify(JSON.parse(this.lazyValue)) !== JSON.stringify(this.modelValue)) {
+          this.lazyValue = JSON.stringify(this.modelValue || {}, null, 4)
+        }
+      } catch (er) {
+        this.error = true
+      }
+
+    },
+    lazyValue: function () {
+      try {
+        this.error = false
+        this.$emit('update:modelValue', JSON.parse(this.lazyValue))
+      } catch (er) {
+        this.error = true
+      }
+    },
+  },
   computed: {
+    build() {
+      if (!this.lazyValue) {
+        return "";
+      }
+      let res = this.lazyValue
+      res = this.re_quote(res);
+      res = this.re_words(res, [true, false, null]);
+      res = this.re_number(res);
+      res = this.re_special(res, /([{},:\[\]])/g, 'color-orange');
+      return res;
+    },
     is_array() {
       if (this.baseArray) {
         return true
@@ -109,51 +150,6 @@ export default {
     }
   },
   methods: {
-    setTab(event) {
-      if (event.key === '"') {
-        const end = event.target.selectionEnd;
-        event.preventDefault()
-        document.execCommand('insertText', false, event.key.repeat(2));
-        event.target.selectionEnd = end + 1;
-        return false;
-      }
-      if (event.key === "{") {
-        const end = event.target.selectionEnd;
-        event.preventDefault()
-        document.execCommand('insertText', false, '{}');
-        event.target.selectionEnd = end + 1;
-        return false;
-      }
-      if (event.key === "[") {
-        const end = event.target.selectionEnd;
-        event.preventDefault()
-        document.execCommand('insertText', false, '[]');
-        event.target.selectionEnd = end + 1;
-        return false;
-      }
-      if (event.keyCode === 9) {
-        event.preventDefault()
-        document.execCommand('insertText', false, ' '.repeat(4));
-        return false;
-      }
-      if (event.keyCode === 13) {
-        event.preventDefault()
-        let n = event.target.value.substr(0, event.target.selectionStart).split('\n')
-        n = n[n.length - 1].split('')
-        let w = ''
-        for (let i = 0; i < n.length; i++) {
-          if (n[i] === ' ') {
-            w += ' '
-          } else {
-            break
-          }
-        }
-
-        document.execCommand('insertText', false, '\n' + w);
-        return false;
-      }
-      return true
-    },
     open() {
       if (this.template) {
         let d = this.modelValue
@@ -169,15 +165,7 @@ export default {
         this.show = true
       }
     },
-    emitt(e) {
-      try {
-        this.error = false
-        e = JSON.parse(e.target.value)
-        this.$emit('update:modelValue', e)
-      } catch (er) {
-        this.error = true
-      }
-    },
+
     emit(e) {
       this.$emit('update:modelValue', e)
     },
@@ -228,5 +216,65 @@ export default {
   .state-error {
     border: 1px solid var(--color-error);
   }
+
+  .json-highlight {
+    position: relative;
+    margin: -12px 0;
+
+    .text-preview {
+      white-space: pre-wrap;
+      word-break: keep-all;
+      overflow-wrap: break-word;
+      min-height: 40px;
+      font-size: 14px;
+      letter-spacing: 2px;
+      line-height: 20px;
+      margin: 0;
+      border: 0;
+      padding: 12px;
+    }
+
+    textarea {
+      &::selection {
+        background-color: var(--color-two);
+        -webkit-text-fill-color: var(--color-two-text);
+        color: var(--color-two-text);
+      }
+
+      padding: 12px;
+      margin: 0;
+      border: 0;
+      font-size: 14px;
+      letter-spacing: 2px;
+      line-height: 20px;
+      -webkit-font-smoothing: antialiased;
+      -webkit-text-fill-color: transparent;
+      outline: none;
+      width: 100%;
+      height: 100%;
+      min-height: 40px;
+      white-space: pre-wrap;
+      word-break: keep-all;
+      overflow-wrap: break-word;
+      position: absolute;
+      top: 0;
+      left: 0;
+      resize: none;
+      overflow: hidden;
+    }
+
+    .color-orange {
+      color: orange;
+    }
+
+    .color-green {
+      color: #0cde27;
+    }
+
+
+    .color-blue {
+      color: #7ad5ff;
+    }
+  }
 }
 </style>

package/components/img/index.vue

@@ -14,11 +14,11 @@
         }"
     >{{ alt }}
     </div>
-    <img v-if="load &&!isSvg" ref="img" :src="link" :alt="alt" draggable="false" :width="size.width>0?size.width:'auto'"
-         :height="size.height>0?size.height:'auto'"
-         :style="{'height':size.height>0?undefined:'auto',
+    <img v-if="load &&!isSvg" ref="img" :alt="alt" :height="size.height>0?size.height:'auto'" :src="link" :style="{'height':size.height>0?undefined:'auto',
          'width':size.width>0?undefined:'auto'
-         }"/>
+         }"
+         :width="size.width>0?size.width:'auto'"
+         draggable="false"/>
     <svg-img v-else-if="load &&isSvg&&link" :link="link" :size="size">
     </svg-img>
   </div>
@@ -119,21 +119,21 @@ export default {
       if (this.height) {
         res["height"] = this.height
       }
-      let wPH=this.wPH
-      if(!wPH){
-        const ls=this.src.split('/')
-        if(ls.length>0){
-          const p=ls[ls.length-1].split('_')
-          if(p.length===3){
-            const p0=parseInt(p[0])
-            const p1=parseInt(p[1])
-            if(p0&&p1){
-              wPH=p0/p1
+      let wPH = this.wPH
+      if (!wPH) {
+        const ls = this.src.split('/')
+        if (ls.length > 0) {
+          const p = ls[ls.length - 1].split('_')
+          if (p.length === 3) {
+            const p0 = parseInt(p[0])
+            const p1 = parseInt(p[1])
+            if (p0 && p1) {
+              wPH = p0 / p1
             }
           }
         }
       }
-      if(wPH) {
+      if (wPH) {
         if (res['width'] !== 0 && res['height'] === 0) {
           res['height'] = parseInt(res['width'] / wPH)
         }
@@ -142,7 +142,7 @@ export default {
         }
       }
 
-      if (res['width'] !== 0||res['height']!== 0) {
+      if (res['width'] !== 0 || res['height'] !== 0) {
         return this.size = res
       }
 
@@ -153,7 +153,7 @@ export default {
         let w = parseInt(parseFloat(cs.getPropertyValue('width')) - paddingX - borderX);
         return this.size = {
           width: w,
-          height: parseInt(wPH?w / wPH:0)
+          height: parseInt(wPH ? w / wPH : 0)
         }
       }
       return false
@@ -161,7 +161,7 @@ export default {
     },
     activate() {
       this.getSize()
-      if (this.size.width !== 0||this.size.height) {
+      if (this.size.width !== 0 || this.size.height) {
         this.load = true
       } else {
         clearTimeout(this.time_id)

package/components/index.js

@@ -23,7 +23,7 @@ const list = {
     },
     'r-card': {'p': 'card/index.vue', 'c': [], 'd': ['ripple']},
     'r-chart': {'p': 'chart/chart.vue', 'c': [], 'd': []},
-    'r-world-map': {'p': 'chart/worldMap.vue', 'c': [], 'd': []},
+    'r-world-map': {'p': 'chart/worldMap.vue', 'c': ['r-float'], 'd': []},
     'r-chat': {
         'p': 'chat/index.vue',
         'c': ['r-btn', 'r-icon', 'r-progress-circle', 'r-img'],

package/components/modal/index.vue

@@ -1,17 +1,16 @@
 <template>
   <teleport :to="`.${$r.prefix}app`">
     <transition :name="animate">
-      <div v-bind="$attrs" :class="{
+      <div v-if="modelValue" :class="{
         [`${$r.prefix}modal`]:true,
         'h-end': bottom,
         'modal-no-overlay': noOverlay,
         'animate-modal-vibrate': run_animate,
-      }" :style="{'height':$r.breakpoint.height+'px'}" @click.self="close"
-           v-if="modelValue">
+      }" v-bind="$attrs" @click.self="close"
+      >
         <div class="modal-container" :style="{'max-width':maxWidth,'max-height':maxHeight}" :class="{
       'modal-bottom':bottom,
       [color]:color,
-      ['animate-modal-' +animate]:animate,
      'modal-full-width':fullWidth,
      'modal-full-height':fullHeight,
       'modal-mini':minWidth,
@@ -54,30 +53,57 @@ export default {
     minWidth: {type: Boolean, default: true},
     flat: Boolean,
     closable: Boolean,
+    routeHistory: String,
     closebtn: {type: Boolean, default: true},
     color: String,
     animate: {
       type: String,
-      default: 'slide-up'
+      default: 'scale'
     }
-
   },
-  emits:['update:modelValue'],
+  emits: ['update:modelValue'],
   data() {
     return {
       state: null,
       run_animate: false
     }
   },
+  created() {
+    if (this.routeHistory) {
+      const h = this.$route.hash.replace('#', '').split('&')
+      if (h.includes(this.routeHistory)) {
+        this.$emit('update:modelValue', true)
+      }
+    }
+  },
   watch: {
+    '$route': function (n) {
+      let h = []
+      if (this.$route.hash) {
+        h = this.$route.hash.replace('#', '').split('&')
+      }
+      if (!h.includes(this.routeHistory)) {
+        this.$emit('update:modelValue', false)
+      } else {
+        this.$emit('update:modelValue', true)
+      }
+    },
     modelValue: {
       // immediate: true, watch at created component
       handler: function (newVal, oldVal) {
         if (newVal === true) {
           document.documentElement.style.overflow = 'hidden'
-          const that = this
-          window.onpopstate = function (event) {
-            that.$emit('update:modelValue', false)
+          if (this.routeHistory) {
+            const routeHashs = this.$route.hash.replace('#', '').split('&')
+            if (!routeHashs.includes(this.routeHistory)) {
+              let h = ''
+              if (this.$route.hash) {
+                h = this.$route.hash + '&' + this.routeHistory
+              } else {
+                h = '#' + this.routeHistory
+              }
+              this.$router.push({path: this.$route.fullPath, hash: h})
+            }
           }
         } else {
           document.documentElement.style.overflow = null
@@ -88,7 +114,27 @@ export default {
   methods: {
     close(force = false) {
       if (this.closable || force === true) {
-        this.$emit('update:modelValue', !this.modelValue)
+        if (this.routeHistory) {
+          if (history.state.back) {
+            this.$router.back()
+          } else {
+            let h = ''
+            if (this.$route.hash) {
+              h = this.$route.hash.replace('#', '').split('&')
+              h.splice(h.indexOf(this.routeHistory), 1)
+              let s = ''
+              let first = true
+              h.forEach((item) => {
+                if (item) {
+                  s += (first ? '#' : '&') + item
+                }
+              })
+              h = s
+            }
+            this.$router.replace({'path': this.$route.fullPath, hash: h})
+          }
+        }
+        this.$emit('update:modelValue', false)
       } else {
         this.run_animate = true
         setTimeout(() => {

package/components/modal/style.scss

@@ -4,19 +4,21 @@
   align-items: center;
   flex-direction: column;
   display: flex;
-  left: 0;
-  width: 100vw;
+  left: -50%;
+  top: -50%;
+  width: 200%;
+  height: 200%;
   justify-content: center;
   position: fixed;
   z-index: map_get($z-index, 'important');
   outline: none;
-  bottom: 0;
 
 
-    &:not(.modal-no-overlay) {
-      background-color: var(--color-overlay);
-    }
-    .modal-content {
+  &:not(.modal-no-overlay) {
+    background-color: var(--color-overlay);
+  }
+
+  .modal-content {
       border: 1px solid var(--color-border);
     }
 
@@ -43,8 +45,8 @@
 
   .modal-container {
     width: 95%;
-    max-width: 95%;
-    max-height: 90%;
+    max-width: 100vw;
+    max-height: 90vh;
     z-index: map_get($z-index, 'important');
   }
 
@@ -59,7 +61,7 @@
   @include media-breakpoint-up('md') {
     .modal-container {
       width: 75%;
-      max-width: 75%;
+      max-width: 75vw;
     }
   }
 
@@ -73,7 +75,7 @@
 
   .modal-full-width {
     width: 100%;
-    max-width: 100% !important;
+    max-width: 100vw !important;
   }
 
   .modal-full-height {

package/components/searchBox/index.vue

@@ -82,7 +82,7 @@ export default {
     },
     label: String,
     url: String,
-    inputClass: String,
+    inputClass: [String, Object, Array],
     query: {
       type: String,
       default: "search",