renusify 1.4.8 → 2.0.0

package/components/app/style.scss

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

package/components/app/toast/toast.vue

@@ -2,14 +2,15 @@
   <div :class="`${$r.prefix}toast`">
     <transition name="slide-up">
       <div class="toast-content br-sm elevation-md" :class="'color-'+type" v-if="modelValue">
-          <span class="title">
+          <span class="title-1">
             <slot></slot>
           </span>
           <r-spacer></r-spacer>
-            <r-btn text class="title font-weight-bold" :class="{
+        <r-btn :class="{
                 'color-info-text':type==='warning',
                 'color-warning-text':type!=='warning'
-            }" v-if="action" @click.prevent="action(this)">{{actionName}}</r-btn>
+            }" class="title-1 font-weight-bold" text v-if="action" @click.prevent="action(this)">{{ actionName }}
+        </r-btn>
             <r-btn @click.prevent="close()"
                    icon
                    text

package/components/bar/bottomNavigationCircle.vue

@@ -43,7 +43,7 @@ export default {
   height: 56px;
   z-index: map_get($z-index, "default");
   background-color: var(--color-sheet);
-  color: var(--color-text-primary);
+  color: var(--color-on-sheet);
 
 
   .navigation-item {

package/components/bar/scss/bottomNav.scss

@@ -1,6 +1,6 @@
 @import "../../../style/include";
 
-$bottom-nav-btn-font-size: map-metro-get($headings, 'caption', 'size') !default;
+$bottom-nav-btn-font-size: map-metro-get($headings, 'label-1', 'size') !default;
 
 .#{$prefix}bottom-navigation {
   bottom: 0;
@@ -12,7 +12,7 @@ $bottom-nav-btn-font-size: map-metro-get($headings, 'caption', 'size') !default;
 
 
   background-color: var(--color-sheet);
-  color: var(--color-text-primary);
+  color: var(--color-on-sheet);
 
   .router-link-exact-active {
     color: var(--color-one) !important

package/components/breadcrumb/style.scss

@@ -12,7 +12,7 @@
 
 
   .breadcrumb-divider, .breadcrumb-item-disabled, .#{$prefix}icon {
-    color: var(--color-disabled)
+    color: var(--color-border)
   }
 
 

package/components/button/index.vue

@@ -22,14 +22,15 @@
 
 <script>
 import './style.scss'
-import { roots } from '../../tools/rootable'
+import {roots} from '../../tools/rootable'
+
 export default {
   name: 'r-btn',
   mixins: [roots],
   props: {
     tag: {
       type: String,
-      default: 'span'
+      default: 'button'
     },
     size: {
       type: String,
@@ -89,8 +90,7 @@ export default {
         c += ' btn-tile'
       }
       if (this.disabled) {
-        c += ' btn-disabled'
-        c += ' disabled-text'
+        c += ` btn-disabled`
       }
       if (this.readonly) {
         c += ' btn-readonly'

package/components/button/style.scss

@@ -58,37 +58,36 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
   vertical-align: middle;
   white-space: nowrap;
 
-
-  &.btn-disabled {
-    color: var(--color-disabled) !important;
-
-    .btn-loading {
-      color: var(--color-disabled) !important
-    }
-
-    &:not(.btn-text):not(.btn-outlined) {
-      background-color: var(--color-focused) !important
-    }
-  }
-
   &:not(.btn-text):not(.btn-outlined) {
     background-color: var(--color-sheet);
+    color: var(--color-on-sheet);
   }
 
   &.btn-outlined.btn-text {
-    border-color: var(--color-divider)
+    border-color: var(--color-border)
   }
 
 
   @include states();
 
+  &.btn-disabled {
+    @include disable-states();
+
+    &:not(.btn-text):not(.btn-outlined) {
+      background-color: var(--color-#{map-metro-get($states, 'disabled','state','color')}) !important;
+    }
+
+    &.btn-text, &.btn-outlined {
+      &::before {
+        opacity: 0 !important;
+      }
+    }
+  }
+
   @include ltr() {
     letter-spacing: $btn-letter-spacing;
   }
 
-  &.btn-disabled {
-    pointer-events: none;
-  }
 
   &.btn-readonly {
     pointer-events: none;
@@ -109,10 +108,6 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
     background-color: currentColor
   }
 
-  &:not(.btn-disabled) {
-    will-change: box-shadow
-  }
-
   &:not(.btn-round) {
     @each $name, $size in $btn-sizes {
       $p: div($size, 2.25);
@@ -223,11 +218,6 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
   box-shadow: none !important
 }
 
-.btn-disabled {
-  box-shadow: none;
-  pointer-events: none
-}
-
 .btn-icon,
 .btn-fab {
   min-height: 0;
@@ -351,7 +341,7 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
 
 .#{$prefix}button-group {
   position: relative;
-  color: inherit;
+  color: var(--color-on-sheet);;
   background-color: var(--color-sheet);
 
   @include states();

package/components/calendar/index.vue

@@ -329,9 +329,8 @@ export default {
       border: 1px solid var(--color-border);
     }
     .cell {
-      &.today {
-        color: var(--color-one);
 
+      &.today {
         .cellContent {
           border: solid 1px var(--color-one);
         }
@@ -345,8 +344,8 @@ export default {
 
     }
     .cell.disabled {
-      background-color: var(--color-disabled);
-      opacity: 0.5;
+      background-color: var(--color-border);
+      opacity: 0.3;
     }
 
 

package/components/card/style.scss

@@ -71,11 +71,9 @@
   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-text-primary);
+  color: var(--color-on-sheet);
 
 
   &-tile {

package/components/chat/chatInput.vue

@@ -37,7 +37,7 @@
         <r-icon v-html="$r.icons.send"></r-icon>
       </r-btn>
       <br>
-      <span class="caption color-error-text" v-if="remain<30">{{ remain }}</span>
+      <span v-if="remain<30" class="label-1 color-error-text">{{ remain }}</span>
     </div>
     <input accept="*"
            @change="addFile()"
@@ -118,7 +118,7 @@ export default {
   display: flex;
 
   box-shadow: black 0px 8px 15px;
-  background: var(--color-background-two);
+  background: var(--color-sheet-container);
   border-top: 1px solid var(--color-border);
 
   .chat-input {

package/components/chat/chatMsg.vue

@@ -18,7 +18,7 @@
                             'in-line-btm':i===message.list.length-1&&message.list.length>1
                  }">
         <div class="message-text body-1">
-          <div class="message-username subtitle-2" v-if="!isMe">{{ user.name }}
+          <div v-if="!isMe" class="message-username title-3">{{ user.name }}
           </div>
           <div v-if="msg.type==='file'" @click="$helper.download('/'+msg.link)">
             <div class="mx-n2 mt-n1" v-if="isImg(msg.link)">
@@ -32,7 +32,7 @@
             </div>
           </div>
           <div v-html="msg.content"></div>
-          <div class="message-info text-end caption">
+          <div class="message-info text-end label-1">
             {{ msg.timestamp }}
           </div>
         </div>
@@ -170,7 +170,7 @@ export default {
       height: 30px;
       border-radius: 50%;
 
-      background-color: var(--color-background-two);
+      background-color: var(--color-sheet-container);
 
       position: absolute;
       top: -15px;

package/components/chat/index.vue

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

package/components/chip/index.vue

@@ -43,7 +43,7 @@ export default {
         c += ' chip-selectable'
       }
       if (this.modelValue) {
-        c += ' chip-active ps-0 color-one'
+        c += ' chip-active ps-0'
       }
 
       if (this.close) {

package/components/chip/style.scss

@@ -53,16 +53,29 @@ $icon-sizes: (
   transition-duration: $chip-transition-duration;
   transition-timing-function: $chip-transition-fn;
   vertical-align: middle;
-
-
-  border-color: var(--color-divider);
+  border-color: var(--color-border);
 
   &:not(.chip-active) {
-    background: #e0e0e0;
+    background: var(--color-two-container);
+    color: var(--color-on-two-container);
   }
 
   @include states();
 
+  &.chip-disabled {
+    @include disable-states();
+
+    &:not(.chip-text):not(.chip-outlined) {
+      background-color: var(--color-#{map-metro-get($states, 'disabled','state','color')}) !important;
+    }
+
+    &.btn-text, &.btn-outlined {
+      &::before {
+        opacity: 0 !important;
+      }
+    }
+  }
+
   &:before {
     background-color: currentColor;
     bottom: 0;
@@ -108,18 +121,15 @@ $icon-sizes: (
   }
 
   &.chip-active {
+    background-color: var(--color-one);
+    color: var(--color-on-one);
+
     .#{$prefix}icon {
       color: inherit;
       padding: 0 3px;
     }
   }
 
-  &.chip-disabled {
-    opacity: .4;
-    pointer-events: none;
-    user-select: none;
-  }
-
   &.chip-label {
     border-radius: $chip-label-border-radius !important
   }

package/components/codeEditor/index.vue

@@ -2,7 +2,7 @@
   <div :class="`${$r.prefix}code-editor`">
     <div class="code-action text-right">
       <r-btn
-          class="image-copy"
+          class="color-white-text"
           icon
           text
           @click.prevent="$helper.copy($refs.codeView.innerText)"
@@ -10,18 +10,18 @@
         <r-icon v-html="$r.icons.copy"></r-icon>
       </r-btn>
       <r-btn
-          class="image-copy"
+          class="color-white-text"
           icon
           text
           @click.prevent="pretty"
       >
         P
       </r-btn>
-      <r-btn v-if="show === 'code' && runnable" text @click="show = 'run'">
+      <r-btn v-if="show === 'code' && runnable" class="color-white-text" text @click="show = 'run'">
         run
         <r-icon v-html="$r.icons.play" exact></r-icon>
       </r-btn>
-      <r-btn v-if="show === 'run'" text @click="show = 'code'">
+      <r-btn v-if="show === 'run'" class="color-white-text" text @click="show = 'code'">
         <r-icon v-html="$r.icons.code_tags" exact></r-icon>
       </r-btn>
     </div>
@@ -137,6 +137,7 @@ export default {
   background-color: #15212e;
   color: #fff;
   padding: 10px;
+  font-size: 14px;
 
   .code-script,
   .code-template {

package/components/confirm/index.vue

@@ -4,9 +4,9 @@
       <r-container class="container-fluid">
         <r-row>
           <r-col class="col-12 text-center">
-             <h2 class="display-5">
-            {{title||$t('confirm_title','renusify')}}
-          </h2>
+             <h2 class="title-1">
+               {{ title || $t('confirm_title', 'renusify') }}
+             </h2>
             <r-divider class="my-3 color-warning"></r-divider>
           </r-col>
           <r-col class="col-12">

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-divider);
+  border-top: solid thin var(--color-border);
 
   &.divider-inset:not(.divider-vertical) {
     max-width: calc(100% - #{$divider-inset-margin});

package/components/form/checkbox.vue

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

package/components/form/colorPicker/picker.vue

@@ -170,7 +170,8 @@ export default {
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   z-index: 1;
 
-  background: #f7f8f9;
+  background: var(--color-sheet-container-lowest);
+  color: var(--color-on-sheet-container-lowest);
 
   canvas {
     vertical-align: top;
@@ -212,13 +213,13 @@ export default {
 
 
     .name {
-      color: #999;
-      background: #e7e8e9;
+      color: var(--color-on-sheet-container);
+      background: var(--color-sheet-container)
     }
 
     .value {
-      color: #666;
-      background: #eceef0;
+      color: var(--color-on-sheet);
+      background: var(--color-sheet)
     }
   }
 }

package/components/form/datePicker/index.vue

@@ -398,7 +398,7 @@ export default {
     &.selectable:hover {
       .cellContent {
 
-        color: #fff;
+        color: var(--color-on-one);
         background: var(--color-one);
 
       }
@@ -466,9 +466,7 @@ export default {
   }
 
   .cell.disabled {
-
-    opacity: 0.5;
-
+    opacity: 0.38;
   }
 
 }

package/components/form/form.vue

@@ -1,5 +1,5 @@
 <template>
-  <form :class="`${$r.prefix}form`">
+  <form :class="`${$r.prefix}form`" @submit.prevent="submit">
     <slot></slot>
   </form>
 </template>
@@ -18,7 +18,7 @@ export default {
   props: {
     modelValue: Boolean
   },
-  emits:['update:modelValue'],
+  emits: ['update:modelValue', 'submit'],
   data: () => ({
     inputs: [],
     watchers: [],
@@ -26,7 +26,7 @@ export default {
   }),
   watch: {
     errorBag: {
-      handler (val) {
+      handler(val) {
         const errors = Object.values(val).includes(true)
         this.$emit('update:modelValue', !errors)
       },
@@ -36,7 +36,10 @@ export default {
     }
   },
   methods: {
-    watchInput (input) {
+    submit() {
+      this.$emit('submit', true)
+    },
+    watchInput(input) {
       const watcher = input => {
         return input.$watch('hasError', val => {
           this.errorBag[input.uid] = val

package/components/form/group-input.vue

@@ -3,7 +3,7 @@
            :model-value="modelValue"
            hide>
     <div class="w-full">
-      <span v-if="label" class="color-primary-text">{{ label }}</span>
+      <span v-if="label">{{ 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">

package/components/form/input.vue

@@ -66,7 +66,7 @@ export default {
     },
     validateOnBlur: {type: Boolean, default: undefined}
   },
-  emits:['pre-icon','icon','update:modelValue'],
+  emits: ['pre-icon', 'icon', 'update:modelValue'],
   data() {
     return {
       uid: 'input_' + this.$helper.uniqueId(),
@@ -304,32 +304,31 @@ export default {
     }
   }
 
-    &:not(.input-disabled) {
-      input,
-      textarea, .label, .#{$prefix}icon, .#{$prefix}btn {
-        color: var(--color-text-primary)
-      }
-    }
-
-    input::placeholder,
-    textarea::placeholder {
-      color: var(--color-disabled)
+  &:not(.input-disabled) {
+    input,
+    textarea, .label, .#{$prefix}icon, .#{$prefix}btn {
+      color: var(--color-on-sheet)
     }
+  }
 
-    &.input-disabled {
-      * {
-        color: var(--color-disabled)
-      }
-    }
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--color-on-three-container)
+  }
 
-    .input-control {
-      border: solid 1px var(--color-border)
+  &.input-disabled {
+    * {
+      color: var(--color-border)
     }
 
-  &.input-disabled {
     pointer-events: none;
   }
 
+  .input-control {
+    border: solid 1px var(--color-border)
+  }
+
+
   input {
     max-height: 32px
   }
@@ -369,6 +368,7 @@ export default {
     align-items: flex-start;
     justify-content: center;
     position: relative;
+
     .after-icon {
       position: absolute;
       cursor: pointer;
@@ -380,6 +380,7 @@ export default {
       }
 
     }
+
     .pre-icon {
       position: absolute;
       cursor: pointer;
@@ -534,4 +535,4 @@ export default {
 }
 
 
-</style>
+</style>

package/components/form/inputTel/index.vue

@@ -51,10 +51,8 @@ export default {
       type: String
     },
     defaultCountry: {
-      // Default country code, ie: 'AU'
-      // Will override the current country of user
       type: String,
-      default: ''
+      default: 'US'
     },
     tile: {type: Boolean, default: undefined},
     required: Boolean,
@@ -100,37 +98,12 @@ export default {
   },
   methods: {
     initializeCountry() {
-      /**
-       * 1. Use default country if passed from parent
-       */
       if (this.defaultCountry) {
         const defaultCountry = this.findCountry(this.defaultCountry)
         if (defaultCountry) {
           this.activeCountry = defaultCountry
-          return
         }
       }
-      /**
-       * 2. Check if fetching country based on user's IP is allowed, set it as the default country
-       */
-      fetch('http://ip-api.com/json/', {
-        method: 'get'
-      }).then((response) => {
-        const that = this
-        response.json().then(function (data) {
-          that.activeCountry = that.findCountry(data.countryCode) || that.activeCountry
-        })
-      }).catch((error) => {
-        return Promise.reject(error)
-      })
-    },
-    /**
-     * Get the list of countries from the list of iso2 code
-     */
-    getCountries(list = []) {
-      return list
-          .map(countryCode => this.findCountry(countryCode))
-          .filter(Boolean)
     },
     findCountry(iso = '') {
       return allCountries.find(country => country.iso2 === iso)
@@ -166,9 +139,6 @@ export default {
     },
     toggleDropdown() {
       this.open = !this.open
-    },
-    clickedOutside() {
-      this.open = false
     }
   }
 }

package/components/form/json/index.vue

@@ -1,7 +1,7 @@
 <template>
   <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>
+      <r-btn v-if="!disableEditKey" class="me-1 mb-1" icon @click.prevent="modeForm=!modeForm">{}</r-btn>
       <div v-if="label">{{ label }}</div>
     </div>
     <div v-if="modeForm">

package/components/form/radioInput.vue

@@ -12,7 +12,7 @@
                                v-html="$r.icons.check" exact></r-icon>
                    </transition>
             </span>
-      <span class="ms-2 color-primary-text" @click="emit(item)">
+      <span class="ms-2" @click="emit(item)">
                 {{ item[text] }}
             </span>
     </div>