renusify 2.5.2 → 3.0.0

package/components/chat/MessageList.vue

@@ -1,163 +0,0 @@
-<template>
-  <div ref="containerMessage"
-       v-scroll.window="handle" class="container-message-list">
-    <div v-for="message in messages" :key="message._id" class="message-container">
-      <r-chat-message :is-me="message.user_id===myself.id" :message="message" :user="message.user_id===myself.id?myself:participants[message.user_id]"
-                      @see="$emit('see', $event)"></r-chat-message>
-    </div>
-  </div>
-  <transition v-if="!hideBottomBtn" name="scale">
-    <r-btn v-if="!is_bottom" :label="newMsg.num" class="go-buttom" fab @click.prevent="goTo(newMsg.first_id)">
-      <r-icon v-html="$r.icons.chevron_down"></r-icon>
-    </r-btn>
-  </transition>
-</template>
-
-<script>
-
-export default {
-  emits: ["see"],
-  props: {
-    newMsg: {
-      type: Object, default: () => {
-        return {
-          num: 0,
-          first_id: null
-        }
-      }
-    },
-    hideBottomBtn: Boolean,
-    messages: {type: Array,},
-    myself: {type: Object},
-    participants: {type: Object}
-  },
-  data() {
-    return {
-      timeout_id: null,
-      timeout_scroll: null,
-      is_bottom: false
-    }
-  },
-  mounted() {
-    setTimeout(() => {
-      this.goTo(this.newMsg.first_id);
-    }, 10)
-  },
-  watch: {
-    messages: function (n, o) {
-      clearTimeout(this.timeout_id)
-      this.timeout_id = setTimeout(() => {
-        const scrollDiv = this.$refs.containerMessage;
-        const offset = scrollDiv.scrollHeight - scrollDiv.scrollTop - scrollDiv.clientHeight
-        if (offset < 100 || o.length === 0) {
-          this.goToBottom()
-        }
-      }, 300)
-    }
-  },
-  methods: {
-    handle(e) {
-      clearTimeout(this.timeout_scroll)
-      this.timeout_scroll = setTimeout(() => {
-        const scrollDiv = this.$refs.containerMessage;
-        const offset = scrollDiv.scrollHeight - scrollDiv.scrollTop - scrollDiv.clientHeight
-        this.is_bottom = offset === 0;
-      }, 100)
-    },
-    goTo(id) {
-      let f = document.getElementById('msg-' + id)
-      if (f) {
-        this.hover(f)
-        f = f.getBoundingClientRect()
-        const scrollDiv = this.$refs.containerMessage;
-        scrollDiv.scrollTop = scrollDiv.scrollTop - scrollDiv.clientHeight + f.top + f.height
-      } else {
-        this.goToBottom()
-      }
-    },
-    hover(elm) {
-      elm.classList.add('msg-select')
-      setTimeout(() => {
-        elm.classList.remove('msg-select')
-      }, 2000)
-    },
-    goToBottom() {
-      let scrollDiv = this.$refs.containerMessage;
-      if (scrollDiv !== null) {
-        scrollDiv.scrollTop = scrollDiv.scrollHeight;
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@use "sass:map";
-@use "../../style/variables/base";
-@use "../../style/mixins";
-
-
-.#{base.$prefix}chat .container-message-list {
-  scroll-behavior: smooth;
-  flex: 1;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 10px;
-  max-height: 100%;
-  /************** Safari 10.1+ ********************/
-  @media not all and (min-resolution: .001dpcm) {
-    @supports (-webkit-appearance:none) {
-
-      .message-container {
-        display: -webkit-box !important;
-      }
-
-    }
-  }
-
-  .message-container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .msg-select {
-    animation: color .7s;
-    animation-iteration-count: infinite;
-    border-radius: map.get(base.$borders, 'sm');
-
-    .message-text {
-      opacity: .4;
-    }
-  }
-}
-
-.go-buttom {
-  position: absolute;
-  @include mixins.rtl() {
-    left: 20px;
-    bottom: 50px;
-  }
-  background-color: #eeeeee;
-  color: #0b8e6b;
-
-  .label {
-    background-color: #0b8e6b;
-    color: white;
-  }
-}
-
-@keyframes color {
-  0% {
-    background-color: #c6e6f5;
-  }
-  50% {
-    background-color: #7ad5ff;
-  }
-  100% {
-    background-color: #0aa6ee;
-  }
-}
-
-</style>

package/components/chat/chatInput.vue

@@ -1,150 +0,0 @@
-<template>
-  <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>
-        <r-progress-circle
-            v-else
-            @click.prevent="fileDelete()"
-            :indeterminate=false
-            :modelValue="uploadPercentage"
-            :width="2"
-            size="30"
-        >
-          <r-icon v-html="$r.icons.close"></r-icon>
-        </r-progress-circle>
-      </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 v-if="remain<30" class="label-1 color-error-text">{{ remain }}</span>
-    </div>
-    <input accept="*"
-           @change="addFile()"
-           ref="file"
-           style="display: none"
-           type="file"
-           v-if="showFile"
-    >
-  </div>
-</template>
-<script>
-import file from "../form/fileInput/file.js";
-
-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,
-  },
-  emits: ['update:modelValue'],
-  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:modelValue', {type: "text", content: this.text})
-        this.$refs.input.innerText = ''
-        this.text = ''
-        this.$refs.input.focus()
-      }
-    },
-    emit() {
-      this.$emit('update:modelValue', {type: "file", content: this.text, link: this.fileLink})
-      this.$refs.input.innerText = ''
-      this.text = ''
-    }
-  }
-}
-</script>
-<style lang="scss">
-@use "../../style/variables/base";
-
-.#{base.$prefix}chat-input {
-  display: flex;
-
-  box-shadow: black 0px 8px 15px;
-  background: var(--color-sheet-container);
-  color: var(--color-on-sheet);
-  border-top: 1px solid var(--color-border);
-
-  .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);
-    }
-  }
-}
-</style>

