renusify 2.5.2 → 3.0.0

package/components/icon/style.scss

@@ -1,17 +0,0 @@
-@use "../../style/variables/base";
-@use "../../style/mixins";
-
-.#{base.$prefix}icon {
-  display: inline-flex;
-  vertical-align: -.5rem;
-
-  &.icon-disabled {
-    @include mixins.disable-states();
-  }
-
-  @include mixins.rtl() {
-    &:not(.exact-icon) {
-      transform: scale(-1, 1);
-    }
-  }
-}

package/components/infinite/div.js

@@ -1,6 +0,0 @@
-export * as rInfiniteDiv from './div.vue'
-export * as l_container from '../container/index.js'
-export * as l_row from '../container/row.js'
-export * as l_col from '../container/col.js'
-export * as l_line from '../progress/line.js'
-export * as d_scroll from '../../directive/scroll/index.js'

package/components/infinite/div.vue

@@ -1,193 +0,0 @@
-<template>
-    <r-container class="container-fluid">
-        <r-row>
-            <r-col class="pa-0">
-                <div :style="{'max-height': height,'height': height,}"
-                     v-scroll="onScroll"
-                     ref="chat"
-                     class="infinite-container">
-                    <transition-group :name="isChat?'slide-up':'slide-down'"
-                                      :class="{'flex-column-reverse':isChat}"
-                                      tag="div" class="row no-gutters">
-                        <r-col class="col-12" v-for="(item,i) in datacollection" :key="item._id||i">
-                            <slot v-bind:item="item">{{item}}</slot>
-                        </r-col>
-                        <r-col class="col-12" key="loading">
-                          <r-progress-line color="color-two"
-                                           v-show="loading"></r-progress-line>
-                        </r-col>
-                    </transition-group>
-                </div>
-
-            </r-col>
-            <r-col class="col-12 text-center title-1"
-                   v-if="noItem"
-            >{{ $t('no_item', 'renusify') }}
-            </r-col>
-        </r-row>
-    </r-container>
-</template>
-
-<script>
-
-export default {
-        name: 'r-infinite-div',
-        props: {
-            isChat: Boolean,
-            height: {
-                default: '400px',
-                type: String
-            },
-            url: {
-                required: true,
-                type: String
-            },
-            query: {
-                type: Object
-            },
-            live: Boolean,
-            liveTimer: {
-                default: 10000,
-                type: Number
-            },
-          headers: Object
-        },
-        data() {
-            return {
-                datacollection: [],
-                page: 1,
-                loading: false,
-                total: 0,
-                set: null,
-                noItem: false,
-                id: null,
-                first: true,
-                active: true,
-            }
-        },
-        mounted() {
-            this.get(this.live)
-        },
-        watch: {
-            live: function () {
-                clearInterval(this.id)
-                if (this.live) {
-                    this.get(true)
-                }
-            }
-        },
-        methods: {
-            onScroll(e) {
-                let offset = 0
-                if (this.isChat) {
-                    offset = e.target.scrollTop
-                } else {
-                    offset = e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight
-                }
-                if (offset < 200) {
-                    if (!this.loading) {
-                        if (this.datacollection.length < this.total) {
-                            this.page++
-                            this.get()
-                        }
-                    }
-                }
-            },
-            get(live = false) {
-              clearInterval(this.id)
-              if (!this.active) {
-                return
-              }
-              this.loading = true
-              this.noItem = false
-              let end = true
-              let par = {'page': this.page}
-
-              if (live === true) {
-                par = {'page': 1}
-                end = false
-              }
-              if (this.query) {
-                Object.assign(par, this.query)
-
-              }
-              this.$axios.get(this.url, {params: par, headers: this.headers}).then(
-                  (res) => {
-                    this.push(res.data.data, end)
-                    this.total = res.data.total
-                    if (this.total === 0) {
-                      this.noItem = true
-                    }
-                    this.loading = false
-                  }, () => {
-                    this.loading = false
-                  })
-                if (live&&this.live) {
-                    this.id = setInterval(() => {
-                        this.get(true)
-                    }, this.liveTimer)
-                }
-            },
-            push(data, end = false) {
-                let el = this.$refs.chat
-                let can = false
-                if (this.isChat) {
-                    can = el.scrollHeight <= el.scrollTop + el.clientHeight
-                } else {
-                    can = el.scrollTop === 0
-                }
-                if (!end) {
-                    let d = data
-                    const lng=this.datacollection.length
-                    for (let key = 0; key < lng; key++) {
-                        if (key <= data.length) {
-                            if (this.$helper.searchArray(d, '_id', this.datacollection[key]['_id']) === false) {
-                                d.push(this.datacollection[key])
-                            }
-                        } else {
-                            d.push(this.datacollection[key])
-                        }
-                    }
-                    this.datacollection = d
-                } else {
-                    let d = this.datacollection
-                    const lng=data.length
-                    for (let key = 0; key < lng; key++) {
-                        if (this.$helper.searchArray(d, '_id', data[key]['_id']) === false) {
-                            d.push(data[key])
-                        }
-                    }
-                    this.datacollection = d
-                }
-
-                setTimeout(() => {
-                    if (this.isChat) {
-                        if (this.first || can) {
-                            el.scrollTop = el.scrollHeight;
-                            this.first = false
-                        }
-                    } else if (can) {
-                        el.scrollTop = 0;
-                    }
-
-                }, 0)
-            }
-        },
-        activated() {
-            this.active = true
-        },
-        deactivated() {
-            this.active = false
-        },
-        unmounted() {
-            this.active = false
-            clearInterval(this.id)
-        }
-    }
-</script>
-<style lang="scss">
-    .infinite-container {
-        width: 100%;
-        overflow-x: hidden;
-    }
-</style>

