renusify 2.0.0 → 2.0.2

package/components/app/style.scss

@@ -3,8 +3,8 @@
 .#{$prefix}app {
   display: flex;
 
-  background: var(--color-sheet-container-lowest);
-  color: var(--color-on-sheet-container-lowest);
+  background: var(--color-sheet);
+  color: var(--color-on-sheet);
 
 
   &.app-rtl {

package/components/bar/bottomNavigationCircle.vue

@@ -44,7 +44,7 @@ export default {
   z-index: map_get($z-index, "default");
   background-color: var(--color-sheet);
   color: var(--color-on-sheet);
-
+  @include typography($headings, 'body-3');
 
   .navigation-item {
     width: 100%;
@@ -80,15 +80,15 @@ export default {
     .navigation-item-icon {
       transition: 0.3s all ease-in-out;
       bottom: 31px;
-      background-color: currentColor;
+      background-color: var(--color-one);
       border-radius: 50%;
       padding: 12px;
       width: 50px;
       height: 50px;
-      border: 3px solid white;
+      border: 3px solid var(--color-on-one);
 
       .#{$prefix}icon {
-        color: white;
+        color: var(--color-on-one);
       }
     }
   }

package/components/bar/scss/bottomNav.scss

@@ -9,13 +9,12 @@ $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');
 
   .router-link-exact-active {
-    color: var(--color-one) !important
+    color: var(--color-one)
   }
 
   .#{$prefix}btn {

package/components/bar/scss/toolbar.scss

@@ -2,17 +2,19 @@
 
 .#{$prefix}toolbar {
   flex: 1 1 auto;
+  background-color: var(--color-sheet-container);
+  color: var(--color-on-sheet);
 
   .toolbar-mobile {
-    .toolbar-close{
+    .toolbar-close {
       width: 40px;
       height: 40px;
       position: absolute;
       transition: 2s all map-get($transition, 'swing');
-      @include rtl(){
+      @include rtl() {
         right: -40px;
       }
-      @include ltr(){
+      @include ltr() {
         left: -40px;
       }
     }

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/style.scss

@@ -59,7 +59,7 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
   white-space: nowrap;
 
   &:not(.btn-text):not(.btn-outlined) {
-    background-color: var(--color-sheet);
+    background-color: var(--color-sheet-container-low);
     color: var(--color-on-sheet);
   }
 
@@ -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);
-
+  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>
 
@@ -111,7 +111,7 @@ export default {
     year: Number,
     month: Number,
   },
-  emits:['change','select'],
+  emits: ['change', 'select'],
   data() {
     return {
       tab: 'day',
@@ -322,32 +322,34 @@ export default {
   position: relative;
   display: inline-block;
   font-size: 10px;
-  color: #303030;
   overflow-x: auto;
   max-width: 100%;
-    .cell, .headCell {
-      border: 1px solid var(--color-border);
-    }
-    .cell {
 
-      &.today {
-        .cellContent {
-          border: solid 1px var(--color-one);
-        }
-      }
+  .cell, .headCell {
+    border: 1px solid var(--color-border);
+  }
 
-      &.selectable:hover {
-        .cellContent {
-          border: solid 1px var(--color-one);
-        }
-      }
+  .cell {
 
+    &.today {
+      .cellContent {
+        border: solid 1px var(--color-one);
+      }
     }
-    .cell.disabled {
-      background-color: var(--color-border);
-      opacity: 0.3;
+
+    &.selectable:hover {
+      .cellContent {
+        border: solid 1px var(--color-one);
+      }
     }
 
+  }
+
+  .cell.disabled {
+    background-color: var(--color-border);
+    opacity: 0.3;
+  }
+
 
   .table {
     width: 100%;

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);
-  border-color: var(--color-sheet);
-  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/chatInput.vue

@@ -119,6 +119,7 @@ export default {
 
   box-shadow: black 0px 8px 15px;
   background: var(--color-sheet-container);
+  color: var(--color-on-sheet);
   border-top: 1px solid var(--color-border);
 
   .chat-input {

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>
@@ -170,7 +170,7 @@ export default {
       height: 30px;
       border-radius: 50%;
 
-      background-color: var(--color-sheet-container);
+      background-color: var(--color-sheet);
 
       position: absolute;
       top: -15px;

package/components/chat/index.vue

@@ -110,7 +110,7 @@ export default {
   flex-direction: column;
   align-items: stretch;
   overflow: hidden;
-  background: var(--color-sheet-container);
-  color: var(--color-on-sheet-container);
+  background: var(--color-sheet);
+  color: var(--color-on-sheet);
 }
 </style>

package/components/chip/style.scss

@@ -56,8 +56,8 @@ $icon-sizes: (
   border-color: var(--color-border);
 
   &:not(.chip-active) {
-    background: var(--color-two-container);
-    color: var(--color-on-two-container);
+    background: var(--color-sheet-container-low);
+    color: var(--color-on-sheet);
   }
 
   @include states();
@@ -124,6 +124,10 @@ $icon-sizes: (
     background-color: var(--color-one);
     color: var(--color-on-one);
 
+    .chip-close {
+      color: var(--color-on-one);
+    }
+
     .#{$prefix}icon {
       color: inherit;
       padding: 0 3px;

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/container/style.scss

@@ -70,7 +70,7 @@ $divider-inset-margin: 72px !default;
   max-height: 0px;
   transition: inherit;
 
-  border-top: solid thin var(--color-border);
+  border-top: solid thin var(--color-border-low);
 
   &.divider-inset:not(.divider-vertical) {
     max-width: calc(100% - #{$divider-inset-margin});

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>
@@ -72,7 +72,7 @@ emits:['update:modelValue'],
   cursor: pointer;
 
   .checkbox-input {
-    border: 1px solid var(--color-border)
+    border: 1px solid var(--color-on-sheet-low)
   }
 
   .#{$prefix}icon {
@@ -145,6 +145,7 @@ emits:['update:modelValue'],
 
   .checkbox-select {
     background-color: currentColor;
+    border: 0;
   }
 }
 </style>