package/components/chat/chatMsg.vue

@@ -1,276 +0,0 @@
-<template>
-  <div class="message-body" :class="{'is-me':isMe}">
-    <img class="message-user-img me-1" :src="user.img+'?w=50&h=50'" :alt="user.name"
-         v-if="!isMe&&!message.in_line_top&&!message.in_line_mid">
-    <div class="message-holder">
-      <div class="message-content" v-for="(msg,i) in message.list"
-           :id="'msg-'+msg._id"
-           v-intersect.once="{
-                            handler: view,
-                               options: {
-                                    id:msg._id,
-                                    threshold: 0.05
-                                }
-                                }"
-           :key="msg._id"
-           :class="{'in-line-top':i===0&&message.list.length>1,
-                            'in-line-mid':i!==0&&i<message.list.length-1,
-                            'in-line-btm':i===message.list.length-1&&message.list.length>1
-                 }">
-        <div class="message-text body-1">
-          <div v-if="!isMe" class="message-username title-3">{{ user.name }}
-          </div>
-          <div v-if="msg.type==='file'" @click.prevent="$helper.download('/'+msg.link)">
-            <div class="mx-n2 mt-n1" v-if="isImg(msg.link)">
-              <r-img class="br-sm" :src="'/'+msg.link" alt="img" width="250" :w-p-h="isImg(msg.link)"></r-img>
-            </div>
-            <div v-else class="d-flex cursor-pointer">
-              <r-icon class="ma-1" v-html="$r.icons.file"></r-icon>
-              <span>
-                        {{ file_name(msg.link) }}
-                                </span>
-            </div>
-          </div>
-          <div v-html="msg.content"></div>
-          <div class="message-info text-end label-1">
-            {{ msg.timestamp }}
-          </div>
-        </div>
-        <div class="is-end" v-if="i===message.list.length-1"></div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-
-
-export default {
-  name: 'r-chat-msg',
-
-  props: {
-    isMe: Boolean,
-    user: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    message: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
-  },
-  emits:['see'],
-  methods: {
-    isImg(link) {
-      const is = link.indexOf('storage/img/') !== -1
-      if (is) {
-        link = link.split('/')
-        link = link[link.length - 1].split('_')
-        return link[0] / link[1]
-      }
-      return is
-    },
-    file_name(link) {
-      let res = link.split('/')
-      return res[res.length - 1]
-    },
-    view(isIntersecting, entries, observer, options) {
-      if (isIntersecting) {
-        this.$emit('see', options.id)
-      }
-    }
-  }
-}
-</script>
-<style lang="scss">
-@use "sass:map";
-@use "../../style/variables/base";
-@use "../../style/mixins";
-
-.message-body {
-  display: flex;
-  align-items: flex-end;
-  position: relative;
-  padding: 5px;
-
-  .message-holder {
-    width: 100%;
-  }
-
-  .message-user-img {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    position: sticky;
-    bottom: 0;
-    z-index: 1;
-  }
-
-  .message-content {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    max-width: 1000px;
-    position: relative;
-  }
-
-  .message-text {
-    background: #fff;
-    color: black;
-    padding: 5px 10px;
-    border-radius: map.get(base.$borders, 'lg');
-    max-width: 80%;
-    overflow-wrap: break-word;
-    white-space: pre-wrap;
-    word-break: break-word;
-  }
-
-  .message-username {
-    color: #4f98ec;
-  }
-
-  .message-info {
-    color: #444444;
-  }
-
-  .in-line-top {
-    .message-text {
-      border-bottom-left-radius: 4px !important;
-      border-bottom-right-radius: 4px !important;
-      margin-bottom: 2px;
-    }
-  }
-
-  .in-line-mid {
-    .message-text {
-      margin-top: 0px;
-      margin-bottom: 2px;
-      border-radius: map.get(base.$borders, 'sm') !important;
-    }
-  }
-
-  .in-line-btm {
-    .message-text {
-      border-top-left-radius: 4px !important;
-      border-top-right-radius: 4px !important;
-    }
-  }
-
-  .is-end {
-    width: 15px;
-    height: 15px;
-    position: absolute;
-    bottom: 0;
-    overflow: hidden;
-
-    &:after {
-      content: '';
-      width: 30px;
-      height: 30px;
-      border-radius: 50%;
-
-      background-color: var(--color-sheet);
-
-      position: absolute;
-      top: -15px;
-    }
-  }
-
-  &:not(.is-me) {
-    .is-end {
-      background-color: #fff;
-      @include mixins.ltr() {
-        left: -15px;
-      }
-      @include mixins.rtl() {
-        right: -15px;
-      }
-
-      &:after {
-        @include mixins.ltr() {
-          left: -15px;
-        }
-        @include mixins.rtl() {
-          right: -15px;
-        }
-      }
-    }
-
-    .message-content {
-      @include mixins.ltr() {
-        align-items: flex-end;
-      }
-      @include mixins.rtl() {
-        align-items: flex-start;
-      }
-    }
-
-    .message-text {
-      @include mixins.ltr() {
-        border-bottom-left-radius: 0px;
-      }
-      @include mixins.rtl() {
-        border-bottom-right-radius: 0px;
-      }
-    }
-  }
-
-  &.is-me {
-    flex-direction: row-reverse;
-    @include mixins.rtl() {
-      margin-left: 15px;
-    }
-    @include mixins.ltr() {
-      margin-right: 15px;
-    }
-
-    .is-end {
-      background-color: #4f98ec;
-      @include mixins.rtl() {
-        left: -15px;
-      }
-      @include mixins.ltr() {
-        right: -15px;
-      }
-
-      &:after {
-        @include mixins.rtl() {
-          left: -15px;
-        }
-        @include mixins.ltr() {
-          right: -15px;
-        }
-      }
-    }
-
-    .message-text {
-      background-color: #4f98ec;
-      color: white;
-      @include mixins.ltr() {
-        border-bottom-right-radius: 0px;
-      }
-      @include mixins.rtl() {
-        border-bottom-left-radius: 0px;
-      }
-    }
-
-    .message-info {
-      color: #eeeeee;
-    }
-
-    .message-content {
-      @include mixins.ltr() {
-        align-items: flex-start;
-
-      }
-      @include mixins.rtl() {
-        align-items: flex-end;
-
-      }
-    }
-  }
-}
-</style>