package/components/infinite/page.js

@@ -1,3 +0,0 @@
-export * as rInfinitePage from './page.vue'
-export * as l_line from '../progress/line.js'
-export * as d_scroll from '../../directive/scroll/index.js'

package/components/infinite/page.vue

@@ -1,105 +0,0 @@
-<template>
-    <div class="infinite-page">
-      <div v-scroll.window="onScroll" class="infinite-page-container">
-            <slot :items="datacollection" :total="total"></slot>
-        </div>
-        <r-progress-line color="color-two"
-                         v-show="loading"
-
-        ></r-progress-line>
-        <div class="text-center title-2"
-             v-if="noItem"
-        >{{ noItemMsg }}
-        </div>
-    </div>
-</template>
-
-<script>
-
-export default {
-        name: 'r-infinite-page',
-        props: {
-            url: {
-                required: true,
-                type: String
-            },
-          query: {
-            type: Object
-          },
-          noItemMsg: {
-            type: String,
-            default: 'ITEMS NOT FOUND'
-          },
-          distanceLoad: {
-            type: Number,
-            default: 150
-          },
-          headers: Object
-        },
-        data() {
-            return {
-                datacollection: [],
-                page: 1,
-                active: true,
-                loading: false,
-                total: 0,
-                set: null,
-                noItem: false
-            }
-        },
-        created() {
-            this.get()
-        },
-        activated() {
-            this.active = true
-        },
-        deactivated() {
-            this.active = false
-        },
-        methods: {
-            onScroll(e) {
-                if (this.active && document.body.offsetHeight < ((window.innerHeight + window.scrollY) + this.distanceLoad).valueOf()) {
-                    if (!this.loading) {
-                        this.page++
-                        if (this.datacollection.length < this.total) {
-                            this.get()
-                        }
-                    }
-                }
-
-            },
-            get() {
-                this.$helper.log('infinite page get')
-                this.loading = true
-                this.noItem = false
-                let par = {'page' :this.page}
-                if (typeof this.query==='object') {
-                    Object.assign(par,{},this.query)
-                }
-              this.$axios.get(this.url, {params: par, headers: this.headers}).then(
-                  (res) => {
-                    this.push(res.data.data)
-                    this.total = res.data.total
-                    if (this.total === 0) {
-                      this.noItem = true
-                    }
-                    this.loading = false
-                  }, () => {
-                    this.loading = false
-                  })
-            },
-            push(data) {
-                const lng=data.length
-                for (let key = 0; key < lng; key++) {
-                    this.datacollection.push(data[key])
-                }
-            }
-        },
-    }
-</script>
-<style>
-    .infinite-page {
-        margin-bottom: 100px;
-        width: 100%
-    }
-</style>

