renusify 1.4.7 → 2.0.0

package/components/form/timepicker/timepicker.vue

@@ -1,76 +1,76 @@
 <template>
   <div :class="`${$r.prefix}timepicker-clock`">
-    <div ref="clock" class="clock ltr">
-      <div ref="circle" class="circle" :class="{ 'is-small': isSmall }"></div>
-      <div ref="center" class="center"></div>
-      <div ref="hand" class="clock-item-hand hour"></div>
-
-      <div
-          v-for="(num, i) in nums"
-          :key="i"
-          class="number"
-          :class="['number' + i,{'number-disabled':disableTime(parseInt(i),show,hour,min,sec)}]"
-          ref="number"
-          @click="set(i)"
-      >
-        {{ num }}
+    <transition mode="out-in" name="scale">
+      <div :key="show" ref="clock" class="clock ltr">
+        <div ref="center" class="center"></div>
+        <div ref="hand" :class="{ 'is-small': isSmall }" class="clock-item-hand hour"></div>
+        <div
+            v-for="(num, i) in nums"
+            :key="i"
+            ref="number"
+            :class="['number' + i,{'number-disabled':disableTime(parseInt(i),show,hour,min,sec)}]"
+            class="number"
+            @click="set(i)"
+        >
+          {{ num }}
+        </div>
       </div>
-    </div>
+    </transition>
     <div class="text-meridiem ltr" v-if="!is24Hour">
       <div
-          class="time-meridiem"
-          @click="(meridiem = 'AM'),emit()"
           :class="{ 'meridiem-active': meridiem === 'AM' }"
+          class="time-meridiem overflow-hidden"
+          @click="(meridiem = 'AM'),emit()"
       >
         {{ $t('timepicker_am', 'renusify') }}
       </div>
       <div
-          class="time-meridiem"
-          @click="(meridiem = 'PM'),emit()"
           :class="{ 'meridiem-active': meridiem === 'PM' }"
+          class="time-meridiem overflow-hidden"
+          @click="(meridiem = 'PM'),emit()"
       >
         {{ $t('timepicker_pm', 'renusify') }}
       </div>
     </div>
     <div class="text-time ltr">
       <input
-          @input="emit"
           v-model="hour"
-          placeholder="00"
-          @update:model-value="handle_hour()"
-          @click.prevent.stop="handle_hour(false)"
-          class="time-show"
           :class="{
           'time-active': show === 'hours24'||show==='hours12',
           'time-selected': hour != null
         }"
+          class="time-show"
+          placeholder="00"
+          @input="emit"
+          @update:model-value="handle_hour()"
+          @click.prevent.stop="handle_hour(false)"
       />
       <div class="t-text">:</div>
       <input
-          @input="emit"
           v-model="min"
-          placeholder="00"
-          @update:model-value="handle_min()"
-          @click.prevent.stop="handle_min(false)"
-          class="time-show"
           :class="{
           'time-active': show === 'mins',
           'time-selected': min != null
         }"
+          class="time-show"
+          placeholder="00"
+          @input="emit"
+          @update:model-value="handle_min()"
+          @click.prevent.stop="handle_min(false)"
       />
       <div class="t-text" v-if="withSec">:</div>
       <input
-          @input="emit"
           v-if="withSec"
           v-model="sec"
-          placeholder="00"
-          @update:model-value="handle_sec()"
-          @click.prevent.stop="handle_sec(false)"
-          class="time-show"
           :class="{
           'time-active': show === 'seconds',
           'time-selected': sec != null
         }"
+          class="time-show"
+          placeholder="00"
+          @input="emit"
+          @update:model-value="handle_sec()"
+          @click.prevent.stop="handle_sec(false)"
       />
     </div>
   </div>
@@ -89,16 +89,16 @@ export default {
     is24Hour: Boolean,
     modelValue: String
   },
