renusify 2.0.1 → 2.0.3

package/components/bar/scss/bottomNav.scss

@@ -9,7 +9,7 @@ $bottom-nav-btn-font-size: map-metro-get($headings, 'label-1', 'size') !default;
   justify-content: center;
   width: 100%;
   height: $bottom-nav-height;
-  background-color: var(--color-sheet);
+  background-color: var(--color-sheet-container);
   color: var(--color-on-sheet);
   @include typography($headings, 'body-3');
 

package/components/bar/scss/toolbar.scss

@@ -2,7 +2,7 @@
 
 .#{$prefix}toolbar {
   flex: 1 1 auto;
-  background-color: var(--color-sheet);
+  background-color: var(--color-sheet-container);
   color: var(--color-on-sheet);
 
   .toolbar-mobile {

package/components/bar/toolbar/menuChilds.vue

@@ -3,9 +3,9 @@
         <div v-for="(item,i) in menu" :key="i">
             <div class="d-flex h-space-between">
                 <component class="menu-title py-1 cursor-pointer"
-                     :is="item.to?'router-link':'span'"
-                           @click="item.hash&&go(item.hash)"
-                             :to="item.to">{{item.title}}</component>
+                           :is="item.to?'router-link':'span'"
+                           @click.prevent="item.hash&&go(item.hash)"
+                           :to="item.to">{{item.title}}</component>
             <r-icon class="me-1" v-if="item.childs" v-html="open===i?$r.icons.minus:$r.icons.plus"
                     @click.prevent.stop="open===i?open=null:open=i"></r-icon>
                 </div>

package/components/bar/toolbar/menuLaptop.vue

@@ -4,30 +4,30 @@
                    class="toolbar-item me-2 cursor-pointer"
                    v-for="(item,i) in menu"
                    :key="i"
-                   @click="item.hash&&go(item.hash)"
+                   @click.prevent="item.hash&&go(item.hash)"
                    :to="item.to">
             {{item.title}}
             <r-icon v-if="item.childs" v-html="$r.icons.chevron_down"></r-icon>
-            <div class="toolbar-childs sheet mt-7" v-if="item.childs">
-                <menu-childs class="pa-2" :menu="item.childs"></menu-childs>
-            </div>
+          <div v-if="item.childs" class="toolbar-childs mt-7">
+            <menu-childs class="pa-2" :menu="item.childs"></menu-childs>
+          </div>
         </component>
     </div>
 </template>
 <script>
-    import MenuChilds from "./menuChilds";
+import MenuChilds from "./menuChilds";
 
-    export default {
-        name: 'menu-laptop',
-        components: {MenuChilds},
-        props: {menu: Array},
-        data() {
-            return {}
-        },
-        methods:{
-            go(hash){
-                if(this.$route.name!==hash.to.name){
-                this.$router.push(hash.to)
+export default {
+  name: 'menu-laptop',
+  components: {MenuChilds},
+  props: {menu: Array},
+  data() {
+    return {}
+  },
+  methods: {
+    go(hash) {
+      if (this.$route.name !== hash.to.name) {
+        this.$router.push(hash.to)
                 }
                 setTimeout(()=>{
                     const el=document.getElementById(hash.id)

package/components/bar/toolbar/menuMob.vue

@@ -1,17 +1,17 @@
 <template>
     <div class="toolbar-mobile" :class="{'toolbar-open':modelValue}">
-        <div class="shadow" @click="close">
-            <aside class="toolbar-side sheet sheet-tile pt-5">
-                <div v-if="logo" class="text-center">
-                <r-img :src="logo" alt="logo" :width="logoW" :height="logoH"></r-img>
-                <r-divider class="my-5"></r-divider>
-                    </div>
-                <menu-childs :menu="menu"></menu-childs>
-            </aside>
-            <div @click="close" class="toolbar-close sheet sheet-tile pa-2">
-                <r-icon v-html="$r.icons.close"></r-icon>
-            </div>
+      <div class="shadow" @click.prevent="close">
+        <aside class="toolbar-side pt-5">
+          <div v-if="logo" class="text-center">
+            <r-img :src="logo" alt="logo" :width="logoW" :height="logoH"></r-img>
+            <r-divider class="my-5"></r-divider>
+          </div>
+          <menu-childs :menu="menu"></menu-childs>
+        </aside>
+        <div class="toolbar-close pa-2" @click.prevent="close">
+          <r-icon v-html="$r.icons.close"></r-icon>
         </div>
+      </div>
     </div>
 </template>
 <script>

package/components/bar/toolbar/mixin.js

@@ -37,8 +37,6 @@ export const toolbar= {
                     'elevation-md': !this.flat
                 }
                 a[this.$r.prefix + 'toolbar'] = true
-                a['sheet'] = true
-                a['sheet-tile'] = this.tile
                 return a
             }
         }

package/components/bar/toolbar/mobile.vue

@@ -3,8 +3,8 @@
         <header>
             <r-container class="pa-0">
                 <div class="toolbar-content">
-                    <r-btn icon text @click="open=!open">
-                        <r-icon v-html="$r.icons.menu"></r-icon>
+                    <r-btn icon text @click.prevent="open=!open">
+                      <r-icon v-html="$r.icons.menu"></r-icon>
                     </r-btn>
                     <r-spacer></r-spacer>
                     <div v-if="search" class="mt-n5">

package/components/breadcrumb/index.vue

@@ -8,7 +8,7 @@
         <r-breadcrumb-item :href="item.href"
                            :item="item"
                            :to="item.to"
-                           @click="go(item)"></r-breadcrumb-item>
+                           @click.prevent="go(item)"></r-breadcrumb-item>
       </li>
     </ul>
   </transition>
@@ -36,11 +36,10 @@ export default {
   },
   emits:['click'],
   computed: {
-    classes(){
-      let a={'mb-1':true}
-      a[`sheet`]=this.sheet
-      a[`sheet-tile`]=true
-      a[`${this.$r.prefix}breadcrumbs`]=true
+    classes() {
+      let a = {}
+      a[`breadcrumbs-sheet`] = this.sheet
+      a[`${this.$r.prefix}breadcrumbs`] = true
       return a
     },
     genItems () {

package/components/breadcrumb/style.scss

@@ -10,6 +10,10 @@
   margin: 0 !important;
   padding: 0 14px;
 
+  &.breadcrumbs-sheet {
+    background-color: var(--color-sheet-container);
+    color: var(--color-on-sheet);
+  }
 
   .breadcrumb-divider, .breadcrumb-item-disabled, .#{$prefix}icon {
     color: var(--color-border)

package/components/button/index.vue

@@ -1,7 +1,8 @@
 <template>
   <component :class="`${$r.prefix}btn ${classes} size-${size}`"
              v-bind="att"
-               :is="route.tag"
+             :is="route.tag"
+             :type="type"
              v-ripple>
       <span class="btn-content">
         <slot></slot>
@@ -9,7 +10,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 +33,10 @@ export default {
       type: String,
       default: 'button'
     },
+    type: {
+      type: String,
+      default: 'button'
+    },
     size: {
       type: String,
       default: 'default',
@@ -39,8 +44,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 +59,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/button/style.scss

@@ -341,9 +341,8 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
 
 .#{$prefix}button-group {
   position: relative;
-  color: var(--color-on-sheet);;
-  background-color: var(--color-sheet-low);
-
+  color: var(--color-on-sheet);
+  background-color: var(--color-sheet-container);
   @include states();
 
   .btn-container {

package/components/calendar/index.vue

@@ -54,7 +54,7 @@
                          today: item.today
                                     }"
               :key="item.date"
-              @click="item.date!==0 &&!readonly&& selectDateItem(item)"
+              @click.prevent="item.date!==0 &&!readonly&& selectDateItem(item)"
           >
             <div
                 class="cellContent"
@@ -71,7 +71,7 @@
     </table>
 
     <r-modal :model-value="tab!=='day'" @update:model-value="tab='day'">
-      <r-card class="py-5">
+      <div class="py-5">
         <year-tab v-if="tab==='year'"
                   :model-value='currentPeriod.year'
                   @update:model-value="(tab='month',setYear($event))"
@@ -84,7 +84,7 @@
                    :timezoneOffset="lang_zone_offset-timezoneOffset"
                    :locale="locale"
                    :year="currentPeriod.year"></month-tab>
-      </r-card>
+      </div>
     </r-modal>
   </div>
 

package/components/calendar/month.vue

@@ -5,7 +5,7 @@
            outlined
            class="w-30 ma-2"
            :class="{'color-one-text':i+p===modelValue}"
-           @click="emit(i+p)">
+           @click.prevent="emit(i+p)">
       {{
         $d(new Date(year, i + p, 1, 0, timezoneOffset), 'month', locale)
       }}

package/components/calendar/year.vue

@@ -5,7 +5,7 @@
            class="w-30 ma-2"
            :class="{'color-one-text':modelValue+i-6===modelValue}"
            outlined
-           @click="emit(modelValue+i-6)">
+           @click.prevent="emit(modelValue+i-6)">
       {{
         $d(new Date(modelValue + i - 6, month, 1, 0, timezoneOffset), 'year', locale)
       }}

package/components/card/index.vue

@@ -7,20 +7,20 @@
 </template>
 
 <script>
-    import {roots} from '../../tools/rootable';
-    import './style.scss';
+import {roots} from '../../tools/rootable';
+import './style.scss';
 
-    export default {
-        name: 'r-card',
-        mixins: [roots],
-        props: {
-            flat: Boolean,
-            hover: Boolean,
-            tile: Boolean,
-            outlined: Boolean,
-            isRipple: {
-                type:Boolean,
-                default:true
+export default {
+  name: 'r-card',
+  mixins: [roots],
+  props: {
+    flat: Boolean,
+    hover: Boolean,
+    tile: Boolean,
+    outlined: Boolean,
+    isRipple: {
+      type: Boolean,
+      default: true
             },
             draggable:{
                 type:Boolean,
@@ -48,7 +48,7 @@
                 if (this.flat) {
                     c += ' card-flat';
                 }else{
-                    c += ' sheet';
+                  c += ' card-sheet';
                 }
                 if (this.hover) {
                     c += ' card-hover';
@@ -57,7 +57,7 @@
                     c += ' card-outlined';
                 }
                 if (this.tile) {
-                    c += ' sheet-tile';
+                  c += ' card-tile';
                 }
                 if (this.isClickable) {
                     c += ' card-link';

package/components/card/style.scss

@@ -12,6 +12,21 @@
   overflow-wrap: break-word;
   white-space: normal;
 
+  &.card-sheet {
+    display: block;
+    transition: box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
+    @include elevation('md');
+    border-radius: map_get($borders, 'md');
+    background-color: var(--color-sheet-container);
+    border-color: var(--color-sheet-container);
+    color: var(--color-on-sheet);
+  }
+
+  &.card-tile {
+    border-radius: 0;
+    @include elevation('none');
+  }
+
   &.card-outlined {
     border: 1px solid var(--color-border)
   }
@@ -64,24 +79,6 @@
   }
 }
 
-//sheet
-
-.sheet {
-  display: block;
-  transition: box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
-  @include elevation('md');
-  border-radius: map_get($borders, 'md');
-  background-color: var(--color-sheet-container-low);
-  border-color: var(--color-sheet-container-low);
-  color: var(--color-on-sheet);
-
-
-  &-tile {
-    border-radius: 0;
-    @include elevation('none');
-  }
-}
-
 
 
 

package/components/chart/worldMap.vue

@@ -20,7 +20,7 @@
         class="map-tooltip"
     >
       <slot :tooltip="tooltip">
-        <div class="pa-3 sheet">
+        <div class="pa-3">
           {{ tooltip.country }}
         </div>
       </slot>
@@ -1103,6 +1103,8 @@ export default {
   }
 
   .map-tooltip {
+    background-color: var(--color-sheet-container);
+    color: var(--color-on-sheet);
     position: absolute;
     z-index: 1;
   }

package/components/chat/chatMsg.vue

@@ -20,7 +20,7 @@
         <div class="message-text body-1">
           <div v-if="!isMe" class="message-username title-3">{{ user.name }}
           </div>
-          <div v-if="msg.type==='file'" @click="$helper.download('/'+msg.link)">
+          <div v-if="msg.type==='file'" @click.prevent="$helper.download('/'+msg.link)">
             <div class="mx-n2 mt-n1" v-if="isImg(msg.link)">
               <r-img class="br-sm" :src="'/'+msg.link" alt="img" width="250" :w-p-h="isImg(msg.link)"></r-img>
             </div>

package/components/codeEditor/index.vue

@@ -17,11 +17,11 @@
       >
         P
       </r-btn>
-      <r-btn v-if="show === 'code' && runnable" class="color-white-text" text @click="show = 'run'">
+      <r-btn v-if="show === 'code' && runnable" class="color-white-text" text @click.prevent="show = 'run'">
         run
         <r-icon v-html="$r.icons.play" exact></r-icon>
       </r-btn>
-      <r-btn v-if="show === 'run'" class="color-white-text" text @click="show = 'code'">
+      <r-btn v-if="show === 'run'" class="color-white-text" text @click.prevent="show = 'code'">
         <r-icon v-html="$r.icons.code_tags" exact></r-icon>
       </r-btn>
     </div>

package/components/confirm/index.vue

@@ -1,6 +1,5 @@
 <template>
   <r-modal :closebtn="false" :model-value="modelValue">
-    <r-card>
       <r-container class="container-fluid">
         <r-row>
           <r-col class="col-12 text-center">
@@ -38,7 +37,6 @@
           </r-btn>
         </r-row>
       </r-container>
-    </r-card>
   </r-modal>
 </template>
 

package/components/cropper/index.vue

@@ -26,7 +26,7 @@
     </div>
     <div class="action d-flex">
       <template v-if="show">
-        <r-btn @click="getCrop">{{ $t("crop", "renusify") }}</r-btn>
+        <r-btn @click.prevent="getCrop">{{ $t("crop", "renusify") }}</r-btn>
         <r-spacer></r-spacer>
         <r-btn icon tile @click.prevent="zoomIn()">+</r-btn>
         <r-btn icon tile @click.prevent="zoomOut()">-</r-btn>

package/components/form/camInput.vue

@@ -14,7 +14,7 @@
               :height="height"
               controls
           ></video>
-          <r-btn @click="dlt(vid)" icon>
+          <r-btn icon @click.prevent="dlt(vid)">
             <r-icon v-html="$r.icons.delete" class="color-error-text"></r-icon>
           </r-btn>
         </span>
@@ -79,7 +79,7 @@
                   </svg>
                 </r-icon>
               </r-btn>
-              <r-btn v-else class="color-error-text" icon @click="stop">
+              <r-btn v-else class="color-error-text" icon @click.prevent="stop">
                 <r-icon>
                   <svg
                       xmlns="http://www.w3.org/2000/svg"

package/components/form/checkbox.vue

@@ -16,7 +16,7 @@
                                v-html="$r.icons.check" exact></r-icon>
                    </transition>
             </span>
-        <span class="ms-2" @click="emit">
+        <span class="ms-2" @click.prevent="emit">
                 <span class="color-error-text" v-if="isRequired">*</span>
           <slot name="label">{{ label }}</slot>
             </span>

package/components/form/colorPicker/index.vue

@@ -1,7 +1,7 @@
 <template>
   <r-input class="mt-5" :model-value="modelValue" hide labelControlClass="label-active"
            :class="`${$r.prefix}color-picker`">
-    <div @click="open=true" class="shower" :style="{'background-color':modelValue||'#ffffff'}"></div>
+    <div :style="{'background-color':modelValue||'#ffffff'}" class="shower" @click.prevent="open=true"></div>
     <r-modal v-model="open" :closebtn="false" class="color-picker-modal" closable maxWidth="260px">
       <picker :color="modelValue" @changeColor="emit"></picker>
       <div class="d-flex h-space-between">

package/components/form/datePicker/index.vue

@@ -6,7 +6,7 @@
   </r-input>
   <r-modal :model-value="show" @update:model-value="close()" :closebtn="false" closable class="text-center">
     <div v-if="!showTime" :class="`${$r.prefix}date-input`">
-      <div class="sheet">
+      <div>
         <r-container>
           <r-row>
             <r-col class="col-auto">
@@ -75,7 +75,7 @@
                          today: item.today
                                     }"
                   :key="item.date"
-                  @click="item.date!==0 &&!readonly&& selectDateItem(item)"
+                  @click.prevent="item.date!==0 &&!readonly&& selectDateItem(item)"
               >
                 <div
                     class="cellContent d-flex h-center v-center"
@@ -97,8 +97,8 @@
           v-model="time"
       ></timepicker>
       <div class="mt-5">
-        <r-btn class="color-success mx-5" @click="selectTime">{{ $t('ok', 'renusify') }}</r-btn>
-        <r-btn class="color-error mx-5" @click="close">{{ $t('cancel', 'renusify') }}</r-btn>
+        <r-btn class="color-success mx-5" @click.prevent="selectTime">{{ $t('ok', 'renusify') }}</r-btn>
+        <r-btn class="color-error mx-5" @click.prevent="close">{{ $t('cancel', 'renusify') }}</r-btn>
       </div>
 
     </div>

package/components/form/datePicker/month.vue

@@ -5,7 +5,7 @@
            outlined
            class="w-30 ma-2"
            :class="{'color-one-text':i+p===modelValue}"
-           @click="emit(i+p)">
+           @click.prevent="emit(i+p)">
       {{
         $d(new Date(year, i + p, 1, 0, timezoneOffset), 'month', locale)
       }}

package/components/form/datePicker/year.vue

@@ -5,7 +5,7 @@
            class="w-30 ma-2"
            :class="{'color-one-text':modelValue+i-6===modelValue}"
            outlined
-           @click="emit(modelValue+i-6)">
+           @click.prevent="emit(modelValue+i-6)">
       {{
         $d(new Date(modelValue + i - 6, month, 1, 0, timezoneOffset), 'year', locale)
       }}

package/components/form/fileUploader/single.vue

@@ -41,10 +41,8 @@
            v-if="showFile"
     >
     <r-modal v-model="showCrop" maxWidth="300px">
-      <r-card>
         <r-cropper v-if="wPH&&file" :imgSrc="file" :selectImg="false" :w-p-h="wPH" get-blob showCropped
                    @cropped="file=$event,checkSave()"></r-cropper>
-      </r-card>
     </r-modal>
   </div>
 </template>

package/components/form/input.vue

@@ -376,7 +376,7 @@ export default {
     justify-content: center;
     position: relative;
     border: solid 1px var(--color-sheet-low);
-    background-color: var(--color-sheet-container-highest);
+    background-color: var(--color-sheet-container);
 
     .after-icon {
       position: absolute;

package/components/form/inputTel/index.vue

@@ -3,7 +3,7 @@
     <r-modal
         v-model="open"
     >
-      <r-card class="pa-2">
+      <div class="pa-2">
         <r-text-input
             :label="$t('search','renusify')"
             v-model="search"
@@ -18,7 +18,7 @@
             <span class="ltr">+{{ item.dialCode }}</span>
           </template>
         </r-list>
-      </r-card>
+      </div>
     </r-modal>
     <r-btn class="btn-country ltr ms-1"
            :rounded="!c_tile" :disabled="!select||readonly" @click.stop="toggleDropdown" outlined>

package/components/form/json/JsonView.vue

@@ -3,7 +3,7 @@
        v-for="(value,key) in modelValue"
        :key="key">
     <div class="d-flex v-center me-1">
-      <r-btn v-if="!disableDel" icon class="color-error-text" text @click="del(key)">
+      <r-btn v-if="!disableDel" class="color-error-text" icon text @click.prevent="del(key)">
         <r-icon v-html="$r.icons.delete"></r-icon>
       </r-btn>
       <div v-if="typeof value==='object'">{{ t(key) }}</div>