package/components/list/index.js

@@ -1,3 +0,0 @@
-export * as rList from './index.vue'
-export * as l_icon from '../icon/index.js'
-export * as d_ripple from '../../directive/ripple/index.js'

package/components/list/index.vue

@@ -1,122 +0,0 @@
-<template>
-  <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>
-import './style.scss'
-import Ripple from '../../directive/ripple/index.js'
-
-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'
-      }
-
-      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] = {[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
-
-      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 = []
-        }
-
-        val.push(item)
-      }
-
-      this.$emit('update:modelValue', this.multiple ? val : val[0])
-    }
-  }
-
-}
-</script>

package/components/list/style.scss

@@ -1,66 +0,0 @@
-@use "sass:map";
-@use "../../style/variables/base";
-
-$item-height: 48px;
-
-.#{base.$prefix}list {
-  border-radius: map.get(base.$borders, 'sm');
-  display: block;
-  padding: 8px 0;
-  will-change: box-shadow;
-  flex: 0 1 auto;
-  position: relative;
-  max-width: 100%;
-
-  &.list-subheader {
-    align-items: center;
-    display: flex;
-    height: 48px;
-    font-size: 0.875rem;
-    font-weight: 400;
-    padding: 0 16px 0 16px;
-  }
-
-  &.list-disabled {
-    pointer-events: none;
-  }
-
-  .list-item {
-    align-items: center;
-    display: flex;
-    flex: 1 1 100%;
-    letter-spacing: normal;
-    min-height: $item-height;
-    outline: none;
-    padding: 0 16px;
-    position: relative;
-    text-decoration: none;
-    margin-bottom: 4px;
-    &:hover {
-      cursor: pointer;
-      background-color: var(--color-sheet-container);
-      color: var(--color-on-sheet);
-    }
-
-    &.list-item-active {
-      background-color: var(--color-one-container);
-      color: var(--color-on-one-container);
-
-      .#{base.$prefix}icon {
-        color: inherit;
-      }
-    }
-  }
-
-  &.list-flat {
-    .list-item {
-      border-radius: 0;
-    }
-  }
-
-  &.list-rounded {
-    .list-item {
-      border-radius: map.get(base.$borders, 'xl');
-    }
-  }
-}

package/components/message/index.js

@@ -1,4 +0,0 @@
-export * as rMessage from './index.vue'
-export * as l_c from '../container/index.js'
-export * as l_r from '../container/row.js'
-export * as l_co from '../container/col.js'

package/components/message/index.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="h-center">
-    <template v-for="(item,i) in items"
-              :key="i">
-      <slot :item="item" :k="i">
-        <div :class="`color-${type}`"
-             class="mb-2 br-md">
-          <r-container>
-            <r-row>
-              <r-col class="col-auto">
-                {{ $t(i) }}:
-              </r-col>
-              <r-col>
-                <div v-for="(er,k) in item" :key="k">
-                  {{ $t(er) }}
-                </div>
-              </r-col>
-            </r-row>
-          </r-container>
-        </div>
-      </slot>
-    </template>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'message',
-  props: {
-    items: {
-      required: true,
-      type: [Array, Object]
-    },
-    type: {
-      default: 'error',
-      type: String
-    }
-  }
-}
-</script>