renusify 1.0.5 → 1.0.8

package/components/form/fileUploader/single.vue

@@ -1,209 +1,208 @@
 <template>
-    <div ref="uploader" class="image-card elevation-lg br-md">
-        <div class="file-holder text-center">
-            <div class="image-canvas" v-if="file||modelValue">
-                <r-btn icon class="image-close color-white">
-                    <r-icon @click.prevent="fileDelete()" class="color-error-text" v-html="$r.icons.delete"></r-icon>
-                </r-btn>
-                <r-progress-circular
-                        :indeterminate=false
-                        :modelValue="uploadPercentage"
-                        :width="2"
-                        class="image-progress"
-                        size="50"
-                >
-                    {{ `% ${uploadPercentage}` }}
-                </r-progress-circular>
-                <r-btn @click.prevent="$helper.copy(fileLink)" class="image-copy" icon>
-                    <r-icon v-html="$r.icons.copy"></r-icon>
-                </r-btn>
-                <img v-if="isImg()" :class="`image ${imageStatus} `" :src="getUrl(file)">
-                <r-icon v-else
-                        class="file" width="100" height="100" v-html="$r.icons.file" :class="{'color-one-text':uploadPercentage===100}"
-                ></r-icon>
-            </div>
-            <div class="file-meta pa-1" v-if="meta && uploadPercentage===100">
-                <r-text-input :label="$t(m,'renusify')" v-model="metaList[m]" @update:model-value="emit"
-                              v-for="(m,k) in meta" :key="k"
-                              :rules="['required']"></r-text-input>
-            </div>
-        </div>
-        <r-icon @click.prevent.stop="pickFile"
-                class="cursor-pointer w-full h-full d-flex h-center v-center color-one-text" width="100" height="100"
-                v-html="$r.icons.plus"
-                v-if="showAdd"></r-icon>
-        <input :accept="accept"
-               @change="addFile()"
-               ref="file"
-               style="display: none"
-               type="file"
-               v-if="showFile"
+  <div ref="uploader" class="image-card elevation-lg br-md">
+    <div class="file-holder text-center">
+      <div class="image-canvas" v-if="file||modelValue">
+        <r-btn icon class="image-close color-white">
+          <r-icon @click.prevent="fileDelete()" class="color-error-text" v-html="$r.icons.delete"></r-icon>
+        </r-btn>
+        <r-progress-circular
+            :indeterminate=false
+            :modelValue="uploadPercentage"
+            :width="2"
+            class="image-progress"
+            size="50"
         >
+          {{ `% ${uploadPercentage}` }}
+        </r-progress-circular>
+        <r-btn @click.prevent="$helper.copy(fileLink)" class="image-copy" icon>
+          <r-icon v-html="$r.icons.copy"></r-icon>
+        </r-btn>
+        <img v-if="isImg()" :class="`image ${imageStatus} `" :src="getUrl(file)">
+        <r-icon v-else
+                class="file" width="100" height="100" v-html="$r.icons.file"
+                :class="{'color-one-text':uploadPercentage===100}"
+        ></r-icon>
+      </div>
+      <div class="file-meta pa-1" v-if="meta && uploadPercentage===100">
+        <r-text-input :label="$t(m,'renusify')" v-model="metaList[m]" @update:model-value="emit"
+                      v-for="(m,k) in meta" :key="k"
+                      :rules="['required']"></r-text-input>
+      </div>
     </div>
+    <r-icon @click.prevent.stop="pickFile"
+            class="cursor-pointer w-full h-full d-flex h-center v-center color-one-text" width="100" height="100"
+            v-html="$r.icons.plus"
+            v-if="showAdd"></r-icon>
+    <input :accept="accept"
+           @change="addFile()"
+           ref="file"
+           style="display: none"
+           type="file"
+           v-if="showFile"
+    >
+  </div>
 </template>
 
 <script>