-  emits:['update:modelValue','finish'],
+  emits: ['update:modelValue', 'finish'],
   data() {
     return {
       show: this.is24Hour ? "hours24" : "hours12",
-      hour: 0,
+      hour: null,
+      delay: 350,
       meridiem: "AM",
-      min: 0,
-      sec: 0,
+      min: null,
+      sec: null,
       isSmall: false,
-      isHand: false,
       hours12: {
         1: "1",
         2: "2",
@@ -267,7 +267,9 @@ export default {
   },
   mounted() {
     this.setup_hour();
-    this.parser(this.modelValue)
+    setTimeout(() => {
+      this.parser(this.modelValue)
+    }, 100)
   },
   computed: {
     nums() {
@@ -286,12 +288,15 @@ export default {
       txt = txt[0].split(':')
       this.hour = parseInt(txt[0])
       this.min = parseInt(txt[1])
+      if (this.withSec) {
+        this.sec = parseInt(txt[2])
+      }
       this.handle_hour(false)
     },
     emit() {
-      let hour = this.hour
-      let min = this.min
-      let sec = this.sec
+      let hour = this.hour || 0
+      let min = this.min || 0
+      let sec = this.sec || 0
       if (hour < 10) {
         hour = '0' + hour;
       }
@@ -308,10 +313,9 @@ export default {
       if (!this.is24Hour) {
         n += " " + this.meridiem;
       }
+
       this.$emit("update:modelValue", n);
-      if ((min !== null && !this.withSec) || sec !== null) {
-        this.$emit("finish", true);
-      }
+      this.$emit("finish", this.min === null ? 'hour' : (this.sec === null ? 'minute' : 'second'));
     },
     handle_hour(next = true) {
       if (this.hour > (this.is24Hour ? 23 : 12)) {
@@ -320,42 +324,45 @@ export default {
 
       this.show = this.is24Hour ? "hours24" : "hours12";
       setTimeout(() => {
+        this.isSmall = false
         this.setup_hour();
         this.hour && this.set(this.hour, next);
-      }, 10);
+      }, this.delay);
     },
     handle_min(next = true) {
       if (this.min > 59) {
         this.min = 59;
       }
       this.show = "mins";
-
+      this.setSmall(this.min)
       setTimeout(() => {
         this.setup_min();
         this.min && this.set(this.min, next);
-      }, 10);
+      }, this.delay);
     },
     handle_sec(next = true) {
       if (this.sec > 59) {
         this.sec = 59;
       }
       this.show = "seconds";
+      this.setSmall(this.sec)
       setTimeout(() => {
         this.setup_min();
         this.sec && this.set(this.sec, next);
-      }, 10);
+      }, this.delay);
     },
 
     set(h, next = true) {
       h = parseInt(h);
-      const circle = this.$refs.circle;
-      const cl = this.$refs["number"][h];
+      let cl = this.$refs["number"][h];
+      if (this.show === "hours12") {
+        cl = this.$refs["number"][h - 1];
+      }
+
       const hand = this.$refs.hand;
       const clock = this.$refs.clock.getBoundingClientRect();
 
       const b = cl.getBoundingClientRect();
-      circle.style.top = parseInt(cl.style.top) + 10 + "px";
-      circle.style.left = parseInt(cl.style.left) + 10 + "px";
 
       let ang = this.angle(
           b.left + 10,
@@ -376,46 +383,62 @@ export default {
       hand.style.transform = "rotate(" + ang + "deg)";
 
       if (this.show === "hours24" && (h === 0 || h >= 13)) {
-        hand.style.height = "60px";
+        hand.style.height = "70px";
       } else {
-        hand.style.height = "100px";
+        hand.style.height = "110px";
       }
 
       if (!next) {
+        if (this.show === "hours24" || this.show === "hours12") {
+          this.hour = h;
+        } else if (this.show === "mins") {
+          this.min = h;
+        }
+        this.emit();
         return
       }
       if (this.show === "hours24") {
-        this.show = "mins";
         this.hour = h;
         setTimeout(() => {
-          this.setup_min();
-        }, 10);
+          this.show = "mins";
+          setTimeout(() => {
+            this.setup_min();
+          }, this.delay);
+        }, this.delay);
       } else if (this.show === "hours12") {
-        this.show = "mins";
-        setTimeout(() => {
-          this.setup_min();
-        }, 10);
         this.hour = h;
+        setTimeout(() => {
+          this.show = "mins";
+          setTimeout(() => {
+            this.setup_min();
+          }, this.delay);
+        }, this.delay);
+
       } else if (this.show === "mins") {
         this.min = h;
-        if ([0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55].includes(h)) {
-          this.isSmall = false;
-          this.isHand = false;
-        } else {
-          this.isSmall = true;
-          this.isHand = true;
-        }
+        this.setSmall(h)
         if (this.withSec) {
-          this.show = "seconds";
           setTimeout(() => {
-            this.setup_min();
-          }, 10);
+            this.show = "seconds";
+            this.isSmall = false;
+            setTimeout(() => {
+              this.setup_min();
+            }, this.delay);
+          }, this.delay);
         }
       } else {
+        this.setSmall(h)
         this.sec = h;
       }
       this.emit();
     },
