renusify 2.4.0 → 2.4.1

package/components/bar/scss/toolbar.scss

@@ -125,7 +125,6 @@
   .toolbar-item {
     padding: 20px 5px;
     font-size: 1.125rem;
-    font-weight: bold;
     position: relative;
 
     .toolbar-childs {

package/components/form/text-editor/index.vue

@@ -182,6 +182,7 @@
              :closebtn="false">
       <r-form v-model="valid2">
         <r-container>
+          <r-text-input :label="$t('name','renusify')" v-model="code_name"></r-text-input>
           <r-select-input v-model="lang" :items="langs"
                           :label="$t('lang','renusify')"
                           :rules="['required']"
@@ -251,6 +252,7 @@ export default {
       preSelected: null,
       currentPath: [],
       selectElm: null,
+      code_name: null,
       code: '',
       lang: null,
       showPre: false,
@@ -480,7 +482,12 @@ export default {
       let sel = this.getSelection()
       sel.removeAllRanges()
       sel.addRange(this.preSelected)
-      let url = `<div class="${this.$r.prefix}highlight highlight-lang-${this.lang}" >${await this.highlight(this.code, this.lang)}</div>`
+      let url = `<div class="${this.$r.prefix}highlight" >`
+      if (this.code_name) {
+        url += `<div class="highlight-name title-3 font-weight-bold mb-3">${this.code_name}</div>`
+      }
+
+      url += `<div class="highlight-code highlight-lang-${this.lang}">${await this.highlight(this.code, this.lang)}</div></div>`
       document.execCommand('insertHTML', true, url)
       this.showPre = false
     },

package/components/highlight/index.vue

@@ -1,5 +1,19 @@
 <template>
-  <div :class="`${$r.prefix}highlight highlight-lang-${lang}`" v-html='txt'></div>
+  <div :class="`${$r.prefix}highlight`" >
+    <div class="title-3 font-weight-bold mb-3" :class="{'highlight-name':name}">
+      <div class="d-flex v-top">{{name}}
+      <r-spacer></r-spacer>
+        <r-btn
+          icon
+          text
+          @click.prevent="$helper.copy(src)"
+      >
+        <r-icon v-html="$r.icons.copy"></r-icon>
+      </r-btn>
+      </div>
+    </div>
+    <div :class="`highlight-code highlight-lang-${lang}`" v-html='txt'></div>
+  </div>
 </template>
 <script>
 import './style.scss'
@@ -9,6 +23,7 @@ export default {
   name: 'highlight',
   mixins: [mixin],
   props: {
+    name: String,
     src: String,
     hideLineNumbers: Boolean,
     lang: {

package/components/highlight/mixin.js

@@ -815,7 +815,7 @@ export default {
                 },
                 {
                     type: 'kwd',
-                    match: /\b(and|as|assert|break|class|continue|def|del|elif|else|except|finally|for|from|global|if|import|in|is|lambda|nonlocal|not|or|pass|raise|return|try|while|with|yield)\b/g
+                    match: /\b(and|as|assert|break|class|continue|def|del|elif|else|except|finally|for|from|global|if|import|in|is|lambda|nonlocal|not|or|pass|raise|return|try|while|with|yield|await)\b/g
                 },
                 {
                     type: 'bool',
@@ -1036,6 +1036,32 @@ export default {
                 }
             ]
         }
+         this.languages.http= {
+            default: [
+              {
+                type: 'kwd',
+                match: /^(GET|HEAD|POST|PUT|DELETE|CONNECT|OPTIONS|TRACE|PATCH|PRI|SEARCH)\b/gm
+              },
+              {
+                expand: 'str'
+              },
+              {
+                type: 'section',
+                match: /\bHTTP\/[\d.]+\b/g
+              },
+              {
+                expand: 'num'
+              },
+              {
+                type: 'oper',
+                match: /[,;:=]/g
+              },
+              {
+                type: 'var',
+                match: /[a-zA-Z][\w-]*(?=:)/g
+              }
+            ]
+          }
     },
     methods: {
         async highlight(code, lang, hideLineNumbers) {

package/components/highlight/style.scss

@@ -4,25 +4,29 @@
   direction: ltr;
   text-align: left;
   white-space: pre;
-  padding: 30px 20px;
+  padding: 20px !important;
   color: #f8f8f2;
   background: #1a1a1c;
   box-shadow: 0 0 5px #fff;
   text-shadow: none;
   font: normal 18px Consolas, "Courier New", Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  line-height: 24px;
+  line-height: 24px !important;
   box-sizing: border-box;
 
   &::selection {
     background: #bdf5
   }
 
-  > div {
+  .highlight-name {
+    border-bottom: 1px solid !important;
+  }
+
+  .highlight-code > div {
     display: flex;
     overflow: auto
   }
 
-  > div :last-child {
+  .highlight-code > div :last-child {
     flex: 1;
     outline: none
   }
@@ -55,7 +59,7 @@
   }
 
 
-  .highlight-lang-http .highlight-syn-kwd {
+  &.highlight-lang-http .highlight-syn-kwd {
     background: #25f;
     color: #fff;
     padding: 0px 5px;

package/components/nestable/NestableItem.vue

@@ -23,10 +23,13 @@
       >
         <r-icon v-html="$r.icons.delete"></r-icon>
       </r-btn-confirm>
+      <r-btn v-if="hasChildren" icon text @click="closed=!closed">
+        <r-icon v-html="closed?$r.icons.plus:$r.icons.minus"></r-icon>
+      </r-btn>
+      <r-btn v-else icon text></r-btn>
       <slot :item="item">{{ item }}</slot>
     </div>
-
-    <div v-if="hasChildren" class="nestable-list ms-5">
+    <div v-if="hasChildren&&!closed" class="nestable-list ms-5">
       <template
           v-for="(child, childIndex) in item[childrenProp]"
           :key="childIndex"
@@ -90,9 +93,9 @@ export default {
     return {
       breakPoint: null,
       moveDown: false,
+      closed:false
     };
   },
-
   computed: {
     isDragging() {
       return (
@@ -116,7 +119,6 @@ export default {
       ];
     },
   },
-
   methods: {
     del(item) {
       this.$emit("delete", item);

package/package.json

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

package/style/variables/base.scss

@@ -143,35 +143,35 @@ $headings: (
         'display-1': (
                 'size': 4.75rem,
                 'weight': 400,
-                'line-height': 5.33rem,
+                'line-height': 6rem,
                 'letter-spacing': -0.02rem,
                 'text-transform': false
         ),
         'display-2': (
                 'size': 3.75rem,
                 'weight': 400,
-                'line-height': 4.33rem,
+                'line-height': 5.3rem,
                 'letter-spacing': 0,
                 'text-transform': false
         ),
         'display-3': (
                 'size': 3rem,
                 'weight': 400,
-                'line-height': 3.66rem,
+                'line-height': 4.3rem,
                 'letter-spacing': 0,
                 'text-transform': false
         ),
         'headline-1': (
                 'size': 2.66rem,
                 'weight': 400,
-                'line-height': 3.33rem,
+                'line-height': 3.6rem,
                 'letter-spacing': 0,
                 'text-transform': false
         ),
         'headline-2': (
                 'size': 2.33rem,
                 'weight': 400,
-                'line-height': 3rem,
+                'line-height': 3.2rem,
                 'letter-spacing': 0,
                 'text-transform': false
         ),
@@ -192,7 +192,7 @@ $headings: (
         'title-2': (
                 'size': 1.33rem,
                 'weight': 500,
-                'line-height': 2rem,
+                'line-height': 1.9rem,
                 'letter-spacing': 0.0125rem,
                 'text-transform': false
         ),
@@ -206,7 +206,7 @@ $headings: (
         'body-1': (
                 'size': 1.33rem,
                 'weight': 400,
-                'line-height': 2rem,
+                'line-height': 1.8rem,
                 'letter-spacing': 0.042rem,
                 'text-transform': false
         ),
@@ -227,21 +227,21 @@ $headings: (
         'label-1': (
                 'size': 1.15rem,
                 'weight': 500,
-                'line-height': 1.66rem,
+                'line-height': 1.5rem,
                 'letter-spacing': 0.008rem,
                 'text-transform': uppercase
         ),
         'label-2': (
                 'size':1rem,
                 'weight': 500,
-                'line-height': 1.33rem,
+                'line-height': 1.2rem,
                 'letter-spacing': 0.042rem,
                 'text-transform': uppercase
         ),
         'label-3': (
                 'size': 0.85rem,
                 'weight': 500,
-                'line-height': 1.33rem,
+                'line-height': 1.1rem,
                 'letter-spacing': 0.042rem,
                 'text-transform': uppercase
         )