renusify 2.4.2 → 2.4.4

package/components/bar/scss/toolbar.scss

@@ -26,6 +26,8 @@
       overflow: auto;
       position: absolute;
       transition: .5s all map.get(base.$transition, 'swing');
+      background-color: var(--color-sheet);
+      color: var(--color-on-sheet);
       @include mixins.rtl() {
         right: -300px;
       }
@@ -94,7 +96,6 @@
     &:before {
       content: '-';
       position: absolute;
-      color: #9e9e9e;
       @include mixins.rtl() {
         right: -8px;
       }
@@ -110,10 +111,10 @@
     max-height: 500px;
     overflow-y: auto;
     @include mixins.rtl() {
-      border-right: 1px solid #9e9e9e;
+      border-right: 1px solid;
     }
     @include mixins.ltr() {
-      border-left: 1px solid #9e9e9e;
+      border-left: 1px solid;
     }
   }
 

package/components/chart/chart.vue

@@ -3,34 +3,59 @@
 </template>
 
 <script>
-
 export default {
-  name: "r-chart",
+  name: 'r-chart',
   props: {
+    url: {type: String, default: 'https://codenus.com/storage/chart/apexcharts.js'},
+    dark: Boolean,
     options: Object
   },
   data() {
     return {
       chartShape: null,
-      Chart: null
-    };
+      timeout_id: null
+    }
   },
-  mounted(){
-    import('./apexcharts.js').then((d) => {
-      this.Chart=d.default;
+  mounted() {
+    let children = document.querySelectorAll('[name=\'apexcharts\']')
+    if (children.length === 0) {
+      let el = document.createElement('script')
+      el.setAttribute('src', this.url)
+      el.setAttribute('name', 'apexcharts')
+      document.head.append(el)
+    }
+    if (this.dark) {
+      if (!this.options['theme']) {
+        this.options['theme'] = {}
+      }
+      this.options['theme']['mode'] = 'dark'
+    }
+
+    this.timeout_id = setTimeout(() => {
       this.build()
-    })
+    }, 10)
+
   },
   methods: {
-    build() {
-      this.chartShape = new this.Chart(this.$refs.chart, this.options);
-      this.chartShape.render()
+    build(n = 0) {
+      try {
+        this.chartShape = new ApexCharts(this.$refs.chart, this.options)
+        this.chartShape.render()
+      } catch (e) {
+        this.timeout_id = setTimeout(() => {
+          this.build(n + 1)
+        }, 100)
+        if (n > 30) {
+          console.error(e)
+        }
+      }
     }
   },
   beforeUnmount() {
-    this.chartShape.destroy();
+    clearTimeout(this.timeout_id)
+    this.chartShape.destroy()
   }
-};
+}
 </script>
 <style lang="scss">
 @use "../../style/variables/base";

package/components/codeEditor/index.vue

@@ -41,18 +41,18 @@
         <span v-show="templateShow" class="highlight-syn-func">&lt;/template&gt;</span>
       </div>
       <div>
-        <span v-show="scriptShow" class="highlight-syn-var"
+        <span v-show="scriptShow" class="highlight-syn-class"
         >&lt;script&gt;<br/>export default {</span
         >
         <highlight-script ref="h-js" v-model="scr"></highlight-script>
-        <span v-show="scriptShow" class="highlight-syn-var">}<br/>&lt;/script&gt;</span>
+        <span v-show="scriptShow" class="highlight-syn-class">}<br/>&lt;/script&gt;</span>
       </div>
       <div>
-        <span v-show="cssShow" class="highlight-syn-var"
+        <span v-show="cssShow" class="highlight-syn-class"
         >&lt;style lang<span class="color-green">="css"</span>&gt;</span
         >
         <highlight-css ref="h-css" v-model="sty"></highlight-css>
-        <span v-show="cssShow" class="highlight-syn-var">&lt;/style&gt;</span>
+        <span v-show="cssShow" class="highlight-syn-class">&lt;/style&gt;</span>
       </div>
     </div>
   </div>