+    setSmall(h) {
+      if ([0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55].includes(h)) {
+        this.isSmall = false;
+      } else {
+        this.isSmall = true;
+      }
+    },
     angle(p1x, p1y, p2x, p2y, p3x, p3y) {
       let p0c = Math.sqrt(Math.pow(p3x - p1x, 2) + Math.pow(p3y - p1y, 2));
       let p1c = Math.sqrt(Math.pow(p3x - p2x, 2) + Math.pow(p3y - p2y, 2));
@@ -439,14 +462,15 @@ export default {
     setup_hour() {
       let cl = null;
       let po = null;
-      for (let i = 1; i <= 12; i++) {
-        cl = this.$refs["number"][i];
-        po = this.print_point(i, 110);
-        cl.style.left = po[0] - 10 + "px";
-        cl.style.top = po[1] - 10 + "px";
-        cl.classList.add('number-show')
-      }
+
       if (this.is24Hour) {
+        for (let i = 1; i <= 12; i++) {
+          cl = this.$refs["number"][i];
+          po = this.print_point(i, 110);
+          cl.style.left = po[0] - 10 + "px";
+          cl.style.top = po[1] - 10 + "px";
+          cl.classList.add('number-show')
+        }
         for (let i = 13; i <= 23; i++) {
           cl = this.$refs["number"][i];
           po = this.print_point(i, 70);
@@ -459,20 +483,24 @@ export default {
         cl.style.left = po[0] - 10 + "px";
         cl.style.top = po[1] - 10 + "px";
         cl.classList.add('number-show')
+      } else {
+        for (let i = 0; i < 12; i++) {
+          cl = this.$refs["number"][i];
+          po = this.print_point(i + 1, 110);
+          cl.style.left = po[0] - 10 + "px";
+          cl.style.top = po[1] - 10 + "px";
+          cl.classList.add('number-show')
+        }
       }
     },
     setup_min() {
-      const circle = this.$refs.circle;
-      circle.style.left = "130px";
-      circle.style.top = "20px";
-
       const clock = this.$refs.hand;
       clock.style.transform = "rotate(0)";
-      clock.style.height = "100px";
+      clock.style.height = "110px";
 
       let cl = null;
       let po = null;
-      for (let i = 0; i <= 59; i++) {
+      for (let i = 0; i < 60; i++) {
         cl = this.$refs["number"][i];
         po = this.print_point(i, 110, 60);
         cl.style.left = po[0] - 10 + "px";
@@ -491,6 +519,10 @@ export default {
 
   --color-timepicker: var(--color-one);
 
+  * {
+    transition: .15s all ease-in-out !important;
+  }
+
   .text-time {
     display: flex;
     justify-content: center;
@@ -522,8 +554,8 @@ export default {
   }
 
   .meridiem-active {
-    background-color: var(--color-timepicker);
-    color: #fff;
+    background-color: var(--color-three-container);
+    color: var(--color-on-three-container);
   }
 
   .text-meridiem > .time-meridiem {
@@ -585,6 +617,27 @@ export default {
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     transform-origin: bottom;
+
+    &:after {
+      content: "";
+      position: absolute;
+      width: 35px;
+      height: 35px;
+      border-radius: 50%;
+      color: var(--color-timepicker);
+      background-color: var(--color-timepicker);
+      border: 2px solid;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .is-small:after {
+    width: 12px !important;
+    height: 12px !important;
+    border-radius: 50% !important;
+    border: 2px solid;
+    background-color: unset !important;
+    transform: translate(-50%, -90%) !important;
   }
 
   .clock > .clock-item {
@@ -610,20 +663,6 @@ export default {
     border-radius: 50%;
   }
 
-  .clock .circle {
-    position: absolute;
-    z-index: 11;
-    width: 35px;
-    height: 35px;
-    top: 20px;
-    left: 130px;
-    border-radius: 50%;
-    color: var(--color-timepicker);
-    background-color: var(--color-timepicker);
-    border: 2px solid;
-    transform: translate(-50%, -50%);
-  }
-
   .time-active {
     color: var(--color-timepicker);
   }
@@ -642,18 +681,9 @@ export default {
     background-color: var(--color-timepicker);
   }
 
-  .is-small {
-    width: 12px !important;
-    height: 12px !important;
-    border-radius: 50% !important;
-    border: 2px solid;
-    background-color: unset !important;
-    transform: translate(-50%, -50%) !important;
-  }
 
   .number-disabled {
-    pointer-events: none;
-    color: var(--color-disabled)
+    @include disable-states()
   }
 }
 </style>

package/components/form/unit-input.vue

@@ -78,7 +78,7 @@ emits:['update:modelValue'],
 
 .#{$prefix}unit-input {
   .input-shadow, .input-shadow * {
-    color: var(--color-disabled) !important
+    @include disable-states()
   }
 
   input {
@@ -94,7 +94,7 @@ emits:['update:modelValue'],
     overflow-x: clip;
 
     * {
-      font-size: map-metro-get($headings, 'overline', 'size') !important;
+      font-size: map-metro-get($headings, 'label-3', 'size') !important;
     }
 
     .input-control {

package/components/formCreator/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <r-card v-if="!autoSend" class="overflow-auto">
+  <r-card v-if="!autoSend" :class="$r.prefix+'form-creator'" class="overflow-auto">
     <r-container>
-      <h1 v-if="title" class="title">{{ title }}</h1>
+      <h1 v-if="title" class="title-1">{{ title }}</h1>
       <r-form ref="form" v-model="valid" @submit.prevent="save">
         <r-row>
           <template :key="key" v-for="(item,key) in options">
@@ -194,4 +194,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/components/icon/style.scss

@@ -5,10 +5,7 @@
   vertical-align: -.5rem;
 
   &.icon-disabled {
-    pointer-events: none;
-    opacity: .6;
-    color: var(--color-disabled) !important
-
+    @include disable-states();
   }
 
   @include rtl() {

package/components/img/index.vue

@@ -3,7 +3,7 @@
         [$r.prefix+'img']:true,
         'img-hoverZoom':hoverZoom,'img-hoverDark':hoverDark,'img-hoverTitle':hoverTitle}"
        ref="rImg">
-    <div v-if="hoverTitle" class="title color-white-text img-title w-full"
+    <div v-if="hoverTitle" class="title-3 color-white-text img-title w-full"
          :class="{
             'title-hs':titleHs,
             'title-hc':titleHc,
@@ -130,6 +130,8 @@ export default {
             if (p0 && p1) {
               wPH = p0 / p1
             }
+          } else {
+            wPH = 1
           }
         }
       }

package/components/img/svgImg.vue

@@ -28,9 +28,11 @@ export default {
           const el = document.createElement('div')
           el.innerHTML = d
           let svg = el.querySelector('svg')
-          svg.setAttribute('width', that.size.width + 'px')
-          svg.setAttribute('height', that.size.height + 'px')
-          that.replace(svg)
+          if (svg) {
+            svg.setAttribute('width', that.size.width + 'px')
+            svg.setAttribute('height', that.size.height + 'px')
+            that.replace(svg)
+          }
         })
       })
     }

package/components/infinite/div.vue

@@ -20,9 +20,9 @@
                 </div>
 
             </r-col>
-            <r-col class="col-12 text-center title"
+            <r-col class="col-12 text-center title-1"
                    v-if="noItem"
-            >{{$t('no_item','renusify')}}
+            >{{ $t('no_item', 'renusify') }}
             </r-col>
         </r-row>
     </r-container>

package/components/infinite/index.vue

@@ -3,7 +3,7 @@
         <r-container full-width class="pa-0">
             <r-row class="v-center h-space-between" :class="color">
                 <r-col class="col-auto">
-                    <h3 class="title px-2">{{ title }}</h3>
+                    <h3 class="title-1 px-2">{{ title }}</h3>
                 </r-col>
                 <r-col class="col-auto">
                     <r-switch-input

package/components/infinite/page.vue

@@ -7,9 +7,9 @@
                          v-show="loading"
 
         ></r-progress-line>
-        <div class="text-center subtitle-1"
+        <div class="text-center title-2"
              v-if="noItem"
-        >{{noItemMsg}}
+        >{{ noItemMsg }}
         </div>
     </div>
 </template>

package/components/list/index.vue

@@ -2,7 +2,7 @@
     <div :class="classes">
       <div
           class="list-item h-space-between"
-          :class="{'list-item-active color-one-text':$helper.searchArray(list,text,item_value[text])!==false}"
+          :class="{'list-item-active':$helper.searchArray(list,text,item_value[text])!==false}"
           :key="item_key"
           @click.prevent="handle(item_value)"
           v-for="(item_value,item_key) in genItems"
@@ -52,7 +52,7 @@ export default {
                 return []
             },
             classes() {
-              let c = `${this.$r.prefix}list sheet sheet-tile`
+              let c = `${this.$r.prefix}list`
                 if (this.disabled) {
                     c += ' list-disabled'
                 }

package/components/list/style.scss

@@ -12,15 +12,19 @@ $item-height: 48px;
   max-width: 100%;
 
   .list-item {
-    &.list-item-active {
-      background-color: var(--color-sheet-active)
-      }
+    &:hover {
+      background-color: var(--color-sheet-container);
+      color: var(--color-on-sheet-container);
+    }
 
-      &:hover {
-        background-color: var(--color-sheet-hover)
-      }
+    &.list-item-active {
+      background-color: var(--color-one-container);
+      color: var(--color-on-one-container)
     }
 
+
+  }
+
   &.list-subheader {
     align-items: center;
     display: flex;

package/components/map/index.vue

@@ -25,7 +25,7 @@
     <r-btn
         v-if="meLocation"
         :loading="loading"
-        class="map-location color-white color-primary-text"
+        class="map-location color-white color-black-text"
         icon
         @click.prevent="showConfirm"
     >

package/components/map/route.vue

@@ -8,7 +8,7 @@
       <r-col :style="'height: '+height" class="overflow-y-auto col-12 sm-3">
         <div class="pa-2">
           <slot :distance="distance" :time="time" name="header">
-            <div class="title">{{ $helper.ifHas(modelValue, '------', 'summary', 'name') }}</div>
+            <div class="bodey-1">{{ $helper.ifHas(modelValue, '------', 'summary', 'name') }}</div>
             <r-divider class="my-3"></r-divider>
             <div>{{ time || '---' }}</div>
             <div>{{ distance || '0 km' }}</div>
@@ -18,7 +18,7 @@
               <div v-for="(point,i) in points"
                    :key="i" class="route-point px-2 py-1 my-2 br-lg text-end">
                 <div class="d-flex">
-                  <span class="mt-1 title">{{ pos(points_keys.indexOf(i)) }}</span>
+                  <span class="mt-1 bodey-3">{{ pos(points_keys.indexOf(i)) }}</span>
                   <r-spacer></r-spacer>
                   <r-btn v-if="editable && i!==points_keys[0]" icon text
                          @click.prevent="to(points_keys.indexOf(i),points_keys.indexOf(i)-1)">

package/components/menu/index.vue

@@ -157,7 +157,7 @@ export default {
       border: 1px solid var(--color-border);
 
       &-item:hover {
-        background-color: var(--color-sheet-hover);
+        background-color: var(--color-sheet-container-high);
       }
     }
 

package/components/notify/notification.vue

@@ -5,8 +5,8 @@
         <div v-if="show" :class="[status, 'notify-msg']" :style="{ width: width }">
             <slot>
               <div>
-                <h3 class="title"><b>{{ content.title }}</b></h3>
-                <p class="subtitle-1 ma-0">{{ content.text }}</p>
+                <h3 class="title-1"><b>{{ content.title }}</b></h3>
+                <p class="title-2 ma-0">{{ content.text }}</p>
               </div>
             </slot>
           <r-btn class="h-end" icon text @click.prevent.stop="hideMe">