-    import file from "./file";
-
-    export default {
-        name: 'inputFile',
-        mixins: [file],
-        props: {
-            accept: {
-                default: '*',
-                type: String
-            },
-            wPH: [Number, String, Array],
-            maxFileSize: Number,
-            uploadLink: {
-                type: String,
-                required: true
-            },
-            modelValue: {
-                default: null,
-                type: [String, Object]
-            },
-            meta: {
-                type: Array,
-                default: null
-            }
-        },
-        data() {
-            return {
-                showAdd: true,
-                showFile: true,
-                metaList: {}
-            }
-        },
-        created() {
-            this.setValue()
-        },
-        methods: {
-            setValue() {
-                if (this.modelValue) {
-                    this.fileLink = this.meta ? this.modelValue['url'] : this.modelValue
-                    this.metaList = this.meta ? this.modelValue['meta'] : {}
-                    this.showAdd = false
-                    this.imageStatus = 'finished'
-                    this.uploadPercentage = 100
-                  this.emit()
-                }
-            },
-            getUrl(value) {
-                if (this.modelValue) {
-                  return '/' + this.fileLink
-                } else {
-                    return URL.createObjectURL(value)
-                }
-            },
-            isImg() {
-                let is = false
-                let image = this.accept.split('/')
-                is = image[0] === 'image'
-                if (!is) {
-                    const p = this.fileLink.split('.')
-                    is = ['jpg', 'jpeg', 'png', 'gif'].includes(p[p.length - 1])
-                }
-                return is
-            },
-            emit() {
-                if (this.meta) {
-                    this.$emit('file-link', {'url': this.fileLink, 'meta': this.metaList})
-                } else {
-                    this.$emit('file-link', this.fileLink)
-                }
-                this.$emit('select', true)
-            }
-
-        }
+import file from "./file";
+
+export default {
+  name: 'inputFile',
+  mixins: [file],
+  props: {
+    accept: {
+      default: '*',
+      type: String
+    },
+    wPH: [Number, String, Array],
+    maxFileSize: Number,
+    uploadLink: {
+      type: String,
+      required: true
+    },
+    modelValue: {
+      default: null,
+      type: [String, Object]
+    },
+    meta: {
+      type: Array,
+      default: null
+    }
+  },
+  data() {
+    return {
+      showAdd: true,
+      showFile: true,
+      metaList: {}
     }
+  },
+  created() {
+    this.setValue()
+  },
+  methods: {
+    setValue() {
+      if (this.modelValue) {
+        this.fileLink = this.meta ? this.modelValue['url'] : this.modelValue
+        this.metaList = this.meta ? this.modelValue['meta'] : {}
+        this.showAdd = false
+        this.imageStatus = 'finished'
+        this.uploadPercentage = 100
+        this.emit()
+      }
+    },
+    getUrl(value) {
+      if (this.modelValue) {
+        return '/' + this.fileLink
+      } else {
+        return URL.createObjectURL(value)
+      }
+    },
+    isImg() {
+      let is = false
+      let image = this.accept.split('/')
+      is = image[0] === 'image'
+      if (!is) {
+        const p = this.fileLink.split('.')
+        is = ['jpg', 'jpeg', 'png', 'gif'].includes(p[p.length - 1])
+      }
+      return is
+    },
+    emit() {
+      if (this.meta) {
+        this.$emit('file-link', {'url': this.fileLink, 'meta': this.metaList})
+      } else {
+        this.$emit('file-link', this.fileLink)
+      }
+      this.$emit('select', true)
+    }
+
+  }
+}
 </script>
 
 <style lang="scss">
-    @import "../../../style/include";
-
-    .#{$prefix}file-uploader {
-        .image-card {
-            position: relative;
-            width: auto;
-            min-width: 150px;
-            min-height: 200px;
-            @include dark() {
-                background-color: #3a3e3a;
-            }
-            @include light() {
-                background-color: white;
-            }
-
-            .file-meta {
-                width: 250px;
-            }
-
-            .fails {
-                -webkit-filter: grayscale(100%);
-                filter: grayscale(100%);
-            }
-
-            .inProgress {
-                -webkit-filter: blur(2px);
-                filter: blur(2px);
-            }
-
-            .finished {
-                -webkit-filter: blur(0px);
-                filter: blur(0px);
-            }
-
-            .file {
-                left: 0;
-                right: 0;
-                position: absolute;
-                top: 0;
-                bottom: 0;
-            }
-
-            .image {
-                width: auto;
-                min-width: 150px;
-                height: 200px;
-                z-index: -2;
-                opacity: 0.8;
-            }
-            .icon-100{
-                width: 100px;
-                height: 100px;
-            }
-
-            .image-canvas {
-                width: auto;
-                min-width: 150px;
-                height: 200px;
-                position: relative;
-                background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
-            }
-
-            .image-close {
-                cursor: pointer;
-                position: absolute;
-                left: 5px;
-                top: 5px;
-                z-index: 1;
-            }
-
-            .image-progress {
-                z-index: 1;
-                position: absolute;
-                right: 5px;
-                top: 5px;
-                color: white;
-            }
-
-            .image-copy {
-                z-index: 1;
-                position: absolute;
-                left: 5px;
-                bottom: 5px;
-            }
-        }
+@import "../../../style/include";
+
+.#{$prefix}file-uploader {
+  .image-card {
+    position: relative;
+    width: auto;
+    min-width: 150px;
+    min-height: 200px;
+
+    background-color: white;
+
+
+    .file-meta {
+      width: 250px;
+    }
+
+    .fails {
+      -webkit-filter: grayscale(100%);
+      filter: grayscale(100%);
+    }
+
+    .inProgress {
+      -webkit-filter: blur(2px);
+      filter: blur(2px);
+    }
+
+    .finished {
+      -webkit-filter: blur(0px);
+      filter: blur(0px);
+    }
+
+    .file {
+      left: 0;
+      right: 0;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+    }
+
+    .image {
+      width: auto;
+      min-width: 150px;
+      height: 200px;
+      z-index: -2;
+      opacity: 0.8;
+    }
+
+    .icon-100 {
+      width: 100px;
+      height: 100px;
+    }
+
+    .image-canvas {
+      width: auto;
+      min-width: 150px;
+      height: 200px;
+      position: relative;
+      background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
+    }
+
+    .image-close {
+      cursor: pointer;
+      position: absolute;
+      left: 5px;
+      top: 5px;
+      z-index: 1;
+    }
+
+    .image-progress {
+      z-index: 1;
+      position: absolute;
+      right: 5px;
+      top: 5px;
+      color: white;
+    }
+
+    .image-copy {
+      z-index: 1;
+      position: absolute;
+      left: 5px;
+      bottom: 5px;
     }
+  }
+}
 </style>

