renusify 2.1.7 → 2.2.0

package/components/codeEditor/index.vue

@@ -29,7 +29,7 @@
             <r-code-editor-run
                 :id="id"
                 :script="scr"
-                :style="sty"
+                :css="sty"
                 :template="temp"
             ></r-code-editor-run>
         </div>
@@ -47,11 +47,11 @@
                 <span v-show="scriptShow" class="color-orange">}<br/>&lt;/script&gt;</span>
             </div>
             <div>
-        <span v-show="styleShow" class="color-orange"
+        <span v-show="cssShow" class="color-orange"
         >&lt;style lang<span class="color-green">="css"</span>&gt;</span
         >
                 <highlight-css ref="h-css" v-model="sty"></highlight-css>
-              <span v-show="styleShow" class="color-orange">&lt;/style&gt;</span>
+              <span v-show="cssShow" class="color-orange">&lt;/style&gt;</span>
             </div>
         </div>
     </div>
@@ -77,12 +77,12 @@ export default {
         runnable: Boolean,
         templateShow: {type: Boolean, default: true},
         scriptShow: {type: Boolean, default: true},
-        styleShow: {type: Boolean, default: true},
+      cssShow: {type: Boolean, default: true},
         template: String,
         script: String,
-        style: String,
+      css: String,
     },
