renusify 1.0.3 → 1.0.5

package/components/form/select.vue

@@ -3,7 +3,7 @@
     <r-input :active="active"
              v-bind="$attrs"
              :readonly="readonly"
-             :modelValue="$helper.ifHas(chips,null,0,'value')"
+             :modelValue="$helper.ifHas(chips,null,0,value)"
              @click.prevent="handleClick()">
       <div class="select-wrap v-center"
            :class="{'flex-nowrap':!multiple}">
@@ -49,7 +49,7 @@
               checked>
         <template v-slot="props">
           <slot :item="props.item">
-            <div class="list-title" role="option">
+            <div class="list-title">
               {{ props.item[text] }}
             </div>
           </slot>
@@ -66,14 +66,10 @@
 </template>
 <script>
 import './scss/select.scss'
-import clickOutside from '../../directive/clickOutSide/index'
 
 export default {
   name: 'r-select',
   inheritAttrs: false,
-  directives: {
-    'click-outside': clickOutside
-  },
   props: {
     searchLink: String,
     type: {
@@ -84,6 +80,10 @@ export default {
       type: String,
       default: 'name'
     },
+    value: {
+      type: String,
+      default: 'value'
+    },
     combo: Boolean,
     readonly: Boolean,
     textChip: Boolean,
@@ -132,7 +132,7 @@ export default {
           if (this.$helper.hasKey(res, i)) {
             let v = {}
             v[this.text] = res[i].toString()
-            v['value'] = res[i]
+            v[this.value] = res[i]
             res[i] = v
           }
         }
@@ -178,22 +178,22 @@ export default {
         if (this.$helper.ifHas(this.modelValue, false, this.text)) {
           return [this.modelValue]
         } else if (typeof this.modelValue === 'string' || typeof this.modelValue === 'number') {
-          const index = this.$helper.searchArray(this.genItems, 'value', this.modelValue)
+          const index = this.$helper.searchArray(this.genItems, this.value, this.modelValue)
           if (index !== false) {
             return [this.genItems[index]]
           }
           return [{
-            [this.text]: this.modelValue.toString(), value: this.modelValue
+            [this.text]: this.modelValue.toString(), [this.value]: this.modelValue
           }]
         } else if (typeof this.modelValue[0] === 'string' || typeof this.modelValue[0] === 'number') {
           let res = []
           const lng = this.modelValue.length
           for (let i = 0; i < lng; i++) {
-            const index = this.$helper.searchArray(this.genItems, 'value', this.modelValue[i])
+            const index = this.$helper.searchArray(this.genItems, this.value, this.modelValue[i])
             if (index !== false) {
               res.push(this.genItems[index])
             } else {
-              res.push({[this.text]: this.modelValue[i].toString(), value: this.modelValue[i]})
+              res.push({[this.text]: this.modelValue[i].toString(), [this.value]: this.modelValue[i]})
             }
           }
           return res
@@ -220,7 +220,7 @@ export default {
     },
     add() {
       if (this.inputVal) {
-        let val = {[this.text]: this.inputVal.toString(), value: this.inputVal}
+        let val = {[this.text]: this.inputVal.toString(), [this.value]: this.inputVal}
         if (!this.multiple) {
           this.chips = []
         }
@@ -246,7 +246,7 @@ export default {
         val = []
         for (let i in this.chips) {
           if (this.$helper.hasKey(this.chips, i)) {
-            val.push(this.chips[i]['value'])
+            val.push(this.chips[i][this.value])
           }
         }
       }
@@ -254,7 +254,7 @@ export default {
         val = val[0]
         if (val) {
           if (this.justValue) {
-            val = val['value']
+            val = val[this.value]
           }
           this.closeList()
         }

package/components/iframe/index.vue

@@ -1,45 +1,67 @@
 <script>
-import {createApp} from 'vue'
-    export default {
-        name: 'r-frame',
-        props: {
-            head: String
-        },
-        render(h) {
-            return h('iframe', {
-                on: {load: this.renderChildren}
-            })
-        },
-        beforeUpdate() {
-            const head = this.$el.contentDocument.head
-            head.innerHTML = this.head
-            this.iApp.children = Object.freeze(this.$slots.default)
-        },
-        methods: {
-            renderChildren() {
-                const children = this.$slots.default
-                const body = this.$el.contentDocument.body
-                const el = document.createElement('DIV')
-                body.appendChild(el)
-                const iApp = createApp({
-                    name: 'iApp',
-                    data: function () {
-                        return {children: Object.freeze(children)};
-                    },
-                    render(h) {
-                        return h('div', this.children)
-                    }
-                })
+import {createApp, h} from 'vue'
+import renusify from "renusify";
 
-                iApp.$mount(el)
-
-                this.iApp = iApp
-            }
+export default {
+  name: 'r-frame',
+  props: {
+    head: String,
+    plugins: Array,
+    renusifyConfig: {
+      type: Object,
+      default: () => {
+        return {
+          prefix: "sm-",
+          lang: "en",
+          package: 'renusify',
+          directives: []
         }
+      }
     }
+  },
+  render() {
+    return h('iframe', {
+      onLoad: this.renderChildren
+    })
+  },
+  beforeUpdate() {
+    const head = this.$el.contentDocument.head
+    head.innerHTML = this.head
+    this.iApp.children = this.$slots.default()
+  },
+  methods: {
+    renderChildren() {
+      const children = this.$slots.default()
+      const head = this.$el.contentDocument.head
+      head.innerHTML = this.head
+      const body = this.$el.contentDocument.body
+      const el = document.createElement('DIV')
+      body.appendChild(el)
+      const iApp = createApp({
+        name: 'iApp',
+        data: function () {
+          return {children: children};
+        },
+        render() {
+          return h('div', this.children)
+        }
+      })
+      if (this.plugins) {
+        this.plugins.forEach((item) => {
+          iApp.use(item)
+        })
+      }
+      iApp.use(renusify, this.renusifyConfig)
+      iApp.mount(el)
+
+      this.iApp = iApp
+    }
+  }
+}
 </script>
 <style>
-    iframe {
-        width: 100%;
-    }
+iframe {
+  width: 100%;
+  height: 100%;
+}
 </style>

package/components/index.js

@@ -1,104 +1,200 @@
-import {defineAsyncComponent} from "vue";
-
 const list = {
-    'r-app': 'app/index.vue',
-    'r-content': 'content/index.vue',
-    'r-meta': 'meta/index.js',
-    'r-container': 'container/index.vue',
-    'r-row': 'container/row.vue',
-    'r-col': 'container/col.vue',
-    'r-spacer': 'container/spacer.vue',
-    'r-divider': 'container/divider.vue',
-    'r-btn': 'button/index.vue',
-    'r-icon': 'icon/index.vue',
-    'r-form-creator': 'formCreator/index.vue',
-    'r-card': 'card/index.vue',
-    'r-modal': 'modal/index.vue',
-    'r-form': 'form/form.vue',
-    'r-input': 'form/input.vue',
-    'r-text-input': 'form/text-input.vue',
-    'r-unit-input': 'form/unit-input.vue',
-    'r-tel': 'form/inputTel/index.vue',
-    'r-switch': 'form/switch.vue',
-    'r-checkbox': 'form/checkbox.vue',
-    'r-radio-input': 'form/radioInput.vue',
-    'r-chip': 'chip/index.vue',
-    'r-list': 'list/index.vue',
-    'r-table': 'table/index.vue',
-    'r-table-crud': 'table/crud/index.vue',
-    'r-message': 'message/index.vue',
-    'r-time-ago': 'timeAgo/index.vue',
-    'r-confirm': 'confirm/index.vue',
-    'r-mask-input': 'form/mask-input.vue',
-    'r-progress-circular': 'progress/circular.vue',
-    'r-progress-liner': 'progress/liner.vue',
-    'r-img': 'img/index.vue',
-    'r-chart': "chart/chart.vue",
-    'r-date-picker': 'form/datePicker/index.vue',
-    'r-btn-group': 'button/buttonGroup.vue',
-    'r-group-input': "form/group-input.vue",
-    'r-text-area': 'form/text-area.vue',
-    'r-address': 'form/address.vue',
-    'r-check-input': 'form/check-input.vue',
-    'r-unique-feild': 'form/uniqueFeild/index.vue',
-    'r-file-uploader': 'form/fileUploader/index.vue',
-    'r-select': 'form/select.vue',
-    'r-range': 'form/range.vue',
-    'r-number': 'form/number.vue',
-    'r-rating': 'form/rating.vue',
-    'r-text-editor': 'form/text-editor/index.vue',
-    'r-text-editor-preview': 'form/text-editor/preview.vue',
-    'r-avatar': 'avatar/index.vue',
-    'r-toolbar': 'bar/toolbar/index.vue',
-    'r-bottom-navigation': 'bar/bottomNav.vue',
-    'r-bottom-navigation-circle': "bar/bottomNavigationCircle.vue",
-    'r-breadcrumbs': 'breadcrumb/index.vue',
-    'r-breadcrumbs-item': 'breadcrumb/bredcrumbItem.vue',
-    'r-count-down': 'countdown/index.vue',
-    'r-slider': 'slider/index.vue',
-    'r-swiper': 'swiper/index.vue',
-    'r-tabs': 'tabs/index.vue',
-    'r-infinite-div': 'infinite/div.vue',
-    'r-infinite-page': 'infinite/page.vue',
-    'r-infinite-box': 'infinite/index.vue',
-    'r-iframe': 'iframe/index.vue',
-    'r-menu': 'menu/index.vue',
-    'r-tree': 'tree/index.vue',
-    'r-tree-element': 'tree/tree-element.vue',
-    'r-float': 'float/index.vue',
-    'r-timeline': 'timeline/index.vue',
-    'r-password': "form/password.vue",
-    'r-color-picker': "form/colorPicker/index.vue",
-    'r-html2pdf': "html2pdf/index.vue",
-    'r-html2pdf-page-break': "html2pdf/pageBreak.vue",
-    'r-code-editor': "codeEditor/index.vue",
-    'r-map': "map/index.vue",
-    'r-map-select': "map/select.vue",
-    'r-map-route': "map/route.vue",
-    'r-tour': "tour/index.vue",
-    'r-chat': "chat/index.vue",
-    'r-time-picker': "form/timepicker/index.vue",
-    'r-cam-input': "form/camInput",
-    'r-json': 'form/json/index.vue',
-    'r-calendar': 'calendar/index.vue',
-    'r-search-box': 'searchBox/index.vue',
+    'r-app': {'p': 'app/index.vue', 'c': ['r-btn', 'r-icon', 'r-spacer'], 'd': []},
+    'r-avatar': {'p': 'avatar/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
+    'r-toolbar': {
+        'p': 'bar/toolbar/index.vue',
+        'c': ['r-container', 'r-spacer', 'r-search-box', 'r-img', 'r-icon', 'r-btn', 'r-divider'],
+        'd': []
+    },
+    'r-bottom-navigation': {'p': 'bar/bottomNav.vue', 'c': [], 'd': []},
+    'r-bottom-navigation-circle': {'p': 'bar/bottomNavigationCircle.vue', 'c': ['r-icon'], 'd': []},
+    'r-breadcrumbs': {'p': 'breadcrumb/index.vue', 'c': ['r-icon'], 'd': []},
+    'r-btn': {'p': 'button/index.vue', 'c': ['r-progress-circular'], 'd': ['ripple']},
+    'r-btn-group': {
+        'p': 'button/buttonGroup.vue',
+        'c': ['r-btn', 'r-icon', 'r-card', 'r-list'],
+        'd': ['click-outside']
+    },
+    'r-calendar': {
+        'p': 'calendar/index.vue',
+        'c': ['r-container', 'r-row', 'r-col', 'r-btn', 'r-icon', 'r-modal', 'r-card'],
+        'd': []
+    },
+    'r-card': {'p': 'card/index.vue', 'c': [], 'd': ['ripple']},
+    'r-chart': {'p': 'chart/chart.vue', 'c': [], 'd': []},
+    'r-chat': {
+        'p': 'chat/index.vue',
+        'c': ['r-btn', 'r-icon', 'r-progress-circular', 'r-img'],
+        'd': ['intersect', 'scroll']
+    },
+    'r-chip': {'p': 'chip/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
+    'r-code-editor': {'p': 'codeEditor/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
+    'r-confirm': {
+        'p': 'confirm/index.vue',
+        'c': ['r-modal', 'r-card', 'r-container', 'r-row', 'r-col', 'r-divider', 'r-form', 'r-text-input', 'r-btn'],
+        'd': []
+    },
+    'r-container': {'p': 'container/index.vue', 'c': [], 'd': []},
+    'r-row': {'p': 'container/row.vue', 'c': [], 'd': []},
+    'r-col': {'p': 'container/col.vue', 'c': [], 'd': []},
+    'r-spacer': {'p': 'container/spacer.vue', 'c': [], 'd': []},
+    'r-divider': {'p': 'container/divider.vue', 'c': [], 'd': []},
+    'r-content': {'p': 'content/index.vue', 'c': [], 'd': []},
+    'r-count-down': {'p': 'countdown/index.vue', 'c': [], 'd': []},
+    'r-float': {'p': 'float/index.vue', 'c': [], 'd': []},
+    'r-form': {'p': 'form/form.vue', 'c': [], 'd': []},
+    'r-color-picker': {
+        'p': 'form/colorPicker/index.vue',
+        'c': ['r-input', 'r-modal', 'r-btn', 'r-icon'],
+        'd': ['touch']
+    },
+    'r-date-picker': {
+        'p': 'form/datePicker/index.vue',
+        'c': ['r-input', 'r-modal', 'r-container', 'r-row', 'r-col', 'r-btn', 'r-icon'],
+        'd': []
+    },
+    'r-file-uploader': {
+        'p': 'form/fileUploader/index.vue',
+        'c': ['r-input', 'r-row', 'r-btn', 'r-icon', 'r-progress-circular', 'r-text-input'],
+        'd': []
+    },
+    'r-tel': {
+        'p': 'form/inputTel/index.vue',
+        'c': ['r-modal', 'r-card', 'r-text-input', 'r-list', 'r-spacer', 'r-btn'],
+        'd': []
+    },
+    'r-json': {
+        'p': 'form/json/index.vue',
+        'c': ['r-btn', 'r-icon', 'r-text-input', 'r-select', 'r-number', 'r-switch'],
+        'd': []
+    },
+    'r-text-editor': {
+        'p': 'form/text-editor/index.vue',
+        'c': ['r-container', 'r-row', 'r-col', 'r-btn-group', 'r-btn',
+            'r-icon', 'r-select', 'r-input', 'r-img', 'r-modal',
+            'r-form', 'r-file-uploader', 'r-text-input', 'r-switch', 'r-number'],
+        'd': []
+    },
+    'r-text-editor-preview': {'p': 'form/text-editor/preview.vue', 'c': [], 'd': []},
+    'r-time-picker': {'p': 'form/timepicker/index.vue', 'c': ['r-input', 'r-modal', 'r-card', 'r-btn'], 'd': []},
+    'r-unique-feild': {'p': 'form/uniqueFeild/index.vue', 'c': ['r-text-input'], 'd': []},
+    'r-address': {'p': 'form/address.vue', 'c': ['r-select', 'r-text-area', 'r-text-input'], 'd': []},
+    'r-cam-input': {'p': 'form/camInput', 'c': ['r-input', 'r-btn', 'r-icon'], 'd': []},
+    'r-check-input': {'p': 'form/check-input.vue', 'c': ['r-input', 'r-btn', 'r-icon'], 'd': []},
+    'r-checkbox': {'p': 'form/checkbox.vue', 'c': ['r-input', 'r-icon'], 'd': []},
+    'r-group-input': {
+        'p': 'form/group-input.vue',
+        'c': ['r-text-input', 'r-number', 'r-switch', 'r-btn', 'r-icon'],
+        'd': []
+    },
+    'r-input': {'p': 'form/input.vue', 'c': ['r-icon'], 'd': []},
+    'r-mask-input': {'p': 'form/mask-input.vue', 'c': ['r-input'], 'd': ['mask']},
+    'r-number': {'p': 'form/number.vue', 'c': ['r-input', 'r-btn', 'r-icon'], 'd': []},
+    'r-password': {'p': 'form/password.vue', 'c': ['r-input', 'r-icon'], 'd': []},
+    'r-radio-input': {'p': 'form/radioInput.vue', 'c': ['r-input', 'r-icon'], 'd': []},
+    'r-range': {'p': 'form/range.vue', 'c': ['r-input'], 'd': ['touch']},
+    'r-rating': {'p': 'form/rating.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
+    'r-select': {
+        'p': 'form/select.vue',
+        'c': ['r-input', 'r-chip', 'r-progress-liner', 'r-card', 'r-list', 'r-icon'],
+        'd': ['click-outside']
+    },
+    'r-switch': {'p': 'form/switch.vue', 'c': ['r-input'], 'd': []},
+    'r-text-area': {'p': 'form/text-area.vue', 'c': ['r-input'], 'd': []},
+    'r-text-input': {'p': 'form/text-input.vue', 'c': ['r-input'], 'd': []},
+    'r-unit-input': {'p': 'form/unit-input.vue', 'c': ['r-input', 'r-select'], 'd': []},
+    'r-form-creator': {
+        'p': 'formCreator/index.vue',
+        'c': ['r-card', 'r-container', 'r-message', 'r-form', 'r-row', 'r-col', 'r-btn'],
+        'd': []
+    },
+    'r-html2pdf': {'p': 'html2pdf/index.vue', 'c': ['r-btn', 'r-icon', 'r-html2pdf-page-break'], 'd': []},
+    'r-html2pdf-page-break': {'p': 'html2pdf/pageBreak.vue', 'c': [], 'd': []},
+    'r-icon': {'p': 'icon/index.vue', 'c': [], 'd': []},
+    'r-img': {'p': 'img/index.vue', 'c': [], 'd': []},
+    'r-infinite-div': {
+        'p': 'infinite/div.vue',
+        'c': ['r-container', 'r-row', 'r-col', 'r-progress-liner'],
+        'd': ['scroll']
+    },
+    'r-infinite-page': {'p': 'infinite/page.vue', 'c': ['r-progress-liner'], 'd': ['scroll']},
+    'r-infinite-box': {
+        'p': 'infinite/index.vue',
+        'c': ['r-card', 'r-container', 'r-row', 'r-col', 'r-switch', 'r-infinite-div'],
+        'd': []
+    },
+    'r-list': {'p': 'list/index.vue', 'c': ['r-icon'], 'd': ['ripple']},
+    'r-map': {'p': 'map/index.vue', 'c': ['r-search-box', 'r-btn', 'r-icon', 'r-confirm'], 'd': []},
+    'r-map-select': {'p': 'map/select.vue', 'c': ['r-map'], 'd': []},
+    'r-map-route': {
+        'p': 'map/route.vue',
+        'c': ['r-container', 'r-row', 'r-col', 'r-map', 'r-divider', 'r-spacer', 'r-btn', 'r-icon'],
+        'd': []
+    },
+    'r-menu': {'p': 'menu/index.vue', 'c': ['r-btn', 'r-icon', 'r-card'], 'd': ['click-outside']},
+    'r-message': {'p': 'message/index.vue', 'c': ['r-container', 'r-row', 'r-col'], 'd': []},
+    'r-meta': {'p': 'meta/index.js', 'c': [], 'd': []},
+    'r-modal': {'p': 'modal/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
+    'r-progress-circular': {'p': 'progress/circular.vue', 'c': [], 'd': []},
+    'r-progress-liner': {'p': 'progress/liner.vue', 'c': [], 'd': []},
+    'r-search-box': {
+        'p': 'searchBox/index.vue',
+        'c': ['r-input', 'r-progress-liner', 'r-card', 'r-list', 'r-btn', 'r-icon'],
+        'd': ['click-outside']
+    },
+    'r-slider': {'p': 'slider/index.vue', 'c': ['r-progress-liner', 'r-btn', 'r-icon'], 'd': ['touch']},
+    'r-swiper': {'p': 'swiper/index.vue', 'c': [], 'd': ['touch']},
+    'r-table': {
+        'p': 'table/index.vue',
+        'c': ['r-btn', 'r-icon', 'r-switch', 'r-progress-liner', 'r-modal', 'r-card', 'r-container', 'r-row', 'r-col'],
+        'd': ['sortable']
+    },
+    'r-table-crud': {
+        'p': 'table/crud/index.vue',
+        'c': ['r-card', 'r-modal', 'r-form-creator', 'r-json', 'r-divider', 'r-number', 'r-btn', 'r-table', 'r-icon',
+            'r-time-ago', 'r-switch', 'r-confirm', 'r-container', 'r-row', 'r-col', 'r-text-input', 'r-select', 'r-date-picker',
+            'r-progress-liner'],
+        'd': []
+    },
+    'r-tabs': {'p': 'tabs/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
+    'r-time-ago': {'p': 'timeAgo/index.vue', 'c': [], 'd': []},
+    'r-timeline': {'p': 'timeline/index.vue', 'c': ['r-container', 'r-row', 'r-col'], 'd': []},
+    'r-tour': {'p': 'tour/index.vue', 'c': ['r-container', 'r-spacer', 'r-btn'], 'd': []},
+
+    'r-tree': {
+        'p': 'tree/index.vue',
+        'c': ['r-container', 'r-row', 'r-col', 'r-select', 'r-float', 'r-tree-element'],
+        'd': []
+    },
+    'r-tree-element': {'p': 'tree/tree-element.vue', 'c': ['r-container', 'r-row', 'r-col', 'r-btn', 'r-icon'], 'd': []}
 }
 
 export const register = (app, components) => {
-    if (components.length === 0) {
-        for (let c in list) {
-            if (list.hasOwnProperty(c)) {
-                app.component(c, require('./' + list[c]).default)
-            }
-        }
-    } else {
-        components.forEach((c) => {
+    let d = {}
+    let s = {}
+    const setup = (ls) => {
+        ls.forEach((c) => {
             try {
-                app.component(c, require('./' + list[c]).default)
+                if (!s[c]) {
+                    app.component(c, require('./' + list[c]['p']).default)
+                    list[c]['d'].forEach((i) => {
+                        d[i] = true
+                    })
+                    setup(list[c]['c'])
+                    s[c] = true
+                }
             } catch (e) {
                 console.error('component not found', c, e)
             }
-
         })
     }
+    if (components.length === 0) {
+        setup(Object.keys(list))
+    } else {
+        if (!components.includes('r-app')) {
+            setup(['r-app'])
+        }
+        setup(components)
+    }
+    return Object.keys(d)
 }

package/components/infinite/div.vue

@@ -29,10 +29,9 @@
 </template>
 
 <script>
-    import Scroll from "renusify/directive/scroll";
-    export default {
+
+export default {
         name: 'r-infinite-div',
-        directives: {'scroll':Scroll},
         props: {
             isChat: Boolean,
             height: {

package/components/infinite/index.vue

@@ -30,11 +30,9 @@
 </template>
 
 <script>
-    import RInfiniteDiv from "./div";
 
     export default {
         name: 'r-infinite-box',
-        components: {RInfiniteDiv},
         props: {
             color:{
               type:String,

package/components/infinite/page.vue

@@ -15,10 +15,9 @@
 </template>
 
 <script>
-    import Scroll from "renusify/directive/scroll";
-   export default {
+
+export default {
         name: 'r-infinite-page',
-       directives: {'scroll':Scroll},
         props: {
             url: {
                 required: true,

package/components/list/index.vue

@@ -22,11 +22,9 @@
 
 <script>
     import './style.scss'
-    import Ripple from '../../directive/ripple/index'
 
     export default {
         name: 'r-list',
-        directives: {ripple: Ripple},
         props: {
             disabled: Boolean,
             multiple: Boolean,