renusify 2.0.0 → 2.0.2

package/components/form/colorPicker/index.vue

@@ -1,14 +1,14 @@
 <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>
-    <r-modal v-model="open" maxWidth="260px" :closebtn="false" closable>
+    <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">
-        <r-btn class="color-success flex-grow-1 me-1" @click.prevent="close()">
+        <r-btn class="color-success flex-grow-1 me-1" outlined @click.prevent="close()">
           <r-icon v-html="$r.icons.check" exact></r-icon>
         </r-btn>
-        <r-btn class=" color-error flex-grow-1 ms-1" @click.prevent="clear()" exact>
+        <r-btn class=" color-error flex-grow-1 ms-1" exact outlined @click.prevent="clear()">
           <r-icon v-html="$r.icons.delete"></r-icon>
         </r-btn>
       </div>
@@ -62,5 +62,10 @@ export default {
     cursor: pointer;
     border: 1px solid black;
   }
+
+  .color-picker-modal {
+    background-color: var(--color-sheet-container-high);
+    color: var(--color-on-sheet);
+  }
 }
 </style>

package/components/form/colorPicker/picker.vue

@@ -170,9 +170,6 @@ export default {
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   z-index: 1;
 
-  background: var(--color-sheet-container-lowest);
-  color: var(--color-on-sheet-container-lowest);
-
   canvas {
     vertical-align: top;
   }
@@ -213,12 +210,10 @@ export default {
 
 
     .name {
-      color: var(--color-on-sheet-container);
       background: var(--color-sheet-container)
     }
 
     .value {
-      color: var(--color-on-sheet);
       background: var(--color-sheet)
     }
   }

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>
@@ -375,7 +375,8 @@ export default {
   position: relative;
   display: inline-block;
   font-size: 10px;
-  color: #303030;
+  color: var(--color-on-sheet);
+  background-color: var(--color-sheet-container-high);
 
   .cell {
     &.today {
@@ -388,8 +389,7 @@ export default {
 
     &.selected {
       .cellContent {
-
-        color: #fff;
+        color: var(--color-on-one);
         background: var(--color-one);
 
       }
@@ -439,7 +439,7 @@ export default {
 
     font-size: 1.3em;
     font-weight: normal;
-    color: #848484;
+    color: var(--color-on-sheet-low);
 
   }
 
@@ -456,7 +456,7 @@ export default {
   }
 
   .cell.outOfRange {
-    color: #c7c7c7;
+    color: var(--color-sheet-low);
   }
 
   .cell.selectable {

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

@@ -306,26 +306,33 @@ export default {
 
   &:not(.input-disabled) {
     input,
-    textarea, .label, .#{$prefix}icon, .#{$prefix}btn {
+    textarea {
       color: var(--color-on-sheet)
     }
   }
 
+  &:not(.input-disabled) {
+    .label, .#{$prefix}icon, .#{$prefix}btn {
+      color: var(--color-on-sheet-low)
+    }
+  }
+
   input::placeholder,
   textarea::placeholder {
-    color: var(--color-on-three-container)
+    color: var(--color-on-sheet-low)
   }
 
   &.input-disabled {
+    opacity: 0.38;
+    pointer-events: none;
+
     * {
-      color: var(--color-border)
+      color: var(--color-on-sheet)
     }
 
-    pointer-events: none;
-  }
-
-  .input-control {
-    border: solid 1px var(--color-border)
+    .input-control {
+      background-color: var(--color-sheet-container);
+    }
   }
 
 
@@ -368,6 +375,8 @@ export default {
     align-items: flex-start;
     justify-content: center;
     position: relative;
+    border: solid 1px var(--color-sheet-low);
+    background-color: var(--color-sheet-container);
 
     .after-icon {
       position: absolute;
@@ -410,6 +419,7 @@ export default {
       border: unset !important;
       height: auto;
       padding: 0;
+      background-color: unset !important;
     }
   }
 

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>
@@ -155,7 +155,7 @@ export default {
 
   .btn-country {
     width: 120px;
-    border-color: var(--color-border)
+    border-color: var(--color-sheet-low)
 
   }
 

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>
@@ -87,10 +87,10 @@ export default {
 
 .#{$prefix}json-view {
   @include rtl() {
-    border-right: 1px solid var(--color-border);
+    border-right: 1px solid var(--color-sheet-low);
   }
   @include ltr() {
-    border-left: 1px solid var(--color-border);
+    border-left: 1px solid var(--color-sheet-low);
   }
 }
 </style>

package/components/form/json/index.vue

@@ -210,7 +210,7 @@ export default {
 .#{$prefix}json-input {
   textarea {
     outline: none;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-sheet-low);
   }
 
   .state-error {
@@ -236,9 +236,9 @@ export default {
 
     textarea {
       &::selection {
-        background-color: var(--color-two);
-        -webkit-text-fill-color: var(--color-two-text);
-        color: var(--color-two-text);
+        background-color: var(--color-one);
+        -webkit-text-fill-color: var(--color-one-text);
+        color: var(--color-one-text);
       }
 
       padding: 12px;

package/components/form/radioInput.vue

@@ -6,13 +6,13 @@
             <span class="radio-input-item" :class="{
                    'br-circle':rounded,
                    'radio-input-select':current===item.value
-               }" @click="emit(item)">
+               }" @click.prevent="emit(item)">
                    <transition name="scale">
                        <r-icon v-if="current===item.value" class="color-white-text"
                                v-html="$r.icons.check" exact></r-icon>
                    </transition>
             </span>
-      <span class="ms-2" @click="emit(item)">
+      <span class="ms-2" @click.prevent="emit(item)">
                 {{ item[text] }}
             </span>
     </div>
@@ -74,7 +74,7 @@ export default {
   cursor: pointer;
 
   .radio-input-item {
-    border: 1px solid var(--color-border)
+    border: 1px solid var(--color-on-sheet-low)
   }
 
   .#{$prefix}icon {

package/components/form/range.vue

@@ -252,7 +252,7 @@ export default {
         @include ltr() {
           transform: translate(-2px, -2px);
         }
-        border: 3px solid var(--color-two) !important;
+        border: 3px solid var(--color-one) !important;
       }
     }
 
@@ -315,7 +315,7 @@ export default {
         @include ltr {
           transform: translate(-2px, -2px);
         }
-        border: 3px solid var(--color-two) !important;
+        border: 3px solid var(--color-one) !important;
       }
     }
 

package/components/form/rating.vue

@@ -2,7 +2,7 @@
   <div :class="`${$r.prefix}rating size-${size} ms-n1`">
     <r-btn :key="i" :class="`${Math.round(modelValue)>=i?'color-rating':''}`"
            :readonly="readonly"
-           @click="select(i)"
+           @click.prevent="select(i)"
            icon
            text
            v-for="i in count">
@@ -59,7 +59,7 @@ $btn-sizes: (
   transition: 1s $primary-transition;
 
   * {
-    color: var(--color-border);
+    color: var(--color-on-sheet-low);
   }
 
   .color-rating * {

package/components/form/switch.vue

@@ -4,9 +4,9 @@
             <div class="switch-label me-1 mt-1"
             >{{label}}
             </div>
-            <div class="switch-holder" @click="toggle()">
-                <div class="switch-line"></div>
-                <div class="switch-dot"></div>
+            <div class="switch-holder" @click.prevent="toggle()">
+              <div class="switch-line"></div>
+              <div class="switch-dot"></div>
             </div>
             <div class="switch-label ms-1 mt-1"
                  v-if="label2">{{label2}}</div>