renusify 2.3.1 → 2.4.0

package/components/bar/toolbar/index.vue

@@ -1,14 +1,20 @@
 <template>
-    <laptop v-if="!$r.breakpoint.mdAndDown">
-        <template #search="{item}">
-            <slot name="search" :item="item"></slot>
-        </template>
-    </laptop>
-    <mobile v-else>
-        <template #search="{item}">
-            <slot name="search" :item="item"></slot>
-        </template>
-    </mobile>
+  <laptop v-if="!$r.breakpoint.mdAndDown">
+    <template #search="{item}">
+      <slot name="search" :item="item"></slot>
+    </template>
+    <template #logo>
+      <slot name="logo"></slot>
+    </template>
+  </laptop>
+  <mobile v-else>
+    <template #search="{item}">
+      <slot name="search" :item="item"></slot>
+    </template>
+    <template #logo>
+      <slot name="logo"></slot>
+    </template>
+  </mobile>
 </template>
 
 <script>
@@ -16,14 +22,14 @@ import '../scss/toolbar.scss'
 import {defineAsyncComponent} from 'vue'
 
 export default {
-        name: 'r-toolbar',
-        components: {
-            Laptop: defineAsyncComponent(() =>
-                import("./laptop.vue")
-            ),
-            Mobile: defineAsyncComponent(() =>
-                import("./mobile.vue")
-            )
-        }
-    }
+  name: 'r-toolbar',
+  components: {
+    Laptop: defineAsyncComponent(() =>
+        import('./laptop.vue')
+    ),
+    Mobile: defineAsyncComponent(() =>
+        import('./mobile.vue')
+    )
+  }
+}
 </script>

package/components/bar/toolbar/laptop.vue

@@ -1,31 +1,33 @@
 <template>
-    <div :class="classes">
-        <header>
-            <r-container class="pa-0">
-                <div class="toolbar-content">
-                    <menu-laptop :menu="menu"></menu-laptop>
-                    <r-spacer></r-spacer>
-                    <div v-if="search" class="mt-n5">
-                        <r-search-box autofocus closable :label="searchLabel" :url="search">
-                          <template v-slot="{item}">
-                            <slot name="search" :item="item"></slot>
-                          </template>
-                        </r-search-box>
-                    </div>
-                    <div v-if="logo">
-                        <r-img :src="logo" alt="logo" :width="logoW" :height="logoH"></r-img>
-                    </div>
-                </div>
-            </r-container>
-        </header>
-    </div>
+  <div :class="classes">
+    <header>
+      <r-container class="pa-0">
+        <div class="toolbar-content">
+          <menu-laptop :menu="menu"></menu-laptop>
+          <r-spacer></r-spacer>
+          <div v-if="search" class="mt-n5">
+            <r-search-box autofocus closable :label="searchLabel" :url="search">
+              <template v-slot="{item}">
+                <slot name="search" :item="item"></slot>
+              </template>
+            </r-search-box>
+          </div>
+          <slot name="logo">
+            <div v-if="logo">
+              <r-img :src="logo" alt="logo" :width="logoW" :height="logoH"></r-img>
+            </div>
+          </slot>
+        </div>
+      </r-container>
+    </header>
+  </div>
 </template>
 <script>
 import {defineAsyncComponent} from 'vue'
-import {toolbar} from "./mixin.js";
+import {toolbar} from './mixin.js'
 
 export default {
-        components: {MenuLaptop:defineAsyncComponent(()=>import('./menuLaptop.vue'))},
-        mixins: [toolbar]
-    }
-</script>
+  components: {MenuLaptop: defineAsyncComponent(() => import('./menuLaptop.vue'))},
+  mixins: [toolbar]
+}
+</script>

package/components/bar/toolbar/mobile.vue

@@ -1,33 +1,34 @@
 <template>
-<div :class="classes">
-        <header>
-            <r-container class="pa-0">
-                <div class="toolbar-content">
-                    <r-btn icon text @click.prevent="open=!open">
-                      <r-icon v-html="$r.icons.menu"></r-icon>
-                    </r-btn>
-                    <r-spacer></r-spacer>
-                    <div v-if="search" class="mt-n5">
-                        <r-search-box closable autofocus
-                                      :label="searchLabel" :url="search">
-                          <template v-slot="{item}">
-                            <slot name="search" :item="item"></slot>
-                          </template>
-                        </r-search-box>
-                    </div>
-                </div>
-            </r-container>
-        </header>
-        <menu-mobile :menu="menu" v-model="open" :logo="logo"
-                     :logoW="logoW" :logoH="logoH"></menu-mobile>
-    </div>
+  <div :class="classes">
+    <header>
+      <r-container class="pa-0">
+        <div class="toolbar-content">
+          <r-btn icon text @click.prevent="open=!open">
+            <r-icon v-html="$r.icons.menu"></r-icon>
+          </r-btn>
+          <r-spacer></r-spacer>
+          <div v-if="search" class="mt-n5">
+            <r-search-box closable autofocus
+                          :label="searchLabel" :url="search">
+              <template v-slot="{item}">
+                <slot name="search" :item="item"></slot>
+              </template>
+            </r-search-box>
+          </div>
+          <slot name="logo"></slot>
+        </div>
+      </r-container>
+    </header>
+    <menu-mobile :menu="menu" v-model="open" :logo="logo"
+                 :logoW="logoW" :logoH="logoH"></menu-mobile>
+  </div>
 </template>
 <script>
 import {defineAsyncComponent} from 'vue'