package/components/form/inputTel/index.vue

@@ -169,13 +169,9 @@
         direction: ltr;
 
         .btn-country {
-            width: 120px;
-            @include light() {
-                border-color: var(--color-border-light)
-            }
-            @include dark() {
-                border-color: var(--color-border-dark)
-            }
+          width: 120px;
+          border-color: var(--color-border)
+
         }
 
         .input-phone {

package/components/form/radioInput.vue

@@ -71,15 +71,9 @@ export default {
 .#{$prefix}radio-input {
   width: 100%;
   cursor: pointer;
-  @include light() {
-    .radio-input-item {
-      border: 1px solid var(--color-border-light)
-    }
-  }
-  @include dark() {
-    .radio-input-item {
-      border: 1px solid var(--color-border-dark)
-    }
+
+  .radio-input-item {
+    border: 1px solid var(--color-border)
   }
 
   .#{$prefix}icon {

package/components/form/scss/input.scss

@@ -18,52 +18,27 @@
     }
   }
 
-  @include light() {
     &:not(.input-disabled) {
       input,
       textarea, .label, .#{$prefix}icon, .#{$prefix}btn {
-        color: var(--color-text-primary-light)
+        color: var(--color-text-primary)
       }
     }
 
     input::placeholder,
     textarea::placeholder {
-      color: var(--color-text-disabled-light)
+      color: var(--color-text-disabled)
     }
 
     &.input-disabled {
       * {
-        color: var(--color-text-disabled-light)
+        color: var(--color-text-disabled)
       }
     }
 
     .input-control {
-      border: solid 1px var(--color-border-light)
+      border: solid 1px var(--color-border)
     }
-  }
-  @include dark() {
-    &:not(.input-disabled) {
-      input,
-      textarea, .label, .#{$prefix}icon, .#{$prefix}btn {
-        color: var(--color-text-primary-dark)
-      }
-    }
-
-    input::placeholder,
-    textarea::placeholder {
-      color: var(--color-text-disabled-dark)
-    }
-
-    &.input-disabled {
-      * {
-        color: var(--color-text-disabled-dark)
-      }
-    }
-
-    .input-control {
-      border: solid 1px var(--color-border-dark)
-    }
-  }
 
   &.input-disabled {
     pointer-events: none;

package/components/form/scss/rating.scss

@@ -5,10 +5,5 @@
   max-width: 100%;
   white-space: nowrap;
   transition: 1s $primary-transition;
-  @include light(){
-    color: var(--color-text-disabled-light);
-  }
-  @include dark(){
-    color: var(--color-text-disabled-dark);
-  }
+  color: var(--color-text-disabled);
 }

