renusify 1.2.3 → 1.2.4

package/components/codeEditor/run.vue

@@ -1,29 +1,46 @@
-<template>
-  <component :is="page"></component>
-</template>
-<script>
-import {defineAsyncComponent} from "vue/dist/vue.esm-bundler.js";
-
-export default {
-  name: "r-code-editor-run",
-  props: {
-    template: String,
-    script: String
-  },
-  computed: {
-    page() {
-      let temp = this.template || ''
-      let scr = this.script || 'name:"test"'
-      scr = this.$helper.replacer(scr, '&lt;', '<')
-      scr = this.$helper.replacer(scr, '&gt;', '>')
-      return defineAsyncComponent(() =>
-          new Promise((resolve, reject) => {
-            resolve({
-              template: temp,
-              ...eval('Object({' + scr + '})')
-            })
-          }))
-    }
-  }
-};
-</script>
+<template>
+  <component :is="page"></component>
+</template>
+<script>
+import {defineAsyncComponent} from "vue/dist/vue.esm-bundler.js";
+
+export default {
+  name: "r-code-editor-run",
+  props: {
+    template: String,
+    script: String,
+    style: String,
+    id: String,
+  },
+  computed: {
+    page() {
+      if (this.style) {
+        let children = document.querySelectorAll(`[f='${this.id}']`);
+        if (children) {
+          let childArray = Array.prototype.slice.call(children);
+
+          childArray.forEach(function (child) {
+            child.parentNode.removeChild(child);
+          });
+        }
+        let s = document.createElement("style");
+        s.innerText = this.style;
+        s.setAttribute("f", this.id);
+        s.setAttribute("type", "text/css");
+        window.document.head.append(s);
+      }
+      let temp = this.template || "";
+      let scr = this.script || 'name:"test"';
+      return defineAsyncComponent(
+          () =>
+              new Promise((resolve) => {
+                resolve({
+                  template: temp,
+                  ...eval("Object({" + scr + "})"),
+                });
+              })
+      );
+    },
+  },
+};
+</script>

package/components/float/index.vue

@@ -441,23 +441,23 @@
     @import "../../style/_include.scss";
 
     .#{$prefix}float {
