renusify 1.0.3 → 1.0.5

package/LICENSE

@@ -1,6 +1,6 @@
 BSD 3-Clause License
 
-Copyright (c) 2021, smkoBa
+Copyright (c) 2021, https://github.com/smkoBa/renusify
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without

package/components/app/index.vue

@@ -6,8 +6,8 @@
                     'app-dark': isDark,
                     'app-light': !isDark
                 }" :id="id">
-        <div class="app-wrap">
-            <slot></slot>
+        <div class="app-wrap" :style="{'min-height':$r.breakpoint.height+'px'}">
+          <slot></slot>
         </div>
         <r-toast></r-toast>
         <r-notify v-if="notify" :left="notifyLeft" :top="notifyTop">
@@ -19,19 +19,19 @@
 </template>
 
 <script>
-    import './style.scss'
-    import RToast from '../toast/index.vue'
-    import RNotify from '../notify/index.vue'
+import './style.scss'
+import RToast from './toast/index.vue'
+import RNotify from './notify/index.vue'
 
-    export default {
-        name: 'r-app',
-        components: {RToast,RNotify},
-        props: {
-            id: {
-                type: [String, Number],
-                default: 'renusify'
-            },
-            notify: Boolean,
+export default {
+  name: 'r-app',
+  components: {RToast, RNotify},
+  props: {
+    id: {
+      type: [String, Number],
+      default: 'renusify'
+    },
+    notify: Boolean,
             notifyLeft: Boolean,
             notifyTop: Boolean,
             rtl: {type:Boolean,default: undefined},

package/components/{notify → app/notify}/index.vue

@@ -126,7 +126,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-    @import '../../style/include';
+    @import '../../../style/include';
 
     .#{$prefix}notify {
         display: flex;

package/components/app/style.scss

@@ -41,7 +41,6 @@
     backface-visibility: hidden;
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
     max-width: 100%;
     width: 100%;
     position: relative;

package/components/{toast → app/toast}/style.scss

@@ -1,4 +1,4 @@
-@import "../../style/include";
+@import "../../../style/include";
 
 .#{$prefix}toast {
   max-width: 500px;

package/components/breadcrumb/bredcrumbItem.vue

@@ -13,17 +13,17 @@
     import {roots} from '../../tools/rootable'
 
     export default {
-        name: 'r-bredcrumbItem',
-        mixins: [roots],
-        props: {
-            item: Object
-        },
-        computed: {
-            att() {
-                let res = {}
-                if (this.href) {
-                    res['href'] = this.route.data.attrs.href
-                }
+      name: 'rBreadcrumbItem',
+      mixins: [roots],
+      props: {
+        item: Object
+      },
+      computed: {
+        att() {
+          let res = {}
+          if (this.href) {
+            res['href'] = this.route.data.attrs.href
+          }
 
                 if (this.target) {
                     res['rel'] = 'noreferrer'

package/components/breadcrumb/index.vue

@@ -5,10 +5,10 @@
         :key="key"
         v-for="(item,key) in genItems">
 
-        <r-breadcrumbs-item :href="item.href"
-                            :item="item"
-                            :to="item.to"
-                            @click="go(item)"></r-breadcrumbs-item>
+        <r-breadcrumb-item :href="item.href"
+                           :item="item"
+                           :to="item.to"
+                           @click="go(item)"></r-breadcrumb-item>
       </li>
     </ul>
   </transition>
@@ -16,10 +16,11 @@
 
 <script>
 import './style.scss'
-import divider from "../container/divider";
+import RBreadcrumbItem from "./bredcrumbItem";
 
 export default {
   name: 'r-breadcrumbs',
+  components: {RBreadcrumbItem},
   props: {
     sheet: {
       type: Boolean,

package/components/button/buttonGroup.vue

@@ -29,13 +29,9 @@
 </template>
 
 <script>
-import clickOutside from '../../directive/clickOutSide/index'
 
 export default {
   name: 'r-button-group',
-  directives: {
-    'click-outside': clickOutside
-  },
   props: {
     items: [Array, Object],
     icon: {

package/components/button/index.vue

@@ -23,11 +23,9 @@
 <script>
 import './style.scss'
 import { roots } from '../../tools/rootable'
-import Ripple from '../../directive/ripple/index'
 export default {
   name: 'r-btn',
   mixins: [roots],
-  directives: { ripple: Ripple },
   props: {
     tag: {
       type: String,

package/components/card/index.vue

@@ -8,13 +8,11 @@
 
 <script>
     import {roots} from '../../tools/rootable';
-    import Ripple from '../../directive/ripple/index';
     import './style.scss';
 
     export default {
         name: 'r-card',
         mixins: [roots],
-        directives: {ripple: Ripple},
         props: {
             flat: Boolean,
             hover: Boolean,

package/components/chart/chart.vue

@@ -23,6 +23,9 @@ export default {
       this.chartShape = new Chart(this.$refs.chart, this.options);
       this.chartShape.render()
     }
+  },
+  beforeUnmount() {
+    this.chartShape.destroy();
   }
 };
 </script>

package/components/chat/MessageList.vue

@@ -14,11 +14,9 @@
 </template>
 
 <script>
-    import Scroll from "renusify/directive/scroll";
     import RChatMsg from "./chatMsg";
 
     export default {
-        directives: {'scroll': Scroll},
         components: {
             RChatMsg
         },

package/components/chat/chatInput.vue

@@ -1,150 +1,154 @@
 <template>
-    <div :class="{[$r.prefix+'chat-input']:true,'with-file':canFile}">
-        <r-btn text icon>
-            <r-icon v-html="$r.icons.sticker"></r-icon>
+  <div :class="{[$r.prefix+'chat-input']:true,'with-file':canFile}">
+    <r-btn text icon>
+      <r-icon v-html="$r.icons.sticker"></r-icon>
+    </r-btn>
+    <div class="chat-input"
+         ref="input"
+         contenteditable="true"
+         @input="updateText"
+         @keydown="updateKey"
+         @paste.prevent="updatePaste"
+    >
+    </div>
+    <div class="action-section d-flex h-end">
+      <template v-if="canFile">
+        <r-btn v-if="uploadPercentage===0||uploadPercentage===100" @click.prevent.stop="pickFile"
+               icon
+               text>
+          <r-icon v-html="$r.icons.attachment"></r-icon>
         </r-btn>
-        <div class="chat-input"
-             ref="input"
-             contenteditable="true"
-             @input="updateText"
-             @keydown="updateKey"
-             @paste.prevent="updatePaste"
-        >
-        </div>
-        <div class="action-section d-flex h-end">
-            <template v-if="canFile">
-            <r-btn v-if="uploadPercentage===0||uploadPercentage===100" @click.prevent.stop="pickFile"
-                   icon
-                   text>
-                <r-icon v-html="$r.icons.attachment"></r-icon>
-            </r-btn>
-            <r-progress-circular
-                    v-else
-                    @click.prevent="fileDelete()"
-                        :indeterminate=false
-                        :modelValue="uploadPercentage"
-                        :width="2"
-                        size="30"
-                >
-                <r-icon v-html="$r.icons.close"></r-icon>
-                </r-progress-circular>
-                </template>
-            <r-btn class="color-success-text"
-                   :disabled="!text"
-                   @click="send"
-                   icon
-                   text>
-                <r-icon v-html="$r.icons.send"></r-icon>
-            </r-btn>
-            <br>
-            <span class="caption color-error-text" v-if="remain<30">{{remain}}</span>
-        </div>
-        <input accept="*"
-               @change="addFile()"
-               ref="file"
-               style="display: none"
-               type="file"
-               v-if="showFile"
+        <r-progress-circular
+            v-else
+            @click.prevent="fileDelete()"
+            :indeterminate=false
+            :modelValue="uploadPercentage"
+            :width="2"
+            size="30"
         >
+          <r-icon v-html="$r.icons.close"></r-icon>
+        </r-progress-circular>
+      </template>
+      <r-btn class="color-success-text"
+             :disabled="!text"
+             @click.prevent="send"
+             icon
+             text>
+        <r-icon v-html="$r.icons.send"></r-icon>
+      </r-btn>
+      <br>
+      <span class="caption color-error-text" v-if="remain<30">{{ remain }}</span>
     </div>
+    <input accept="*"
+           @change="addFile()"
+           ref="file"
+           style="display: none"
+           type="file"
+           v-if="showFile"
+    >
+  </div>
 </template>
 <script>
-    import file from "../form/fileUploader/file";
+import file from "../form/fileUploader/file";
 
-    export default {
-        name: 'r-chat-input',
-        mixins:[file],
-        props: {
-            maxLenMsg: {type: Number, default: 200},
-            sendByEnter: Boolean,
-            placeholder: {type: String, default: 'type here'},
-            maxFileSize: Number,
-            uploadLink:  String,
-            canFile: Boolean,
-        },
-        data() {
-            return {
-                text: '',
-                showFile: true,
-            }
-        },
-        computed: {
-            remain() {
-                return this.maxLenMsg - this.text.length
-            }
-        },
-        methods: {
-            updatePaste(e) {
-                let text = this.$refs.input.innerText
-                this.$refs.input.innerText = this.$helper.limiter(text + e.clipboardData.getData('Text'), this.maxLenMsg)
-                this.updateText()
-            },
-            updateKey(e) {
-                let text = this.$refs.input.innerText
+export default {
+  name: 'r-chat-input',
+  mixins: [file],
+  props: {
+    maxLenMsg: {type: Number, default: 200},
+    sendByEnter: Boolean,
+    placeholder: {type: String, default: 'type here'},
+    maxFileSize: Number,
+    uploadLink: String,
+    canFile: Boolean,
+  },
+  data() {
+    return {
+      text: '',
+      showFile: true,
+    }
+  },
+  computed: {
+    remain() {
+      return this.maxLenMsg - this.text.length
+    }
+  },
+  methods: {
+    updatePaste(e) {
+      let text = this.$refs.input.innerText
+      this.$refs.input.innerText = this.$helper.limiter(text + e.clipboardData.getData('Text'), this.maxLenMsg)
+      this.updateText()
+    },
+    updateKey(e) {
+      let text = this.$refs.input.innerText
 
-                if (e.keyCode === 13 && this.sendByEnter) {
-                    this.send()
-                    return
-                }
-                if (text.length >= this.maxLenMsg && e.keyCode !== 8 && e.keyCode !== 46) {
-                    e.preventDefault();
-                }
-            },
-            updateText() {
-                this.text = this.$refs.input.innerText
-                this.$refs.input.scrollTop = this.$refs.input.scrollHeight
-            },
-            send() {
-                if (this.text) {
-                    this.$emit('update:model-value', {type: "text",content: this.text})
-                    this.$refs.input.innerText = ''
-                    this.text = ''
-                }
-            },
-            emit() {
-                this.$emit('update:model-value', {type: "file",content: this.text,link:this.fileLink})
-                    this.$refs.input.innerText = ''
-                    this.text = ''
-            }
-        }
+      if (e.keyCode === 13 && this.sendByEnter) {
+        this.send()
+        return
+      }
+      if (text.length >= this.maxLenMsg && e.keyCode !== 8 && e.keyCode !== 46) {
+        e.preventDefault();
+      }
+    },
+    updateText() {
+      this.text = this.$refs.input.innerText
+      this.$refs.input.scrollTop = this.$refs.input.scrollHeight
+    },
+    send() {
+      if (this.text) {
+        this.$emit('update:model-value', {type: "text", content: this.text})
+        this.$refs.input.innerText = ''
+        this.text = ''
+        this.$refs.input.focus()
+      }
+    },
+    emit() {
+      this.$emit('update:model-value', {type: "file", content: this.text, link: this.fileLink})
+      this.$refs.input.innerText = ''
+      this.text = ''
     }
+  }
+}
 </script>
 <style lang="scss">
-    @import "../../style/include";
+@import "../../style/include";
 
-    .#{$prefix}chat-input {
-        display: flex;
-        @include light() {
-            box-shadow: black 0px 8px 15px;
-            background: var(--color-background-two-light);
-            border-top:1px solid var(--color-border-light);
-        }
-        @include dark() {
-            box-shadow: white 0px 8px 15px;
-            background: var(--color-background-two-dark);
-            border-top:1px solid var(--color-border-dark);
-        }
+.#{$prefix}chat-input {
+  display: flex;
+  @include light() {
+    box-shadow: black 0px 8px 15px;
+    background: var(--color-background-two-light);
+    border-top: 1px solid var(--color-border-light);
+  }
+  @include dark() {
+    box-shadow: white 0px 8px 15px;
+    background: var(--color-background-two-dark);
+    border-top: 1px solid var(--color-border-dark);
+  }
+
+  .chat-input {
+    margin: 5px 0;
+    resize: none;
+    outline: none;
+    line-height: 25px;
+    font-size: 14px;
+    max-height: 80px;
+    overflow-y: auto;
+    width: calc(100% - 40px);
+  }
+
+  .action-section {
+    width: 40px;
+  }
+
+  &.with-file {
+    .action-section {
+      width: 80px;
+    }
 
-        .chat-input {
-            margin: 5px 0;
-            resize: none;
-            outline: none;
-            line-height: 25px;
-            font-size: 14px;
-            max-height: 80px;
-            overflow-y: auto;
-            width: calc(100% - 40px);
-        }
-      .action-section {
-                width: 40px;
-            }
-        &.with-file{
-            .action-section {
-                width: 80px;
-            }
-                .chat-input{
-                width: calc(100% - 80px);
-            }
-            }
+    .chat-input {
+      width: calc(100% - 80px);
     }
+  }
+}
 </style>

package/components/chat/chatMsg.vue

@@ -42,12 +42,12 @@
     </div>
 </template>
 <script>
-    import {Intersect} from '../../directive/intersect'
 
-    export default {
+
+export default {
         name: 'r-chat-msg',
-        directives: {Intersect},
-        props: {
+
+  props: {
             isMe: Boolean,
             user: {
                 type: Object,