renusify 1.0.6 → 1.0.9

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/directive/intersect/index.js

@@ -1,24 +1,27 @@
 function mounted (el, binding) {
-  const modifiers = binding.modifiers ||  {}
-  const value = binding.value
-  const callback = typeof value === 'object' ? value.handler : value
-  let options = binding.value.options||{}
-
-  const observer = new IntersectionObserver((
-    entries = [],
-    observer
-  ) => {
-    if (!el._observe) return
-
-    if (
-      callback && (
-        !modifiers.silent ||
-        el._observe.init
-      )
-    ) {
-      const isIntersecting = Boolean(entries.find(entry => entry.isIntersecting))
-
-      callback(isIntersecting,entries, observer,options)
+    const modifiers = binding.modifiers || {}
+    if (modifiers.pre) {
+        return
+    }
+    const value = binding.value
+    const callback = typeof value === 'object' ? value.handler : value
+    let options = binding.value.options || {}
+
+    const observer = new IntersectionObserver((
+        entries = [],
+        observer
+    ) => {
+        if (!el._observe) return
+
+        if (
+            callback && (
+                !modifiers.silent ||
+                el._observe.init
+            )
+        ) {
+            const isIntersecting = Boolean(entries.find(entry => entry.isIntersecting))
+
+            callback(isIntersecting, entries, observer, options)
     }
 
     if (el._observe.init && modifiers.once) unmounted(el)

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.9",
   "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;
             }

package/style/app.scss

@@ -41,8 +41,8 @@ body {
   background: rgba(100, 100, 100, 0.6);
 }
 
-$color: var(--color-two-light);
-$color-text: var(--color-two-text-light);
+$color: var(--color-two);
+$color-text: var(--color-two-text);
 
 ::-moz-selection {
   color: $color-text;
@@ -54,33 +54,6 @@ $color-text: var(--color-two-text-light);
   background: $color;
 }
 
-.app-dark {
-  ::-webkit-scrollbar-track:hover {
-    border: 1px solid rgba(255, 255, 255, 0.4);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.4);
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.8);
-  }
-
-  $color: var(--color-two-dark);
-  $color-text: var(--color-two-text-dark);
-
-  ::-moz-selection {
-    color: $color-text;
-    background: $color;
-  }
-
-  ::selection {
-    color: $color-text;
-    background: $color;
-  }
-}
-
 .#{$prefix}app {
   font-family: $body-font-family;
   line-height: $line-height-root;
@@ -109,12 +82,7 @@ $color-text: var(--color-two-text-light);
 }
 
 .router-link-exact-active {
-  @include dark() {
-    color: var(--color-link-dark);
-  }
-  @include light() {
-    color: var(--color-link-light)
-  }
+  color: var(--color-link)
 }
 
 //curser
@@ -214,13 +182,7 @@ $color-text: var(--color-two-text-light);
 }
 
 .subtitle-1, .subtitle-2, .body-2, .caption, .overline {
-  @include light() {
-    @include text-color(var(--color-text-secondary-light));
-  }
-
-  @include dark() {
-    @include text-color(var(--color-text-secondary-dark));
-  }
+  @include text-color(var(--color-text-secondary));
 }
 
 //width
@@ -292,18 +254,9 @@ $color-text: var(--color-two-text-light);
     margin: 0 15px;
   }
 
-  @include light() {
-    $color: var(--color-one-light);
     pre {
-      border-left: 5px solid $color;
+      border-left: 5px solid var(--color-one);
     }
-  }
-  @include dark() {
-    $color: var(--color-one-dark);
-    pre {
-      border-left: 5px solid $color;
-    }
-  }
 
   pre {
     direction: ltr;
@@ -333,36 +286,19 @@ $color-text: var(--color-two-text-light);
     color: white;
   }
 
-  @include light() {
     $background: #e2ece2;
     blockquote {
       background-color: $background;
-      border: 5px solid var(--color-one-light);
-
-      &::before {
-        background-color: $background;
-      }
-
-      &::after {
-        color: var(--color-one-light);
-      }
-    }
-  }
-  @include dark() {
-    $background: #3a3e3a;
-    blockquote {
-      background-color: $background;
-      border: 5px solid var(--color-one-dark);
+      border: 5px solid var(--color-one);
 
       &::before {
         background-color: $background;
       }
 
       &::after {
-        color: var(--color-one-dark);
+        color: var(--color-one);
       }
     }
-  }
 
   blockquote {
     font-family: Georgia, Times, "Times New Roman", serif;