renusify 1.1.5 → 1.2.1

package/components/form/datePicker/month.vue

@@ -21,6 +21,7 @@ export default {
     locale: String,
     year: Number
   },
+  emits:['update:modelValue'],
   data() {
     return {
       p: 0

package/components/form/datePicker/year.vue

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

package/components/form/fileUploader/index.vue

@@ -64,6 +64,7 @@ export default {
     meta: Array,
     metaRequired: {type: Boolean, default: true}
   },
+  emits:['update:modelValue','add'],
   components: {
     single
   },

package/components/form/fileUploader/single.vue

@@ -70,6 +70,7 @@ export default {
     },
     metaRequired: Boolean
   },
+  emits:['file-link','select'],
   data() {
     return {
       showAdd: true,

package/components/form/form.vue

@@ -18,6 +18,7 @@ export default {
   props: {
     modelValue: Boolean
   },
+  emits:['update:modelValue'],
   data: () => ({
     inputs: [],
     watchers: [],

package/components/form/group-input.vue

@@ -54,6 +54,7 @@ export default {
     template: Object,
     addBtnClass: {'type': String, default: 'text-center'}
   },
+  emits:['update:modelValue','add','delete'],
   data() {
     return {
       disabledDel: {}
@@ -86,14 +87,14 @@ export default {
         let a = this.modelValue || []
         a.push(this.$helper.clearProxy(this.template))
         this.$emit('add', true)
-        this.$emit('update:model-value', a)
+        this.$emit('update:modelValue', a)
       }
     },
     del(i) {
       let a = this.modelValue || []
       a.splice(i, 1)
       this.$emit('delete', i)
-      this.$emit('update:model-value', a)
+      this.$emit('update:modelValue', a)
     },
     up(i) {
       if (i === 0) {
@@ -101,7 +102,7 @@ export default {
       }
       let a = this.modelValue || []
       a = this.array_move(a, i, i - 1)
-      this.$emit('update:model-value', a)
+      this.$emit('update:modelValue', a)
     },
     down(i) {
       if (i === this.modelValue.length - 1) {
@@ -109,7 +110,7 @@ export default {
       }
       let a = this.modelValue || []
       a = this.array_move(a, i, i + 1)
-      this.$emit('update:model-value', a)
+      this.$emit('update:modelValue', a)
     },
     array_move(arr, old_index, new_index) {
       if (new_index >= arr.length) {

package/components/form/input.vue

@@ -34,7 +34,6 @@
   </div>
 </template>
 <script>
-import './scss/input.scss'
 
 export default {
   name: 'r-input',
@@ -67,6 +66,7 @@ export default {
     },
     validateOnBlur: {type: Boolean, default: undefined}
   },
+  emits:['pre-icon','icon','update:modelValue'],
   data() {
     return {
       uid: 'input_' + this.$helper.uniqueId(),
@@ -283,3 +283,255 @@ export default {
 }
 
 </script>
+<style lang="scss">
+@import '../../style/include';
+
+
+.#{$prefix}input-container {
+  position: relative;
+  align-items: flex-start;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  line-height: 24px;
+  font-size: 1rem;
+  letter-spacing: normal;
+  margin-top: 20px;
+
+  &.input-ltr {
+    input {
+      direction: ltr;
+    }
+  }
+
+    &:not(.input-disabled) {
+      input,
+      textarea, .label, .#{$prefix}icon, .#{$prefix}btn {
+        color: var(--color-text-primary)
+      }
+    }
+
+    input::placeholder,
+    textarea::placeholder {
+      color: var(--color-text-disabled)
+    }
+
+    &.input-disabled {
+      * {
+        color: var(--color-text-disabled)
+      }
+    }
+
+    .input-control {
+      border: solid 1px var(--color-border)
+    }
+
+  &.input-disabled {
+    pointer-events: none;
+  }
+
+  input {
+    max-height: 32px
+  }
+
+  input,
+  textarea {
+    flex: 1 1 auto;
+    line-height: 20px;
+    padding: 8px 0 8px;
+    max-width: 100%;
+    min-width: 0px;
+    width: 100%;
+    outline: none;
+    position: relative;
+
+    &[type=text ]::-ms-clear {
+      display: none
+    }
+
+    &:invalid {
+      box-shadow: none
+    }
+
+    &:focus,
+    &:active {
+      outline: none
+    }
+  }
+
+  .input-control {
+    display: flex;
+    flex-direction: column;
+    height: 40px;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    width: 100%;
+    align-items: flex-start;
+    justify-content: center;
+    position: relative;
+    .after-icon {
+      position: absolute;
+      cursor: pointer;
+      @include ltr() {
+        right: 5px;
+      }
+      @include rtl() {
+        left: 5px;
+      }
+
+    }
+    .pre-icon {
+      position: absolute;
+      cursor: pointer;
+      @include ltr() {
+        left: 5px;
+      }
+      @include rtl() {
+        right: 5px;
+      }
+
+    }
+
+    &:not(.input-tile) {
+      padding: 0 16px;
+      border-radius: 20px;
+    }
+
+    &.input-tile {
+      padding: 0 8px;
+      border-radius: 4px;
+    }
+  }
+
+  &.hide-detail {
+
+    > .input-control {
+      border: unset !important;
+      height: auto;
+      padding: 0;
+    }
+  }
+
+  .label {
+    white-space: nowrap;
+    position: absolute;
+    z-index: 0;
+    top: 8px;
+    transition: $primary-transition;
+
+    @include ltr() {
+      left: 15px;
+      transform-origin: top left;
+    }
+
+    @include rtl() {
+      right: 15px;
+      transform-origin: top right;
+    }
+  }
+
+  :not(.input-tile) {
+    .label-active {
+      @include ltr() {
+        transform: translateY(-27px) translateX(5px) scale(.9);
+      }
+      @include rtl() {
+        transform: translateY(-27px) translateX(-5px) scale(.9);
+      }
+      transition: $primary-transition
+    }
+  }
+
+  .label-fixed {
+    transform: none !important;
+    top: -20px !important;
+    @include ltr() {
+      left: 0 !important;
+    }
+    @include rtl() {
+      right: 0 !important;
+    }
+  }
+
+  .input-tile {
+    .label-active {
+      @include ltr() {
+        transform: translateY(-27px) translateX(-8px) scale(.9);
+      }
+      @include rtl() {
+        transform: translateY(-27px) translateX(8px) scale(.9);
+      }
+      transition: $primary-transition
+    }
+  }
+
+  &.input-focused {
+    .input-control {
+      border: solid 1px currentColor;
+    }
+
+    .#{$prefix}icon, .#{$prefix}btn {
+      color: currentColor !important;
+    }
+
+    :not(.input-tile) {
+      .label {
+        color: currentColor !important;
+        @include ltr() {
+          transform: translateY(-27px) translateX(5px) scale(.9);
+        }
+        @include rtl() {
+          transform: translateY(-27px) translateX(-5px) scale(.9);
+        }
+        transition: $primary-transition
+      }
+    }
+
+    .input-tile {
+      .label {
+        color: currentColor !important;
+        @include ltr() {
+          transform: translateY(-27px) translateX(-8px) scale(.9);
+        }
+        @include rtl() {
+          transform: translateY(-27px) translateX(8px) scale(.9);
+        }
+        transition: $primary-transition
+      }
+    }
+  }
+
+  .massage {
+    display: none;
+    margin-left: 10px;
+
+    &-active {
+      display: block;
+    }
+  }
+
+
+  &.color-error-text {
+    .label {
+      color: currentColor;
+    }
+
+    .input-control {
+      border: solid 1px currentColor;
+    }
+  }
+
+  &.text-area {
+    .input-control {
+      height: auto;
+
+      &:not(.input-tile) {
+        border-radius: 15px;
+      }
+    }
+
+  }
+}
+
+
+</style>

package/components/form/inputTel/index.vue

@@ -65,6 +65,7 @@ export default {
     }
 
   },
+  emits:['update:modelValue'],
   data() {
     return {
       tel: {

package/components/form/json/JsonView.vue

@@ -1,107 +1,108 @@
 <template>
-    <div :class="`${$r.prefix}json-view d-flex v-baseline flex-wrap`"
-         v-for="(value,key) in modelValue"
-         :key="key">
-      <div class="key d-flex v-baseline me-1" :style="{'max-width': keyWidth}">
-        <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>
-      <div v-if="typeof value==='object'" class="flex-grow-1 w-full ps-10">
-        <r-json-input :tile="tile"
-                      :model-value="value"
-                      @update:model-value="emit(key,$event)"
-                      :disableAdd="disableAdd||template!==undefined"
-                      :disableDel="disableDel||template!==undefined"
-                      :disableEditKey="disableEditKey"
-                      :keyWidth="keyWidth"
-                      :valueWidth="valueWidth"
-        ></r-json-input>
-      </div>
-      <div v-else class="mb-1" :style="{'max-width': valueWidth}">
-        <r-text-input v-if="typeof value==='string'"
+  <div :class="`${$r.prefix}json-view d-flex v-baseline flex-wrap`"
+       v-for="(value,key) in modelValue"
+       :key="key">
+    <div class="key d-flex v-baseline me-1" :style="{'max-width': keyWidth}">
+      <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>
+    <div v-if="typeof value==='object'" class="flex-grow-1 w-full ps-10">
+      <r-json-input :tile="tile"
+                    :model-value="value"
+                    @update:model-value="emit(key,$event)"
+                    :disableAdd="disableAdd||template!==undefined"
+                    :disableDel="disableDel||template!==undefined"
+                    :disableEditKey="disableEditKey"
+                    :keyWidth="keyWidth"
+                    :valueWidth="valueWidth"
+      ></r-json-input>
+    </div>
+    <div v-else class="mb-1" :style="{'max-width': valueWidth}">
+      <r-text-input v-if="typeof value==='string'"
+                    :tile="tile"
+                    :model-value="value" @update:model-value="emit(key,$event)"></r-text-input>
+      <r-number-input v-else-if="typeof value==='number'"
                       :tile="tile"
-                      :model-value="value" @update:model-value="emit(key,$event)"></r-text-input>
-        <r-number-input v-else-if="typeof value==='number'"
-                        :tile="tile"
-                        :model-value="value" @update:model-value="emit(key,$event)"></r-number-input>
-        <r-switch-input v-else-if="typeof value==='boolean'"
-                        :tile="tile"
-                        :model-value="value" @update:model-value="emit(key,$event)"></r-switch-input>
-
-      </div>
+                      :model-value="value" @update:model-value="emit(key,$event)"></r-number-input>
+      <r-switch-input v-else-if="typeof value==='boolean'"
+                      :tile="tile"
+                      :model-value="value" @update:model-value="emit(key,$event)"></r-switch-input>
 
     </div>
+
+  </div>
 </template>
 <script>
-    export default {
-        name: 'jsonView',
-        props: {
-          modelValue: Object,
-          template: Object,
-          disableEditKey: Boolean,
-          disableAdd: Boolean,
-          disableDel: Boolean,
-          tile: Boolean,
-          keyWidth: {
-            type: String,
-            default: '140px'
-          }, valueWidth: {
-            type: String,
-            default: '300px'
-          }
-        },
-        data() {
-            return {
-                time_id: null
-            }
-        },
-        computed:{
-            is_array(){
-              return Array.isArray(this.modelValue)
-          }
-        },
-        methods: {
-            del(key) {
-                let o = this.modelValue
-                if (this.is_array) {
-                    o.splice(key, 1)
-                } else {
-                    delete o[key]
-                }
-                this.$emit('update:model-value', o)
-            },
-            emitkey(oldKey, newKey) {
-                clearTimeout(this.time_id)
-                let o = this.modelValue
-                let n = {};
+export default {
+  name: 'jsonView',
+  props: {
+    modelValue: Object,
+    template: Object,
+    disableEditKey: Boolean,
+    disableAdd: Boolean,
+    disableDel: Boolean,
+    tile: Boolean,
+    keyWidth: {
+      type: String,
+      default: '140px'
+    }, valueWidth: {
+      type: String,
+      default: '300px'
+    }
+  },
+  emits: ['update:model-value'],
+  data() {
+    return {
+      time_id: null
+    }
+  },
+  computed: {
+    is_array() {
+      return Array.isArray(this.modelValue)
+    }
+  },
+  methods: {
+    del(key) {
+      let o = this.modelValue
+      if (this.is_array) {
+        o.splice(key, 1)
+      } 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)
-            },
-            emit(k, v) {
-                let d = this.modelValue
-                d[k] = v
-                this.$emit('update:model-value', d)
-            }
+      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)
+    },
+    emit(k, v) {
+      let d = this.modelValue
+      d[k] = v
+      this.$emit('update:model-value', d)
     }
+  }
+}
 </script>
 <style lang="scss">
-    @import "../../../style/include";
+@import "../../../style/include";
 
 </style>

package/components/form/json/index.vue

@@ -42,6 +42,7 @@
                             class="me-1"
                             :items="['text','number','boolean','json','array']"
                             just-value
+                            disableSearch
                             @update:model-value="info.value=null"
                             firstSelect></r-select-input>
           </div>
@@ -100,6 +101,7 @@ export default {
     disableEditKey: Boolean,
     disableDel: Boolean
   },
+  emits:['update:modelValue'],
   data() {
     return {
       show: false,

package/components/form/mask-input.vue

@@ -34,6 +34,7 @@
                 type: Boolean
             },
         },
+      emits:['update:modelValue','complete'],
         data() {
             return {
                 lazyVal: this.modelValue?this.build_mask(this.modelValue, this.mask):null,

package/components/form/number.vue

@@ -41,6 +41,7 @@ export default {
     },
     btnText: Boolean
   },
+  emits:['update:modelValue'],
   data() {
     return {
       number: this.setSplit(this.modelValue),