@@ -141,9 +141,9 @@ export default {
 .#{base.$prefix}code-editor {
   position: relative;
   white-space: break-spaces;
-  caret-color: white;
-  background-color: #15212e;
-  color: #fff;
+  caret-color: #f8f8f2;
+  background-color: #1a1a1c;
+  color: #f8f8f2;
   padding: 10px;
   font-size: 14px;
 

package/components/form/dateInput/index.vue

@@ -1,8 +1,8 @@
 <template>
   <r-input v-bind="$attrs" :readonly="readonly" :model-value="modelValue" @click.prevent="show=true">
-    <input
-        :value="modelValue?$d(modelValueDate,withTime?'long':'medium',locale):null"
-    />
+    <div :class="`${$r.prefix}date-color-input`">
+      {{ modelValue ? $d(modelValueDate, withTime ? 'long' : 'medium', locale) : null }}
+    </div>
   </r-input>
   <r-modal :model-value="show" @update:model-value="close()" :closebtn="false" closable class="text-center">
     <div v-if="!showTime" :class="`${$r.prefix}date-input`">
@@ -364,6 +364,9 @@ export default {
 <style lang="scss">
 @use "../../../style/variables/base";
 
+.#{base.$prefix}date-color-input {
+  color: var(--color-on-sheet);
+}
 .#{base.$prefix}date-input {
   position: relative;
   display: inline-block;

package/components/form/numberInput/index.vue

@@ -13,7 +13,8 @@
              @focusin="active=true"
              @focusout="active=false"
              ref="input"
-             type="text"
+             :step="step"
+             type="number"
              autocomplete="no"
              v-model="number"
       />
@@ -44,47 +45,35 @@ export default {
   emits: ['update:modelValue'],
   data() {
     return {
-      number: this.setSplit(this.modelValue),
+      number: this.modelValue,
       active: false
     }
   },
   watch: {
     'modelValue': function (newVal) {
-      setTimeout(() => {
-        this.number = this.setSplit(newVal)
-      })
+      if (newVal !== undefined) {
+        this.number = newVal
+      }
     }
   },
   methods: {
-    setSplit(n) {
-      if (n && this.split > 0) {
-        const x = this.split
-        n = n.toString()
-        const step = n.indexOf('.')
-        const re = '\\d(?=(\\d{' + (x) + '})+' + (step > -1 ? '\\.' : '$') + ')';
-        return n.replace(new RegExp(re, 'g'), '$&,');
-      }
-      return n
-    },
-    removeSplit(n) {
-      return parseFloat(this.$helper.replacer(n.toString(), ',', ''))
-    },
     emit() {
       if (this.number === '' || this.number === null) {
         this.number = undefined
         this.$emit('update:modelValue', this.number)
         return
       }
-      let d = this.removeSplit(this.number)
+      let d = this.number
       if (this.max !== undefined && d > this.max) {
         d = this.max
       }
       if (this.min !== undefined && d < this.min) {
-        d = this.min
+        this.$emit('update:modelValue', undefined)
+        return
       }
-      const n = ((1 / this.step) + '').length - 1
-      this.number = this.setSplit(d.toFixed(n))
-      this.$emit('update:modelValue', this.removeSplit(this.number))
+
+      this.number = d
+      this.$emit('update:modelValue', this.number)
     },
     plus() {
       let n = this.modelValue || 0
@@ -96,7 +85,7 @@ export default {
       this.number = n - this.step
       this.emit()
     }
-  },
+  }
 }
 </script>
 

package/components/form/passwordInput/index.vue

@@ -15,7 +15,7 @@
              @focusin="active=true"
              @focusout="active=false"
              @input="emit"
-             autocomplete="no"
+             :autocomplete="autocomplete"
              ref="input"
              v-model="lazyValue"
       />
@@ -61,6 +61,7 @@ export default {
     specialChar: Boolean,
     number: Boolean,
     minLength: {type: Number, default: 8},
+    autocomplete: {type: String, default: "no"},
   },
   emits: ['update:modelValue'],
   data() {

package/components/form/unitInput/index.vue

@@ -51,9 +51,9 @@ export default {
 emits:['update:modelValue'],
   data() {
     return {
-      lazyValue: this.modelValue.value,
+      lazyValue: this.modelValue ? this.modelValue.value : null,
       active: false,
-      unit: this.modelValue.unit
+      unit: this.modelValue ? this.modelValue.unit : null
     }
   },
   watch: {

package/components/table/crud/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div :class="`${$r.prefix}table-manage`">
     <r-modal v-model="showForm" bottom full-width>
-      <slot :autoSend="autoSend" :method="method"
+      <slot :autoSend="autoSend"
+            :method="method"
             :modelValue="editedItem"
             :ok="ok"
             :options="table.option"
@@ -444,9 +445,13 @@ export default {
       this.refresh()
     },
     ok() {
-      this.refresh()
+      this.table.startTime = false
+      this.page = 1;
+      this.sortBy = null;
+      this.sortType = 0;
       this.autoSend = false
       this.showForm = false
+      this.refresh()
     },
     refresh(e) {
       this.loading = true

package/components/tabs/index.vue

@@ -98,8 +98,6 @@ export default {
 <style lang="scss">
 @use "../../style/variables/base";
 
-$btnTabsWidth: 50px;
-
 .#{base.$prefix}tabs {
   max-width: 100%;
   display: flex;
@@ -109,7 +107,7 @@ $btnTabsWidth: 50px;
     position: relative;
     margin: 0 auto;
     white-space: nowrap;
-    width: calc(100% - #{$btnTabsWidth*2});
+    width: 100%;
     overflow: auto;
 
     scroll-behavior: smooth;
@@ -149,9 +147,5 @@ $btnTabsWidth: 50px;
       margin-right: 0;
     }
   }
-
-  .btn-tabs {
-    width: $btnTabsWidth;
-  }
 }
 </style>

package/package.json

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