renusify 1.0.3 → 1.0.4

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

package/components/menu/index.vue

@@ -33,14 +33,11 @@
     </div>
 </template>
 <script>
-    import clickOutside from '../../directive/clickOutSide/index'
 
     export default {
         name: 'r-menu',
-        directives: {
-            'click-outside': clickOutside
-        },
-        props: {
+
+      props: {
             modelValue: {
                 type: Boolean,
                 default: false

package/components/searchBox/index.vue

@@ -47,14 +47,10 @@
   </div>
 </template>
 <script>
-import clickOutside from '../../directive/clickOutSide/index'
 
 export default {
   name: 'r-search-box',
   inheritAttrs: false,
-  directives: {
-    'click-outside': clickOutside
-  },
   props: {
     closable: Boolean,
     notFoundMsg: {

package/components/slider/index.vue

@@ -40,13 +40,9 @@
 </template>
 
 <script>
-import Touch from "../../directive/touch";
 
 export default {
   name: 'r-slider',
-  directives: {
-    'touch': Touch
-  },
   props: {
     slides: {
       type: Array,

package/components/swiper/index.vue

@@ -37,13 +37,9 @@
 </template>
 
 <script>
-import Touch from "../../directive/touch";
 
 export default {
   name: 'r-swiper',
-  directives: {
-    'touch': Touch
-  },
   props: {
     items: Array,
     widthItem: Number,

package/components/table/index.vue

@@ -105,13 +105,9 @@
 
 <script>
     import './style.scss'
-    import Sortable from "../../directive/sortable";
 
     export default {
         name: 'r-table',
-        directives: {
-            'sortable': Sortable
-        },
         props: {
             transition: {
                 type: String,

package/directive/index.js

@@ -1,22 +1,21 @@
-import Ripple from './ripple/index'
-import clickOutside from './clickOutSide/index'
-import Title from "renusify/directive/title";
-import Scroll from "renusify/directive/scroll";
-import Sortable from "renusify/directive/sortable";
-import parallax from "renusify/directive/parallax";
-import Animate from "renusify/directive/animate";
+const list = {
+    'animate': 'animate',
+    'click-outside': 'clickOutSide',
+    'drag': 'drag',
+    'intersect': 'intersect',
+    'mask': 'mask',
+    'parallax': 'parallax',
+    'resize': 'resize',
+    'ripple': 'ripple',
+    'scroll': 'scroll',
+    'sortable': 'sortable',
+    'touch': 'touch',
+    'title': 'title',
+
 
-const list={
-  'ripple':Ripple,
-  'click-outside':clickOutside,
-  'title':Title,
-  'scroll':Scroll,
-  'sortable':Sortable,
-  'parallax':parallax,
-  'animate':Animate,
 }
-export const registers = (app,directives) => {
-  directives.forEach((item)=>{
-    app.directive(item, list[item])
-  })
+export const registers = (app, directives) => {
+    directives.forEach((item) => {
+        app.directive(item, require('./' + list[item]).default)
+    })
 }