renusify 2.0.2 → 2.0.4

package/components/button/index.vue

@@ -1,7 +1,9 @@
 <template>
   <component :class="`${$r.prefix}btn ${classes} size-${size}`"
              v-bind="att"
-               :is="route.tag"
+             :is="route.tag"
+             :type="type"
+             :aria-label="icon?'icon':undefined"
              v-ripple>
       <span class="btn-content">
         <slot></slot>
@@ -9,7 +11,7 @@
           <span class="label d-flex v-center h-center px-1 overflow-hidden" :class="labelClass" v-if="label">
               <transition name="counter-up" mode="out-in">
                   <span :key="label">
-                  {{label}}
+                  {{ label }}
                       </span>
               </transition>
           </span>
@@ -32,6 +34,10 @@ export default {
       type: String,
       default: 'button'
     },
+    type: {
+      type: String,
+      default: 'button'
+    },
     size: {
       type: String,
       default: 'default',
@@ -39,8 +45,8 @@ export default {
         return ['x-small', 'small', 'default', 'large', 'x-large'].indexOf(value) !== -1
       }
     },
-    label: [String,Number],
-    labelClass: [String,Array,Object],
+    label: [String, Number],
+    labelClass: [String, Array, Object],
     block: Boolean,
     depressed: Boolean,
     outlined: Boolean,
@@ -54,22 +60,22 @@ export default {
     loading: Boolean
   },
   computed: {
-      att(){
-                let res={}
-                if(this.href){
-                    res['href']=this.route.data.attrs.href
-                }
+    att() {
+      let res = {}
+      if (this.href) {
+        res['href'] = this.route.data.attrs.href
+      }
 
-                if(this.target){
-                    res['rel']='noreferrer'
-                    res['target']=this.route.data.attrs.target
-                }
-                if(this.to){
-                    res['to']=this.route.data.props.to
-                }
-                return res
-            },
-    classes () {
+      if (this.target) {
+        res['rel'] = 'noreferrer'
+        res['target'] = this.route.data.attrs.target
+      }
+      if (this.to) {
+        res['to'] = this.route.data.props.to
+      }
+      return res
+    },
+    classes() {
       let c = ''
       if (!this.depressed && !this.text && !this.outlined && !this.disabled) {
         c += 'btn-contained'

package/components/form/json/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="`${$r.prefix}json-input`">
+  <div :class="[`${$r.prefix}json-input`,{'input-tile':c_tile}]">
     <div class="d-flex v-center">
       <r-btn v-if="!disableEditKey" class="me-1 mb-1" icon @click.prevent="modeForm=!modeForm">{}</r-btn>
       <div v-if="label">{{ label }}</div>
@@ -29,15 +29,15 @@
             :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"
-                            :items="['text','number','boolean','json','array']"
-                            just-value
-                            disableSearch
-                            :translate="translate"
-                            @update:model-value="info.value=null"
-                            firstSelect></r-select-input>
+          <r-select-input v-model="info.type"
+                          :items="['text','number','boolean','json','array']"
+                          :tile="tile"
+                          :translate="translate"
+                          class="me-1"
+                          disableSearch
+                          firstSelect
+                          just-value
+                          @update:model-value="info.value=null"></r-select-input>
         </div>
         <r-text-input v-if="info.type==='text'"
                       :tile="tile"
@@ -49,7 +49,7 @@
         <r-switch-input v-else-if="info.type==='boolean'"
                         :tile="tile"
                         v-model="info.value" :label="valueLabel||$t('value','renusify')"></r-switch-input>
-        <r-btn @click.prevent="add" class="ms-1 color-success" rounded>{{ $t('add', 'renusify') }}</r-btn>
+        <r-btn :rounded="!c_tile" class="ms-1 color-success" @click.prevent="add">{{ $t('add', 'renusify') }}</r-btn>
       </div>
     </div>
     <div v-else :class="{'state-error':error}" class="json-highlight ltr">
@@ -91,7 +91,7 @@ export default {
     template: Object,
     baseArray: Boolean,
     disableAdd: Boolean,
-    tile: Boolean,
+    tile: {type: Boolean, default: undefined},
     disableEditKey: Boolean,
     disableDel: Boolean,
     translate: Boolean
@@ -131,6 +131,12 @@ export default {
     },
   },
   computed: {
+    c_tile() {
+      if (this.tile === undefined && this.$r.inputs.tile) {
+        return this.$r.inputs.tile
+      }
+      return this.tile
+    },
     build() {
       if (!this.lazyValue) {
         return "";
@@ -208,6 +214,21 @@ export default {
 @import "~renusify/style/include";
 
 .#{$prefix}json-input {
+  background: var(--color-sheet-container);
+  padding: 5px;
+
+  &.input-tile {
+    border-radius: map-get($borders, 'sm');
+  }
+
+  &:not(.input-tile) {
+    border-radius: map-get($borders, 'xl');
+  }
+
+  .input-control {
+    background: var(--color-sheet-container-low);
+  }
+
   textarea {
     outline: none;
     border: 1px solid var(--color-sheet-low);
@@ -264,16 +285,16 @@ export default {
     }
 
     .color-orange {
-      color: orange;
+      color: var(--color-error);
     }
 
     .color-green {
-      color: #0cde27;
+      color: var(--color-success);
     }
 
 
     .color-blue {
-      color: #7ad5ff;
+      color: var(--color-info);
     }
   }
 }

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

@@ -61,7 +61,7 @@
           </template>
         </r-input>
       </r-col>
-      <r-col v-if="files.length>0" class="col-12">
+      <r-col v-if="files&&files.length>0" class="col-12">
         <div v-for="(img,i) in files" :key="i"
              class="ma-1 img-holder">
           <r-btn class="color-error-text" icon @click.prevent="deleteImage(img,i)">
@@ -197,7 +197,7 @@ export default {
         }
       }
     },
-    tile: Boolean,
+    tile: {type: Boolean, default: undefined},
     headers: Object
   },
   emits: ['update:modelValue'],

package/components/form/text-editor/style.scss

@@ -4,6 +4,10 @@
   background-color: var(--color-sheet-container);
   margin-top: 20px;
 
+  &.input-tile {
+    border-radius: map-get($borders, 'sm');
+  }
+
   &:not(.input-tile) {
     border-radius: map-get($borders, 'xl');
 

package/components/infinite/index.vue

@@ -5,7 +5,7 @@
                 <r-col class="col-auto">
                     <h3 class="title-1 px-2">{{ title }}</h3>
                 </r-col>
-                <r-col class="col-auto px-1">
+                <r-col class="col-auto mx-1">
                   <r-switch-input
                       label="live"
                       v-model="live"

package/package.json

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