renusify 1.0.6 → 1.0.8

package/components/table/style.scss

@@ -8,33 +8,32 @@ $data-table-regular-header-height: 38px !default;
 .#{$prefix}table {
   position: relative;
 
-  @include light {
     .table-wrapper {
-      background-color: var(--color-cards-light);
-      color: var(--color-text-primary-light);
+      background-color: var(--color-sheet);
+      color: var(--color-text-primary);
     }
     .table-svg-path {
-      fill: var(--color-cards-light);
+      fill: var(--color-sheet);
     }
     .table-editable-icon {
-      background-color: var(--color-cards-light) !important;
-      color: var(--color-text-primary-light) !important;
+      background-color: var(--color-sheet) !important;
+      color: var(--color-text-primary) !important;
     }
     &.table-fixed-header {
       thead th {
-        background: var(--color-cards-light);
-        box-shadow: inset 0 -2px var(--color-divider-light)
+        background: var(--color-sheet);
+        box-shadow: inset 0 -2px var(--color-divider)
       }
     }
 
     thead {
       tr {
         &:last-child th {
-          border-bottom: 1px solid var(--color-divider-light)
+          border-bottom: 1px solid var(--color-divider)
         }
 
         th {
-          color: var(--color-text-secondary-light)
+          color: var(--color-text-secondary)
         }
       }
     }
@@ -42,16 +41,16 @@ $data-table-regular-header-height: 38px !default;
     &.table-fixed-first-columns {
       tr {
         th:first-child {
-          background: var(--color-cards-light)
+          background: var(--color-sheet)
         }
 
         td:first-child {
-          background: var(--color-cards-light)
+          background: var(--color-sheet)
         }
 
         &:hover {
           td:first-child {
-            background: var(--color-table-hover-light)
+            background: var(--color-table-hover)
           }
         }
       }
@@ -61,7 +60,7 @@ $data-table-regular-header-height: 38px !default;
       tbody {
         tr:nth-child(2n):not(:hover) {
           td {
-            background: var(--color-table-active-light)
+            background: var(--color-table-active)
           }
         }
       }
@@ -70,108 +69,25 @@ $data-table-regular-header-height: 38px !default;
     tbody {
       tr {
         &:active {
-          background: var(--color-table-active-light)
+          background: var(--color-table-active)
         }
 
         &:hover {
-          background: var(--color-table-hover-light)
+          background: var(--color-table-hover)
         }
       }
 
       tr:not(:last-child) {
         td {
-          border-bottom: 1px solid var(--color-divider-light)
+          border-bottom: 1px solid var(--color-divider)
         }
       }
     }
 
     &.table-bordered .table-wrapper {
-      border: 1px solid var(--color-divider-light);
+      border: 1px solid var(--color-divider);
       border-collapse: collapse;
     }
-  }
-  @include dark {
-    .table-wrapper {
-      background-color: var(--color-cards-dark);
-      color: var(--color-text-primary-dark);
-    }
-    .table-svg-path {
-      fill: var(--color-cards-dark);
-    }
-    .table-editable-icon {
-      background-color: var(--color-cards-dark) !important;
-      color: var(--color-text-primary-dark) !important;
-    }
-    &.table-fixed-header {
-      thead th {
-        background: var(--color-cards-dark);
-        box-shadow: inset 0 -2px var(--color-divider-dark)
-      }
-    }
-
-    thead {
-      tr {
-        &:last-child th {
-          border-bottom: 1px solid var(--color-divider-dark)
-        }
-
-        th {
-          color: var(--color-text-secondary-dark)
-        }
-      }
-    }
-
-    &.table-fixed-first-columns {
-      tr {
-        th:first-child {
-          background: var(--color-cards-dark)
-        }
-
-        td:first-child {
-          background: var(--color-cards-dark)
-        }
-
-        &:hover {
-          td:first-child {
-            background: var(--color-table-hover-dark)
-          }
-        }
-      }
-    }
-
-    &.table-stripped {
-      tbody {
-        tr:nth-child(2n):not(:hover) {
-          td {
-            background: var(--color-table-active-dark)
-          }
-        }
-      }
-    }
-
-    tbody {
-      tr {
-        &:active {
-          background: var(--color-table-active-dark)
-        }
-
-        &:hover {
-          background: var(--color-table-hover-dark)
-        }
-      }
-
-      tr:not(:last-child) {
-        td {
-          border-bottom: 1px solid var(--color-divider-dark)
-        }
-      }
-    }
-
-    &.table-bordered .table-wrapper {
-      border: 1px solid var(--color-divider-dark);
-      border-collapse: collapse;
-    }
-  }
 
   .table-wrapper {
     border-radius: map_get($borders, 'lg');
@@ -367,20 +283,12 @@ $data-table-regular-header-height: 38px !default;
     width: 17px;
     height: 17px;
   }
-  @include light() {
-    .manage-footer {
-      .btn-page {
-        border: solid 1px var(--color-border-light);
-      }
-    }
-  }
-  @include dark() {
+
     .manage-footer {
       .btn-page {
-        border: solid 1px var(--color-border-dark);
+        border: solid 1px var(--color-border);
       }
     }
-  }
 
   th {
     position: relative;

package/components/tabs/index.vue

@@ -1,48 +1,48 @@
 <template>
-    <nav :class="$r.prefix+'tabs'">
-        <div class="btn-tabs d-flex h-end v-center">
-            <r-btn @click.stop="isRtl?scroll_right():scroll_left()"
-                   icon
-                   text
-                   v-if="isRtl?!disableRight:!disableLeft">
-                <r-icon v-html="$r.icons.chevron_left"></r-icon>
-            </r-btn>
-        </div>
-
-        <div :class="[wrapperClass,{
+  <nav :class="$r.prefix+'tabs'">
+    <div class="btn-tabs d-flex h-end v-center">
+      <r-btn @click.stop="isRtl?scroll_right():scroll_left()"
+             icon
+             text
+             v-if="isRtl?!disableRight:!disableLeft">
+        <r-icon v-html="$r.icons.chevron_left"></r-icon>
+      </r-btn>
+    </div>
+
+    <div :class="[wrapperClass,{
     'tabs-hidden':$r.breakpoint.width>960
     }]" class="tabs-wrap" ref="tabs">
