renusify 2.3.1 → 2.4.0

package/components/form/dateInput/month.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="d-flex flex-wrap">
-    <r-btn v-for="i in 12"
+  <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="{'color-one-text':i+p===modelValue}"
-           @click.prevent="emit(i+p)">
+           class="w-25 ma-1"
+           :class="{'color-one':i===modelValue}"
+           @click.prevent="emit(i)">
       {{
-        $d(new Date(year, i + p, 1, 0, timezoneOffset), 'month', locale)
+      $d(new Date(year, i, 1, 0, timezoneOffset), 'month', locale)
       }}
     </r-btn>
   </div>
@@ -22,17 +22,41 @@ export default {
     month: Number,
     year: Number
   },
-  emits:['update:modelValue'],
+  emits: ['update:modelValue'],
   data() {
     return {
-      p: 0
+      ls: []
     }
   },
   beforeMount() {
-    const c = this.$d(new Date(this.year, 1, 1, 0, this.timezoneOffset), 'me', this.locale)
-    if (c > 1) {
-      this.p = (1 - c)
+    const year = this.$d(new Date(this.year, this.month, 5, 0, this.timezoneOffset), 'ye', this.locale)
+    let ls = []
+    let first = 0
+    let n = 0
+    while (true) {
+      n++
+      if (n > 100) {
+        break
+      }
+      const y = this.$d(new Date(this.year, first, 5, 0, this.timezoneOffset), 'ye', this.locale)
+      const m = parseInt(this.$d(new Date(this.year, first, 5, 0, this.timezoneOffset), 'me', this.locale))
+      if (y === year && m === 1) {
+        break
+      }
+      if (y > year) {
+        first--
+      } else if (y < year) {
+        first++
+      } else if (m > 1) {
+        first--
+      } else {
+        first++
+      }
     }
+    for (let i = 0; i < 12; i++) {
+      ls.push(first + i)
+    }
+    this.ls = ls
   },
   methods: {
     emit(n) {

package/components/form/dateInput/year.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="d-flex flex-wrap">
-    <r-btn v-for="i in 12"
+  <div class="date-picker-year d-flex flex-wrap h-space-around">
+    <r-btn v-for="i in 200"
            :key="i"
-           class="w-30 ma-2"
-           :class="{'color-one-text':modelValue+i-6===modelValue}"
+           class="w-25 ma-1"
+           :class="{'color-one year-select':modelValue+i-100===modelValue}"
            outlined
-           @click.prevent="emit(modelValue+i-6)">
+           @click.prevent="emit(modelValue+i-100)">
       {{
-        $d(new Date(modelValue + i - 6, 1, 1, 0, timezoneOffset), 'year', locale)
+      $d(new Date(modelValue + i - 100, month, 5, 0, timezoneOffset), 'year', locale)
       }}
     </r-btn>
   </div>
@@ -22,10 +22,16 @@ export default {
     month: Number
   },
   emits:['update:modelValue'],
+  mounted() {
+    let el = document.querySelector('.year-select')
+    if (el) {
+      el.scrollIntoView(true)
+    }
+  },
   methods: {
     emit(n) {
-      this.$emit('update:modelValue', n)
+      this.$emit('update:modelValue', n - this.modelValue)
     }
   }
 }
-</script>
+</script>

package/components/form/groupInput/index.js

@@ -1,4 +1,5 @@
 export * as rGroupInput from './index.vue'
 
 export * as l_btn from '../../button/index.js'
-export * as l_icon from '../../icon/index.js'
+export * as l_icon from '../../icon/index.js'
+export * as d_sortable from '../../../directive/sortable/index.js'

package/components/form/groupInput/index.vue

@@ -4,6 +4,7 @@
            hide>
     <div class="w-full">
       <span v-if="label" class="group-input-label">{{ label }}</span>
+      <div :key="key" v-sortable="{grab:'.grab-btn-group-input',end:end}">
       <div class="group-holder" v-for="(item,i) in modelValue" :key="i">
         <div class="group-slot">
           <slot :item="item" :index="i" :disableDel="disDel">
@@ -17,18 +18,15 @@
         </slot>
       </div>
         <div class="group-action">
-          <r-btn icon text>
-            <r-icon v-html="$r.icons.chevron_up" :class="{'icon-disabled':i===0}" @click.prevent="up(i)"></r-icon>
-          </r-btn>
-          <r-btn icon text>
-            <r-icon v-html="$r.icons.chevron_down" :class="{'icon-disabled':i===modelValue.length-1}"
-                    @click.prevent="down(i)"></r-icon>
+          <r-btn icon text class="grab-btn-group-input">
+            <r-icon v-html="$r.icons.drag"></r-icon>
           </r-btn>
           <r-btn v-if="!disableItems.includes(itemKey?item[itemKey]:'')" icon text @click.prevent="del(i)">
             <r-icon v-html="$r.icons.delete" class="color-error-text"></r-icon>
           </r-btn>
         </div>
       </div>
+      </div>
       <div class="mt-5" :class="addBtnClass">
         <transition name="scale">
           <r-btn v-if="show_add" class="color-success" icon @click.prevent="add">
@@ -55,6 +53,7 @@ export default {
   emits:['update:modelValue','add','delete'],
   data() {
     return {
+      key: 0,
       disabledDel: {}
     }
   },
@@ -71,6 +70,14 @@ export default {
     }
   },
   methods: {
+    end(e) {
+      let a = []
+      for (let i = 0; i < e.length; i++) {
+        a.push(this.modelValue[parseInt(e[i])])
+      }
+      this.$emit('update:modelValue', a)
+      this.key++
+    },
     t(k) {
       if (this.translate) {
         return this.$t(k)
@@ -104,32 +111,6 @@ export default {
       this.$emit('delete', i)
       this.$emit('update:modelValue', a)
     },
-    up(i) {
-      if (i === 0) {
-        return
-      }
-      let a = this.modelValue || []
-      a = this.array_move(a, i, i - 1)
-      this.$emit('update:modelValue', a)
-    },
-    down(i) {
-      if (i === this.modelValue.length - 1) {
-        return
-      }
-      let a = this.modelValue || []
-      a = this.array_move(a, i, i + 1)
-      this.$emit('update:modelValue', a)
-    },
-    array_move(arr, old_index, new_index) {
-      if (new_index >= arr.length) {
-        let k = new_index - arr.length + 1;
-        while (k--) {
-          arr.push(undefined);
-        }
-      }
-      arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
-      return arr;
-    }
   }
 }
 </script>

package/components/form/jsonInput/index.vue

@@ -65,13 +65,13 @@
           :rows="modelValue?Object.keys(modelValue).length+5:5"
           @keydown="setTab"
       ></textarea>
-      <div class="text-preview" v-html="build"></div>
+      <div class="text-preview" v-html="code"></div>
     </div>
   </div>
 </template>
 <script>
 import {defineAsyncComponent} from 'vue'
-import mixin from '../../codeEditor/mixin.js'
+import mixin from '../../highlight/mixin.js'
 
 export default {
   name: 'r-json',
@@ -105,9 +105,15 @@ export default {
       modeForm: true,
       error: false,
       show: false,
+      code: "",
       info: {}
     }
   },
+  async created() {
+    if (this.modelValue) {
+      await this.build_code()
+    }
+  },
   watch: {
     modeForm: function () {
       this.lazyValue = JSON.stringify(this.modelValue || {}, null, 4)
@@ -123,9 +129,10 @@ export default {
       }
 
     },
-    lazyValue: function () {
+    lazyValue: async function () {
       try {
         this.error = false
+        await this.build_code()
         this.$emit('update:modelValue', JSON.parse(this.lazyValue))
       } catch (er) {
         this.error = true
@@ -139,17 +146,6 @@ export default {
       }
       return this.tile
     },
-    build() {
-      if (!this.lazyValue) {
-        return "";
-      }
-      let res = this.lazyValue
-      res = this.re_quote(res);
-      res = this.re_words(res, [true, false, null]);
-      res = this.re_number(res);
-      res = this.re_special(res, /([{},:\[\]])/g, 'color-orange');
-      return res;
-    },
     is_array() {
       if (this.baseArray) {
         return true
@@ -158,6 +154,9 @@ export default {
     }
   },
   methods: {
+    async build_code() {
+      this.code = await this.highlight(this.lazyValue, "json", true)
+    },
     open() {
       if (this.template) {
         let d = this.modelValue
@@ -288,18 +287,29 @@ export default {
       overflow: hidden;
     }
 
-    .color-orange {
+
+    .highlight-syn-deleted,
+    .highlight-syn-err,
+    .highlight-syn-var {
       color: var(--color-error);
     }
 
-    .color-green {
-      color: var(--color-success);
-    }
 
+    .highlight-syn-insert,
+    .highlight-syn-type,
+    .highlight-syn-func,
+    .highlight-syn-bool {
+      color: var(--color-warning);
+    }
 
-    .color-blue {
+    .highlight-syn-num, .highlight-numbers {
       color: var(--color-info);
     }
+
+
+    .highlight-syn-str {
+      color: var(--color-success);
+    }
   }
 }
 </style>

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

@@ -68,7 +68,7 @@
             <r-icon v-html="$r.icons.delete"></r-icon>
           </r-btn>
           <r-img
-              :src="'/'+img"
+              :src="img"
               alt="img"
               height="100"></r-img>
         </div>
@@ -117,6 +117,7 @@
                         :headers="headers"
                         :label="$t('image','renusify')"
                         :size="1"
+                        :rules="['required']"
                         :upload-link="uploadLink"
                         accept="image/*"></r-file-input>
           <r-text-input v-model="img_alt"
@@ -124,8 +125,6 @@
                         :rules="['required']"></r-text-input>
           <r-number-input v-model="img_width" :label="$t('width','renusify')"
                           :rules="['required']"></r-number-input>
-          <r-number-input v-model="img_height" :label="$t('height','renusify')"
-                          :rules="['required']"></r-number-input>
           <r-row class="h-end">
             <r-col class="col-auto">
               <r-btn class="color-error-text"
@@ -153,6 +152,7 @@
                         :headers="headers"
                         :label="$t('video','renusify')"
                         :size="1"
+                        :rules="['required']"
                         :upload-link="uploadLink"
                         accept="video/mp4,video/webm"></r-file-input>
           <r-number-input v-model="img_width" :label="$t('width','renusify')"
@@ -177,16 +177,46 @@
         </r-container>
       </r-form>
     </r-modal>
+    <r-modal v-model="showPre"
+             :closable="false"
+             :closebtn="false">
+      <r-form v-model="valid2">
+        <r-container>
+          <r-select-input v-model="lang" :items="langs"
+                          :label="$t('lang','renusify')"
+                          :rules="['required']"
+                          just-value></r-select-input>
+          <r-text-area v-model="code"
+                       :label="$t('code','renusify')"
+                       :rules="['required']"
+                       ltr></r-text-area>
+          <div class="text-end my-3">
+            <r-btn class="color-error-text"
+                   outlined
+                   @click.prevent="showPre=false">{{ $t('cancel', 'renusify') }}
+            </r-btn>
+            <r-btn :disabled="!valid2"
+                   class="color-success-text ms-2"
+                   outlined
+                   @click.prevent="handlePreForm()">{{ $t('send', 'renusify') }}
+            </r-btn>
+          </div>
+        </r-container>
+      </r-form>
+    </r-modal>
 
   </r-container>
 </template>
 
 <script>
 import './style.scss'
+import '../../highlight/style.scss'
+import mixin from "../../highlight/mixin";
 
 export default {
   name: 'r-text-editor',
   inheritAttrs: false,
+  mixins: [mixin],
   props: {
     uploadLink: {type: String, default: '/storage'},
     modelValue: {
@@ -221,12 +251,15 @@ export default {
       preSelected: null,
       currentPath: [],
       selectElm: null,
+      code: '',
+      lang: null,
+      showPre: false,
+      langs: ['asm', 'bash', 'bf', 'c', 'css', 'csv', 'diff', 'docker', 'git', 'go', 'html', 'http', 'ini', 'java', 'js', 'jsdoc', 'json', 'log', 'lua', 'make', 'pl', 'plain', 'py', 'regex', 'rs', 'sql', 'todo', 'toml', 'ts', 'uri', 'xml', 'yaml'],
       items_undo: {
         'undo': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12.5 8c-2.65 0-5.05 1-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88c3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8Z"/></svg>',
         'redo': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M18.4 10.6C16.55 9 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16a8.002 8.002 0 0 1 7.6-5.5c1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6Z"/></svg>',
       },
       items_handle: {
-        'DIV': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M13 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4h-2v6H9V4h4m0 6a2 2 0 0 0 2-2a2 2 0 0 0-2-2h-2v4h2Z"/></svg>',
         'insertDIV': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M4 6v13h16V6H4m14 11H6V8h12v9Z"/></svg>',
         'insertLINE': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M9 7h2v8h4v2H9V7m3-5a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8a8 8 0 0 0-8-8Z"/></svg>',
         'BLOCKQUOTE': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4Z"/></svg>',
@@ -320,7 +353,7 @@ export default {
     document.execCommand('enableInlineTableEditing', false, true);
     document.execCommand('enableAbsolutePositionEditor', false, true) */
 
-    this.format('defaultParagraphSeparator', 'div')
+    this.format('defaultParagraphSeparator', '\n')
     this.element.addEventListener('paste', function (e) {
       e.preventDefault()
       const text = (e.originalEvent || e).clipboardData.getData('text/plain')
@@ -421,7 +454,7 @@ export default {
       let sel = this.getSelection()
       sel.removeAllRanges()
       sel.addRange(this.preSelected)
-      let url = '<img src="/' + this.image[0] + '?w=' + this.img_width + '&h=' + this.img_height + '" alt="' + this.img_alt + '" width="' + this.img_width + '" height="' + this.img_height + '"/>'
+      let url = '<img src="' + this.image[0] + '?w=' + this.img_width + '" alt="' + this.img_alt + '" width="' + this.img_width + '" />'
       this.files.push(this.image[0])
       document.execCommand('insertHTML', true, url)
       this.showImg = false
@@ -434,11 +467,23 @@ export default {
       let sel = this.getSelection()
       sel.removeAllRanges()
       sel.addRange(this.preSelected)
-      let url = '<video controls="1" src="/' + this.video[0] + '" width="' + this.img_width + '" height="' + this.img_height + '"></video>'
+      let url = '<video controls="1" src="' + this.video[0] + '" width="' + this.img_width + '" height="' + this.img_height + '"></video>'
       this.files.push(this.video[0])
       document.execCommand('insertHTML', true, url)
       this.showVideo = false
     },
+    async handlePreForm() {
+      if (!this.getSelection() || !this.code || !this.lang) {
+        this.$toast(this.$t('invalid_data', 'renusify'), {type: 'error'})
+        return
+      }
+      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>`
+      document.execCommand('insertHTML', true, url)
+      this.showPre = false
+    },
     handleForm() {
       if (!this.getSelection() || !this.link) {
         this.$toast(this.$t('invalid_data', 'renusify'), {type: 'error'})
@@ -449,7 +494,7 @@ export default {
       sel.addRange(this.preSelected)
       let url = '<a href="' + this.link.trim() + '"'
       if (this.target) {
-        url += 'target="_blank"'
+        url += 'target="_blank" rel="nofollow"'
       }
       if (this.link.startsWith('#')) {
         url += `id="${this.link.replace('#', '')}"`
@@ -518,6 +563,11 @@ export default {
           this.target = false
           this.handleOpen(true)
           this.show = true
+        } else if (e === 'PRE') {
+          this.code = ''
+          this.lang = null
+          this.handleOpen(true)
+          this.showPre = true
         } else if (e === 'insertImage') {
           this.image = []
           this.img_alt = null

package/components/form/text-editor/style.scss

@@ -51,6 +51,12 @@
       min-height: 20px;
       border: 1px solid rgba(150, 150, 150, 0.6);
     }
+
+    .r-highlight div {
+      min-width: unset;
+      min-height: unset;
+      border: unset;
+    }
   }
 
   .img-holder {

package/components/highlight/index.js

@@ -0,0 +1 @@
+export * as rHighlight from './index.vue'

package/components/highlight/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div :class="`${$r.prefix}highlight highlight-lang-${lang}`" v-html='txt'></div>
+</template>
+<script>
+import './style.scss'
+import mixin from "./mixin";
+
+export default {
+  name: 'highlight',
+  mixins: [mixin],
+  props: {
+    src: String,
+    hideLineNumbers: Boolean,
+    lang: {
+      type: String,
+      validator: function (value) {
+        return ['asm', 'bash', 'bf', 'c', 'css', 'csv', 'diff', 'docker', 'git', 'go', 'html', 'http', 'ini', 'java', 'js', 'jsdoc', 'json', 'log', 'lua', 'make', 'pl', 'plain', 'py', 'regex', 'rs', 'sql', 'todo', 'toml', 'ts', 'uri', 'xml', 'yaml'].indexOf(value) !== -1
+      }
+    }
+  },
+  data() {
+    return {
+      txt: '',
+    }
+  },
+  async created() {
+    this.txt = await this.highlight(this.src, this.lang, this.hideLineNumbers);
+  }
+}
+</script>
+