renusify 1.2.5 → 1.2.7

package/components/codeEditor/highlightCss.vue

@@ -6,6 +6,7 @@
         autocomplete="off"
         autocorrect="off"
         spellcheck="false"
+        @keydown="setTab"
     ></textarea>
     <div class="text-preview" v-html="build"></div>
   </div>
@@ -66,6 +67,30 @@ export default {
     },
   },
   methods: {
+    setTab(event) {
+      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
+    },
     re_class(res) {
       let regex = /\.-?[_a-zA-Z]+[_a-zA-Z0-9-]*\s*\{/g;
       let matched = res.matchAll(regex);

package/components/codeEditor/highlightHtml.vue

@@ -6,6 +6,7 @@
         autocomplete="off"
         autocorrect="off"
         spellcheck="false"
+        @keydown="setTab"
     ></textarea>
     <div class="text-preview" v-html="build"></div>
   </div>
@@ -86,6 +87,30 @@ export default {
     },
   },
   methods: {
+    setTab(event) {
+      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
+    },
     re_words(res) {
       res = this.$helper.replacer(
           res,

package/components/codeEditor/highlightJs.vue

@@ -6,6 +6,7 @@
         autocomplete="off"
         autocorrect="off"
         spellcheck="false"
+        @keydown="setTab"
     ></textarea>
     <div class="text-preview" v-html="build"></div>
   </div>
@@ -83,6 +84,30 @@ export default {
     },
   },
   methods: {
+    setTab(event) {
+      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
+    },
     strToObj(str) {
       str = this.$helper.replacer(str, " ", "");
       str = this.$helper.replacer(str, "\n", "");

package/components/codeEditor/index.vue

@@ -37,9 +37,7 @@
       </div>
       <div v-show="scriptShow">
         <span class="color-orange"
-        >&lt;script&gt;
-          <br/>
-          export default {</span
+        >&lt;script&gt;<br/>export default {</span
         >
         <highlight-script v-model="scr"></highlight-script>
         <span class="color-orange">}<br/>&lt;script&gt;</span>
@@ -151,6 +149,7 @@ export default {
 
 <style lang="scss">
 @import "~renusify/style/include";
+
 .#{$prefix}code-editor {
   position: relative;
   white-space: break-spaces;
@@ -212,6 +211,7 @@ export default {
 
   .code-editor-highlight {
     position: relative;
+    margin: -12px 0;
 
     .text-preview {
       white-space: pre-wrap;
@@ -223,7 +223,6 @@ export default {
       line-height: 20px;
       margin: 0;
       border: 0;
-
       padding: 12px;
     }
 
@@ -253,6 +252,7 @@ export default {
       top: 0;
       left: 0;
       resize: none;
+      overflow: hidden;
     }
   }
 }

package/components/form/group-input.vue

@@ -3,19 +3,16 @@
            :model-value="modelValue"
            hide>
     <div class="w-full">
+      <span v-if="label" class="color-primary-text">{{ label }}</span>
       <div class="group-holder" v-for="(item,i) in modelValue" :key="i">
         <div class="group-slot">
           <slot :item="item" :index="i" :disableDel="disDel">
-            <div class="d-flex flex-wrap pt-5">
+            <div v-if="template" class="d-flex flex-wrap pt-5 v-start">
               <template v-for="(v,k) in item" :key="i+'-'+k">
-                <r-text-input v-if="typeof v==='string'" class="flex-grow-0 me-1" :label="t(k)"
-                              v-model="item[k]"></r-text-input>
-                <r-number-input v-else-if="typeof v==='number'" class="flex-grow-0 me-1" :label="t(k)"
-                                v-model="item[k]"></r-number-input>
-                <r-switch-input v-else-if="typeof v==='boolean'" class="flex-grow-0 me-1" :label="t(k)"
-                                v-model="item[k]"></r-switch-input>
-            </template>
-          </div>
+                <component :is="template[k]['type']" v-model="item[k]" :label="t(k)"
+                           class="flex-grow-0 me-1" v-bind="template[k]['props']"></component>
+              </template>
+            </div>
         </slot>
       </div>
         <div class="group-action">
@@ -85,7 +82,17 @@ export default {
     add() {
       if (this.show_add) {
         let a = this.modelValue || []
-        a.push(this.$helper.clearProxy(this.template))
+        let b = {}
+        if (this.template) {
+          for (let k in this.template) {
+            let d = 'default' in this.template[k] ? this.template[k]['default'] : null
+            if (typeof d === 'object') {
+              d = this.$helper.clearProxy(d)
+            }
+            b[k] = d
+          }
+        }
+        a.push(b)
         this.$emit('add', true)
         this.$emit('update:modelValue', a)
       }

package/components/form/json/JsonView.vue

@@ -1,16 +1,12 @@
 <template>
-  <div :class="`${$r.prefix}json-view d-flex v-baseline flex-wrap`"
+  <div :class="`${$r.prefix}json-view d-flex v-end flex-wrap`"
        v-for="(value,key) in modelValue"
        :key="key">
-    <div class="key d-flex v-baseline me-1" :style="{'max-width': keyWidth}">
+    <div class="d-flex v-center me-1">
       <r-btn v-if="!disableDel" icon class="color-error-text" text @click="del(key)">
         <r-icon v-html="$r.icons.delete"></r-icon>
       </r-btn>
-      <template v-if="!is_array">
-        <r-text-input :tile="tile" :readonly="disableEditKey" :model-value="key"
-                      @update:model-value="emitkey(key,$event)"></r-text-input>
-        :
-      </template>
+      <div v-if="typeof value==='object'">{{ key }}</div>
     </div>
     <div v-if="typeof value==='object'" class="flex-grow-1 w-full ps-10">
       <r-json-input :tile="tile"
@@ -18,20 +14,21 @@
                     @update:model-value="emit(key,$event)"
                     :disableAdd="disableAdd||template!==undefined"
                     :disableDel="disableDel||template!==undefined"
-                    :disableEditKey="disableEditKey"
-                    :keyWidth="keyWidth"
-                    :valueWidth="valueWidth"
+                    disableEditKey
       ></r-json-input>
     </div>
-    <div v-else class="mb-1" :style="{'max-width': valueWidth}">
+    <div v-else class="mb-1 flex-grow-1">
       <r-text-input v-if="typeof value==='string'"
                     :tile="tile"
+                    :label="!is_array?key:''"
                     :model-value="value" @update:model-value="emit(key,$event)"></r-text-input>
       <r-number-input v-else-if="typeof value==='number'"
                       :tile="tile"
+                      :label="!is_array?key:''"
                       :model-value="value" @update:model-value="emit(key,$event)"></r-number-input>
       <r-switch-input v-else-if="typeof value==='boolean'"
                       :tile="tile"
+                      :label="!is_array?key:''"
                       :model-value="value" @update:model-value="emit(key,$event)"></r-switch-input>
 
     </div>
@@ -44,17 +41,9 @@ export default {
   props: {
     modelValue: Object,
     template: Object,
-    disableEditKey: Boolean,
     disableAdd: Boolean,
     disableDel: Boolean,
-    tile: Boolean,
-    keyWidth: {
-      type: String,
-      default: '140px'
-    }, valueWidth: {
-      type: String,
-      default: '300px'
-    }
+    tile: Boolean
   },
   emits: ['update:model-value'],
   data() {
@@ -105,4 +94,12 @@ export default {
 <style lang="scss">
 @import "../../../style/include";
 
+.#{$prefix}json-view {
+  @include rtl() {
+    border-right: 1px solid var(--color-border);
+  }
+  @include ltr() {
+    border-left: 1px solid var(--color-border);
+  }
+}
 </style>

package/components/form/json/index.vue

@@ -1,42 +1,33 @@
 <template>
-  <div :class="`${$r.prefix}json`">
-    <div v-if="label">{{ label }}</div>
-    <div class="d-flex">
-      <div class="display-5"
-           :class="{
-                'mt-5':Object.values(modelValue||[]).length>0,
-            'mt-2':Object.values(modelValue||[]).length===0
-            }"
-           :style="{'color':color}">{{ !is_array ? '{' : '[' }}
-      </div>
-      <div>
-        <json-view :model-value="modelValue"
-                   @update:model-value="emit"
-                   :template="template"
-                   :disableEditKey="disableEditKey"
-                   :disableAdd="disableAdd"
-                   :disableDel="disableDel"
-                   :tile="tile"
-                   :keyWidth="keyWidth"
-                   :valueWidth="valueWidth"
-        ></json-view>
-        <div v-if="!show &&!disableAdd" class="text-end mb-3">
-          <r-btn
-              @click.prevent="open"
-              class="mt-2"
-              size="small"
-              icon>
-            <r-icon v-html="$r.icons.plus"></r-icon>
-          </r-btn>
-        </div>
-        <div v-else-if="show" class="d-flex v-baseline">
-          <r-text-input
-              v-if="!is_array"
-              v-model="info.key"
-              :tile="tile"
-              class="w-30 pe-1"
-              :label="keyLabel"></r-text-input>
-          <div class="w-20" v-if="!valueType">
+  <div :class="`${$r.prefix}json-input`">
+    <div class="d-flex v-center">
+      <r-btn v-if="!disableEditKey" class="me-1 mb-1" icon @click="modeForm=!modeForm">{}</r-btn>
+      <div v-if="label">{{ label }}</div>
+    </div>
+    <div v-if="modeForm">
+      <json-view :model-value="modelValue"
+                 @update:model-value="emit"
+                 :template="template"
+                 :disableAdd="disableAdd"
+                 :disableDel="disableDel"
+                 :tile="tile"
+      ></json-view>
+      <r-btn
+          v-if="!show &&!disableAdd"
+          class="my-3 ms-1"
+          icon
+          size="small"
+          @click.prevent="open">
+        <r-icon v-html="$r.icons.plus"></r-icon>
+      </r-btn>
+      <div v-else-if="show" class="d-flex v-baseline">
+        <r-text-input
+            v-if="!is_array"
+            v-model="info.key"
+            :label="keyLabel"
+            :tile="tile"
+            class="w-30 pe-1"></r-text-input>
+        <div class="w-20" v-if="!valueType">
             <r-select-input v-model="info.type"
                             :tile="tile"
                             class="me-1"
@@ -50,21 +41,24 @@
                         :tile="tile"
                         :label="valueLabel"
                         v-model="info.value"></r-text-input>
-          <r-number-input v-else-if="val_type==='number'"
-                          :tile="tile"
-                          :label="$t('value','renusify')" v-model="info.value"></r-number-input>
-          <r-switch-input v-else-if="val_type==='boolean'"
-                          :tile="tile"
-                          :label="$t('value','renusify')" v-model="info.value"></r-switch-input>
-          <r-btn @click.prevent="add" class="ms-1 color-success" rounded>{{ $t('add', 'renusify') }}</r-btn>
-        </div>
-      </div>
-      <div class="display-5 d-flex v-end pb-2" :style="{'color':color}" :class="{
-                'mt-5':Object.values(modelValue||[]).length>0,
-            'mt-2':Object.values(modelValue||[]).length===0
-            }">{{ !is_array ? '}' : ']' }}
+        <r-number-input v-else-if="val_type==='number'"
+                        :tile="tile"
+                        :label="$t('value','renusify')" v-model="info.value"></r-number-input>
+        <r-switch-input v-else-if="val_type==='boolean'"
+                        :tile="tile"
+                        :label="$t('value','renusify')" v-model="info.value"></r-switch-input>
+        <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="Object.keys(modelValue).length+5"
+              autocapitalize="off"
+              autocomplete="off"
+              autocorrect="off"
+              class="ltr w-full"
+              spellcheck="false"
+              @input="emitt"
+              @keydown="setTab">{{ JSON.stringify(modelValue, null, 4) }}</textarea>
   </div>
 </template>
 <script>
@@ -80,14 +74,6 @@ export default {
     modelValue: {
       type: Object, Array
     },
-    keyWidth: {
-      type: String,
-      default: '140px'
-    },
-    valueWidth: {
-      type: String,
-      default: '300px'
-    },
     valueType: {
       type: String,
       validator: function (value) {
@@ -101,9 +87,11 @@ export default {
     disableEditKey: Boolean,
     disableDel: Boolean
   },
-  emits:['update:modelValue'],
+  emits: ['update:model-value'],
   data() {
     return {
+      modeForm: true,
+      error: false,
       show: false,
       info: {},
       color: `rgb(${this.$helper.randomInt(0, 255)},${this.$helper.randomInt(0, 255)},${this.$helper.randomInt(0, 255)})`
@@ -124,6 +112,30 @@ export default {
     }
   },
   methods: {
+    setTab(event) {
+      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
@@ -136,6 +148,15 @@ export default {
         this.show = true
       }
     },
+    emitt(e) {
+      try {
+        this.error = false
+        e = JSON.parse(e.target.value)
+        this.$emit('update:model-value', e)
+      } catch (er) {
+        this.error = true
+      }
+    },
     emit(e) {
       this.$emit('update:model-value', e)
     },
@@ -174,3 +195,17 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+@import "~renusify/style/include";
+
+.#{$prefix}json-input {
+  textarea {
+    outline: none;
+    border: 1px solid var(--color-border);
+  }
+
+  .state-error {
+    border: 1px solid var(--color-error);
+  }
+}
+</style>

package/components/formCreator/index.vue

@@ -8,7 +8,7 @@
             <r-col v-if="item['formInput']!==false&&iff(options[key])"
                    :class="options[key]['r-col']?options[key]['r-col']:'col-12'">
               <component
-                  :is="'r-'+item['type']"
+                  :is="buildName(item['type'])"
                   :label="$t(key)"
                   v-model="editedItem[key]"
                   v-bind="getAttr(options[key])"
@@ -99,6 +99,12 @@ export default {
     }
   },
   methods: {
+    buildName(name) {
+      if (name.startsWith('r-')) {
+        return name
+      }
+      return 'r-' + name
+    },
     iff(data) {
       const that = this
 

package/components/index.js

@@ -87,7 +87,7 @@ const list = {
     'r-checkbox-input': {'p': 'form/checkbox.vue', 'c': ['r-input', 'r-icon'], 'd': []},
     'r-group-input': {
         'p': 'form/group-input.vue',
-        'c': ['r-text-input', 'r-number-input', 'r-switch-input', 'r-btn', 'r-icon'],
+        'c': ['r-btn', 'r-icon'],
         'd': []
     },
     'r-input': {'p': 'form/input.vue', 'c': ['r-icon'], 'd': []},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "renusify",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "Vue3 Framework",
   "keywords": [
     "vuejs",