-import {toolbar} from "./mixin.js";
+import {toolbar} from './mixin.js'
 
 export default {
-        components: {MenuMobile:defineAsyncComponent(()=>import('./menuMob.vue'))},
-        mixins:[toolbar]
-    }
-</script>
+  components: {MenuMobile: defineAsyncComponent(() => import('./menuMob.vue'))},
+  mixins: [toolbar]
+}
+</script>

package/components/calendar/index.vue

@@ -73,17 +73,20 @@
     <r-modal :model-value="tab!=='day'" @update:model-value="tab='day'">
       <div class="py-5">
         <r-calendar-year-tab v-if="tab==='year'"
-                  :model-value='currentPeriod.year'
-                  @update:model-value="(tab='month',setYear($event))"
-                  :timezoneOffset="lang_zone_offset-timezoneOffset"
-                  :locale="locale"
-                  :month="currentPeriod.month"></r-calendar-year-tab>
+                             :model-value='currentPeriod.year'
+                             @update:model-value="(tab='month',incrementYear($event))"
+                             :timezoneOffset="lang_zone_offset-timezoneOffset"
+                             :locale="locale"
+                             :month="currentPeriod.month"
+        ></r-calendar-year-tab>
         <r-calendar-month-tab v-if="tab==='month'"
-                   :model-value='currentPeriod.month'
-                   @update:model-value="(tab='day',setMonth($event))"
-                   :timezoneOffset="lang_zone_offset-timezoneOffset"
-                   :locale="locale"
-                   :year="currentPeriod.year"></r-calendar-month-tab>
+                              :model-value='currentPeriod.month'
+                              @update:model-value="(tab='day',setMonth($event))"
+                              :timezoneOffset="lang_zone_offset-timezoneOffset"
+                              :locale="locale"
+                              :month="currentPeriod.month"
+                              :year="currentPeriod.year"
+        ></r-calendar-month-tab>
       </div>
     </r-modal>
   </div>
@@ -114,8 +117,8 @@ export default {
       tab: 'day',
       direction: undefined,
       currentPeriod: {
-        month: this.month || (new Date()).getMonth(),
-        year: this.year || (new Date()).getFullYear()
+        month: (new Date()).getMonth() + 1,
+        year: (new Date()).getFullYear()
       }
     }
   },
@@ -128,6 +131,10 @@ export default {
       'me': {
         month: 'numeric',
         numberingSystem: 'latn'
+      },
+      'ye': {
+        year: 'numeric',
+        numberingSystem: 'latn'
       }
     })
 