package/components/chat/index.js

@@ -1,11 +0,0 @@
-export * as rChat from './index.vue'
-export * as rChatInput from './chatInput.vue'
-export * as rChatMessageList from './MessageList.vue'
-export * as rChatMessage from './chatMsg.vue'
-export * as l_btn from '../button/index.js'
-export * as l_icon from '../icon/index.js'
-export * as l_img from '../img/index.js'
-export * as l_circle from '../progress/circle.js'
-
-export * as d_intersect from '../../directive/intersect/index.js'
-export * as d_scroll from '../../directive/scroll/index.js'

package/components/chat/index.vue

@@ -1,113 +0,0 @@
-<template>
-  <div :class="$r.prefix+'chat'">
-    <div class="chat-header" v-if="title">{{ title }}</div>
-    <r-chat-message-list ref="msgList" @see="$emit('see', $event)" :messages="msgs" :myself="myself"
-                  :participants="participants"
-                  :newMsg="newMsg"
-                  :hideBottomBtn="hideBottomBtn"
-    >
-    </r-chat-message-list>
-    <r-chat-input v-if="!hideSend"
-                  @update:model-value="onMsgSubmit"
-                  :send-by-enter="sendByEnter"
-                  :maxLenMsg="maxLenMsg"
-                  :placeholder="placeholder"
-                  :uploadLink="uploadLink"
-                  :maxFileSize="maxFileSize"
-                  :canFile="canFile"
-    ></r-chat-input>
-  </div>
-</template>
-<script>
-
-export default {
-  name: 'r-chat',
-  props: {
-    sendByEnter: Boolean,
-    placeholder: {type: String, default: 'type here'},
-    hideBottomBtn: Boolean,
-    hideSend: Boolean,
-    maxLenMsg: {type: Number, default: 200},
-    newMsg: {
-      type: Object, default: () => {
-        return {
-          num: 0,
-          first_id: null
-        }
-      }
-    },
-    participants: {
-      type: Object,
-      required: true
-    },
-    messages: {
-      type: Array,
-      required: true
-    },
-    myself: {
-      type: Object,
-      required: true
-    },
-    title: String,
-    canFile: Boolean,
-    maxFileSize: {type: Number, default: 1024 * 1024},
-    uploadLink: {
-      type: String,
-      default: '/storage/chat'
-    },
-  },
-  emits:['see','msg-submit'],
-  data() {
-    return {
-      timeout_id: null
-    }
-  },
-  computed: {
-    msgs() {
-      let res = []
-      this.messages.forEach((msg, i) => {
-        let m = Object.assign({}, msg)
-        delete m.user_id
-        if (res[res.length - 1] && msg.user_id === res[res.length - 1].user_id) {
-          res[res.length - 1]['list'].push(m)
-        } else {
-          res.push({
-            '_id': i,
-            'user_id': msg.user_id,
-            'list': [m]
-          })
-        }
-      })
-      return res
-    }
-  },
-  methods: {
-    onMsgSubmit: function (message) {
-      let d = message
-      d.id = this.$helper.uniqueId(16)
-      d.created_at = new Date()
-
-      this.$emit("msg-submit", d)
-      clearTimeout(this.timeout_id)
-      this.timeout_id = setTimeout(() => {
-        this.$refs.msgList.goToBottom()
-      }, 100)
-    }
-  },
-}
-</script>
-<style lang="scss">
-@use "../../style/variables/base";
-
-.#{base.$prefix}chat {
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-  align-items: stretch;
-  overflow: hidden;
-  background: var(--color-sheet);
-  color: var(--color-on-sheet);
-}
-</style>

package/components/chip/index.js

@@ -1,3 +0,0 @@
-export * as rChip from './index.vue'
-export * as l_Btn from '../button/index.js'
-export * as l_icon from '../icon/index.js'