-            <button
-                :class="[
+      <button
+          :class="[
         { 'tabs__item_active' : tab.value === modelValue,
         [tabActiveClass]:tab.value === modelValue },
         tabClass,
       ]"
-                :disabled="tab.disabled || false"
-                :key="tab.title"
-                :ref="tab.value.toString()"
-                @click="handleClick(tab.value)"
-                class="tabs__item"
-                type="button"
-                v-for="tab in items"
-                    >
-                {{tab.title}}
-            </button>
-            <div
-                    :class="lineClass"
-                    :style="{ width: `${activeLineWidth}px`, transform: `translateX(${activeLineOffset}px)` }"
-                    class="tabs__active-line"></div>
-        </div>
-        <div class="btn-tabs d-flex h-start v-center">
-            <r-btn @click.stop="isRtl?scroll_left():scroll_right()"
-                   icon
-                   text
-                   v-if="isRtl?!disableLeft:!disableRight">
-                <r-icon v-html="$r.icons.chevron_right"></r-icon>
-            </r-btn>
-        </div>
-
-    </nav>
+          :disabled="tab.disabled || false"
+          :key="tab.title"
+          :ref="tab.value.toString()"
+          @click="handleClick(tab.value)"
+          class="tabs__item"
+          type="button"
+          v-for="tab in items"
+      >
+        {{ tab.title }}
+      </button>
+      <div
+          :class="lineClass"
+          :style="{ width: `${activeLineWidth}px`, transform: `translateX(${activeLineOffset}px)` }"
+          class="tabs__active-line"></div>
+    </div>
+    <div class="btn-tabs d-flex h-start v-center">
+      <r-btn @click.stop="isRtl?scroll_left():scroll_right()"
+             icon
+             text
+             v-if="isRtl?!disableLeft:!disableRight">
+        <r-icon v-html="$r.icons.chevron_right"></r-icon>
+      </r-btn>
+    </div>
+
+  </nav>
 </template>
 
 <script>
