renusify 1.2.5 → 1.3.0

package/components/bar/toolbar/menuMob.vue

@@ -15,24 +15,24 @@
     </div>
 </template>
 <script>
-    import MenuChilds from "./menuChilds";
+import MenuChilds from "./menuChilds";
 
-    export default {
-        name: 'menu-mobile',
-        components: {MenuChilds},
-        props: {
-            logo: String,
-            logoW: Number,
-            logoH: Number,
-            menu: Array,
-            modelValue: Boolean
-        },
-        data() {
+export default {
+  name: 'menu-mobile',
+  components: {MenuChilds},
+  props: {
+    logo: String,
+    logoW: Number,
+    logoH: Number,
+    menu: Array,
+    modelValue: Boolean
+  },
+  data() {
             return {}
         },
         methods: {
             close() {
-                this.$emit('update:model-value', false)
+              this.$emit('update:modelValue', false)
             }
         }
     }

package/components/calendar/month.vue

@@ -21,7 +21,7 @@ export default {
     locale: String,
     year: Number
   },
-  emits:['update:model-value'],
+  emits: ['update:modelValue'],
   data() {
     return {
       p: 0
@@ -35,7 +35,7 @@ export default {
   },
   methods: {
     emit(n) {
-      this.$emit('update:model-value', n)
+      this.$emit('update:modelValue', n)
     }
   }
 }

package/components/calendar/year.vue

@@ -21,10 +21,10 @@ export default {
     locale: String,
     month: Number
   },
-  emits:['update:model-value'],
+  emits: ['update:modelValue'],
   methods: {
     emit(n) {
-      this.$emit('update:model-value', n)
+      this.$emit('update:modelValue', n)
     }
   }
 }

package/components/chat/chatInput.vue

@@ -62,7 +62,7 @@ export default {
     uploadLink: String,
     canFile: Boolean,
   },
-  emits:['update:model-value'],
+  emits: ['update:modelValue'],
   data() {
     return {
       text: '',
@@ -97,14 +97,14 @@ export default {
     },
     send() {
       if (this.text) {
-        this.$emit('update:model-value', {type: "text", content: this.text})
+        this.$emit('update:modelValue', {type: "text", content: this.text})
         this.$refs.input.innerText = ''
         this.text = ''
         this.$refs.input.focus()
       }
     },
     emit() {
-      this.$emit('update:model-value', {type: "file", content: this.text, link: this.fileLink})
+      this.$emit('update:modelValue', {type: "file", content: this.text, link: this.fileLink})
       this.$refs.input.innerText = ''
       this.text = ''
     }

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>
@@ -29,7 +30,7 @@ export default {
       this.d = this.modelValue;
     },
     d: function () {
-      this.$emit("update:model-value", this.d);
+      this.$emit("update:modelValue", this.d);
     },
   },
   computed: {
@@ -66,6 +67,58 @@ export default {
     },
   },
   methods: {
+    setTab(event) {
+      if (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, ' '.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>
@@ -22,6 +23,7 @@ export default {
       d: this.modelValue,
       runnable: false,
       code: "",
+      openTag: null
     };
   },
   watch: {
@@ -29,7 +31,7 @@ export default {
       this.d = this.modelValue;
     },
     d: function () {
-      this.$emit("update:model-value", this.d);
+      this.$emit("update:modelValue", this.d);
     },
   },
   computed: {
@@ -86,6 +88,72 @@ export default {
     },
   },
   methods: {
+    setTab(event) {
+      if (event.key === "<") {
+        this.openTag = event.target.selectionEnd
+        return false
+      } else if (event.key === ">" && this.openTag !== null) {
+        const end = event.target.selectionEnd;
+        const sel = event.target.value.substring(this.openTag + 1, end).trim().split(' ')[0];
+        const t = `></${sel}>`
+        event.preventDefault()
+        document.execCommand('insertText', false, t);
+        event.target.selectionEnd = end + 1;
+        this.openTag = null
+        return false
+      }
+
+      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, ' '.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>
@@ -29,7 +30,7 @@ export default {
       this.d = this.modelValue;
     },
     d: function () {
-      this.$emit("update:model-value", this.d);
+      this.$emit("update:modelValue", this.d);
     },
   },
   computed: {
@@ -83,6 +84,58 @@ export default {
     },
   },
   methods: {
+    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, ' '.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/address_ir.vue

@@ -93,7 +93,7 @@ export default {
   methods: {
     emit() {
       setTimeout(() => {
-        this.$emit('update:model-value', {
+        this.$emit('update:modelValue', {
           state: this.state,
           city: this.city,
           address: this.address

package/components/form/colorPicker/index.vue

@@ -25,7 +25,7 @@ export default {
     modelValue: String,
     format: {type: String, default: 'rgba'}
   },
-  emits:['update:model-value','close'],
+  emits: ['update:modelValue', 'close'],
   data() {
     return {
       open: false
@@ -34,7 +34,7 @@ export default {
   methods: {
     clear() {
       this.open = false
-      this.$emit('update:model-value', null)
+      this.$emit('update:modelValue', null)
       this.$emit('close', true)
     },
     close() {
@@ -46,7 +46,7 @@ export default {
       if (this.format === 'rgba') {
         r = e.rgba
       }
-      this.$emit('update:model-value', r)
+      this.$emit('update:modelValue', r)
     }
   }
 

package/components/form/datePicker/month.vue

@@ -35,7 +35,7 @@ export default {
   },
   methods: {
     emit(n) {
-      this.$emit('update:model-value', n)
+      this.$emit('update:modelValue', n)
     }
   }
 }

package/components/form/datePicker/year.vue

@@ -24,7 +24,7 @@ export default {
   emits:['update:modelValue'],
   methods: {
     emit(n) {
-      this.$emit('update:model-value', n)
+      this.$emit('update:modelValue', n)
     }
   }
 }

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 = this.template[k]['default'] !== undefined ? 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,19 +41,11 @@ 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'],
+  emits: ['update:modelValue'],
   data() {
     return {
       time_id: null
@@ -75,34 +64,25 @@ export default {
       } else {
         delete o[key]
       }
-      this.$emit('update:model-value', o)
-    },
-    emitkey(oldKey, newKey) {
-      clearTimeout(this.time_id)
-      let o = this.modelValue
-      let n = {};
-
-      Object.keys(o).forEach(key => {
-        if (key === oldKey) {
-          let newPair = {[newKey]: o[oldKey]};
-          n = {...n, ...newPair}
-        } else {
-          n = {...n, [key]: o[key]}
-        }
-      });
-      this.time_id = setTimeout(() => {
-        this.$emit('update:model-value', n)
-      }, 1000)
+      this.$emit('update:modelValue', o)
     },
     emit(k, v) {
       let d = this.modelValue
       d[k] = v
-      this.$emit('update:model-value', d)
+      this.$emit('update:modelValue', d)
     }
   }
 }
 </script>
 <style lang="scss">
-@import "../../../style/include";
+@import "~renusify/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:modelValue'],
   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,51 @@ 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
@@ -131,13 +164,22 @@ export default {
           d = []
         }
         d.push(Object.assign({}, {}, this.template))
-        this.$emit('update:model-value', d)
+        this.$emit('update:modelValue', d)
       } else {
         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:model-value', e)
+      this.$emit('update:modelValue', e)
     },
     add() {
       let d = this.modelValue
@@ -169,8 +211,22 @@ export default {
       }
       this.show = false
       this.info = {}
-      this.$emit('update:model-value', d)
+      this.$emit('update:modelValue', d)
     }
   }
 }
 </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/components/tabs/index.vue

@@ -26,7 +26,7 @@
           type="button"
           v-for="tab in items"
       >
-        {{ tab.title }}
+        <slot :item="tab">{{ tab.title }}</slot>
       </button>
       <div
           :class="lineClass"

package/package.json

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