renusify 1.4.7 → 2.0.0

package/components/progress/style.scss

@@ -86,19 +86,19 @@ $progress-circle-overlay-transition: all .6s ease-in-out !default;
   text-align: center;
 
   &.progress-outlined {
-    color: var(--color-divider)
+    color: var(--color-border)
   }
 
   .line-determinate {
-    background-color: var(--color-text-primary);
+    background-color: var(--color-on-sheet);
   }
 
   .line-indeterminate {
-    background-color: var(--color-text-primary);
+    background-color: var(--color-on-sheet);
   }
 
     .progress-background {
-      background-color: var(--color-divider);
+      background-color: var(--color-sheet-container);
     }
 
   &.progress-outlined {

package/components/searchBox/index.vue

@@ -191,7 +191,7 @@ export default {
     display: flex;
     align-items: center;
     border: solid 1px var(--color-border);
-    color: var(--color-text-primary);
+    color: var(--color-on-sheet);
     position: relative;
     border-radius: map-get($borders, "md");
 
@@ -207,7 +207,7 @@ export default {
     padding: 12px;
     max-width: 100%;
     min-width: 0px;
-    caret-color: var(--color-text-primary);
+    caret-color: var(--color-on-sheet);
   }
 
   .card-search {

package/components/table/crud/header.vue

@@ -179,7 +179,7 @@
                 </r-col>
             </r-row>
         </r-container>
-      <r-progress-line color="color-two" v-if="loading"></r-progress-line>
+      <r-progress-line v-if="loading" color="color-one"></r-progress-line>
         <r-confirm
                 hard
                 v-model="showConfirm"

package/components/table/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+      v-bind="$attrs"
       :class="{
         [`${$r.prefix}table`]:true,
         'table-editable':editable,
@@ -13,7 +14,7 @@
       <svg class="table-svg" height="18" width="18">
         <path class="table-svg-path" d="M 0 0 l 0 18 l 18 0 q -18 0 -18 -18"/>
       </svg>
-      <span class="color-info-text table-editable-icon px-2"
+      <span class="table-editable-icon px-2"
             @click.prevent="open_modal()">
                 <r-icon v-html="$r.icons.setting"></r-icon>
             </span>
@@ -57,7 +58,7 @@
                     class="tr-hidden">
                   <td :colspan="($helper.size(th)||th.length)">
                     <div v-for="(v,h) in hidden" :key="key+h" class="pa-2">
-                      <span class="title">{{ getText(h) }}: </span>
+                      <span class="title-1">{{ getText(h) }}: </span>
                       <span>{{ item[h] }}</span>
                     </div>
                   </td>
@@ -85,7 +86,7 @@
         >
           <r-col>
             <r-card class="pa-4 ma-1 d-flex h-space-between" tile>
-                <span class="title">
+                <span class="title-1">
                   <r-btn class="drag-btn" icon text>
                     <r-icon v-html="$r.icons.drag"></r-icon>
                   </r-btn>

package/components/table/style.scss

@@ -9,31 +9,31 @@ $data-table-regular-header-height: 38px !default;
   position: relative;
 
     .table-wrapper {
-      background-color: var(--color-sheet);
-      color: var(--color-text-primary);
+      background-color: var(--color-sheet-container-lowest);
+      color: var(--color-on-sheet-container-lowest);
     }
     .table-svg-path {
       fill: var(--color-sheet);
     }
     .table-editable-icon {
-      background-color: var(--color-sheet) !important;
-      color: var(--color-text-primary) !important;
+      background-color: var(--color-sheet);
+      color: var(--color-on-sheet);
     }
     &.table-fixed-header {
       thead th {
-        background: var(--color-sheet);
-        box-shadow: inset 0 -2px var(--color-divider)
+        box-shadow: inset 0 -2px var(--color-border)
       }
     }
 
     thead {
       tr {
         &:last-child th {
-          border-bottom: 1px solid var(--color-divider)
+          border-bottom: 1px solid var(--color-border)
         }
 
         th {
-          color: var(--color-text-secondary)
+          background-color: var(--color-sheet);
+          color: var(--color-on-sheet)
         }
       }
     }
@@ -41,16 +41,19 @@ $data-table-regular-header-height: 38px !default;
     &.table-fixed-first-columns {
       tr {
         th:first-child {
-          background: var(--color-sheet)
+          background: var(--color-sheet);
+          color: var(--color-on-sheet)
         }
 
         td:first-child {
-          background: var(--color-sheet)
+          background: var(--color-sheet);
+          color: var(--color-on-sheet)
         }
 
         &:hover {
           td:first-child {
-            background: var(--color-sheet-hover)
+            background: var(--color-sheet-container);
+            color: var(--color-on-sheet-container)
           }
         }
       }
@@ -60,7 +63,7 @@ $data-table-regular-header-height: 38px !default;
       tbody {
         tr:nth-child(2n):not(:hover) {
           td {
-            background: var(--color-sheet-active)
+            background: var(--color-sheet-container-low)
           }
         }
       }
@@ -69,23 +72,23 @@ $data-table-regular-header-height: 38px !default;
     tbody {
       tr {
         &:active {
-          background: var(--color-sheet-active)
+          background: var(--color-sheet-container)
         }
 
         &:hover {
-          background: var(--color-sheet-hover)
+          background: var(--color-sheet-container)
         }
       }
 
       tr:not(:last-child) {
         td {
-          border-bottom: 1px solid var(--color-divider)
+          border-bottom: 1px solid var(--color-border)
         }
       }
     }
 
     &.table-bordered .table-wrapper {
-      border: 1px solid var(--color-divider);
+      border: 1px solid var(--color-border);
       border-collapse: collapse;
     }
 

package/components/tabs/index.vue

@@ -1,17 +1,6 @@
 <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,{
-    'tabs-hidden':$r.breakpoint.width>960
-    }]" class="tabs-wrap" ref="tabs">
+  <div :class="$r.prefix+'tabs'">
+    <div ref="tabs" :class="[wrapperClass]" class="tabs-wrap">
       <button
           v-for="tab in items"
           :key="tab.title"
@@ -33,16 +22,7 @@
           :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>
+  </div>
 </template>
 
 <script>
@@ -77,15 +57,12 @@ export default {
   emits: ['update:modelValue'],
   data() {
     return {
-      disableLeft: true,
-      disableRight: true,
       activeLineWidth: 0,
       activeLineOffset: 0
     }
   },
   mounted() {
     setTimeout(() => {
-      this.offset()
       if (this.modelValue) {
         this.moveActiveLine(this.modelValue.toString())
       }
@@ -95,46 +72,12 @@ export default {
     modelValue(newCurrentTab, o) {
       if (o === newCurrentTab) return
       setTimeout(() => {
-        this.offset()
         this.moveActiveLine(newCurrentTab)
       }, 100)
     }
   },
-  computed: {
-    isRtl() {
-      return this.$r.rtl
-    }
-  },
-  methods: {
-    scroll_left() {
-      this.$refs.tabs.scrollLeft -= this.$refs.tabs.clientWidth * 3 / 4
-      this.offset()
-    },
-    scroll_right() {
-      this.$refs.tabs.scrollLeft += this.$refs.tabs.clientWidth * 3 / 4
-      this.offset()
-    },
-    offset() {
-      const div = this.$refs.tabs
-      this.disableLeft = true
-      this.disableRight = true
-      if (!div) {
-        return false
-      }
 
-      setTimeout(() => {
-        if (div.clientWidth === div.scrollWidth) {
-          this.disableLeft = true
-          this.disableRight = true
-        } else if (div.scrollLeft === 0) {
-          this.disableLeft = true
-          this.disableRight = false
-        } else if (div.scrollLeft + div.clientWidth === div.scrollWidth) {
-          this.disableRight = true
-          this.disableLeft = false
-        }
-      }, 100)
-    },
+  methods: {
     handleClick(value) {
       this.$emit('update:modelValue', value)
       this.moveActiveLine(value.toString())
@@ -169,10 +112,6 @@ $btnTabsWidth: 50px;
     width: calc(100% - #{$btnTabsWidth*2});
     overflow: auto;
 
-    &.tabs-hidden {
-      overflow: hidden;
-    }
-
     scroll-behavior: smooth;
   }
 

package/components/timeline/index.vue

@@ -39,7 +39,7 @@
               content: '';
               width: 1px;
               height: 40%;
-              border-right: 2px solid var(--color-divider);
+              border-right: 2px solid var(--color-border);
               position: absolute;
               bottom: -20%;
               z-index: 0;

package/components/tour/index.vue

@@ -2,23 +2,23 @@
   <teleport :to="`.${$r.prefix}app`">
     <div :style="style" class="tour-layer"></div>
     <transition name="slide-up" mode="out-in">
-      <div v-if="msg" ref="tourMsg" :style="style_msg" class="tour-msg display-4">
+      <div v-if="msg" ref="tourMsg" :style="style_msg" class="tour-msg headline-1">
         <r-container>
           <div v-html="$helper.cleanXss(steps[run].msg)"></div>
           <div class="d-flex">
             <div><span
-                class="subtitle-1 color-success br-lg py-1 px-2 ltr">{{ steps.length }} / {{ run + 1 }}</span>
+                class="title-2 color-success br-lg py-1 px-2 ltr">{{ steps.length }} / {{ run + 1 }}</span>
             </div>
             <r-spacer></r-spacer>
-            <r-btn v-if="has_prev" :disabled="disable_prev" class="color-warning tour-clickable" @click.prevent="prev">
+            <r-btn v-if="has_prev" :disabled="disable_prev" class="color-info tour-clickable" @click.prevent="prev">
               {{ $t('prev', 'renusify') }}
             </r-btn>
-            <r-btn v-if="has_next" :disabled="disable_next" class="color-warning mx-1 tour-clickable"
+            <r-btn v-if="has_next" :disabled="disable_next" class="color-info mx-1 tour-clickable"
                    @click.prevent="next">
               {{ $t('next', 'renusify') }}
             </r-btn>
             <r-btn v-if="steps.length===run+1||canFinish" :disabled="disable_finish"
-                   class="color-warning mx-1 tour-clickable"
+                   class="color-success mx-1 tour-clickable"
                    @click.prevent="finish">{{ $t('finish', 'renusify') }}
             </r-btn>
           </div>

package/components/tree/index.vue

@@ -123,7 +123,6 @@ $distance: 20px;
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: var(--color-background-one);
 
   &.tree-searchable {
     .#{$prefix}float {

package/package.json

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

package/plugins/request/Request.js

@@ -3,8 +3,8 @@ class Request {
         this._baseURL = '/';
         this._headers={
             common:{
-                'Accept': 'application/json, text/plain, */*',
-                'X-Requested-With':'XMLHttpRequest'
+                'Accept': '*/*',
+                'X-Requested-With': 'XMLHttpRequest'
             },
             get:{
                 'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'
@@ -49,7 +49,7 @@ class Request {
                     xhr.setRequestHeader(key, opts.headers[key]);
                 });
             }
-            var params = opts.params;
+            let params = opts.params;
             // We'll need to stringify if we've been given an object
             // If we have a string, this is skipped.
             if (params && typeof params === "object") {

package/style/app.scss

@@ -41,8 +41,8 @@ body {
   background: rgba(100, 100, 100, 0.6);
 }
 
-$color: var(--color-two);
-$color-text: var(--color-two-text);
+$color: var(--color-one);
+$color-text: var(--color-on-one);
 
 ::-moz-selection {
   color: $color-text;
@@ -82,7 +82,7 @@ $color-text: var(--color-two-text);
 }
 
 .router-link-exact-active, a:hover {
-  color: var(--color-link)
+  color: var(--color-one)
 }
 
 //curser
@@ -124,55 +124,67 @@ $color-text: var(--color-two-text);
 
 //typography
 .#{$prefix}app {
-  @include typography($headings, 'body-1');
+  @include typography($headings, 'body-2');
 
   .display-1 {
-    @include typography($headings, 'h1')
+    @include typography($headings, 'display-1')
   }
 
   .display-2 {
-    @include typography($headings, 'h2')
+    @include typography($headings, 'display-2')
   }
 
   .display-3 {
-    @include typography($headings, 'h3')
+    @include typography($headings, 'display-3')
   }
 
-  .display-4 {
-    @include typography($headings, 'h4')
+  .headline-1 {
+    @include typography($headings, 'headline-1')
   }
 
-  .display-5 {
-    @include typography($headings, 'h5')
+  .headline-2 {
+    @include typography($headings, 'headline-2')
   }
 
-  .title {
-    @include typography($headings, 'h6')
+  .headline-3 {
+    @include typography($headings, 'headline-3')
   }
 
-  .subtitle-1 {
-    @include typography($headings, 'subtitle-1');
+  .title-1 {
+    @include typography($headings, 'title-1')
   }
 
-  .subtitle-2 {
-    @include typography($headings, 'subtitle-2');
+  .title-2 {
+    @include typography($headings, 'title-2');
   }
 
-  .body-2 {
-    @include typography($headings, 'body-2');
+  .title-3 {
+    @include typography($headings, 'title-3');
   }
 
   .body-1 {
     @include typography($headings, 'body-1');
   }
 
-  .caption {
-    @include typography($headings, 'caption')
+  .body-2 {
+    @include typography($headings, 'body-2');
+  }
+
+  .body-3 {
+    @include typography($headings, 'body-3');
+  }
+
+
+  .label-1 {
+    @include typography($headings, 'label-1')
+  }
+
+  .label-2 {
+    @include typography($headings, 'label-2')
   }
 
-  .overline {
-    @include typography($headings, 'overline');
-    text-transform: uppercase
+  .label-3 {
+    @include typography($headings, 'label-3')
   }
 
   p {
@@ -181,10 +193,6 @@ $color-text: var(--color-two-text);
 
 }
 
-.subtitle-1, .subtitle-2, .body-2, .caption, .overline {
-  @include text-color(var(--color-text-secondary));
-}
-
 //width
 .#{$prefix}app {
   @each $name, $value in $widths {
@@ -250,13 +258,17 @@ $color-text: var(--color-two-text);
 }
 
 .#{$prefix}app {
+  * {
+    scroll-margin: 100px;
+  }
+
   ol, ul {
     margin: 0 15px;
   }
 
-    pre {
-      border-left: 5px solid var(--color-one);
-    }
+  pre {
+    border-left: 5px solid var(--color-one);
+  }
 
   pre {
     direction: ltr;
@@ -286,19 +298,18 @@ $color-text: var(--color-two-text);
     color: white;
   }
 
-    $background: #e2ece2;
-    blockquote {
-      background-color: $background;
-      border: 5px solid var(--color-one);
+  blockquote {
+    background-color: var(--color-one-container);
+    border: 5px solid var(--color-border);
 
-      &::before {
-        background-color: $background;
-      }
+    &::before {
+      background-color: var(--color-one-container);
+    }
 
-      &::after {
-        color: var(--color-one);
-      }
+    &::after {
+      color: var(--color-on-one-container);
     }
+  }
 
   blockquote {
     font-family: Georgia, Times, "Times New Roman", serif;