-    emits: ["update:template", "update:script", "update:style"],
+  emits: ["update:template", "update:script", "update:css"],
     data() {
         return {
             show: "code",
@@ -90,7 +90,7 @@ export default {
             edited: false,
             temp: this.template,
             scr: this.script,
-            sty: this.style,
+          sty: this.css,
             id: this.$helper.uniqueId(),
         };
     },
@@ -111,7 +111,7 @@ export default {
         script: function (n) {
             this.scr = n
         },
-        style: function (n) {
+      css: function (n) {
             this.sty = n
         },
         temp: function () {
@@ -121,7 +121,7 @@ export default {
             this.$emit("update:script", this.scr);
         },
         sty: function () {
-            this.$emit("update:style", this.sty);
+          this.$emit("update:css", this.sty);
         },
     },
     methods: {

package/components/codeEditor/run.vue

@@ -9,12 +9,12 @@ export default {
   props: {
     template: String,
     script: String,
-    style: String,
+    css: String,
     id: String,
   },
   computed: {
     page() {
-      if (this.style) {
+      if (this.css) {
         let children = document.querySelectorAll(`[f='${this.id}']`);
         if (children) {
           let childArray = Array.prototype.slice.call(children);
@@ -24,7 +24,7 @@ export default {
           });
         }
         let s = document.createElement("style");
-        s.innerText = this.style;
+        s.innerText = this.css;
         s.setAttribute("f", this.id);
         s.setAttribute("type", "text/css");
         window.document.head.append(s);

package/components/form/checkboxInput/index.vue

@@ -16,7 +16,7 @@
                                v-html="$r.icons.check" exact></r-icon>
                    </transition>
             </span>
-        <span class="ms-2" @click.prevent="emit">
+        <span class="ms-2 checkbox-label" @click.prevent="emit">
                 <span class="color-error-text" v-if="isRequired">*</span>
           <slot name="label">{{ label }}</slot>
             </span>
@@ -40,7 +40,7 @@ export default {
       }
     },
   },
-emits:['update:modelValue'],
+  emits: ['update:modelValue'],
   data() {
     return {
       lazyValue: this.modelValue
@@ -71,6 +71,10 @@ emits:['update:modelValue'],
   width: 100%;
   cursor: pointer;
 
+  .checkbox-label {
+    color: var(--color-on-sheet);
+  }
+
   .checkbox-input {
     border: 1px solid var(--color-on-sheet-low)
   }

package/components/form/groupInput/index.vue

@@ -3,7 +3,7 @@
            :model-value="modelValue"
            hide>
     <div class="w-full">
-      <span v-if="label">{{ label }}</span>
+      <span v-if="label" class="group-input-label">{{ label }}</span>
       <div class="group-holder" v-for="(item,i) in modelValue" :key="i">
         <div class="group-slot">
           <slot :item="item" :index="i" :disableDel="disDel">
@@ -24,7 +24,7 @@
             <r-icon v-html="$r.icons.chevron_down" :class="{'icon-disabled':i===modelValue.length-1}"
                     @click.prevent="down(i)"></r-icon>
           </r-btn>
-          <r-btn v-if="!disableItems.includes(item[itemKey])" icon text @click.prevent="del(i)">
+          <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>
@@ -137,6 +137,9 @@ export default {
 @import "../../../style/include";
 
 .#{$prefix}group-input {
+  .group-input-label {
+    color: var(--color-on-sheet);
+  }
   .group-holder {
     position: relative;
 

package/components/form/switchInput/index.vue

@@ -59,7 +59,9 @@ emits:['update:modelValue','change'],
 @import "../../../style/include";
 
 .#{$prefix}switch {
-
+  .switch-label {
+    color: var(--color-on-sheet);
+  }
   .switch-container {
     display: flex;
     flex-direction: row;

package/components/form/timeInput/range.vue

@@ -43,22 +43,22 @@
             :disableTime="disableTime"
             v-model="lazyValue[1]"
         ></timepicker>
+        <div class="mt-3 d-flex h-space-between">
         <r-btn
-            class="color-success-text ml-7 mr-9 mb-3 mt-3"
+            class="color-success-text"
             outlined
             @click.prevent="accept"
         >
           {{ $t('accept', 'renusify') }}
-        </r-btn
-        >
+        </r-btn>
         <r-btn
-            class="color-warning-text mr-7 ml-4 mb-3 mt-3"
+            class="color-warning-text"
             outlined
             @click.prevent="(show_modal = false), (lazyValue = []),emit()"
         >
           {{ $t('cancel', 'renusify') }}
-        </r-btn
-        >
+        </r-btn>
+        </div>
       </div>
     </r-modal>
   </div>

package/components/img/index.vue

@@ -3,7 +3,7 @@
         [$r.prefix+'img']:true,
         'img-hoverZoom':hoverZoom,'img-hoverDark':hoverDark,'img-hoverTitle':hoverTitle}"
        ref="rImg">
-    <div v-if="hoverTitle" class="title-3 color-white-text img-title w-full"
+    <div v-if="hoverTitle" class="title-3 color-white-text img-title w-full pa-1"
          :class="{
             'title-hs':titleHs,
             'title-hc':titleHc,

package/components/message/index.vue

@@ -2,7 +2,7 @@
   <div class="h-center">
     <template v-for="(item,i) in items"
               :key="i">
-      <slot>
+      <slot :item="item" :k="i">
         <div :class="`color-${type}`"
              class="mb-2 br-md">
           <r-container>

package/index.js

@@ -101,35 +101,39 @@ export default {
                 }
             }
         }
-        app.provide('$r', app.config.globalProperties.$r)
         // renusify toast
         app.config.globalProperties.$toast = function (message, options) {
             Toast.show(message, options);
         }
-        app.provide('$toast', app.config.globalProperties.$toast)
         // renusify storage
         app.config.globalProperties.$storage = Storage
-        app.provide('$storage', app.config.globalProperties.$storage)
 
         // renusify helper
         app.config.globalProperties.$helper = helper
-        app.provide('$helper', app.config.globalProperties.$helper)
         // renusify translate
         app.config.globalProperties.$translate = new Translate(app.config.globalProperties.$r, app.config.globalProperties.$storage)
-        app.provide('$translate', app.config.globalProperties.$translate)
         app.config.globalProperties.$dateTime = new DateTime(app.config.globalProperties.$r, app.config.globalProperties.$r.langs)
-        app.provide('$dateTime', app.config.globalProperties.$dateTime)
         app.config.globalProperties.$t = (key, package_name = null, lang = null) => app.config.globalProperties.$translate.get(key, package_name, lang)
-        app.provide('$t', app.config.globalProperties.$t)
         app.config.globalProperties.$d = (value, key = 'long', local = null) => app.config.globalProperties.$dateTime.formatLocal(value, key, local)
-        app.provide('$d', app.config.globalProperties.$d)
         const c = new Currency(app.config.globalProperties.$r)
         app.config.globalProperties.$n = (value) => c.formatLocal(value)
-        app.provide('$n', app.config.globalProperties.$n)
         // renusify validation
         const v = new valid(app.config.globalProperties.$t)
         app.config.globalProperties.$v = (names) => v.checkType(names)
-        app.provide('$v', app.config.globalProperties.$v)
+
+        app.provide('renusify', {
+            $r: app.config.globalProperties.$r,
+            $toast: app.config.globalProperties.$toast,
+            $storage: app.config.globalProperties.$storage,
+            $helper: app.config.globalProperties.$helper,
+            $translate: app.config.globalProperties.$translate,
+            $dateTime: app.config.globalProperties.$dateTime,
+            $t: app.config.globalProperties.$t,
+            $d: app.config.globalProperties.$d,
+            $n: app.config.globalProperties.$n,
+            $v: app.config.globalProperties.$v,
+        })
+
         // install components
         let required_directive = _register(app, options['components'] || {});
         if (options['directives']) {

package/package.json

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

package/tools/helper.js

@@ -394,7 +394,7 @@ export function changeColor(vars) {
     head.appendChild(style);
     let css = ':root{';
     for (let k in vars) {
-        css += '--color-' + k + ':' + vars[k] + ';'
+        css += k + ':' + vars[k] + ';'
     }
     css += '}'
     style.appendChild(document.createTextNode(css));