renusify 1.4.7 → 2.0.0

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>

package/components/form/rating.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="`${$r.prefix}rating size-${size} ms-n1`">
-    <r-btn :class="`${Math.round(modelValue)>=i?'color-warning-text':''}`" :key="i"
+    <r-btn :key="i" :class="`${Math.round(modelValue)>=i?'color-rating':''}`"
            :readonly="readonly"
            @click="select(i)"
            icon
@@ -30,14 +30,14 @@ export default {
     modelValue: Number,
     readonly: Boolean
   },
-  emits:['update:modelValue'],
-  created(){
-    if(!this.$r.icons.star) {
+  emits: ['update:modelValue'],
+  created() {
+    if (!this.$r.icons.star) {
       this.$r.icons.star = '<svg xmlns="http://www.w3.org/2000/svg"   preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21L12 17.27Z"/></svg>'
     }
   },
   methods: {
-    select (n) {
+    select(n) {
       this.$emit('update:modelValue', n)
     }
   }
@@ -57,7 +57,14 @@ $btn-sizes: (
   max-width: 100%;
   white-space: nowrap;
   transition: 1s $primary-transition;
-  color: var(--color-disabled);
+
+  * {
+    color: var(--color-border);
+  }
+
+  .color-rating * {
+    color: #fbc02d !important;
+  }
 
   @each $name, $size in $btn-sizes {
     &.size-#{$name} {

package/components/form/select.vue

@@ -11,14 +11,14 @@
         'flex-nowrap':!multiple
       }">
         <r-chip
-            class="my-0 ms-0 color-primary-text"
-            :close="multiple&&!textChip"
+            v-for="(item,key) in chips"
             :key="key"
-            :text="textChip || !multiple"
             :class="{'px-0':!multiple}"
-            @update:modelValue="handleChip($event,key)"
+            :close="multiple&&!textChip"
+            :text="textChip || !multiple"
+            class="my-0 ms-0"
             selectable
-            v-for="(item,key) in chips">
+            @update:modelValue="handleChip($event,key)">
           {{ item ? item[text] : '' }}
         </r-chip>
         <span>
@@ -103,7 +103,7 @@ export default {
     firstSelect: Boolean,
     headers: Object
   },
-  emits:['update:modelValue','del'],
+  emits: ['update:modelValue', 'del'],
   data() {
     return {
       apiData: [],
@@ -220,12 +220,14 @@ export default {
       } else {
         this.handleClick()
       }
-
     },
     handleClick() {
       if (this.$refs.input) {
         this.$refs.input.focus()
-        this.$refs.input.scrollIntoView()
+        this.$refs.select.scrollIntoView({
+          block: "start",
+          behavior: "smooth"
+        })
       } else {
         this.focusInput(true)
       }
@@ -309,9 +311,12 @@ export default {
 </script>
 <style lang="scss">
 @import "../../style/include";
-$min-height:40px;
+
+$min-height: 40px;
 .#{$prefix}select-container {
   position: relative;
+  scroll-margin: $min-height;
+
   .input-control {
     min-height: $min-height;
     height: auto;
@@ -353,7 +358,8 @@ $min-height:40px;
     left: 0;
     z-index: map_get($z-index, 'default');
   }
-  .to-top{
+
+  .to-top {
     bottom: $min-height+2px;
   }
 
@@ -364,4 +370,4 @@ $min-height:40px;
   }
 }
 
-</style>
+</style>

package/components/form/switch.vue

@@ -2,9 +2,6 @@
     <r-input :class="`${$r.prefix}switch`" :modelValue="lazyValue" hide>
         <div class="switch-container" :class="{'switch-active':modelValue}">
             <div class="switch-label me-1 mt-1"
-                 :class="{
-                'color-primary-text':label2?modelValue:!modelValue
-            }"
             >{{label}}
             </div>
             <div class="switch-holder" @click="toggle()">
@@ -12,9 +9,6 @@
                 <div class="switch-dot"></div>
             </div>
             <div class="switch-label ms-1 mt-1"
-                 :class="{
-                'color-primary-text':label2?!modelValue:modelValue
-            }"
                  v-if="label2">{{label2}}</div>
         </div>
     </r-input>
@@ -87,7 +81,7 @@ emits:['update:modelValue','change'],
     width: 100%;
     height: 100%;
     border-radius: 10px;
-    background-color: var(--color-disabled);
+    background-color: var(--color-sheet-container);
   }
 
   .switch-dot {

package/components/form/text-editor/index.vue

@@ -41,9 +41,8 @@
                                 @update:model-value="addClass"></r-select-input>
             </r-col>
             <r-col class="col-12 ltr">
-                <span class="cursor-pointer" v-for="(item,i) in currentPath" :key="i" @click="borderd(item)">
-                    <span class="color-disabled-text" v-if="i===currentPath.length-1">{{item.nodeName}} </span>
-                    <span :class="{'color-error-text':selectElm===item}" v-else>{{item.nodeName}} > </span>
+                <span v-for="(item,i) in currentPath" :key="i" class="cursor-pointer" @click.prevent="borderd(item)">
+                    <span :class="{'color-one-text':selectElm===item}">{{ item.nodeName }} > </span>
                 </span>
             </r-col>
             <r-col class="col-12">
@@ -259,16 +258,19 @@ export default {
                   items: [{text: 'HI', value: 'display-1'},
                     {text: 'HI', value: 'display-2'},
                     {text: 'HI', value: 'display-3'},
-                    {text: 'HI', value: 'display-4'},
-                    {text: 'HI', value: 'display-5'},
-                    {text: 'HI', value: 'title'},
-                    {text: 'HI', value: 'subtitle-1'},
-                    {text: 'HI', value: 'subtitle-2'},
-                    {text: 'HI', value: 'overline'},
+                    {text: 'HI', value: 'headline-1'},
+                    {text: 'HI', value: 'headline-2'},
+                    {text: 'HI', value: 'headline-3'},
+                    {text: 'HI', value: 'title-1'},
+                    {text: 'HI', value: 'title-2'},
+                    {text: 'HI', value: 'title-3'},
+                    {text: 'HI', value: 'body-1'},
                     {text: 'HI', value: 'body-2'},
-                            {text: 'HI', value: 'body-1'},
-                            {text: 'HI', value: 'caption'},
-                        ]
+                    {text: 'HI', value: 'body-3'},
+                    {text: 'HI', value: 'label-1'},
+                    {text: 'HI', value: 'label-2'},
+                    {text: 'HI', value: 'label-3'},
+                  ]
                     },
                     'header': {
                       icon: '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M3 4h2v6h4V4h2v14H9v-6H5v6H3V4m10 4h2.31l.32-3h2l-.32 3h2l.32-3h2l-.32 3H23v2h-1.9l-.2 2H23v2h-2.31l-.32 3h-2l.32-3h-2l-.32 3h-2l.32-3H13v-2h1.9l.2-2H13V8m4.1 2l-.2 2h2l.2-2h-2Z"/></svg>',
@@ -284,8 +286,6 @@ export default {
                     'color': {
                       icon: '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M19 11.5s-2 2.17-2 3.5a2 2 0 0 0 2 2a2 2 0 0 0 2-2c0-1.33-2-3.5-2-3.5M5.21 10L10 5.21L14.79 10m1.77-1.06L7.62 0L6.21 1.41l2.38 2.38l-5.15 5.15c-.59.56-.59 1.53 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.59.59-1.56 0-2.12Z"/></svg>',
                       items: [
-                        {text: 'color', value: 'color-primary-text'},
-                        {text: 'color', value: 'color-secondary-text'},
                         {text: 'color', value: 'color-disabled-text'},
                         {text: 'color', value: 'color-one-text'},
                         {text: 'color', value: 'color-two-text'},
@@ -370,7 +370,7 @@ export default {
               return
             }
             this.selectElm = el
-                el.style.border = '1px solid red'
+            el.style.border = '1px solid var(--color-one)'
             },
             bordered() {
                 const a = this.getSelection()

package/components/form/text-editor/style.scss

@@ -3,14 +3,14 @@
 .#{$prefix}text-editor {
 
 
-    .editor-content {
-      border: 1px solid var(--color-border);
-    }
+  .editor-content {
+    border: 1px solid var(--color-border);
+  }
 
-  @include typography($headings, 'body-1');
+  @include typography($headings, 'body-2');
 
   a {
-    color: var(--color-link)
+    color: var(--color-one)
   }
 
   img {
@@ -18,7 +18,7 @@
   }
 
   .editor-content {
-    color: var(--color-text-primary);
+    color: var(--color-on-sheet);
     transition: all .3s ease;
     min-height: 200px;
     max-height: 60vh;

package/components/form/timepicker/index.vue

@@ -22,7 +22,7 @@
         :closebtn="false"
         :no-overlay="noOverlay"
     >
-      <r-card class="pt-3">
+      <r-card class="pt-3 pb-1">
         <timepicker
             class="mb-2 mx-3"
             :disableTime="disableTime"
@@ -30,7 +30,7 @@
             :withSec="withSec"
             v-model="lazyValue"
         ></timepicker>
-        <div class="my-3 d-flex h-space-between">
+        <div class="my-3 d-flex h-space-between px-3">
           <r-btn
               class="color-success-text"
               outlined
@@ -70,7 +70,7 @@ export default {
     noOverlay: Boolean,
     modelValue: String
   },
-  emits:['update:modelValue'],
+  emits: ['update:modelValue'],
   data() {
     return {
       active: false,