@@ -50,7 +50,7 @@ export default {
   name: 'r-tabs',
   props: {
     modelValue: {
-      type: [String,Number,Boolean]
+      type: [String, Number, Boolean]
     },
     items: {
       type: Array,
@@ -77,7 +77,7 @@ export default {
       default: true
     }
   },
-  data () {
+  data() {
     return {
       disableLeft: true,
       disableRight: true,
@@ -85,7 +85,7 @@ export default {
       activeLineOffset: 0
     }
   },
-  mounted () {
+  mounted() {
     setTimeout(() => {
       this.offset()
       this.moveActiveLine(this.modelValue.toString())
@@ -101,20 +101,20 @@ export default {
     }
   },
   computed: {
-    isRtl () {
+    isRtl() {
       return this.$r.rtl
     }
   },
   methods: {
-    scroll_left () {
+    scroll_left() {
       this.$refs.tabs.scrollLeft -= this.$refs.tabs.clientWidth * 3 / 4
       this.offset()
     },
-    scroll_right () {
+    scroll_right() {
       this.$refs.tabs.scrollLeft += this.$refs.tabs.clientWidth * 3 / 4
       this.offset()
     },
-    offset () {
+    offset() {
       const div = this.$refs.tabs
       this.disableLeft = true
       this.disableRight = true
@@ -135,14 +135,14 @@ export default {
         }
       }, 100)
     },
-    handleClick (value) {
+    handleClick(value) {
       this.$emit('update:modelValue', value)
       this.moveActiveLine(value.toString())
     },
-    moveActiveLine (newValue) {
+    moveActiveLine(newValue) {
       if (!this.modelValue) return
       if (!this.$refs[newValue]) return
-      let element = this.$refs[newValue][0] ||this.$refs[newValue]
+      let element = this.$refs[newValue][0] || this.$refs[newValue]
       this.activeLineWidth = element.clientWidth
       this.activeLineOffset = element.offsetLeft
       if (this.autoScrollToView) {
@@ -153,92 +153,78 @@ export default {
 }
 </script>
 <style lang="scss">
-    @import "../../style/include";
-
-    $btnTabsWidth: 50px;
-
-    .#{$prefix}tabs {
-        max-width: 100%;
-        display: flex;
-        flex-direction: row;
-@include light() {
-        .tabs__item {
-            color: var(--color-text-secondary-light);
-
-            &_active {
-                color: var(--color-text-primary-light)
-            }
-
-            &:hover {
-                color: var(--color-text-primary-light);
-                border-bottom: 2px solid var(--color-text-secondary-light);
-            }
-        }
+@import "../../style/include";
+
+$btnTabsWidth: 50px;
+
+.#{$prefix}tabs {
+  max-width: 100%;
+  display: flex;
+  flex-direction: row;
+
+  .tabs__item {
+    color: var(--color-text-secondary);
+
+    &_active {
+      color: var(--color-text-primary)
     }
-        @include dark() {
-        .tabs__item {
-            color: var(--color-text-secondary-dark);
-
-            &_active {
-                color: var(--color-text-primary-dark)
-            }
-
-            &:hover {
-                color: var(--color-text-primary-dark);
-                border-bottom: 2px solid var(--color-text-secondary-dark);
-            }
-        }
+
+    &:hover {
+      color: var(--color-text-primary);
+      border-bottom: 2px solid var(--color-text-secondary);
     }
-        .tabs-wrap {
-            position: relative;
-            margin: 0 auto;
-            white-space: nowrap;
-            width: calc(100% - #{$btnTabsWidth*2});
-            overflow: auto;
-
-            &.tabs-hidden {
-                overflow: hidden;
-            }
-
-            scroll-behavior: smooth;
-        }
+  }
 
-        .tabs__active-line {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            height: 2px;
-            background-color: currentColor;
-            transition: transform 0.4s ease, width 0.4s ease;
-        }
+  .tabs-wrap {
+    position: relative;
+    margin: 0 auto;
+    white-space: nowrap;
+    width: calc(100% - #{$btnTabsWidth*2});
+    overflow: auto;
 
-        .tabs__item {
-            display: inline-block;
-            margin: 0 5px;
-            padding: 10px;
-            padding-bottom: 8px;
-            text-decoration: none;
-            border: none;
-            background-color: transparent;
-            border-bottom: 2px solid transparent;
-            cursor: pointer;
-            transition: all 0.25s;
-
-            &:focus {
-                outline: none;
-            }
-
-            &:first-child {
-                margin-left: 0;
-            }
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
+    &.tabs-hidden {
+      overflow: hidden;
+    }
 
-        .btn-tabs {
-            width: $btnTabsWidth;
-        }
+    scroll-behavior: smooth;
+  }
+
+  .tabs__active-line {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    background-color: currentColor;
+    transition: transform 0.4s ease, width 0.4s ease;
+  }
+
+  .tabs__item {
+    display: inline-block;
+    margin: 0 5px;
+    padding: 10px;
+    padding-bottom: 8px;
+    text-decoration: none;
+    border: none;
+    background-color: transparent;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    transition: all 0.25s;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:first-child {
+      margin-left: 0;
     }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .btn-tabs {
+    width: $btnTabsWidth;
+  }
+}
 </style>

package/components/timeline/index.vue

@@ -36,24 +36,19 @@
             padding: 30px 0;
 
             &:not(:last-child):before {
-                content: '';
-                width: 1px;
-                height: 40%;
-                @include light() {
-                    border-right: 2px solid var(--color-divider-light);
-                }
-                @include dark() {
-                    border-right: 2px solid var(--color-divider-dark);
-                }
-                position: absolute;
-                bottom: -20%;
-                z-index: 0;
-                @include rtl() {
-                    right: percentage(div(1, $grid-columns));
-                }
-                @include ltr() {
-                    left: percentage(div(1, $grid-columns));
-                }
+              content: '';
+              width: 1px;
+              height: 40%;
+              border-right: 2px solid var(--color-divider);
+              position: absolute;
+              bottom: -20%;
+              z-index: 0;
+              @include rtl() {
+                right: percentage(div(1, $grid-columns));
+              }
+              @include ltr() {
+                left: percentage(div(1, $grid-columns));
+              }
             }
 
             @include media-breakpoint-up('md') {

package/components/tree/index.vue

@@ -119,24 +119,20 @@
 
     $distance: 20px;
     .#{$prefix}tree {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        @include light(){
-            background-color: var(--color-background-one-light)
-        }
-        @include dark(){
-            background-color: var(--color-background-one-dark)
-        }
-        &.tree-searchable {
-            .#{$prefix}float {
-                height: calc(100% - 70px)
-            }
-        }
+      position: relative;
+      width: 100%;
+      height: 100%;
+      background-color: var(--color-background-one);
 
+      &.tree-searchable {
         .#{$prefix}float {
-            direction: ltr;
+          height: calc(100% - 70px)
         }
+      }
+
+      .#{$prefix}float {
+        direction: ltr;
+      }
 
         .tree-rotate {
             transform: rotateX(180deg);

package/index.js

@@ -60,7 +60,6 @@ export default {
         // renusify application
         app.config.globalProperties.$r = reactive(Object.assign({}, {
             prefix: 'r-',
-            dark: false,
             rtl: false,
             lang: 'en',
             langs:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "renusify",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Vue3 Framework",
   "keywords": [
     "vuejs",

package/plugins/trans/Translate.js

@@ -81,6 +81,7 @@ class Translate {
             for (let i = 0; i < lng; i++) {
                 val = this.replaceAll(val, '{' + i + '}', variable[i]);
             }
+
             if (val === null || val === '') {
                 return key;
             }