renusify 1.4.8 → 2.0.1

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,38 @@ export default {
     }
   }
 
-    &:not(.input-disabled) {
-      input,
-      textarea, .label, .#{$prefix}icon, .#{$prefix}btn {
-        color: var(--color-text-primary)
-      }
+  &:not(.input-disabled) {
+    input,
+    textarea {
+      color: var(--color-on-sheet)
     }
+  }
 
-    input::placeholder,
-    textarea::placeholder {
-      color: var(--color-disabled)
+  &:not(.input-disabled) {
+    .label, .#{$prefix}icon, .#{$prefix}btn {
+      color: var(--color-on-sheet-low)
     }
+  }
 
-    &.input-disabled {
-      * {
-        color: var(--color-disabled)
-      }
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--color-on-sheet-low)
+  }
+
+  &.input-disabled {
+    opacity: 0.38;
+    pointer-events: none;
+
+    * {
+      color: var(--color-on-sheet)
     }
 
     .input-control {
-      border: solid 1px var(--color-border)
+      background-color: var(--color-sheet-container);
     }
-
-  &.input-disabled {
-    pointer-events: none;
   }
 
+
   input {
     max-height: 32px
   }
@@ -369,6 +375,9 @@ export default {
     align-items: flex-start;
     justify-content: center;
     position: relative;
+    border: solid 1px var(--color-sheet-low);
+    background-color: var(--color-sheet-container-highest);
+
     .after-icon {
       position: absolute;
       cursor: pointer;
@@ -380,6 +389,7 @@ export default {
       }
 
     }
+
     .pre-icon {
       position: absolute;
       cursor: pointer;
@@ -409,6 +419,7 @@ export default {
       border: unset !important;
       height: auto;
       padding: 0;
+      background-color: unset !important;
     }
   }
 
@@ -534,4 +545,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
     }
   }
 }
@@ -185,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

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

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

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

@@ -57,7 +57,10 @@ $btn-sizes: (
   max-width: 100%;
   white-space: nowrap;
   transition: 1s $primary-transition;
-  color: var(--color-disabled);
+
+  * {
+    color: var(--color-on-sheet-low);
+  }
 
   .color-rating * {
     color: #fbc02d !important;

package/components/form/select.vue

@@ -16,7 +16,7 @@
             :class="{'px-0':!multiple}"
             :close="multiple&&!textChip"
             :text="textChip || !multiple"
-            class="my-0 ms-0 color-primary-text"
+            class="my-0 ms-0"
             selectable
             @update:modelValue="handleChip($event,key)">
           {{ item ? item[text] : '' }}

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-sheet-low);
+  }
 
-  @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

@@ -94,6 +94,8 @@ export default {
 <style lang="scss">
 .modal-timepicker {
   .modal-mini {
+    background-color: var(--color-sheet-container-high);
+    color: var(--color-on-sheet);
     max-width: 285px !important;
   }
 }

package/components/form/timepicker/timepicker.vue

@@ -554,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 {
@@ -683,8 +683,7 @@ export default {
 
 
   .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 {
@@ -86,7 +86,7 @@ emits:['update:modelValue'],
   }
 
 
-  --c-unit: var(--color-border);
+  --c-unit: var(--color-sheet-low);
 
 
   .select-unit {
@@ -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="$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">

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,

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

@@ -11,16 +11,6 @@ $item-height: 48px;
   position: relative;
   max-width: 100%;
 
-  .list-item {
-    &.list-item-active {
-      background-color: var(--color-sheet-active)
-      }
-
-      &:hover {
-        background-color: var(--color-sheet-hover)
-      }
-    }
-
   &.list-subheader {
     align-items: center;
     display: flex;
@@ -45,12 +35,16 @@ $item-height: 48px;
     position: relative;
     text-decoration: none;
     margin-bottom: 4px;
-
     &:hover {
       cursor: pointer;
+      background-color: var(--color-sheet-container);
+      color: var(--color-on-sheet);
     }
 
     &.list-item-active {
+      background-color: var(--color-one-container);
+      color: var(--color-on-one-container);
+
       .#{$prefix}icon {
         color: inherit;
       }

package/components/map/index.vue

@@ -9,7 +9,7 @@
       <r-search-box
           :label="$t('search','renusify')"
           :notFoundMsg="$t('map_not_found','renusify')"
-          inputClass="sheet"
+          inputControlClass="sheet"
           no-overlay
           query="q"
           url="https://nominatim.openstreetmap.org/search.php?polygon_geojson=0&accept-language=fa&countrycodes=IR&format=jsonv2"
@@ -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"
     >