@@ -148,20 +155,16 @@ export default {
     today() {
       return new Date()
     },
-    timezoneOffset() {
-      return (new Date(this.currentPeriod.year, this.currentPeriod.month, 10)).getTimezoneOffset()
-    },
     weekDays() {
       const first = parseInt(this.firstDayOfWeek, 10)
 
-      return this.createRange(7).map(i => this.$d(new Date(2020, 2, first + i + 2, 0, this.timezoneOffset, 0), 'weekday', this.locale)) // 2017-02-02 is Sunday
+      return this.createRange(7).map(i => this.$d(new Date(2025, 2, first + i + 23, 0, this.lang_zone_offset - this.timezoneOffset, 0), 'narrow', this.locale)) // 2017-02-02 is Sunday
     },
     rangeLocalDate() {
       const {year, month} = this.currentPeriod
       let firstDay = 1
       let firstmonth = month
       let firstyear = year
-
       let first = new Date(firstyear, firstmonth, firstDay, 0, this.lang_zone_offset - this.timezoneOffset, 0)
       let lc = parseInt(this.$d(first, 'de', this.locale))
       first = new Date(firstyear, firstmonth, firstDay - lc + 1, 0, this.lang_zone_offset - this.timezoneOffset, 0)
@@ -178,7 +181,7 @@ export default {
     weekDaysBeforeFirstDayOfTheMonth() {
       const {start} = this.rangeLocalDate
       const weekDay = start.getDay()
-      return (weekDay - this.firstDayOfWeek + 7) % 7
+      return (weekDay - parseInt(this.firstDayOfWeek) + 7) % 7
     },
     currentPeriodDates() {
       const {start, end} = this.rangeLocalDate
@@ -235,15 +238,11 @@ export default {
 
       return children
     },
+    timezoneOffset() {
+      return (new Date(this.currentPeriod.year, this.currentPeriod.month, 10)).getTimezoneOffset()
+    },
     lang_zone_offset() {
-      let offset = this.$helper.ifHas(this.$dateTime.langs, 0, this.locale, 'time_zone_offset')
-      let dst = this.$helper.ifHas(this.$dateTime.langs, false, this.locale, 'daylight_saving_time')
-
-      const m = this.$d(new Date(this.currentPeriod.year, this.currentPeriod.month, 10), 'me', this.locale)
-      if (parseInt(m) < 7 && dst) {
-        offset += 60
-      }
-      return offset * -1
+      return this.$helper.ifHas(this.$dateTime.langs, 0, this.locale, 'time_zone_offset') * -1
     }
   },
   watch: {
@@ -287,13 +286,6 @@ export default {
         year: incrementDate.getFullYear()
       }
     },
-    setYear(increment) {
-      const incrementDate = new Date(increment, this.currentPeriod.month)
-      this.currentPeriod = {
-        month: incrementDate.getMonth(),
-        year: incrementDate.getFullYear()
-      }
-    },
     selectDateItem(item) {
       if (!item.disabled) {
         this.$emit('select', item.date.toISOString())

package/components/calendar/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>
@@ -19,19 +19,44 @@ export default {
     modelValue: Number,
     timezoneOffset: Number,
     locale: String,
+    month: Number,
     year: Number
   },
   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 = (13 - 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/calendar/year.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="d-flex flex-wrap">
-    <r-btn v-for="i in 12"
+  <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="{'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, month, 1, 0, timezoneOffset), 'year', locale)
+      $d(new Date(modelValue + i - 100, month, 5, 0, timezoneOffset), 'year', locale)
       }}
     </r-btn>
   </div>
@@ -22,10 +22,21 @@ 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>
+<style>
+.calendar-year-tab {
+  max-height: 300px;
+}
+</style>

package/components/card/index.vue

@@ -1,9 +1,9 @@
 <template>
-    <component v-bind="att"
-               :is="isClickable?route.tag:'div'"
-               v-ripple="isClickable&&isRipple">
-        <slot></slot>
-    </component>
+  <component v-bind="att"
+             :is="isClickable?route.tag:'div'"
+             v-ripple="isClickable&&isRipple">
+    <slot></slot>
+  </component>
 </template>
 
 <script>
@@ -21,50 +21,50 @@ export default {
     isRipple: {
       type: Boolean,
       default: true
-            },
-            draggable:{
-                type:Boolean,
-                default:false
-            }
-        },
-        computed: {
-            att(){
-                let res={'class':this.genClass}
-                if(this.href){
-                    res['href']=this.route.data.attrs.href
-                }
+    },
+    draggable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    att() {
+      let res = {'class': this.genClass}
+      if (this.href) {
+        res['href'] = this.route.data.attrs.href
+      }
 
-                if(this.target){
-                    res['rel']='noreferrer'
-                    res['target']=this.route.data.attrs.target
-                }
-                if(this.to){
-                    res['to']=this.route.data.props.to
-                }
-                return res
-            },
-            genClass() {
-                let c = this.$r.prefix+'card';
-                if (this.flat) {
-                    c += ' card-flat';
-                }else{
-                  c += ' card-sheet';
-                }
-                if (this.hover) {
-                    c += ' card-hover';
-                }
-                if (this.outlined) {
-                    c += ' card-outlined';
-                }
-                if (this.tile) {
-                  c += ' card-tile';
-                }
-                if (this.isClickable) {
-                    c += ' card-link';
-                }
-                return c;
-            },
-        },
+      if (this.target) {
+        res['rel'] = 'noreferrer'
+        res['target'] = this.route.data.attrs.target
+      }
+      if (this.to) {
+        res['to'] = this.route.data.props.to
+      }
+      return res
+    },
+    genClass() {
+      let c = this.$r.prefix + 'card';
+      if (this.flat) {
+        c += ' card-flat';
+      } else {
+        c += ' card-sheet';
+      }
+      if (this.hover) {
+        c += ' card-hover';
+      }
+      if (this.outlined) {
+        c += ' card-outlined';
+      }
+      if (this.tile) {
+        c += ' card-tile';
+      }
+      if (this.isClickable) {
+        c += ' card-link';
+      }
+      return c;
+    },
+  },
 
-    };
+};
 </script>

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>')
     }
   },
 };