+      width: 100%;
+      max-width: 100%;
+      max-height: 100vh;
+      height: 100%;
+      overflow: hidden;
+      outline: none;
+      border-radius: map-get($borders, 'sm');
+
+      &.float-bordered {
+        border: 1px solid #3a3e3a;
+      }
+
+      .float-container {
         width: 100%;
-        max-width: 100%;
-        max-height: 100vh;
         height: 100%;
-        overflow: hidden;
-        outline: none;
-        border-radius: 4px;
 
-        &.float-bordered {
-            border: 1px solid #3a3e3a;
-        }
-
-        .float-container {
-            width: 100%;
-            height: 100%;
-
-            &.in-zoom {
+        &.in-zoom {
                 transition: all 0.5s ease-in-out;
             }
         }

package/components/form/checkbox.vue

@@ -85,7 +85,7 @@ emits:['update:modelValue'],
 
   .checkbox-input {
     text-align: center;
-    border-radius: 4px;
+    border-radius: map-get($borders, 'sm');
     transition: .3s all ease-in-out;
 
     &.x-small {

package/components/form/colorPicker/picker.vue

@@ -166,7 +166,7 @@ export default {
 
 .color-box {
   padding: 10px;
-  border-radius: 4px;
+  border-radius: map-get($borders, 'sm');
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   z-index: 1;
 

package/components/form/input.vue

@@ -299,7 +299,7 @@ export default {
   margin-top: 20px;
 
   &.input-ltr {
-    input {
+    input, textarea {
       direction: ltr;
     }
   }
@@ -394,12 +394,12 @@ export default {
 
     &:not(.input-tile) {
       padding: 0 16px;
-      border-radius: 20px;
+      border-radius: map-get($borders, 'xl');
     }
 
     &.input-tile {
       padding: 0 8px;
-      border-radius: 4px;
+      border-radius: map-get($borders, 'sm');
     }
   }
 
@@ -526,7 +526,7 @@ export default {
       height: auto;
 
       &:not(.input-tile) {
-        border-radius: 15px;
+        border-radius: map-get($borders, 'xl');
       }
     }
 

package/components/form/number.vue

@@ -148,7 +148,7 @@ export default {
 
   .input-tile {
     .#{$prefix}btn {
-      border-radius: 4px;
+      border-radius: map-get($borders, 'sm');
     }
   }
 }

package/components/form/radioInput.vue

@@ -86,7 +86,7 @@ export default {
     text-align: center;
     width: 25px;
     height: 25px;
-    border-radius: 4px;
+    border-radius: map-get($borders, 'sm');
     transition: .3s all ease-in-out;
   }
 

package/components/html2pdf/index.vue

@@ -261,20 +261,20 @@ winPrint.close();
 
     .#{$prefix}html2pdf {
         .preview {
-            position: fixed;
-            width: 65%;
-            min-width: 600px;
-            height: 80vh;
-            top: 100px;
-            z-index: 9999999;
-            left: 50%;
-            transform: translateX(-50%);
-            border-radius: 5px;
-            box-shadow: 0px 0px 10px #00000048;
+          position: fixed;
+          width: 65%;
+          min-width: 600px;
+          height: 80vh;
+          top: 100px;
+          z-index: 9999999;
+          left: 50%;
+          transform: translateX(-50%);
+          border-radius: map-get($borders, 'sm');
+          box-shadow: 0px 0px 10px #00000048;
 
-            iframe {
-                border: 0;
-            }
+          iframe {
+            border: 0;
+          }
         }
     }
 </style>

package/components/list/style.scss

@@ -3,7 +3,7 @@
 $item-height: 48px;
 
 .#{$prefix}list {
-  border-radius: 4px;
+  border-radius: map-get($borders, 'sm');
   display: block;
   padding: 8px 0;
   will-change: box-shadow;
@@ -11,9 +11,9 @@ $item-height: 48px;
   position: relative;
   max-width: 100%;
 
-    .list-item {
-      &.list-item-active {
-        background-color: var(--color-table-active)
+  .list-item {
+    &.list-item-active {
+      background-color: var(--color-table-active)
       }
 
       &:hover {
@@ -65,7 +65,7 @@ $item-height: 48px;
 
   &.list-rounded {
     .list-item {
-      border-radius: 30px;
+      border-radius: map-get($borders, 'xl');
     }
   }
 }

package/components/menu/index.vue

@@ -174,7 +174,7 @@ export default {
     max-height: 200px;
     overflow-y: auto;
     background-clip: padding-box;
-    border-radius: 8px;
+    border-radius: map-get($borders, 'sm');
 
     &-item {
       cursor: pointer;

package/components/skeleton/index.vue

@@ -55,7 +55,7 @@ export default {
   }
 
   .sk-card {
-    border-radius: 4px;
+    border-radius: map-get($borders, 'sm');
   }
 
   .sk-line {

package/directive/title/style.scss

@@ -7,7 +7,7 @@
   background: #181818;
   color: #FFF;
   position: fixed;
-  border-radius: 4px;
+  border-radius: map-get($borders, 'sm');
   font-size: 14px;
   font-family: inherit;
   transform: translateX(-50%);

package/package.json

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

package/style/app.scss

@@ -29,12 +29,12 @@ body {
 
 ::-webkit-scrollbar-track:hover {
   border: 1px solid rgba(100, 100, 100, 0.4);
-  border-radius: 4px;
+  border-radius: map-get($borders, 'sm');
 }
 
 ::-webkit-scrollbar-thumb {
   background: rgba(100, 100, 100, 0.4);
-  border-radius: 4px;
+  border-radius: map-get($borders, 'sm');
 }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -265,7 +265,7 @@ $color-text: var(--color-two-text);
     font-size: 17px;
     line-height: 22px;
     border: 2px solid grey;
-    border-radius: 2px;
+    border-radius: map-get($borders, 'sm');
     background-color: #283739;
     color: white;
     padding: 0em 1em;

package/style/variables/base.scss

@@ -17,11 +17,11 @@ $negative-spacers: ();
 
 $borders: (
         'none': 0,
-        'xs': 2px,
-        'sm': 5px,
-        'md': 7px,
-        'lg': 12px,
-        'xl': 19px,
+        'xs': .125rem,
+        'sm': .25rem,
+        'md': .5rem,
+        'lg': 1rem,
+        'xl': 1.5rem,
         'pill': 9999px,
         'circle': 50%
 ) !default;
@@ -30,27 +30,47 @@ $cursor:('pointer','auto','grab','grabbing')!default;
 
 $widths: (
         'full': 100%,
+        '95': 95%,
         '90': 90%,
+        '85': 85%,
         '80': 80%,
+        '75': 75%,
         '70': 70%,
+        '65': 65%,
         '60': 60%,
+        '55': 55%,
         '50': 50%,
+        '45': 45%,
         '40': 40%,
+        '35': 35%,
         '30': 30%,
+        '25': 25%,
         '20': 20%,
-        '10': 10%
+        '15': 15%,
+        '10': 10%,
+        '5': 5%
 ) !default;
 $heights: (
         'full': 100%,
+        '95': 95%,
         '90': 90%,
+        '85': 85%,
         '80': 80%,
+        '75': 75%,
         '70': 70%,
+        '65': 65%,
         '60': 60%,
+        '55': 55%,
         '50': 50%,
+        '45': 45%,
         '40': 40%,
+        '35': 35%,
         '30': 30%,
+        '25': 25%,
         '20': 20%,
-        '10': 10%
+        '15': 15%,
+        '10': 10%,
+        '5': 5%
 ) !default;
 
 $grid-breakpoints: (
@@ -239,7 +259,7 @@ $toolbar-content-padding-x: 16px !default;
 $toolbar-height: 80px !default;
 
 //modal
-$border-modal: 7px !default;
+$border-modal: map-get($borders, 'md') !default;
 
 //bottom navigation
 $bottom-nav-btn-min-width: 56px !default;

package/components/codeEditor/highlightScript.vue

@@ -1,134 +0,0 @@
-<template>
-    <div :class="`${$r.prefix}highlight-script`" v-html="build"></div>
-</template>
-<script>
-    export default {
-        name: 'highlightScript',
-        props: {
-            code: String,
-            runnable:Boolean
-        },
-        data() {
-            return {}
-        },
-        computed: {
-            build() {
-                let data = this.code.split('')
-                let str = this.code.trim()
-                if (str.substr(0, 1) === '{') {
-                    str = str.substr(1, str.length - 2)
-                }
-                let res = this.runnable?'<span class="color-orange">&lt;script&gt;\n export default{</span>':''
-                let in_quta = false
-
-                data.forEach((c, i) => {
-                    if (['=', '$', '&', '{', '}', '(', ')', '<', '>'].includes(c)) {
-                        res += '<span class="color-blue">' + c + '</span>'
-                    } else if ([',', ';', ':'].includes(c)) {
-                        res += '<span class="color-orange">' + c + '</span>'
-                    } else if (parseInt(c) > -1) {
-                        res += '<span class="color-number">' + c + '</span>'
-                    } else if ((c === '"' || c === "'") && !in_quta) {
-                        in_quta = c
-                        res += '<span class="color-green">' + c
-                    } else if (c === in_quta) {
-                        in_quta = false
-                        res += c + '</span>'
-                    } else {
-                        res += c
-                    }
-                })
-                res += this.runnable?'\n<span class="color-orange">}\n&lt;/script&gt;</span>':''
-                res = this.$helper.replacer(res, ' var ', ' <span class="color-orange">var</span> ')
-                res = this.$helper.replacer(res, '<span class="color-blue">$</span>r.', '<span class="color-blue">$r.</span>')
-                res = this.$helper.replacer(res, ' let ', ' <span class="color-orange">let</span> ')
-                res = this.$helper.replacer(res, ' const ', ' <span class="color-orange">const</span> ')
-                res = this.$helper.replacer(res, ' return ', ' <span class="color-orange">return</span> ')
-                res = this.$helper.replacer(res, ' this.', ' <span class="color-orange">this.</span>')
-                let regex = /(\/\*[\w\'\s\r\n\*]*\*\/)|(\/\/[\w\s\']*)|(\<![\-\-\s\w\>\/]*\>)/g
-                let matched = res.matchAll(regex)
-                for (const match of matched) {
-                    res = this.$helper.replacer(res, match[0], ' <span class="color-comment">' + match[0] + '</span>')
-                }
-
-                this.strToObj(str).forEach((item)=>{
-                    res = this.$helper.replacer(res, item, ' <span class="color-purple">'+item+'</span>')
-                })
-
-                return res
-            }
-        },
-        methods: {
-            strToObj(str) {
-                str = this.$helper.replacer(str, ' ', '')
-                str = this.$helper.replacer(str, "\n", '')
-                str = this.$helper.replacer(str, "\r", '')
-                let open = 0
-                let pre = 0
-                let to = 0
-                let items = []
-                const s = str
-                s.split('').forEach((c, i) => {
-                    to++
-                    if (c === '{') {
-                        open++
-                    }
-                    if (c === '}') {
-                        open--
-                    }
-                    if (open === 0 && c === ',') {
-                        let new_str = str.substr(pre, to - 1)
-                        const o = new_str.indexOf(':')
-                        const f = new_str.indexOf('(')
-                        if ((f > 0 && f < o) || o < 0) {
-                            new_str = new_str.substr(0, f)
-                        } else {
-                            new_str = new_str.substr(0, o)
-                        }
-                        items.push(new_str)
-                        pre = i + 1
-                        to = 0
-                    }
-                })
-                let new_str = str.substr(pre, str.length)
-                const o = new_str.indexOf(':')
-                const f = new_str.indexOf('(')
-                if ((f > 0 && f < o) || o < 0) {
-                    new_str = new_str.substr(0, f)
-                } else {
-                    new_str = new_str.substr(0, o)
-                }
-                items.push(new_str)
-                return items
-            },
-        }
-    }
-</script>
-<style lang="scss">
-    @import "../../style/include";
-
-    .#{$prefix}highlight-script {
-        .color-green {
-            color: #0cde27;
-        }
-
-        .color-orange {
-            color: orange;
-        }
-
-        .color-blue {
-            color: #0c9ddc;
-        }
-
-        .color-number {
-            color: #7ad5ff;
-        }
-        .color-purple {
-            color: #d2a8ee;
-        }
-
-        .color-comment{
-            color: #898d8c;
-        }
-    }
-</style>