renusify 1.4.2 → 1.4.4

package/components/codeEditor/mixin.js

@@ -0,0 +1,186 @@
+export default {
+    methods: {
+        pretty_html(text) {
+            if (!text) {
+                return ''
+            }
+            text = text.trim()
+            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
+                    }
+                }
+            })
+            r = r.replace(/<([^/].*)>+[\r|\n|\t]+<\//g, '<$1></');
+            return r
+        },
+        pretty_js(text) {
+            if (!text) {
+                return ''
+            }
+            text = text.trim()
+            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
+                }
+                if (numopen < 0) {
+                    numopen = 0
+                }
+                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 !== '{' && numopen > 0) {
+
+                    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('\t')
+
+                let w = ''
+                for (let i = 0; i < n.length; i++) {
+                    if (n[i] === '') {
+                        w += '\t'
+                    } 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/camInput.vue

@@ -133,7 +133,7 @@ export default {
     },
     headers: Object
   },
-  emits:['update:modelValue','error'],
+  emits: ['update:modelValue', 'error'],
   data() {
     return {
       started: false,
@@ -268,7 +268,11 @@ export default {
               },
               (err) => {
                 this.uploadPercentage = 0;
-                this.$emit('error', err.response.data)
+                if (err.response) {
+                  this.$emit('error', err.response.data)
+                } else {
+                  this.$emit('error', err)
+                }
               }
           );
     },

package/components/form/input.vue

@@ -2,7 +2,7 @@
   <div
       :class="{
         [`${$r.prefix}input-container`]:true,
-        [c_color]:c_color&&!isDisabled,
+        [c_color]:c_color&&!isDisabled&&!hasError,
         'color-error-text':hasError&&genMessages.length>0,
         'hide-detail':c_hide,
         'input-focused':active,

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/form/mask-input.vue

@@ -74,11 +74,11 @@
                 for (let i = 0; i <lng; i++) {
                     const dataChar = data.charAt(n);
                     const maskChar = mask.charAt(i);
-                    switch (maskChar) {
+
+                  switch (maskChar) {
                         case 'N':
                             if (/[0-9]/.test(dataChar)) {
                                 dataOutput += dataChar;
-
                             }
                             n++
                             break;

package/components/form/text-area.vue

@@ -3,7 +3,7 @@
            v-model="lazyValue"
            @click.stop="handleClick()"
            @update:model-value="emit"
-           class="text-area"
+           :class="`${$r.prefix}text-area`"
            :class="{'no-resize':noResize}"
   >
     <template v-slot="{uid}">

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

@@ -37,7 +37,6 @@
                 <r-select-input :label="$t('class','renusify')" :model-value="[...selectElm.classList]"
                                 multiple
                                 tags
-                                disableSearch
                                 justValue
                                 @update:model-value="addClass"></r-select-input>
             </r-col>

package/components/form/timepicker/index.vue

@@ -30,22 +30,24 @@
             :withSec="withSec"
             v-model="lazyValue"
         ></timepicker>
-        <r-btn
-            class="color-success-text ml-7 mr-9 mb-3 mt-3"
-            outlined
-            @click="show_modal = false,emit()"
-        >
-          {{ $t('accept', 'renusify') }}
-        </r-btn
-        >
-        <r-btn
-            class="color-warning-text mr-7 ml-4 mb-3 mt-3"
-            outlined
-            @click="(show_modal = false), (lazyValue = null),emit()"
-        >
-          {{ $t('cancel', 'renusify') }}
-        </r-btn
-        >
+        <div class="my-3 d-flex h-space-between">
+          <r-btn
+              class="color-success-text"
+              outlined
+              @click="show_modal = false,emit()"
+          >
+            {{ $t('accept', 'renusify') }}
+          </r-btn
+          >
+          <r-btn
+              class="color-warning-text"
+              outlined
+              @click="(show_modal = false), (lazyValue = null),emit()"
+          >
+            {{ $t('cancel', 'renusify') }}
+          </r-btn
+          >
+        </div>
       </r-card>
     </r-modal>
   </div>

package/components/form/unit-input.vue

@@ -99,6 +99,7 @@ emits:['update:modelValue'],
 
     .input-control {
       border-radius: 0;
+      padding: 4px;
       @include rtl() {
         border-right: 1px solid var(--c-unit) !important;
       }

package/components/formCreator/index.vue

@@ -6,9 +6,9 @@
         <r-row>
           <template :key="key" v-for="(item,key) in options">
             <r-col v-if="item['formInput']!==false&&iff(options[key])"
-                   :class="options[key]['r-col']?options[key]['r-col']:'col-12'">
+                   :class="options[key]['class']?options[key]['class']:'col-12'">
               <component
-                  :is="buildName(item['type'])"
+                  :is="item['type']"
                   :label="$t(key)"
                   v-model="editedItem[key]"
                   v-bind="getAttr(options[key])"
@@ -99,12 +99,6 @@ export default {
     }
   },
   methods: {
-    buildName(name) {
-      if (name.startsWith('r-')) {
-        return name
-      }
-      return 'r-' + name
-    },
     iff(data) {
       const that = this
 
@@ -152,18 +146,11 @@ export default {
       return true
     },
     getAttr(data) {
-      let res = {}
-      for (let i in data) {
-        if (this.$helper.hasKey(data, i) && !['formInput', 'sortable', 'type', 'tableShow', 'priority', '$if', 'r-col'].includes(i)) {
-          if (i === '$bind') {
-            data[i].forEach((item) => {
-              res[item[0]] = this.editedItem[item[1]]
-            })
-
-          } else {
-            res[i] = data[i]
-          }
-        }
+      let res = data['props'] ? data['props'] : {}
+      if (data['$bind']) {
+        data['$bind'].forEach((item) => {
+          res[item[0]] = this.editedItem[item[1]]
+        })
       }
       return res
     },

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)