renusify 2.1.5 → 2.1.8

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>
@@ -44,14 +44,14 @@
         >&lt;script&gt;<br/>export default {</span
         >
                 <highlight-script ref="h-js" v-model="scr"></highlight-script>
-                <span v-show="scriptShow" class="color-orange">}<br/>&lt;script&gt;</span>
+                <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/selectInput/index.vue

@@ -51,7 +51,7 @@
               :multiple="multiple"
               :modelValue="chips"
               :text="text"
-              :val="value"
+              :value="value"
               @update:modelValue="listInput"
               checked>
         <template v-slot="props">
@@ -183,7 +183,7 @@ export default {
       })
     },
     getValue() {
-      if (!this.searchLink && this.modelValue !== undefined && this.modelValue !== null) {
+      if (!this.searchLink && !this.tags && this.modelValue !== undefined && this.modelValue !== null) {
         if (typeof this.modelValue === 'string' || typeof this.modelValue === 'number') {
           const index = this.$helper.searchArray(this.genItems, this.value, this.modelValue)
           if (index === false) {

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/text-editor/style.scss

@@ -29,7 +29,7 @@
     color: var(--color-one)
   }
 
-  img {
+  img, video {
     max-width: 100%;
   }
 

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/list/index.vue

@@ -1,25 +1,25 @@
 <template>
-    <div :class="classes">
-      <div
-          class="list-item h-space-between"
-          :class="{'list-item-active':$helper.searchArray(list,text,item_value[text])!==false}"
-          :key="item_key"
-          @click.prevent="handle(item_value)"
-          v-for="(item_value,item_key) in genItems"
-          v-ripple
-      >
-        <slot :item="item_value">
-          <div class="list-title">{{ item_value[text] }}</div>
-          <transition name="fade">
-            <r-icon class="pe-1"
-                    exact
-                        v-html="$r.icons.check"
-                        v-if="(checked&&$helper.searchArray(list,text,item_value[text])!==false)"
-                ></r-icon>
-              </transition>
-            </slot>
-        </div>
+  <div :class="classes">
+    <div
+        v-for="(item_value,item_key) in genItems"
+        :key="item_key"
+        v-ripple
+        :class="{'list-item-active':$helper.searchArray(list,text,item_value[text])!==false}"
+        class="list-item h-space-between"
+        @click.prevent="handle(item_value)"
+    >
+      <slot :item="item_value">
+        <div class="list-title">{{ item_value[text] }}</div>
+        <transition name="fade">
+          <r-icon v-if="(checked&&$helper.searchArray(list,text,item_value[text])!==false)"
+                  class="pe-1"
+                  exact
+                  v-html="$r.icons.check"
+          ></r-icon>
+        </transition>
+      </slot>
     </div>
+  </div>
 </template>
 
 <script>
@@ -27,95 +27,96 @@ import './style.scss'
 import Ripple from '../../directive/ripple/index'
 
 export default {
-      name: 'r-list',
-      directives: {ripple: Ripple},
-      props: {
-        disabled: Boolean,
-        multiple: Boolean,
-        min: {type: Number, default: 0},
-        text: {type: String, default: 'name'},
-        value: {type: String, default: 'value'},
-        flat: Boolean,
-        rounded: Boolean,
-        subheader: Boolean,
-        checked: Boolean,
-        filter: String,
-        items: Array,
-        modelValue: {type: [Array, Object]}
-      },
-      emits:['update:modelValue'],
-        computed: {
-            list() {
-                if (this.modelValue) {
-                    return this.modelValue
-                }
-                return []
-            },
-            classes() {
-              let c = `${this.$r.prefix}list`
-                if (this.disabled) {
-                    c += ' list-disabled'
-                }
-                if (this.flat) {
-                    c += ' list-flat'
-                }
+  name: 'r-list',
+  directives: {ripple: Ripple},
+  props: {
+    disabled: Boolean,
+    multiple: Boolean,
+    min: {type: Number, default: 0},
+    text: {type: String, default: 'name'},
+    value: {type: String, default: 'value'},
+    flat: Boolean,
+    rounded: Boolean,
+    subheader: Boolean,
+    checked: Boolean,
+    filter: String,
+    items: Array,
+    modelValue: {type: [Array, Object]}
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    list() {
+      if (this.modelValue) {
+        return this.modelValue
+      }
+      return []
+    },
+    classes() {
+      let c = `${this.$r.prefix}list`
+      if (this.disabled) {
+        c += ' list-disabled'
+      }
+      if (this.flat) {
+        c += ' list-flat'
+      }
 
-                if (this.rounded) {
-                    c += ' list-rounded'
-                }
+      if (this.rounded) {
+        c += ' list-rounded'
+      }
 
-                if (this.subheader) {
-                    c += ' list-subheader'
-                }
-                return c
-            },
-            genItems() {
-                const res = []
-                if (this.items) {
-                    const lng=this.items.length
-                    for (let i = 0; i < lng; i++) {
-                        if (typeof this.items[i] === 'object') {
-                            res[i] = this.items[i]
-                        } else {
-                            res[i] = {name: this.items[i].toString(), value: this.items[i]}
-                        }
-                    }
-                }
-                if (this.filter) {
-                    const re = new RegExp(this.filter, 'gi')
-                    return res.filter(function (el) {
-                        if (el.name && el.name.match(re)) {
-                            return el
-                        }
-                    })
-                }
-                return res
-            }
-        },
-        methods: {
-            handle(item) {
-              if (this.disabled) {
-                return
-              }
-              let val = this.list
-
-              const index = this.$helper.searchArray(val, this.text, item[this.text])
-
-              if (index !== false) {
-                if (val.length > this.min) {
-                  val.splice(index, 1)
-                }
-              } else {
-                if (!this.multiple) {
-                  val = []
-                    }
+      if (this.subheader) {
+        c += ' list-subheader'
+      }
+      return c
+    },
+    genItems() {
+      const res = []
+      if (this.items) {
+        const lng = this.items.length
+        for (let i = 0; i < lng; i++) {
+          if (typeof this.items[i] === 'object') {
+            res[i] = this.items[i]
+          } else {
+            res[i] = {[this.text]: this.items[i].toString(), [this.value]: this.items[i]}
+          }
+        }
+      }
+      if (this.filter) {
+        const re = new RegExp(this.filter, 'gi')
+        const text = this.text
+        return res.filter(function (el) {
+          if (el[text] && el[text].match(re)) {
+            return el
+          }
+        })
+      }
+      return res
+    }
+  },
+  methods: {
+    handle(item) {
+      if (this.disabled) {
+        return
+      }
+      let val = this.list
 
-                    val.push(item)
-                }
+      const index = this.$helper.searchArray(val, this.text, item[this.text])
 
-                this.$emit('update:modelValue', this.multiple?val:val[0])
-            }
+      if (index !== false) {
+        if (val.length > this.min) {
+          val.splice(index, 1)
         }
+      } else {
+        if (!this.multiple) {
+          val = []
+        }
+
+        val.push(item)
+      }
 
+      this.$emit('update:modelValue', this.multiple ? val : val[0])
     }
+  }
+
+}
 </script>

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/components/modal/style.scss

@@ -27,7 +27,7 @@
 
   .modal-content {
     border: 1px solid var(--color-sheet-container-low);
-    background-color: var(--color-sheet);
+    background-color: var(--color-sheet-container-low);
     color: var(--color-on-sheet)
   }
 

package/components/nestable/NestableItem.vue

@@ -23,7 +23,7 @@
       >
         <r-icon v-html="$r.icons.delete"></r-icon>
       </r-btn-confirm>
-      <slot :item="item"></slot>
+      <slot :item="item">{{ item }}</slot>
     </div>
 
     <div v-if="hasChildren" class="nestable-list ms-5">
@@ -54,7 +54,7 @@
             >
               <r-icon v-html="$r.icons.delete"></r-icon>
             </r-btn-confirm>
-            <slot :item="item" itemscope></slot>
+            <slot :item="item" itemscope>{{ item }}</slot>
           </template>
         </NestableItem>
       </template>

package/components/nestable/editable.js

@@ -1,7 +1,7 @@
 export default {
     data() {
         return {
-            name: null,
+            form: {},
         };
     },
     methods: {
@@ -20,13 +20,13 @@ export default {
         },
         add() {
             let items = this.modelValue;
-            items.push({
-                title: this.name,
+            Object.assign(this.form, {
                 [this.keyProp]: this.lastId(items) + 1,
                 [this.childrenProp]: [],
-            });
+            })
+            items.push(this.form);
             this.$emit("update:model-value", items);
-            this.name = null;
+            this.form = {};
         },
         del(item) {
             const removePath = this.getSplicePath(

package/components/nestable/index.vue

@@ -22,12 +22,14 @@
       </template>
     </div>
     <div v-if="editable" class="d-flex v-end w-full">
-      <div class="pe-1 flex-grow-1">
-        <r-text-input v-model="name" :label="labelInput"></r-text-input>
-      </div>
-      <r-btn :disabled="!name" class="color-success" icon @click="add">
-        <r-icon v-html="$r.icons.plus"></r-icon>
-      </r-btn>
+      <slot :add="add" :form="form" name="form">
+        <div class="pe-1 flex-grow-1">
+          <r-text-input v-model="form.title" :label="labelInput"></r-text-input>
+        </div>
+        <r-btn :disabled="!form.title" class="color-success" icon @click="add">
+          <r-icon v-html="$r.icons.plus"></r-icon>
+        </r-btn>
+      </slot>
     </div>
   </div>
 </template>

package/components/table/crud/index.vue

@@ -31,7 +31,7 @@
                             :is="item['type']"
                             :label="$t(key,'renusify')"
                             v-model="copyItem['d'][key]"
-                            v-bind="getAttr(table.option[key],copyItem['t'])"
+                            v-bind="getAttr(table.option[key],copyItem['t'])['props']"
                         ></component>
                     </template>
                 </div>

package/docs/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

package/docs/.editorconfig

@@ -0,0 +1,5 @@
+[*.{js, jsx, ts, tsx, vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

package/docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

package/docs/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}