renusify 1.4.7 → 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/codeEditor/mixin.js

@@ -6,7 +6,7 @@ export default {
             }
             text = text.trim()
             text = text.replace(/ +(?= )/g, '');
-            text = text.replace(/[\r|\n|\t]/g, '');
+            text = text.replace(/[\r\n\t]/g, '');
             let r = ''
             text = text.split('<')
             let numopen = 0
@@ -22,7 +22,7 @@ export default {
                     }
                 }
             })
-            r = r.replace(/<([^/].*)>+[\r|\n|\t]+<\//g, '<$1></');
+            r = r.replace(/<([^/].*)>+[\r\n\t]+<\//g, '<$1></');
             return r
         },
         pretty_js(text) {
@@ -31,8 +31,8 @@ export default {
             }
             text = text.trim()
             text = text.replace(/ +(?= )/g, '');
-            text = text.replace(/[\r|\n|\t]/g, '');
-            text = text.replace(/([,|;|{|(|\[])+[\s]/g, '$1');
+            text = text.replace(/[\r\n\t]/g, '');
+            text = text.replace(/([,;{(\[])+[\s]/g, '$1');
             let r = ''
             text = text.split('')
             let numopen = 0
@@ -176,7 +176,7 @@ export default {
 
 
             //function like $r $d()
-            regex = /(\$([a-zA-z0-9]*)[.|(])/g;
+            regex = /(\$([a-zA-z0-9]*)[.(])/g;
             res = res.replace(regex, '<span class="color-func code-editor-span">$1</span>')
 
 

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/address.vue

@@ -8,6 +8,7 @@
       :searchLink="`https://codenus.com/api/apps/address?lang=${$r.lang}`"
       :rules="required?['required']:[]"
       :headers="{'Authorization':''}"
+      :readonly="readonly"
       :tile="tile">
   </r-select-input>
   <r-select-input :label="$t('state','renusify')"
@@ -20,6 +21,7 @@
                   :rules="required?['required']:[]"
                   value="id"
                   :headers="{'Authorization':''}"
+                  :readonly="readonly"
                   :tile="tile">
 
   </r-select-input>
@@ -33,6 +35,7 @@
                   :rules="required?['required']:[]"
                   value="id"
                   :headers="{'Authorization':''}"
+                  :readonly="readonly"
                   :tile="tile">
 
   </r-select-input>
@@ -40,11 +43,13 @@
                 :label="$t('zip_code','renusify')"
                 v-model="zip_code"
                 :tile="tile"
+                :readonly="readonly"
                 :rules="required?['required']:[]"></r-text-input>
   <r-text-area v-if="!hideStreet" @update:model-value="emit(false,false)"
                :label="$t('street','renusify')"
                v-model="street"
                :tile="tile"
+               :readonly="readonly"
                :rules="required?['required']:[]"></r-text-area>
 </template>
 <script>
@@ -59,6 +64,7 @@ export default {
     hideCity: Boolean,
     hideZipCode: Boolean,
     hideStreet: Boolean,
+    readonly: Boolean,
     tile: {type: Boolean, default: undefined},
     defaultCountry: Object,
     modelValue: Object

package/components/form/address_ir.vue

@@ -1,28 +1,28 @@
 <template>
-  <r-select-input :label="$t('state','renusify')"
-            v-model="state"
-            @update:model-value="emit"
-            :items="Object.keys(states)"
-            :rules="required?['required']:[]"
-            :tile="tile"
-            justValue>
+  <r-select-input v-model="state"
+                  :items="Object.keys(states)"
+                  :label="$t('state','renusify')"
+                  :rules="required?['required']:[]"
+                  :tile="tile"
+                  justValue
+                  @update:model-value="emit">
 
   </r-select-input>
   <r-select-input v-if="state"
-            @update:model-value="emit"
-            :label="$t('city','renusify')"
-            v-model="city"
-            :items="states[state]"
-            :rules="required?['required']:[]"
-            :tile="tile"
-            justValue>
+                  v-model="city"
+                  :items="states[state]"
+                  :label="$t('city','renusify')"
+                  :rules="required?['required']:[]"
+                  :tile="tile"
+                  justValue
+                  @update:model-value="emit">
 
   </r-select-input>
-  <r-text-area v-if="city && !hideAddress" @update:model-value="emit"
+  <r-text-area v-if="city && !hideAddress" v-model="address"
                :label="$t('address','renusify')"
-               v-model="address"
+               :rules="required?['required']:[]"
                :tile="tile"
-               :rules="required?['required']:[]"></r-text-area>
+               @update:model-value="emit"></r-text-area>
 </template>
 <script>
 

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">