renusify 2.3.2 → 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/calendar/month.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="d-flex flex-wrap">
+  <div class="d-flex flex-wrap h-space-around">
     <r-btn v-for="i in ls"
            :key="i"
            outlined
-           class="w-30 ma-2"
+           class="w-25 ma-1"
            :class="{'color-one':i===modelValue}"
            @click.prevent="emit(i)">
       {{

package/components/calendar/year.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="calendar-year-tab d-flex flex-wrap">
+  <div class="calendar-year-tab d-flex flex-wrap h-space-around">
     <r-btn v-for="i in 200"
            :key="i"
-           class="w-30 ma-2"
+           class="w-25 ma-1"
            :class="{'color-one year-select':modelValue+i-100===modelValue}"
            outlined
            @click.prevent="emit(modelValue+i-100)">

package/components/codeEditor/highlightCss.vue

@@ -8,55 +8,43 @@
         spellcheck="false"
         @keydown="setTab"
     ></textarea>
-    <div class="text-preview" v-html="build"></div>
+    <div class="text-preview" v-html="code"></div>
   </div>
 </template>
 
 <script>
 import mixin from './mixin.js'
+import mixin_h from '../highlight/mixin.js'
 
 export default {
   name: "highlight-css",
   props: {
     modelValue: String,
   },
-  mixins: [mixin],
+  mixins: [mixin, mixin_h],
   data() {
     return {
       d: this.modelValue,
-      runnable: false,
       code: "",
     };
   },
+  async created() {
+    if (this.modelValue) {
+      await this.build_code()
+    }
+  },
   watch: {
     modelValue: function () {
       this.d = this.modelValue;
     },
-    d: function () {
+    d: async function () {
+      await this.build_code()
       this.$emit("update:modelValue", this.d);
     },
   },
-  computed: {
-    build() {
-      if (!this.d) {
-        return "";
-      }
-      let res = this.d
-      res = this.re_quote(res);
-      res = this.re_func(res);
-      res = this.re_class(res);
-      res = this.re_id(res);
-      res = this.re_comment(res);
-      res = this.re_special(res, /([{};,:])/g, 'color-func2');
-      return res;
-    },
-  },
   methods: {
-    re_class(res) {
-      return res = res.replace(/(\.+[_a-zA-Z0-9-:#{}$].*)\{/g, '<span class="color-func2 code-editor-span">$1</span>{')
-    },
-    re_id(res) {
-      return res = res.replace(/(#+[_a-zA-Z0-9-:#{}$].*)\{/g, '<span class="color-func2 code-editor-span">$1</span>{')
+    async build_code() {
+      this.code = await this.highlight(this.d, "css", true)
     }
   },
 };

package/components/codeEditor/highlightHtml.vue

@@ -8,55 +8,44 @@
         spellcheck="false"
         @keydown="setKey"
     ></textarea>
-    <div class="text-preview" v-html="build"></div>
+    <div class="text-preview" v-html="code"></div>
   </div>
 </template>
 
 <script>
 import mixin from './mixin.js'
+import mixin_h from '../highlight/mixin.js'
 
 export default {
   name: "highlight-html",
   props: {
     modelValue: String,
   },
-  mixins: [mixin],
+  mixins: [mixin, mixin_h],
   data() {
     return {
       d: this.modelValue,
-      runnable: false,
-      code: "",
-      openTag: null
+      code: ""
     };
   },
+  async created() {
+    if (this.modelValue) {
+      await this.build_code()
+    }
+  },
   watch: {
     modelValue: function () {
       this.d = this.modelValue;
     },
-    d: function () {
+    d: async function () {
+      await this.build_code()
       this.$emit("update:modelValue", this.d);
     },
   },
-  computed: {
-    build() {
-      if (!this.d) {
-        return "";
-      }
-      let data = this.d;
-      data = this.$helper.replacer(data, "<", "&lt;");
-      data = this.$helper.replacer(data, ">", "&gt;");
-      let res = data;
-      res = this.re_quote(res)
-
-      res = this.re_comment(res);
-      res = this.re_func(res);
-
-      res = res.replace(/(&lt;+[\s\S]+&gt;)/g, '<span class="color-orange code-editor-span">$1</span>')
-      res = res.replace(/\{\{([^}]+)}}/g, '<span class="color-blue code-editor-span">{{$1}}</span>')
-      return res;
-    },
-  },
   methods: {
+    async build_code() {
+      this.code = await this.highlight(this.d, "html", true)
+    },
     setKey(event) {
       if (event.key === "<") {
         this.openTag = event.target.selectionEnd
@@ -82,10 +71,6 @@ export default {
         return false;
       }
       return this.setTab(event)
-    },
-    re_comment(res) {
-      let regex = /(&lt;!--+[\s\S]+--&gt;)/g;
-      return res.replace(regex, '<span class="color-comment code-editor-span">$1</span>')
     }
   },
 };

package/components/codeEditor/highlightJs.vue

@@ -8,55 +8,44 @@
         spellcheck="false"
         @keydown="setTab"
     ></textarea>
-    <div class="text-preview" v-html="build"></div>
+    <div class="text-preview" v-html="code"></div>
   </div>
 </template>
 
 <script>
 import mixin from './mixin.js'
+import mixin_h from '../highlight/mixin.js'
 
 export default {
   name: "highlight-script",
   props: {
     modelValue: String,
   },
-  mixins: [mixin],
+  mixins: [mixin, mixin_h],
   data() {
     return {
       d: this.modelValue,
-      runnable: false,
       code: "",
     };
   },
+  async created() {
+    if (this.modelValue) {
+      await this.build_code()
+    }
+  },
   watch: {
     modelValue: function () {
       this.d = this.modelValue;
     },
-    d: function () {
+    d: async function () {
+      await this.build_code()
       this.$emit("update:modelValue", this.d);
     },
   },
-  computed: {
-    build() {
-      if (!this.d) {
-        return "";
-      }
-
-      let res = this.d;
-      res = this.$helper.replacer(res, "<", "&lt;");
-      res = this.$helper.replacer(res, ">", "&gt;");
-      res = this.re_quote(res);
-      res = this.re_special(res, /([{}\[\]])/g);
-      res = this.re_words(res, ['import', 'from', 'delete', 'window', 'new', 'var', 'let', 'const', 'return', 'true', 'false', 'this', 'null', 'String', 'Boolean', 'Object']);
-      res = this.re_comment(res);
-      res = this.re_func(res);
-      res = this.re_number(res);
-      res = this.re_special(res, /([(),])/g, 'color-func2');
-      res = res.replace(/(&lt;)/g, '<span class="color-orange code-editor-span">$1</span>')
-      res = res.replace(/(&gt;)/g, '<span class="color-orange code-editor-span">$1</span>')
-
-      return res;
-    },
+  methods: {
+    async build_code() {
+      this.code = await this.highlight(this.d, "js", true)
+    }
   }
 };
 </script>