package/components/form/scss/switch.scss

@@ -23,12 +23,7 @@
     width: 100%;
     height: 100%;
     border-radius: 10px;
-    @include light() {
-      background-color: var(--color-disabled-light);
-    }
-    @include dark() {
-      background-color: var(--color-disabled-dark);
-    }
+    background-color: var(--color-disabled);
   }
 
   .switch-dot {

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

@@ -2,33 +2,15 @@
 
 .#{$prefix}text-editor {
 
-  @include light() {
-    .editor-content {
-      border: 1px solid var(--color-border-light);
 
-      &:hover, &:focus {
-        border: 1px solid var(--color-border-hover-light);
-      }
-    }
-  }
-  @include dark() {
     .editor-content {
-      border: 1px solid var(--color-border-dark);
-
-      &:hover, &:focus {
-        border: 1px solid var(--color-border-hover-dark);
-      }
+      border: 1px solid var(--color-border);
     }
-  }
+
   @include typography($headings, 'body-1');
 
   a {
-    @include dark() {
-      color: var(--color-link-dark)
-    }
-    @include light() {
-      color: var(--color-link-light)
-    }
+    color: var(--color-link)
   }
 
   img {
@@ -36,7 +18,7 @@
   }
 
   .editor-content {
-    color: var(--color-text-primary-light);
+    color: var(--color-text-primary);
     transition: all .3s ease;
     min-height: 200px;
     max-height: 60vh;

package/components/form/timepicker/timepicker.vue

@@ -482,23 +482,18 @@
     @import "../../../style/include";
 
     .#{$prefix}timepicker-clock {
-        @include light() {
-            --color-timepicker: var(--color-one-light);
-        }
-
-        @include dark() {
-            --color-timepicker: var(--color-one-dark);
-        }
 
-        .text-time {
-            display: flex;
-            justify-content: center;
-            align-content: center;
-            margin-top: 40px;
-            width: 260px;
-            height: 60px;
-            color: #818181;
-            font-size: 30px;
+      --color-timepicker: var(--color-one);
+
+      .text-time {
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        margin-top: 40px;
+        width: 260px;
+        height: 60px;
+        color: #818181;
+        font-size: 30px;
         }
 
         .text-time > .time-show {