renusify 1.2.2 → 1.2.4

package/components/app/notify/notification.vue

@@ -61,15 +61,17 @@ export default {
   }
 }
 </script>
-<style scoped>
-    .notify-msg {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        padding: 10px;
-        border-radius: 5px;
-        position: relative;
-        z-index: 9999;
-        margin:0.3rem 0;
-    }
+<style lang="scss">
+@import "renusify/style/_include.scss";
+
+.notify-msg {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 10px;
+  border-radius: map-get($borders, 'md');
+  position: relative;
+  z-index: 9999;
+  margin: 0.3rem 0;
+}
 </style>

package/components/button/style.scss

@@ -1,7 +1,7 @@
 @import "renusify/style/_include.scss";
 
 $btn-active-opacity: 0.18 !default;
-$btn-border-radius: 4px !default;
+$btn-border-radius: map-get($borders, 'sm') !default;
 $btn-focus-opacity: 0.24 !default;
 $btn-font-size: .875rem !default;
 $btn-font-weight: 500 !default;
@@ -10,7 +10,7 @@ $btn-letter-spacing: .07em !default;
 $btn-icon-font-size: 18px !default;
 $btn-icon-padding: 12px !default;
 $btn-outline-border-width: thin !default;
-$btn-rounded-border-radius: 28px !default;
+$btn-rounded-border-radius: 2rem !default;
 $btn-sizes: (
         'x-small': 20,
         'small': 30,
@@ -73,7 +73,6 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
 
   &:not(.btn-text):not(.btn-outlined) {
     background-color: var(--color-sheet);
-    color: var(--color-text-primary);
   }
 
   &.btn-outlined.btn-text {

package/components/chat/MessageList.vue

@@ -124,13 +124,13 @@ export default {
         }
 
         .msg-select {
-            animation: color .7s;
-            animation-iteration-count: infinite;
-            border-radius: 4px;
+          animation: color .7s;
+          animation-iteration-count: infinite;
+          border-radius: map-get($borders, 'sm');
 
-            .message-text {
-                opacity: .4;
-            }
+          .message-text {
+            opacity: .4;
+          }
         }
     }
 

package/components/chat/chatMsg.vue

@@ -119,7 +119,7 @@ export default {
     background: #fff;
     color: black;
     padding: 5px 10px;
-    border-radius: 15px;
+    border-radius: map-get($borders, 'lg');
     max-width: 80%;
     overflow-wrap: break-word;
     white-space: pre-wrap;
@@ -146,7 +146,7 @@ export default {
     .message-text {
       margin-top: 0px;
       margin-bottom: 2px;
-      border-radius: 4px !important;
+      border-radius: map-get($borders, 'sm') !important;
     }
   }
 

package/components/chip/style.scss

@@ -7,7 +7,7 @@ $chip-icon-margin-before: -6px !default;
 $chip-icon-right-margin-after: -4px !default;
 $chip-icon-right-margin-before: 8px !default;
 $chip-icon-size: 24px !default;
-$chip-label-border-radius: 4px !default;
+$chip-label-border-radius: map-get($borders, 'sm') !default;
 $chip-link-focus-opacity: 0.32 !default;
 $chip-pill-avatar-margin-after: 8px !default;
 $chip-pill-avatar-margin-before: -12px !default;

package/components/codeEditor/highlightCss.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="code-editor-highlight ltr">
+    <textarea
+        v-model="d"
+        autocapitalize="off"
+        autocomplete="off"
+        autocorrect="off"
+        spellcheck="false"
+    ></textarea>
+    <div class="text-preview" v-html="build"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "highlight-css",
+  props: {
+    modelValue: String,
+  },
+  data() {
+    return {
+      d: this.modelValue,
+      runnable: false,
+      code: "",
+    };
+  },
+  watch: {
+    modelValue: function () {
+      this.d = this.modelValue;
+    },
+    d: function () {
+      this.$emit("update:model-value", this.d);
+    },
+  },
+  computed: {
+    build() {
+      if (!this.d) {
+        return "";
+      }
+      const data = this.d.split("");
+      let res = "";
+      let in_quta = false;
+      data.forEach((c) => {
+        if (["=", "&"].includes(c)) {
+          res += '<span class="color-blue code-editor-span">' + c + "</span>";
+        } else if ([",", ";", ":"].includes(c)) {
+          res += '<span class="color-orange code-editor-span">' + c + "</span>";
+        } else if (parseInt(c) > -1) {
+          res += '<span class="color-number code-editor-span">' + c + "</span>";
+        } else if ((c === '"' || c === "'" || c === "`") && !in_quta) {
+          in_quta = c;
+          res += '<span class="color-green code-editor-span">' + c;
+        } else if (c === in_quta) {
+          in_quta = false;
+          res += c + "</span>";
+        } else {
+          res += c;
+        }
+      });
+
+      res = this.re_class(res);
+      res = this.re_id(res);
+      res = this.re_comment(res);
+
+      return res;
+    },
+  },
+  methods: {
+    re_class(res) {
+      let regex = /\.-?[_a-zA-Z]+[_a-zA-Z0-9-]*\s*\{/g;
+      let matched = res.matchAll(regex);
+      for (const match of matched) {
+        res = this.$helper.replacer(
+            res,
+            match[0],
+            '<span class="color-func2 code-editor-span">' +
+            match[0].slice(0, match[0].indexOf("{")) +
+            "</span>{"
+        );
+      }
+      return res;
+    },
+    re_id(res) {
+      let regex = /#-?[_a-zA-Z]+[_a-zA-Z0-9-]*\s*\{/g;
+      let matched = res.matchAll(regex);
+      for (const match of matched) {
+        res = this.$helper.replacer(
+            res,
+            match[0],
+            '<span class="color-func2 code-editor-span">' +
+            match[0].slice(0, match[0].indexOf("{")) +
+            "</span>{"
+        );
+      }
+      return res;
+    },
+    re_comment(res) {
+      //eslint-disable-next-line
+      let regex = /(\/\*[\w\'\s\r\n\*]*\*\/)|(\/\/[\w\s\']*)/g;
+      let matched = res.matchAll(regex);
+      for (const match of matched) {
+        res = this.$helper.replacer(
+            res,
+            match[0],
+            '<span class="color-comment code-editor-span">' + match[0] + "</span>"
+        );
+      }
+      return res;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>

package/components/codeEditor/highlightHtml.vue

@@ -1,66 +1,167 @@
-<template>
-    <div :class="`${this.$r.prefix}highlight-html`" v-html="build"></div>
-</template>
-<script>
-    export default {
-        name: 'highlightHtml',
-        props: {
-            code: String,
-            runnable: Boolean
-        },
-        data() {
-            return {}
-        },
-        computed: {
-            build() {
-                let data = this.code.split('')
-                let res = ''
-                let in_quta = false
-                data.forEach((c, i) => {
-                    if (c === '=') {
-                        res += '<span class="color-blue">=</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.$helper.replacer(res, '&lt;', '<span class="color-orange">&lt;')
-                res = this.$helper.replacer(res, '&gt;', '&gt;</span>')
-                res = this.$helper.replacer(res, '{{', '<span class="color-blue">{{')
-                res = this.$helper.replacer(res, '}}', '}}</span>')
-                res = this.$helper.replacer(res, '$r.', '<span class="color-blue">$r.</span>')
-                let regex = /\+(.*?)\+/g
-                let matched = res.matchAll(regex)
-                for (const match of matched) {
-                    res = this.$helper.replacer(res, match[0], ' <span class="color-blue">' + match[0] + '</span>')
-                }
-                return (this.runnable ? '<span class="color-green">&lt;template&gt;</span>' : '') + res + (this.runnable ? '\n<span class="color-green">&lt;/template&gt;</span>' : '')
-            }
-        }
-    }
-</script>
-<style lang="scss">
-    @import "../../style/include";
-
-    .#{$prefix}highlight-html {
-        white-space: break-spaces;
-
-        .color-green {
-            color: #0cde27;
-        }
-
-        .color-orange {
-            color: orange;
-        }
-
-        .color-blue {
-            color: #7ad5ff;
-        }
-    }
-</style>
+<template>
+  <div class="code-editor-highlight ltr">
+    <textarea
+        v-model="d"
+        autocapitalize="off"
+        autocomplete="off"
+        autocorrect="off"
+        spellcheck="false"
+    ></textarea>
+    <div class="text-preview" v-html="build"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "highlight-html",
+  props: {
+    modelValue: String,
+  },
+  data() {
+    return {
+      d: this.modelValue,
+      runnable: false,
+      code: "",
+    };
+  },
+  watch: {
+    modelValue: function () {
+      this.d = this.modelValue;
+    },
+    d: function () {
+      this.$emit("update:model-value", this.d);
+    },
+  },
+  computed: {
+    build() {
+      if (!this.d) {
+        return "";
+      }
+      let data = this.d;
+      data = this.$helper.replacer(data, "<", "&lt;");
+      data = this.$helper.replacer(data, ">", "&gt;");
+      data = data.split("");
+      let res = "";
+      let in_quta = false;
+      data.forEach((c) => {
+        if (c === "=") {
+          res += '<span class="color-blue">=</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.$helper.replacer(
+          res,
+          "&lt;",
+          '<span class="color-orange code-editor-span">&lt;'
+      );
+      res = this.$helper.replacer(res, "&gt;", "&gt;</span>");
+      res = this.$helper.replacer(
+          res,
+          "{{",
+          '<span class="color-blue code-editor-span">{{'
+      );
+      res = this.$helper.replacer(res, "}}", "}}</span>");
+
+      let regex = /\+(.*?)\+/g;
+      let matched = res.matchAll(regex);
+      for (const match of matched) {
+        res = this.$helper.replacer(
+            res,
+            match[0],
+            '<span class="color-blue code-editor-span">' + match[0] + "</span>"
+        );
+      }
+      res = this.re_words(res);
+      res = this.re_comment(res);
+      res = this.re_func(res);
+      return res;
+    },
+  },
+  methods: {
+    re_words(res) {
+      res = this.$helper.replacer(
+          res,
+          " window.",
+          ' <span class="color-orange code-editor-span">window</span>.'
+      );
+      res = this.$helper.replacer(
+          res,
+          " new ",
+          ' <span class="color-orange code-editor-span">new</span> '
+      );
+      res = this.$helper.replacer(
+          res,
+          " true",
+          ' <span class="color-orange code-editor-span">true</span>'
+      );
+      res = this.$helper.replacer(
+          res,
+          " false",
+          ' <span class="color-orange code-editor-span">false</span>'
+      );
+
+      return res;
+    },
+    re_comment(res) {
+      let regex = /&lt;!--(.*?)--&gt;/g;
+      let matched = res.matchAll(regex);
+      for (const match of matched) {
+        res = this.$helper.replacer(
+            res,
+            match[0],
+            '<span class="color-comment code-editor-span">' + match[0] + "</span>"
+        );
+      }
+      return res;
+    },
+    re_func(res) {
+      //function like Date()
+      let regex = /([a-zA-Z_{1}][a-zA-Z0-9_]+)[ ]{0,1}(?=\()/g;
+      let matched = res.matchAll(regex);
+      for (const match of matched) {
+        res = this.$helper.replacer(
+            res,
+            match[0],
+            '<span class="color-func2 code-editor-span">' + match[0] + "</span>"
+        );
+      }
+
+      //function like $r $d()
+      regex = /(\$([a-zA-z0-9]*)[.|(])/g;
+      matched = res.matchAll(regex);
+      for (const match of matched) {
+        res = this.$helper.replacer(
+            res,
+            match[0].substr(0, match[0].length - 1),
+            '<span class="color-func code-editor-span">' +
+            match[0].substr(0, match[0].length - 1) +
+            "</span>"
+        );
+      }
+      res = this.$helper.replacer(
+          res,
+          "(",
+          '<span class="color-func2 code-editor-span">(</span>'
+      );
+      res = this.$helper.replacer(
+          res,
+          ")",
+          '<span class="color-func2 code-editor-span">)</span>'
+      );
+      return res;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>